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

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

@@ -81,8 +81,7 @@ function getDocChildrenCount(newState) {
 }
 var initialState = {
   decorations: DecorationSet.empty,
-  decorationState: [],
-  activeNode: null,
+  activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
   editorHeight: 0,
@@ -105,7 +104,6 @@ export var 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,
@@ -113,11 +111,16 @@ export var 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 = editorExperiment('dnd-input-performance-optimisation', true, {
           exposure: true
         }) || editorExperiment('nested-dnd', true);
         var activeNodeWithNewNodeType = null;
-        var meta = tr.getMeta(key);
         var newChildCount = tr.docChanged && 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');
@@ -249,11 +252,6 @@ export var createPlugin = function createPlugin(api, getIntl) {
           var _decs = 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 = 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 (editorExperiment('nested-dnd', true)) {
             var remainingDecs = decorations.find(undefined, undefined, function (spec) {
@@ -275,38 +273,19 @@ export var 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 || isBlocksDragTargetDebug()) {
+          if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
             var _meta$activeNode6;
-            var _dropTargetDecoration = dropTargetDecorations(newState, api, formatMessage, 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 = dropTargetDecorations(newState, api, formatMessage, 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 = 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) {
@@ -315,7 +294,6 @@ export var 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/esm/ui/drag-handle.js

@@ -103,14 +103,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 = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
       tr = selectNode(tr, startPos, nodeType);
-      tr.setMeta(key, {
-        pos: startPos
-      });
       var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
       tr.setMeta('scrollIntoView', false);
@@ -127,7 +124,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,
@@ -136,7 +133,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 = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
@@ -147,19 +144,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       var $startPos = tr.doc.resolve(startPos + node.nodeSize);
       var selection = new TextSelection($startPos);
       tr.setSelection(selection);
-      tr.setMeta(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 = useCallback(function (e) {
     if (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 = 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) {
@@ -174,7 +168,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           tr.setSelection(selection);
           tr.setMeta(key, {
             pos: startPos
-          });
+          }); ////WHERE IS THIS USED?
           return tr;
         });
       } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
@@ -185,7 +179,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]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -221,7 +215,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);
@@ -242,7 +236,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 = useCallback(function () {
     var parentNodeType;
@@ -347,7 +341,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         ,
         style: positionStyles,
         onClick: handleOnClick,
-        onMouseDown: handleMouseDown,
+        onMouseDown: fg('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
       }, jsx(DragHandlerIcon, {

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

@@ -74,7 +74,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
 export var 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,
@@ -106,15 +106,11 @@ export var 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;
@@ -122,7 +118,7 @@ export var DropTarget = function DropTarget(_ref3) {
         }
       }
     });
-  }, [id, api, formatMessage]);
+  }, [api, formatMessage, getPos]);
   var dropTargetOffsetStyle = useMemo(function () {
     /**
      * First child of a nested node.

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

@@ -10,6 +10,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);
@@ -20,7 +22,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 = css(_defineProperty({}, "".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'
 }));
 
@@ -33,7 +39,11 @@ var dragHandleWithInlineNodeStyle = css(_defineProperty({}, "".concat(dragHandle
  */
 var dragHandleWithInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".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/esm/utils/getSelection.js

@@ -5,17 +5,18 @@ export var getSelection = function getSelection(tr, start) {
   var isNodeSelection = node && 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 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 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 NodeSelection($startPos);
   } else {
     // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';
+export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';

package/dist/types/pm-plugins/decorations.d.ts

@@ -3,13 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => {
-    decs: Decoration[];
-    decorationState: {
-        id: number;
-        pos: number;
-    }[];
-};
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types/types.d.ts

@@ -16,13 +16,12 @@ export type ActiveNode = {
 };
 export interface PluginState {
     decorations: DecorationSet;
-    decorationState: DecorationState;
     isDragging: boolean;
     isMenuOpen?: boolean;
     editorHeight: number;
     editorWidthLeft: number;
     editorWidthRight: number;
-    activeNode: ActiveNode | null;
+    activeNode?: ActiveNode;
     isResizerResizing: boolean;
     /**
      * @private
@@ -38,8 +37,7 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
     isMenuOpen: boolean;
-    activeNode: ActiveNode | null;
-    decorationState: DecorationState;
+    activeNode?: ActiveNode;
     isDragging: boolean;
     isPMDragging: boolean;
 } | undefined;
@@ -63,13 +61,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     commands: {
         moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
-        setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
+        setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;
-export type DecorationState = {
-    id: number;
-    pos: number;
-}[];
 export type BlockControlsMeta = {
     activeNode: ActiveNode;
     type: string;

package/dist/types/ui/drop-target.d.ts

@@ -5,10 +5,10 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
 export type DropTargetProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
-    id: number;
+    getPos: () => number | undefined;
     prevNode?: PMNode;
     nextNode?: PMNode;
     parentNode?: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
-export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;
+export declare const DropTarget: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin, DecorationState, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';
+export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -3,13 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => {
-    decs: Decoration[];
-    decorationState: {
-        id: number;
-        pos: number;
-    }[];
-};
+export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const nodeDecorations: (newState: EditorState) => Decoration[];
 export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;

package/dist/types-ts4.5/types.d.ts

@@ -16,13 +16,12 @@ export type ActiveNode = {
 };
 export interface PluginState {
     decorations: DecorationSet;
-    decorationState: DecorationState;
     isDragging: boolean;
     isMenuOpen?: boolean;
     editorHeight: number;
     editorWidthLeft: number;
     editorWidthRight: number;
-    activeNode: ActiveNode | null;
+    activeNode?: ActiveNode;
     isResizerResizing: boolean;
     /**
      * @private
@@ -38,8 +37,7 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
     isMenuOpen: boolean;
-    activeNode: ActiveNode | null;
-    decorationState: DecorationState;
+    activeNode?: ActiveNode;
     isDragging: boolean;
     isPMDragging: boolean;
 } | undefined;
@@ -63,13 +61,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     commands: {
         moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
-        setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
+        setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
     };
 }>;
-export type DecorationState = {
-    id: number;
-    pos: number;
-}[];
 export type BlockControlsMeta = {
     activeNode: ActiveNode;
     type: string;

package/dist/types-ts4.5/ui/drop-target.d.ts

@@ -5,10 +5,10 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
 export type DropTargetProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
-    id: number;
+    getPos: () => number | undefined;
     prevNode?: PMNode;
     nextNode?: PMNode;
     parentNode?: PMNode;
     formatMessage?: IntlShape['formatMessage'];
 };
-export declare const DropTarget: ({ api, id, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;
+export declare const DropTarget: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.13.11",
+	"version": "2.0.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^89.1.0",
+		"@atlaskit/editor-common": "^89.2.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.1.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -128,6 +128,9 @@
 		},
 		"platform_editor_element_drag_and_drop_debug": {
 			"type": "boolean"
+		},
+		"platform_editor_element_drag_and_drop_ed_24885": {
+			"type": "boolean"
 		}
 	}
 }