@contentful/field-editor-rich-text 0.24.1-next → 0.26.2-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';
@@ -672,6 +673,7 @@ var VALIDATIONS = {
   ENABLED_MARKS: 'enabledMarks',
   ENABLED_NODE_TYPES: 'enabledNodeTypes'
 };
+var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
 
 var getRichTextValidation = function getRichTextValidation(field, validationType) {
   return flow(function (v) {
@@ -682,13 +684,14 @@ var getRichTextValidation = function getRichTextValidation(field, validationType
 };
 
 var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
-  var enabledFormattings = getRichTextValidation(field, validationType);
+  var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
+  // we don't need this step.
 
   if (enabledFormattings === undefined) {
     return true;
   }
 
-  return enabledFormattings.includes(nodeTypeOrMark);
+  return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
 };
 
 var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
@@ -1128,6 +1131,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 +2421,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 +2563,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 +3641,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]
@@ -3684,10 +3707,20 @@ function addTableTrackingEvents(editor, _ref) {
           });
         }
       }, 1);
+    } else {
+      insertData(data);
     }
   };
 }
 
+var paragraph = function paragraph() {
+  return {
+    type: BLOCKS.PARAGRAPH,
+    data: {},
+    children: []
+  };
+};
+
 function addTableNormalization(editor) {
   var normalizeNode = editor.normalizeNode;
 
@@ -3706,12 +3739,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
           });
         }
@@ -4262,7 +4303,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;
     });
@@ -4752,7 +4793,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;
@@ -4846,6 +4887,8 @@ function withPasteHandling(editor) {
         var sanitized = sanitizeHtml(html, editor);
         var newData = htmlToDataTransfer(sanitized);
         insertData(newData);
+      } else {
+        insertData(data);
       }
     };
   };