@contentful/field-editor-rich-text 0.24.1-next → 0.25.0-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) {
@@ -3627,6 +3633,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 +3703,14 @@ function addTableTrackingEvents(editor, _ref) {
   };
 }
 
+var paragraph = function paragraph() {
+  return {
+    type: BLOCKS.PARAGRAPH,
+    data: {},
+    children: []
+  };
+};
+
 function addTableNormalization(editor) {
   var normalizeNode = editor.normalizeNode;
 
@@ -3706,12 +3729,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
           });
         }
@@ -4752,7 +4783,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;