react simple code editor

ردف بوسع محرر الرمز

محرر رمز بلا فطائر بسيط مع تسليط الضوء على بناء الجملة.

لماذا

يوفر العديد من محرري التعليمات البرمجية القائمة على المتصفح مثل ACE و Codemirror و Monaco وما إلى ذلك القدرة على تضمين محرر رمز كامل الميزة في صفحة الويب الخاصة بك. ومع ذلك ، إذا كنت بحاجة فقط إلى محرر بسيط مع تمييز بناء الجملة دون أي من الميزات الإضافية ، فيمكن أن يكون مبالغة لأنها لا تحتوي عادة على بصمة صغيرة في حجم الحزمة. تهدف هذه المكتبة إلى تزويد محرر رمز بسيط مع دعم بناء الجملة دون أي من الميزات الإضافية ، وهو مثالي للتضمينات والنماذج البسيطة حيث يمكن للمستخدمين إرسال الرمز.

سمات

• بناء الجملة المعياري مع مكتبة الطرف الثالث
• خط المسافة البادئة أو النص المحدد عن طريق الضغط على مفتاح التبويب ، مع المسافة البادئة للتخصيص
• المسافة البادئة التلقائية على خطوط جديدة
• لف النص المحدد في Parens أو Brackets أو Quotes
• التراجع عن الكلمات الكاملة بدلاً من رسالة برسالة
• يمكن الوصول إليه ، استخدم Ctrl+Shift+M (MAC) / Ctrl+M لتبديل مفتاح TAB

تثبيت

npm install react-simple-code-editor

أو

yarn add react-simple-code-editor

الاستخدام

تحتاج إلى استخدام المحرر مع مكتبة طرف ثالث توفر تسليط الضوء على بناء الجملة. على سبيل المثال ، سيبدو وكأنه يتبع مع prismjs :

 import React from 'react' ;
import Editor from 'react-simple-code-editor' ;
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism.css' ; //Example style, you can use another

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < Editor
      value = { code }
      onValueChange = { code => setCode ( code ) }
      highlight = { code => highlight ( code , languages . js ) }
      padding = { 10 }
      style = { {
        fontFamily : '"Fira code", "Fira Mono", monospace' ,
        fontSize : 12 ,
      } }
    />
  ) ;
}

لاحظ أنه بناءً على أداة تمييز بناء الجملة الخاصة بك ، قد تضطر إلى تضمين CSS إضافية لإبراز بناء الجملة للعمل.

الدعائم

يقبل المحرر جميع الدعائم المقبولة بواسطة textarea . بالإضافة إلى ذلك ، يمكنك تمرير الدعائم التالية:

• value ( string ): القيمة الحالية للمحرر أي الرمز لعرضه. يجب أن يكون هذا دعامة خاضعة للرقابة.
• onValueChange ( string => mixed ): رد الاتصال الذي يسمى عندما تتغير قيمة المحرر. ستحتاج إلى تحديث قيمة الدعامة عند استدعاء هذا.
• highlight ( string => string | React.Node ): رد الاتصال الذي سيتلقى النص لتسليط الضوء عليه. ستحتاج إلى إرجاع سلسلة HTML أو عنصر React مع تمييز بناء الجملة باستخدام مكتبة مثل prismjs .
• tabSize ( number ): عدد الأحرف المراد إدراجها عند الضغط على مفتاح Tab. على سبيل المثال ، بالنسبة إلى 4 مسافة بادئة للمساحة ، سيكون tabSize 4 وسوف تكون insertSpaces true . الافتراضي: 2 .
• insertSpaces ( boolean ): ما إذا كنت تستخدم مسافات للمسافة المسافة البادئة. الافتراضي: true . إذا قمت بتعيينها على false ، فقد ترغب أيضًا في تعيين tabSize على 1 .
• ignoreTabKey ( boolean ): ما إذا كان يجب على المحرر تجاهل مفتاح علامة التبويب يضغط حتى يتمكن مستخدمو لوحة المفاتيح عبر المحرر. يمكن للمستخدمين تبديل هذا السلوك باستخدام Ctrl+Shift+M (MAC) / Ctrl+M يدويًا عندما يكون هذا false . الافتراضي: false .
• padding ( number ): حشوة اختيارية للرمز. الافتراضي: 0 .
• textareaId ( string ): معرف textarea الأساسي ، يمكن أن يكون مفيدًا في تعيين label .
• textareaClassName ( string ): يمكن أن يكون اسم ClassName textarea الأساسي ، مفيدًا للتحكم الدقيق في أنماطه.
• preClassName ( string ): يمكن أن يكون اسم className for the pre breed ، مفيدًا للتحكم الأكثر دقة في أنماطه.

العرض التوضيحي

React-simple-code-editor.github.io/react-simple-code-reitor

كيف تعمل

إنه يعمل عن طريق تراكب بناء الجملة المميز <pre> على a <textarea> . عندما تكتب ، حدد ، نسخ النص ، وما إلى ذلك ، تتفاعل مع <textarea> الأساسي ، وبالتالي فإن التجربة تبدو أصلية. هذا نهج بسيط للغاية مقارنة بالمحررين الآخرين الذين يعيدون تنفيذ السلوك.

يمكن إجراء تسليط الضوء على بناء الجملة من قبل أي مكتبة طرف ثالث طالما أنه يعيد HTML ويمكن التحكم فيه بالكامل من قبل المستخدم.

لا يدعم Vanilla <textarea> إدراج أحرف Tab للمسافة البادئة ، لذلك نعيد تنفيذها من خلال الاستماع إلى أحداث keydown وتحديث النص برمجيًا. أحد التحذيرات مع تحديث النص برنامجياً هو أننا نفقد مكدس التراجع ، لذلك نحن بحاجة إلى الحفاظ على مكدس التراجع الخاص بنا. نتيجة لذلك ، يمكننا أيضًا تنفيذ سلوك التراجع المحسن مثل التراجع عن كلمات كاملة مماثلة لمحرري مثل VSCode.

القيود

بسبب طريقة عملها ، لها قيود معينة:

• لا يمكن أن يكون للرمز المميز بناء الجملة عائلة خطوط مختلفة ، وزن الخط ، نمط الخط ، ارتفاع الخط وما إلى ذلك لمحتواه. نظرًا لأن المحرر يعمل من خلال محاذاة الكود المميز عبر <textarea> ، فإن تغيير أي شيء يؤثر على التصميم يمكن أن يؤدي إلى اختلاله.
• مكدس التراجع المخصص لا يتوافق مع قائمة سياق Browser Undo/Redo. ومع ذلك ، لا يدعم المحررون الكاملون الآخرون عناصر القائمة التراجع عن المستعرض أيضًا.
• لم يتم تحسين المحرر للأداء ويمكن أن تؤثر المستندات الكبيرة على سرعة الكتابة.
• نخفي النص في textarea باستخدام -webkit-text-fill-color: transparent ، والذي يعمل في جميع المتصفحات الحديثة (حتى غير الممتلكات مثل Firefox و Edge). على IE 10+ ، نستخدم color: transparent لا يخفي المؤشر. قد يظهر النص أكثر جرأة في المتصفحات غير المدعومة.

المساهمة

أثناء التطوير ، يمكنك تشغيل تطبيق المثال لاختبار التغييرات الخاصة بك:

yarn example

تأكد من أن الكود الخاص بك يمرر TypeScript و ESLINT. قم بتشغيل ما يلي للتحقق:

yarn typescript
yarn lint

لإصلاح أخطاء التنسيق ، قم بتشغيل ما يلي:

yarn lint -- --fix