@contentful/field-editor-rich-text 2.0.0-next.24 → 2.0.0-next.27

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

@@ -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 [];
@@ -3861,37 +3861,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, {
+      // lift list items to the root level
+      Transforms.liftNodes(editor, {
         at: at,
-        match: {
-          type: BLOCKS.LIST_ITEM
-        },
-        split: true
-      });
-      unwrapNodes(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 +3919,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 +3960,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 +3993,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 +4011,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
             }, {
@@ -5214,9 +5227,9 @@ var sanitizeHTML = function sanitizeHTML(html) {
   // Parse the HTML string and pipe it through our transformers
   var doc = transformers.reduce(function (value, cb) {
     return cb(value);
-  }, new DOMParser().parseFromString(html, 'text/html')); // Remove whitespace between tags
-
-  return doc.body.innerHTML.replace(/>\s+</g, '><');
+  }, new DOMParser().parseFromString(html, 'text/html'));
+  return doc.body.innerHTML.replace(/>\s+</g, '><') // Remove whitespace between tags
+  .replace(/(.*)<div.*>(<table.*<\/table>)<\/div>(.*)/g, '$1$2$3'); // remove div containers from tables
 };
 
 /**
@@ -5757,6 +5770,9 @@ var isNotEmpty = function isNotEmpty(editor, _ref4) {
   var path = _ref4[1];
   return Array.from(Node.children(editor, path)).length !== 0;
 };
+var isTable = function isTable(node) {
+  return Element.isElement(node) && node.type === BLOCKS.TABLE;
+};
 
 var styles$i = {
   topRight: /*#__PURE__*/css({
@@ -5900,9 +5916,11 @@ 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) {
@@ -5915,6 +5933,38 @@ var createTableOnKeyDown = function createTableOnKeyDown(editor, plugin) {
       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);
@@ -5929,18 +5979,26 @@ 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;
 
       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 fragmentHasTable = fragments.some(function (fragment) {
-          return fragment.type === BLOCKS.TABLE;
+        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 (fragmentHasTable) {
+        if (isInsertingTable && isTableFirstFragment && currentLineHasText) {
           insertEmptyParagraph(editor);
         }