Merge branch 'develop'

control-ui · Nov 17, 2024 · e30cf7c · e30cf7c
2 parents 5726a27 + aa65965
commit e30cf7c
Show file tree

Hide file tree

Showing 50 changed files with 1,362 additions and 678 deletions.
diff --git a/apps/demo/src/components/ContentUI.ts b/apps/demo/src/components/ContentUI.ts
@@ -1,14 +1,20 @@
+import { LeafContainerDirective, LeafLeafDirective, LeafTextDirective } from '@content-ui/md-mui/Leafs/LeafDirective'
 import { renderMapping } from '@content-ui/md-mui/LeafsMarkdown'
+import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
 import { CustomCodeMirror } from './CustomCodeMirror.js'
 
 export const contentUIMapping: typeof renderMapping = {
     ...renderMapping,
     leafs: {
         ...renderMapping.leafs,
+        textDirective: LeafTextDirective,
+        leafDirective: LeafLeafDirective,
+        containerDirective: LeafContainerDirective,
     },
     components: {
         ...renderMapping.components,
         Code: CustomCodeMirror,
+        Link: MuiLink,
     },
     matchLeaf: (p, l) => l[p.elem],
 }
diff --git a/apps/demo/src/components/CustomWidgets/WidgetMarkdownEditor.tsx b/apps/demo/src/components/CustomWidgets/WidgetMarkdownEditor.tsx
@@ -1,3 +1,4 @@
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
 import { ContentParser } from '@content-ui/md/parser/ContentParser'
 import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
 import { UIMetaReadContextType } from '@ui-schema/ui-schema/UIMetaReadContext'
@@ -125,6 +126,7 @@ export const WidgetMarkdownEditor: React.ComponentType<WidgetProps & WithScalarV
                         preview={preview}
                         refWarningBox={refWarningBox}
                         CodeMirror={CustomCodeMirror}
+                        ViewerBox={ViewerBoxRouter}
                         onChange={readOnly ? undefined : handleOnChange}
                         extensions={extensions}
                         textValue={textValue}

diff --git a/apps/demo/src/components/CustomWidgets/WidgetMarkdownViewer.tsx b/apps/demo/src/components/CustomWidgets/WidgetMarkdownViewer.tsx
@@ -5,7 +5,8 @@ import { TransTitle, WidgetProps, WithScalarValue } from '@ui-schema/ui-schema'
 import Box from '@mui/material/Box'
 import FormLabel from '@mui/material/FormLabel'
 import { ValidityHelperText } from '@ui-schema/ds-material/Component/LocaleHelperText'
-import { ViewerFromText } from '@content-ui/md-mui/Viewer'
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
+import { ViewerFromText } from '@content-ui/react/ViewerFromText'
 import { SettingsProvider } from '@content-ui/react/LeafSettings'
 
 export const WidgetMarkdownViewer: React.ComponentType<WidgetProps & WithScalarValue & UIMetaReadContextType> = (
@@ -31,10 +32,13 @@ export const WidgetMarkdownViewer: React.ComponentType<WidgetProps & WithScalarV
 
         <SettingsProvider
             headlineOffset={1}
+            headlineLinkable
+            headlineSelectable
+            headlineSelectableOnHover
             dense={dense || (readActive && readDense)}
         >
             <ViewerFromText
-                // storeKeys={storeKeys}
+                Viewer={ViewerBoxRouter}
                 processor={ContentParser}
                 textValue={typeof value === 'string' ? value : ''}
                 onMount

diff --git a/apps/demo/src/pages/PageComplex.tsx b/apps/demo/src/pages/PageComplex.tsx
@@ -1,4 +1,4 @@
-import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { ContentParserExtended } from '@content-ui/md/parser/ContentParserExtended'
 import { SettingsProvider } from '@content-ui/react/LeafSettings'
 import Paper from '@mui/material/Paper'
 import React from 'react'
@@ -20,7 +20,8 @@ import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 import Box from '@mui/material/Box'
-import { ViewerFromText } from '@content-ui/md-mui/Viewer'
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
+import { ViewerFromText } from '@content-ui/react/ViewerFromText'
 
 export const PageComplex: React.ComponentType = () => {
     const {t} = useTranslation('translation')
@@ -129,7 +130,8 @@ export const PageComplex: React.ComponentType = () => {
                                     headlineSelectableOnHover
                                 >
                                     <ViewerFromText
-                                        processor={ContentParser}
+                                        Viewer={ViewerBoxRouter}
+                                        processor={ContentParserExtended}
                                         textValue={contentDetails.file}
                                         parseDelay={0}
                                         onMount

diff --git a/apps/demo/src/pages/PageForm.tsx b/apps/demo/src/pages/PageForm.tsx
@@ -98,7 +98,7 @@ export const PageForm: React.ComponentType = () => {
         </Helmet>
 
         <Container maxWidth={'lg'} fixed>
-            <Paper sx={{overflow: 'auto'}}>
+            <Paper>
                 <Box my={1}>
                     <Button onClick={() => setEdit(r => !r)}>
                         {edit ? 'read' : 'edit'}

diff --git a/apps/demo/src/pages/PageHome.tsx b/apps/demo/src/pages/PageHome.tsx
@@ -5,7 +5,8 @@ import Helmet from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import Container from '@mui/material/Container'
 import Grid2 from '@mui/material/Unstable_Grid2'
-import { ViewerFromText } from '@content-ui/md-mui/Viewer'
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
+import { ViewerFromText } from '@content-ui/react/ViewerFromText'
 
 const md = `# Content-UI Demo
 
@@ -38,6 +39,7 @@ export const PageHome: React.ComponentType = () => {
                 <Grid2 xs={12} md={8} mdOffset={2}>
                     <Paper sx={{px: 1.5, py: 1}}>
                         <ViewerFromText
+                            Viewer={ViewerBoxRouter}
                             processor={ContentParser}
                             textValue={md}
                             onMount

diff --git a/apps/demo/src/pages/PageInput.tsx b/apps/demo/src/pages/PageInput.tsx
@@ -1,9 +1,10 @@
-import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { ContentParserExtended } from '@content-ui/md/parser/ContentParserExtended'
 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'
 import IcVisibilityOff from '@mui/icons-material/VisibilityOff'
+import IcConvert from '@mui/icons-material/SyncAlt'
 import { useTheme } from '@mui/material/styles'
 import React, { useState } from 'react'
 import Helmet from 'react-helmet'
@@ -12,7 +13,7 @@ import Grid2 from '@mui/material/Unstable_Grid2'
 import { ContentInput } from '@content-ui/input/ContentInput'
 import { CustomCodeMirror, getHighlight } from '../components/CustomCodeMirror'
 import Box from '@mui/material/Box'
-import { Viewer } from '@content-ui/md-mui/Viewer'
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
 import { SettingsProvider } from '@content-ui/react/LeafSettings'
 import { useContentEditor } from '@content-ui/input/useContentEditor'
 import { useContent } from '@content-ui/react/useContent'
@@ -66,7 +67,7 @@ export const PageInput: React.ComponentType = () => {
         typeof value === 'string' ? value : '',
         setValue,
     )
-    const {processing, outdated, root, file} = useContent({
+    const {processing, outdated, root, file, stringify} = useContent({
         textValue,
         // for direct preview, the parseDelay should be as low as possible,
         // with disabled preview it's better to use `600` for less unnecessary processing
@@ -76,8 +77,8 @@ export const PageInput: React.ComponentType = () => {
                     textValue.length > 3500 ? 280 :
                         40,
         autoProcess,
-        onMount: true,
-        processor: ContentParser,
+        onMount: false,
+        processor: ContentParserExtended,
     })
 
     const extensions = React.useMemo(() => {
@@ -107,11 +108,13 @@ export const PageInput: React.ComponentType = () => {
                         headlineLinkable
                         headlineSelectable
                         headlineSelectableOnHover
+                        // linkAnchorToHref={anchor => window.location.pathname + anchor}
                     >
                         <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}
+                                    ViewerBox={ViewerBoxRouter}
                                     onChange={handleOnChange}
                                     extensions={extensions}
                                     textValue={textValue}
@@ -120,7 +123,17 @@ export const PageInput: React.ComponentType = () => {
                                     outdated={outdated}
                                     autoProcess={autoProcess}
                                     setAutoProcess={setAutoProcess}
+                                    onReformat={stringify ? () => setValue(stringify?.() || '') : undefined}
                                 />
+                                <Button
+                                    startIcon={<IcConvert/>}
+                                    disabled={!stringify}
+                                    onClick={() => setValue(stringify?.() || '')}
+                                    variant={'outlined'} size={'small'}
+                                    sx={{mt: 2, mb: 1, ml: 1}}
+                                >
+                                    {'reformat'}
+                                </Button>
                             </Grid2>
                             <Grid2
                                 xs={12} md={6}
@@ -133,7 +146,7 @@ export const PageInput: React.ComponentType = () => {
                                     backgroundColor: 'background.paper',
                                 }}
                             >
-                                <Viewer
+                                <ViewerBoxRouter
                                     outdated={outdated}
                                     processing={processing}
                                 />

diff --git a/apps/sandbox/package.json b/apps/sandbox/package.json
@@ -28,11 +28,11 @@
         "@codemirror/search": "^6.0.0",
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
-        "@content-ui/input": "^0.1.3",
-        "@content-ui/md": "^0.0.10",
-        "@content-ui/md-mui": "^0.1.3",
-        "@content-ui/react": "^0.1.2",
-        "@content-ui/struct": "^0.1.2",
+        "@content-ui/input": "^0.1.4",
+        "@content-ui/md": "^0.0.11",
+        "@content-ui/md-mui": "^0.1.4",
+        "@content-ui/react": "^0.1.3",
+        "@content-ui/struct": "^0.1.3",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.10",

diff --git a/apps/sandbox/src/main.tsx b/apps/sandbox/src/main.tsx
@@ -1,3 +1,4 @@
+import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
 import React, { useState } from 'react'
 import {
     contentUIDecorators,
@@ -25,6 +26,7 @@ const contentUIMapping: typeof renderMapping = {
     components: {
         ...renderMapping.components,
         Code: CustomCodeMirror,
+        Link: MuiLink,
     },
 }
 

diff --git a/apps/sandbox/src/pages/PageHome.tsx b/apps/sandbox/src/pages/PageHome.tsx
@@ -1,6 +1,7 @@
 import Container from '@mui/material/Container'
 import Paper from '@mui/material/Paper'
-import { ViewerFromText } from '@content-ui/md-mui/Viewer'
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
+import { ViewerFromText } from '@content-ui/react/ViewerFromText'
 import { ContentParser } from '@content-ui/md/parser/ContentParser'
 
 const md = `# Content-UI Demo
@@ -35,7 +36,12 @@ export const PageHome = () => {
     return (
         <Container maxWidth={'lg'} fixed>
             <Paper sx={{px: 1.5, py: 1}}>
-                <ViewerFromText processor={ContentParser} textValue={md} onMount/>
+                <ViewerFromText
+                    Viewer={ViewerBoxRouter}
+                    processor={ContentParser}
+                    textValue={md}
+                    onMount
+                />
             </Paper>
         </Container>
     )

diff --git a/apps/sandbox/src/pages/PageInput.tsx b/apps/sandbox/src/pages/PageInput.tsx
@@ -1,11 +1,11 @@
+import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
 import { ContentParser } from '@content-ui/md/parser/ContentParser'
 import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
 import React from 'react'
 import Grid2 from '@mui/material/Unstable_Grid2'
 import { ContentInput } from '@content-ui/input/ContentInput'
 import { CustomCodeMirror, getHighlight } from '../components/CustomCodeMirror'
 import Box from '@mui/material/Box'
-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'
@@ -59,7 +59,7 @@ export const PageInput: React.ComponentType = () => {
         autoProcess,
         setAutoProcess,
     } = useContentEditor(typeof value === 'string' ? value : '', setValue)
-    const {processing, outdated, root, file} = useContent({
+    const {processing, outdated, root, file, stringify} = useContent({
         textValue,
         // for direct preview, the parseDelay should be as low as possible,
         // with disabled preview it's better to use `600` for less unnecessary processing
@@ -116,6 +116,7 @@ export const PageInput: React.ComponentType = () => {
                                 >
                                     <ContentInput
                                         CodeMirror={CustomCodeMirror}
+                                        ViewerBox={ViewerBoxRouter}
                                         onChange={handleOnChange}
                                         extensions={extensions}
                                         textValue={textValue}
@@ -124,6 +125,7 @@ export const PageInput: React.ComponentType = () => {
                                         outdated={outdated}
                                         autoProcess={autoProcess}
                                         setAutoProcess={setAutoProcess}
+                                        onReformat={stringify ? () => setValue(stringify?.() || '') : undefined}
                                     />
                                 </Grid2>
                                 <Grid2
@@ -138,7 +140,7 @@ export const PageInput: React.ComponentType = () => {
                                         backgroundColor: 'background.paper',
                                     }}
                                 >
-                                    <Viewer
+                                    <ViewerBoxRouter
                                         outdated={outdated}
                                         processing={processing}
                                     />