@contentful/field-editor-rich-text 3.4.21 → 3.5.0

package/dist/esm/plugins/Quote/withQuote.js

@@ -0,0 +1,38 @@
+import { BLOCKS, TEXT_CONTAINERS } from '@contentful/rich-text-types';
+import { Element, Point } from 'slate';
+import { getAboveNode, getText } from '../../internal/queries';
+import { deleteText, insertNodes } from '../../internal/transforms';
+export const withQuote = (editor)=>{
+    const { insertFragment  } = editor;
+    editor.insertFragment = (fragment)=>{
+        const startingNode = fragment.length && fragment[0];
+        const startsWithBlockquote = Element.isElement(startingNode) && startingNode.type === BLOCKS.QUOTE;
+        const containerEntry = getAboveNode(editor, {
+            match: {
+                type: TEXT_CONTAINERS
+            }
+        });
+        const containerIsNotEmpty = containerEntry && getText(editor, containerEntry[1]) !== '';
+        if (startsWithBlockquote && containerIsNotEmpty) {
+            const { selection  } = editor;
+            const isContentSelected = (selection)=>!!selection && Point.compare(selection.anchor, selection.focus) !== 0;
+            if (isContentSelected(selection)) {
+                deleteText(editor, {
+                    at: selection
+                });
+            }
+            const containerEntry = getAboveNode(editor, {
+                match: {
+                    type: TEXT_CONTAINERS
+                }
+            });
+            const containerIsNotEmpty = containerEntry && getText(editor, containerEntry[1]) !== '';
+            if (containerIsNotEmpty) {
+                insertNodes(editor, fragment);
+                return;
+            }
+        }
+        insertFragment(fragment);
+    };
+    return editor;
+};

package/dist/esm/plugins/SelectOnBackspace/createSelectOnBackspacePlugin.js

@@ -0,0 +1,11 @@
+import { INLINES } from '@contentful/rich-text-types';
+import { createSelectOnBackspacePlugin as createDefaultSelectPlugin } from '@udecode/plate-select';
+export const createSelectOnBackspacePlugin = ()=>createDefaultSelectPlugin({
+        options: {
+            query: {
+                allow: [
+                    INLINES.EMBEDDED_ENTRY
+                ]
+            }
+        }
+    });

package/dist/esm/plugins/SelectOnBackspace/index.js

@@ -0,0 +1 @@
+export * from './createSelectOnBackspacePlugin';

package/dist/esm/plugins/Table/__tests__/createTablePlugin.test.js

@@ -0,0 +1,88 @@
+import { assertOutput, jsx } from '../../../test-utils';
+describe('normalization', ()=>{
+    describe('Table', ()=>{
+        it('removes empty table nodes', ()=>{
+            const input = jsx("editor", null, jsx("htable", null));
+            const expected = jsx("editor", null, jsx("hp", null, jsx("text", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+        it('moves tables to the root level except nested tables', ()=>{
+            const table = jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "Cell 1")), jsx("htd", null, jsx("hp", null, "Cell 2"))));
+            const input = jsx("editor", null, jsx("hp", null, "hello", table), jsx("hquote", null, jsx("hp", null, "quote", table)), jsx("hul", null, jsx("hli", null, jsx("hp", null, "item", table))), jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell with table: ", table)))));
+            const expected = jsx("editor", null, jsx("hp", null, "hello"), table, jsx("hquote", null, jsx("hp", null, "quote")), table, jsx("hul", null, jsx("hli", null, jsx("hp", null, "item"))), table, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell with table: "), jsx("hp", null, "Cell 1"), jsx("hp", null, "Cell 2")))), jsx("hp", null, jsx("htext", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+        it('removes invalid children', ()=>{
+            const input = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "Cell 1")), jsx("htd", null, jsx("hp", null, "Cell 2"))), jsx("htd", null, "invalid cell"), "invalid text"), jsx("hp", null));
+            const expected = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "Cell 1")), jsx("htd", null, jsx("hp", null, "Cell 2")))), jsx("hp", null, jsx("htext", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+    });
+    describe('Table cell', ()=>{
+        it('converts invalid children to paragraphs', ()=>{
+            const input = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "Cell 1")), jsx("htd", null, jsx("hp", null, "Cell 2"), jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                bold: true,
+                italic: true,
+                underline: true
+            }, "quote"), jsx("hinline", {
+                type: "Entry",
+                id: "entry-id"
+            })))))), jsx("hp", null));
+            const expected = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "Cell 1")), jsx("htd", null, jsx("hp", null, "Cell 2"), jsx("hp", null, jsx("htext", {
+                bold: true,
+                italic: true,
+                underline: true
+            }, "quote"), jsx("hinline", {
+                type: "Entry",
+                id: "entry-id"
+            }), jsx("htext", null))))), jsx("hp", null, jsx("htext", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+    });
+    describe('Table row', ()=>{
+        it('must be wrapped in a table', ()=>{
+            const input = jsx("editor", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell"))));
+            const expected = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell")))), jsx("hp", null, jsx("text", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+        it('removes empty rows', ()=>{
+            const input = jsx("editor", null, jsx("htr", null));
+            const expected = jsx("editor", null, jsx("hp", null, jsx("text", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+        it('wraps invalid children in table cells', ()=>{
+            const input = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 1")), jsx("hp", null, "cell 2"))));
+            const expected = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 1")), jsx("htd", null, jsx("hp", null, "cell 2")))), jsx("hp", null, jsx("text", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+        it('ensures all table rows have the same width', ()=>{
+            const input = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 1"))), jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 2")), jsx("htd", null, jsx("hp", null, "cell 3")), jsx("htd", null, jsx("hp", null, "cell 4"))), jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 5")), jsx("htd", null, jsx("hp", null, "cell 6")))));
+            const expected = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 1")), jsx("htd", null, jsx("hp", null, jsx("text", null))), jsx("htd", null, jsx("hp", null, jsx("text", null)))), jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 2")), jsx("htd", null, jsx("hp", null, "cell 3")), jsx("htd", null, jsx("hp", null, "cell 4"))), jsx("htr", null, jsx("htd", null, jsx("hp", null, "cell 5")), jsx("htd", null, jsx("hp", null, "cell 6")), jsx("htd", null, jsx("hp", null, jsx("text", null))))), jsx("hp", null, jsx("text", null)));
+            assertOutput({
+                input,
+                expected
+            });
+        });
+    });
+});

package/dist/esm/plugins/Table/__tests__/helpers.test.js

@@ -0,0 +1,14 @@
+import { jsx, assertOutput, createTestEditor } from '../../../test-utils';
+import { insertTableAndFocusFirstCell } from '../helpers';
+test('insertTableAndFocusFirstCell', ()=>{
+    const input = jsx("editor", null, jsx("hp", null, jsx("htext", null), jsx("cursor", null)), jsx("hp", null));
+    const { editor  } = createTestEditor({
+        input
+    });
+    insertTableAndFocusFirstCell(editor);
+    const expected = jsx("editor", null, jsx("htable", null, jsx("htr", null, jsx("hth", null, jsx("hp", null, jsx("htext", null), jsx("cursor", null))), jsx("hth", null, jsx("hp", null, jsx("htext", null)))), jsx("htr", null, jsx("htd", null, jsx("hp", null, jsx("htext", null))), jsx("htd", null, jsx("hp", null, jsx("htext", null))))), jsx("hp", null, jsx("htext", null)));
+    assertOutput({
+        input,
+        expected
+    });
+});

package/dist/esm/plugins/Table/actions/addColumn.js

@@ -0,0 +1,45 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import { getEmptyCellNode } from '@udecode/plate-table';
+import { getAboveNode, getNextPath, someNode } from '../../../internal/queries';
+import { insertNodes } from '../../../internal/transforms';
+const addColumn = (editor, { header  }, getNextCellPath)=>{
+    if (someNode(editor, {
+        match: {
+            type: BLOCKS.TABLE
+        }
+    })) {
+        const currentCellItem = getAboveNode(editor, {
+            match: {
+                type: [
+                    BLOCKS.TABLE_HEADER_CELL,
+                    BLOCKS.TABLE_CELL
+                ]
+            }
+        });
+        const currentTableItem = getAboveNode(editor, {
+            match: {
+                type: BLOCKS.TABLE
+            }
+        });
+        if (currentCellItem && currentTableItem) {
+            const nextCellPath = getNextCellPath(currentCellItem[1]);
+            const newCellPath = nextCellPath.slice();
+            const replacePathPos = newCellPath.length - 2;
+            currentTableItem[0].children.forEach((_, rowIdx)=>{
+                newCellPath[replacePathPos] = rowIdx;
+                insertNodes(editor, getEmptyCellNode(editor, {
+                    header: header && rowIdx === 0
+                }), {
+                    at: newCellPath,
+                    select: rowIdx === 0
+                });
+            });
+        }
+    }
+};
+export const addColumnRight = (editor, options)=>{
+    addColumn(editor, options, (currentCellPath)=>getNextPath(currentCellPath));
+};
+export const addColumnLeft = (editor, options)=>{
+    addColumn(editor, options, (currentCellPath)=>currentCellPath);
+};

package/dist/esm/plugins/Table/actions/addRow.js

@@ -0,0 +1,39 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import { getEmptyRowNode } from '@udecode/plate-table';
+import { getAboveNode, someNode, getStartPoint, getNextPath } from '../../../internal/queries';
+import { select, insertNodes } from '../../../internal/transforms';
+const addRow = (editor, getNextRowPath)=>{
+    if (someNode(editor, {
+        match: {
+            type: BLOCKS.TABLE
+        }
+    })) {
+        const currentRowItem = getAboveNode(editor, {
+            match: {
+                type: BLOCKS.TABLE_ROW
+            }
+        });
+        if (currentRowItem) {
+            const [currentRowElem, currentRowPath] = currentRowItem;
+            const nextRowPath = getNextRowPath(currentRowPath);
+            insertNodes(editor, getEmptyRowNode(editor, {
+                header: false,
+                colCount: currentRowElem.children.length
+            }), {
+                at: nextRowPath,
+                select: true
+            });
+            select(editor, getStartPoint(editor, nextRowPath));
+        }
+    }
+};
+export const addRowBelow = (editor)=>{
+    addRow(editor, (currentRowPath)=>{
+        return getNextPath(currentRowPath);
+    });
+};
+export const addRowAbove = (editor)=>{
+    addRow(editor, (currentRowPath)=>{
+        return currentRowPath;
+    });
+};

package/dist/esm/plugins/Table/actions/index.js

@@ -0,0 +1,3 @@
+export * from './addRow';
+export * from './addColumn';
+export * from './setHeader';

package/dist/esm/plugins/Table/actions/setHeader.js

@@ -0,0 +1,24 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import { getAboveNode, getChildren } from '../../../internal/queries';
+import { setNodes } from '../../../internal/transforms';
+export const setHeader = (editor, enable)=>{
+    const tableItem = getAboveNode(editor, {
+        match: {
+            type: BLOCKS.TABLE
+        }
+    });
+    if (!tableItem) {
+        return;
+    }
+    const firstRow = getChildren(tableItem)[0];
+    if (!firstRow) {
+        return;
+    }
+    getChildren(firstRow).forEach(([, path])=>{
+        setNodes(editor, {
+            type: enable ? BLOCKS.TABLE_HEADER_CELL : BLOCKS.TABLE_CELL
+        }, {
+            at: path
+        });
+    });
+};

package/dist/esm/plugins/Table/components/Cell.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import { useSelected } from 'slate-react';
+import { TableActions } from './TableActions';
+const style = css`
+  border: 1px solid ${tokens.gray400};
+  border-collapse: collapse;
+  padding: 10px 12px;
+  min-width: 48px;
+  position: relative;
+  vertical-align: top;
+
+  div:last-child {
+    margin-bottom: 0;
+  }
+`;
+export const Cell = (props)=>{
+    const isSelected = useSelected();
+    return React.createElement("td", {
+        ...props.attributes,
+        ...props.element.data,
+        className: style
+    }, isSelected && React.createElement(TableActions, null), props.children);
+};

package/dist/esm/plugins/Table/components/HeaderCell.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import { useSelected } from 'slate-react';
+import { TableActions } from './TableActions';
+const style = css`
+  background-clip: padding-box;
+  background-color: ${tokens.gray200};
+  border: 1px solid ${tokens.gray400};
+  border-collapse: collapse;
+  padding: 10px 12px;
+  font-weight: ${tokens.fontWeightNormal};
+  text-align: left;
+  min-width: 48px;
+  position: relative;
+
+  div:last-child {
+    margin-bottom: 0;
+  }
+`;
+export const HeaderCell = (props)=>{
+    const isSelected = useSelected();
+    return React.createElement("th", {
+        ...props.attributes,
+        ...props.element.data,
+        className: style
+    }, isSelected && React.createElement(TableActions, null), props.children);
+};

package/dist/esm/plugins/Table/components/Row.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const style = css`
+  border: 1px solid ${tokens.gray400};
+  border-collapse: collapse;
+
+  &:hover td {
+    background-color: transparent !important;
+  }
+`;
+export const Row = (props)=>React.createElement("tr", {
+        ...props.attributes,
+        className: style
+    }, props.children);

package/dist/esm/plugins/Table/components/Table.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+const style = css`
+  margin-bottom: 1.5em;
+  border-collapse: collapse;
+  border-radius: 5px;
+  border-style: hidden;
+  box-shadow: 0 0 0 1px ${tokens.gray400};
+  width: 100%;
+  table-layout: fixed;
+  overflow: hidden;
+`;
+export const Table = (props)=>{
+    return React.createElement("div", {
+        "data-block-type": BLOCKS.TABLE
+    }, React.createElement("table", {
+        className: style,
+        ...props.attributes
+    }, React.createElement("tbody", null, props.children)));
+};

package/dist/esm/plugins/Table/components/TableActions.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { IconButton, Menu } from '@contentful/f36-components';
+import { ChevronDownIcon } from '@contentful/f36-icons';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { deleteColumn, deleteRow, deleteTable } from '@udecode/plate-table';
+import { css } from 'emotion';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { getNodeEntryFromSelection, getTableSize } from '../../../helpers/editor';
+import { withoutNormalizing } from '../../../internal';
+import { useReadOnly } from '../../../internal/hooks';
+import { getAboveNode } from '../../../internal/queries';
+import { addColumnLeft, addColumnRight, addRowAbove, addRowBelow, setHeader } from '../actions';
+import { isTableHeaderEnabled } from '../helpers';
+export const styles = {
+    topRight: css({
+        position: 'absolute',
+        top: '6px',
+        right: '5px'
+    })
+};
+const getCurrentTableSize = (editor)=>{
+    const [table] = getNodeEntryFromSelection(editor, BLOCKS.TABLE);
+    return table ? getTableSize(table) : null;
+};
+export const TableActions = ()=>{
+    const editor = useContentfulEditor();
+    const isDisabled = useReadOnly();
+    const [isOpen, setOpen] = React.useState(false);
+    const [isHeaderEnabled, setHeaderEnabled] = React.useState(false);
+    const close = React.useCallback(()=>{
+        setOpen(false);
+    }, []);
+    React.useEffect(()=>{
+        setHeaderEnabled(Boolean(editor && isTableHeaderEnabled(editor)));
+    }, [
+        editor
+    ]);
+    const canInsertRowAbove = React.useMemo(()=>{
+        if (!editor) {
+            return false;
+        }
+        const headerCell = getAboveNode(editor, {
+            match: {
+                type: BLOCKS.TABLE_HEADER_CELL
+            }
+        });
+        return !headerCell;
+    }, [
+        editor
+    ]);
+    const toggleHeader = React.useCallback(()=>{
+        close();
+        if (!editor) {
+            return;
+        }
+        const value = !isHeaderEnabled;
+        setHeaderEnabled(value);
+        setHeader(editor, value);
+    }, [
+        editor,
+        close,
+        isHeaderEnabled
+    ]);
+    const action = React.useCallback((cb, type, element)=>()=>{
+            if (!editor?.selection) return;
+            close();
+            const tableSize = getCurrentTableSize(editor);
+            withoutNormalizing(editor, ()=>{
+                cb(editor, {
+                    header: isHeaderEnabled
+                });
+            });
+            const actionName = `${type}Table${element === 'Table' ? '' : element}`;
+            editor.tracking.onViewportAction(actionName, {
+                tableSize
+            });
+        }, [
+        editor,
+        isHeaderEnabled,
+        close
+    ]);
+    if (isDisabled) {
+        return null;
+    }
+    return React.createElement(Menu, {
+        placement: "left",
+        isOpen: isOpen,
+        onOpen: ()=>{
+            setOpen(true);
+        },
+        onClose: close
+    }, React.createElement(Menu.Trigger, null, React.createElement(IconButton, {
+        size: "small",
+        variant: "transparent",
+        tabIndex: -1,
+        className: styles.topRight,
+        icon: React.createElement(ChevronDownIcon, null),
+        "aria-label": "Open table menu",
+        testId: "cf-table-actions-button"
+    })), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
+        onClick: action(addRowAbove, 'insert', 'Row'),
+        disabled: !canInsertRowAbove
+    }, "Add row above"), React.createElement(Menu.Item, {
+        onClick: action(addRowBelow, 'insert', 'Row')
+    }, "Add row below"), React.createElement(Menu.Item, {
+        onClick: action(addColumnLeft, 'insert', 'Column')
+    }, "Add column left"), React.createElement(Menu.Item, {
+        onClick: action(addColumnRight, 'insert', 'Column')
+    }, "Add column right"), React.createElement(Menu.Divider, null), React.createElement(Menu.Item, {
+        onClick: toggleHeader
+    }, isHeaderEnabled ? 'Disable table header' : 'Enable table header'), React.createElement(Menu.Divider, null), React.createElement(Menu.Item, {
+        onClick: action(deleteRow, 'remove', 'Row')
+    }, "Delete row"), React.createElement(Menu.Item, {
+        onClick: action(deleteColumn, 'remove', 'Column')
+    }, "Delete column"), React.createElement(Menu.Item, {
+        onClick: action(deleteTable, 'remove', 'Table')
+    }, "Delete table")));
+};

package/dist/esm/plugins/Table/components/ToolbarButton.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TableIcon } from '@contentful/f36-icons';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { focus } from '../../../helpers/editor';
+import { ToolbarButton } from '../../shared/ToolbarButton';
+import { insertTableAndFocusFirstCell, isTableActive } from './../helpers';
+export function ToolbarTableButton(props) {
+    const editor = useContentfulEditor();
+    const isActive = editor && isTableActive(editor);
+    async function handleClick() {
+        if (!editor) return;
+        editor.tracking.onToolbarAction('insertTable');
+        insertTableAndFocusFirstCell(editor);
+        focus(editor);
+    }
+    if (!editor) return null;
+    return React.createElement(ToolbarButton, {
+        title: "Table",
+        testId: "table-toolbar-button",
+        onClick: handleClick,
+        isActive: !!isActive,
+        isDisabled: props.isDisabled
+    }, React.createElement(TableIcon, null));
+}

package/dist/esm/plugins/Table/createTablePlugin.js

@@ -0,0 +1,109 @@
+import { BLOCKS, CONTAINERS } from '@contentful/rich-text-types';
+import { createTablePlugin as createDefaultTablePlugin, ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TR, withTable } from '@udecode/plate-table';
+import { isRootLevel } from '../../helpers/editor';
+import { transformLift, transformParagraphs, transformWrapIn } from '../../helpers/transformers';
+import { getParentNode, getBlockAbove, getLastChildPath, getNextPath } from '../../internal/queries';
+import { insertNodes } from '../../internal/transforms';
+import { Cell } from './components/Cell';
+import { HeaderCell } from './components/HeaderCell';
+import { Row } from './components/Row';
+import { Table } from './components/Table';
+import { createEmptyTableCells, getNoOfMissingTableCellsInRow, isNotEmpty } from './helpers';
+import { insertTableFragment } from './insertTableFragment';
+import { onKeyDownTable } from './onKeyDownTable';
+import { addTableTrackingEvents, withInvalidCellChildrenTracking } from './tableTracking';
+export const createTablePlugin = ()=>createDefaultTablePlugin({
+        type: BLOCKS.TABLE,
+        handlers: {
+            onKeyDown: onKeyDownTable
+        },
+        withOverrides: (editor, plugin)=>{
+            const { normalizeNode  } = editor;
+            withTable(editor, plugin);
+            editor.normalizeNode = normalizeNode;
+            addTableTrackingEvents(editor);
+            editor.insertFragment = insertTableFragment(editor);
+            return editor;
+        },
+        overrideByKey: {
+            [ELEMENT_TABLE]: {
+                type: BLOCKS.TABLE,
+                component: Table,
+                normalizer: [
+                    {
+                        validNode: isNotEmpty
+                    },
+                    {
+                        validNode: (editor, [, path])=>{
+                            const isNestedTable = !!getBlockAbove(editor, {
+                                at: path,
+                                match: {
+                                    type: [
+                                        BLOCKS.TABLE_CELL,
+                                        BLOCKS.TABLE_HEADER_CELL
+                                    ]
+                                }
+                            });
+                            return isRootLevel(path) || isNestedTable;
+                        },
+                        transform: transformLift
+                    },
+                    {
+                        validChildren: CONTAINERS[BLOCKS.TABLE]
+                    }
+                ]
+            },
+            [ELEMENT_TR]: {
+                type: BLOCKS.TABLE_ROW,
+                component: Row,
+                normalizer: [
+                    {
+                        validChildren: CONTAINERS[BLOCKS.TABLE_ROW],
+                        transform: transformWrapIn(BLOCKS.TABLE_CELL)
+                    },
+                    {
+                        validNode: isNotEmpty
+                    },
+                    {
+                        validNode: (editor, [, path])=>{
+                            const parent = getParentNode(editor, path)?.[0];
+                            return parent && parent.type === BLOCKS.TABLE;
+                        },
+                        transform: transformWrapIn(BLOCKS.TABLE)
+                    },
+                    {
+                        validNode: (editor, entry)=>{
+                            return getNoOfMissingTableCellsInRow(editor, entry) === 0;
+                        },
+                        transform: (editor, entry)=>{
+                            const howMany = getNoOfMissingTableCellsInRow(editor, entry);
+                            const at = getNextPath(getLastChildPath(entry));
+                            insertNodes(editor, createEmptyTableCells(howMany), {
+                                at
+                            });
+                        }
+                    }
+                ]
+            },
+            [ELEMENT_TH]: {
+                type: BLOCKS.TABLE_HEADER_CELL,
+                component: HeaderCell,
+                normalizer: [
+                    {
+                        validChildren: CONTAINERS[BLOCKS.TABLE_HEADER_CELL],
+                        transform: withInvalidCellChildrenTracking(transformParagraphs)
+                    }
+                ]
+            },
+            [ELEMENT_TD]: {
+                type: BLOCKS.TABLE_CELL,
+                component: Cell,
+                normalizer: [
+                    {
+                        validChildren: CONTAINERS[BLOCKS.TABLE_CELL],
+                        transform: withInvalidCellChildrenTracking(transformParagraphs)
+                    }
+                ]
+            }
+        }
+    });