@contember/react-slate-editor-base 2.0.0-alpha.24 → 2.0.0-alpha.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-slate-editor-base",
   "license": "Apache-2.0",
-  "version": "2.0.0-alpha.24",
+  "version": "2.0.0-alpha.26",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -33,8 +33,8 @@
     "directory": "packages/react-slate-editor-base"
   },
   "dependencies": {
-    "@contember/react-binding": "2.0.0-alpha.24",
-    "@contember/utilities": "2.0.0-alpha.24",
+    "@contember/react-binding": "2.0.0-alpha.26",
+    "@contember/utilities": "2.0.0-alpha.26",
     "@radix-ui/primitive": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "is-hotkey": "^0.2.0",

package/src/plugins/element/tables/TableHtmlDeserializer.ts

@@ -0,0 +1,37 @@
+import { HtmlDeserializerPlugin } from '../../../types'
+import { tableCellElementType } from './TableCellElement'
+import { tableElementType } from './TableElement'
+import { tableRowElementType } from './TableRowElement'
+
+export const tableHTMLDeserializer: HtmlDeserializerPlugin = {
+	processBlockPaste: ({ element, next, cumulativeTextAttrs }) => {
+		if (element.tagName === 'TABLE') {
+			return [
+				{
+					type: tableElementType,
+					children: next(element.childNodes, cumulativeTextAttrs),
+				},
+			]
+		}
+
+		if (element.tagName === 'TR') {
+			return [
+				{
+					type: tableRowElementType,
+					children: next(element.childNodes, cumulativeTextAttrs),
+				},
+			]
+		}
+
+		if (element.tagName === 'TD' || element.tagName === 'TH') {
+			return [
+				{
+					type: tableCellElementType,
+					children: next(element.childNodes, cumulativeTextAttrs),
+				},
+			]
+		}
+
+		return null
+	},
+}

package/src/plugins/element/tables/withTables.ts

@@ -3,6 +3,7 @@ import { ContemberEditor } from '../../../editor'
 import { isTableCellElement, TableCellElement, tableCellElementPlugin } from './TableCellElement'
 import { getTableElementColumnCount, getTableElementRowCount, isTableElement, TableElement, tableElementPlugin } from './TableElement'
 import { getTableCellCoordinates, selectTableCellContents } from './TableElementSelection'
+import { tableHTMLDeserializer } from './TableHtmlDeserializer'
 import { TableModifications } from './TableModifications'
 import { isTableRowElement, TableRowElement, tableRowElementPlugin } from './TableRowElement'
 import { ElementRenderer } from '../../../types'
@@ -24,6 +25,8 @@ export const withTables = ({ renderTable, renderTableCell, renderTableRow }: {
 	editor.registerElement(tableCellElementPlugin({ render: renderTableCell }))
 	editor.registerElement(tableRowElementPlugin({ render: renderTableRow }))
 
+	editor.htmlDeserializer.registerPlugin(tableHTMLDeserializer)
+
 	Object.assign<Editor, Partial<Editor>>(editor, {
 		insertBreak: () => {
 			const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)