@atlaskit/editor-plugin-block-controls 2.5.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.6.1
+
+### Patch Changes
+
+- [#152510](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152510)
+  [`dcf9edde7ac7b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dcf9edde7ac7b) -
+  bump adf-schema to 42.0.1
+- Updated dependencies
+
+## 2.6.0
+
+### Minor Changes
+
+- [#152056](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152056)
+  [`624da05a0cdab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/624da05a0cdab) -
+  ED-25015 increase drop target to take up empty container
+- [#152099](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152099)
+  [`e7d3d5459e447`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e7d3d5459e447) -
+  Update apply to be more performant
+
+### Patch Changes
+
+- [#151127](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151127)
+  [`be27d2b45f725`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be27d2b45f725) -
+  Add `nested-dnd` experiment check on a11y support for nested node
+- [#151127](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151127)
+  [`7e9a2af475546`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7e9a2af475546) -
+  ED-25228 Use same selector for setting marginTop for nested-dnd on/off
+- Updated dependencies
+
 ## 2.5.0
 
 ### Minor Changes

package/dist/cjs/commands/move-node.js

@@ -70,7 +70,7 @@ var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayo
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
-    if (selection.$from.depth > 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+    if (selection.$from.depth > 0 && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
       currentNodePos = (0, _utils4.getNestedNodePosition)(state);
     }
   }
@@ -79,7 +79,8 @@ var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayo
 var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var isParentNodeOfTypeLayout;
-    if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+    var shouldEnableNestedDndA11y = (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y');
+    if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     }
     var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
@@ -88,7 +89,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       var $pos = state.doc.resolve(currentNodePos);
       var moveToPos = -1;
       var nodeIndex = $pos.index();
-      if (direction === _consts.DIRECTION.LEFT && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+      if (direction === _consts.DIRECTION.LEFT && shouldEnableNestedDndA11y) {
         if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
           return false;
         }
@@ -98,13 +99,13 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         var grandParent = $pos.node($pos.depth - 1);
         var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
         moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
-      } else if (direction === _consts.DIRECTION.RIGHT && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+      } else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
         if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
           return false;
         }
         moveToPos = $pos.after($pos.depth) + 1;
       } else if (direction === _consts.DIRECTION.UP) {
-        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
+        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
         if (nodeBefore) {
           moveToPos = currentNodePos - nodeBefore.nodeSize;
         }
@@ -120,7 +121,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
 
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
-      var shouldMoveNode = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      var shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
       if (shouldMoveNode) {
         var _api$core;
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {

package/dist/cjs/commands/show-drag-handle.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.showDragHandleAtSelection = void 0;
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../utils");
 var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
   return function (state, _, view) {
     var $from = state.selection.$from;
     var shouldFocusParentNode;
-    if ($from.depth > 1 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+    if ($from.depth > 1 && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
       var _activeNode$handleOpt, _view$domAtPos;
       var _ref = _main.key.getState(state) || {},
         activeNode = _ref.activeNode;

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

@@ -4,14 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nodeDecorations = exports.getNodeAnchor = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = exports.createDropTargetDecoration = void 0;
+exports.nodeDecorations = exports.getNodeAnchor = exports.findNodeDecs = exports.findHandleDec = exports.findDropTargetDecs = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = exports.createDropTargetDecoration = exports.TYPE_NODE_DEC = exports.TYPE_HANDLE_DEC = exports.TYPE_DROP_TARGET_DEC = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
@@ -29,6 +28,9 @@ var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'lis
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
+var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
+var TYPE_NODE_DEC = exports.TYPE_NODE_DEC = 'node-decoration';
 var getNestedDepth = function getNestedDepth() {
   return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
 };
@@ -79,6 +81,54 @@ var shouldDescend = function shouldDescend(node) {
   }
   return true;
 };
+
+/**
+ * Find drop target decorations in the pos range between from and to
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDecs(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_DROP_TARGET_DEC;
+  });
+};
+var findHandleDec = exports.findHandleDec = function findHandleDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_HANDLE_DEC;
+  });
+};
+
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+var findNodeDecs = exports.findNodeDecs = function findNodeDecs(decorations, from, to) {
+  var newfrom = from;
+  var newTo = to;
+
+  // make it non-inclusive
+  if (newfrom !== undefined) {
+    newfrom++;
+  }
+
+  // make it non-inclusive
+  if (newTo !== undefined) {
+    newTo--;
+  }
+
+  // return empty array if range reversed
+  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
+    return new Array();
+  }
+  return decorations.find(newfrom, newTo, function (spec) {
+    return spec.type === TYPE_NODE_DEC;
+  });
+};
 var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorHeightsCache) {
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
@@ -103,13 +153,16 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     }
     return element;
   }, {
-    type: 'drop-target-decoration',
+    type: TYPE_DROP_TARGET_DEC,
     side: side
   });
 };
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache) {
-  var decs = [];
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache, from, to) {
   unmountDecorations('data-blocks-drop-target-container');
+  var decs = [];
+  var POS_END_OF_DOC = newState.doc.nodeSize - 2;
+  var docFrom = from === undefined || from < 0 ? 0 : from;
+  var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
@@ -127,7 +180,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     popNodeStack(depth);
     prevNodeStack.push(node);
   };
-  newState.doc.descendants(function (node, pos, parent, index) {
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
     var endPos;
@@ -165,19 +218,27 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       }
     }
     var previousNode = (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
+
+    // only table and layout need to render full height drop target
+    var isInSupportedContainer = (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
+
+    // container with only an empty paragrah
+    var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (parent === null || parent === void 0 ? void 0 : parent.childCount) === 1 && (0, _utils.isEmptyParagraph)(node) && (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2');
     decs.push(createDropTargetDecoration(pos, {
       api: api,
       prevNode: previousNode,
       nextNode: node,
       parentNode: parent || undefined,
-      formatMessage: formatMessage
+      formatMessage: formatMessage,
+      dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
     }, -1, anchorHeightsCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,
         prevNode: (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? node : undefined,
         parentNode: parent || undefined,
-        formatMessage: formatMessage
+        formatMessage: formatMessage,
+        dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
       }, -1, anchorHeightsCache));
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
@@ -187,12 +248,14 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     }
     return depth < getNestedDepth() && shouldDescend(node);
   });
-  decs.push(createDropTargetDecoration(newState.doc.nodeSize - 2, {
-    api: api,
-    formatMessage: formatMessage,
-    prevNode: newState.doc.lastChild || undefined,
-    parentNode: newState.doc
-  }, undefined, anchorHeightsCache));
+  if (docTo === POS_END_OF_DOC) {
+    decs.push(createDropTargetDecoration(POS_END_OF_DOC, {
+      api: api,
+      formatMessage: formatMessage,
+      prevNode: newState.doc.lastChild || undefined,
+      parentNode: newState.doc
+    }, undefined, anchorHeightsCache));
+  }
   return decs;
 };
 var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
@@ -201,7 +264,7 @@ var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = func
   return _view.Decoration.node(0, 2, (0, _defineProperty2.default)({
     style: style
   }, 'data-drag-handler-anchor-name', anchorName), {
-    type: 'node-decoration'
+    type: TYPE_NODE_DEC
   });
 };
 var ObjHash = /*#__PURE__*/function () {
@@ -230,19 +293,17 @@ var shouldIgnoreNode = function shouldIgnoreNode(node) {
   }
   return IGNORE_NODES.includes(node.type.name);
 };
-var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState) {
+var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
-  newState.doc.descendants(function (node, pos, _parent, index) {
+  var docFrom = from === undefined || from < 0 ? 0 : from;
+  var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
     var _Decoration$node2;
     var depth = 0;
     var anchorName;
     var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
-    if ((0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
-      exposure: true
-    }) || (0, _experiments.editorExperiment)('nested-dnd', true)) {
-      var handleId = ObjHash.getForNode(node);
-      anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
-    }
+    var handleId = ObjHash.getForNode(node);
+    anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       var _anchorName;
       // Doesn't descend into a node
@@ -261,7 +322,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
     }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
-      type: 'node-decoration',
+      type: TYPE_NODE_DEC,
       anchorName: anchorName,
       nodeType: node.type.name
     }));
@@ -269,7 +330,8 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
   });
   return decs;
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
+  unmountDecorations('data-blocks-drag-handle-container');
   var unbind;
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('span');
@@ -283,7 +345,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       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 not long working.
+       * However, the tooltip for nested drag handle is no long working.
        */
       if (!isTopLevelNode) {
         // This will also hide the tooltip.
@@ -295,26 +357,25 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
         });
       }
     }
-    unmountDecorations('data-blocks-drag-handle-container');
 
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
-      value: getIntl()
-    }, /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
       view: view,
       api: api,
+      formatMessage: formatMessage,
       getPos: getPos,
       anchorName: anchorName,
       nodeType: nodeType,
       handleOptions: handleOptions,
       isTopLevelNode: isTopLevelNode
-    })), element);
+    }), element);
     return element;
   }, {
     side: -1,
-    id: 'drag-handle',
+    type: TYPE_HANDLE_DEC,
+    testid: "".concat(TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
     destroy: function destroy() {
       if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
         unbind && unbind();

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

@@ -7,6 +7,7 @@ exports.boundKeydownHandler = void 0;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("../commands/move-node");
 var _showDragHandle = require("../commands/show-drag-handle");
 var _consts = require("../consts");
@@ -20,8 +21,10 @@ function keymapList(api, formatMessage) {
     }, keymapList);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
-    (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') && (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
-    (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') && (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
+    if ((0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+      (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
+      (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
+    }
   }
   return keymapList;
 }