@atlaskit/editor-plugin-block-controls 3.8.3 → 3.8.5

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -29,7 +29,7 @@ export const handleMouseOver = (view, event, api) => {
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
-    if (editorExperiment('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
+    if (isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
     }
     if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && editorExperiment('advanced_layouts', true)) {
@@ -42,12 +42,12 @@ export const handleMouseOver = (view, event, api) => {
     const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
     if (editorExperiment('advanced_layouts', true)) {
       // We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
-      if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow') && editorExperiment('nested-dnd', true)) {
+      if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow')) {
         rootElement = parentElement;
       }
     } else {
       // We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
-      if (parentElement && parentElementType === 'table' && editorExperiment('nested-dnd', true)) {
+      if (parentElement && parentElementType === 'table') {
         rootElement = parentElement;
       }
     }
@@ -68,7 +68,7 @@ export const handleMouseOver = (view, event, api) => {
     }
     const parentRootElement = rootElement.parentElement;
     let pos;
-    if (parentRootElement && editorExperiment('nested-dnd', true)) {
+    if (parentRootElement) {
       var _parentRootElement$ch;
       const childNodes = Array.from(parentRootElement.childNodes);
       const index = childNodes.indexOf(rootElement);
@@ -86,12 +86,7 @@ export const handleMouseOver = (view, event, api) => {
       // Don't show drag handle for layout column in a single column layout
       return false;
     }
-    let targetPos;
-    if (editorExperiment('nested-dnd', true)) {
-      targetPos = view.state.doc.resolve(pos).pos;
-    } else {
-      targetPos = view.state.doc.resolve(pos).start(1) - 1;
-    }
+    const targetPos = view.state.doc.resolve(pos).pos;
     let rootAnchorName;
     let rootNodeType;
     let rootPos;

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

@@ -1,7 +1,6 @@
 import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNodeViaShortcut } from '../editor-commands/move-node';
 import { showDragHandleAtSelection } from '../editor-commands/show-drag-handle';
 import { DIRECTION } from './utils/consts';
@@ -11,8 +10,8 @@ function keymapList(api, formatMessage) {
     bindKeymapWithCommand(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    showElementDragHandle.common, (state, dispatch, view) => {
-      showDragHandleAtSelection(api)(state, dispatch, view);
+    showElementDragHandle.common, state => {
+      showDragHandleAtSelection(api)(state);
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
@@ -24,16 +23,14 @@ function keymapList(api, formatMessage) {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
-    if (editorExperiment('nested-dnd', true)) {
-      bindKeymapWithCommand(
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
-      bindKeymapWithCommand(
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
-    }
+    bindKeymapWithCommand(
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
+    bindKeymapWithCommand(
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
   }
   return keymapList;
 }

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

@@ -1,10 +1,9 @@
 import rafSchedule from 'raf-schd';
-import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { isEmptyDocument, isTextInput } from '@atlaskit/editor-common/utils';
+import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -181,7 +180,7 @@ const getDecorationAtPos = (decorations, pos, to) => {
   const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
+export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
   var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
     activeNode,
@@ -425,158 +424,10 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
   };
 };
-export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
-  var _meta$activeNode2, _meta$activeNode$hand2, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2, _meta$lastDragCancell2;
-  const {
-    isNestedEnabled
-  } = flags;
-  const {
-    activeNode,
-    isMenuOpen,
-    editorHeight,
-    editorWidthLeft,
-    editorWidthRight,
-    isDragging,
-    isPMDragging,
-    lastDragCancelled
-  } = currentState;
-  let {
-    decorations,
-    isResizerResizing
-  } = currentState;
-
-  // Remap existing decorations when steps exist
-  if (tr.docChanged) {
-    decorations = decorations.map(tr.mapping, tr.doc);
-  }
-  const meta = tr.getMeta(key);
-
-  // If tables or media are being resized, we want to hide the drag handle
-  const resizerMeta = tr.getMeta('is-resizer-resizing');
-  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-  const canIgnoreTr = () => !tr.steps.every(e => e instanceof AnalyticsStep);
-  const maybeNodeCountChanged = isNestedEnabled ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
-  const shouldRemoveHandle = !tr.getMeta('isRemote');
-
-  // 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 || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
-    const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
-    decorations = decorations.remove(oldHandle);
-  }
-  const decsLength = isNestedEnabled ? decorations.find(undefined, undefined, spec => spec.type === 'node-decoration').length : decorations.find().filter(({
-    spec
-  }) => spec.type !== 'drag-handle').length;
-  let isDecsMissing = false;
-  let isDropTargetsMissing = false;
-  if (isNestedEnabled) {
-    var _meta$isDragging3;
-    isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && maybeNodeCountChanged;
-    isDropTargetsMissing = ((_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
-  } else {
-    isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
-    const dropTargetLen = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration').length;
-    isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
-  }
-
-  // This is not targeted enough - it's trying to catch events like expand being set to breakout
-  const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !maybeNodeCountChanged;
-
-  // This addresses scenarios such as undoing table resizing,
-  // where a keyboard shortcut triggers a width change, and
-  // the node's actual width is then updated in a separate renderering cycle.
-  // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
-  // (when the table node rerenders)
-  // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
-  const maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
-  const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
-
-  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
-  if (redrawDecorations && !isResizerResizing && api) {
-    const oldNodeDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
-    decorations = decorations.remove(oldNodeDecs);
-    const newNodeDecs = nodeDecorations(newState);
-    decorations = decorations.add(newState.doc, [...newNodeDecs]);
-    if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-      var _meta$activeNode$pos, _meta$activeNode3, _ref, _meta$activeNode$anch, _meta$activeNode4, _decAtPos$spec, _ref2, _meta$activeNode$node, _meta$activeNode5, _decAtPos$spec2, _meta$activeNode6;
-      let mappedPosisiton = tr.mapping.map(activeNode.pos);
-      const prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
-
-      // 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 (tr.docChanged && !maybeNodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
-        mappedPosisiton = prevMappedPos;
-      }
-      const newActiveNode = tr.doc.nodeAt(mappedPosisiton);
-      if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
-        const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
-        decorations = decorations.remove(oldHandle);
-      }
-      const decAtPos = newNodeDecs.find(dec => dec.from === mappedPosisiton);
-      const draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 ? void 0 : (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref = (_meta$activeNode$anch = meta === null || meta === void 0 ? void 0 : (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 ? void 0 : (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref !== void 0 ? _ref : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref2 = (_meta$activeNode$node = meta === null || meta === void 0 ? void 0 : (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 ? void 0 : (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref2 !== void 0 ? _ref2 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, nodeViewPortalProviderAPI, meta === null || meta === void 0 ? void 0 : (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
-      decorations = decorations.add(newState.doc, [draghandleDec]);
-    }
-  }
-
-  // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
-  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$hand2 = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand2 !== void 0 && _meta$activeNode$hand2.isFocused)) {
-    const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
-    decorations = decorations.remove(oldHandle);
-    const decs = dragHandleDecoration(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, nodeViewPortalProviderAPI, meta.activeNode.handleOptions);
-    decorations = decorations.add(newState.doc, [decs]);
-  }
-  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-    // Remove drop target decoration when dragging stops
-    const dropTargetDecs = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration');
-    decorations = decorations.remove(dropTargetDecs);
-  }
-
-  // Map active node position when the document changes
-  const mappedActiveNodePos = tr.docChanged && activeNode ? {
-    pos: tr.mapping.map(activeNode.pos),
-    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 (shouldCreateDropTargets) {
-      var _meta$activeNode7;
-      const decs = dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
-      decorations = decorations.add(newState.doc, decs);
-    }
-  }
-  const isEmptyDoc = isNestedEnabled ? 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;
-  if (isEmptyDoc) {
-    const hasNodeDecoration = !!decorations.find(undefined, undefined, spec => spec.type === 'node-decoration').length;
-    if (!hasNodeDecoration) {
-      decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
-    }
-  }
-  const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, spec => spec.type === 'drag-handle').length === 0 ? null : (_meta$activeNode8 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode8 !== void 0 ? _meta$activeNode8 : mappedActiveNodePos;
-  return {
-    decorations,
-    activeNode: newActiveNode,
-    isDragging: (_meta$isDragging4 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging4 !== void 0 ? _meta$isDragging4 : isDragging,
-    isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
-    editorHeight: (_meta$editorHeight2 = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight2 !== void 0 ? _meta$editorHeight2 : currentState.editorHeight,
-    editorWidthLeft: (_meta$editorWidthLeft2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft2 !== void 0 ? _meta$editorWidthLeft2 : currentState.editorWidthLeft,
-    editorWidthRight: (_meta$editorWidthRigh2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh2 !== void 0 ? _meta$editorWidthRigh2 : currentState.editorWidthRight,
-    isResizerResizing: isResizerResizing,
-    isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging,
-    lastDragCancelled: (_meta$lastDragCancell2 = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell2 !== void 0 ? _meta$lastDragCancell2 : lastDragCancelled
-  };
-};
 export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
   const {
     formatMessage
   } = getIntl();
-  const isNestedEnabled = editorExperiment('nested-dnd', true, {
-    exposure: true
-  });
   const isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
     exposure: true
   });
@@ -584,7 +435,6 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
     exposure: true
   });
   const flags = {
-    isNestedEnabled,
     isMultiSelectEnabled
   };
   let anchorRectCache;
@@ -597,12 +447,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
       init() {
         return initialState;
       },
-      apply(tr, currentState, oldState, newState) {
-        if (isNestedEnabled) {
-          return newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);
-        }
-        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);
-      }
+      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache)
     },
     props: {
       decorations: state => {

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

@@ -32,6 +32,7 @@ import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from
 import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 import { refreshAnchorName } from './utils/anchor-name';
+import { VisibilityContainer } from './visibility-container';
 const iconWrapperStyles = xcss({
   display: 'flex',
   justifyContent: 'center',
@@ -500,14 +501,11 @@ export const DragHandle = ({
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
   const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const calculatePosition = useCallback(() => {
-    let parentNodeType;
-    if (editorExperiment('nested-dnd', true)) {
-      const pos = getPos();
-      const $pos = pos && view.state.doc.resolve(pos);
-      const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
-      const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
-      parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
-    }
+    const pos = getPos();
+    const $pos = pos && view.state.doc.resolve(pos);
+    const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
+    const node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
+    const parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2') ? refreshAnchorName({
       getPos,
@@ -631,7 +629,7 @@ export const DragHandle = ({
     keymap: dragToMoveDown
   }];
   let isParentNodeOfTypeLayout;
-  if (!isTopLevelNode && editorExperiment('nested-dnd', true)) {
+  if (!isTopLevelNode) {
     const pos = getPos();
     if (typeof pos === 'number') {
       var _$pos$parent;
@@ -761,4 +759,25 @@ export const DragHandle = ({
   const stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   const render = isTooltip ? buttonWithTooltip() : renderButton();
   return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
+};
+export const DragHandleWithVisibility = ({
+  view,
+  api,
+  formatMessage,
+  getPos,
+  anchorName,
+  nodeType,
+  anchorRectCache
+}) => {
+  return jsx(VisibilityContainer, {
+    api: api
+  }, jsx(DragHandle, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    anchorName: anchorName,
+    nodeType: nodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

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

@@ -205,7 +205,7 @@ export const DropTarget = props => {
     width: isNestedDropTarget ? 'unset' : '100%',
     [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
-    [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()
+    [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: layers.navigation()
   };
   return jsx(Fragment, null, jsx(HoverZone, {
     onDragEnter: () => setIsDraggedOver(true),

package/dist/es2019/ui/global-styles.js

@@ -14,38 +14,6 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  */
 const dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
 const extendedHoverZone = () => css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'none !important'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`&& ${dragHandlerAnchorSelector}::after`]: {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      left: '-100%',
-      width: '100%',
-      height: '100%',
-      background: 'transparent',
-      cursor: 'default',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      zIndex: -1
-    }
-  },
-  // TODO: ED-23995 - this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'hr[data-drag-handler-anchor-name]': {
-    overflow: 'visible'
-  },
-  //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drag-handle-container="true"] + *::after': {
-    display: 'none'
-  }
-});
-const extendedHoverZoneNested = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -225,15 +193,6 @@ const withRelativePosStyle = css({
   }
 });
 const withAnchorNameZindexStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`&& ${dragHandlerAnchorSelector}`]: {
-      zIndex: 1
-    }
-  }
-});
-const withAnchorNameZindexNestedStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
@@ -259,6 +218,6 @@ const blockCardWithoutLayout = css({
 });
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
   });
 };

package/dist/es2019/ui/quick-insert-button.js

@@ -15,6 +15,7 @@ import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_I
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
+import { VisibilityContainer } from './visibility-container';
 const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
 const buttonStyles = xcss({
   boxSizing: 'border-box',
@@ -101,6 +102,7 @@ export const TypeAheadControl = ({
   anchorRectCache
 }) => {
   const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  // remove when platform_editor_controls_patch_1 is removed
   const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
@@ -252,20 +254,51 @@ export const TypeAheadControl = ({
     testId: "editor-quick-insert-button",
     type: "button",
     "aria-label": formatMessage(messages.insert),
-    xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
+    xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
+    // remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') ? disabledStyles : undefined],
     onClick: handleQuickInsert,
     onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-    isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+    isDisabled: !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && isTypeAheadOpen
   }, /*#__PURE__*/React.createElement(AddIcon, {
     label: "add",
-    color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+    color:
+    // remove color.icon.disabled when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
   })));
   return /*#__PURE__*/React.createElement(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
-    xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
+    xcss: [containerStaticStyles,
+    // remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
   }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
     xcss: [tooltipContainerStyles]
   }, tooltipPressable()) : tooltipPressable());
+};
+export const QuickInsertWithVisibility = ({
+  view,
+  api,
+  formatMessage,
+  getPos,
+  nodeType,
+  anchorName,
+  rootAnchorName,
+  rootNodeType,
+  anchorRectCache
+}) => {
+  return /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api
+  }, /*#__PURE__*/React.createElement(TypeAheadControl, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    nodeType: nodeType,
+    anchorName: anchorName,
+    rootAnchorName: rootAnchorName,
+    rootNodeType: rootNodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

package/dist/es2019/ui/visibility-container.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { Box, xcss } from '@atlaskit/primitives';
+const baseStyles = xcss({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
+});
+const visibleStyles = xcss({
+  opacity: 1,
+  visibility: 'visible'
+});
+const hiddenStyles = xcss({
+  opacity: 0,
+  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
+  visibility: 'hidden'
+});
+export const VisibilityContainer = ({
+  api,
+  children
+}) => {
+  const isOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+  }, children);
+};