solid codemirror

الصلبة

يوفر Solid-Codemirror مجموعة من الأدوات المساعدة لجعل تكامل Codemirror6 أسهل بالنسبة لـ SolidJs.

وُلدت هذه المكتبة في البداية لتكون دخول SolidJS Hackathon ، لكنها أصبحت المحرر الأساسي لـ CodeImage.

تثبيت

 # pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirror

ملاحظة تعتمد هذه المكتبة على @codemirror/state و @codemirror/view v6.0.0. يتم وضع علامة على هذه المكتبات على أنها ** peerdependencies **. يوصى بتثبيت كلاهما يدويًا لمزيد من التحكم والمرونة في التنفيذ

حزم CodeMirror إصلاح الخطأ

تحذير قد تواجه هذا الخطأ باستخدام Vite

Error: Unrecognized extension value in extension set ([object Object]). 
This sometimes happens because multipleinstances of @codemirror/state are loaded, 
breaking instanceof checks.

إذا كان @codemirror/state و @codemirror/view لا يعملون حتى إذا لم يكن إصداره غير متطابق ، فيمكنك محاولة إضافة ما يلي إلى vite.config.{js,ts} ملف:

 export default defineConfig ( {
  // Your configuration
  optimizeDeps : {
    // Add both @codemirror/state and @codemirror/view to included deps to optimize
    include : [ '@codemirror/state' , '@codemirror/view' ] ,
  }
} ) 

الإصدارات

الصلبة	@Codemirror/State	@codemirror/عرض	الصلبة
> = 1.3.0	^6.2.0	^6.12.0	^1.7.0
> = 1 <1.3.0	^6.0.0	^6.0.0	^1.6.0

الاستخدام الأساسي

أولاً ، نحتاج إلى إنشاء مثيل Codemirror جديد من خلال وظيفة createCodeMirror . بعد ذلك ، يجب إرفاق كائن ref المحدد بعنصر DOM من أجل تهيئة مثيل EditorView مع EditorState الخاص به.

 import { createCodeMirror } from "solid-codemirror" ;
import { createSignal , onMount } from "solid-js" ;

export const App = ( ) => {
  const { editorView , ref : editorRef } = createCodeMirror ( {
    /**
     * The initial value of the editor
     */
    value : "console.log('hello world!')" ,
    /**
     * Fired whenever the editor code value changes.
     */
    onValueChange : ( value ) => console . log ( "value changed" , value ) ,
    /**
     * Fired whenever a change occurs to the document, every time the view updates.
     */
    onModelViewUpdate : ( modelView ) => console . log ( "modelView updated" , modelView ) ,
    /**
     * Fired whenever a transaction has been dispatched to the view.
     * Used to add external behavior to the transaction [dispatch function](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) for this editor view, which is the way updates get routed to the view
     */
    onTransactionDispatched : ( tr : Transaction , view : EditorView ) => console . log ( "Transaction" , tr )
  } ) ;

  return < div ref = { editorRef } /> ;
} ;

وظيفة createCodeMirror هي الوظيفة الرئيسية لـ solid-codemirror للبدء في إنشاء المحرر الخاص بك. يكشف الخصائص التالية:

ملكية	وصف
ref	كائن htmlelement الذي سيتم إرفاقه بمثال EditorView
editorView	مثيل EditorView الحالي من Codemirror. سيكون null على أنه افتراضي ، وسيتم تقييمه عندما يتم تثبيت ref المعطى في DOM
createExtension	وظيفة لإنشاء امتداد جديد لـ Codemirror باستخدام المقصورات. إنه قصير لمساعد createCompartmentExtension الذي يرفق تلقائيًا مثيل EditorView الأيمن

الشكل

https://codemirror.net/docs/guide/
تم إعداد Codemirror كمجموعة من الوحدات النمطية المنفصلة التي توفر معًا محرر نص ورمز كامل الميزة. على الجانب المشرق ، هذا يعني أنه يمكنك اختيار واختيار الميزات التي تحتاجها ، وحتى استبدال الوظائف الأساسية بتنفيذ مخصص إذا كنت بحاجة إلى ذلك. على الجانب الأقل سطوعًا ، هذا يعني أن إعداد محرر يتطلب منك تجميع مجموعة من القطع.

كما تقول الوثائق الرسمية ، فإن Codemirror6 معياري.

لن يكون Solid-Codemirror بديلاً لجميع وحدات CodeMirror6 ، ولكنه سيحاول توفير البدائل الضرورية فقط لدمجها في SolidJs.

يجب تثبيت كل ملحق تحتاج لتطوير المحرر الخاص بك بشكل فردي ودمج بشكل فردي.

الامتدادات

التركيز على محرر التحكم ومراقبة تغييرات الدولة focused

 import { createCodeMirror , createEditorFocus } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;

const { editorView } = createCodeMirror ( ) ;
const [ readOnly , setReadOnly ] = createSignal ( true ) ;
const {
  focused ,
  setFocused
} = createEditorFocus ( editorView , ( focused ) => console . log ( 'focus changed' , focused ) ) ;

// Focus
setFocused ( true ) ;
// Blur
setFocused ( false ) ;

تحديث محرر readonly

بعد تثبيت محرر CodeMirror ، يمكنك تحديث حالته القراءة باستخدام وظيفة createReadonlyEditor التي تقبل عرض المحرر والملحق القراءة.

لاحظ تحديث الملحق ، وسيتم تحديث حالة المحرر Readonly تلقائيًا ؛

 import { createCodeMirror , createEditorReadonly } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;

function App ( ) {
  const { ref , editorView } = createCodeMirror ( ) ;
  const [ readOnly , setReadOnly ] = createSignal ( true ) ;
  createEditorReadonly ( editorView , readonly ) ;

  return < div ref = { ref } / >
}

رمز محرر التحكم باستخدام الإشارات

بعد تثبيت محرر Codemirror ، يمكنك التحكم في حالة الكود باستخدام createEditorControlledValue .

لاحظ أن قيمة المحرر قد تم بالفعل مذكرات

 import { createCodeMirror , createEditorControlledValue } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;

function App ( ) {
  const [ code , setCode ] = createSignal ( "console.log('hello world!')" ) ;
  const { ref , editorView } = createCodeMirror ( { onValueChange : setCode } ) ;
  createEditorControlledValue ( editorView , code ) ;

  // Update code after 2.5s
  setTimeout ( ( ) => {
    setCode ( "console.log('updated!')" ) ;
  } , 2500 ) ;

  return < div ref = { ref } / >
}

التعامل مع ملحقات مخصصة

بعد تثبيت محرر Codemirror ، يمكنك التعامل مع الامتدادات المخصصة بفضل وظيفة createExtension . كلاهما يقبل Extension أو Accessor<Extension | undefined> ثم سيتم إعادة تكوينه تلقائيًا عند تغيير التمديد. خلاف ذلك ، يمكنك إعادة تكوينهم يدويًا باستخدام وظيفة reconfigure التي تم إرجاعها.

لمزيد من التفاصيل ، راجع الوثائق الرسمية حول المقصورات.

 import { createCodeMirror } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;
import { EditorView , lineNumbers } from '@codemirror/view' ;

function App ( ) {
  const [ code , setCode ] = createSignal ( "console.log('hello world!')" ) ;
  const [ showLineNumber , setShowLineNumber ] = createSignal ( true ) ;
  const { ref , createExtension } = createCodeMirror ( { onValueChange : setCode } ) ;

  const theme = EditorView . theme ( {
    '&' : {
      background : 'red'
    }
  } ) ;

  // Add a static custom theme
  createExtension ( theme ) ;

  // Toggle extension
  createExtension ( ( ) => showLineNumber ( ) ? lineNumbers ( ) : [ ] ) ;

  // Remove line numbers after 2.5s
  setTimeout ( ( ) => {
    setShowLineNumber ( false ) ;
  } , 2500 ) ;

  return < div ref = { ref } / >
}

امتدادات التحميل كسول

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

 // ✅ 1. Remove the static import
// import { largeExtension } from './large-extension';
import { createLazyCompartmentExtension } from './createLazyCompartmentExtension' ;
import { Show } from 'solid-js' ;

function App ( ) {
  const [ code , setCode ] = createSignal ( "console.log('hello world!')" ) ;
  const { ref , createExtension } = createCodeMirror ( { onValueChange : setCode } ) ;

  // ✅ 2. Call the helper providing a Promise<Extension>
  // The extension will be configured only after the Promise resolves
  const largeExt = createLazyCompartmentExtension (
    ( ) => import ( './large-extension' ) . then ( res => res . largeExtension )
  ) ;

  return (
    < div >
      < div ref = { ref } />
      { /*✅ 3. You can read the pending state of the Promise*/ }
      < Show when = { largeExt . loading } >
        Loading...
      </ Show >
    </ div >
  )
} 

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

// WIP

يمكنك أيضًا عرض تطبيق متقدم لـ solid-codemirror من خلال تنفيذ CodeImage

مؤلف

• ريكاردو بيررا

رخصة

مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.