nextlint

NextLint

Editor de texto Rich (Wysiwyg) escrito em Site, usando a UI sem cabeça Meltui e a estrutura CSS CSS.

Construído em cima do Tipptap Editor (editor sem cabeça) e Prosemirror. Fácil de usar, desenvolver e manter. Um mecanismo rápido que ajuda a integrar -se a qualquer API da IA ​​e aprimorar a experiência de escrita.

O tema escuro/claro é suportado e personalizável.

Começando

Instalar

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Configurar

O Nexltint Editor usa componentes esbeltos sem cabeça do Meltui e o estiliza com o TailWindcss. Os tokens temáticos são herdados da Sieve Shadcn.

Se você já possui a configuração do Shadcn em seu projeto, poderá pular esta parte.

1. Instale o TailWindcss e PostCSS:

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

Agora tailwind.config.js e postcss.config.js são criados

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

O tema pode personalizar via Tokens CSS. O token padrão está localizado em editortheme.scss.

Uso:

Para usar o tema padrão, você precisa embrulhar seu componente SvelteEditor com 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 >

O Basicaly EditorTheme basta importar o tema padrão que definimos no EditorTheme.scss :

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

//EditorTheme.svelte

< slot />

O Nexltint Editor usa nextlint/core , que é um editor sem cabeça com plugins existentes instalados, pode ser usado em qualquer estrutura da interface do usuário, compatível com o sistema de plugins TippAp e Prosemirror.

NextLint SVELE

Características

Menu de bolhas

Menu de barra

Imagem

Suporte API de upload/incorporação/unsplash

AI Prompt

Opções

Nome	Tipo	Descrição
content	Content	Inicialize o conteúdo do editor
onChange	(editor:Editor)=>void	Um retorno de chamada ligará quando o editor mudar
placeholder?	String	O espaço reservado será exibido quando o editor vazio
onCreated?	(editor:Editor)=>void	Um retorno de chamada será acionado uma vez quando o editor for criado
plugins?	PluginsOptions	Personalize as opções de plugins
extensions?	Extensions	Personalize a extensão do editor

contente

Tipo: HTMLContent | JSONContent | JSONContent[] | null

Inicialize o conteúdo, pode ser um JSONCONTENT ou uma marcação 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'
      } ]
    } ]
  } }
/ >

espaço reservado

Tipo: String | undefined Padrão String | undefined : undefined

Espaço reservado será exibido quando o conteúdo do editor estiver vazio

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

OnChange

Tipo: (editor: Editor)=>void

O retorno de chamada disparará quando o editor mudar (atualizar estado ou seleção)

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

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

OnCreated

Tipo: (editor: Editor)=>void | undefined Padrão (editor: Editor)=>void | undefined : undefined

O retorno de chamada disparará quando o editor terminar a inicialização

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

plugins

Tipo: PluginOptions | undefined Padrão PluginOptions | undefined : undefined

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

plugins.image

Tipo: ImagePluginOptions|undefined Padrão: undefined

Configurar a Função do Handleupload e configurar a tecla API para buscar imagens do 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

Tipo: AskOptions|undefined : undefined

Prompt de gatilho em uma linha vazia, obtenha a pergunta do editor, ligue para a função Handle através desta configuração e anexa o resultado ao editor. Deixe se integrar a qualquer AI fora do 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/Width/Class.

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

plugins.codeblock

Tipo: NextlintCodeBlockOptions|undefined

Padrão:

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

O tema codeBlock será sincronizado com os adereços 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 '
        }
      }
    }}
  />

Contribuindo

Siga a diretriz de contribuição

Licença

A licença do MIT (MIT). Consulte o arquivo de licença para obter mais informações.