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

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

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineHoverZone = exports.InlineDropTarget = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _decorations = require("../pm-plugins/decorations");
+var _anchorUtils = require("../utils/anchor-utils");
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var dropTargetCommonStyle = (0, _react2.css)({
+  position: 'absolute',
+  display: 'block'
+});
+var hideDropTargetStyle = (0, _react2.css)({
+  display: 'none'
+});
+var hoverZoneCommonStyle = (0, _react2.css)({
+  position: 'absolute',
+  // same value as block hover zone
+  zIndex: 110
+});
+
+// gap between node boundary and drop indicator/drop zone
+var GAP = 4;
+var HOVER_ZONE_WIDTH_OFFSET = 40;
+var HOVER_ZONE_HEIGHT_OFFSET = 10;
+var HOVER_ZONE_DEFAULT_WIDTH = 40;
+var InlineDropTarget = exports.InlineDropTarget = function InlineDropTarget(_ref) {
+  var api = _ref.api,
+    nextNode = _ref.nextNode,
+    position = _ref.position,
+    anchorRectCache = _ref.anchorRectCache;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDraggedOver = _useState2[0],
+    setIsDraggedOver = _useState2[1];
+  var anchorName = nextNode ? (0, _decorations.getNodeAnchor)(nextNode) : '';
+  var handleDragEnter = (0, _react.useCallback)(function () {
+    setIsDraggedOver(true);
+  }, []);
+  var handleDragLeave = (0, _react.useCallback)(function () {
+    setIsDraggedOver(false);
+  }, []);
+  var dropTargetRectStyle = (0, _react.useMemo)(function () {
+    if ((0, _anchorUtils.isAnchorSupported)()) {
+      return (0, _react2.css)({
+        height: "calc(anchor-size(".concat(anchorName, " height))"),
+        positionAnchor: anchorName,
+        left: position === 'left' ? "calc(anchor(left) - ".concat(GAP, "px)") : "calc(anchor(right) + ".concat(GAP, "px)"),
+        top: "calc(anchor(top))"
+      });
+    }
+    var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
+    return (0, _react2.css)({
+      height: "calc(".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0, "px)"),
+      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px")
+    });
+  }, [anchorName, anchorRectCache, position]);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    "data-test-id": "block-ctrl-drop-target-".concat(position),
+    css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
+  }, (0, _react2.jsx)(_box.DropIndicator, {
+    edge: position
+  })), (0, _react2.jsx)(InlineHoverZone, {
+    position: position,
+    node: nextNode,
+    editorWidthState: widthState,
+    anchorRectCache: anchorRectCache,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDrop: function onDrop() {}
+  }));
+};
+var InlineHoverZone = exports.InlineHoverZone = function InlineHoverZone(_ref2) {
+  var node = _ref2.node,
+    editorWidthState = _ref2.editorWidthState,
+    anchorRectCache = _ref2.anchorRectCache,
+    position = _ref2.position,
+    onDragEnter = _ref2.onDragEnter,
+    onDragLeave = _ref2.onDragLeave,
+    onDrop = _ref2.onDrop;
+  var ref = (0, _react.useRef)(null);
+  var _ref3 = editorWidthState || {},
+    editorWith = _ref3.width;
+  var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      return (0, _adapter.dropTargetForElements)({
+        element: ref.current,
+        onDragEnter: onDragEnter,
+        onDragLeave: onDragLeave,
+        onDrop: onDrop
+      });
+    }
+  }, [onDragEnter, onDragLeave, onDrop]);
+  var inlineHoverZoneRectStyle = (0, _react.useMemo)(function () {
+    if ((0, _anchorUtils.isAnchorSupported)()) {
+      return (0, _react2.css)({
+        positionAnchor: anchorName,
+        left: position === 'left' ? 'unset' : "calc(anchor(right) + ".concat(GAP, "px)"),
+        right: position === 'left' ? "calc(anchor(left) + ".concat(GAP, "px)") : 'unset',
+        top: "calc(anchor(top))",
+        width: editorWith ? "calc((".concat(editorWith, "px - anchor-size(").concat(anchorName, " width))/2 - ").concat(HOVER_ZONE_WIDTH_OFFSET, "px)") : "".concat(HOVER_ZONE_DEFAULT_WIDTH, "px"),
+        height: "calc(anchor-size(".concat(anchorName, " height))")
+      });
+    }
+    var nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
+    var width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
+    return (0, _react2.css)({
+      left: position === 'left' ? "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP, "px") : "".concat(((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP, "px"),
+      top: "".concat((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0, "px"),
+      width: "".concat(width, "px"),
+      height: "calc(".concat((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0, "px - ").concat(HOVER_ZONE_HEIGHT_OFFSET, "px)")
+    });
+  }, [anchorName, anchorRectCache, editorWith, position]);
+  return (0, _react2.jsx)("div", {
+    ref: ref,
+    css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
+  });
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPreRelease1 = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var isPreRelease1 = exports.isPreRelease1 = function isPreRelease1() {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_1');
+};

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isAnchorSupported = exports.AnchorHeightsCache = void 0;
+exports.isAnchorSupported = exports.AnchorRectCache = 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"));
@@ -18,36 +18,42 @@ var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(fun
   }
   return false;
 });
-var AnchorHeightsCache = exports.AnchorHeightsCache = /*#__PURE__*/function () {
-  function AnchorHeightsCache() {
-    (0, _classCallCheck2.default)(this, AnchorHeightsCache);
-    (0, _defineProperty2.default)(this, "anchorHeightsMap", {});
+var AnchorRectCache = exports.AnchorRectCache = /*#__PURE__*/function () {
+  function AnchorRectCache() {
+    (0, _classCallCheck2.default)(this, AnchorRectCache);
+    (0, _defineProperty2.default)(this, "anchorRectMap", {});
     (0, _defineProperty2.default)(this, "isAnchorSupported", isAnchorSupported());
     (0, _defineProperty2.default)(this, "isDirty", true);
     (0, _defineProperty2.default)(this, "view", null);
   }
-  (0, _createClass2.default)(AnchorHeightsCache, [{
+  (0, _createClass2.default)(AnchorRectCache, [{
     key: "clear",
     value: function clear() {
       this.isDirty = true;
-      this.anchorHeightsMap = {};
+      this.anchorRectMap = {};
     }
   }, {
-    key: "getHeights",
-    value: function getHeights() {
+    key: "getRects",
+    value: function getRects() {
       if (this.isDirty) {
         var _this$view;
         var 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(function (prev, curr) {
+        this.anchorRectMap = Array.from(anchorElements).reduce(function (prev, curr) {
           var anchorName = curr.getAttribute('data-drag-handler-anchor-name');
           if (anchorName) {
-            return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, anchorName, curr.clientHeight));
+            return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, 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;
     }
   }, {
     key: "setEditorView",
@@ -59,12 +65,62 @@ var AnchorHeightsCache = exports.AnchorHeightsCache = /*#__PURE__*/function () {
   }, {
     key: "getHeight",
     value: function getHeight(anchorName) {
+      var _rects$anchorName;
       if (this.isAnchorSupported) {
         return null;
       }
-      var heights = this.getHeights();
-      return heights[anchorName];
+      var rects = this.getRects();
+      return (_rects$anchorName = rects[anchorName]) === null || _rects$anchorName === void 0 ? void 0 : _rects$anchorName.height;
+    }
+  }, {
+    key: "getWidth",
+    value: function getWidth(anchorName) {
+      var _rects$anchorName2;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName2 = rects[anchorName]) === null || _rects$anchorName2 === void 0 ? void 0 : _rects$anchorName2.width;
+    }
+  }, {
+    key: "getLeft",
+    value: function getLeft(anchorName) {
+      var _rects$anchorName3;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName3 = rects[anchorName]) === null || _rects$anchorName3 === void 0 ? void 0 : _rects$anchorName3.left;
+    }
+  }, {
+    key: "getTop",
+    value: function getTop(anchorName) {
+      var _rects$anchorName4;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName4 = rects[anchorName]) === null || _rects$anchorName4 === void 0 ? void 0 : _rects$anchorName4.top;
+    }
+  }, {
+    key: "getRight",
+    value: function getRight(anchorName) {
+      var _rects$anchorName5;
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return (_rects$anchorName5 = rects[anchorName]) === null || _rects$anchorName5 === void 0 ? void 0 : _rects$anchorName5.right;
+    }
+  }, {
+    key: "getRect",
+    value: function getRect(anchorName) {
+      if (this.isAnchorSupported) {
+        return null;
+      }
+      var rects = this.getRects();
+      return rects[anchorName];
     }
   }]);
-  return AnchorHeightsCache;
+  return AnchorRectCache;
 }();

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAllowInlineDropTarget = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _consts = require("../consts");
+var _advancedLayoutsFlags = require("./advanced-layouts-flags");
+var shouldAllowInlineDropTarget = exports.shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
+  if (!(0, _advancedLayoutsFlags.isPreRelease1)() || isNested) {
+    return false;
+  }
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
+    return node.childCount < _consts.MAX_LAYOUT_COLUMN_SUPPORTED;
+  }
+  return !(0, _utils.isEmptyParagraph)(node);
+};

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

@@ -0,0 +1,69 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
+const createNewLayout = (schema, layoutContents) => {
+  // TODO update with constant
+  if (layoutContents.length === 0 || layoutContents.length > 5) {
+    return null;
+  }
+  const width = DEFAULT_COLUMN_DISTRIBUTIONS[layoutContents.length];
+  if (!width) {
+    return null;
+  }
+  const {
+    layoutSection,
+    layoutColumn
+  } = schema.nodes || {};
+  try {
+    const layoutSectionNode = layoutSection.createChecked(undefined, Fragment.fromArray(layoutContents.map(layoutContent => {
+      return layoutColumn.createChecked({
+        width
+      }, layoutContent);
+    })));
+    return layoutSectionNode;
+  } catch (error) {
+    // TODO analytics
+  }
+  return null;
+};
+export const moveToLayout = api => (from, to, position) => ({
+  tr
+}) => {
+  const {
+    layoutSection,
+    layoutColumn,
+    doc
+  } = tr.doc.type.schema.nodes || {};
+
+  // layout plugin does not exist
+  if (!layoutSection || !layoutColumn) {
+    return tr;
+  }
+  const $to = tr.doc.resolve(to);
+
+  // invalid to position or not top level.
+  if (!$to.nodeAfter || $to.parent.type !== doc) {
+    return tr;
+  }
+  const $from = tr.doc.resolve(from);
+
+  // invalid from position
+  if (!$from.nodeAfter) {
+    return tr;
+  }
+  const toNode = $to.nodeAfter;
+  const fromNode = $from.nodeAfter;
+  const fromNodeEndPos = from + fromNode.nodeSize;
+  const toNodeEndPos = to + toNode.nodeSize;
+  if ($to.nodeAfter.type !== layoutSection) {
+    const layoutContents = position === 'left' ? [fromNode, toNode] : [toNode, fromNode];
+    const newLayout = createNewLayout(tr.doc.type.schema, layoutContents);
+    if (newLayout) {
+      tr.delete(from, fromNodeEndPos);
+      const 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/es2019/consts.js

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

package/dist/es2019/plugin.js

@@ -2,6 +2,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';
@@ -28,6 +29,7 @@ export const blockControlsPlugin = ({
   },
   commands: {
     moveNode: moveNode(api),
+    moveToLayout: moveToLayout(api),
     showDragHandleAt: (pos, anchorName, nodeType, handleOptions) => ({
       tr
     }) => {
@@ -41,16 +43,6 @@ export const blockControlsPlugin = ({
       });
       return tr;
     },
-    hideDragHandle: () => ({
-      tr
-    }) => {
-      if (fg('confluence_frontend_page_title_enter_improvements')) {
-        tr.setMeta(key, {
-          hideDragHandle: true
-        });
-      }
-      return tr;
-    },
     setNodeDragged: (getPos, anchorName, nodeType) => ({
       tr
     }) => {

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

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

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

@@ -7,11 +7,6 @@ const isEmptyNestedParagraphOrHeading = target => {
   }
   return false;
 };
-const isDocFirstChildEmptyLine = elem => {
-  var _elem$firstElementChi;
-  const 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 const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _target$classList;
   const {
@@ -31,11 +26,6 @@ export const handleMouseOver = (view, event, api) => {
   let 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 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? 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;
@@ -84,8 +74,8 @@ export const handleMouseOver = (view, event, api) => {
     }
     const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
-      var _api$core2, _api$blockControls3;
-      api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? 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 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(rootPos, anchorName, nodeType));
     }
   }
 };

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

@@ -11,7 +11,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { AnchorHeightsCache, isAnchorSupported } from '../utils/anchor-utils';
+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';
@@ -89,11 +89,8 @@ const initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-export const newApply = (api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache) => {
+export const newApply = (api, formatMessage, tr, currentState, newState, flags, anchorRectCache) => {
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
-  const {
-    isTitleEnterImprovementEnabled
-  } = flags;
   let {
     activeNode,
     decorations,
@@ -176,7 +173,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   const shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
 
   // Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
-  const shouldRemoveHandle = latestActiveNode && ((meta === null || meta === void 0 ? void 0 : meta.hideDragHandle) && isTitleEnterImprovementEnabled || isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
+  const shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
   if (shouldRemoveHandle) {
     var _activeNode3, _activeNode4;
     const oldHandle = findHandleDec(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
@@ -201,7 +198,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || isBlocksDragTargetDebug()) {
-      const decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorHeightsCache);
+      const decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
@@ -226,11 +223,10 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache) => {
+export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache) => {
   var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
   const {
-    isNestedEnabled,
-    isTitleEnterImprovementEnabled
+    isNestedEnabled
   } = flags;
   let {
     activeNode,
@@ -264,7 +260,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
   // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
   // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
   // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
-  if (meta !== null && meta !== void 0 && meta.hideDragHandle && isTitleEnterImprovementEnabled || isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
+  if (isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
     const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
     decorations = decorations.remove(oldHandle);
   }
@@ -371,7 +367,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
       var _meta$activeNode7;
-      const decs = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorHeightsCache);
+      const decs = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
@@ -406,18 +402,16 @@ export const createPlugin = (api, getIntl) => {
   const isOptimisedApply = isNestedEnabled && editorExperiment('optimised-apply-dnd', true, {
     exposure: true
   });
-  const isTitleEnterImprovementEnabled = fg('confluence_frontend_page_title_enter_improvements');
   const flags = {
     isNestedEnabled,
-    isOptimisedApply,
-    isTitleEnterImprovementEnabled
+    isOptimisedApply
   };
   if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
-  let anchorHeightsCache;
+  let anchorRectCache;
   if (!isAnchorSupported() && fg('platform_editor_drag_and_drop_target_v2')) {
-    anchorHeightsCache = new AnchorHeightsCache();
+    anchorRectCache = new AnchorRectCache();
   }
   return new SafePlugin({
     key,
@@ -427,9 +421,9 @@ export const createPlugin = (api, getIntl) => {
       },
       apply(tr, currentState, oldState, newState) {
         if (isOptimisedApply) {
-          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache);
+          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorRectCache);
         }
-        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache);
+        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache);
       }
     },
     props: {
@@ -481,8 +475,8 @@ export const createPlugin = (api, getIntl) => {
           return false;
         },
         dragstart(view) {
-          var _anchorHeightsCache;
-          (_anchorHeightsCache = anchorHeightsCache) === null || _anchorHeightsCache === void 0 ? void 0 : _anchorHeightsCache.setEditorView(view);
+          var _anchorRectCache;
+          (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true
           }));

package/dist/es2019/ui/consts.js

@@ -175,4 +175,11 @@ export const nodeMargins = {
     top: 0,
     bottom: 0
   }
+};
+export const DEFAULT_COLUMN_DISTRIBUTIONS = {
+  1: 100,
+  2: 50,
+  3: 33.33,
+  4: 25,
+  5: 20
 };