Skip to content

Commit b2feb0d

Browse files
elbakerinoelbakerino
committed
new renderer; new selection store; leaf settings types;
- remove ReactDeco and simplified with new Renderer - new selection store with subscription based re-rendering, now only the leafs which are affected by the selection are re-rendering - type generics support at LeafSettings provider and hooks - remove deprecated props and components
1 parent aa1805c commit b2feb0d

37 files changed

+482
-385
lines changed

‎apps/demo/src/App.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { contentUIDecorators, ContentLeafsProvider } from '@content-ui/react/ContentLeafsContext'
1+
import { ContentLeafsProvider, ContentRendererMemo } from '@content-ui/react/ContentLeafsContext'
22
import { Validator } from '@ui-schema/json-schema'
33
import React from 'react'
44
import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
@@ -112,7 +112,10 @@ export const App: React.ComponentType<{}> = () => {
112112
binding={customBinding}
113113
validate={validate}
114114
>
115-
<ContentLeafsProvider deco={contentUIDecorators} renderMap={contentUIMapping}>
115+
<ContentLeafsProvider
116+
Renderer={ContentRendererMemo}
117+
renderMap={contentUIMapping}
118+
>
116119
<Layout/>
117120
</ContentLeafsProvider>
118121
</UIMetaProvider>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const WidgetMarkdownEditor: React.ComponentType<WidgetProps & { readOnly?
4848
const {
4949
textValue,
5050
handleOnChange,
51-
editorSelection,
51+
editorSelectionStore,
5252
bigSize, autoProcess, setAutoProcess,
5353
} = useContentEditor(
5454
typeof value === 'string' ? value : '',
@@ -126,7 +126,9 @@ export const WidgetMarkdownEditor: React.ComponentType<WidgetProps & { readOnly?
126126
root={root}
127127
file={file}
128128
>
129-
<ContentSelectionProvider selection={editorSelection}>
129+
<ContentSelectionProvider
130+
selectionStore={editorSelectionStore}
131+
>
130132
<ContentInput
131133
preview={preview}
132134
refWarningBox={refWarningBox}

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -123,18 +123,13 @@ export const PageComplex: React.ComponentType = () => {
123123

124124
{contentDetails?.file ?
125125
<Grid size={12}>
126-
{/* todo: NoInfer works, if no generic is specified at all! but once added, it allows any prop
127-
* does not matter if:
128-
* - <TSettings = unknown>
129-
* - <TSettings extends object>
130-
* - <TSettings extends object = Record<string, unknown>>
131-
*/}
132-
<SettingsProvider/*<{ linkRefs?: object }>*/
126+
<SettingsProvider<{ linkRefs?: object }>
133127
headlineLinkable
134128
headlineSelectable
135129
headlineSelectableOnHover
136-
//linkRefs={{}}
137-
// xyz={{}}
130+
linkRefs={undefined}
131+
// @ts-expect-error next prop is not allowed
132+
xyz={null}
138133
>
139134
<ViewerFromText
140135
Viewer={ViewerBoxRouter}

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const PageInput: React.ComponentType = () => {
6464
const {
6565
textValue,
6666
handleOnChange,
67-
editorSelection,
67+
editorSelectionStore,
6868
bigSize, autoProcess, setAutoProcess,
6969
} = useContentEditor(
7070
typeof value === 'string' ? value : '',
@@ -98,13 +98,13 @@ export const PageInput: React.ComponentType = () => {
9898
<title>{t('brand')} · Content-UI</title>
9999
</>
100100

101-
<Box p={1} sx={{overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
101+
<Box p={1} sx={{overflow: 'auto', display: 'flex', flexDirection: 'column', flexGrow: 1}}>
102102
<ContentFileProvider
103103
root={root}
104104
file={file}
105105
>
106106
<ContentSelectionProvider
107-
selection={editorSelection}
107+
selectionStore={editorSelectionStore}
108108
>
109109
<SettingsProvider
110110
followEditor={isMediumScreen}
@@ -113,17 +113,23 @@ export const PageInput: React.ComponentType = () => {
113113
headlineLinkable
114114
headlineSelectable
115115
headlineSelectableOnHover
116+
// hideSelection
116117
// linkAnchorToHref={anchor => window.location.pathname + anchor}
117118
>
118-
<Grid container spacing={2} sx={{overflow: 'auto', flexWrap: {xs: 'wrap', md: 'nowrap'}}}>
119-
<Grid size={{xs: 12, md: 6}} sx={{overflow: 'auto', scrollbarWidth: 'thin', maxHeight: {md: '100%'}}}>
119+
<Grid container spacing={2} sx={{overflow: 'auto', flexGrow: 1, flexWrap: {xs: 'wrap', md: 'nowrap'}}}>
120+
<Grid size={{xs: 12, md: 6}} sx={{display: 'flex', flexDirection: 'column', overflow: 'auto', maxHeight: {md: '100%'}}}>
120121
<ContentInput
121122
CodeMirror={CustomCodeMirror}
122123
ViewerBox={ViewerBoxRouter}
123124
onChange={handleOnChange}
124125
codeMirrorProps={{
125126
extensions: extensions,
126127
variant: 'embed',
128+
style: {
129+
overflow: 'auto',
130+
display: 'flex',
131+
flexGrow: 1,
132+
},
127133
}}
128134
textValue={textValue}
129135
bigSize={bigSize}
@@ -139,7 +145,6 @@ export const PageInput: React.ComponentType = () => {
139145
size={{xs: 12, md: 6}}
140146
sx={{
141147
overflowY: 'auto',
142-
scrollbarWidth: 'thin',
143148
maxHeight: {md: '100%'},
144149
py: 2,
145150
px: {

‎apps/demo/tests/PageHome.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @jest-environment jsdom
33
*/
4-
import { ContentLeafsProvider, contentUIDecorators } from '@content-ui/react/ContentLeafsContext'
4+
import { ContentLeafsProvider, ContentRendererMemo } from '@content-ui/react/ContentLeafsContext'
55
import { it, expect, describe } from '@jest/globals'
66
import '@testing-library/jest-dom/jest-globals'
77
import { render, screen } from '@testing-library/react'
@@ -57,7 +57,7 @@ describe('PageHome', () => {
5757
it('PageHome Content', async() => {
5858
render(
5959
<BrowserRouter>
60-
<ContentLeafsProvider deco={contentUIDecorators} renderMap={contentUIMapping}>
60+
<ContentLeafsProvider Renderer={ContentRendererMemo} renderMap={contentUIMapping}>
6161
<Suspense>
6262
<PageHome/>
6363
</Suspense>

‎apps/sandbox/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@
3434
"@lezer/highlight": "^1.0.0",
3535
"@codemirror/state": "^6.0.0",
3636
"@codemirror/view": "^6.0.0",
37-
"@content-ui/input": "^0.2.1",
38-
"@content-ui/md": "^0.0.13",
39-
"@content-ui/md-mui": "^0.1.9",
40-
"@content-ui/react": "^0.1.8",
37+
"@content-ui/input": "^0.3.0",
38+
"@content-ui/md": "^0.0.15",
39+
"@content-ui/md-mui": "^0.2.0",
40+
"@content-ui/react": "^0.2.0",
4141
"@content-ui/struct": "^0.1.3",
4242
"@emotion/react": "^11.9.0",
4343
"@emotion/styled": "^11.8.1",

‎apps/sandbox/src/main.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
22
import React, { useState } from 'react'
3-
import {
4-
contentUIDecorators,
5-
ContentLeafsProvider,
6-
} from '@content-ui/react/ContentLeafsContext'
3+
import { ContentLeafsProvider, ContentRendererMemo } from '@content-ui/react/ContentLeafsContext'
74
import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
85
import CssBaseline from '@mui/material/CssBaseline'
96
import { renderMapping } from '@content-ui/md-mui/LeafsMarkdown'
@@ -43,7 +40,7 @@ const Main = () => {
4340
<CssBaseline/>
4441
<BrowserRouter>
4542
<ContentLeafsProvider
46-
deco={contentUIDecorators}
43+
Renderer={ContentRendererMemo}
4744
renderMap={contentUIMapping}
4845
>
4946
<App toggleTheme={toggleTheme}/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const PageInput: React.ComponentType = () => {
6262
const {
6363
textValue,
6464
handleOnChange,
65-
editorSelection,
65+
editorSelectionStore,
6666
bigSize,
6767
autoProcess,
6868
setAutoProcess,
@@ -99,7 +99,7 @@ export const PageInput: React.ComponentType = () => {
9999
file={file}
100100
>
101101
<ContentSelectionProvider
102-
selection={editorSelection}
102+
selectionStore={editorSelectionStore}
103103
>
104104
<SettingsProvider
105105
followEditor={isMediumScreen}

‎package-lock.json‎

Lines changed: 13 additions & 47 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/input/ContentInput.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ViewerBox, ViewerBoxProps } from '@content-ui/md-mui/ViewerBox'
22
import IcAutoFixNormal from '@mui/icons-material/AutoFixNormal'
3-
import { useContentSelection } from '@content-ui/react/ContentSelectionContext'
43
import IconButton from '@mui/material/IconButton'
54
import Tooltip from '@mui/material/Tooltip'
65
import Typography from '@mui/material/Typography'
@@ -65,10 +64,9 @@ export const ContentInput = <TCodeMirrorProps extends Omit<CodeMirrorComponentPr
6564
}: {
6665
CodeMirror: ComponentType<TCodeMirrorProps>
6766
codeMirrorProps?: TCodeMirrorProps
68-
} & ContentInputProps & Omit<ViewerBoxProps, 'needsProcessing' | 'editorSelection' | 'onChange'>,
67+
} & ContentInputProps & Omit<ViewerBoxProps, 'onChange'>,
6968
) => {
7069
const {file} = useContentContext()
71-
const editorSelection = useContentSelection()
7270

7371
const classNameContent = useMemo(() => (valid === false ? 'invalid' : undefined), [valid])
7472

@@ -91,7 +89,7 @@ export const ContentInput = <TCodeMirrorProps extends Omit<CodeMirrorComponentPr
9189
<InputBottomBar
9290
pl={1} mb={0} mt={0}
9391
textValue={textValue}
94-
editorSelection={preview ? undefined : editorSelection}
92+
hideSelection={preview}
9593
end={<>
9694
{noLint ? null :
9795
<InputWarnings
@@ -160,7 +158,12 @@ export const ContentInput = <TCodeMirrorProps extends Omit<CodeMirrorComponentPr
160158
</Box> : null}
161159

162160
<Box
163-
style={{position: 'relative', display: noLint ? 'none' : undefined}}
161+
style={{
162+
position: 'relative',
163+
display: noLint ? 'none' : undefined,
164+
maxHeight: '40%',
165+
overflow: 'auto',
166+
}}
164167
ref={refWarningBox}
165168
>
166169
<InputWarningsDetails fileMessages={file?.messages} processing={processing === 'loading'}/>

0 commit comments

Comments
 (0)