marktion

中文/اللغة الإنجليزية

تقديم علامة

Marktion هو محرر Markdown Wysiwyg يعتمد على Prosemirror ، مكرس لتعزيز تجربة التحرير للتخفيض.

انظر موقعنا على شبكة الإنترنت marktion.io في العمل.

سمات

• [جديد] تكامل الذكاء الاصطناعي : واجهة محادثة مدمجة في الذكاء الاصطناعى ، ودعم ملحقات المكون الإضافي لمنظمة العفو الدولية ، التي تم استدعاؤها في بداية الخط عن طريق الضغط على مساحة ؛

• تحرير WYSIWYG : معاينة في الوقت الفعلي لنتائج عرض التخفيض ، وتوفير تجربة تحرير بديهية ، ويمكنك التبديل بين وضع التعليمات البرمجية المصدر ووضع تحرير WYSIWYG مع CTRL + /؛

• القائمة المائلة وقائمة الفقاعة : مستوحاة بسرعة من محرر الفكرة باستخدام /؛ دعم الوضع المظلم: دعم لتشغيل أو إيقاف الوضع المظلم.

• دعم الوضع المظلم : تمكين الوضع المظلم لتوفير تجربة تحرير مريحة بصريًا في بيئات الإضاءة المنخفضة.

التثبيت والاستخدام

1. تثبيت التبعيات.

npm intall marktion

2. الاستخدام

 import { ReactEditor } from 'marktion' ;
import 'marktion/dist/style.css' ;

function Editor ( ) {
  return < ReactEditor content = { `# Hello World` } /> ;
}

3. مثال

إلقاء نظرة على الأمثلة لرؤية marktion.io في العمل.

API

رد الفعل

ملكية	وصف	يكتب	تقصير
محتوى	المحتوى الأولي للتخفيض للمحرر.	خيط	-
مظلم	تمكين أو تعطيل الوضع المظلم في المحرر.	منطقية	خطأ شنيع
التحميل	وظيفة رد الاتصال لتحميل الصور.	(file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url>	-
يجعل	وضع العارض	WYSIWYG | SOURCE
onchange	محتوى المحرر تغيير رد الاتصال	(editor: Marktion) => void

راجع وثائق Tiptap للعثور على المزيد من واجهات برمجة التطبيقات.

MarktionRef

ملكية	وصف	يكتب	تقصير
محرر	مثيل علامة	علامة	-

مثال الاستخدام:

 import { ReactEditor , ReactEditorRef } from 'marktion' ;

function App ( ) {
  const editorRef = useRef < ReactEditorRef > ( null ) ;

  const onExport = ( ) => {
    const content = editorRef . current ?. editor . getContent ( ) ;
    console . log ( content ) ;
  } ;

  return (
    < >
      < button onClick = { onExport } > export </ button >
      < ReactEditor ref = { editorRef } />
    </ >
  ) ;
} 

الإضافات

المكون الإضافي الذكاء الاصطناعي

يعتمد البرنامج المساعد AI على Vercel AI. قبل البدء ، تحتاج إلى إنشاء جهاز توجيه منظمة العفو الدولية. يرجى الرجوع إلى الوثائق لمزيد من المعلومات: البدء.

مثال الاستخدام:

 function Editor ( ) {
  const ai = useAI ( {
    basePath : import . meta . env . VITE_OPENAI_BASE_URL
  } ) ;

  return (
    < ReactEditor ref = { editorRef } plugins = { [ ai . plugin ] } >
      { ai . element }
    </ ReactEditor / >
  )
} 

المساهمة

شكرا لك على النظر في المساهمة في علامة! إذا كنت ترغب في المساهمة ، فيرجى اتباع هذه الخطوات:

1. مفترق المستودع إلى حساب github الخاص بك.

2. استنساخ المستودع المتشعب إلى جهازك المحلي.

git clone https://github.com/yourusername/marktion.git
cd marktion

3. تثبيت التبعيات.

pnpm i

4. قم بإجراء التغييرات واختبار التعديلات الخاصة بك.

5. ارتكب تغييراتك.

6. إنشاء طلب سحب.

انتقل إلى المستودع الأصلي وانقر على "طلب سحب جديد". املأ التفاصيل اللازمة ووصف التغييرات التي أجريتها.

سنراجع طلب السحب الخاص بك في أقرب وقت ممكن. شكرا لك على مساهمتك!

رخصة

هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص لمزيد من التفاصيل.

اتصال

إذا كان لديك أي أسئلة أو اقتراحات أو مشكلات ، فلا تتردد في التواصل معنا من خلال القنوات التالية:

• البريد الإلكتروني: [email protected]

• تعقب المشكلات: مشكلات المشروع (يرجى تحديد نوع المشكلة في عنوان المشكلة)