@atlaskit/editor-plugin-block-controls 1.13.10 → 2.0.0

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

@@ -16,11 +16,11 @@ const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaS
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
 const createDropTargetDecoration = (pos, dropTargetDec) => {
-  return Decoration.widget(pos, () => {
+  return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
-    ReactDOM.render(dropTargetDec, element);
+    ReactDOM.render(dropTargetDec(getPos), element);
     return element;
   }, {
     type: 'drop-target-decoration',
@@ -30,16 +30,13 @@ const createDropTargetDecoration = (pos, dropTargetDec) => {
 export const dropTargetDecorations = (newState, api, formatMessage, activeNode) => {
   const 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.
-  const decorationState = [];
   let prevNode;
   const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
-  newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
+  newState.doc.descendants((node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
-    let endPosDeco = null;
+    let endPos;
     if (editorExperiment('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent) {
@@ -57,39 +54,23 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
         prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
-      decorationState.push({
-        id: pos,
-        pos
-      });
       if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
-        const 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
-      });
     }
-    decs.push(createDropTargetDecoration(pos, /*#__PURE__*/createElement(DropTarget, {
+    const previousNode = prevNode; // created scoped variable
+    decs.push(createDropTargetDecoration(pos, getPos => /*#__PURE__*/createElement(DropTarget, {
       api,
-      id: editorExperiment('nested-dnd', true) ? pos : index,
-      formatMessage,
-      prevNode,
+      getPos,
+      prevNode: previousNode,
       nextNode: node,
-      parentNode: parent
+      parentNode: parent,
+      formatMessage
     })));
-    if (endPosDeco) {
-      decs.push(createDropTargetDecoration(endPosDeco.pos, /*#__PURE__*/createElement(DropTarget, {
+    if (endPos !== undefined) {
+      decs.push(createDropTargetDecoration(endPos, getPos => /*#__PURE__*/createElement(DropTarget, {
         api,
-        id: endPosDeco.id,
+        getPos,
         parentNode: parent,
         formatMessage
       })));
@@ -98,41 +79,20 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
     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.
-   *
-   */
-  const lastPos = newState.doc.content.size;
-  if (editorExperiment('nested-dnd', true)) {
-    decorationState.push({
-      id: lastPos,
-      pos: lastPos
-    });
-  } else {
-    decorationState.push({
-      id: decorationState.length + 1,
-      pos: newState.doc.nodeSize - 2
-    });
-  }
-  decs.push(Decoration.widget(newState.doc.nodeSize - 2, () => {
+  //TODO: Should this use createDropTargetDecoration?
+  decs.push(Decoration.widget(newState.doc.nodeSize - 2, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api,
-      id: editorExperiment('nested-dnd', true) ? lastPos : decorationState.length,
+      getPos,
       formatMessage
     }), element);
     return element;
   }, {
     type: 'drop-target-decoration'
   }));
-  return {
-    decs,
-    decorationState
-  };
+  return decs;
 };
 export const emptyParagraphNodeDecorations = () => {
   const anchorName = `--node-anchor-paragraph-0`;

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

@@ -82,8 +82,7 @@ function getDocChildrenCount(newState) {
 }
 const initialState = {
   decorations: DecorationSet.empty,
-  decorationState: [],
-  activeNode: null,
+  activeNode: undefined,
   isDragging: false,
   isMenuOpen: false,
   editorHeight: 0,
@@ -107,7 +106,6 @@ export const createPlugin = (api, getIntl) => {
           activeNode,
           decorations,
           isMenuOpen,
-          decorationState,
           editorHeight,
           editorWidthLeft,
           editorWidthRight,
@@ -116,11 +114,16 @@ export const createPlugin = (api, getIntl) => {
           isPMDragging,
           childCount
         } = currentState;
+
+        // Remap existing decorations when document changes
+        if (tr.docChanged) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+        }
+        const meta = tr.getMeta(key);
         const isPerformanceFix = editorExperiment('dnd-input-performance-optimisation', true, {
           exposure: true
         }) || editorExperiment('nested-dnd', true);
         let activeNodeWithNewNodeType = null;
-        const meta = tr.getMeta(key);
         const newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
         // If tables or media are being resized, we want to hide the drag handle
         const resizerMeta = tr.getMeta('is-resizer-resizing');
@@ -237,11 +240,6 @@ export const createPlugin = (api, getIntl) => {
           const decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
           decorations = decorations.add(newState.doc, [decs]);
         }
-        const 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.
-        const 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)) {
             const remainingDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
@@ -259,37 +257,16 @@ export const createPlugin = (api, getIntl) => {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
+        const 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;
-            const {
-              decs,
-              decorationState: updatedDecorationState
-            } = 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);
-            decorationState = updatedDecorationState;
+            const decs = 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, decs);
           }
         }
-
-        //Map drop target decoration positions when the document changes
-        if (shouldMapDropTargets) {
-          decorationState = decorationState.map(({
-            id,
-            pos
-          }) => {
-            return {
-              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);
-        }
         const 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;
         const hasNodeDecoration = decorations.find().some(({
           spec
@@ -300,7 +277,6 @@ export const createPlugin = (api, getIntl) => {
         const 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,
-          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/es2019/ui/drag-handle.js

@@ -99,14 +99,11 @@ const DragHandleInternal = ({
       tr
     }) => {
       var _api$analytics;
-      const startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      const startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
       tr = selectNode(tr, startPos, nodeType);
-      tr.setMeta(key, {
-        pos: startPos
-      });
       const resolvedMovingNode = tr.doc.resolve(startPos);
       const maybeNode = resolvedMovingNode.nodeAfter;
       tr.setMeta('scrollIntoView', false);
@@ -123,7 +120,7 @@ const DragHandleInternal = ({
       return tr;
     });
     view.focus();
-  }, [dragHandleSelected, api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? 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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? 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,
@@ -133,7 +130,7 @@ const DragHandleInternal = ({
     api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
       tr
     }) => {
-      const startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      const startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
@@ -144,19 +141,16 @@ const DragHandleInternal = ({
       const $startPos = tr.doc.resolve(startPos + node.nodeSize);
       const selection = new TextSelection($startPos);
       tr.setSelection(selection);
-      tr.setMeta(key, {
-        pos: startPos
-      });
       return tr;
     });
-  }, [api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, start]);
+  }, [api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
   const handleKeyDown = useCallback(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;
-        const startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+        const startPos = getPos();
         api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
         }) => {
@@ -172,7 +166,7 @@ const DragHandleInternal = ({
           tr.setSelection(selection);
           tr.setMeta(key, {
             pos: startPos
-          });
+          }); ////WHERE IS THIS USED?
           return tr;
         });
       } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
@@ -181,7 +175,7 @@ const DragHandleInternal = ({
         view.focus();
       }
     }
-  }, [getPos, start, api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
+  }, [getPos, api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -218,7 +212,7 @@ const DragHandleInternal = ({
           tr
         }) => {
           var _api$blockControls, _api$analytics3;
-          api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
+          api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
           const resolvedMovingNode = tr.doc.resolve(start);
@@ -239,7 +233,7 @@ const DragHandleInternal = ({
         view.focus();
       }
     });
-  }, [anchorName, api, nodeType, view, start]);
+  }, [anchorName, api, getPos, nodeType, start, view]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const calculatePosition = useCallback(() => {
     let parentNodeType;
@@ -340,7 +334,7 @@ const DragHandleInternal = ({
     ,
     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/es2019/ui/drop-target.js

@@ -66,7 +66,7 @@ const getDropTargetOffsetStyle = (prevNode, nextNode) => {
 };
 export const DropTarget = ({
   api,
-  id,
+  getPos,
   prevNode,
   nextNode,
   parentNode,
@@ -95,15 +95,12 @@ export const DropTarget = ({
       onDrop: () => {
         var _api$blockControls;
         const {
-          activeNode,
-          decorationState
+          activeNode
         } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
-        if (!activeNode || !decorationState) {
+        if (!activeNode) {
           return;
         }
-        const {
-          pos
-        } = decorationState.find(dec => dec.id === id) || {};
+        const pos = getPos();
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2, _api$blockControls2$c;
           const {
@@ -113,7 +110,7 @@ export const DropTarget = ({
         }
       }
     });
-  }, [id, api, formatMessage]);
+  }, [api, formatMessage, getPos]);
   const dropTargetOffsetStyle = useMemo(() => {
     /**
      * First child of a nested node.

package/dist/es2019/ui/empty-block-experiment/widget.js

@@ -25,7 +25,7 @@ const buttonStyles = xcss({
   border: 'none',
   backgroundColor: 'color.background.neutral',
   borderRadius: '50%',
-  color: 'color.text',
+  color: 'color.text.accent.gray',
   zIndex: 'card',
   outline: 'none',
   ':hover': {

package/dist/es2019/utils/getSelection.js

@@ -5,17 +5,18 @@ export const getSelection = (tr, start) => {
   const isNodeSelection = node && NodeSelection.isSelectable(node);
   const nodeSize = node ? node.nodeSize : 1;
   const $startPos = tr.doc.resolve(start);
+  const 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) {
     const $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/esm/plugin.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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';
@@ -44,15 +45,17 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           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 = 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: pos,
@@ -60,21 +63,20 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
               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 = 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: function contentComponent() {

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

@@ -20,11 +20,11 @@ var getNestedDepth = function getNestedDepth() {
   return editorExperiment('nested-dnd', true) ? 100 : 0;
 };
 var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
-  return Decoration.widget(pos, function () {
+  return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.style.clear = 'unset';
-    ReactDOM.render(dropTargetDec, element);
+    ReactDOM.render(dropTargetDec(getPos), element);
     return element;
   }, {
     type: 'drop-target-decoration',
@@ -34,16 +34,13 @@ var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTa
 export var 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 (editorExperiment('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
       if (node.isInline || !parent) {
@@ -61,82 +58,49 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         prevNode = node;
         return false; //not valid pos, so nested not valid either
       }
-      decorationState.push({
-        id: pos,
-        pos: pos
-      });
       if (parent.lastChild === node && !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__*/createElement(DropTarget, {
-      api: api,
-      id: editorExperiment('nested-dnd', true) ? pos : index,
-      formatMessage: formatMessage,
-      prevNode: prevNode,
-      nextNode: node,
-      parentNode: parent
-    })));
-    if (endPosDeco) {
-      decs.push(createDropTargetDecoration(endPosDeco.pos, /*#__PURE__*/createElement(DropTarget, {
+    var previousNode = prevNode; // created scoped variable
+    decs.push(createDropTargetDecoration(pos, function (getPos) {
+      return /*#__PURE__*/createElement(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__*/createElement(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 (editorExperiment('nested-dnd', true)) {
-    decorationState.push({
-      id: lastPos,
-      pos: lastPos
-    });
-  } else {
-    decorationState.push({
-      id: decorationState.length + 1,
-      pos: newState.doc.nodeSize - 2
-    });
-  }
-  decs.push(Decoration.widget(newState.doc.nodeSize - 2, function () {
+  //TODO: Should this use createDropTargetDecoration?
+  decs.push(Decoration.widget(newState.doc.nodeSize - 2, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api: api,
-      id: 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;
 };
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";