Merge branch 'develop'

control-ui · Oct 4, 2024 · 6705e31 · 6705e31
2 parents 220e06b + 827d7ef
commit 6705e31
Show file tree

Hide file tree

Showing 57 changed files with 2,147 additions and 2,404 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'
@@ -19,7 +19,6 @@ import { useViewSettings } from './lib/ViewSettings'
 import I18NextChainedBackend from 'i18next-chained-backend'
 import I18NextLocalStorageBackend from 'i18next-localstorage-backend'
 import I18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'
-import { ProgressControlProvider } from 'react-progress-state'
 import { UIApiProvider } from '@ui-schema/ui-schema/UIApi'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
@@ -116,11 +115,9 @@ export const App: React.ComponentType<{}> = () => {
                             <LocalizationProvider dateAdapter={AdapterMoment}>
                                 <UIMetaProvider t={browserT} widgets={customWidgets}>
                                     <ContentLeafsProvider deco={contentUIDecorators} renderMap={contentUIMapping}>
-                                        <ProgressControlProvider>
-                                            <DndProvider backend={HTML5Backend}>
-                                                <Layout/>
-                                            </DndProvider>
-                                        </ProgressControlProvider>
+                                        <DndProvider backend={HTML5Backend}>
+                                            <Layout/>
+                                        </DndProvider>
                                     </ContentLeafsProvider>
                                 </UIMetaProvider>
                             </LocalizationProvider>

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

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/WidgetCode.tsx b/apps/demo/src/components/CustomWidgets/WidgetCode.tsx
@@ -8,7 +8,7 @@ import { javascript } from '@codemirror/lang-javascript'
 import { html } from '@codemirror/lang-html'
 import { css } from '@codemirror/lang-css'
 import { extractValue } from '@ui-schema/ui-schema/UIStore'
-import { WidgetCode } from '@ui-schema/material-code'
+import { WidgetCode } from '@ui-schema/material-code/WidgetCode'
 import { WidgetCodeSelectable } from '@ui-schema/material-code/WidgetCodeSelectable'
 import { CustomCodeMirror } from '../CustomCodeMirror'
 

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/Layout.tsx b/apps/demo/src/components/Layout.tsx
@@ -17,7 +17,6 @@ import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
-import { useProgressControlReset } from 'react-progress-state'
 import Tooltip from '@mui/material/Tooltip'
 import { PageComplex } from '../pages/PageComplex'
 import { PageInput } from '../pages/PageInput'
@@ -105,11 +104,6 @@ const basePath = config.BASE_PATH
 export const Layout: React.ComponentType<{}> = () => {
     const {snackbars, rmNotice} = useSnack()
     const scrollWrapper = React.useRef<HTMLDivElement | null>(null)
-    const {resetScopes} = useProgressControlReset()
-
-    React.useLayoutEffect(() => {
-        return () => resetScopes([])
-    }, [resetScopes])
 
     return <>
         <Header/>

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'
@@ -11,6 +12,7 @@ import { config } from '../config'
 import LinearProgress from '@mui/material/LinearProgress'
 import Alert from '@mui/material/Alert'
 import AlertTitle from '@mui/material/AlertTitle'
+import { ApiPing } from '../components/ApiPing'
 import IcRefresh from '@mui/icons-material/Refresh'
 import { IconButtonProgress } from '@ui-controls/progress/IconButtonProgress'
 import FormControl from '@mui/material/FormControl'
@@ -121,13 +123,23 @@ 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}>
+                            <ApiPing/>
+                        </Grid2>
                     </Grid2>
                 </Paper>
             </Box>

diff --git a/apps/demo/src/pages/PageHome.tsx b/apps/demo/src/pages/PageHome.tsx
@@ -4,7 +4,6 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import Container from '@mui/material/Container'
-import { ApiPing } from '../components/ApiPing'
 import Grid2 from '@mui/material/Unstable_Grid2'
 import { ViewerFromText } from '@content-ui/md-mui/Viewer'
 
@@ -14,13 +13,6 @@ Lorem ipsum dolor sit amet...
 
 Hey there this is some content, rendered from Markdown as ReactJS components using MUI.
 
-\`\`\`json
-{
-    "demo": true,
-    "val": "test"
-}
-\`\`\`
-
 Some code: \`var some = true\`.
 
 > Blockquotes :+1:
@@ -52,9 +44,6 @@ export const PageHome: React.ComponentType = () => {
                         />
                     </Paper>
                 </Grid2>
-                <Grid2 xs={12} md={8} mdOffset={2}>
-                    <ApiPing/>
-                </Grid2>
             </Grid2>
         </Container>
     </>