@atlaskit/editor-plugin-block-controls 1.5.17 → 1.5.19

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

@@ -11,6 +11,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
+import { boundKeydownHandler } from './keymap';
 export const key = new PluginKey('blockControls');
 const destroyFn = api => {
   const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -86,7 +87,7 @@ export const createPlugin = (api, getIntl) => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -119,9 +120,15 @@ export const createPlugin = (api, getIntl) => {
         const resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
         const nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
+        let shouldRemoveHandle = true;
+        if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
+          shouldRemoveHandle = !tr.getMeta('isRemote');
+        }
 
-        // During resize, remove the drag handle widget
-        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
+        // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
+        // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
+        // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
+        if (isResizerResizing || nodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
           const oldHandle = decorations.find().filter(({
             spec
           }) => spec.id === 'drag-handle');
@@ -154,7 +161,14 @@ export const createPlugin = (api, getIntl) => {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          decorations = DecorationSet.create(newState.doc, []);
+          if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
+            const oldNodeDecs = decorations.find().filter(({
+              spec
+            }) => spec.type !== 'drop-target-decoration');
+            decorations = decorations.remove(oldNodeDecs);
+          } else {
+            decorations = DecorationSet.create(newState.doc, []);
+          }
           const nodeDecs = nodeDecorations(newState);
           if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, [...nodeDecs]);
@@ -171,7 +185,9 @@ export const createPlugin = (api, getIntl) => {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-            if (mappedPosisiton === prevMappedPos + 1) {
+
+            const shouldUpdateNestedPosition = fg('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
+            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             const newActiveNode = tr.doc.nodeAt(mappedPosisiton);
@@ -186,18 +202,18 @@ export const createPlugin = (api, getIntl) => {
                 anchorName
               };
             }
-            const draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api, getIntl);
+            const draghandleDec = dragHandleDecoration(api, getIntl, activeNode.pos, anchorName, nodeType);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
-        if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
+        if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
           const oldHandle = decorations.find().filter(({
             spec
           }) => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
-          const decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
+          const decs = dragHandleDecoration(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
           decorations = decorations.add(newState.doc, [decs]);
         }
         if (fg('platform.editor.elements.drag-and-drop-ed-23816')) {
@@ -208,7 +224,7 @@ export const createPlugin = (api, getIntl) => {
               spec
             }) => spec.id === 'drag-handle');
             decorations = decorations.remove(oldHandle);
-            const decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
+            const decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
             decorations = decorations.add(newState.doc, [decs]);
           }
         }
@@ -373,6 +389,15 @@ export const createPlugin = (api, getIntl) => {
               return true;
             }
           }
+
+          //NOTE: altKey === 'option' on MacOS
+          if (event.altKey && event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+            //prevent holding down key combo from firing repeatedly
+            if (!event.repeat && boundKeydownHandler(api)(view, event)) {
+              event.preventDefault();
+              return true;
+            }
+          }
           return false;
         }
       }
@@ -385,7 +410,8 @@ export const createPlugin = (api, getIntl) => {
       if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserverHeight = new ResizeObserver(rafSchedule(entries => {
-          const editorHeight = entries[0].contentBoxSize[0].blockSize;
+          var _entries$, _entries$$contentBoxS;
+          const editorHeight = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : (_entries$$contentBoxS = _entries$.contentBoxSize[0]) === null || _entries$$contentBoxS === void 0 ? void 0 : _entries$$contentBoxS.blockSize;
 
           // Update the plugin state when the height changes
           const pluginState = key.getState(editorView.state);
@@ -395,7 +421,7 @@ export const createPlugin = (api, getIntl) => {
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
               transaction.setMeta('is-resizer-resizing', isResizerResizing);
             }
-            if (!isResizerResizing) {
+            if (!isResizerResizing && editorHeight) {
               transaction.setMeta(key, {
                 editorHeight
               });

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -39,11 +39,15 @@ const dragHandleButtonStyles = css({
   cursor: 'grab',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: DRAG_HANDLE_ZINDEX,
+  outline: 'none',
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
   '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&:focus': {
+    outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
   }
 });
 const selectedStyles = css({
@@ -58,7 +62,8 @@ const DragHandleInternal = ({
   nodeType,
   intl: {
     formatMessage
-  }
+  },
+  handleOptions
 }) => {
   const start = getPos();
   const buttonRef = useRef(null);
@@ -158,6 +163,35 @@ const DragHandleInternal = ({
       return tr;
     });
   }, [start, api]);
+  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$core4;
+        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+          tr
+        }) => {
+          if (start === undefined) {
+            return tr;
+          }
+          const node = tr.doc.nodeAt(start);
+          if (!node) {
+            return tr;
+          }
+          const $startPos = tr.doc.resolve(start + node.nodeSize);
+          const selection = new TextSelection($startPos);
+          tr.setSelection(selection);
+          tr.setMeta(key, {
+            pos: start
+          });
+          return tr;
+        });
+      } else {
+        // return focus to editor to resume editing from caret positon
+        view.focus();
+      }
+    }
+  }, [start, api, view]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -186,11 +220,11 @@ const DragHandleInternal = ({
         });
       },
       onDragStart() {
-        var _api$core4;
+        var _api$core5;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
         }) => {
           var _api$blockControls, _api$analytics2;
@@ -217,7 +251,7 @@ const DragHandleInternal = ({
     });
   }, [anchorName, api, nodeType, view, start]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
-  const positionStyles = useMemo(() => {
+  const calculatePosition = useCallback(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
     const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
@@ -239,18 +273,68 @@ const DragHandleInternal = ({
     }
     if (supportsAnchor) {
       return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
-        left: hasResizer || isExtension || isEmbedCard ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       } : {
         left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
-    return {
+    return fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
+      left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates)})` : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
+      top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
+    } : {
       left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
     };
   }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
+  const [newPositionStyles, setNewPositionStyles] = useState({
+    display: 'none'
+  });
+  useEffect(() => {
+    if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return;
+    }
+    let cleanUpTransitionListener;
+    if (nodeType === 'extension' || nodeType === 'embedCard') {
+      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+      if (!dom) {
+        return;
+      }
+      cleanUpTransitionListener = bind(dom, {
+        type: 'transitionend',
+        listener: () => {
+          setNewPositionStyles(calculatePosition());
+        }
+      });
+    }
+    const calcPos = requestAnimationFrame(() => {
+      setNewPositionStyles(calculatePosition());
+    });
+    return () => {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(calcPos);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, anchorName, nodeType]);
+  const positionStyles = useMemo(() => {
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      return newPositionStyles;
+    }
+    return calculatePosition();
+  }, [calculatePosition, newPositionStyles]);
+  useEffect(() => {
+    if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+      const id = requestAnimationFrame(() => {
+        var _buttonRef$current;
+        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      });
+      return () => {
+        cancelAnimationFrame(id);
+        view.focus();
+      };
+    }
+  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   const helpDescriptors = [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
@@ -266,9 +350,10 @@ const DragHandleInternal = ({
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: positionStyles,
+    style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
     onClick: handleOnClick,
     onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+    onKeyDown: handleKeyDown,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "",

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

@@ -0,0 +1,18 @@
+export var showDragHandleAtSelection = function showDragHandleAtSelection(api) {
+  return function (state, _, view) {
+    var rootPos = state.selection.$from.before(1);
+    var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
+    var rootNode = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
+    if (rootNode) {
+      var anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
+      var nodeType = rootNode.getAttribute('data-drag-handler-node-type');
+      if (api && anchorName && nodeType) {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, anchorName, nodeType, {
+          isFocused: true
+        }));
+        return true;
+      }
+    }
+    return false;
+  };
+};

package/dist/esm/plugin.js

@@ -51,14 +51,15 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return tr;
         };
       },
-      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType) {
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
         return function (_ref4) {
           var tr = _ref4.tr;
           tr.setMeta(key, {
             activeNode: {
               pos: pos,
               anchorName: anchorName,
-              nodeType: nodeType
+              nodeType: nodeType,
+              handleOptions: handleOptions
             }
           });
           return tr;

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

@@ -129,13 +129,16 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
   });
   return decs;
 };
-export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api, getIntl) {
+export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
   return Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
     // Need to set it to inline to avoid text being split when merging two paragraphs
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
+      unmountDecorations('data-blocks-drag-handle-container');
+    }
     if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
       // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
       // due to margins applied to other nodes eg. Headings
@@ -148,14 +151,17 @@ export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName,
       api: api,
       getPos: getPos,
       anchorName: anchorName,
-      nodeType: nodeType
+      nodeType: nodeType,
+      handleOptions: handleOptions
     })), element);
     return element;
   }, {
     side: -1,
     id: 'drag-handle',
     destroy: function destroy(node) {
-      ReactDOM.unmountComponentAtNode(node);
+      if (!fg('platform_editor_element_drag_and_drop_ed_23896')) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
     }
   });
 };

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

@@ -0,0 +1,18 @@
+import { bindKeymapWithCommand, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { showDragHandleAtSelection } from '../commands/show-drag-handle';
+function keymapList(api) {
+  var keymapList = {};
+  if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+    bindKeymapWithCommand(showElementDragHandle.common, function (state, dispatch, view) {
+      showDragHandleAtSelection(api)(state, dispatch, view);
+      //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
+      return true;
+    }, keymapList);
+  }
+  return keymapList;
+}
+export var boundKeydownHandler = function boundKeydownHandler(api) {
+  return keydownHandler(keymapList(api));
+};

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

@@ -12,6 +12,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
+import { boundKeydownHandler } from './keymap';
 export var key = new PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
   var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
@@ -85,7 +86,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+        var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode2, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
         if (initialState.isDocSizeLimitEnabled === null) {
           if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
             initialState.isDocSizeLimitEnabled = true;
@@ -118,9 +119,15 @@ export var createPlugin = function createPlugin(api, getIntl) {
         var resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
         var nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
+        var shouldRemoveHandle = true;
+        if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
+          shouldRemoveHandle = !tr.getMeta('isRemote');
+        }
 
-        // During resize, remove the drag handle widget
-        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
+        // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
+        // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
+        // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
+        if (isResizerResizing || nodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
           var oldHandle = decorations.find().filter(function (_ref5) {
             var spec = _ref5.spec;
             return spec.id === 'drag-handle';
@@ -156,7 +163,15 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          decorations = DecorationSet.create(newState.doc, []);
+          if (fg('platform_editor_elements_drag_and_drop_ed_24000')) {
+            var oldNodeDecs = decorations.find().filter(function (_ref8) {
+              var spec = _ref8.spec;
+              return spec.type !== 'drop-target-decoration';
+            });
+            decorations = decorations.remove(oldNodeDecs);
+          } else {
+            decorations = DecorationSet.create(newState.doc, []);
+          }
           var nodeDecs = nodeDecorations(newState);
           if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
             decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
@@ -173,7 +188,9 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
             // When a node type changed to be nested inside another node, the position of the active node is off by 1
             // This is a workaround to fix the position of the active node when it is nested
-            if (mappedPosisiton === prevMappedPos + 1) {
+
+            var shouldUpdateNestedPosition = fg('platform_editor_element_drag_and_drop_ed_24049') ? tr.docChanged && !nodeCountChanged : true;
+            if (shouldUpdateNestedPosition && mappedPosisiton === prevMappedPos + 1) {
               mappedPosisiton = prevMappedPos;
             }
             var newActiveNode = tr.doc.nodeAt(mappedPosisiton);
@@ -188,31 +205,31 @@ export var createPlugin = function createPlugin(api, getIntl) {
                 anchorName: anchorName
               };
             }
-            var draghandleDec = dragHandleDecoration(activeNode.pos, anchorName, nodeType, api, getIntl);
+            var draghandleDec = dragHandleDecoration(api, getIntl, activeNode.pos, anchorName, nodeType);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
         }
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
-        if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
-          var _oldHandle = decorations.find().filter(function (_ref8) {
-            var spec = _ref8.spec;
+        if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
+          var _oldHandle = decorations.find().filter(function (_ref9) {
+            var spec = _ref9.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
-          var decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api, getIntl);
+          var decs = dragHandleDecoration(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
           decorations = decorations.add(newState.doc, [decs]);
         }
         if (fg('platform.editor.elements.drag-and-drop-ed-23816')) {
           var _activeNodeWithNewNod;
           // Remove previous drag handle widget and draw new drag handle widget when node type changes
           if (activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-            var _oldHandle2 = decorations.find().filter(function (_ref9) {
-              var spec = _ref9.spec;
+            var _oldHandle2 = decorations.find().filter(function (_ref10) {
+              var spec = _ref10.spec;
               return spec.id === 'drag-handle';
             });
             decorations = decorations.remove(_oldHandle2);
-            var _decs = dragHandleDecoration(activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, api, getIntl);
+            var _decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
             decorations = decorations.add(newState.doc, [_decs]);
           }
         }
@@ -228,8 +245,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Remove drop target decoration when dragging stops
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
-          var dropTargetDecs = decorations.find().filter(function (_ref10) {
-            var spec = _ref10.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref11) {
+            var spec = _ref11.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
@@ -237,9 +254,9 @@ export var createPlugin = function createPlugin(api, getIntl) {
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && isDragging) {
-          decorationState = decorationState.map(function (_ref11) {
-            var index = _ref11.index,
-              pos = _ref11.pos;
+          decorationState = decorationState.map(function (_ref12) {
+            var index = _ref12.index,
+              pos = _ref12.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -252,8 +269,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
           decorations = decorations.map(tr.mapping, tr.doc);
         }
         var isEmptyDoc = 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 (_ref13) {
+          var spec = _ref13.spec;
           return spec.type === 'node-decoration';
         });
         if (!hasNodeDecoration && isEmptyDoc) {
@@ -372,6 +389,15 @@ export var createPlugin = function createPlugin(api, getIntl) {
               return true;
             }
           }
+
+          //NOTE: altKey === 'option' on MacOS
+          if (event.altKey && event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+            //prevent holding down key combo from firing repeatedly
+            if (!event.repeat && boundKeydownHandler(api)(view, event)) {
+              event.preventDefault();
+              return true;
+            }
+          }
           return false;
         }
       }
@@ -384,7 +410,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
       if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
         // Use ResizeObserver to observe height changes
         resizeObserverHeight = new ResizeObserver(rafSchedule(function (entries) {
-          var editorHeight = entries[0].contentBoxSize[0].blockSize;
+          var _entries$;
+          var editorHeight = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize[0]) === null || _entries$ === void 0 ? void 0 : _entries$.blockSize;
 
           // Update the plugin state when the height changes
           var pluginState = key.getState(editorView.state);
@@ -394,7 +421,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
               transaction.setMeta('is-resizer-resizing', isResizerResizing);
             }
-            if (!isResizerResizing) {
+            if (!isResizerResizing && editorHeight) {
               transaction.setMeta(key, {
                 editorHeight: editorHeight
               });