@atlaskit/editor-plugin-block-controls 2.6.2 → 2.7.0

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -14,7 +15,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor } from '../pm-plugins/decorations';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
+import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';
 import { getNestedNodeLeftPaddingMargin } from './consts';
+import { InlineDropTarget } from './inline-drop-target';
 const DEFAULT_DROP_INDICATOR_WIDTH = 760;
 const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
 const EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-target-leftMargin';
@@ -70,7 +73,7 @@ const HoverZone = ({
   node,
   parent,
   editorWidth,
-  anchorHeightsCache,
+  anchorRectCache,
   position,
   isNestedDropTarget,
   dropTargetStyle
@@ -90,7 +93,7 @@ const HoverZone = ({
     const anchorName = node ? getNodeAnchor(node) : '';
     const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
     const transformOffset = `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0)`;
-    const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorHeightsCache === null || anchorHeightsCache === void 0 ? void 0 : anchorHeightsCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
+    const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
     const transform = position === 'upper' ? `translateY(calc(-100% + ${transformOffset}))` : `translateY(${transformOffset})`;
     return css({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -100,7 +103,7 @@ const HoverZone = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
       maxWidth: `${editorWidth || 0}px`
     });
-  }, [anchorHeightsCache, editorWidth, node, position]);
+  }, [anchorRectCache, editorWidth, node, position]);
   const isFullHeight = useMemo(() => {
     return dropTargetStyle === 'fullHeight';
   }, [dropTargetStyle]);
@@ -120,16 +123,17 @@ const HoverZone = ({
     hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
-export const DropTargetV2 = ({
-  api,
-  getPos,
-  prevNode,
-  nextNode,
-  parentNode,
-  formatMessage,
-  anchorHeightsCache,
-  dropTargetStyle
-}) => {
+export const DropTargetV2 = props => {
+  const {
+    api,
+    getPos,
+    prevNode,
+    nextNode,
+    parentNode,
+    formatMessage,
+    anchorRectCache,
+    dropTargetStyle
+  } = props;
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const {
     widthState
@@ -165,7 +169,7 @@ export const DropTargetV2 = ({
     onDrop: onDrop,
     node: prevNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorHeightsCache: anchorHeightsCache,
+    anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget
   }), jsx("div", {
@@ -189,9 +193,13 @@ export const DropTargetV2 = ({
     node: nextNode,
     parent: parentNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorHeightsCache: anchorHeightsCache,
+    anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget,
     dropTargetStyle: dropTargetStyle
-  }));
+  }), shouldAllowInlineDropTarget(isNestedDropTarget, nextNode) && jsx(Fragment, null, jsx(InlineDropTarget, _extends({}, props, {
+    position: "left"
+  })), jsx(InlineDropTarget, _extends({}, props, {
+    position: "right"
+  }))));
 };

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

@@ -0,0 +1,130 @@
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 { isAnchorSupported } from '../utils/anchor-utils';
+const dropTargetCommonStyle = css({
+  position: 'absolute',
+  display: 'block'
+});
+const hideDropTargetStyle = css({
+  display: 'none'
+});
+const hoverZoneCommonStyle = css({
+  position: 'absolute',
+  // same value as block hover zone
+  zIndex: 110
+});
+
+// gap between node boundary and drop indicator/drop zone
+const GAP = 4;
+const HOVER_ZONE_WIDTH_OFFSET = 40;
+const HOVER_ZONE_HEIGHT_OFFSET = 10;
+const HOVER_ZONE_DEFAULT_WIDTH = 40;
+export const InlineDropTarget = ({
+  api,
+  nextNode,
+  position,
+  anchorRectCache
+}) => {
+  const {
+    widthState
+  } = useSharedPluginState(api, ['width']);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const anchorName = nextNode ? getNodeAnchor(nextNode) : '';
+  const handleDragEnter = useCallback(() => {
+    setIsDraggedOver(true);
+  }, []);
+  const handleDragLeave = useCallback(() => {
+    setIsDraggedOver(false);
+  }, []);
+  const dropTargetRectStyle = useMemo(() => {
+    if (isAnchorSupported()) {
+      return css({
+        height: `calc(anchor-size(${anchorName} height))`,
+        positionAnchor: anchorName,
+        left: position === 'left' ? `calc(anchor(left) - ${GAP}px)` : `calc(anchor(right) + ${GAP}px)`,
+        top: `calc(anchor(top))`
+      });
+    }
+    const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
+    return css({
+      height: `calc(${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0}px)`,
+      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
+      top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`
+    });
+  }, [anchorName, anchorRectCache, position]);
+  return jsx(Fragment, null, jsx("div", {
+    "data-test-id": `block-ctrl-drop-target-${position}`,
+    css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
+  }, jsx(DropIndicator, {
+    edge: position
+  })), jsx(InlineHoverZone, {
+    position: position,
+    node: nextNode,
+    editorWidthState: widthState,
+    anchorRectCache: anchorRectCache,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDrop: () => {}
+  }));
+};
+export const InlineHoverZone = ({
+  node,
+  editorWidthState,
+  anchorRectCache,
+  position,
+  onDragEnter,
+  onDragLeave,
+  onDrop
+}) => {
+  const ref = useRef(null);
+  const {
+    width: editorWith
+  } = editorWidthState || {};
+  const anchorName = node ? getNodeAnchor(node) : '';
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDragEnter,
+        onDragLeave,
+        onDrop
+      });
+    }
+  }, [onDragEnter, onDragLeave, onDrop]);
+  const inlineHoverZoneRectStyle = useMemo(() => {
+    if (isAnchorSupported()) {
+      return css({
+        positionAnchor: anchorName,
+        left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP}px)`,
+        right: position === 'left' ? `calc(anchor(left) + ${GAP}px)` : 'unset',
+        top: `calc(anchor(top))`,
+        width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
+        height: `calc(anchor-size(${anchorName} height))`
+      });
+    }
+    const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
+    const width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
+    return css({
+      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
+      top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`,
+      width: `${width}px`,
+      height: `calc(${(anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0}px - ${HOVER_ZONE_HEIGHT_OFFSET}px)`
+    });
+  }, [anchorName, anchorRectCache, editorWith, position]);
+  return jsx("div", {
+    ref: ref,
+    css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
+  });
+};

package/dist/es2019/utils/advanced-layouts-flags.js

@@ -0,0 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const isPreRelease1 = () => {
+  return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_1');
+};

package/dist/es2019/utils/anchor-utils.js

@@ -7,34 +7,40 @@ export const isAnchorSupported = memoizeOne(() => {
   }
   return false;
 });
-export class AnchorHeightsCache {
+export class AnchorRectCache {
   constructor() {
-    _defineProperty(this, "anchorHeightsMap", {});
+    _defineProperty(this, "anchorRectMap", {});
     _defineProperty(this, "isAnchorSupported", isAnchorSupported());
     _defineProperty(this, "isDirty", true);
     _defineProperty(this, "view", null);
   }
   clear() {
     this.isDirty = true;
-    this.anchorHeightsMap = {};
+    this.anchorRectMap = {};
   }
-  getHeights() {
+  getRects() {
     if (this.isDirty) {
       var _this$view;
       const anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll('[data-drag-handler-anchor-name]')) || [];
-      this.anchorHeightsMap = Array.from(anchorElements).reduce((prev, curr) => {
+      this.anchorRectMap = Array.from(anchorElements).reduce((prev, curr) => {
         const anchorName = curr.getAttribute('data-drag-handler-anchor-name');
         if (anchorName) {
           return {
             ...prev,
-            [anchorName]: curr.clientHeight
+            [anchorName]: {
+              height: curr.clientHeight,
+              top: curr.offsetTop,
+              left: curr.offsetLeft,
+              right: curr.offsetLeft + curr.clientWidth,
+              width: curr.clientWidth
+            }
           };
         }
         return prev;
       }, {});
       this.isDirty = false;
     }
-    return this.anchorHeightsMap;
+    return this.anchorRectMap;
   }
   setEditorView(view) {
     if (this.view !== view) {
@@ -42,10 +48,50 @@ export class AnchorHeightsCache {
     }
   }
   getHeight(anchorName) {
+    var _rects$anchorName;
     if (this.isAnchorSupported) {
       return null;
     }
-    const heights = this.getHeights();
-    return heights[anchorName];
+    const rects = this.getRects();
+    return (_rects$anchorName = rects[anchorName]) === null || _rects$anchorName === void 0 ? void 0 : _rects$anchorName.height;
+  }
+  getWidth(anchorName) {
+    var _rects$anchorName2;
+    if (this.isAnchorSupported) {
+      return null;
+    }
+    const rects = this.getRects();
+    return (_rects$anchorName2 = rects[anchorName]) === null || _rects$anchorName2 === void 0 ? void 0 : _rects$anchorName2.width;
+  }
+  getLeft(anchorName) {
+    var _rects$anchorName3;
+    if (this.isAnchorSupported) {
+      return null;
+    }
+    const rects = this.getRects();
+    return (_rects$anchorName3 = rects[anchorName]) === null || _rects$anchorName3 === void 0 ? void 0 : _rects$anchorName3.left;
+  }
+  getTop(anchorName) {
+    var _rects$anchorName4;
+    if (this.isAnchorSupported) {
+      return null;
+    }
+    const rects = this.getRects();
+    return (_rects$anchorName4 = rects[anchorName]) === null || _rects$anchorName4 === void 0 ? void 0 : _rects$anchorName4.top;
+  }
+  getRight(anchorName) {
+    var _rects$anchorName5;
+    if (this.isAnchorSupported) {
+      return null;
+    }
+    const rects = this.getRects();
+    return (_rects$anchorName5 = rects[anchorName]) === null || _rects$anchorName5 === void 0 ? void 0 : _rects$anchorName5.right;
+  }
+  getRect(anchorName) {
+    if (this.isAnchorSupported) {
+      return null;
+    }
+    const rects = this.getRects();
+    return rects[anchorName];
   }
 }

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

@@ -0,0 +1,12 @@
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
+import { isPreRelease1 } from './advanced-layouts-flags';
+export const shouldAllowInlineDropTarget = (isNested, node) => {
+  if (!isPreRelease1() || isNested) {
+    return false;
+  }
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
+    return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
+  }
+  return !isEmptyParagraph(node);
+};

package/dist/esm/commands/move-to-layout.js

@@ -0,0 +1,70 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+var createNewLayout = function createNewLayout(schema, layoutContents) {
+  // TODO update with constant
+  if (layoutContents.length === 0 || layoutContents.length > 5) {
+    return null;
+  }
+  var width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
+  if (!width) {
+    return null;
+  }
+  var _ref = schema.nodes || {},
+    layoutSection = _ref.layoutSection,
+    layoutColumn = _ref.layoutColumn;
+  try {
+    var layoutSectionNode = layoutSection.createChecked(undefined, Fragment.fromArray(layoutContents.map(function (layoutContent) {
+      return layoutColumn.createChecked({
+        width: width
+      }, layoutContent);
+    })));
+    return layoutSectionNode;
+  } catch (error) {
+    // TODO analytics
+  }
+  return null;
+};
+export var moveToLayout = function moveToLayout(api) {
+  return function (from, to, position) {
+    return function (_ref2) {
+      var tr = _ref2.tr;
+      var _ref3 = tr.doc.type.schema.nodes || {},
+        layoutSection = _ref3.layoutSection,
+        layoutColumn = _ref3.layoutColumn,
+        doc = _ref3.doc;
+
+      // layout plugin does not exist
+      if (!layoutSection || !layoutColumn) {
+        return tr;
+      }
+      var $to = tr.doc.resolve(to);
+
+      // invalid to position or not top level.
+      if (!$to.nodeAfter || $to.parent.type !== doc) {
+        return tr;
+      }
+      var $from = tr.doc.resolve(from);
+
+      // invalid from position
+      if (!$from.nodeAfter) {
+        return tr;
+      }
+      var toNode = $to.nodeAfter;
+      var fromNode = $from.nodeAfter;
+      var fromNodeEndPos = from + fromNode.nodeSize;
+      var toNodeEndPos = to + toNode.nodeSize;
+      if ($to.nodeAfter.type !== layoutSection) {
+        var layoutContents = position === 'left' ? [fromNode, toNode] : [toNode, fromNode];
+        var newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
+        if (newLayout) {
+          tr.delete(from, fromNodeEndPos);
+          var mappedTo = tr.mapping.map(to);
+          tr.delete(mappedTo, toNodeEndPos);
+          tr.insert(mappedTo, newLayout); // insert the content at the new position
+        }
+        return tr;
+      }
+      return tr;
+    };
+  };
+};

package/dist/esm/consts.js

@@ -4,4 +4,5 @@ export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["LEFT"] = "left";
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
-}({});
+}({});
+export var MAX_LAYOUT_COLUMN_SUPPORTED = 3;

package/dist/esm/plugin.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './commands/move-node';
+import { moveToLayout } from './commands/move-to-layout';
 import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
@@ -31,6 +32,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     },
     commands: {
       moveNode: moveNode(api),
+      moveToLayout: moveToLayout(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref4) {
           var tr = _ref4.tr;
@@ -45,20 +47,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return tr;
         };
       },
-      hideDragHandle: function hideDragHandle() {
+      setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
         return function (_ref5) {
           var tr = _ref5.tr;
-          if (fg('confluence_frontend_page_title_enter_improvements')) {
-            tr.setMeta(key, {
-              hideDragHandle: true
-            });
-          }
-          return tr;
-        };
-      },
-      setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
-        return function (_ref6) {
-          var tr = _ref6.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;

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

@@ -122,7 +122,7 @@ export var findNodeDecs = function findNodeDecs(decorations, from, to) {
     return spec.type === TYPE_NODE_DEC;
   });
 };
-export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorHeightsCache) {
+export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -137,7 +137,7 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     if (fg('platform_editor_drag_and_drop_target_v2')) {
       ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
-        anchorHeightsCache: anchorHeightsCache
+        anchorRectCache: anchorRectCache
       })), element);
     } else {
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
@@ -150,7 +150,7 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     side: side
   });
 };
-export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache, from, to) {
+export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorRectCache, from, to) {
   unmountDecorations('data-blocks-drop-target-container');
   var decs = [];
   var POS_END_OF_DOC = newState.doc.nodeSize - 2;
@@ -159,7 +159,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
-  anchorHeightsCache === null || anchorHeightsCache === void 0 || anchorHeightsCache.clear();
+  anchorRectCache === null || anchorRectCache === void 0 || anchorRectCache.clear();
   var prevNodeStack = [];
   var popNodeStack = function popNodeStack(depth) {
     var result;
@@ -224,7 +224,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       parentNode: parent || undefined,
       formatMessage: formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
-    }, -1, anchorHeightsCache));
+    }, -1, anchorRectCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,
@@ -232,7 +232,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         parentNode: parent || undefined,
         formatMessage: formatMessage,
         dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
-      }, -1, anchorHeightsCache));
+      }, -1, anchorRectCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
       pushNodeStack(node, depth);
@@ -247,7 +247,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       formatMessage: formatMessage,
       prevNode: newState.doc.lastChild || undefined,
       parentNode: newState.doc
-    }, undefined, anchorHeightsCache));
+    }, undefined, anchorRectCache));
   }
   return decs;
 };
@@ -329,18 +329,22 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
   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
-    element.style.display = 'inline';
+    // 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 $pos = view.state.doc.resolve(pos);
-      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      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 (!isTopLevelNode) {
+      if (newPos === undefined || !isTopLevelNode) {
         // This will also hide the tooltip.
         unbind = bind(element, {
           type: 'mouseover',

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -7,11 +7,6 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
-var isDocFirstChildEmptyLine = function isDocFirstChildEmptyLine(elem) {
-  var _elem$firstElementChi;
-  var parentElement = elem.parentElement;
-  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
-};
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -30,11 +25,6 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
     var _rootElement$parentEl;
-    if (isDocFirstChildEmptyLine(rootElement) && fg('confluence_frontend_page_title_enter_improvements')) {
-      var _api$core, _api$blockControls2;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.hideDragHandle());
-      return;
-    }
     // We want to exlude handles from showing for empty paragraph and heading nodes
     if (editorExperiment('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
@@ -83,8 +73,8 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
     var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
-      var _api$core2, _api$blockControls3;
-      api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(rootPos, anchorName, nodeType));
+      var _api$core, _api$blockControls2;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
     }
   }
 };