Skip to content

Commit 8394234

Browse files
elbakerinoelbakerino
committed
Merge branch 'develop'
2 parents bb3ed1f + 0ff53a3 commit 8394234

17 files changed

+197
-110
lines changed

‎apps/demo/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
"i18next-resources-to-backend": "^1.0.0",
5050
"immutable": "^4.0.0",
5151
"moment": "^2.29.4",
52-
"nanoid": "^4.0.0",
52+
"nanoid": "^5.0.9",
5353
"react": "^18.3.1",
5454
"react-api-fetch": "~0.3.1",
5555
"react-dom": "^18.3.1",

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@ Some note with some content.
4343
4444
With even more sentences, words and other things.
4545
46-
| Time | Name |
47-
| ---- | ---- |
48-
| 8am | Morning |
49-
| 12am | Noon |
50-
| 6pm | Evening |
51-
| 10pm | Night |
46+
| Time | Name | Score |
47+
| ---- | ---- | ----: |
48+
| 8am | Morning | 10 |
49+
| 12am | Noon | 40 |
50+
| 6pm | Evening | 20 |
51+
| 10pm | Night | 30 |
5252
5353
`
5454

‎apps/sandbox/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"@codemirror/view": "^6.0.0",
3131
"@content-ui/input": "^0.1.5",
3232
"@content-ui/md": "^0.0.11",
33-
"@content-ui/md-mui": "^0.1.4",
34-
"@content-ui/react": "^0.1.3",
33+
"@content-ui/md-mui": "^0.1.5",
34+
"@content-ui/react": "^0.1.4",
3535
"@content-ui/struct": "^0.1.3",
3636
"@emotion/react": "^11.9.0",
3737
"@emotion/styled": "^11.8.1",

‎package-lock.json

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

‎packages/md-mui/LeafChildNodes.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import React from 'react'
1+
import { ReactNode } from 'react'
22
import type { Parents } from 'mdast'
3-
//import { useContentSelection } from '@content-ui/react/ContentSelectionContext'
43
import { ContentLeaf } from '@content-ui/react/ContentLeaf'
5-
//import { isLeafSelected } from '@content-ui/react/Utils/isLeafSelected'
64

75
export const LeafChildNodes = <P extends {} = {}, TChildNodes extends Parents['children'] = Parents['children']>(
86
props:
97
P &
108
{
9+
/**
10+
* A childs index is only passed down when `true`, for performance reasons.
11+
*/
12+
addIndex?: boolean
1113
childNodes: TChildNodes
1214
},
13-
): React.ReactNode => {
14-
// todo: move this hook into the decorators
15-
// const editorSelection = useContentSelection()
16-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
17-
const {childNodes, ...p} = props
15+
): ReactNode => {
16+
const {childNodes, addIndex, ...p} = props
1817
const length = childNodes.length
1918
return childNodes
2019
.map((childNext, i) =>
@@ -23,8 +22,7 @@ export const LeafChildNodes = <P extends {} = {}, TChildNodes extends Parents['c
2322
{...p}
2423
elem={childNext.type}
2524
child={childNext}
26-
// todo: add support for multiple selections, e.g. multiple lines with unselected lines in between
27-
// selected={editorSelection ? isLeafSelected(childNext.position, editorSelection.startLine, editorSelection.endLine) : false}
25+
index={addIndex ? i : undefined}
2826
isFirst={i === 0}
2927
isLast={i === length - 1}
3028
/>,

‎packages/md-mui/Leafs/LeafCode.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type { Theme } from '@mui/material/styles'
77
import { TypographyWithExtras } from '@content-ui/md-mui/MuiComponents/Theme'
88
import type { MuiContentRenderComponents } from '@content-ui/md-mui/LeafsComponents'
99

10-
export const LeafCode: React.FC<ContentLeafProps<'code'>> = ({child, selected}) => {
10+
export const LeafCode: React.FC<ContentLeafProps<'code'> & { dense?: boolean }> = ({child, selected, dense}) => {
1111
const cRef = useLeafFollower<HTMLDivElement>(selected)
1212
const {renderMap: {components}} = useContentLeafs<ContentLeafsPropsMapping, MuiContentRenderComponents>()
1313

@@ -20,6 +20,7 @@ export const LeafCode: React.FC<ContentLeafProps<'code'>> = ({child, selected})
2020
<Code
2121
value={child.value}
2222
lang={child?.lang || undefined}
23+
dense={dense}
2324
/> :
2425
<pre><code>{child.value}</code></pre>}
2526
</Box>
@@ -33,6 +34,7 @@ export const LeafCodeInline: React.FC<ContentLeafProps<'inlineCode'>> = ({child}
3334
py={0.25}
3435
sx={{
3536
fontFamily: typography?.fontFamilyCode,
37+
// todo: this may not be consistent with `dense`, inheriting directly from settings or using `em` may be safer
3638
fontSize: typography?.fontSizeCode,
3739
border: 0,
3840
backgroundColor: 'background.default',

‎packages/md-mui/Leafs/LeafHRouter.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import { ContentLeafProps } from '@content-ui/react/ContentLeafsContext'
88
import { flattenText } from '@content-ui/struct/flattenText'
99
import { textToId } from '@content-ui/struct/textToId'
1010

11+
/**
12+
* Heading component with react-router. Navigates the user to the location when the link was copied.
13+
*/
1114
export const LeafHRouter: FC<ContentLeafProps<'heading'> & { selected?: boolean }> = ({child, selected, isFirst, isLast}) => {
1215
const hRef = useLeafFollower<HTMLHeadingElement>(selected)
1316
const navigate = useNavigate()

‎packages/md-mui/Leafs/LeafTable.tsx

+56-33
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react'
21
import { LeafChildNodes } from '@content-ui/md-mui/LeafChildNodes'
32
import type { Table as MdTable/* TableRow as MdTableRow, TableCell as MdTableCell*/ } from 'mdast'
43
import Table from '@mui/material/Table'
@@ -9,57 +8,81 @@ import TableBody from '@mui/material/TableBody'
98
import { useTheme } from '@mui/material/styles'
109
import { ContentLeafProps } from '@content-ui/react/ContentLeafsContext'
1110
import { useLeafFollower } from '@content-ui/react/useLeafFollower'
11+
import { FC, createContext, PropsWithChildren, useContext, useMemo } from 'react'
1212

13-
export const LeafTable: React.FC<ContentLeafProps<'table'>> = ({child}) => {
14-
const c = child as MdTable
15-
// todo: align exists on table level, not on cell level
16-
//const align = c.align
17-
const headerRow = c.children.slice(0, 1)
18-
const contentRows = c.children.slice(1)
13+
export type TableSettings = {
14+
align: MdTable['align']
15+
}
16+
17+
const TableSettingsContext = createContext<TableSettings>({
18+
align: undefined,
19+
})
20+
21+
export const useTableSettings = (): TableSettings => useContext(TableSettingsContext)
22+
23+
export const TableSettingsProvider = (
24+
{
25+
children,
26+
align,
27+
}: PropsWithChildren<TableSettings>,
28+
) => {
29+
const ctx = useMemo(() => {
30+
return {
31+
align,
32+
}
33+
}, [
34+
align,
35+
])
36+
37+
return <TableSettingsContext.Provider value={ctx}>{children}</TableSettingsContext.Provider>
38+
}
39+
40+
41+
export const LeafTable: FC<ContentLeafProps<'table'>> = ({child}) => {
42+
const headerRow = child.children.slice(0, 1)
43+
const contentRows = child.children.slice(1)
1944
return <Table
2045
size={'small'}
2146
sx={{
2247
mt: 1,
2348
mb: 3,
2449
}}
2550
>
26-
<TableHead>
27-
<LeafChildNodes childNodes={headerRow}/>
28-
</TableHead>
29-
<TableBody>
30-
<LeafChildNodes<{ tableSettings?: any }>
31-
childNodes={contentRows}
32-
//tableSettings={{align}}
33-
/>
34-
{/*contentRows.map((childNext, i) =>
35-
<ContentLeaf
36-
key={i}
37-
elem={childNext.type}
38-
child={childNext}
39-
selected={isLeafSelected(childNext.position, editorSelection?.startLine, editorSelection?.endLine)}
40-
isFirst={i === 0}
41-
isLast={i === length - 1}
42-
//{...p as unknown as P}
43-
/>)*/}
44-
</TableBody>
51+
<TableSettingsProvider
52+
align={child.align}
53+
>
54+
<TableHead>
55+
<LeafChildNodes
56+
childNodes={headerRow}
57+
/>
58+
</TableHead>
59+
<TableBody>
60+
<LeafChildNodes
61+
childNodes={contentRows}
62+
/>
63+
</TableBody>
64+
</TableSettingsProvider>
4565
</Table>
4666
}
4767

48-
export const LeafTableRow: React.FC<ContentLeafProps<'tableRow'>> = ({child, selected, ...props}) => {
68+
export const LeafTableRow: FC<ContentLeafProps<'tableRow'>> = ({child, selected, ...props}) => {
4969
const rRef = useLeafFollower<HTMLTableRowElement>(selected)
5070
return <TableRow ref={rRef}>
51-
<LeafChildNodes childNodes={child.children} {...props}/>
71+
<LeafChildNodes
72+
childNodes={child.children}
73+
{...props}
74+
addIndex
75+
/>
5276
</TableRow>
5377
}
5478

55-
export const LeafTableCell: React.FC<ContentLeafProps<'tableCell'> & { tableSettings?: any }> = ({child, selected, ...props}) => {
79+
export const LeafTableCell: FC<ContentLeafProps<'tableCell'> & { tableSettings?: any }> = ({child, selected, index, ...props}) => {
5680
const {palette} = useTheme()
57-
// const c = child as MdTableCell
81+
const {align} = useTableSettings()
82+
const cellAlign = typeof index === 'number' && align ? align[index] : undefined
5883
// todo: add gfm-advanced support
5984
return <TableCell
60-
// todo: this needs to know the cell index
61-
// align={tableSettings?.align[cellNo] || c.data?.align as TableCellProps['align']}
62-
// align={c.data?.align as TableCellProps['align']}
85+
align={cellAlign || undefined}
6386
style={{
6487
backgroundColor: selected ? palette.mode === 'dark' ? 'rgba(5, 115, 115, 0.11)' : 'rgba(206, 230, 228, 0.31)' : undefined,
6588
boxShadow: selected ? palette.mode === 'dark' ? '-8px 0px 0px 0px rgba(5, 115, 115, 0.11)' : '-8px 0px 0px 0px rgba(206, 230, 228, 0.31)' : undefined,

‎packages/md-mui/Leafs/LeafTypo.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ export const LeafP: FC<ContentLeafProps<'paragraph'> & { selected?: boolean, den
3131
</Typography>
3232
}
3333

34+
/**
35+
* Headline component with link support.
36+
* Only copies link, does not navigate the user to it on copy.
37+
*/
3438
export const LeafH: FC<ContentLeafProps<'heading'> & { selected?: boolean }> = ({child, selected, isFirst, isLast}) => {
3539
const hRef = useLeafFollower<HTMLHeadingElement>(selected)
3640
const id = textToId(flattenText(child as Parent).join(''))

‎packages/md-mui/Leafs/LeafYaml.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React from 'react'
1+
import { useSettings } from '@content-ui/react/LeafSettings'
2+
import React, { FC, useState } from 'react'
23
import Box from '@mui/material/Box'
34
import YAML from 'yaml'
45
import IcDataObject from '@mui/icons-material/DataObject'
@@ -9,8 +10,9 @@ import Collapse from '@mui/material/Collapse'
910
import { ContentLeafProps, ContentLeafsPropsMapping, useContentLeafs } from '@content-ui/react/ContentLeafsContext'
1011
import type { MuiContentRenderComponents } from '@content-ui/md-mui/LeafsComponents'
1112

12-
export const LeafYaml: React.FC<ContentLeafProps<'yaml'>> = ({child}) => {
13-
const [showData, setShowData] = React.useState(false)
13+
export const LeafYaml: FC<ContentLeafProps<'yaml'> & { dense?: boolean }> = ({child, dense}) => {
14+
const [showData, setShowData] = useState(false)
15+
const {fmHide} = useSettings()
1416
const {renderMap: {components}} = useContentLeafs<ContentLeafsPropsMapping, MuiContentRenderComponents>()
1517

1618
const parsedData = React.useMemo(() => {
@@ -23,7 +25,16 @@ export const LeafYaml: React.FC<ContentLeafProps<'yaml'>> = ({child}) => {
2325
}
2426
}, [child])
2527

26-
if(!child) return null
28+
if(
29+
(
30+
typeof fmHide === 'string' ?
31+
fmHide === 'always' ||
32+
(fmHide === 'first' && child.position?.start?.line === 1) : false
33+
)
34+
|| (
35+
typeof fmHide === 'function' ? fmHide(child) : false
36+
)
37+
) return null
2738

2839
const Code = components.Code
2940
// eslint-disable-next-line deprecation/deprecation
@@ -43,6 +54,7 @@ export const LeafYaml: React.FC<ContentLeafProps<'yaml'>> = ({child}) => {
4354
<Code
4455
value={child.value}
4556
lang={'yaml'}
57+
dense={dense}
4658
/> :
4759
<pre><code>{child.value}</code></pre>}
4860
</Box>

‎packages/md-mui/LeafsComponents.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@ export interface MuiContentRenderComponents extends ContentRenderComponents, Mui
1515
/**
1616
* @todo support setting focus and retrieving e.g. selections
1717
*/
18-
Code?: ComponentType<{ value?: string, lang?: string }>
18+
Code?: ComponentType<{ value?: string, lang?: string, dense?: boolean }>
1919
}

0 commit comments

Comments
 (0)