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

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.7.0
+
+### Minor Changes
+
+- [#151244](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151244)
+  [`10ba5860e515c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10ba5860e515c) -
+  ED-25281 Implement DnD API for Advanced Layout
+
+### Patch Changes
+
+- [#153270](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153270)
+  [`311428de27cbc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/311428de27cbc) -
+  [ux] [ED-25068] Implement inline drop zone and drop target (edge case excluded) behind FG
+
+## 2.6.3
+
+### Patch Changes
+
+- [#153087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153087)
+  [`a29ea6551ed67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a29ea6551ed67) -
+  ED-24902: Change display from inline to block to fix focus issues with drag handle
+- [#152414](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152414)
+  [`893c9f74cb700`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/893c9f74cb700) -
+  Use getPos instead of pos when rendering drag handle
+- Updated dependencies
+
 ## 2.6.2
 
 ### Patch Changes

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveToLayout = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _consts = require("../ui/consts");
+var createNewLayout = function createNewLayout(schema, layoutContents) {
+  // TODO update with constant
+  if (layoutContents.length === 0 || layoutContents.length > 5) {
+    return null;
+  }
+  var width = _consts.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, _model.Fragment.fromArray(layoutContents.map(function (layoutContent) {
+      return layoutColumn.createChecked({
+        width: width
+      }, layoutContent);
+    })));
+    return layoutSectionNode;
+  } catch (error) {
+    // TODO analytics
+  }
+  return null;
+};
+var moveToLayout = exports.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/cjs/consts.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DIRECTION = void 0;
+exports.MAX_LAYOUT_COLUMN_SUPPORTED = exports.DIRECTION = void 0;
 var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
   DIRECTION["LEFT"] = "left";
   DIRECTION["RIGHT"] = "right";
   return DIRECTION;
-}({});
+}({});
+var MAX_LAYOUT_COLUMN_SUPPORTED = exports.MAX_LAYOUT_COLUMN_SUPPORTED = 3;

package/dist/cjs/plugin.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./commands/move-node");
+var _moveToLayout = require("./commands/move-to-layout");
 var _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
@@ -38,6 +39,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
     },
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),
+      moveToLayout: (0, _moveToLayout.moveToLayout)(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref4) {
           var tr = _ref4.tr;
@@ -52,20 +54,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return tr;
         };
       },
-      hideDragHandle: function hideDragHandle() {
+      setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
         return function (_ref5) {
           var tr = _ref5.tr;
-          if ((0, _platformFeatureFlags.fg)('confluence_frontend_page_title_enter_improvements')) {
-            tr.setMeta(_main.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/cjs/pm-plugins/decorations.js

@@ -129,7 +129,7 @@ var findNodeDecs = exports.findNodeDecs = function findNodeDecs(decorations, fro
     return spec.type === TYPE_NODE_DEC;
   });
 };
-var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorHeightsCache) {
+var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache) {
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
@@ -144,7 +144,7 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
-        anchorHeightsCache: anchorHeightsCache
+        anchorRectCache: anchorRectCache
       })), element);
     } else {
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
@@ -157,7 +157,7 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     side: side
   });
 };
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache, from, to) {
+var dropTargetDecorations = exports.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;
@@ -166,7 +166,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   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;
@@ -231,7 +231,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       parentNode: parent || undefined,
       formatMessage: formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
-    }, -1, anchorHeightsCache));
+    }, -1, anchorRectCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,
@@ -239,7 +239,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         parentNode: parent || undefined,
         formatMessage: formatMessage,
         dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
-      }, -1, anchorHeightsCache));
+      }, -1, anchorRectCache));
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
       pushNodeStack(node, depth);
@@ -254,7 +254,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       formatMessage: formatMessage,
       prevNode: newState.doc.lastChild || undefined,
       parentNode: newState.doc
-    }, undefined, anchorHeightsCache));
+    }, undefined, anchorRectCache));
   }
   return decs;
 };
@@ -336,18 +336,22 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   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
-    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 = (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 $pos = view.state.doc.resolve(pos);
-      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      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 (!isTopLevelNode) {
+      if (newPos === undefined || !isTopLevelNode) {
         // This will also hide the tooltip.
         unbind = (0, _bindEventListener.bind)(element, {
           type: 'mouseover',

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

@@ -13,11 +13,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'));
-};
 var handleMouseOver = exports.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()) || {},
@@ -36,11 +31,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
     var _rootElement$parentEl;
-    if (isDocFirstChildEmptyLine(rootElement) && (0, _platformFeatureFlags.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 ((0, _experiments.editorExperiment)('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
@@ -89,8 +79,8 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
     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));
     }
   }
 };

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

@@ -95,9 +95,8 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache) {
+var newApply = exports.newApply = function 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;
-  var isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     editorHeight = currentState.editorHeight,
@@ -177,7 +176,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var 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
-  var shouldRemoveHandle = latestActiveNode && ((meta === null || meta === void 0 ? void 0 : meta.hideDragHandle) && isTitleEnterImprovementEnabled || isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
+  var shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
   if (shouldRemoveHandle) {
     var _activeNode3, _activeNode4;
     var oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
@@ -202,7 +201,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-      var decs = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorHeightsCache);
+      var decs = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
@@ -227,10 +226,9 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache) {
+var oldApply = exports.oldApply = function 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;
-  var isNestedEnabled = flags.isNestedEnabled,
-    isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
+  var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isMenuOpen = currentState.isMenuOpen,
@@ -265,7 +263,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
   // 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) {
     var oldHandle = decorations.find(undefined, undefined, function (spec) {
       return spec.type === 'drag-handle';
     });
@@ -391,7 +389,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
       var _meta$activeNode7;
-      var _decs2 = (0, _decorations.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);
+      var _decs2 = (0, _decorations.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, _decs2);
     }
   }
@@ -429,18 +427,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
   var isOptimisedApply = isNestedEnabled && (0, _experiments.editorExperiment)('optimised-apply-dnd', true, {
     exposure: true
   });
-  var isTitleEnterImprovementEnabled = (0, _platformFeatureFlags.fg)('confluence_frontend_page_title_enter_improvements');
   var flags = {
     isNestedEnabled: isNestedEnabled,
-    isOptimisedApply: isOptimisedApply,
-    isTitleEnterImprovementEnabled: isTitleEnterImprovementEnabled
+    isOptimisedApply: isOptimisedApply
   };
   if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
-  var anchorHeightsCache;
+  var anchorRectCache;
   if (!(0, _anchorUtils.isAnchorSupported)() && (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
-    anchorHeightsCache = new _anchorUtils.AnchorHeightsCache();
+    anchorRectCache = new _anchorUtils.AnchorRectCache();
   }
   return new _safePlugin.SafePlugin({
     key: key,
@@ -450,9 +446,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
       },
       apply: function 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: {
@@ -502,8 +498,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           return false;
         },
         dragstart: function dragstart(view) {
-          var _anchorHeightsCache;
-          (_anchorHeightsCache = anchorHeightsCache) === null || _anchorHeightsCache === void 0 || _anchorHeightsCache.setEditorView(view);
+          var _anchorRectCache;
+          (_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 || _anchorRectCache.setEditorView(view);
           view.dispatch(view.state.tr.setMeta(key, {
             isPMDragging: true
           }));

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.topPositionAdjustment = exports.spaceLookupMap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _dropTargetMarginMap;
@@ -166,4 +166,11 @@ var nodeMargins = exports.nodeMargins = {
     top: 0,
     bottom: 0
   }
+};
+var DEFAULT_COLUMN_DISTRIBUTIONS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = {
+  1: 100,
+  2: 50,
+  3: 33.33,
+  4: 25,
+  5: 20
 };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = exports.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = exports.DropTargetV2 = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -17,7 +18,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorations = require("../pm-plugins/decorations");
 var _anchorUtils = require("../utils/anchor-utils");
 var _dragTargetDebug = require("../utils/drag-target-debug");
+var _inlineDropTarget = require("../utils/inline-drop-target");
 var _consts = require("./consts");
+var _inlineDropTarget2 = require("./inline-drop-target");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -80,7 +83,7 @@ var HoverZone = function HoverZone(_ref) {
     node = _ref.node,
     parent = _ref.parent,
     editorWidth = _ref.editorWidth,
-    anchorHeightsCache = _ref.anchorHeightsCache,
+    anchorRectCache = _ref.anchorRectCache,
     position = _ref.position,
     isNestedDropTarget = _ref.isNestedDropTarget,
     dropTargetStyle = _ref.dropTargetStyle;
@@ -99,7 +102,7 @@ var HoverZone = function HoverZone(_ref) {
     var anchorName = node ? (0, _decorations.getNodeAnchor)(node) : '';
     var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
     var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
-    var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorHeightsCache === null || anchorHeightsCache === void 0 ? void 0 : anchorHeightsCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
+    var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
     var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
     return (0, _react2.css)({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -109,7 +112,7 @@ var HoverZone = function HoverZone(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
       maxWidth: "".concat(editorWidth || 0, "px")
     });
-  }, [anchorHeightsCache, editorWidth, node, position]);
+  }, [anchorRectCache, editorWidth, node, position]);
   var isFullHeight = (0, _react.useMemo)(function () {
     return dropTargetStyle === 'fullHeight';
   }, [dropTargetStyle]);
@@ -129,16 +132,16 @@ var HoverZone = function HoverZone(_ref) {
     hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
-var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
+var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(props) {
   var _dynamicStyle;
-  var api = _ref2.api,
-    getPos = _ref2.getPos,
-    prevNode = _ref2.prevNode,
-    nextNode = _ref2.nextNode,
-    parentNode = _ref2.parentNode,
-    formatMessage = _ref2.formatMessage,
-    anchorHeightsCache = _ref2.anchorHeightsCache,
-    dropTargetStyle = _ref2.dropTargetStyle;
+  var api = props.api,
+    getPos = props.getPos,
+    prevNode = props.prevNode,
+    nextNode = props.nextNode,
+    parentNode = props.parentNode,
+    formatMessage = props.formatMessage,
+    anchorRectCache = props.anchorRectCache,
+    dropTargetStyle = props.dropTargetStyle;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -148,8 +151,8 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
   var isNestedDropTarget = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) !== 'doc';
   var onDrop = function onDrop() {
     var _api$blockControls;
-    var _ref3 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-      activeNode = _ref3.activeNode;
+    var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
+      activeNode = _ref2.activeNode;
     if (!activeNode) {
       return;
     }
@@ -174,7 +177,7 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
     onDrop: onDrop,
     node: prevNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorHeightsCache: anchorHeightsCache,
+    anchorRectCache: anchorRectCache,
     position: "upper",
     isNestedDropTarget: isNestedDropTarget
   }), (0, _react2.jsx)("div", {
@@ -202,9 +205,13 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
     node: nextNode,
     parent: parentNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    anchorHeightsCache: anchorHeightsCache,
+    anchorRectCache: anchorRectCache,
     position: "lower",
     isNestedDropTarget: isNestedDropTarget,
     dropTargetStyle: dropTargetStyle
-  }));
+  }), (0, _inlineDropTarget.shouldAllowInlineDropTarget)(isNestedDropTarget, nextNode) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
+    position: "left"
+  })), (0, _react2.jsx)(_inlineDropTarget2.InlineDropTarget, (0, _extends2.default)({}, props, {
+    position: "right"
+  }))));
 };