Extend Table options

packages/core/src/Toolbar.tsx

@@ -52,6 +52,7 @@ import {
   addColumn,
   addRow
 } from '@dreifuss-wysiwyg-editor/table'
+
 import {
   MARK_BOLD,
   MARK_CODE,

packages/core/src/utils/createPlateComponents.tsx

@@ -32,13 +32,13 @@ import {ELEMENT_MEDIA_EMBED} from '@udecode/plate-media-embed'
 import {MediaEmbedElement} from '@dreifuss-wysiwyg-editor/media-embed-ui'
 import {ELEMENT_PARAGRAPH} from '@udecode/plate-paragraph'
 import {ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TR} from '@dreifuss-wysiwyg-editor/table'
-import {TableElement, TableDataElement} from '@dreifuss-wysiwyg-editor/table-ui'
 import {StyledElement, StyledLeaf} from '@udecode/plate-styled-components'
 import {DefaultPlatePluginKey} from './createPlateOptions'
 import {RenderFontLeaf} from '@dreifuss-wysiwyg-editor/font-ui'
 import {MARK_COLOR, MARK_BG_COLOR} from '@dreifuss-wysiwyg-editor/font'
 import {ELEMENT_IMAGE} from '@dreifuss-wysiwyg-editor/image'
 import {EnablePluginsProps} from '../DreifussWysiwygEditor'
+import {renderElement} from '@dreifuss-wysiwyg-editor/table-ui/src/resizable/elements'
 
 export const createPlateComponents = (
   enablePlugins: EnablePluginsProps,
@@ -131,26 +131,10 @@ export const createPlateComponents = (
         }
       }
     }),
-    [ELEMENT_TABLE]: TableElement,
-    [ELEMENT_TD]: TableDataElement,
-    [ELEMENT_TH]: withProps(StyledElement, {
-      as: 'th',
-      styles: {
-        root: {
-          backgroundColor: 'rgb(244, 245, 247)',
-          border: '1px solid rgb(193, 199, 208)',
-          padding: '8px',
-          minWidth: '48px',
-          textAlign: 'left',
-          selectors: {
-            '> *': {
-              margin: 0
-            }
-          }
-        }
-      }
-    }),
-    [ELEMENT_TR]: withProps(StyledElement, {as: 'tr'}),
+    [ELEMENT_TABLE]: renderElement,
+    [ELEMENT_TD]: renderElement,
+    [ELEMENT_TH]: renderElement,
+    [ELEMENT_TR]: renderElement,
     [ELEMENT_TODO_LI]: TodoListElement,
     [MARK_BOLD]: withProps(StyledLeaf, {as: 'strong'}),
     [MARK_CODE]: withProps(StyledLeaf, {

packages/core/src/utils/createPlateOptions.tsx

@@ -131,14 +131,8 @@ export const createPlateOptions = (
       type: 'list-item-cell'
     },
     [ELEMENT_TABLE]: {},
-    [ELEMENT_TD]: {
-      type: 'table-cell',
-      defaultType: 'table-cell'
-    },
-    [ELEMENT_TR]: {
-      type: 'table-row',
-      defaultType: 'table-row'
-    },
+    [ELEMENT_TD]: {},
+    [ELEMENT_TR]: {},
     [ELEMENT_TH]: {},
     [ELEMENT_TODO_LI]: {},
     [MARK_BOLD]: {

packages/table-ui/package.json

@@ -42,7 +42,8 @@
     "@udecode/plate-toolbar": "^3.0.1",
     "@udecode/plate-styled-components": "^3.0.1",
     "twin.macro": "^2.7.0",
-    "styled-components": ">=5.0.0"
+    "styled-components": ">=5.0.0",
+    "@styled-icons/material": "^10.34.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.14",

packages/table-ui/src/resizable/elements/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {Editor, NodeEntry, Path, Point, Transforms} from 'slate'
+import {RenderElementProps, RenderLeafProps} from 'slate-react'
+import {Table, withTable} from './table'
+// import 'antd/dist/antd.css';
+
+export const renderElement = (props: RenderElementProps) => {
+  switch (props.element.type) {
+    case 'table':
+    case 'table-row':
+    case 'table-cell':
+    case 'table-content':
+      return <Table {...props} />
+    default:
+      return <span {...props.attributes}>{props.children}</span>
+  }
+}
+
+export const renderLeaf = (props: RenderLeafProps) => (
+  <span {...props.attributes}>{props.children}</span>
+)
+
+export const withSchema = (editor: Editor) => {
+  const {normalizeNode} = editor
+
+  editor.normalizeNode = entry => {
+    if (maybePreserveSpace(editor, entry)) return
+
+    normalizeNode(entry)
+  }
+
+  return withTable(editor)
+}
+
+export const PreserveSpaceAfter = new Set(['table'])
+export const PreserveSpaceBefore = new Set(['table'])
+
+export const insertParagraph = (editor: Editor, at: Path | Point, text = '') => {
+  Transforms.insertNodes(
+    editor,
+    {
+      type: 'paragraph',
+      children: [{text}]
+    },
+    {
+      at
+    }
+  )
+}
+
+const maybePreserveSpace = (editor: Editor, entry: NodeEntry): boolean | void => {
+  const [node, path] = entry
+  const {type} = node
+  let preserved = false
+
+  if (PreserveSpaceAfter.has(type)) {
+    const next = Editor.next(editor, {at: path})
+    if (!next || PreserveSpaceBefore.has(next[0].type)) {
+      insertParagraph(editor, Path.next(path))
+      preserved = true
+    }
+  }
+
+  if (PreserveSpaceBefore.has(type)) {
+    if (path[path.length - 1] === 0) {
+      insertParagraph(editor, path)
+      preserved = true
+    } else {
+      const prev = Editor.previous(editor, {at: path})
+      if (!prev || PreserveSpaceAfter.has(prev[0].type)) {
+        insertParagraph(editor, path)
+        preserved = true
+      }
+    }
+  }
+
+  return preserved
+}

packages/table-ui/src/resizable/elements/table/commands/index.ts

@@ -0,0 +1,10 @@
+export * from './insertTable'
+export * from './insertBelow'
+export * from './insertAbove'
+export * from './insertRight'
+export * from './insertLeft'
+export * from './removeTable'
+export * from './removeColumn'
+export * from './removeRow'
+export * from './mergeSelection'
+export * from './splitCell'

packages/table-ui/src/resizable/elements/table/commands/insertAbove.ts

@@ -0,0 +1,55 @@
+import {Editor, Transforms, NodeEntry} from 'slate'
+import {splitedTable, Col} from '../selection'
+import {createRow} from '../creator'
+
+export function insertAbove(table: NodeEntry, editor: Editor) {
+  const {selection} = editor
+  if (!selection || !table) return
+
+  const yIndex = table[1].length
+
+  const {gridTable, getCol} = splitedTable(editor, table)
+
+  const [startCell] = Editor.nodes(editor, {
+    match: n => n.type === 'table-cell'
+  })
+
+  const [insertPositionCol] = getCol((c: Col) => c.cell.key === startCell[0].key && c.isReal)
+
+  let checkInsertEnable = true
+  const insertYIndex = insertPositionCol.path[yIndex]
+  const insertCols = new Map<string, Col>()
+
+  gridTable[insertYIndex].forEach((col: Col) => {
+    if (!col.isReal) {
+      const [originCol] = getCol((c: Col) => c.isReal && c.cell.key === col.cell.key)
+
+      if (originCol.path[yIndex] === insertYIndex) {
+        insertCols.set(originCol.cell.key, originCol)
+      } else {
+        checkInsertEnable = false
+        return
+      }
+    } else {
+      insertCols.set(col.cell.key, col)
+    }
+  })
+
+  if (!checkInsertEnable) {
+    return
+  }
+
+  const newRow = createRow(insertCols.size)
+
+  ;[...insertCols.values()].forEach((col, index) => {
+    newRow.children[index].colspan = col.cell.colspan || 1
+  })
+
+  const [[, path]] = Editor.nodes(editor, {
+    match: n => n.type === 'table-row'
+  })
+
+  Transforms.insertNodes(editor, newRow, {
+    at: path
+  })
+}

packages/table-ui/src/resizable/elements/table/commands/insertBelow.ts

@@ -0,0 +1,60 @@
+import {Editor, Transforms, Path, NodeEntry} from 'slate'
+import {splitedTable, Col} from '../selection'
+import {createRow} from '../creator'
+
+export function insertBelow(table: NodeEntry, editor: Editor) {
+  const {selection} = editor
+  if (!selection || !table) return
+
+  const yIndex = table[1].length
+
+  const {gridTable, getCol} = splitedTable(editor, table)
+
+  const [startCell] = Editor.nodes(editor, {
+    match: n => n.type === 'table-cell'
+  })
+
+  const [insertPositionCol] = getCol((c: Col) => c.cell.key === startCell[0].key && c.isReal)
+
+  let checkInsertEnable = true
+  const insertCols = new Map<string, Col>()
+
+  const y = insertPositionCol.path[yIndex] + (insertPositionCol.cell.rowspan || 1) - 1
+
+  gridTable[y].forEach((col: Col) => {
+    const [originCol] = getCol((n: any) => n.isReal && n.cell.key === col.cell.key)
+
+    const {cell, path} = originCol
+
+    if (!gridTable[y + 1]) {
+      insertCols.set(cell.key, originCol)
+    } else if (path[yIndex] + (cell.rowspan || 1) - 1 === y) {
+      insertCols.set(cell.key, originCol)
+    } else {
+      checkInsertEnable = false
+      return
+    }
+  })
+
+  if (!checkInsertEnable) {
+    return
+  }
+
+  const newRow = createRow(insertCols.size)
+
+  ;[...insertCols.values()].forEach((value, index) => {
+    newRow.children[index].colspan = value.cell.colspan || 1
+  })
+
+  const [[, path]] = Editor.nodes(editor, {
+    match: n => n.type === 'table-row'
+  })
+
+  for (let i = 1; i < startCell[0].rowspan; i++) {
+    path[yIndex] += 1
+  }
+
+  Transforms.insertNodes(editor, newRow, {
+    at: Path.next(path)
+  })
+}

packages/table-ui/src/resizable/elements/table/commands/insertLeft.ts

@@ -0,0 +1,55 @@
+import {Editor, Transforms, NodeEntry} from 'slate'
+import {splitedTable, Col} from '../selection'
+import {createCell} from '../creator'
+
+export function insertLeft(table: NodeEntry, editor: Editor) {
+  const {selection} = editor
+  if (!selection || !table) return
+
+  const xIndex = table[1].length + 1
+
+  const {gridTable, getCol} = splitedTable(editor, table)
+
+  const [startCell] = Editor.nodes(editor, {
+    match: n => n.type === 'table-cell'
+  })
+
+  const [insertPositionCol] = getCol((c: Col) => c.cell.key === startCell[0].key && c.isReal)
+
+  const x = insertPositionCol.path[xIndex]
+
+  const insertCols = new Map<string, Col>()
+  let checkInsertable = true
+
+  gridTable.forEach((row: Col[]) => {
+    const col = row[x]
+
+    if (col.isReal) {
+      insertCols.set(col.cell.key, col)
+    } else {
+      const [originCol] = getCol((n: Col) => n.cell.key === col.cell.key && n.isReal)
+      const {cell, path} = originCol
+
+      if (path[xIndex] === x) {
+        insertCols.set(cell.key, originCol)
+      } else {
+        checkInsertable = false
+        return
+      }
+    }
+  })
+
+  if (!checkInsertable) {
+    return
+  }
+
+  insertCols.forEach((col: Col) => {
+    const newCell = createCell({
+      rowspan: col.cell.rowspan || 1
+    })
+
+    Transforms.insertNodes(editor, newCell, {
+      at: col.originPath
+    })
+  })
+}