Nextlint

Nextlint is a WYSIWYG (What You See Is What You Get) editor built using the "@tiptap" library and developed with Svelte. It provides a user-friendly interface for editing and formatting text, allowing users to create rich content effortlessly.

• 💻 Easy-to-use: The editor provides a simple and intuitive interface, making it easy for users to create and edit content without any technical knowledge.
• ✍️ Rich Text Editing: Users can format text using various styles such as bold, italic, underline, headings, lists, and more.
• 🧱 Extensible: You can extend the editor's functionality by adding or creating custom extensions, allowing you to integrate additional features or customize the behavior of the editor.
• 🧠 Integrate openAI,GPT functionality: Unlocking the Power of Creative and Swift Writing with OpenAI and GPT Support.

Features

Bubble Menu

Slash Menu

Image

Support upload/embed/unsplash api

GPT prompt

... and many more.

Demo:

https://nextlint-editor.vercel.app/

Quick start

Install the package:

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Setup

<script lang="ts">
  import {type Editor, EditorTheme, SvelteEditor} from '@nextlint/svelte';

  let editor: Editor;

  const submitPromt = async (prompt: string) => {
    // handle prompt for GPT plugin
    return '';
  };

  const handleUpload = async (file: File) => {
    // handle upload here
    const blob = new Blob([file]);
    const previewUrl = URL.createObjectURL(blob);
    return previewUrl;
  };

</script>

<EditorTheme>
  <SvelteEditor
    content={''}
    placeholder="Press 'space' GPT support, type '/' for help"
    onCreated={createdEditor => { editor = createdEditor }}
    onChange={nextEditor => { editor = nextEditor }}

    <!-- plugins config -->
    plugins={{
      selectImage: {
        handleUpload,
        unsplash: {
          accessKey: 'UNPLASH_API_KEY'
        }
      },
      gpt: {query: submitPromt}
    }}

  />
</EditorTheme>

Customize EditorTheme

Nextlint use svelteui to implement node view and editor components so we recommend using SvelteUI to implement a custom node view for a more consistent user interface. Default editor tokens.

:root {
      '--editor-font': "'Literata', serif",
      '--editor-font-heading': "'Bitter', serif",
      '--editor-font-code': "'Fira Code', monospace",
      '--editor-font-size': '1.1rem',
      '--editor-font-height': '1.7rem',
      '--editor-block-gap': '16px'
}

You can customize your content style by overriding the EditorTheme style via override props. The implementation can be found at.EditorTheme.svelte Default editor tokens

Override Editor Font

    <EditorTheme
      override={{
        '--editor-font': "'Roboto'",
        '--editor-font-size': '15px',
        '--editor-font-height': '22px',
        '--editor-block-gap': '8px',
      }}
    >
     <Editor/>
  </EditorTheme>

Override Editor Style

    <EditorTheme
      override={{
        '& .ProseMirror': {
           // customize blockquote
          '& blockquote':{
              backgroundColor:'teal',
              boxShadow:'...'
          },
           // customize block code
          '& pre':{
              backgroundColor:'#000',
              fontFamily:'FiraCode'
          }
        }
      }}
    >
     <Editor/>
  </EditorTheme>

Contributing

Please follow the contribute guideline

License

The MIT License (MIT). Please see License File for more information.