codemirror indentation markers

علامات المسافة البادئة Codemirror

تمديد Codemirror الذي يجعل علامات المسافة البادئة باستخدام مجريات الأمور مماثلة لما يستخدمه المحررين الشعبيون الآخرون ، مثل Ace و Monaco.

الاستخدام

 import { basicSetup } from 'codemirror' ;
import { EditorState } from '@codemirror/state' ;
import { EditorView } from '@codemirror/view' ;
import { indentationMarkers } from '@replit/codemirror-indentation-markers' ;

const doc = `
def max(a, b):
  if a > b:
    return a
  else:
    return b
`

new EditorView ( {
  state : EditorState . create ( {
    doc ,
    extensions : [ basicSetup , indentationMarkers ( ) ] ,
  } ) ,
  parent : document . querySelector ( '#editor' ) ,
} ) ;

خيارات

يمكنك توفير كائن خيارات لمادة indentationMarkers() مع الخصائص الاختيارية التالية:

• highlightActiveBlock

  Boolean التي تحدد ما إذا كانت علامة الكتلة النشطة تم تصميمها بشكل مختلف. يوفر تعيين هذا إلى false تعزيز أداء كبير لأنه يعني أن العلامات لا تحتاج إلى تجديدها عندما يتغير الاختيار. الافتراضات إلى true .

• hideFirstIndent

  المنطقية التي تحدد ما إذا كانت العلامات في العمود الأول قد تم حذفها. الإعدادات الافتراضية إلى false .

• markerType

  السلسلة التي تحدد مدى تمديد علامات المسافة البادئة. يشير "fullScope" إلى أن العلامات تمتد إلى أسفل الارتفاع الكامل للنطاق. مع خيار "codeOnly" ، تنتهي علامات المسافة البادئة في الخط الأخير غير الفارق في نطاق. الإعدادات الافتراضية إلى "fullScope" .

• thickness

  عدد صحيح يحدد سمك البكسل من علامات المسافة البادئة. الإعدادات الافتراضية إلى 1 .

• activeThickness

  عدد صحيح يحدد سمك البكسل من علامات المسافة البادئة النشطة. إذا كان undefined أو null ، فسيتم استخدام thickness . الإعدادات الافتراضية إلى undefined .

• colors

  كائن يحدد ألوان علامات المسافة البادئة.

  • light

    السلسلة التي تحدد لون العلامات عندما يكون للمحرر موضوع خفيف. الإعدادات الافتراضية إلى #F0F1F2 .

  • dark

    السلسلة التي تحدد لون العلامات عندما يكون للمحرر موضوع مظلم. الإعدادات الافتراضية إلى #2B3245 .

  • activeLight

    السلسلة التي تحدد لون علامة الكتلة النشطة عندما يكون للمحرر موضوع خفيف. ينطبق فقط إذا كان highlightActiveBlock true . الإعدادات الافتراضية إلى #E4E5E6 .

  • activeDark

    السلسلة التي تحدد لون علامة الكتلة النشطة عندما يكون للمحرر موضوع مظلم. ينطبق فقط إذا كان highlightActiveBlock true . الإعدادات الافتراضية إلى #3C445C .

مثال

 new EditorView ( {
  state : EditorState . create ( {
    doc ,
    extensions : [
      basicSetup ,
      indentationMarkers ( {
        highlightActiveBlock : false ,
        hideFirstIndent : true ,
        markerType : "codeOnly" ,
        thickness : 2 ,
        colors : {
          light : 'LightBlue' ,
          dark : 'DarkBlue' ,
          activeLight : 'LightGreen' ,
          activeDark : 'DarkGreen' ,
        }
      } )
    ] ,
  } ) ,
  parent : document . querySelector ( '#editor' ) ,
} ) ;