@atlaskit/editor-plugin-block-controls 1.13.11 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.0.1
+
+### Patch Changes
+
+- [#141656](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141656)
+  [`3d7bc0bff5bea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d7bc0bff5bea) -
+  [ux] ED-24969 Add CSS override to prevent drag handle overlap with empty line prompt button when
+  under an expanded code block
+
+## 2.0.0
+
+### Major Changes
+
+- [#140703](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140703)
+  [`a0d838419dd0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0d838419dd0d) -
+  [ux] Refactor decoration and plugin state for reliable collab drag and drop. DecorationState has
+  been removed from the plugin state. This is now handled internally.
+
 ## 1.13.11
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.blockControlsPlugin = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 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 _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
@@ -51,15 +52,17 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return tr;
         };
       },
-      setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
+      setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
         return function (_ref5) {
           var tr = _ref5.tr;
+          var pos = getPos();
           if (pos === undefined) {
             return tr;
           }
-          var newTr = tr;
-          newTr = (0, _utils.selectNode)(newTr, pos, nodeType);
-          newTr.setMeta(_main.key, {
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885')) {
+            tr = (0, _utils.selectNode)(tr, pos, nodeType);
+          }
+          tr.setMeta(_main.key, {
             isDragging: true,
             activeNode: {
               pos: pos,
@@ -67,21 +70,20 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
               nodeType: nodeType
             }
           });
-          return newTr;
+          return tr;
         };
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
+      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4;
       if (!editorState) {
         return undefined;
       }
       return {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
-        activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
-        decorationState: (_key$getState$decorat = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
-        isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-        isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
+        activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+        isDragging: (_key$getState$isDragg = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
       };
     },
     contentComponent: function contentComponent() {

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

@@ -27,11 +27,11 @@ var getNestedDepth = function getNestedDepth() {
   return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
 };
 var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
-  return _view.Decoration.widget(pos, function () {
+  return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
-    _reactDom.default.render(dropTargetDec, element);
+    _reactDom.default.render(dropTargetDec(getPos), element);
     return element;
   }, {
     type: 'drop-target-decoration',
@@ -41,16 +41,13 @@ var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTa
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
-  // Decoration state is used to keep track of the position of the drop targets
-  // and allows us to easily map the updated position in the plugin apply method.
-  var decorationState = [];
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
-  newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
+  newState.doc.descendants(function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
-    var endPosDeco = null;
+    var endPos;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent) {
@@ -68,82 +65,49 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
-      decorationState.push({
-        id: pos,
-        pos: pos
-      });
       if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
-        var endpos = pos + node.nodeSize;
-        endPosDeco = {
-          id: endpos,
-          pos: endpos
-        };
-        decorationState.push({
-          id: endpos,
-          pos: endpos
-        });
+        endPos = pos + node.nodeSize;
       }
-    } else {
-      decorationState.push({
-        id: index,
-        pos: pos
-      });
     }
-    decs.push(createDropTargetDecoration(pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
-      api: api,
-      id: (0, _experiments.editorExperiment)('nested-dnd', true) ? pos : index,
-      formatMessage: formatMessage,
-      prevNode: prevNode,
-      nextNode: node,
-      parentNode: parent
-    })));
-    if (endPosDeco) {
-      decs.push(createDropTargetDecoration(endPosDeco.pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+    var previousNode = prevNode; // created scoped variable
+    decs.push(createDropTargetDecoration(pos, function (getPos) {
+      return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
         api: api,
-        id: endPosDeco.id,
+        getPos: getPos,
+        prevNode: previousNode,
+        nextNode: node,
         parentNode: parent,
         formatMessage: formatMessage
-      })));
+      });
+    }));
+    if (endPos !== undefined) {
+      decs.push(createDropTargetDecoration(endPos, function (getPos) {
+        return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+          api: api,
+          getPos: getPos,
+          parentNode: parent,
+          formatMessage: formatMessage
+        });
+      }));
     }
     prevNode = node;
     return depth < getNestedDepth();
   });
 
-  /**
-   * We are adding a drop target at the end of the document because by default we
-   * draw all drop targets at the top of every node. It's better to draw the drop targets
-   * at the top of each node because that way we only need to know the start position of the
-   * node and not its size.
-   *
-   */
-  var lastPos = newState.doc.content.size;
-  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-    decorationState.push({
-      id: lastPos,
-      pos: lastPos
-    });
-  } else {
-    decorationState.push({
-      id: decorationState.length + 1,
-      pos: newState.doc.nodeSize - 2
-    });
-  }
-  decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function () {
+  //TODO: Should this use createDropTargetDecoration?
+  decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
-      id: (0, _experiments.editorExperiment)('nested-dnd', true) ? lastPos : decorationState.length,
+      getPos: getPos,
       formatMessage: formatMessage
     }), element);
     return element;
   }, {
     type: 'drop-target-decoration'
   }));
-  return {
-    decs: decs,
-    decorationState: decorationState
-  };
+  return decs;
 };
 var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";

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

@@ -88,8 +88,7 @@ function getDocChildrenCount(newState) {
 }
 var initialState = {
   decorations: _view.DecorationSet.empty,
-  decorationState: [],
-  activeNode: null,
+  activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
   editorHeight: 0,
@@ -112,7 +111,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         var activeNode = currentState.activeNode,
           decorations = currentState.decorations,
           isMenuOpen = currentState.isMenuOpen,
-          decorationState = currentState.decorationState,
           editorHeight = currentState.editorHeight,
           editorWidthLeft = currentState.editorWidthLeft,
           editorWidthRight = currentState.editorWidthRight,
@@ -120,11 +118,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           isDragging = currentState.isDragging,
           isPMDragging = currentState.isPMDragging,
           childCount = currentState.childCount;
+
+        // Remap existing decorations when document changes
+        if (tr.docChanged) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+        }
+        var meta = tr.getMeta(key);
         var isPerformanceFix = (0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
           exposure: true
         }) || (0, _experiments.editorExperiment)('nested-dnd', true);
         var activeNodeWithNewNodeType = null;
-        var meta = tr.getMeta(key);
         var newChildCount = tr.docChanged && (0, _experiments.editorExperiment)('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
@@ -256,11 +259,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           var _decs = (0, _decorations.dragHandleDecoration)(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
           decorations = decorations.add(newState.doc, [_decs]);
         }
-        var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
-
-        // During dragging if the the document is updated by remote user, or other processes
-        // and update drop target is not required, We remap the drop target.
-        var shouldMapDropTargets = (0, _experiments.editorExperiment)('nested-dnd', true) ? !shouldUpdateDropTargets && tr.docChanged && isDragging && !(meta !== null && meta !== void 0 && meta.nodeMoved) : !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
           if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
             var remainingDecs = decorations.find(undefined, undefined, function (spec) {
@@ -282,38 +280,19 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
+        var shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
         if (api) {
           // Add drop targets when node is being dragged
           // if the transaction is only for analytics and user is dragging, continue to draw drop targets
-          if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
+          if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
             var _meta$activeNode6;
-            var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, (0, _experiments.editorExperiment)('nested-dnd', true) ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode),
-              _decs2 = _dropTargetDecoration.decs,
-              updatedDecorationState = _dropTargetDecoration.decorationState;
-            decorationState = updatedDecorationState;
+            var _decs2 = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, (0, _experiments.editorExperiment)('nested-dnd', true) ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode);
             decorations = decorations.add(newState.doc, _decs2);
           }
         }
-
-        //Map drop target decoration positions when the document changes
-        if (shouldMapDropTargets) {
-          decorationState = decorationState.map(function (_ref11) {
-            var id = _ref11.id,
-              pos = _ref11.pos;
-            return {
-              id: id,
-              pos: tr.mapping.map(pos)
-            };
-          });
-        }
-
-        // Map decorations if document changes and node decorations do not need to be redrawn
-        if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
-          decorations = decorations.map(tr.mapping, tr.doc);
-        }
         var isEmptyDoc = (0, _experiments.editorExperiment)('nested-dnd', true) ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        var hasNodeDecoration = decorations.find().some(function (_ref12) {
-          var spec = _ref12.spec;
+        var hasNodeDecoration = decorations.find().some(function (_ref11) {
+          var spec = _ref11.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {
@@ -322,7 +301,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         var newActiveNode = isEmptyDoc || isHandleMissing ? null : (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos;
         return {
           decorations: decorations,
-          decorationState: decorationState,
           activeNode: newActiveNode,
           isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,

package/dist/cjs/ui/drag-handle.js

@@ -112,14 +112,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var _api$analytics;
       var tr = _ref2.tr;
-      var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
       tr = (0, _utils.selectNode)(tr, startPos, nodeType);
-      tr.setMeta(_main.key, {
-        pos: startPos
-      });
       var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
       tr.setMeta('scrollIntoView', false);
@@ -136,7 +133,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       return tr;
     });
     view.focus();
-  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
+  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, nodeType]);
 
   // TODO - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -145,7 +142,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     var _api$core3;
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
-      var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
@@ -156,19 +153,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       var $startPos = tr.doc.resolve(startPos + node.nodeSize);
       var selection = new _state.TextSelection($startPos);
       tr.setSelection(selection);
-      tr.setMeta(_main.key, {
-        pos: startPos
-      });
       return tr;
     });
-  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, start]);
+  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
 
       if (!e.repeat && e.key === ' ') {
         var _api$core5;
-        var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+        var startPos = getPos();
         api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
           var tr = _ref4.tr;
           if (startPos === undefined) {
@@ -183,7 +177,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           tr.setSelection(selection);
           tr.setMeta(_main.key, {
             pos: startPos
-          });
+          }); ////WHERE IS THIS USED?
           return tr;
         });
       } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
@@ -194,7 +188,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         view.focus();
       }
     }
-  }, [getPos, start, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
+  }, [getPos, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -230,7 +224,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref7) {
           var _api$blockControls, _api$analytics3;
           var tr = _ref7.tr;
-          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           var resolvedMovingNode = tr.doc.resolve(start);
@@ -251,7 +245,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         view.focus();
       }
     });
-  }, [anchorName, api, nodeType, view, start]);
+  }, [anchorName, api, getPos, nodeType, start, view]);
   var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var calculatePosition = (0, _react.useCallback)(function () {
     var parentNodeType;
@@ -356,7 +350,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         ,
         style: positionStyles,
         onClick: handleOnClick,
-        onMouseDown: handleMouseDown,
+        onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
       }, (0, _react2.jsx)(_dragHandler.default, {

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

@@ -82,7 +82,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var _dynamicStyle;
   var api = _ref3.api,
-    id = _ref3.id,
+    getPos = _ref3.getPos,
     prevNode = _ref3.prevNode,
     nextNode = _ref3.nextNode,
     parentNode = _ref3.parentNode,
@@ -114,15 +114,11 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
       onDrop: function onDrop() {
         var _api$blockControls;
         var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
-          activeNode = _ref4.activeNode,
-          decorationState = _ref4.decorationState;
-        if (!activeNode || !decorationState) {
+          activeNode = _ref4.activeNode;
+        if (!activeNode) {
           return;
         }
-        var _ref5 = decorationState.find(function (dec) {
-            return dec.id === id;
-          }) || {},
-          pos = _ref5.pos;
+        var pos = getPos();
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2;
           var start = activeNode.pos;
@@ -130,7 +126,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
         }
       }
     });
-  }, [id, api, formatMessage]);
+  }, [api, formatMessage, getPos]);
   var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
     /**
      * First child of a nested node.

package/dist/cjs/ui/empty-block-experiment/global-styles.js

@@ -18,6 +18,8 @@ var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experimen
 var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
 var formattingElement = 'div.fabric-editor-block-mark';
 var markFragment = 'div[data-mark-type="fragment"]';
+var breakoutMark = 'div.fabric-editor-breakout-mark';
+var breakoutMarkDom = 'div.fabric-editor-breakout-mark-dom';
 var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
 // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
 var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
@@ -28,7 +30,11 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 // Override is consistent with how the drag handle is hidden when the block contains a placeholder
 var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, "),\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, "),") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
 // is nested in the previous div. These selectors are to handle those cases.
-"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child"), {
+// -------------------
+// Empty block in new paragraph after indent
+"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after table
+"".concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after breakout mark
+"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child,\n\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child"), {
   display: 'none !important'
 }));
 
@@ -41,7 +47,11 @@ var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default
  */
 var dragHandleWithInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ",\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector, ",") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
 // is nested in the previous div. These selectors are to handle those cases.
-"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
+// -------------------
+// Empty block in new paragraph after indent
+"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after table
+"".concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after breakout mark
+"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
   transform: 'scale(0)'
 }));
 var getDragHandleOverrides = function getDragHandleOverrides() {

package/dist/cjs/utils/getSelection.js

@@ -11,17 +11,18 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var $startPos = tr.doc.resolve(start);
+  var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
 
   // decisionList node is not selectable, but we want to select the whole node not just text
-  if (isNodeSelection || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
+  if (isNodeSelection || nodeName === 'decisionList') {
     return new _state.NodeSelection($startPos);
-  } else if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && node.childCount === 1) {
+  } else if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
     var $mediaStartPos = tr.doc.resolve(start + 1);
     return new _state.NodeSelection($mediaStartPos);
   } else if (
   // Even though mediaGroup is not selectable,
   // we need a quick way to make all child media nodes appear as selected without the need for a custom selection
-  (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup') {
+  nodeName === 'mediaGroup') {
     return new _state.NodeSelection($startPos);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes

package/dist/es2019/plugin.js

@@ -1,4 +1,5 @@
 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 { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
@@ -40,15 +41,17 @@ export const blockControlsPlugin = ({
       });
       return tr;
     },
-    setNodeDragged: (pos, anchorName, nodeType) => ({
+    setNodeDragged: (getPos, anchorName, nodeType) => ({
       tr
     }) => {
+      const pos = getPos();
       if (pos === undefined) {
         return tr;
       }
-      let newTr = tr;
-      newTr = selectNode(newTr, pos, nodeType);
-      newTr.setMeta(key, {
+      if (!fg('platform_editor_element_drag_and_drop_ed_24885')) {
+        tr = selectNode(tr, pos, nodeType);
+      }
+      tr.setMeta(key, {
         isDragging: true,
         activeNode: {
           pos,
@@ -56,20 +59,19 @@ export const blockControlsPlugin = ({
           nodeType
         }
       });
-      return newTr;
+      return tr;
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
+    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4;
     if (!editorState) {
       return undefined;
     }
     return {
       isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
-      activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
-      decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
-      isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-      isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
+      activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+      isDragging: (_key$getState$isDragg = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+      isPMDragging: (_key$getState$isPMDra = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
     };
   },
   contentComponent() {