@atlaskit/editor-plugin-block-controls 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.11.0
+
+### Minor Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`482dbb03dbf68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/482dbb03dbf68) -
+  [ux] Ignore embedCard nodes that have wrapped layout when creating node decs
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.10.1
+
+### Patch Changes
+
+- [`19a9f330504b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/19a9f330504b9) -
+  ED-25120 refactor decorations file
+
 ## 2.10.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _decorationsCommon = require("./decorations-common");
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
+  // Optimisation to avoid drawing node decorations for empty table cells
+  if (['tableCell', 'tableHeader'].includes(node.type.name) && !(0, _experiments.editorExperiment)('table-nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3')) {
+    var _node$firstChild;
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+      return false;
+    }
+  }
+  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+};
+var shouldIgnoreNode = function shouldIgnoreNode(node) {
+  var isEmbedCard = 'embedCard' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3');
+
+  // TODO use isWrappedMedia when clean up the feature flag
+  var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
+  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : IGNORE_NODES.includes(node.type.name);
+};
+
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+var findNodeDecs = exports.findNodeDecs = function findNodeDecs(decorations, from, to) {
+  var newfrom = from;
+  var newTo = to;
+
+  // make it non-inclusive
+  if (newfrom !== undefined) {
+    newfrom++;
+  }
+
+  // make it non-inclusive
+  if (newTo !== undefined) {
+    newTo--;
+  }
+
+  // return empty array if range reversed
+  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
+    return new Array();
+  }
+  return decorations.find(newfrom, newTo, function (spec) {
+    return spec.type === _decorationsCommon.TYPE_NODE_DEC;
+  });
+};
+var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
+  var decs = [];
+  var docFrom = from === undefined || from < 0 ? 0 : from;
+  var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
+    var _Decoration$node;
+    var depth = 0;
+    var anchorName;
+    var shouldDescend = shouldDescendIntoNode(node);
+    anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
+    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
+      var _anchorName;
+      // Doesn't descend into a node
+      if (node.isInline) {
+        return false;
+      }
+      if (shouldIgnoreNode(node)) {
+        return shouldDescend; //skip over, don't consider it a valid depth
+      }
+      depth = newState.doc.resolve(pos).depth;
+      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
+    } else {
+      var _anchorName2;
+      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
+    }
+    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
+    }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
+      type: _decorationsCommon.TYPE_NODE_DEC,
+      anchorName: anchorName,
+      nodeType: node.type.name
+    }));
+    return shouldDescend && depth < (0, _decorationsCommon.getNestedDepth)();
+  });
+  return decs;
+};

package/dist/cjs/pm-plugins/decorations-common.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unmountDecorations = exports.getNodeAnchor = exports.getNestedDepth = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _uuid = _interopRequireDefault(require("uuid"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
+var TYPE_NODE_DEC = exports.TYPE_NODE_DEC = 'node-decoration';
+var getNestedDepth = exports.getNestedDepth = function getNestedDepth() {
+  return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
+};
+var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
+  var handleId = ObjHash.getForNode(node);
+  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+};
+var ObjHash = /*#__PURE__*/function () {
+  function ObjHash() {
+    (0, _classCallCheck2.default)(this, ObjHash);
+  }
+  (0, _createClass2.default)(ObjHash, null, [{
+    key: "getForNode",
+    value: function getForNode(node) {
+      if (this.caching.has(node)) {
+        return this.caching.get(node);
+      }
+      var uniqueId = (0, _uuid.default)();
+      this.caching.set(node, uniqueId);
+      return uniqueId;
+    }
+  }]);
+  return ObjHash;
+}();
+(0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
+var unmountDecorations = exports.unmountDecorations = function unmountDecorations(selector) {
+  // Removing decorations manually instead of using native destroy function in prosemirror API
+  // as it was more responsive and causes less re-rendering
+  var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
+  decorationsToRemove.forEach(function (el) {
+    _reactDom.default.unmountComponentAtNode(el);
+  });
+};

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findHandleDec = exports.emptyParagraphNodeDecorations = exports.dragHandleDecoration = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _uuid = _interopRequireDefault(require("uuid"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _dragHandle = require("../ui/drag-handle");
+var _decorationsCommon = require("./decorations-common");
+var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
+  var anchorName = "--node-anchor-paragraph-0";
+  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
+  return _view.Decoration.node(0, 2, (0, _defineProperty2.default)({
+    style: style
+  }, 'data-drag-handler-anchor-name', anchorName), {
+    type: _decorationsCommon.TYPE_NODE_DEC
+  });
+};
+var findHandleDec = exports.findHandleDec = function findHandleDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
+  });
+};
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
+  (0, _decorationsCommon.unmountDecorations)('data-blocks-drag-handle-container');
+  var unbind;
+  return _view.Decoration.widget(pos, function (view, getPos) {
+    var element = document.createElement('span');
+    // Need to set it to inline to avoid text being split when merging two paragraphs
+    // platform_editor_element_dnd_nested_fix_patch_2 -> inline decoration causes focus issues when refocusing Editor into first line
+    element.style.display = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
+    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
+    element.setAttribute('data-blocks-drag-handle-container', 'true');
+    var isTopLevelNode = true;
+    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
+      var newPos = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
+      if (typeof newPos === 'number') {
+        var $pos = view.state.doc.resolve(newPos);
+        isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      }
+      /*
+       * We disable mouseover event to fix flickering issue on hover
+       * However, the tooltip for nested drag handle is no long working.
+       */
+      if (newPos === undefined || !isTopLevelNode) {
+        // This will also hide the tooltip.
+        unbind = (0, _bindEventListener.bind)(element, {
+          type: 'mouseover',
+          listener: function listener(e) {
+            e.stopPropagation();
+          }
+        });
+      }
+    }
+
+    // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
+    // due to margins applied to other nodes eg. Headings
+    element.style.clear = 'unset';
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+      view: view,
+      api: api,
+      formatMessage: formatMessage,
+      getPos: getPos,
+      anchorName: anchorName,
+      nodeType: nodeType,
+      handleOptions: handleOptions,
+      isTopLevelNode: isTopLevelNode
+    }), element);
+    return element;
+  }, {
+    side: -1,
+    type: _decorationsCommon.TYPE_HANDLE_DEC,
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    destroy: function destroy() {
+      if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
+        unbind && unbind();
+      }
+    }
+  });
+};

package/dist/cjs/pm-plugins/{decorations.js → decorations-drop-target.js}

@@ -4,39 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldDescendIntoNode = exports.nodeDecorations = exports.getNodeAnchor = exports.findNodeDecs = exports.findHandleDec = exports.findDropTargetDecs = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = exports.createDropTargetDecoration = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createDropTargetDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _bindEventListener = require("bind-event-listener");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
-var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
 var _dropTargetV = require("../ui/drop-target-v2");
 var _dragTargetDebug = require("../utils/drag-target-debug");
 var _validation = require("../utils/validation");
+var _decorationsCommon = require("./decorations-common");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
-var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
-var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
-var TYPE_NODE_DEC = exports.TYPE_NODE_DEC = 'node-decoration';
-var getNestedDepth = function getNestedDepth() {
-  return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
-};
-var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
-  var handleId = ObjHash.getForNode(node);
-  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+var shouldDescend = function shouldDescend(node) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
+    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
+  }
+  return true;
 };
 var getNodeMargins = function getNodeMargins(node) {
   if (!node) {
@@ -81,12 +72,6 @@ var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
     offset: offset
   };
 };
-var shouldDescend = function shouldDescend(node) {
-  if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
-    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
-  }
-  return true;
-};
 
 /**
  * Find drop target decorations in the pos range between from and to
@@ -97,42 +82,7 @@ var shouldDescend = function shouldDescend(node) {
  */
 var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDecs(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
-    return spec.type === TYPE_DROP_TARGET_DEC;
-  });
-};
-var findHandleDec = exports.findHandleDec = function findHandleDec(decorations, from, to) {
-  return decorations.find(from, to, function (spec) {
-    return spec.type === TYPE_HANDLE_DEC;
-  });
-};
-
-/**
- * Find node decorations in the pos range between from and to (non-inclusive)
- * @param decorations
- * @param from
- * @param to
- * @returns
- */
-var findNodeDecs = exports.findNodeDecs = function findNodeDecs(decorations, from, to) {
-  var newfrom = from;
-  var newTo = to;
-
-  // make it non-inclusive
-  if (newfrom !== undefined) {
-    newfrom++;
-  }
-
-  // make it non-inclusive
-  if (newTo !== undefined) {
-    newTo--;
-  }
-
-  // return empty array if range reversed
-  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
-    return new Array();
-  }
-  return decorations.find(newfrom, newTo, function (spec) {
-    return spec.type === TYPE_NODE_DEC;
+    return spec.type === _decorationsCommon.TYPE_DROP_TARGET_DEC;
   });
 };
 var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
@@ -158,12 +108,12 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     }
     return element;
   }, {
-    type: TYPE_DROP_TARGET_DEC,
+    type: _decorationsCommon.TYPE_DROP_TARGET_DEC,
     side: side
   });
 };
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorRectCache, from, to) {
-  unmountDecorations('data-blocks-drop-target-container');
+  (0, _decorationsCommon.unmountDecorations)('data-blocks-drop-target-container');
   var decs = [];
   var POS_END_OF_DOC = newState.doc.nodeSize - 2;
   var docFrom = from === undefined || from < 0 ? 0 : from;
@@ -249,7 +199,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     } else {
       prevNode = node;
     }
-    return depth < getNestedDepth() && shouldDescend(node);
+    return depth < (0, _decorationsCommon.getNestedDepth)() && shouldDescend(node);
   });
   if (docTo === POS_END_OF_DOC) {
     decs.push(createDropTargetDecoration(POS_END_OF_DOC, {
@@ -260,152 +210,4 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     }, undefined, anchorRectCache));
   }
   return decs;
-};
-var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
-  var anchorName = "--node-anchor-paragraph-0";
-  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
-  return _view.Decoration.node(0, 2, (0, _defineProperty2.default)({
-    style: style
-  }, 'data-drag-handler-anchor-name', anchorName), {
-    type: TYPE_NODE_DEC
-  });
-};
-var ObjHash = /*#__PURE__*/function () {
-  function ObjHash() {
-    (0, _classCallCheck2.default)(this, ObjHash);
-  }
-  (0, _createClass2.default)(ObjHash, null, [{
-    key: "getForNode",
-    value: function getForNode(node) {
-      if (this.caching.has(node)) {
-        return this.caching.get(node);
-      }
-      var uniqueId = (0, _uuid.default)();
-      this.caching.set(node, uniqueId);
-      return uniqueId;
-    }
-  }]);
-  return ObjHash;
-}();
-(0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
-var shouldIgnoreNode = function shouldIgnoreNode(node) {
-  // TODO use isWrappedMedia when clean up the featue flag
-  if ('mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1')) {
-    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
-      return true;
-    }
-  }
-  return IGNORE_NODES.includes(node.type.name);
-};
-var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDescendIntoNode(node) {
-  // Optimisation to avoid drawing node decorations for empty table cells
-  if (['tableCell', 'tableHeader'].includes(node.type.name) && !(0, _experiments.editorExperiment)('table-nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3')) {
-    var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
-      return false;
-    }
-  }
-  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
-};
-var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
-  var decs = [];
-  var docFrom = from === undefined || from < 0 ? 0 : from;
-  var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
-  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
-    var _Decoration$node2;
-    var depth = 0;
-    var anchorName;
-    var shouldDescend = shouldDescendIntoNode(node);
-    var handleId = ObjHash.getForNode(node);
-    anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
-    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      var _anchorName;
-      // Doesn't descend into a node
-      if (node.isInline) {
-        return false;
-      }
-      if (shouldIgnoreNode(node)) {
-        return shouldDescend; //skip over, don't consider it a valid depth
-      }
-      depth = newState.doc.resolve(pos).depth;
-      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
-    }
-    decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
-      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
-    }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
-      type: TYPE_NODE_DEC,
-      anchorName: anchorName,
-      nodeType: node.type.name
-    }));
-    return shouldDescend && depth < getNestedDepth();
-  });
-  return decs;
-};
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
-  unmountDecorations('data-blocks-drag-handle-container');
-  var unbind;
-  return _view.Decoration.widget(pos, function (view, getPos) {
-    var element = document.createElement('span');
-    // Need to set it to inline to avoid text being split when merging two paragraphs
-    // platform_editor_element_dnd_nested_fix_patch_2 -> inline decoration causes focus issues when refocusing Editor into first line
-    element.style.display = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
-    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
-    element.setAttribute('data-blocks-drag-handle-container', 'true');
-    var isTopLevelNode = true;
-    if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      var newPos = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
-      if (typeof newPos === 'number') {
-        var $pos = view.state.doc.resolve(newPos);
-        isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
-      }
-      /*
-       * We disable mouseover event to fix flickering issue on hover
-       * However, the tooltip for nested drag handle is no long working.
-       */
-      if (newPos === undefined || !isTopLevelNode) {
-        // This will also hide the tooltip.
-        unbind = (0, _bindEventListener.bind)(element, {
-          type: 'mouseover',
-          listener: function listener(e) {
-            e.stopPropagation();
-          }
-        });
-      }
-    }
-
-    // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
-    // due to margins applied to other nodes eg. Headings
-    element.style.clear = 'unset';
-    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
-      view: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
-    }), element);
-    return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: "".concat(TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
-    destroy: function destroy() {
-      if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-        unbind && unbind();
-      }
-    }
-  });
-};
-var unmountDecorations = function unmountDecorations(selector) {
-  // Removing decorations manually instead of using native destroy function in prosemirror API
-  // as it was more responsive and causes less re-rendering
-  var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
-  decorationsToRemove.forEach(function (el) {
-    _reactDom.default.unmountComponentAtNode(el);
-  });
 };