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

package/dist/field-editor-rich-text.cjs.development.js

@@ -27,6 +27,7 @@ var fieldEditorShared = require('@contentful/field-editor-shared');
 var moment = _interopDefault(require('moment'));
 var mimetype = _interopDefault(require('@contentful/mimetype'));
 var plateTable = require('@udecode/plate-table');
+var richTextPlainTextRenderer = require('@contentful/rich-text-plain-text-renderer');
 var plateHtmlSerializer = require('@udecode/plate-html-serializer');
 var plateParagraph = require('@udecode/plate-paragraph');
 var plateBreak = require('@udecode/plate-break');
@@ -1135,6 +1136,11 @@ var withListOptions = (_withListOptions = {}, _withListOptions[plateList.ELEMENT
   type: Contentful.BLOCKS.OL_LIST,
   component: OL
 }, _withListOptions);
+var createListPlugin = function createListPlugin() {
+  return plateList.createListPlugin({
+    validLiChildrenTypes: Contentful.LIST_ITEM_BLOCKS
+  });
+};
 
 var _withBoldOptions;
 function ToolbarBoldButton(props) {
@@ -2420,13 +2426,17 @@ function FetchingWrappedEntryCard(props) {
 
   var entry = entries[props.entryId];
   var contentType = React.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"];
   React.useEffect(function () {
-    if (!entry) return;
+    if (!entry || entry === 'failed') return;
     fieldEditorShared.entityHelpers.getEntryImage({
       entry: entry,
       contentType: contentType,
@@ -2558,13 +2568,15 @@ function AssetDropdownMenu(_ref) {
 }
 
 function FetchingWrappedAssetCard(props) {
+  var _asset$fields;
+
   var _useEntities = fieldEditorReference.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;
   React.useEffect(function () {
     getOrLoadAsset(props.assetId);
   }, [props.assetId]); // eslint-disable-line
@@ -3634,6 +3646,15 @@ var TableActions = function TableActions() {
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1, _styles$1, _withTableOptions;
 var styles$g = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.TABLE] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_ROW] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_HEADER_CELL] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_CELL] = /*#__PURE__*/emotion.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 = contentfulSlatejsAdapter.toContentfulDocument({
+    document: [node],
+    schema: schema
+  });
+  return richTextPlainTextRenderer.documentToPlainTextString(contentfulNode);
+};
+
 var Table = function Table(props) {
   return /*#__PURE__*/React.createElement("table", Object.assign({}, props.attributes, {
     className: styles$g[Contentful.BLOCKS.TABLE]
@@ -3695,6 +3716,14 @@ function addTableTrackingEvents(editor, _ref) {
   };
 }
 
+var paragraph = function paragraph() {
+  return {
+    type: Contentful.BLOCKS.PARAGRAPH,
+    data: {},
+    children: []
+  };
+};
+
 function addTableNormalization(editor) {
   var normalizeNode = editor.normalizeNode;
 
@@ -3713,12 +3742,20 @@ function addTableNormalization(editor) {
             childPath = _step$value[1];
 
         if (slate.Text.isText(child)) {
-          var paragraph = {
-            type: Contentful.BLOCKS.PARAGRAPH,
-            data: {},
-            children: []
-          };
-          slate.Transforms.wrapNodes(editor, paragraph, {
+          slate.Transforms.wrapNodes(editor, paragraph(), {
+            at: childPath
+          });
+        } else if (!Contentful.CONTAINERS[node.type].includes(child.type)) {
+          var paragraphWithTextFromNode = _extends({}, paragraph(), {
+            children: [{
+              text: slateNodeToText(child)
+            }]
+          });
+
+          slate.Transforms.removeNodes(editor, {
+            at: childPath
+          });
+          slate.Transforms.insertNodes(editor, paragraphWithTextFromNode, {
             at: childPath
           });
         }
@@ -3764,7 +3801,34 @@ function createWithTableEvents(tracking) {
 
 var createTablePlugin = function createTablePlugin(tracking) {
   return _extends({}, plateTable.createTablePlugin(), {
-    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 === Contentful.BLOCKS.TABLE;
+        });
+
+        if (fragmentHasTable) {
+          var emptyParagraph = {
+            type: Contentful.BLOCKS.PARAGRAPH,
+            children: [{
+              text: ''
+            }],
+            data: {},
+            isVoid: false
+          };
+          slate.Transforms.insertNodes(editor, emptyParagraph);
+        }
+
+        insertFragment(fragments);
+      };
+
+      return editor;
+    }
   });
 };
 function ToolbarTableButton(props) {
@@ -4242,7 +4306,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;
     });
@@ -4732,7 +4796,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;
@@ -4857,9 +4921,8 @@ function createParagraphPlugin() {
           type: Contentful.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: Contentful.BLOCKS.PARAGRAPH
@@ -5023,7 +5086,7 @@ var getPlugins = function getPlugins(sdk, tracking) {
   plateCore.createReactPlugin(), plateCore.createHistoryPlugin(), // Behavior
   createPastePlugin(), // Global shortcuts
   createNewLinePlugin(), createInsertBeforeFirstVoidBlockPlugin(), // Block Elements
-  createParagraphPlugin(), plateList.createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
+  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createBoldPlugin(), createCodePlugin(), createItalicPlugin(), createUnderlinePlugin(), // Other
   createTrailingParagraphPlugin()];