kit useExtension support extensions directly;

adds support to `useExtension`, for using extension or extension array directly, without setup function

Author: elbakerino

package-lock.json

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box'
 import { useCodeMirror } from '@ui-schema/kit-codemirror'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import {
     lineNumbers, highlightActiveLineGutter, highlightSpecialChars,
     drawSelection, dropCursor,
@@ -30,9 +30,6 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps & MuiCodeMirror
         ...props
     },
 ) => {
-    const theme = useEditorTheme(typeof onChange === 'undefined', dense, variant)
-    const highlightStyle = useHighlightStyle()
-
     const extensionsAll: Extension[] = React.useMemo(() => [
         lineNumbers(),
         EditorView.lineWrapping,
@@ -77,23 +74,23 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps & MuiCodeMirror
     })
 
     useExtension(
-        useCallback(
-            () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
-            [highlightStyle],
-        ),
+        useMemo(() => {
+            return Prec.lowest(EditorView.editorAttributes.of({class: classNameContent || ''}))
+        }, [classNameContent]),
         editorRef,
     )
+
+    const highlightStyle = useHighlightStyle()
     useExtension(
         useCallback(
-            () => theme,
-            [theme],
+            () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
+            [highlightStyle],
         ),
         editorRef,
     )
+
     useExtension(
-        useCallback(() => {
-            return Prec.lowest(EditorView.editorAttributes.of({class: classNameContent || ''}))
-        }, [classNameContent]),
+        useEditorTheme(typeof onChange === 'undefined', dense, variant),
         editorRef,
     )
 

packages/demo/src/components/CustomCodeMirror.tsx

@@ -1,6 +1,6 @@
 {
     "name": "@ui-schema/kit-codemirror",
-    "version": "1.0.0-alpha.0",
+    "version": "1.0.0-alpha.1",
     "description": "CodeMirror v6 as React Component, with hooks and stuff - but only the necessities.",
     "homepage": "https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror",
     "author": {

packages/kit-codemirror/package.json

@@ -3,11 +3,13 @@ import { EditorView } from '@codemirror/view'
 import { useLayoutEffect, useRef } from 'react'
 import type { RefObject } from 'react'
 
+type SetupExtension = (() => Extension) | Extension
+
 export const useExtension = (
-    setupExtension: () => Extension,
+    setupExtension: SetupExtension,
     editorRef: RefObject<EditorView | null>,
 ) => {
-    const configuredRef = useRef<{ view: EditorView, cb: Function } | null>(null)
+    const configuredRef = useRef<{ view: EditorView, cb: SetupExtension } | null>(null)
     const compartmentRef = useRef<Compartment>(new Compartment())
 
     useLayoutEffect(() => {
@@ -25,10 +27,12 @@ export const useExtension = (
             // exists, reconfigure
             // new, append to config
 
+            const extension = typeof setupExtension === 'function' ? setupExtension() : setupExtension
+
             editorRef.current.dispatch({
                 effects: isInitialSetup
-                    ? StateEffect.appendConfig.of(compartment.of(setupExtension()))
-                    : compartment.reconfigure(setupExtension()),
+                    ? StateEffect.appendConfig.of(compartment.of(extension))
+                    : compartment.reconfigure(extension),
             })
             configuredRef.current = {view: editorRef.current, cb: setupExtension}
         } else {