nextlint

NextLint

Editor Teks Kaya (Wysiwyg) ditulis dalam Svelte, menggunakan Kerangka CSS CSS CSS.

Dibangun di atas editor Tiptap (editor tanpa kepala) dan prosemirror. Mudah digunakan, kembangkan, dan pertahankan. Mesin cepat yang membantu mengintegrasikan dengan AI API apa pun, dan meningkatkan pengalaman menulis.

Tema gelap/terang didukung dan dapat disesuaikan.

Memulai

Memasang

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

Pengaturan

Nexltint Editor menggunakan komponen svelte tanpa kepala dari Meltui dan Styles dengan tailwindcss. Token tema diwarisi dari Svelte shadcn.

Jika Anda sudah memiliki pengaturan shadcn di proyek Anda maka Anda dapat melewatkan bagian ini.

1. Instal TailwindCSS dan PostCSS:

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

Sekarang tailwind.config.js dan postcss.config.js dibuat

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

Tema dapat disesuaikan melalui token CSS. Token default terletak di Editortheme.scss.

Penggunaan:

Untuk menggunakan tema default, Anda perlu membungkus komponen SvelteEditor Anda dengan 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 Basical hanya mengimpor tema default yang kami tentukan di EditorTheme.scss :

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

//EditorTheme.svelte

< slot />

Nexltint Editor menggunakan nextlint/core , yang merupakan editor tanpa kepala dengan plugin yang ada yang diinstal, dapat digunakan dalam kerangka kerja UI apa pun, kompatibel dengan sistem Tiptap dan Prosemirror Plugin.

NextLint Svelte sendiri memiliki beberapa plugin yang sepenuhnya ditulis dalam langsing dan dapat dikonfigurasi

Fitur

Menu gelembung

Menu Slash

Gambar

Dukungan Upload/Embed/Unsplash API

Ai prompt

Opsi

Nama	Jenis	Keterangan
content	Content	Inisialisasi konten editor
onChange	(editor:Editor)=>void	Panggilan balik akan menelepon saat editor berubah
placeholder?	String	Placeholder akan ditampilkan saat editor kosong
onCreated?	(editor:Editor)=>void	Panggilan balik akan memicu sekali saat editor dibuat
plugins?	PluginsOptions	Kustomisasi opsi plugin
extensions?	Extensions	Kustomisasi Ekstensi Editor

isi

Jenis: HTMLContent | JSONContent | JSONContent[] | null

Inisialisasi konten, dapat berupa markup JSONCONTENT atau 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'
      } ]
    } ]
  } }
/ >

placeholder

Jenis: String | undefined Default String | undefined : undefined

Placeholder akan ditampilkan saat konten editor kosong

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

Onchange

Jenis: (editor: Editor)=>void

Callback akan menembak saat editor berubah (pembaruan status atau seleksi)

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

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

oncreated

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

Callback akan menembak setelah editor selesai menginisialisasi

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

plugin

Jenis: PluginOptions | undefined Default PluginOptions | undefined : undefined

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

plugins.image

Jenis: ImagePluginOptions|undefined : undefined

Konfigurasikan fungsi handleupload dan tombol API pengaturan untuk mengambil gambar dari 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 '
          }
        },
      }
/>

plugin.ask

Jenis: AskOptions|undefined : undefined

Trigger Prompt di baris kosong, dapatkan pertanyaan dari editor, hubungi fungsi pegangan melalui konfigurasi ini dan tambahkan hasilnya ke editor. Izinkan untuk berintegrasi dengan AI di luar 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 '
    }
  }
/>

plugin.dropcursor

Jenis: DropcursorOptions|undefined : undefined

Konfigurasi warna dropcursor/lebar/kelas.

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

plugins.codeBlock

Jenis: NextlintCodeBlockOptions|undefined

Bawaan:

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

Tema codeBlock akan disinkronkan dengan alat peraga 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 '
        }
      }
    }}
  />

Berkontribusi

Harap ikuti Pedoman Kontribusi

Lisensi

Lisensi MIT (MIT). Silakan lihat file lisensi untuk informasi lebih lanjut.