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

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

@@ -14,11 +14,11 @@ var plateCore = require('@udecode/plate-core');
 var emotion = require('emotion');
 var deepEquals = _interopDefault(require('fast-deep-equal'));
 var noop = _interopDefault(require('lodash/noop'));
-var slate = require('slate');
 var constate = _interopDefault(require('constate'));
 var plateSerializerDocx = require('@udecode/plate-serializer-docx');
 var plateBreak = require('@udecode/plate-break');
 var isHotkey = _interopDefault(require('is-hotkey'));
+var slate = require('slate');
 var Slate = require('slate-react');
 var f36Components = require('@contentful/f36-components');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
@@ -364,41 +364,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 plateBreak.createSoftBreakPlugin({
     then: function then(editor) {
@@ -2691,7 +2656,7 @@ function extractNodes(editor, path, match) {
   return Array.from(plateCore.getNodes(editor, {
     match: match,
     at: path,
-    mode: 'all'
+    mode: 'lowest'
   })).map(function (_ref) {
     var node = _ref[0];
     return node;
@@ -5975,61 +5940,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 React.useMemo(function () {
+    var editor = plateCore.createPlateEditor({
+      id: id,
+      plugins: plugins,
+      disableCorePlugins: disableCorePlugins
+    });
+    var doc = contentfulSlatejsAdapter.toSlatejsDocument({
+      document: hasContent(incomingDoc) ? incomingDoc : Contentful.EMPTY_DOCUMENT,
+      schema: schema
+    }); // Sets editor value & kicks normalization
+
+    slate.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 = React.useState([]),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var classNames = emotion.cx(styles$j.editor, props.minHeight !== undefined ? emotion.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 = contentfulSlatejsAdapter.toSlatejsDocument({
-      document: props.value || Contentful.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;
-    slate.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 = emotion.cx(styles$j.editor, props.minHeight !== undefined ? emotion.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(plateCore.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 = contentfulSlatejsAdapter.toContentfulDocument({
-        document: slateDoc,
+    onChange: function onChange(document) {
+      props.onChange == null ? void 0 : props.onChange(contentfulSlatejsAdapter.toContentfulDocument({
+        document: document,
         schema: schema
-      });
-      props.onChange == null ? void 0 : props.onChange(contentfulDoc);
+      }));
     }
   }, !props.isToolbarHidden && /*#__PURE__*/React__default.createElement(StickyToolbarWrapper, {
     isDisabled: props.isDisabled