nextlint

NextLint

محرر نصية ريتش (WYSIWYG) مكتوبة في سفيلتي ، باستخدام إطار عمل Meltui Headui Leadless و Tailwindcss CSS.

بنيت على قمة محرر Tiptap (محرر Headless) و Prosemirror. سهل الاستخدام وتطوير وصيانة. محرك سريع يساعد على الاندماج مع أي API من الذكاء الاصطناعي ، وتعزيز تجربة الكتابة.

السمة المظلمة/الخفيفة مدعومة وقابلة للتخصيص.

ابدء

ثَبَّتَ

//npm
npm install @nextlint/svelte

//yarn
yarn add @nextlint/svelte

//pnmp
npm add @nextlint/svelte

يثبت

يستخدم محرر Nexltint مكونات مقطوعة الرأس من Meltui وتسليطها مع Tailwindcss. ورث الرموز المميزة من Svelte Shadcn.

إذا كان لديك بالفعل إعداد Shadcn في مشروعك ، فيمكنك تخطي هذا الجزء.

1. تثبيت tailwindcss و postcss:

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

الآن يتم إنشاء tailwind.config.js و postcss.config.js

2. تكوين 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 : [ ]
} ;

يمكن للموضوع تخصيص عبر الرموز CSS. يقع الرمز المميز الافتراضي في editortheme.scss.

الاستخدام:

لاستخدام السمة الافتراضية ، تحتاج إلى لف مكون SvelteEditor بك مع 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 فقط استيراد الموضوع الافتراضي الذي نحدده في EditorTheme.scss :

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

//EditorTheme.svelte

< slot />

يستخدم Nexltint Editor nextlint/core ، وهو محرر مقطوع الرأس مع مكونات إضافية مثبتة ، في أي إطار واجهة المستخدم ، متوافق مع نظام الإضافات Tiptap و Prosemirror.

يحتوي NextLint Svelte نفسه على بعض الإضافات المكتوبة بالكامل في Svelte وقابلة للتكوين

سمات

قائمة الفقاعة

القائمة المائلة

صورة

دعم تحميل/تضمين/غير مصممة واجهة برمجة التطبيقات

مطالبة الذكاء الاصطناعي

خيارات

اسم	يكتب	وصف
content	Content	تهيئة محتوى المحرر
onChange	(editor:Editor)=>void	سوف يتصل رد الاتصال عندما يتغير المحرر
placeholder?	String	سيتم عرض العنصر النائب عندما يكون المحرر فارغًا
onCreated?	(editor:Editor)=>void	سيؤدي رد الاتصال إلى تشغيل مرة واحدة عند إنشاء المحرر
plugins?	PluginsOptions	تخصيص خيارات الإضافات
extensions?	Extensions	تخصيص تمديد المحرر

محتوى

النوع: HTMLContent | JSONContent | JSONContent[] | null

تهيئة المحتوى ، يمكن أن يكون jsoncontent أو علامة 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'
      } ]
    } ]
  } }
/ >

عنصر نائب

النوع: String | undefined الافتراضي String | undefined : undefined

سيتم عرض العنصر النائب عندما يكون محتوى المحرر فارغًا

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

onchange

النوع: (editor: Editor)=>void

سيطلق رد الاتصال عند تغيير المحرر (تحديث الحالة أو الاختيار)

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

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

oncreated

النوع: (editor: Editor)=>void | undefined الافتراضي (editor: Editor)=>void | undefined : undefined

سيطلق رد الاتصال بمجرد انتهاء المحرر

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

الإضافات

النوع: PluginOptions | undefined الافتراضي PluginOptions | undefined : undefined

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

الإضافات

النوع: ImagePluginOptions|undefined : undefined

قم بتكوين وظيفة HandlePload وإعداد مفتاح API لجلب الصور من 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 '
          }
        },
      }
/>

المكونات الإضافية

النوع: AskOptions|undefined : undefined

موجه المشغل في سطر فارغ ، احصل على السؤال من المحرر ، واتصل بوظيفة المقبض عبر هذا التكوين وإلحاق النتيجة بالمحرر. السماح للاندماج مع أي منظمة العفو الدولية خارج المحرر.

< 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

النوع: DropcursorOptions|undefined : undefined

Config DropCursor Color/عرض/فئة.

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

Plugins.codeblock

النوع: NextlintCodeBlockOptions|undefined

تقصير:

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

سوف يتزامن موضوع codeBlock مع الدعائم 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 '
        }
      }
    }}
  />

المساهمة

يرجى اتباع المبدأ التوجيهي المساهمة

رخصة

ترخيص معهد ماساتشوستس للتكنولوجيا (MIT). يرجى الاطلاع على ملف الترخيص لمزيد من المعلومات.