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 Packages แก้ไขข้อผิดพลาด

คำเตือน คุณอาจพบข้อผิดพลาดนี้โดยใช้ 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/view	Solid-Js
> = 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 ) ;

อัปเดตบรรณาธิการอย่างเดียว

หลังจากติดตั้งตัวแก้ไข Codemirror คุณสามารถอัปเดตสถานะแบบอ่านอย่างเดียวโดยใช้ฟังก์ชัน createReadonlyEditor ที่ยอมรับมุมมองตัวแก้ไขและ accessor แบบอ่านอย่างเดียว

หมายเหตุ การอัปเดต accessor สถานะตัวแก้ไขอย่างเดียวจะได้รับการอัปเดตโดยอัตโนมัติ

 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

ผู้เขียน

• Riccardo Perra

ใบอนุญาต

ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT