@contentful/field-editor-rich-text 2.0.0-next.26 → 2.0.0-next.29

package/dist/field-editor-rich-text.esm.js

@@ -1,7 +1,7 @@
 import React__default, { createContext, useContext, useMemo, createElement, useEffect, useState, memo, Fragment, useCallback } from 'react';
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
-import { BLOCKS, INLINES, TABLE_BLOCKS, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import { BLOCKS, INLINES, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import { usePlateEditorRef, usePlateEditorState, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, isMarkActive, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
@@ -10,7 +10,7 @@ import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
 import { createResetNodePlugin as createResetNodePlugin$1, onKeyDownResetNode, SIMULATE_BACKSPACE } from '@udecode/plate-reset-node';
 import isHotkey from 'is-hotkey';
-import { Text, Element, Editor, Transforms, Range, Node, Path, Point } from 'slate';
+import { Text, Element, Editor, Transforms, Range, Path, Node, Point } from 'slate';
 import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
 import constate from 'constate';
 import { AssetCard, Menu, Text as Text$1, Notification, EntryCard, MenuItem, Button, Flex, Icon, InlineEntryCard, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
@@ -26,7 +26,7 @@ import { createBoldPlugin as createBoldPlugin$1, createCodePlugin as createCodeP
 import isPlainObject from 'is-plain-obj';
 import { createParagraphPlugin as createParagraphPlugin$1 } from '@udecode/plate-paragraph';
 import { createSelectOnBackspacePlugin as createSelectOnBackspacePlugin$1 } from '@udecode/plate-select';
-import { ELEMENT_TABLE, ELEMENT_TR, getEmptyRowNode, ELEMENT_TD, ELEMENT_TH, getEmptyCellNode, insertTable, deleteRow, deleteColumn, deleteTable, createTablePlugin as createTablePlugin$1, onKeyDownTable } from '@udecode/plate-table';
+import { ELEMENT_TABLE, ELEMENT_TR, getEmptyRowNode, ELEMENT_TD, ELEMENT_TH, getEmptyCellNode, insertTable, deleteRow, deleteColumn, deleteTable, onKeyDownTable as onKeyDownTable$1, getTableCellEntry, createTablePlugin as createTablePlugin$1, withTable } from '@udecode/plate-table';
 import { toContentfulDocument, toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
 import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
 import { createTrailingBlockPlugin } from '@udecode/plate-trailing-block';
@@ -454,7 +454,7 @@ function moveToTheNextChar(editor) {
     unit: 'character'
   });
 }
-function insertEmptyParagraph(editor) {
+function insertEmptyParagraph(editor, options) {
   var emptyParagraph = {
     type: BLOCKS.PARAGRAPH,
     children: [{
@@ -463,7 +463,7 @@ function insertEmptyParagraph(editor) {
     data: {},
     isVoid: false
   };
-  Transforms.insertNodes(editor, emptyParagraph);
+  Transforms.insertNodes(editor, emptyParagraph, options);
 }
 function getElementFromCurrentSelection(editor) {
   if (!editor.selection) return [];
@@ -583,58 +583,6 @@ function getAncestorPathFromSelection(editor) {
     return level.length === 1;
   });
 }
-var isAtEndOfTextSelection = function isAtEndOfTextSelection(editor) {
-  var _editor$selection2, _editor$selection3;
-
-  return ((_editor$selection2 = editor.selection) == null ? void 0 : _editor$selection2.focus.offset) === getText(editor, (_editor$selection3 = editor.selection) == null ? void 0 : _editor$selection3.focus.path).length;
-};
-function currentSelectionStartsTableCell(editor) {
-  var _editor$selection4;
-
-  var _getNodeEntryFromSele2 = getNodeEntryFromSelection(editor, [BLOCKS.TABLE_CELL, BLOCKS.TABLE_HEADER_CELL]),
-      tableCellNode = _getNodeEntryFromSele2[0],
-      path = _getNodeEntryFromSele2[1];
-
-  return !!tableCellNode && (!getText(editor, path) || ((_editor$selection4 = editor.selection) == null ? void 0 : _editor$selection4.focus.offset) === 0);
-}
-/**
- * This traversal strategy is unfortunately necessary because Slate doesn't
- * expose something like Node.next(editor).
- */
-
-function getNextNode(editor) {
-  if (!editor.selection) {
-    return null;
-  }
-
-  var descendants = Node.descendants(editor, {
-    from: editor.selection.focus.path
-  }); // eslint-disable-next-line no-constant-condition
-
-  while (true) {
-    var _descendants$next = descendants.next(),
-        done = _descendants$next.done,
-        value = _descendants$next.value;
-
-    if (done) {
-      return null;
-    }
-
-    var node = value[0],
-        path = value[1];
-
-    if (Path.isCommon(path, editor.selection.focus.path)) {
-      continue;
-    }
-
-    return node;
-  }
-} // TODO: move to table plugin
-
-function currentSelectionPrecedesTableCell(editor) {
-  var nextNode = getNextNode(editor);
-  return !!nextNode && TABLE_BLOCKS.includes(nextNode.type) && isAtEndOfTextSelection(editor);
-}
 var INLINE_TYPES = /*#__PURE__*/Object.values(INLINES);
 var isInlineOrText = function isInlineOrText(node) {
   // either text or inline elements
@@ -5916,21 +5864,126 @@ var Row = function Row(props) {
 var _templateObject$a;
 var style$5 = /*#__PURE__*/css(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 1.5em;\n  border-collapse: collapse;\n  border-radius: 5px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  width: 100%;\n  table-layout: fixed;\n  overflow: hidden;\n"])), tokens.gray400);
 var Table = function Table(props) {
-  return /*#__PURE__*/createElement("table", Object.assign({}, props.attributes, {
+  return /*#__PURE__*/createElement("div", {
+    "data-block-type": BLOCKS.TABLE
+  }, /*#__PURE__*/createElement("table", Object.assign({
     className: style$5
-  }), /*#__PURE__*/createElement("tbody", null, props.children));
+  }, props.attributes), /*#__PURE__*/createElement("tbody", null, props.children)));
+};
+
+/**
+ * Removes table wrappers when pasting a single table cell
+ *
+ * In Plate/Slate, copying the content of a table cell wraps
+ * it in a <table><tr><td>{content}</td></tr></table> even
+ * when copying partial cell content.
+ *
+ * That's really annoying as there is no way to remove the table
+ * wrappers in that case.
+ */
+
+var trimUnnecessaryTableWrapper = function trimUnnecessaryTableWrapper(node) {
+  if (!Element.isElement(node)) {
+    return [node];
+  } // must be a table with a single row
+
+
+  if (node.type !== BLOCKS.TABLE || node.children.length !== 1) {
+    return [node];
+  }
+
+  var row = node.children[0]; // the row must contain a single cell
+
+  if (row.children.length !== 1) {
+    return [node];
+  }
+
+  var cell = row.children[0];
+  return cell.children;
+};
+
+var insertTableFragment = function insertTableFragment(editor) {
+  var insertFragment = editor.insertFragment;
+  return function (fragments) {
+    var _editor$selection;
+
+    if (!editor.selection) {
+      return;
+    }
+
+    fragments = fragments.flatMap(trimUnnecessaryTableWrapper); // We need to make sure we have a new, empty and clean paragraph in order to paste tables as-is due to how Slate behaves
+    // More info: https://github.com/ianstormtaylor/slate/pull/4489 and https://github.com/ianstormtaylor/slate/issues/4542
+
+    var isInsertingTable = fragments.some(function (fragment) {
+      return isTable(fragment);
+    });
+    var isTableFirstFragment = fragments.findIndex(function (fragment) {
+      return isTable(fragment);
+    }) === 0;
+    var currentLineHasText = getText(editor, (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path) !== '';
+
+    if (isInsertingTable && isTableFirstFragment && currentLineHasText) {
+      insertEmptyParagraph(editor);
+    }
+
+    return insertFragment(fragments);
+  };
 };
 
-var createTableOnKeyDown = function createTableOnKeyDown(editor, plugin) {
-  var defaultHandler = onKeyDownTable(editor, plugin);
+var onKeyDownTable = function onKeyDownTable(editor, plugin) {
+  var defaultHandler = onKeyDownTable$1(editor, plugin);
   return function (event) {
-    if (event.key === 'Backspace' && currentSelectionStartsTableCell(editor) || event.key === 'Delete' && currentSelectionPrecedesTableCell(editor)) {
-      // The default behavior here would be to delete the preceding or forthcoming
-      // leaf node, in this case a cell or header cell. But we don't want to do that,
-      // because it would leave us with a non-standard number of table cells.
+    // This fixes `Cannot resolve a Slate point from DOM point: [object HTMLDivElement]` when typing while the cursor is before table
+    var windowSelection = window.getSelection();
+
+    if (windowSelection) {
+      var _windowSelection$anch, _windowSelection$anch2;
+
+      // @ts-expect-error
+      var blockType = (_windowSelection$anch = windowSelection.anchorNode.attributes) == null ? void 0 : (_windowSelection$anch2 = _windowSelection$anch['data-block-type']) == null ? void 0 : _windowSelection$anch2.value; // this attribute comes from `plugins/Table/components/Table.tsx`
+
+      var isBeforeTable = blockType === BLOCKS.TABLE;
+
+      if (isBeforeTable) {
+        if (event.key === 'Enter') {
+          var above = getAbove(editor, {
+            match: {
+              type: BLOCKS.TABLE
+            }
+          });
+          if (!above) return;
+          var tablePath = above[1];
+          insertEmptyParagraph(editor, {
+            at: tablePath,
+            select: true
+          });
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+    } // Pressing Tab on the last cell creates a new row
+    // Otherwise, jumping between cells is handled in the defaultKeyDownTable
+
+
+    if (event.key === 'Tab' && !event.shiftKey) {
       event.preventDefault();
-      event.stopPropagation();
-      return;
+      var res = getTableCellEntry(editor, {});
+
+      if (res) {
+        var tableElement = res.tableElement,
+            tableRow = res.tableRow,
+            tableCell = res.tableCell;
+        var isLastCell = isLastChild(tableRow, tableCell[1]);
+        var isLastRow = isLastChild(tableElement, tableRow[1]);
+
+        if (isLastRow && isLastCell) {
+          addRowBelow(editor); // skip default handler
+
+          return;
+        }
+      }
     }
 
     defaultHandler(event);
@@ -5943,32 +5996,13 @@ var createTablePlugin = function createTablePlugin() {
   return createTablePlugin$1({
     type: BLOCKS.TABLE,
     handlers: {
-      onKeyDown: createTableOnKeyDown
+      onKeyDown: onKeyDownTable
     },
-    withOverrides: function withOverrides(editor) {
+    withOverrides: function withOverrides(editor, plugin) {
+      // injects important fixes from plate's original table plugin
+      withTable(editor, plugin);
       addTableTrackingEvents(editor);
-      var insertFragment = editor.insertFragment;
-
-      editor.insertFragment = function (fragments) {
-        var _editor$selection;
-
-        // We need to make sure we have a new, empty and clean paragraph in order to paste tables as-is due to how Slate behaves
-        // More info: https://github.com/ianstormtaylor/slate/pull/4489 and https://github.com/ianstormtaylor/slate/issues/4542
-        var isInsertingTable = fragments.some(function (fragment) {
-          return isTable(fragment);
-        });
-        var isTableFirstFragment = fragments.findIndex(function (fragment) {
-          return isTable(fragment);
-        }) === 0;
-        var currentLineHasText = getText(editor, (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path) !== '';
-
-        if (isInsertingTable && isTableFirstFragment && currentLineHasText) {
-          insertEmptyParagraph(editor);
-        }
-
-        insertFragment(fragments);
-      };
-
+      editor.insertFragment = insertTableFragment(editor);
       return editor;
     },
     overrideByKey: (_overrideByKey = {}, _overrideByKey[ELEMENT_TABLE] = {