ホーム>Web サイト構築リソース>その他のリソース
ダウンロード

ソリッドコデミラー

Solid-Codemirrorは、 Codemirror6の統合をSolidJSの統合を容易にするための一連のユーティリティを提供します。

このライブラリは当初、SolidJs Hackathonのエントリとして生まれましたが、CodeMageのコアエディターになりました。

インストール

 # 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/ビューが機能していない場合、バージョンが不一致でなくても、 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ソリッド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

基本的な使用法

まず、 createCodeMirror関数を介して新しいCodeMirrorインスタンスを作成する必要があります。次に、指定されたrefオブジェクトを、 EditorViewインスタンスを独自のEditorStateで初期化するために、DOM要素に接続する必要があります。 

 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 EditorViewインスタンスに接続されるHTMLELEMENTオブジェクト
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エディターがマウントされた後、エディタービューとReadonlyアクセサを受け入れる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>を受け入れます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 } / >
}

怠zyなロード拡張機能

最初のバンドルサイズを縮小するために、カスタム拡張機能をより適切に分割する必要がある場合があります。これは、怠zyなロードでモジュールを解決するために動的なインポートを使用する必要がある場合です。 

 // ✅ 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の高度な実装を表示することもできます

著者

  • リカルドペラ

ライセンス

MITライセンスに基づいてライセンスされています。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて