refac contexts, providers and hooks; fix textToId colon, trailing dot;

control-ui · Oct 4, 2024 · 161126b · 161126b
1 parent 2851250
commit 161126b
Show file tree

Hide file tree

Showing 41 changed files with 493 additions and 731 deletions.
diff --git a/README.md b/README.md
@@ -18,13 +18,13 @@
     - structural helper utils and mdast typing extensions
 
 ```shell
-npm i -S @content-ui/md @content-ui/react @content-ui/md-mui
+npm i -S @content-ui/md @content-ui/react @content-ui/struct @content-ui/md-mui
 # peer-dependencies:
 npm i -S @mui/material @mui/icons-material
 npm i -D @types/mdast
 
 # input component with CodeMirror:
-npm i -S @content-ui/md @content-ui/react @content-ui/md-mui @content-ui/input
+npm i -S @content-ui/md @content-ui/react @content-ui/struct @content-ui/md-mui @content-ui/input
 # peer-dependencies:
 npm i -S react-progress-state @ui-controls/progress @ui-schema/kit-codemirror @codemirror/state
 ```

diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx
@@ -1,4 +1,4 @@
-import { contentUIDecorators, ContentLeafsProvider } from '@content-ui/react/ContentLeaf'
+import { contentUIDecorators, ContentLeafsProvider } from '@content-ui/react/ContentLeafsContext'
 import React from 'react'
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
 import { DndProvider } from 'react-dnd'

diff --git a/apps/demo/src/components/ContentUI.ts b/apps/demo/src/components/ContentUI.ts
@@ -1,5 +1,5 @@
 import { MuiContentRenderComponents, renderMapping } from '@content-ui/md-mui/LeafsMarkdown'
-import { ContentLeafsNodeMapping, LeafsRenderMapping, ContentLeafMatchParams } from '@content-ui/react/ContentLeaf'
+import { ContentLeafsNodeMapping, LeafsRenderMapping, ContentLeafMatchParams } from '@content-ui/react/ContentLeafsContext'
 import { CustomCodeMirror } from './CustomCodeMirror.js'
 
 export const contentUIMapping: LeafsRenderMapping<ContentLeafsNodeMapping, MuiContentRenderComponents, ContentLeafMatchParams> = {

diff --git a/apps/demo/src/components/CustomCodeMirror.tsx b/apps/demo/src/components/CustomCodeMirror.tsx
@@ -19,7 +19,7 @@ import { lintKeymap } from '@codemirror/lint'
 import { Compartment, EditorState, Extension } from '@codemirror/state'
 import { CodeMirrorComponentProps, CodeMirrorProps } from '@ui-schema/kit-codemirror/CodeMirror'
 import { EditorThemeCustomStyles, useEditorTheme } from '@ui-schema/material-code/useEditorTheme'
-import { useHighlightStyle } from './useHighlightStyle'
+import { useHighlightStyle } from '@ui-schema/material-code/useHighlightStyle'
 import { json } from '@codemirror/lang-json'
 import { javascript } from '@codemirror/lang-javascript'
 import { html } from '@codemirror/lang-html'
@@ -257,7 +257,7 @@ export const CustomCodeMirror: React.FC<CustomCodeMirrorProps> = (
     }), [palette.mode, paddingBottom])
     const theme = useEditorTheme(typeof onChange === 'undefined', dense, customVariant, customStyles as EditorThemeCustomStyles)
 
-    const highlightStyle = useHighlightStyle()
+    const highlightStyle = useHighlightStyle({headlineUnderline: false})
     const {init: initHighlightExt, effects: effectsHighlightExt} = useExtension(
         () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
         [highlightStyle],

diff --git a/apps/demo/src/components/CustomWidgets/WidgetMarkdownEditor.tsx b/apps/demo/src/components/CustomWidgets/WidgetMarkdownEditor.tsx
@@ -1,4 +1,5 @@
 import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
 import { UIMetaReadContextType } from '@ui-schema/ui-schema/UIMetaReadContext'
 import React from 'react'
 import { TransTitle, WidgetProps, WithScalarValue } from '@ui-schema/ui-schema'
@@ -15,7 +16,7 @@ import { CustomCodeMirror, getHighlight } from '../CustomCodeMirror'
 import { ContentInput } from '@content-ui/input/ContentInput'
 import { useContentEditor } from '@content-ui/input/useContentEditor'
 import { useContent } from '@content-ui/react/useContent'
-import { ContentFileProvider } from '@content-ui/react/ContentFileProvider'
+import { ContentFileProvider } from '@content-ui/react/ContentFileContext'
 
 export const WidgetMarkdownEditor: React.ComponentType<WidgetProps & WithScalarValue & { readOnly?: boolean } & UIMetaReadContextType> = (
     {
@@ -118,22 +119,23 @@ export const WidgetMarkdownEditor: React.ComponentType<WidgetProps & WithScalarV
             <ContentFileProvider
                 root={root}
                 file={file}
-                editorSelection={editorSelection}
             >
-                <ContentInput
-                    preview={preview}
-                    refWarningBox={refWarningBox}
-                    CodeMirror={CustomCodeMirror}
-                    onChange={readOnly ? undefined : handleOnChange}
-                    extensions={extensions}
-                    textValue={textValue}
-                    bigSize={bigSize}
-                    processing={processing}
-                    autoProcess={autoProcess}
-                    setAutoProcess={setAutoProcess}
-                    valid={valid}
-                    mb={1}
-                />
+                <ContentSelectionProvider selection={editorSelection}>
+                    <ContentInput
+                        preview={preview}
+                        refWarningBox={refWarningBox}
+                        CodeMirror={CustomCodeMirror}
+                        onChange={readOnly ? undefined : handleOnChange}
+                        extensions={extensions}
+                        textValue={textValue}
+                        bigSize={bigSize}
+                        processing={processing}
+                        autoProcess={autoProcess}
+                        setAutoProcess={setAutoProcess}
+                        valid={valid}
+                        mb={1}
+                    />
+                </ContentSelectionProvider>
             </ContentFileProvider>
         </SettingsProvider>
     </>

diff --git a/apps/demo/src/components/useHighlightStyle.ts b/apps/demo/src/components/useHighlightStyle.ts
diff --git a/apps/demo/src/pages/PageComplex.tsx b/apps/demo/src/pages/PageComplex.tsx
@@ -1,4 +1,5 @@
 import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { SettingsProvider } from '@content-ui/react/LeafSettings'
 import Paper from '@mui/material/Paper'
 import React from 'react'
 import Helmet from 'react-helmet'
@@ -122,12 +123,18 @@ export const PageComplex: React.ComponentType = () => {
 
                         {contentDetails?.file ?
                             <Grid2 xs={12}>
-                                <ViewerFromText
-                                    processor={ContentParser}
-                                    textValue={contentDetails.file}
-                                    parseDelay={0}
-                                    onMount
-                                />
+                                <SettingsProvider
+                                    headlineLinkable
+                                    headlineSelectable
+                                    headlineSelectableOnHover
+                                >
+                                    <ViewerFromText
+                                        processor={ContentParser}
+                                        textValue={contentDetails.file}
+                                        parseDelay={0}
+                                        onMount
+                                    />
+                                </SettingsProvider>
                             </Grid2> : null}
 
                         <Grid2 xs={12} md={8} mdOffset={2}>

diff --git a/apps/demo/src/pages/PageInput.tsx b/apps/demo/src/pages/PageInput.tsx
@@ -1,4 +1,5 @@
 import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Button from '@mui/material/Button'
 import IcVisibility from '@mui/icons-material/Visibility'
@@ -15,7 +16,7 @@ import { Viewer } from '@content-ui/md-mui/Viewer'
 import { SettingsProvider } from '@content-ui/react/LeafSettings'
 import { useContentEditor } from '@content-ui/input/useContentEditor'
 import { useContent } from '@content-ui/react/useContent'
-import { ContentFileProvider } from '@content-ui/react/ContentFileProvider'
+import { ContentFileProvider } from '@content-ui/react/ContentFileContext'
 
 const md = `# About a Note
 
@@ -97,60 +98,62 @@ export const PageInput: React.ComponentType = () => {
             <ContentFileProvider
                 root={root}
                 file={file}
-                editorSelection={editorSelection}
             >
-                <SettingsProvider
-                    followEditor={isMediumScreen}
-                    headlineLinkable
-                    headlineSelectable
-                    headlineSelectableOnHover
+                <ContentSelectionProvider
+                    selection={editorSelection}
                 >
-                    <Grid2 container spacing={2} sx={{overflow: 'auto', flexWrap: {xs: 'wrap', md: 'nowrap'}}}>
-                        <Grid2 xs={12} md={6} sx={{overflow: 'auto', scrollbarWidth: 'thin', maxHeight: {md: '100%'}}}>
-                            <ContentInput
-                                CodeMirror={CustomCodeMirror}
-                                onChange={handleOnChange}
-                                extensions={extensions}
-                                textValue={textValue}
-                                bigSize={bigSize}
-                                processing={processing}
-                                outdated={outdated}
-                                autoProcess={autoProcess}
-                                setAutoProcess={setAutoProcess}
-                            />
-                        </Grid2>
-                        <Grid2
-                            xs={12} md={6}
-                            sx={{
-                                overflowY: 'auto',
-                                scrollbarWidth: 'thin',
-                                maxHeight: {md: '100%'},
-                                // viewer with bigger paddings for headline buttons
-                                px: {md: 2, lg: 3},
-                                backgroundColor: 'background.paper',
-                            }}
-                        >
-                            <Viewer
-                                outdated={outdated}
-                                processing={processing}
-                                editorSelection={editorSelection}
-                            />
-                            <Button
-                                startIcon={showAst ? <IcVisibilityOff/> : <IcVisibility/>}
-                                onClick={() => setShowAst(s => !s)}
-                                variant={'outlined'}
-                                sx={{mt: 2, mb: 1}}
+                    <SettingsProvider
+                        followEditor={isMediumScreen}
+                        headlineLinkable
+                        headlineSelectable
+                        headlineSelectableOnHover
+                    >
+                        <Grid2 container spacing={2} sx={{overflow: 'auto', flexWrap: {xs: 'wrap', md: 'nowrap'}}}>
+                            <Grid2 xs={12} md={6} sx={{overflow: 'auto', scrollbarWidth: 'thin', maxHeight: {md: '100%'}}}>
+                                <ContentInput
+                                    CodeMirror={CustomCodeMirror}
+                                    onChange={handleOnChange}
+                                    extensions={extensions}
+                                    textValue={textValue}
+                                    bigSize={bigSize}
+                                    processing={processing}
+                                    outdated={outdated}
+                                    autoProcess={autoProcess}
+                                    setAutoProcess={setAutoProcess}
+                                />
+                            </Grid2>
+                            <Grid2
+                                xs={12} md={6}
+                                sx={{
+                                    overflowY: 'auto',
+                                    scrollbarWidth: 'thin',
+                                    maxHeight: {md: '100%'},
+                                    // viewer with bigger paddings for headline buttons
+                                    px: {md: 2, lg: 3},
+                                    backgroundColor: 'background.paper',
+                                }}
                             >
-                                {'AST'}
-                            </Button>
-                            {showAst ?
-                                <CustomCodeMirror
-                                    value={JSON.stringify(root || null, undefined, 4)}
-                                    lang={'json'}
-                                /> : null}
+                                <Viewer
+                                    outdated={outdated}
+                                    processing={processing}
+                                />
+                                <Button
+                                    startIcon={showAst ? <IcVisibilityOff/> : <IcVisibility/>}
+                                    onClick={() => setShowAst(s => !s)}
+                                    variant={'outlined'}
+                                    sx={{mt: 2, mb: 1}}
+                                >
+                                    {'AST'}
+                                </Button>
+                                {showAst ?
+                                    <CustomCodeMirror
+                                        value={JSON.stringify(root || null, undefined, 4)}
+                                        lang={'json'}
+                                    /> : null}
+                            </Grid2>
                         </Grid2>
-                    </Grid2>
-                </SettingsProvider>
+                    </SettingsProvider>
+                </ContentSelectionProvider>
             </ContentFileProvider>
         </Box>
     </>