@contentful/field-editor-rich-text 2.0.0-next.25 → 2.0.0-next.28

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, createTablePlugin as createTablePlugin$1, withTable, onKeyDownTable } 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
@@ -3861,37 +3809,44 @@ var moveListItems = function moveListItems(editor, _temp) {
  * Credit: Modified version of Plate's list plugin
  * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
  */
-var listTypes = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
+
+function hasUnliftedListItems(editor, at) {
+  return Editor.nodes(editor, {
+    at: at,
+    match: function match(node, path) {
+      return Element.isElement(node) && node.type === BLOCKS.LIST_ITEM && path.length >= 2;
+    }
+  }).next().done;
+}
+
 var unwrapList = function unwrapList(editor, _temp) {
   var _ref = _temp === void 0 ? {} : _temp,
       at = _ref.at;
 
   Editor.withoutNormalizing(editor, function () {
     do {
-      unwrapNodes(editor, {
-        at: at,
-        match: {
-          type: BLOCKS.LIST_ITEM
-        },
-        split: true
-      });
-      unwrapNodes(editor, {
+      // lift list items to the root level
+      Transforms.liftNodes(editor, {
         at: at,
-        match: {
-          type: listTypes
+        match: function match(node) {
+          return Element.isElement(node) && node.type === BLOCKS.LIST_ITEM;
         },
-        split: true
+        mode: 'lowest'
       });
-    } while (getAbove(editor, {
+    } while (!hasUnliftedListItems(editor, at)); // finally unwrap all lifted items
+
+
+    unwrapNodes(editor, {
+      at: at,
       match: {
-        type: listTypes,
-        at: at
-      }
-    }));
+        type: BLOCKS.LIST_ITEM
+      },
+      split: false
+    });
   });
 };
 
-var listTypes$1 = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
+var listTypes = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
 var toggleList = function toggleList(editor, _ref) {
   var type = _ref.type;
   return Editor.withoutNormalizing(editor, function () {
@@ -3912,7 +3867,7 @@ var toggleList = function toggleList(editor, _ref) {
           }, {
             at: editor.selection,
             match: function match(n) {
-              return listTypes$1.includes(n.type);
+              return listTypes.includes(n.type);
             },
             mode: 'lowest'
           });
@@ -3953,19 +3908,25 @@ var toggleList = function toggleList(editor, _ref) {
 
       var commonEntry = Node.common(editor, startPoint.path, endPoint.path);
 
-      if (listTypes$1.includes(commonEntry[0].type) || commonEntry[0].type === BLOCKS.LIST_ITEM) {
-        if (commonEntry[0].type !== type) {
+      if (listTypes.includes(commonEntry[0].type) || commonEntry[0].type === BLOCKS.LIST_ITEM) {
+        var listType = commonEntry[0].type;
+
+        if (commonEntry[0].type === BLOCKS.LIST_ITEM) {
+          listType = Editor.parent(editor, commonEntry[1])[0].type;
+        }
+
+        if (listType !== type) {
           var startList = findNode(editor, {
             at: Range.start(editor.selection),
             match: {
-              type: listTypes$1
+              type: listTypes
             },
             mode: 'lowest'
           });
           var endList = findNode(editor, {
             at: Range.end(editor.selection),
             match: {
-              type: listTypes$1
+              type: listTypes
             },
             mode: 'lowest'
           });
@@ -3980,7 +3941,7 @@ var toggleList = function toggleList(editor, _ref) {
           }, {
             at: editor.selection,
             match: function match(n, path) {
-              return listTypes$1.includes(n.type) && path.length >= rangeLength;
+              return listTypes.includes(n.type) && path.length >= rangeLength;
             },
             mode: 'all'
           });
@@ -3998,7 +3959,7 @@ var toggleList = function toggleList(editor, _ref) {
         }).reverse();
 
         _nodes.forEach(function (n) {
-          if (listTypes$1.includes(n[0].type)) {
+          if (listTypes.includes(n[0].type)) {
             setNodes(editor, {
               type: type
             }, {
@@ -5903,21 +5864,46 @@ 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)));
 };
 
 var createTableOnKeyDown = function createTableOnKeyDown(editor, plugin) {
   var defaultHandler = onKeyDownTable(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.
-      event.preventDefault();
-      event.stopPropagation();
-      return;
+    // 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;
+      }
     }
 
     defaultHandler(event);
@@ -5932,7 +5918,9 @@ var createTablePlugin = function createTablePlugin() {
     handlers: {
       onKeyDown: createTableOnKeyDown
     },
-    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;