@contentful/field-editor-rich-text 2.0.0-next.11 → 2.0.0-next.12

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

@@ -3,15 +3,15 @@ import { toSlatejsDocument, toContentfulDocument } from '@contentful/contentful-
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, getScheduleTooltipContent, EntityProvider } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, TABLE_BLOCKS, HEADINGS, TEXT_CONTAINERS, LIST_ITEM_BLOCKS, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { usePlateEditorRef, getNodes, getText, toggleNodeType, getAbove, onKeyDownToggleElement, setNodes, isAncestorEmpty, getParent, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, someHtmlElement, isMarkActive, toggleMark, match, KEY_DESERIALIZE_HTML, someNode, getChildren as getChildren$1, getBlockAbove, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, Plate } from '@udecode/plate-core';
+import { usePlateEditorRef, getNodes, getText, toggleNodeType, getAbove, onKeyDownToggleElement, setNodes, isAncestorEmpty, getParent, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, someHtmlElement, isMarkActive, toggleMark, match, KEY_DESERIALIZE_HTML, someNode, getChildren as getChildren$1, getBlockAbove, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
-import { Text, Element, Editor, Transforms, Range, Path, Node } from 'slate';
 import constate from 'constate';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
 import isHotkey from 'is-hotkey';
+import { Text, Element, Editor, Transforms, Range, Path, Node } from 'slate';
 import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
 import { AssetCard, Menu, Text as Text$1, Notification, EntryCard, MenuItem, Button, Flex, Icon, InlineEntryCard, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
 import mimetype from '@contentful/mimetype';
@@ -357,41 +357,6 @@ var _constate = /*#__PURE__*/constate(useContentfulEditorHook),
     ContentfulEditorProvider = _constate[0],
     useContentfulEditor = _constate[1];
 
-var isTextElement = function isTextElement(node) {
-  return 'text' in node;
-};
-/**
- * Ensures incoming void nodes have a child leaf text element.
- */
-
-
-function sanitizeIncomingSlateDoc(nodes) {
-  if (nodes === void 0) {
-    nodes = [];
-  }
-
-  return nodes.map(function (node) {
-    var _node$children;
-
-    if (isTextElement(node)) {
-      return node;
-    }
-
-    if (node.isVoid && ((_node$children = node.children) == null ? void 0 : _node$children.length) === 0) {
-      return _extends({}, node, {
-        children: [{
-          text: '',
-          data: {}
-        }]
-      });
-    }
-
-    return _extends({}, node, {
-      children: sanitizeIncomingSlateDoc(node.children)
-    });
-  });
-}
-
 var createSoftBreakPlugin = function createSoftBreakPlugin() {
   return createSoftBreakPlugin$1({
     then: function then(editor) {
@@ -2684,7 +2649,7 @@ function extractNodes(editor, path, match) {
   return Array.from(getNodes(editor, {
     match: match,
     at: path,
-    mode: 'all'
+    mode: 'lowest'
   })).map(function (_ref) {
     var node = _ref[0];
     return node;
@@ -5968,61 +5933,79 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   }, children);
 };
 
+/**
+ * For legacy reasons, a document may not have any content at all
+ * e.g:
+ *
+ * {nodeType: document, data: {}, content: []}
+ *
+ * Rendering such document will break the Slate editor
+ */
+
+var hasContent = function hasContent(doc) {
+  if (!doc) {
+    return false;
+  }
+
+  return doc.content.length > 0;
+};
+
+var useNormalizedSlateValue = function useNormalizedSlateValue(_ref) {
+  var id = _ref.id,
+      incomingDoc = _ref.incomingDoc,
+      plugins = _ref.plugins;
+  return useMemo(function () {
+    var editor = createPlateEditor({
+      id: id,
+      plugins: plugins,
+      disableCorePlugins: disableCorePlugins
+    });
+    var doc = toSlatejsDocument({
+      document: hasContent(incomingDoc) ? incomingDoc : EMPTY_DOCUMENT,
+      schema: schema
+    }); // Sets editor value & kicks normalization
+
+    Transforms.insertNodes(editor, doc); // TODO: return the editor itself to avoid recompiling & initializing all
+    // of the plugins again. It's currently not possible due to a bug in Plate
+    // with initialValues
+    // See: https://slate-js.slack.com/archives/C013QHXSCG1/p1645112799942819
+
+    return editor.children;
+  }, [id, plugins, incomingDoc]);
+};
+
 var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
+  var id = getContentfulEditorId(props.sdk);
   var tracking = useTrackingContext();
-  var editor = useContentfulEditor();
-
-  var _useState = useState([]),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var classNames = cx(styles$j.editor, props.minHeight !== undefined ? css({
-    minHeight: props.minHeight
-  }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
   var plugins = React__default.useMemo(function () {
     return getPlugins(props.sdk, tracking);
   }, [props.sdk, tracking]);
-  React__default.useEffect(function () {
-    if (!editor) {
-      return;
-    }
-
-    var docFromAdapter = toSlatejsDocument({
-      document: props.value || EMPTY_DOCUMENT,
-      schema: schema
-    });
-    var doc = sanitizeIncomingSlateDoc(docFromAdapter); // Slate throws an error if the value on the initial render is invalid
-    // so we directly set the value on the editor in order
-    // to be able to trigger normalization on the initial value before rendering
-    // TODO: use https://plate.udecode.io/docs/Plate#normalizeinitialvalue when working
-
-    editor.children = doc;
-    Editor.normalize(editor, {
-      force: true
-    }); // We set the value so that the rendering can take over from here
-
-    setValue(editor.children);
-  }, [props.value, editor]);
+  var initialValue = useNormalizedSlateValue({
+    id: id,
+    incomingDoc: props.value,
+    plugins: plugins
+  });
+  var classNames = cx(styles$j.editor, props.minHeight !== undefined ? css({
+    minHeight: props.minHeight
+  }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$j.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(Plate, {
-    id: getContentfulEditorId(props.sdk),
-    value: value,
+    id: id,
+    initialValue: initialValue,
     plugins: plugins,
     disableCorePlugins: disableCorePlugins,
     editableProps: {
       className: classNames,
       readOnly: props.isDisabled
     },
-    onChange: function onChange(slateDoc) {
-      setValue(slateDoc);
-      var contentfulDoc = toContentfulDocument({
-        document: slateDoc,
+    onChange: function onChange(document) {
+      props.onChange == null ? void 0 : props.onChange(toContentfulDocument({
+        document: document,
         schema: schema
-      });
-      props.onChange == null ? void 0 : props.onChange(contentfulDoc);
+      }));
     }
   }, !props.isToolbarHidden && /*#__PURE__*/React__default.createElement(StickyToolbarWrapper, {
     isDisabled: props.isDisabled