Skip to content

Commit 2e3b63f

Browse files
elbakerinoelbakerino
committed
md-mui separate react-router components; refac Viewer/ViewerFromText;
1 parent 7193c3c commit 2e3b63f

39 files changed

+675
-332
lines changed

‎apps/demo/src/components/ContentUI.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { renderMapping } from '@content-ui/md-mui/LeafsMarkdown'
2+
import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
23
import { CustomCodeMirror } from './CustomCodeMirror.js'
34

45
export const contentUIMapping: typeof renderMapping = {
@@ -9,6 +10,7 @@ export const contentUIMapping: typeof renderMapping = {
910
components: {
1011
...renderMapping.components,
1112
Code: CustomCodeMirror,
13+
Link: MuiLink,
1214
},
1315
matchLeaf: (p, l) => l[p.elem],
1416
}

‎apps/demo/src/components/CustomWidgets/WidgetMarkdownEditor.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
12
import { ContentParser } from '@content-ui/md/parser/ContentParser'
23
import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
34
import { UIMetaReadContextType } from '@ui-schema/ui-schema/UIMetaReadContext'
@@ -125,6 +126,7 @@ export const WidgetMarkdownEditor: React.ComponentType<WidgetProps & WithScalarV
125126
preview={preview}
126127
refWarningBox={refWarningBox}
127128
CodeMirror={CustomCodeMirror}
129+
ViewerBox={ViewerBoxRouter}
128130
onChange={readOnly ? undefined : handleOnChange}
129131
extensions={extensions}
130132
textValue={textValue}

‎apps/demo/src/components/CustomWidgets/WidgetMarkdownViewer.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { TransTitle, WidgetProps, WithScalarValue } from '@ui-schema/ui-schema'
55
import Box from '@mui/material/Box'
66
import FormLabel from '@mui/material/FormLabel'
77
import { ValidityHelperText } from '@ui-schema/ds-material/Component/LocaleHelperText'
8-
import { ViewerFromText } from '@content-ui/md-mui/Viewer'
8+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
9+
import { ViewerFromText } from '@content-ui/react/ViewerFromText'
910
import { SettingsProvider } from '@content-ui/react/LeafSettings'
1011

1112
export const WidgetMarkdownViewer: React.ComponentType<WidgetProps & WithScalarValue & UIMetaReadContextType> = (
@@ -31,10 +32,13 @@ export const WidgetMarkdownViewer: React.ComponentType<WidgetProps & WithScalarV
3132

3233
<SettingsProvider
3334
headlineOffset={1}
35+
headlineLinkable
36+
headlineSelectable
37+
headlineSelectableOnHover
3438
dense={dense || (readActive && readDense)}
3539
>
3640
<ViewerFromText
37-
// storeKeys={storeKeys}
41+
Viewer={ViewerBoxRouter}
3842
processor={ContentParser}
3943
textValue={typeof value === 'string' ? value : ''}
4044
onMount

‎apps/demo/src/pages/PageComplex.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import InputLabel from '@mui/material/InputLabel'
2020
import MenuItem from '@mui/material/MenuItem'
2121
import Select from '@mui/material/Select'
2222
import Box from '@mui/material/Box'
23-
import { ViewerFromText } from '@content-ui/md-mui/Viewer'
23+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
24+
import { ViewerFromText } from '@content-ui/react/ViewerFromText'
2425

2526
export const PageComplex: React.ComponentType = () => {
2627
const {t} = useTranslation('translation')
@@ -129,6 +130,7 @@ export const PageComplex: React.ComponentType = () => {
129130
headlineSelectableOnHover
130131
>
131132
<ViewerFromText
133+
Viewer={ViewerBoxRouter}
132134
processor={ContentParser}
133135
textValue={contentDetails.file}
134136
parseDelay={0}

‎apps/demo/src/pages/PageForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const PageForm: React.ComponentType = () => {
9898
</Helmet>
9999

100100
<Container maxWidth={'lg'} fixed>
101-
<Paper sx={{overflow: 'auto'}}>
101+
<Paper>
102102
<Box my={1}>
103103
<Button onClick={() => setEdit(r => !r)}>
104104
{edit ? 'read' : 'edit'}

‎apps/demo/src/pages/PageHome.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import Helmet from 'react-helmet'
55
import { useTranslation } from 'react-i18next'
66
import Container from '@mui/material/Container'
77
import Grid2 from '@mui/material/Unstable_Grid2'
8-
import { ViewerFromText } from '@content-ui/md-mui/Viewer'
8+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
9+
import { ViewerFromText } from '@content-ui/react/ViewerFromText'
910

1011
const md = `# Content-UI Demo
1112
@@ -38,6 +39,7 @@ export const PageHome: React.ComponentType = () => {
3839
<Grid2 xs={12} md={8} mdOffset={2}>
3940
<Paper sx={{px: 1.5, py: 1}}>
4041
<ViewerFromText
42+
Viewer={ViewerBoxRouter}
4143
processor={ContentParser}
4244
textValue={md}
4345
onMount

‎apps/demo/src/pages/PageInput.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Grid2 from '@mui/material/Unstable_Grid2'
1212
import { ContentInput } from '@content-ui/input/ContentInput'
1313
import { CustomCodeMirror, getHighlight } from '../components/CustomCodeMirror'
1414
import Box from '@mui/material/Box'
15-
import { Viewer } from '@content-ui/md-mui/Viewer'
15+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
1616
import { SettingsProvider } from '@content-ui/react/LeafSettings'
1717
import { useContentEditor } from '@content-ui/input/useContentEditor'
1818
import { useContent } from '@content-ui/react/useContent'
@@ -107,11 +107,13 @@ export const PageInput: React.ComponentType = () => {
107107
headlineLinkable
108108
headlineSelectable
109109
headlineSelectableOnHover
110+
// linkAnchorToHref={anchor => window.location.pathname + anchor}
110111
>
111112
<Grid2 container spacing={2} sx={{overflow: 'auto', flexWrap: {xs: 'wrap', md: 'nowrap'}}}>
112113
<Grid2 xs={12} md={6} sx={{overflow: 'auto', scrollbarWidth: 'thin', maxHeight: {md: '100%'}}}>
113114
<ContentInput
114115
CodeMirror={CustomCodeMirror}
116+
ViewerBox={ViewerBoxRouter}
115117
onChange={handleOnChange}
116118
extensions={extensions}
117119
textValue={textValue}
@@ -133,7 +135,7 @@ export const PageInput: React.ComponentType = () => {
133135
backgroundColor: 'background.paper',
134136
}}
135137
>
136-
<Viewer
138+
<ViewerBoxRouter
137139
outdated={outdated}
138140
processing={processing}
139141
/>

‎apps/sandbox/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@
2828
"@codemirror/search": "^6.0.0",
2929
"@codemirror/state": "^6.0.0",
3030
"@codemirror/view": "^6.0.0",
31-
"@content-ui/input": "^0.1.3",
31+
"@content-ui/input": "^0.1.4",
3232
"@content-ui/md": "^0.0.10",
33-
"@content-ui/md-mui": "^0.1.3",
33+
"@content-ui/md-mui": "^0.1.4",
3434
"@content-ui/react": "^0.1.2",
3535
"@content-ui/struct": "^0.1.2",
3636
"@emotion/react": "^11.9.0",

‎apps/sandbox/src/main.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
12
import React, { useState } from 'react'
23
import {
34
contentUIDecorators,
@@ -25,6 +26,7 @@ const contentUIMapping: typeof renderMapping = {
2526
components: {
2627
...renderMapping.components,
2728
Code: CustomCodeMirror,
29+
Link: MuiLink,
2830
},
2931
}
3032

‎apps/sandbox/src/pages/PageHome.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Container from '@mui/material/Container'
22
import Paper from '@mui/material/Paper'
3-
import { ViewerFromText } from '@content-ui/md-mui/Viewer'
3+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
4+
import { ViewerFromText } from '@content-ui/react/ViewerFromText'
45
import { ContentParser } from '@content-ui/md/parser/ContentParser'
56

67
const md = `# Content-UI Demo
@@ -35,7 +36,12 @@ export const PageHome = () => {
3536
return (
3637
<Container maxWidth={'lg'} fixed>
3738
<Paper sx={{px: 1.5, py: 1}}>
38-
<ViewerFromText processor={ContentParser} textValue={md} onMount/>
39+
<ViewerFromText
40+
Viewer={ViewerBoxRouter}
41+
processor={ContentParser}
42+
textValue={md}
43+
onMount
44+
/>
3945
</Paper>
4046
</Container>
4147
)

‎apps/sandbox/src/pages/PageInput.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { ViewerBoxRouter } from '@content-ui/md-mui/ViewerBoxRouter'
12
import { ContentParser } from '@content-ui/md/parser/ContentParser'
23
import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
34
import React from 'react'
45
import Grid2 from '@mui/material/Unstable_Grid2'
56
import { ContentInput } from '@content-ui/input/ContentInput'
67
import { CustomCodeMirror, getHighlight } from '../components/CustomCodeMirror'
78
import Box from '@mui/material/Box'
8-
import { Viewer } from '@content-ui/md-mui/Viewer'
99
import { SettingsProvider } from '@content-ui/react/LeafSettings'
1010
import { useContentEditor } from '@content-ui/input/useContentEditor'
1111
import { useContent } from '@content-ui/react/useContent'
@@ -116,6 +116,7 @@ export const PageInput: React.ComponentType = () => {
116116
>
117117
<ContentInput
118118
CodeMirror={CustomCodeMirror}
119+
ViewerBox={ViewerBoxRouter}
119120
onChange={handleOnChange}
120121
extensions={extensions}
121122
textValue={textValue}
@@ -138,7 +139,7 @@ export const PageInput: React.ComponentType = () => {
138139
backgroundColor: 'background.paper',
139140
}}
140141
>
141-
<Viewer
142+
<ViewerBoxRouter
142143
outdated={outdated}
143144
processing={processing}
144145
/>

‎package-lock.json

+14-14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/input/ContentInput.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { ViewerBox, ViewerBoxProps } from '@content-ui/md-mui/ViewerBox'
12
import { useContentSelection } from '@content-ui/react/ContentSelectionContext'
2-
import React from 'react'
3+
import { ComponentType, CSSProperties, MutableRefObject, useMemo } from 'react'
34
import { CodeMirrorComponentProps } from '@ui-schema/kit-codemirror/CodeMirror'
45
import { Extension } from '@codemirror/state'
56
import Box from '@mui/material/Box'
@@ -13,23 +14,23 @@ import IcAutoProcess from '@mui/icons-material/ModelTraining'
1314
import { CodeMirrorOnChange } from '@ui-schema/kit-codemirror/useCodeMirror'
1415
import { useContentContext } from '@content-ui/react/ContentFileContext'
1516
import { WithContent } from '@content-ui/react/useContent'
16-
import { Viewer, ViewerProps } from '@content-ui/md-mui/Viewer'
1717

1818
export interface ViewEditorProps extends Pick<WithContentEditor, 'autoProcess' | 'setAutoProcess'>, Omit<WithContent, 'file' | 'root'> {
19-
CodeMirror: React.FC<CodeMirrorComponentProps>
19+
CodeMirror: ComponentType<CodeMirrorComponentProps>
2020
extensions?: Extension[]
2121
preview?: boolean
22-
refWarningBox?: React.MutableRefObject<HTMLDivElement | null>
22+
refWarningBox?: MutableRefObject<HTMLDivElement | null>
2323
onChange?: CodeMirrorOnChange
2424
valid?: boolean
2525
textValue: string
2626
bigSize?: boolean
2727
noLint?: boolean
28+
ViewerBox?: ComponentType<ViewerBoxProps>
2829
// passed to the `CodeMirror` component
29-
editorStyle?: React.CSSProperties
30+
editorStyle?: CSSProperties
3031
}
3132

32-
export const ContentInput: React.ComponentType<ViewEditorProps & Omit<ViewerProps, 'needsProcessing' | 'editorSelection'>> = (
33+
export const ContentInput = (
3334
{
3435
valid,
3536
preview,
@@ -41,17 +42,18 @@ export const ContentInput: React.ComponentType<ViewEditorProps & Omit<ViewerProp
4142
processing, noLint, outdated,
4243
autoProcess, setAutoProcess,
4344
bigSize,
45+
ViewerBox: ViewerBoxProp = ViewerBox,
4446
...props
45-
},
47+
}: ViewEditorProps & Omit<ViewerBoxProps, 'needsProcessing' | 'editorSelection' | 'onChange'>,
4648
) => {
4749
const {file} = useContentContext()
4850
const editorSelection = useContentSelection()
4951

50-
const classNamesContent = React.useMemo(() => (valid === false ? ['invalid'] : undefined), [valid])
52+
const classNamesContent = useMemo(() => (valid === false ? ['invalid'] : undefined), [valid])
5153

5254
return <>
5355
{preview ?
54-
<Viewer
56+
<ViewerBoxProp
5557
outdated={outdated}
5658
processing={processing}
5759
{...props}

‎packages/input/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@content-ui/input",
3-
"version": "0.1.3",
3+
"version": "0.1.4",
44
"description": "",
55
"author": {
66
"name": "bemit",
@@ -25,8 +25,8 @@
2525
"@ui-schema/kit-codemirror": "0.1.0-alpha.1 || ~0.1.1 || ~0.2.0",
2626
"react-progress-state": "~0.2.6 || ~0.3.1",
2727
"@ui-controls/progress": "~0.0.4",
28-
"@content-ui/react": "~0.1.0",
29-
"@content-ui/md-mui": "~0.1.0",
28+
"@content-ui/react": "~0.1.3",
29+
"@content-ui/md-mui": "~0.1.4",
3030
"react": "^18.0",
3131
"react-dom": "^18.0",
3232
"@codemirror/state": "^6.0.0"
@@ -37,8 +37,8 @@
3737
"@ui-schema/kit-codemirror": "~0.2.0",
3838
"react-progress-state": "~0.3.2",
3939
"@ui-controls/progress": "~0.0.4",
40-
"@content-ui/react": "~0.1.0",
41-
"@content-ui/md-mui": "~0.1.0",
40+
"@content-ui/react": "~0.1.3",
41+
"@content-ui/md-mui": "~0.1.4",
4242
"react": "^18.0",
4343
"react-dom": "^18.0",
4444
"@codemirror/state": "^6.0.0"

0 commit comments

Comments
 (0)