@contentful/field-editor-rich-text 3.4.7 → 3.4.9

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.9](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.4.8...@contentful/field-editor-rich-text@3.4.9) (2023-03-03)
+
+### Bug Fixes
+
+- 🐛 do not focus RTE on inline embed + create entry ([#1354](https://github.com/contentful/field-editors/issues/1354)) ([3c54787](https://github.com/contentful/field-editors/commit/3c54787d740f7220e55976bac97fb8d542f26d4d))
+
+## [3.4.8](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.4.7...@contentful/field-editor-rich-text@3.4.8) (2023-03-01)
+
+### Bug Fixes
+
+- do not focus RTE when another slide is open [TOL-989] ([#1353](https://github.com/contentful/field-editors/issues/1353)) ([db07c18](https://github.com/contentful/field-editors/commit/db07c180ab1e9bbd197f8b4b5eb74c1e0b5e251d))
+
 ## [3.4.7](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.4.6...@contentful/field-editor-rich-text@3.4.7) (2023-02-21)
 
 **Note:** Version bump only for package @contentful/field-editor-rich-text

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

@@ -2758,13 +2758,94 @@ function getEntityTypeFromRichTextNode(nodeType) {
   throw new Error("RichText node type `" + nodeType + "` has no associated `entityType`");
 }
 
+/**
+ * Allows to observe when the current slide-in navigation slide gets e.g.
+ * re-activated after opening another slide on top. This is useful as the sdk
+ * does not give full insights into e.g. whether sdk.dialogs.selectSingleEntry()
+ * with `withCreate: true` option opens the slide-in navigation to edit the
+ * created entry after returning it.
+ */
+
+function watchCurrentSlide(navigator) {
+  var onActiveCallbacks = new Set();
+  var wasSlideClosed = false;
+  var initialSlideLevel;
+  var lastSlideLevel;
+
+  var status = function status() {
+    return {
+      wasClosed: wasSlideClosed,
+      isActive: !wasSlideClosed && lastSlideLevel === initialSlideLevel
+    };
+  };
+
+  var off = navigator.onSlideInNavigation(function (_ref) {
+    var oldSlideLevel = _ref.oldSlideLevel,
+        newSlideLevel = _ref.newSlideLevel;
+
+    if (initialSlideLevel === undefined) {
+      initialSlideLevel = oldSlideLevel;
+    }
+
+    lastSlideLevel = newSlideLevel;
+
+    if (newSlideLevel < initialSlideLevel) {
+      wasSlideClosed = true;
+      off(); // No more point in watching, slide got closed.
+
+      onActiveCallbacks.clear();
+    }
+
+    if (status().isActive && newSlideLevel !== oldSlideLevel) {
+      onActiveCallbacks.forEach(function (cb) {
+        return cb();
+      });
+    }
+  });
+  /**
+   * Call to unsubscribe from navigator events when the watcher is no longer
+   * needed.
+   */
+
+  function unwatch() {
+    off();
+    onActiveCallbacks.clear();
+  }
+  /**
+   * Fires immediately when the slide is currently active, or at the point when
+   * it becomes active again, if there are slides on top that get closed. Does not
+   * fire when the observed slide gets closed, and then re-opened through browser
+   * back, as this technically opens a new slide and editor instance.
+   */
+
+
+  function onActive(cb) {
+    if (wasSlideClosed) return noop; // Can't re-activate already closed slide.
+
+    if (status().isActive) {
+      cb();
+    }
+
+    onActiveCallbacks.add(cb);
+    return function () {
+      return onActiveCallbacks["delete"](cb);
+    };
+  }
+
+  return {
+    status: status,
+    onActive: onActive,
+    unwatch: unwatch
+  };
+}
+
 function selectEntityAndInsert(_x, _x2, _x3, _x4) {
   return _selectEntityAndInsert.apply(this, arguments);
 } // TODO: incorporate this logic inside the trailingParagraph plugin instead
 
 function _selectEntityAndInsert() {
   _selectEntityAndInsert = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(nodeType, sdk, editor, logAction) {
-    var field, dialogs, baseConfig, selectEntity, config, selection, entity;
+    var field, dialogs, baseConfig, selectEntity, config, rteSlide, entity;
     return runtime_1.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -2778,32 +2859,33 @@ function _selectEntityAndInsert() {
             config = _extends({}, baseConfig, {
               withCreate: true
             });
-            selection = editor.selection;
+            rteSlide = watchCurrentSlide(sdk.navigator);
             _context.next = 8;
             return selectEntity(config);
 
           case 8:
             entity = _context.sent;
 
-            if (entity) {
-              _context.next = 12;
-              break;
-            }
+            if (!entity) {
+              logAction('cancelCreateEmbedDialog', {
+                nodeType: nodeType
+              });
+            } else {
+              insertBlock$1(editor, nodeType, entity);
+              ensureFollowingParagraph(editor);
+              logAction('insert', {
+                nodeType: nodeType
+              });
+            } // If user chose to create a new entity, this might open slide-in to edit the
+            // entity. In this case, no point in focusing RTE which is now in the slide below.
 
-            logAction('cancelCreateEmbedDialog', {
-              nodeType: nodeType
-            });
-            return _context.abrupt("return");
 
-          case 12:
-            select(editor, selection);
-            insertBlock$1(editor, nodeType, entity);
-            ensureFollowingParagraph(editor);
-            logAction('insert', {
-              nodeType: nodeType
+            rteSlide.onActive(function () {
+              rteSlide.unwatch();
+              focus(editor);
             });
 
-          case 16:
+          case 11:
           case "end":
             return _context.stop();
         }
@@ -2868,8 +2950,6 @@ function insertBlock$1(editor, nodeType, entity) {
   } else {
     setNodes(editor, linkedEntityBlock);
   }
-
-  focus(editor);
 }
 
 var styles$2 = {
@@ -3167,7 +3247,11 @@ function EmbeddedEntityInline(props) {
 
   function handleEditClick() {
     return sdk.navigator.openEntry(entryId, {
-      slideIn: true
+      slideIn: {
+        waitForClose: true
+      }
+    }).then(function () {
+      editor && focus(editor);
     });
   }
 
@@ -3206,7 +3290,7 @@ function selectEntityAndInsert$1(_x, _x2, _x3) {
 
 function _selectEntityAndInsert$1() {
   _selectEntityAndInsert$1 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(editor, sdk, logAction) {
-    var config, selection, entry, inlineEntryNode;
+    var config, rteSlide, entry;
     return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
@@ -3217,39 +3301,30 @@ function _selectEntityAndInsert$1() {
             config = _extends({}, newEntitySelectorConfigFromRichTextField(sdk.field, Contentful.INLINES.EMBEDDED_ENTRY), {
               withCreate: true
             });
-            selection = editor.selection;
+            rteSlide = watchCurrentSlide(sdk.navigator);
             _context2.next = 5;
             return sdk.dialogs.selectSingleEntry(config);
 
           case 5:
             entry = _context2.sent;
-            focus(editor); // Dialog steals focus from editor, return it.
 
-            if (entry) {
-              _context2.next = 10;
-              break;
+            if (!entry) {
+              logAction('cancelCreateEmbedDialog', {
+                nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+              });
+            } else {
+              insertNodes(editor, createInlineEntryNode$1(entry.sys.id));
+              logAction('insert', {
+                nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+              });
             }
 
-            logAction('cancelCreateEmbedDialog', {
-              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            rteSlide.onActive(function () {
+              rteSlide.unwatch();
+              focus(editor);
             });
-            return _context2.abrupt("return");
 
-          case 10:
-            inlineEntryNode = createInlineEntryNode$1(entry.sys.id);
-            logAction('insert', {
-              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
-            }); // Got to wait until focus is really back on the editor or setSelection() won't work.
-
-            return _context2.abrupt("return", new Promise(function (resolve) {
-              setTimeout(function () {
-                setSelection(editor, selection);
-                insertNodes(editor, inlineEntryNode);
-                resolve();
-              }, 0);
-            }));
-
-          case 13:
+          case 8:
           case "end":
             return _context2.stop();
         }