@contentful/field-editor-rich-text 0.24.0-next → 0.26.1-next

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

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect, createElement, useMemo, Fragment, useCallback } from 'react';
 import noop from 'lodash-es/noop';
-import { toSlatejsDocument, toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
-import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import { toContentfulDocument, toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
+import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, LIST_ITEM_BLOCKS, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider } from '@contentful/field-editor-reference';
 import { css, cx } from 'emotion';
 import tokens from '@contentful/forma-36-tokens';
@@ -15,11 +15,12 @@ import constate from 'constate';
 import find from 'lodash-es/find';
 import flow from 'lodash-es/flow';
 import get from 'lodash-es/get';
-import { ELEMENT_LIC, ELEMENT_LI, ELEMENT_UL, ELEMENT_OL, toggleList, createListPlugin } from '@udecode/plate-list';
+import { ELEMENT_LIC, ELEMENT_LI, ELEMENT_UL, ELEMENT_OL, createListPlugin as createListPlugin$1, toggleList } from '@udecode/plate-list';
 import { entityHelpers, isValidImage, shortenStorageUnit, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import moment from 'moment';
 import mimetype from '@contentful/mimetype';
 import { ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR, ELEMENT_TD, insertTable, getEmptyRowNode, getEmptyCellNode, deleteRow, deleteColumn, deleteTable, createTablePlugin as createTablePlugin$1, getTableOnKeyDown } from '@udecode/plate-table';
+import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
 import { createDeserializeHTMLPlugin } from '@udecode/plate-html-serializer';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 import { createExitBreakPlugin } from '@udecode/plate-break';
@@ -1128,6 +1129,11 @@ var withListOptions = (_withListOptions = {}, _withListOptions[ELEMENT_LIC] = {
   type: BLOCKS.OL_LIST,
   component: OL
 }, _withListOptions);
+var createListPlugin = function createListPlugin() {
+  return createListPlugin$1({
+    validLiChildrenTypes: LIST_ITEM_BLOCKS
+  });
+};
 
 var _withBoldOptions;
 function ToolbarBoldButton(props) {
@@ -2413,13 +2419,17 @@ function FetchingWrappedEntryCard(props) {
 
   var entry = entries[props.entryId];
   var contentType = useMemo(function () {
+    if (!entry || entry === 'failed') {
+      return undefined;
+    }
+
     return props.sdk.space.getCachedContentTypes().find(function (contentType) {
-      return contentType.sys.id === (entry == null ? void 0 : entry.sys.contentType.sys.id);
+      return contentType.sys.id === entry.sys.contentType.sys.id;
     });
   }, [props.sdk, entry]);
   var defaultLocaleCode = props.sdk.locales["default"];
   useEffect(function () {
-    if (!entry) return;
+    if (!entry || entry === 'failed') return;
     entityHelpers.getEntryImage({
       entry: entry,
       contentType: contentType,
@@ -2551,13 +2561,15 @@ function AssetDropdownMenu(_ref) {
 }
 
 function FetchingWrappedAssetCard(props) {
+  var _asset$fields;
+
   var _useEntities = useEntities(),
       getOrLoadAsset = _useEntities.getOrLoadAsset,
       assets = _useEntities.assets;
 
   var asset = assets[props.assetId];
   var defaultLocaleCode = props.sdk.locales["default"];
-  var entityFile = asset != null && asset.fields.file ? asset.fields.file[props.locale] || asset.fields.file[defaultLocaleCode] : undefined;
+  var entityFile = asset != null && (_asset$fields = asset.fields) != null && _asset$fields.file ? asset.fields.file[props.locale] || asset.fields.file[defaultLocaleCode] : undefined;
   useEffect(function () {
     getOrLoadAsset(props.assetId);
   }, [props.assetId]); // eslint-disable-line
@@ -3627,6 +3639,15 @@ var TableActions = function TableActions() {
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1, _styles$1, _withTableOptions;
 var styles$g = (_styles$1 = {}, _styles$1[BLOCKS.TABLE] = /*#__PURE__*/css(_templateObject$4 || (_templateObject$4 = /*#__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), _styles$1[BLOCKS.TABLE_ROW] = /*#__PURE__*/css(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    border: 1px solid ", ";\n    &:hover td {\n      background-color: transparent !important;\n    }\n  "])), tokens.gray400), _styles$1[BLOCKS.TABLE_HEADER_CELL] = /*#__PURE__*/css(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    border: 1px solid ", ";\n    padding: 10px 12px;\n    font-weight: ", ";\n    text-align: left;\n    min-width: 48px;\n    position: relative;\n    div:last-child {\n      margin-bottom: 0;\n    }\n  "])), tokens.gray200, tokens.gray400, tokens.fontWeightMedium), _styles$1[BLOCKS.TABLE_CELL] = /*#__PURE__*/css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    border: 1px solid ", ";\n    padding: 10px 12px;\n    min-width: 48px;\n    position: relative;\n    div:last-child {\n      margin-bottom: 0;\n    }\n  "])), tokens.gray400), _styles$1);
+
+var slateNodeToText = function slateNodeToText(node) {
+  var contentfulNode = toContentfulDocument({
+    document: [node],
+    schema: schema
+  });
+  return documentToPlainTextString(contentfulNode);
+};
+
 var Table = function Table(props) {
   return /*#__PURE__*/createElement("table", Object.assign({}, props.attributes, {
     className: styles$g[BLOCKS.TABLE]
@@ -3688,6 +3709,14 @@ function addTableTrackingEvents(editor, _ref) {
   };
 }
 
+var paragraph = function paragraph() {
+  return {
+    type: BLOCKS.PARAGRAPH,
+    data: {},
+    children: []
+  };
+};
+
 function addTableNormalization(editor) {
   var normalizeNode = editor.normalizeNode;
 
@@ -3706,12 +3735,20 @@ function addTableNormalization(editor) {
             childPath = _step$value[1];
 
         if (Text.isText(child)) {
-          var paragraph = {
-            type: BLOCKS.PARAGRAPH,
-            data: {},
-            children: []
-          };
-          Transforms.wrapNodes(editor, paragraph, {
+          Transforms.wrapNodes(editor, paragraph(), {
+            at: childPath
+          });
+        } else if (!CONTAINERS[node.type].includes(child.type)) {
+          var paragraphWithTextFromNode = _extends({}, paragraph(), {
+            children: [{
+              text: slateNodeToText(child)
+            }]
+          });
+
+          Transforms.removeNodes(editor, {
+            at: childPath
+          });
+          Transforms.insertNodes(editor, paragraphWithTextFromNode, {
             at: childPath
           });
         }
@@ -3757,7 +3794,34 @@ function createWithTableEvents(tracking) {
 
 var createTablePlugin = function createTablePlugin(tracking) {
   return _extends({}, createTablePlugin$1(), {
-    onKeyDown: createWithTableEvents(tracking)
+    onKeyDown: createWithTableEvents(tracking),
+    withOverrides: function withOverrides(editor) {
+      var insertFragment = editor.insertFragment;
+
+      editor.insertFragment = function (fragments) {
+        // 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;
+        });
+
+        if (fragmentHasTable) {
+          var emptyParagraph = {
+            type: BLOCKS.PARAGRAPH,
+            children: [{
+              text: ''
+            }],
+            data: {},
+            isVoid: false
+          };
+          Transforms.insertNodes(editor, emptyParagraph);
+        }
+
+        insertFragment(fragments);
+      };
+
+      return editor;
+    }
   });
 };
 function ToolbarTableButton(props) {
@@ -4235,7 +4299,7 @@ function FetchingWrappedInlineEntryCard(props) {
   }, [entries, props.entryId]);
   var allContentTypes = props.sdk.space.getCachedContentTypes();
   var contentType = React__default.useMemo(function () {
-    if (!entry || !allContentTypes) return undefined;
+    if (!entry || entry === 'failed' || !allContentTypes) return undefined;
     return allContentTypes.find(function (contentType) {
       return contentType.sys.id === entry.sys.contentType.sys.id;
     });
@@ -4725,7 +4789,7 @@ var removeComments = function removeComments(_ref) {
 
 var TAG_NAME_TABLE = 'TABLE';
 var TAG_NAME_TABLE_CAPTION = 'CAPTION';
-var DISALLOWED_TABLE_CHILD_ELEMENTS = [TAG_NAME_TABLE, TAG_NAME_TABLE_CAPTION];
+var DISALLOWED_TABLE_CHILD_ELEMENTS = [TAG_NAME_TABLE_CAPTION];
 
 var isHTMLElement = function isHTMLElement(node) {
   return node.nodeType === Node.ELEMENT_NODE;
@@ -4850,9 +4914,8 @@ function createParagraphPlugin() {
           type: BLOCKS.PARAGRAPH,
           deserialize: function deserialize(element) {
             var isParagraphText = element.nodeName === 'P';
-            var isDivText = element.nodeName === 'DIV' && !element.getAttribute('data-entity-type');
             var isNotEmpty = element.textContent !== '';
-            var isText = (isDivText || isParagraphText) && isNotEmpty;
+            var isText = isParagraphText && isNotEmpty;
             if (!isText) return;
             return {
               type: BLOCKS.PARAGRAPH