sveltor / nextlint

Rich text editor (WYSIWYG) written in Svelte, build on top of tiptap, prosemirror, AI prompt integrated. Dark/Light theme support

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/

You can find the implementation of the demo in the repostiory at: https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/routes/%2Bpage.svelte

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>

Contributing

Please follow the contribute guideline

License

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