lynhan318/nextlint

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

Nextlint

Rich text editor (WYSIWYG) written in Svelte, using MeltUI headless UI and tailwindcss CSS framework.

Built on top of tiptap editor(headless editor) and prosemirror. Easy to use, develop and maintain. A prompt engine that helps to integrate with any AI API, and enhance the writing experience.

Dark/Light theme is supported and customizable.

Getting started

Install

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Setup

Nexltint editor uses headless svelte components from MeltUI and styles it with tailwindcss. The theme tokens are inherited from Svelte Shadcn.

If you already have shadcn setup in your project then you can skip this part.

1. Install tailwindcss and postcss:

pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p

Now tailwind.config.js and postcss.config.js are created

2. Configure tailwind.config.js:

// more detail at https://www.shadcn-svelte.com/docs/installation/manual

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{svelte,js}',
    './node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
  ],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border) / <alpha-value>)',
        input: 'hsl(var(--input) / <alpha-value>)',
        ring: 'hsl(var(--ring) / <alpha-value>)',
        background: 'hsl(var(--background) / <alpha-value>)',
        foreground: 'hsl(var(--foreground) / <alpha-value>)',
        primary: {
          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
        },
        card: {
          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      },
      fontFamily: {
        sans: ['Inter']
      }
    }
  },
  plugins: []
};

Theme can customize via css tokens. The default token is located at EditorTheme.scss.

Usage:

To use the default theme, you need to wrap your SvelteEditor component with ThemeTheme:

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

<div class="editor">
  <EditorTheme>
    <SvelteEditor content="" placeholder="Start editing..." />
  </EditorTheme>
</div>

The EditorTheme basicaly just import the default theme we define in EditorTheme.scss:

<script lang="ts">
  import './EditorTheme.scss';
</script>

//EditorTheme.svelte

<slot />

Nexltint editor uses nextlint/core, which is a headless editor with existing plugins installed, can be used in any UI framework, compatible with tiptap and prosemirror plugins system.

Nextlint Svelte itself has some plugins completely written in Svelte and configurable

Features

Bubble Menu

Slash Menu

Image

Support upload/embed/unsplash api

AI prompt

Options

Name	Type	Description
content	Content	Initialize editor content
onChange	(editor:Editor)=>void	A callback will call when the editor change
placeholder?	String	The placeholder will be displayed when the editor empty
onCreated?	(editor:Editor)=>void	A callback will trigger once when the editor is created
plugins?	PluginsOptions	Customize plugins options
extensions?	Extensions	Customize editor extension

content

Type: HTMLContent | JSONContent | JSONContent[] | null

Initialize content, can be a JSONContent or a html markup.

// Can be string
<SvelteEditor
  content="<p>this is a paragraph content</p>"
/>

// which is equal
<SvelteEditor
  ...
  content={{
    type:'docs'
    attrs:{},
    content:[{
      type:'paragraph',
      attrs:{},
      content:[{
        type:'text',
        text:'this is a paragraph content'
      }]
    }]
  }}
/>

placeholder

Type: String | undefined Default: undefined

Placeholder will display when editor content is empty

<SvelteEditor ... content="" placeholder="Press 'space' to trigger AI prompt" />

onChange

Type: (editor: Editor)=>void

The callback will fire when the editor changes ( update state or selection )

<script lang="ts">
  let editor;
</script>

<SvelteEditor
  ...
  onChange={_editor => {
    editor = _editor;
  }}
/>

onCreated

Type: (editor: Editor)=>void | undefined Default: undefined

The callback will fire once the editor finishes initialize

<SvelteEditor
  ...
  onCreated={editor => {
    console.log('The editor is created and ready to use !');
  }}
/>

plugins

Type: PluginOptions | undefined Default: undefined

type PluginOptions = {
  image?: ImagePluginOptions;
  gpt?: AskOptions;
  dropCursor?: DropcursorOptions;
  codeBlock?: NextlintCodeBlockOptions;
};

plugins.image

Type: ImagePluginOptions|undefined Default: undefined

Config the handleUpload function and setup API key to fetch images from unsplash

<SvelteEditor
      ...
      plugins={
        image: {
          handleUpload:(file)=>{
            // handle upload here
                const blob = new Blob([file]);
                const previewUrl = URL.createObjectURL(blob);
                return previewUrl;
          },
          unsplash: {
            accessKey: 'UNPLASH_API_KEY'
          }
        },
      }
/>

plugins.ask

Type:AskOptions|undefined Default: undefined

Trigger prompt in an empty line, get the question from the editor, call the handle function via this config and append the result to the editor. Allow to integrate with any AI out side the editor.

<SvelteEditor
  ...
  plugins={
    ask: async (question:string)=>{
      // config any AI tool to get the result and return
      // the result to the editor
      return 'result from any AI Backend'
    }
  }
/>

plugins.dropCursor

Type: DropcursorOptions|undefined Default: undefined

Config dropCursor color/width/class.

<SvelteEditor
  ...
  plugins={
    dropCursor: {
      width:'2px',
      color:'#000',
    }
  }
/>

plugins.codeBlock

Type: NextlintCodeBlockOptions|undefined

Default:

{
    themes: {
        dark: 'github-dark',
        light: 'github-light'
    },
    langs: []
}

The codeBlock theme will sync with the theme props.

Screen.Recording.2024-04-21.at.11.14.14.mov

  <SvelteEditor
    //....
    content={''}
    onChange={editor.set}
    theme="light"
    plugins={{
      codeBlock: {
        langs: ['c', 'sh', 'javascript', 'html', 'typescript'],
        themes: {
          dark: 'vitesse-dark',
          light: 'vitesse-light'
        }
      }
    }}
  />

Contributing

Please follow the contribute guideline

License

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

nextlint's Issues

wrong padding in SimpleEditor

[BubbleMenu] update block show undefine on figure block

Cannot detect block type on figure

[Plugins][Image] Duplicate image block when submit an image link

Text type menu takes the entire screen width

Great work first of all,

how to regulate visuals like this and correct them?

Also, why the readme mentions the EditorTheme component but when trying to import it it says it doesn't exist?

Broken example?

I can't get the example from the setup instructions in the README to work.
It says to do

  import {type Editor, EditorTheme, SvelteEditor} from '@nextlint/svelte';

but Editor doesn't seem to be exported by this library. Its content is

export { default as SvelteEditor } from './Editor.svelte';
export { default as EditorTheme } from './EditorTheme.svelte';

so no Editor.

[Figure] Consistant alt/title

adding tiptap extensions

Hello!

I wonder how I can add tiptap extensions.
My guess is adding them as a props in SvelteEditor component or somewhere
onCreated={createdEditor => { editor = createdEditor }}

Thank you!

Wrong BubbleMenu position, Overlapse text

[ImageUtils] Prevent Image decorator widget display on other blocks

How to add height:100% here?

[SlashMenu] Wrong text select position

Adding to the Bubble menu, Slash Menu, and Shikiji languages

Is there any way to update the bubble/slash menu or to Shikiji's code block languages? I tried adding the tiptap Heading extension with the four 1, 2, 3, and 4, but it doesn't update, and I couldn't figure out if there was a way to add modify the Shikiji languages list.

BubbleMenu still exist when selection is removed

EditorTheme being imported and overriding styles despite tree-shake

For some reason the EditorTheme is still being imported even though I'm tree shaking, thus overriding my own shadcn settings.

I think EditorTheme shouldn't be included in the index, but maybe on it's own, like so?

import EditorTheme from '@nextlint/svelte/components/EditorTheme.svelte';

When I hover over a route, the route is being prefetched thus also the component listed below. And you can dynamically see my theme change 😂

CleanShot.2024-03-27.at.23.57.17.mp4

This is what my code looks like:

<script lang="ts">
	import type { Editor } from '@nextlint/svelte';
	import { SvelteEditor } from '@nextlint/svelte';
	import type { Content, Extensions, JSONContent } from '@tiptap/core';
	import { cn } from '$lib/utils/ui';

	export let name: string;
	export let placeholder = 'Start typing...';

	export let value: Content;

	function handleOnChange(editor: Editor) {
		value = JSON.stringify(editor.getJSON(), null);
	}
</script>

<div
	class={cn(
		'dark:border-border min-h-[200px] rounded-md border bg-white !p-4 px-3 py-2 shadow-sm ring-offset-white dark:bg-gray-950 dark:ring-gray-950'
	)}
>
	<SvelteEditor content={value} {placeholder} onChange={handleOnChange} />

	<input type="hidden" {name} bind:value />
</div>

[SlashMenu] set text align not remove trigger char

[Plugins][Image] image dialog not destroy when image placeholder is removed

Hide preview link when BubbleMenu is visible

Escap to close tippy component

[SlashMenu] collapse text menu

ImageUtil lost focus when select a node