nextlint

NEXTLINT

Rich Text Editor (WYSIWYG) in Selte geschrieben und mit Meltui Headless UI und Tailwindcss CSS -Framework geschrieben.

Auf dem Zeltap -Editor (Headless Editor) und Prosemirror gebaut. Einfach zu bedienen, zu entwickeln und zu warten. Eine schnelle Engine, die dazu beiträgt, sich in jede KI -API zu integrieren und die Schreiberfahrung zu verbessern.

Dunkel/helles Thema wird unterstützt und anpassbar.

Erste Schritte

Installieren

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Aufstellen

Der NexLTint -Editor verwendet Headless -Svelte -Komponenten von Meltui und stilft es mit Tailwindcss. Die Themen -Token werden von Svelte Shadcn geerbt.

Wenn Sie bereits Shadcn -Setup in Ihrem Projekt haben, können Sie diesen Teil überspringen.

1. Installieren Sie den Tailwindcss und Postcss:

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

Jetzt werden tailwind.config.js und postcss.config.js erstellt

2. Konfigurieren Sie 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 : [ ]
} ;

Das Thema kann über CSS -Token anpassen. Das Standard -Token befindet sich bei editorteMem.scss.

Verwendung:

Um das Standardthema zu verwenden, müssen Sie Ihre SvelteEditor -Komponente mit ihnen mit ThemeTheme einwickeln:

< 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 >

Das EditorTheme -Basicy importieren Sie einfach das Standardthema, das wir in EditorTheme.scss definieren:

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

//EditorTheme.svelte

< slot />

NexLTint -Editor verwendet nextlint/core , ein Kopfless -Editor mit vorhandenen Plugins, die in jedem UI -Framework verwendet werden kann, das mit Tiptap- und Prosemirror -Plugins -System kompatibel ist.

NEXTLINT SELVELTE selbst hat einige Plugins, die vollständig in Svelte und konfigurierbar geschrieben sind

Merkmale

Blasenmenü

Slashmenü

Bild

Unterstützen Sie Upload/Einbetten/Nicht -Plash -API

KI -Eingabeaufforderung

Optionen

Name	Typ	Beschreibung
content	Content	Initialisieren Sie den Editor -Inhalt
onChange	(editor:Editor)=>void	Ein Rückruf wird anrufen, wenn sich der Editor ändert
placeholder?	String	Der Platzhalter wird angezeigt, wenn der Herausgeber leer ist
onCreated?	(editor:Editor)=>void	Ein Rückruf wird einmal ausgelöst, wenn der Editor erstellt wird
plugins?	PluginsOptions	Passen Sie Plugins -Optionen an
extensions?	Extensions	Anpassen der Editor -Erweiterung

Inhalt

Typ: HTMLContent | JSONContent | JSONContent[] | null

Initialisieren Sie Inhalte, kann ein JSONContent oder ein HTML -Markup sein.

 // 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'
      } ]
    } ]
  } }
/ >

Platzhalter

Typ: String | undefined Standard: undefined

Der Platzhalter wird angezeigt, wenn der Editorinhalt leer ist

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

aufchange

Typ: (editor: Editor)=>void

Der Rückruf wird ausgelöst, wenn sich der Editor ändert (Status oder Auswahl aktualisieren).

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

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

aufgebaut

Typ: (editor: Editor)=>void | undefined Standard: undefined

Der Rückruf wird abgefeuert, sobald der Herausgeber initialisiert wird

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

Plugins

Typ: PluginOptions | undefined Standard: undefined

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

Plugins.image

Typ: ImagePluginOptions|undefined Standard: undefined

Konfigurieren Sie die Taste "HandleUpload -Funktion und Setup

< 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

Typ: AskOptions|undefined Standard: undefined

Trigger Eingabeaufforderung in einer leeren Zeile, die Frage aus dem Editor abrufen, die Handlungsfunktion über diese Konfiguration rufen und das Ergebnis dem Editor anhängen. Erlauben Sie, den Herausgeber in eine KI zu integrieren.

< 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

Typ: DropcursorOptions|undefined Standard: undefined

Config DropCursor Farbe/Breite/Klasse.

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

Plugins.Codeblock

Typ: NextlintCodeBlockOptions|undefined

Standard:

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

Das codeBlock -Thema synchronisiert mit den theme -Requisiten.

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 '
        }
      }
    }}
  />

Beitragen

Bitte befolgen Sie die Richtlinie der Beiträge

Lizenz

Die MIT -Lizenz (MIT). Weitere Informationen finden Sie unter Lizenzdatei.