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

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

@@ -1,29 +1,23 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
-import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
-import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
-import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
+import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
-export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
-export const TYPE_HANDLE_DEC = 'drag-handle';
-export const TYPE_NODE_DEC = 'node-decoration';
-const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
-export const getNodeAnchor = node => {
-  const handleId = ObjHash.getForNode(node);
-  return `--node-anchor-${node.type.name}-${handleId}`;
+const shouldDescend = node => {
+  if (fg('platform_editor_drag_and_drop_target_v2')) {
+    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
+  }
+  return true;
 };
 const getNodeMargins = node => {
   if (!node) {
@@ -68,12 +62,6 @@ const getGapAndOffset = (prevNode, nextNode, parentNode) => {
     offset
   };
 };
-const shouldDescend = node => {
-  if (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
@@ -85,37 +73,6 @@ const shouldDescend = node => {
 export const findDropTargetDecs = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_DROP_TARGET_DEC);
 };
-export const findHandleDec = (decorations, from, to) => {
-  return decorations.find(from, to, spec => 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
- */
-export const findNodeDecs = (decorations, from, to) => {
-  let newfrom = from;
-  let 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, spec => spec.type === TYPE_NODE_DEC);
-};
 export const createDropTargetDecoration = (pos, props, side, anchorRectCache) => {
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
@@ -244,148 +201,4 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
     }, undefined, anchorRectCache));
   }
   return decs;
-};
-export const emptyParagraphNodeDecorations = () => {
-  const anchorName = `--node-anchor-paragraph-0`;
-  const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
-  return Decoration.node(0, 2, {
-    style,
-    ['data-drag-handler-anchor-name']: anchorName
-  }, {
-    type: TYPE_NODE_DEC
-  });
-};
-class ObjHash {
-  static getForNode(node) {
-    if (this.caching.has(node)) {
-      return this.caching.get(node);
-    }
-    const uniqueId = uuid();
-    this.caching.set(node, uniqueId);
-    return uniqueId;
-  }
-}
-_defineProperty(ObjHash, "caching", new WeakMap());
-const shouldIgnoreNode = node => {
-  // TODO use isWrappedMedia when clean up the featue flag
-  if ('mediaSingle' === node.type.name && 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);
-};
-export const shouldDescendIntoNode = node => {
-  // Optimisation to avoid drawing node decorations for empty table cells
-  if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && 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);
-};
-export const nodeDecorations = (newState, from, to) => {
-  const decs = [];
-  const docFrom = from === undefined || from < 0 ? 0 : from;
-  const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
-  newState.doc.nodesBetween(docFrom, docTo, (node, pos, _parent, index) => {
-    let depth = 0;
-    let anchorName;
-    const shouldDescend = shouldDescendIntoNode(node);
-    const handleId = ObjHash.getForNode(node);
-    anchorName = `--node-anchor-${node.type.name}-${handleId}`;
-    if (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-${node.type.name}-${pos}`;
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
-    }
-    decs.push(Decoration.node(pos, pos + node.nodeSize, {
-      style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`,
-      ['data-drag-handler-anchor-name']: anchorName,
-      ['data-drag-handler-node-type']: node.type.name,
-      ['data-drag-handler-anchor-depth']: `${depth}`
-    }, {
-      type: TYPE_NODE_DEC,
-      anchorName,
-      nodeType: node.type.name
-    }));
-    return shouldDescend && depth < getNestedDepth();
-  });
-  return decs;
-};
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, handleOptions) => {
-  unmountDecorations('data-blocks-drag-handle-container');
-  let unbind;
-  return Decoration.widget(pos, (view, getPos) => {
-    const 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 = 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');
-    let isTopLevelNode = true;
-    if (editorExperiment('nested-dnd', true)) {
-      const newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
-      if (typeof newPos === 'number') {
-        const $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 = bind(element, {
-          type: 'mouseover',
-          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.render( /*#__PURE__*/createElement(DragHandle, {
-      view,
-      api,
-      formatMessage,
-      getPos,
-      anchorName,
-      nodeType,
-      handleOptions,
-      isTopLevelNode
-    }), element);
-    return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
-    destroy: () => {
-      if (editorExperiment('nested-dnd', true)) {
-        unbind && unbind();
-      }
-    }
-  });
-};
-const unmountDecorations = selector => {
-  // Removing decorations manually instead of using native destroy function in prosemirror API
-  // as it was more responsive and causes less re-rendering
-  const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
-  decorationsToRemove.forEach(el => {
-    ReactDOM.unmountComponentAtNode(el);
-  });
 };

package/dist/es2019/pm-plugins/main.js

@@ -14,7 +14,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
-import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, findDropTargetDecs, findHandleDec, findNodeDecs, nodeDecorations } from './decorations';
+import { findNodeDecs, nodeDecorations } from './decorations-anchor';
+import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
+import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 export const key = new PluginKey('blockControls');

package/dist/es2019/ui/drop-target-v2.js

@@ -12,7 +12,7 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';

package/dist/es2019/ui/global-styles.js

@@ -8,7 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
-const extendedHoverZone = css({
+const extendedHoverZone = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -26,7 +26,8 @@ const extendedHoverZone = css({
       height: '100%',
       background: 'transparent',
       cursor: 'default',
-      zIndex: -1
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
     }
   },
   // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
@@ -39,7 +40,7 @@ const extendedHoverZone = css({
     display: 'none'
   }
 });
-const extendedHoverZoneNested = css({
+const extendedHoverZoneNested = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -69,7 +70,8 @@ const extendedHoverZoneNested = css({
       width: '100%',
       height: '100%',
       cursor: 'default',
-      zIndex: -1
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      zIndex: fg('platform_editor_element_dnd_nested_fix_patch_3') ? 1 : -1
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
@@ -166,10 +168,19 @@ const withFormatInLayoutStyleFix = css({
 const getTextNodeStyle = () => {
   return fg('platform_editor_element_controls_chrome_input_fix') ? withInlineNodeStyleWithChromeFix : withInlineNodeStyle;
 };
+const withRelativePosStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&& [data-drag-handler-anchor-name]': {
+      position: 'relative'
+    }
+  }
+});
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
       exposure: false
-    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined]
+    }) ? emptyBlockExperimentGlobalStyles : undefined, fg('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, fg('platform_editor_element_dnd_nested_fix_patch_3') ? withRelativePosStyle : undefined]
   });
 };

package/dist/es2019/ui/inline-drop-target.js

@@ -11,7 +11,7 @@ import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 const dropTargetCommonStyle = css({

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

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
+  // Optimisation to avoid drawing node decorations for empty table cells
+  if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && 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 && fg('platform_editor_element_dnd_nested_fix_patch_3');
+
+  // TODO use isWrappedMedia when clean up the feature flag
+  var isMediaSingle = 'mediaSingle' === node.type.name && 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
+ */
+export var 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;
+  });
+};
+export var 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 = getNodeAnchor(node);
+    if (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(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', " ").concat(fg('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
+    }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
+      type: TYPE_NODE_DEC,
+      anchorName: anchorName,
+      nodeType: node.type.name
+    }));
+    return shouldDescend && depth < getNestedDepth();
+  });
+  return decs;
+};

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

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+export var TYPE_HANDLE_DEC = 'drag-handle';
+export var TYPE_NODE_DEC = 'node-decoration';
+export var getNestedDepth = function getNestedDepth() {
+  return editorExperiment('nested-dnd', true) ? 100 : 0;
+};
+export var getNodeAnchor = function getNodeAnchor(node) {
+  var handleId = ObjHash.getForNode(node);
+  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+};
+var ObjHash = /*#__PURE__*/function () {
+  function ObjHash() {
+    _classCallCheck(this, ObjHash);
+  }
+  _createClass(ObjHash, null, [{
+    key: "getForNode",
+    value: function getForNode(node) {
+      if (this.caching.has(node)) {
+        return this.caching.get(node);
+      }
+      var uniqueId = uuid();
+      this.caching.set(node, uniqueId);
+      return uniqueId;
+    }
+  }]);
+  return ObjHash;
+}();
+_defineProperty(ObjHash, "caching", new WeakMap());
+export 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.unmountComponentAtNode(el);
+  });
+};

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

@@ -0,0 +1,81 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { createElement } from 'react';
+import { bind } from 'bind-event-listener';
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { DragHandle } from '../ui/drag-handle';
+import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
+  var anchorName = "--node-anchor-paragraph-0";
+  var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
+  return Decoration.node(0, 2, _defineProperty({
+    style: style
+  }, 'data-drag-handler-anchor-name', anchorName), {
+    type: TYPE_NODE_DEC
+  });
+};
+export var findHandleDec = function findHandleDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_HANDLE_DEC;
+  });
+};
+export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
+  unmountDecorations('data-blocks-drag-handle-container');
+  var unbind;
+  return 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 = 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 (editorExperiment('nested-dnd', true)) {
+      var newPos = 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 = 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.render( /*#__PURE__*/createElement(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(uuid()),
+    destroy: function destroy() {
+      if (editorExperiment('nested-dnd', true)) {
+        unbind && unbind();
+      }
+    }
+  });
+};