add Table cell align support; add index to LeafPayload;

Author: elbakerino

apps/demo/src/pages/PageInput.tsx

@@ -43,12 +43,12 @@ Some note with some content.
 
 With even more sentences, words and other things.
 
-| Time | Name |
-| ---- | ---- |
-| 8am  | Morning |
-| 12am | Noon |
-| 6pm  | Evening |
-| 10pm | Night |
+| Time | Name | Score |
+| ---- | ---- | ----: |
+| 8am  | Morning | 10 |
+| 12am | Noon | 40 |
+| 6pm  | Evening | 20 |
+| 10pm | Night | 30 |
 
 `
 

packages/md-mui/LeafChildNodes.tsx

@@ -1,20 +1,19 @@
-import React from 'react'
+import { ReactNode } from 'react'
 import type { Parents } from 'mdast'
-//import { useContentSelection } from '@content-ui/react/ContentSelectionContext'
 import { ContentLeaf } from '@content-ui/react/ContentLeaf'
-//import { isLeafSelected } from '@content-ui/react/Utils/isLeafSelected'
 
 export const LeafChildNodes = <P extends {} = {}, TChildNodes extends Parents['children'] = Parents['children']>(
     props:
         P &
         {
+            /**
+             * A childs index is only passed down when `true`, for performance reasons.
+             */
+            addIndex?: boolean
             childNodes: TChildNodes
         },
-): React.ReactNode => {
-    // todo: move this hook into the decorators
-    // const editorSelection = useContentSelection()
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {childNodes, ...p} = props
+): ReactNode => {
+    const {childNodes, addIndex, ...p} = props
     const length = childNodes.length
     return childNodes
         .map((childNext, i) =>
@@ -23,8 +22,7 @@ export const LeafChildNodes = <P extends {} = {}, TChildNodes extends Parents['c
                 {...p}
                 elem={childNext.type}
                 child={childNext}
-                // todo: add support for multiple selections, e.g. multiple lines with unselected lines in between
-                // selected={editorSelection ? isLeafSelected(childNext.position, editorSelection.startLine, editorSelection.endLine) : false}
+                index={addIndex ? i : undefined}
                 isFirst={i === 0}
                 isLast={i === length - 1}
             />,

packages/md-mui/Leafs/LeafTable.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { LeafChildNodes } from '@content-ui/md-mui/LeafChildNodes'
 import type { Table as MdTable/* TableRow as MdTableRow, TableCell as MdTableCell*/ } from 'mdast'
 import Table from '@mui/material/Table'
@@ -9,57 +8,84 @@ import TableBody from '@mui/material/TableBody'
 import { useTheme } from '@mui/material/styles'
 import { ContentLeafProps } from '@content-ui/react/ContentLeafsContext'
 import { useLeafFollower } from '@content-ui/react/useLeafFollower'
+import { FC, createContext, PropsWithChildren, useContext, useMemo } from 'react'
 
-export const LeafTable: React.FC<ContentLeafProps<'table'>> = ({child}) => {
-    const c = child as MdTable
+export type TableSettings = {
+    align: MdTable['align']
+}
+
+const TableSettingsContext = createContext<TableSettings>({
+    align: undefined,
+})
+
+export const useTableSettings = (): TableSettings => useContext(TableSettingsContext)
+
+export const TableSettingsProvider = (
+    {
+        children,
+        align,
+    }: PropsWithChildren<TableSettings>,
+) => {
+    const ctx = useMemo(() => {
+        return {
+            align,
+        }
+    }, [
+        align,
+    ])
+
+    return <TableSettingsContext.Provider value={ctx}>{children}</TableSettingsContext.Provider>
+}
+
+
+export const LeafTable: FC<ContentLeafProps<'table'>> = ({child}) => {
+    console.log('child-t', child)
     // todo: align exists on table level, not on cell level
     //const align = c.align
-    const headerRow = c.children.slice(0, 1)
-    const contentRows = c.children.slice(1)
+    const headerRow = child.children.slice(0, 1)
+    const contentRows = child.children.slice(1)
     return <Table
         size={'small'}
         sx={{
             mt: 1,
             mb: 3,
         }}
     >
-        <TableHead>
-            <LeafChildNodes childNodes={headerRow}/>
-        </TableHead>
-        <TableBody>
-            <LeafChildNodes<{ tableSettings?: any }>
-                childNodes={contentRows}
-                //tableSettings={{align}}
-            />
-            {/*contentRows.map((childNext, i) =>
-                <ContentLeaf
-                    key={i}
-                    elem={childNext.type}
-                    child={childNext}
-                    selected={isLeafSelected(childNext.position, editorSelection?.startLine, editorSelection?.endLine)}
-                    isFirst={i === 0}
-                    isLast={i === length - 1}
-                    //{...p as unknown as P}
-                />)*/}
-        </TableBody>
+        <TableSettingsProvider
+            align={child.align}
+        >
+            <TableHead>
+                <LeafChildNodes
+                    childNodes={headerRow}
+                />
+            </TableHead>
+            <TableBody>
+                <LeafChildNodes
+                    childNodes={contentRows}
+                />
+            </TableBody>
+        </TableSettingsProvider>
     </Table>
 }
 
-export const LeafTableRow: React.FC<ContentLeafProps<'tableRow'>> = ({child, selected, ...props}) => {
+export const LeafTableRow: FC<ContentLeafProps<'tableRow'>> = ({child, selected, ...props}) => {
     const rRef = useLeafFollower<HTMLTableRowElement>(selected)
     return <TableRow ref={rRef}>
-        <LeafChildNodes childNodes={child.children} {...props}/>
+        <LeafChildNodes
+            childNodes={child.children}
+            {...props}
+            addIndex
+        />
     </TableRow>
 }
 
-export const LeafTableCell: React.FC<ContentLeafProps<'tableCell'> & { tableSettings?: any }> = ({child, selected, ...props}) => {
+export const LeafTableCell: FC<ContentLeafProps<'tableCell'> & { tableSettings?: any }> = ({child, selected, index, ...props}) => {
     const {palette} = useTheme()
-    // const c = child as MdTableCell
+    const {align} = useTableSettings()
+    const cellAlign = typeof index === 'number' && align ? align[index] : undefined
     // todo: add gfm-advanced support
     return <TableCell
-        // todo: this needs to know the cell index
-        // align={tableSettings?.align[cellNo] || c.data?.align as TableCellProps['align']}
-        // align={c.data?.align as TableCellProps['align']}
+        align={cellAlign || undefined}
         style={{
             backgroundColor: selected ? palette.mode === 'dark' ? 'rgba(5, 115, 115, 0.11)' : 'rgba(206, 230, 228, 0.31)' : undefined,
             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/react/ContentLeafsContext.tsx

@@ -69,6 +69,10 @@ export interface LeafsEngine<TDeco extends ReactDeco<{}, {}, {}>, TRender extend
 export interface ContentLeafPayload<TChild extends { type: string } = { type: string }> {
     elem: TChild['type']
     child: TChild
+    /**
+     * A childs index, only passed down if specified by parent, for performance reasons.
+     */
+    index?: number
     selected?: boolean
     // `true` when first Leaf inside the parent level
     isFirst?: boolean