Merge branch 'develop' into main

Author: elbakerino

package-lock.json

@@ -27,8 +27,8 @@
         "@codemirror/language": "^6.1.0",
         "@ui-schema/dictionary": "~0.0.10",
         "@ui-schema/ds-material": "~0.4.0-alpha.5",
-        "@ui-schema/kit-codemirror": "~0.0.1",
-        "@ui-schema/material-code": "~0.4.0-beta.0",
+        "@ui-schema/kit-codemirror": "~0.1.0",
+        "@ui-schema/material-code": "~0.4.0",
         "@ui-schema/ui-schema": "~0.4.1",
         "immutable": "^4.0.0",
         "react": "^17.0",

packages/demo/package-lock.json

@@ -10,10 +10,22 @@
     <!--<link rel="manifest" href="<%= htmlWebpackPlugin.options.PUBLIC_URL %>/manifest.json"/>-->
     <title>React App</title>
     <style>
-        html,
-        body {
+        body, html {
+            height: 100%;
             margin: 0;
-            box-sizing: border-box;
+            padding: 0;
+        }
+
+        #root {
+            overflow: auto;
+            height: 100%;
+            display: flex;
+            flex-direction: column
+        }
+
+        body {
+            display: flex;
+            flex-direction: column
         }
 
         *, ::before, ::after {

packages/demo/package.json

@@ -12,7 +12,7 @@ import { customWidgets } from './components/UISchema'
 const customThemes = customTheme('#05aeca')
 
 export const App: React.ComponentType<{}> = () => {
-    const [themeId] = React.useState<'dark' | 'light'>('dark')
+    const [themeId, setThemeId] = React.useState<'dark' | 'light'>('dark')
 
     const [theme, setTheme] = React.useState(customThemes[themeId])
     React.useEffect(() => {
@@ -26,7 +26,7 @@ export const App: React.ComponentType<{}> = () => {
             <BrowserRouter>
                 <React.Suspense fallback={<CircularProgress/>}>
                     <UIMetaProvider t={browserT} widgets={customWidgets}>
-                        <Layout/>
+                        <Layout setTheme={setThemeId}/>
                     </UIMetaProvider>
                 </React.Suspense>
             </BrowserRouter>

packages/demo/public/index.html

@@ -11,24 +11,36 @@ import { history, defaultKeymap, historyKeymap, indentWithTab } from '@codemirro
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
 import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'
 import { lintKeymap } from '@codemirror/lint'
-import { Compartment, EditorState } from '@codemirror/state'
+import { Compartment, EditorState, Extension } from '@codemirror/state'
 import { useEditorTheme } from '@ui-schema/material-code/useEditorTheme'
 import { useHighlightStyle } from '@ui-schema/material-code/useHighlightStyle'
 import { CodeMirrorComponentProps, CodeMirror, CodeMirrorProps } from '@ui-schema/kit-codemirror/CodeMirror'
+import { useExtension } from '@ui-schema/kit-codemirror/useExtension'
+import { MuiCodeMirrorStyleProps } from '@ui-schema/material-code'
 
-export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
+export const CustomCodeMirror: React.FC<CodeMirrorComponentProps & MuiCodeMirrorStyleProps> = (
     {
         // values we want to override in this component
-        value, extensions,
+        value, extensions, effects,
+        dense, variant,
         // everything else is just passed down
         ...props
     },
 ) => {
     const {onChange} = props
-    const theme = useEditorTheme(typeof onChange === 'undefined')
+    const theme = useEditorTheme(typeof onChange === 'undefined', dense, variant)
     const highlightStyle = useHighlightStyle()
+    const {init: initHighlightExt, effects: effectsHighlightExt} = useExtension(
+        () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
+        [highlightStyle],
+    )
+    const {init: initThemeExt, effects: effectsThemeExt} = useExtension(
+        () => theme,
+        [theme],
+    )
+    const effectsRef = React.useRef<((editor: EditorView) => void)[]>(effects || [])
 
-    const extensionsAll = React.useMemo(() => [
+    const extensionsAll: Extension[] = React.useMemo(() => [
         lineNumbers(),
         EditorView.lineWrapping,
         highlightActiveLineGutter(),
@@ -38,16 +50,15 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
         drawSelection(),
         dropCursor(),
         EditorState.allowMultipleSelections.of(true),
+        new Compartment().of(EditorState.tabSize.of(4)),
         indentOnInput(),
-        syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
         bracketMatching(),
         closeBrackets(),
         autocompletion(),
         rectangularSelection(),
         // crosshairCursor(),
         highlightActiveLine(),
         highlightSelectionMatches(),
-        new Compartment().of(EditorState.tabSize.of(4)),
         keymap.of([
             ...closeBracketsKeymap,
             ...defaultKeymap,
@@ -58,9 +69,24 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
             ...lintKeymap,
             indentWithTab,
         ]),
-        theme,
+        initHighlightExt(),
+        initThemeExt(),
         ...(extensions || []),
-    ], [highlightStyle, extensions, theme])
+    ], [extensions, initHighlightExt, initThemeExt])
+
+    // attach parent plugin effects first
+    React.useMemo(() => {
+        if(!effects) return
+        effectsRef.current.push(...effects)
+    }, [effects])
+
+    // attach each plugin effect separately (thus only the one which changes get reconfigured)
+    React.useMemo(() => {
+        effectsRef.current.push(...effectsHighlightExt)
+    }, [effectsHighlightExt])
+    React.useMemo(() => {
+        effectsRef.current.push(...effectsThemeExt)
+    }, [effectsThemeExt])
 
     const onViewLifecycle: CodeMirrorProps['onViewLifecycle'] = React.useCallback((view) => {
         console.log('on-view-lifecycle', view)
@@ -70,6 +96,7 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
         value={value || ''}
         extensions={extensionsAll}
         onViewLifecycle={onViewLifecycle}
+        effects={effectsRef.current.splice(0, effectsRef.current.length)}
         {...props}
         // className={className}
     />

packages/demo/src/App.tsx

@@ -4,27 +4,33 @@ import { PageHome } from '../pages/PageHome'
 import { PageDemoWidget } from '../pages/PageDemoWidget'
 import { PageDemoLangSelectable } from '../pages/PageDemoLangSelectable'
 import { PageDemoComponent } from '../pages/PageDemoComponent'
+import { Button } from '@mui/material'
+import { PageDemoComponentMui } from '../pages/PageDemoComponentMui'
 
-export const Layout: React.ComponentType<{}> = () => {
+export const Layout: React.ComponentType<{ setTheme: React.Dispatch<React.SetStateAction<'dark' | 'light'>> }> = ({setTheme}) => {
     const scrollWrapper = React.useRef<HTMLDivElement | null>(null)
 
     return <div
         ref={scrollWrapper}
         style={{
             display: 'flex',
             flexDirection: 'column',
+            flexGrow: 1,
             maxHeight: '100%',
             position: 'relative',
-            color: '#ffffff',
             overflow: 'auto',
             padding: '0 12px',
         }}
     >
         <Routes>
             <Route path={'/'} element={<PageHome/>}/>
             <Route path={'/component'} element={<PageDemoComponent/>}/>
+            <Route path={'/component-mui'} element={<PageDemoComponentMui/>}/>
             <Route path={'/widget'} element={<PageDemoWidget/>}/>
             <Route path={'/selectable'} element={<PageDemoLangSelectable/>}/>
         </Routes>
+        <Button size={'small'} onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
+            switch theme
+        </Button>
     </div>
 }

packages/demo/src/components/CustomCodeMirror.tsx

@@ -11,7 +11,10 @@ export const Nav: React.FC<{}> = () => {
     return <Box style={{display: 'flex', flexDirection: 'column', flexShrink: 0}}>
         <MuiList>
             <ListItemButton onClick={() => navigate('/component')} selected={'/component' === location.pathname}>
-                <ListItemText primary={'Component'}/>
+                <ListItemText primary={'Component Plain'}/>
+            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/component-mui')} selected={'/component-mui' === location.pathname}>
+                <ListItemText primary={'Component MUI'}/>
             </ListItemButton>
             <ListItemButton onClick={() => navigate('/widget')} selected={'/widget' === location.pathname}>
                 <ListItemText primary={'Widget'}/>

packages/demo/src/components/Layout.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import { Nav } from '../components/Nav'
-import { CodeMirrorOnChange } from '@ui-schema/kit-codemirror'
+import { CodeMirrorOnChange } from '@ui-schema/kit-codemirror/useCodeMirror'
 import { CodeMirrorComponentProps, CodeMirror, CodeMirrorProps } from '@ui-schema/kit-codemirror/CodeMirror'
 import {
     lineNumbers, highlightActiveLineGutter, highlightSpecialChars,
@@ -110,10 +110,11 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
 const DemoComponent = () => {
     const [value, setValue] = React.useState('')
 
-    const onChange: CodeMirrorOnChange = React.useCallback((_editor, nextValue, prevValue) => {
-        if(nextValue !== prevValue) {
-            setValue(nextValue)
+    const onChange: CodeMirrorOnChange = React.useCallback((editor, newValue) => {
+        if(!editor.docChanged || typeof newValue !== 'string') {
+            return
         }
+        setValue(newValue)
     }, [setValue])
 
     return <React.Fragment>
@@ -128,10 +129,11 @@ const DemoComponentReadOnly = () => {
     const [readOnly, setReadOnly] = React.useState(false)
     const [value, setValue] = React.useState('')
 
-    const onChange: CodeMirrorOnChange = React.useCallback((_editor, nextValue, prevValue) => {
-        if(nextValue !== prevValue) {
-            setValue(nextValue)
+    const onChange: CodeMirrorOnChange = React.useCallback((editor, newValue) => {
+        if(!editor.docChanged || typeof newValue !== 'string') {
+            return
         }
+        setValue(newValue)
     }, [setValue])
 
     return <React.Fragment>