nextlint

A continuación

Rich Text Editor (WYSIWYG) Escrito en Svelte, utilizando el marco CSS de UI y Tailwindcss de Meltui Headless.

Construido sobre el editor de Tiptap (editor sin cabeza) y prosemirror. Fácil de usar, desarrollar y mantener. Un motor rápido que ayuda a integrarse con cualquier API de AI y mejorar la experiencia de escritura.

El tema oscuro/ligero es compatible y personalizable.

Empezando

Instalar

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Configuración

El editor de NexlTint utiliza componentes sonoros sin cabeza de Meltui y lo estiliza con Tailwindcss. Los tokens temáticos se heredan de Svelte Shadcn.

Si ya tiene la configuración de ShadCN en su proyecto, puede omitir esta parte.

1. Instale Tailwindcss y PostCSS:

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

Ahora se crean tailwind.config.js y postcss.config.js

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

El tema puede personalizar a través de tokens CSS. El token predeterminado se encuentra en editortheme.scss.

Uso:

Para usar el tema predeterminado, debe envolver su componente SvelteEditor con 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 >

EditorTheme Basicaly solo importe el tema predeterminado que definimos en EditorTheme.scss :

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

//EditorTheme.svelte

< slot />

El editor NEXLTINT utiliza nextlint/core , que es un editor sin cabeza con complementos existentes instalados, se puede usar en cualquier marco de UI, compatible con TipTap y el sistema de complementos Prosemirror.

NextLint Svelte tiene algunos complementos completamente escritos en esbelte y configurables

Características

Menú de burbujas

Menú de corte

Imagen

API de carga/incrustación/Unsplash Unsplash

AI Aviso

Opción

Nombre	Tipo	Descripción
content	Content	Inicializar el contenido del editor
onChange	(editor:Editor)=>void	Una devolución de llamada llamará cuando cambie el editor
placeholder?	String	El marcador de posición se mostrará cuando el editor se vacíe
onCreated?	(editor:Editor)=>void	Una devolución de llamada se activará una vez que se cree el editor
plugins?	PluginsOptions	Opciones de complementos personalizar
extensions?	Extensions	Personalizar la extensión del editor

contenido

Tipo: HTMLContent | JSONContent | JSONContent[] | null

Inicializar el contenido, puede ser un JSONContent o un marcado HTML.

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

marcador de posición

Tipo: String | undefined predeterminado String | undefined : undefined

El marcador de posición se mostrará cuando el contenido del editor esté vacío

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

en el cambio

Tipo: (editor: Editor)=>void

La devolución de llamada se disparará cuando cambie el editor (estado de actualización o selección)

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

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

abatido

Tipo: (editor: Editor)=>void | undefined predeterminado (editor: Editor)=>void | undefined : undefined

La devolución de llamada disparará una vez que el editor termine inicializando

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

complementos

Tipo: PluginOptions | undefined predeterminado PluginOptions | undefined : undefined

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

Plugins.image

Tipo: ImagePluginOptions|undefined predeterminado: undefined

Configure la función HandleUppload y Configuración de la tecla API para obtener imágenes desde 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 '
          }
        },
      }
/>

complementos.

Tipo: AskOptions|undefined : undefined

Activar la solicitud en una línea vacía, obtener la pregunta del editor, llamar a la función de identificación a través de esta configuración y agregar el resultado al editor. Permitir integrarse con cualquier lado de IA en el 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

Tipo: DropcursorOptions|undefined : undefined

Config dropcursor color/ancho/clase.

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

plugins.codeBlock

Tipo: NextlintCodeBlockOptions|undefined

Por defecto:

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

El tema codeBlock se sincronizará con los accesorios theme .

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

Que contribuye

Siga la guía de contribución

Licencia

La licencia MIT (MIT). Consulte el archivo de licencia para obtener más información.