@atlaskit/editor-plugin-block-controls 11.1.1 → 11.2.0

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

@@ -350,7 +350,6 @@ export const DragHandle = ({
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
   const [blockCardWidth, setBlockCardWidth] = useState(768);
-  const [recalculatePosition, setRecalculatePosition] = useState(false);
   const [positionStylesOld, setPositionStylesOld] = useState({
     display: 'none'
   });
@@ -391,9 +390,6 @@ export const DragHandle = ({
   // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
   const isTopLevelNodeValue = expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   useEffect(() => {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
@@ -788,62 +784,6 @@ export const DragHandle = ({
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  const positionStyles = useMemo(() => {
-    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return {};
-    }
-
-    // This is a no-op to allow recalculatePosition to be used as a dependency
-    if (recalculatePosition) {
-      setRecalculatePosition(recalculatePosition);
-    }
-    const pos = getPos();
-    const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(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') ? refreshAnchorName({
-      getPos,
-      view,
-      anchorName
-    }) : anchorName;
-    const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
-    const hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    const isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
-    const isBlockCard = nodeType === 'blockCard';
-    const isEmbedCard = nodeType === 'embedCard';
-    const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
-    let innerContainer = null;
-    if (dom) {
-      if (isEmbedCard) {
-        innerContainer = dom.querySelector('.rich-media-item');
-      } else if (hasResizer) {
-        innerContainer = dom.querySelector('.resizer-item');
-      } else if (isExtension) {
-        innerContainer = dom.querySelector('.extension-container[data-layout]');
-      } else if (isBlockCard) {
-        //specific to datasource blockCard
-        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
-      }
-    }
-    const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    const isSticky = shouldBeSticky(nodeType);
-    if (supportsAnchor) {
-      const bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
-      return {
-        left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || '')}px)`,
-        ...bottom
-      };
-    }
-    const height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
-    return {
-      left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: getTopPosition(dom, nodeType),
-      ...height
-    };
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   const calculatePositionOld = useCallback(() => {
     const pos = getPos();
     const $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -893,9 +833,6 @@ export const DragHandle = ({
     };
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   useEffect(() => {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     let cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
@@ -918,28 +855,6 @@ export const DragHandle = ({
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
   }, [calculatePositionOld, view.dom, anchorName, nodeType]);
-  useEffect(() => {
-    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
-    let cleanUpTransitionListener;
-    if (nodeType === 'extension' || nodeType === 'embedCard') {
-      const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${anchorName}"]`);
-      if (!dom) {
-        return;
-      }
-      cleanUpTransitionListener = bind(dom, {
-        type: 'transitionend',
-        listener: () => {
-          setRecalculatePosition(!recalculatePosition);
-        }
-      });
-    }
-    return () => {
-      var _cleanUpTransitionLis2;
-      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 ? void 0 : _cleanUpTransitionLis2();
-    };
-  }, [view, anchorName, nodeType, recalculatePosition]);
   useEffect(() => {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       const id = requestAnimationFrame(() => {
@@ -948,9 +863,7 @@ export const DragHandle = ({
       });
       return () => {
         cancelAnimationFrame(id);
-        if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-          view.focus();
-        }
+        view.focus();
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -1065,7 +978,7 @@ export const DragHandle = ({
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+    style: !editorExperiment('platform_editor_controls', 'variant1') ? positionStylesOld : {},
     onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
     onMouseUp: editorExperiment('platform_editor_block_menu', true) ? handleMouseUp : undefined,
     onClick: editorExperiment('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
@@ -1117,7 +1030,7 @@ export const DragHandle = ({
   const stickyWithTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
-    style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld
+    style: positionStylesOld
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     xcss: [dragHandleContainerStyles],
@@ -1145,7 +1058,7 @@ export const DragHandle = ({
   const stickyWithoutTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
-    style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld
+    style: positionStylesOld
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     xcss: [dragHandleContainerStyles],

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

@@ -5,11 +5,10 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, Global, jsx } from '@emotion/react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported } from '@atlaskit/editor-common/styles';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
-import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
@@ -301,87 +300,6 @@ const globalStyles = () => css({
     marginTop: '0 !important'
   }
 });
-const quickInsertStyles = () => css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-button': {
-    backgroundColor: 'transparent',
-    top: `var(--top-override,8px)`,
-    position: 'sticky',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: "var(--ds-space-300, 24px)",
-    width: "var(--ds-space-300, 24px)",
-    border: 'none',
-    borderRadius: "var(--ds-radius-full, 9999px)",
-    zIndex: layers.card(),
-    outline: 'none',
-    cursor: 'pointer',
-    color: "var(--ds-icon-subtle, #505258)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    '--top-override': `${tableControlsSpacing}px`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    '--top-override': `${tableControlsSpacing}px`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-button:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-button:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-button:focus': {
-    outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"}`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-visible-container': {
-    transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
-    opacity: 1,
-    visibility: 'visible'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-invisible-container': {
-    transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
-    opacity: 0,
-    visibility: 'hidden'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.blocks-quick-insert-tooltip': {
-    zIndex: layers.tooltip(),
-    borderRadius: "var(--ds-radius-small, 4px)",
-    padding: `${"var(--ds-space-050, 4px)"} 0`,
-    boxSizing: 'border-box',
-    maxWidth: '240px',
-    backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
-    color: "var(--ds-text-inverse, #FFFFFF)",
-    font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-    insetBlockStart: "var(--ds-space-0, 0px)",
-    insetInlineStart: "var(--ds-space-0, 0px)",
-    overflowWrap: 'break-word',
-    paddingBlockEnd: "var(--ds-space-025, 2px)",
-    paddingBlockStart: "var(--ds-space-025, 2px)",
-    paddingInlineEnd: "var(--ds-space-075, 6px)",
-    paddingInlineStart: "var(--ds-space-075, 6px)",
-    wordWrap: 'break-word',
-    pointerEvents: 'none',
-    userSelect: 'none',
-    // Based on: platform/packages/design-system/motion/src/entering/keyframes-motion.tsx
-    transition: 'opacity .1s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out',
-    '@media (prefers-reduced-motion: reduce)': {
-      transition: 'none'
-    }
-  }
-});
 const topLevelNodeMarginStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror': {
@@ -581,6 +499,6 @@ export const GlobalStylesWrapper = ({
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -43,16 +43,6 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
     exposure: true
   }) ? true : ignore_nodes.includes(node.type.name);
 };
-var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos) {
-  if (pos <= 0 || pos >= state.doc.nodeSize - 2) {
-    return pos;
-  }
-  var $pos = state.doc.resolve(pos);
-  if ($pos.depth > 0) {
-    return $pos.before();
-  }
-  return pos;
-};
 
 /**
  * Find node decorations corresponding to nodes with starting position between from and to (non-inclusive)
@@ -62,43 +52,25 @@ var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos)
  */
 export var findNodeDecs = function findNodeDecs(state, decorations, from, to) {
   var newFrom = from;
-  if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-    // return empty array if range reversed
-    if (typeof to === 'number' && typeof newFrom === 'number' && newFrom > to) {
-      return [];
-    }
-    var decs = decorations.find(newFrom, to, function (spec) {
-      return spec.type === TYPE_NODE_DEC;
-    });
+  var newTo = to;
 
-    // Prosemirror finds any decorations that overlap with the provided position range, but we don't want to include decorations of nodes that start outside of the range
-    if (typeof to === 'number' && typeof newFrom === 'number') {
-      decs = decs.filter(function (dec) {
-        return dec.from >= (newFrom || 0) && dec.from < to;
-      });
-    }
-    return decs;
-  } else {
-    var newTo = to;
-
-    // make it non-inclusive
-    if (newFrom !== undefined) {
-      newFrom++;
-    }
+  // make it non-inclusive
+  if (newFrom !== undefined) {
+    newFrom++;
+  }
 
-    // make it non-inclusive
-    if (newTo !== undefined) {
-      newTo--;
-    }
+  // make it non-inclusive
+  if (newTo !== undefined) {
+    newTo--;
+  }
 
-    // return empty array if range reversed
-    if (newFrom !== undefined && newTo !== undefined && newFrom > newTo) {
-      return [];
-    }
-    return decorations.find(newFrom, newTo, function (spec) {
-      return spec.type === TYPE_NODE_DEC;
-    });
+  // return empty array if range reversed
+  if (newFrom !== undefined && newTo !== undefined && newFrom > newTo) {
+    return [];
   }
+  return decorations.find(newFrom, newTo, function (spec) {
+    return spec.type === TYPE_NODE_DEC;
+  });
 };
 export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
@@ -113,12 +85,6 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
     var shouldDescend = shouldDescendIntoNode(node);
     var anchorName = getNodeAnchor(node);
     var nodeTypeWithLevel = getNodeTypeWithLevel(node);
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      // We don't want to create decorations for nodes that start outside of the provided position range
-      if (pos < getPositionBeforeNodeAtPos(newState, docFrom)) {
-        return shouldDescend;
-      }
-    }
 
     // Doesn't descend into a node
     if (node.isInline) {

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

@@ -35,11 +35,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     handleOptions = _ref.handleOptions,
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
-  if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
-    exposure: true
-  })) {
-    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
-  }
+  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
@@ -56,9 +52,6 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : getActiveBlockMarks(editorState, pos),
     destroy: function destroy(node) {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   } : {
     side: -1,
@@ -68,9 +61,6 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? getActiveBlockMarks(editorState, pos) : undefined,
     destroy: function destroy(node) {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   };
   return Decoration.widget(pos, function (view, getPosUnsafe) {

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -7,7 +7,6 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
 import { getActiveBlockMarks } from './utils/marks';
-import { createVanillaButton } from './vanilla-quick-insert';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
@@ -71,23 +70,6 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
       element.setAttribute('data-blocks-quick-insert-button', 'true');
     }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    if (editorExperiment('platform_editor_block_control_optimise_render', true, {
-      exposure: true
-    })) {
-      var vanillaElement = createVanillaButton({
-        formatMessage: formatMessage,
-        api: api,
-        view: view,
-        getPos: getPos,
-        cleanupCallbacks: cleanupCallbacks,
-        rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
-        anchorName: anchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-        anchorRectCache: anchorRectCache
-      });
-      element.appendChild(vanillaElement);
-      return element;
-    }
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/createElement(QuickInsertWithVisibility, {
         api: api,

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

@@ -224,7 +224,7 @@ export var getDecorations = function getDecorations(state) {
 };
 var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to) {
   // Find the newly minted node decs that touch the active node
-  var findNewNodeDecs = findNodeDecs(state, decorations, editorExperiment('platform_editor_block_control_optimise_render', true) ? pos : pos - 1, to);
+  var findNewNodeDecs = findNodeDecs(state, decorations, pos - 1, to);
 
   // Find the specific dec that the active node corresponds to
   var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -371,7 +371,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     if (!flags.toolbarFlagsEnabled) {
       if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
-        var findNewNodeDecs = findNodeDecs(newState, decorations, editorExperiment('platform_editor_block_control_optimise_render', true) ? latestActiveNode.pos : latestActiveNode.pos - 1, to);
+        var findNewNodeDecs = findNodeDecs(newState, decorations, latestActiveNode.pos - 1, to);
 
         // Find the specific dec that the active node corresponds to
         var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {

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

@@ -361,20 +361,16 @@ export var DragHandle = function DragHandle(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     blockCardWidth = _useState6[0],
     setBlockCardWidth = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    recalculatePosition = _useState8[0],
-    setRecalculatePosition = _useState8[1];
-  var _useState9 = useState({
+  var _useState7 = useState({
       display: 'none'
     }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    positionStylesOld = _useState8[0],
+    setPositionStylesOld = _useState8[1];
+  var _useState9 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
     _useState0 = _slicedToArray(_useState9, 2),
-    positionStylesOld = _useState0[0],
-    setPositionStylesOld = _useState0[1];
-  var _useState1 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
-    _useState10 = _slicedToArray(_useState1, 2),
-    isFocused = _useState10[0],
-    setIsFocused = _useState10[1];
+    isFocused = _useState0[0],
+    setIsFocused = _useState0[1];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags', 'selection', 'blockControls', 'interaction'], function (states) {
       var _states$featureFlagsS, _states$selectionStat, _states$blockControls, _states$interactionSt;
       return {
@@ -410,9 +406,6 @@ export var DragHandle = function DragHandle(_ref) {
   // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
   var isTopLevelNodeValue = expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   useEffect(function () {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
       var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
@@ -806,60 +799,6 @@ export var DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var positionStyles = useMemo(function () {
-    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return {};
-    }
-
-    // This is a no-op to allow recalculatePosition to be used as a dependency
-    if (recalculatePosition) {
-      setRecalculatePosition(recalculatePosition);
-    }
-    var pos = getPos();
-    var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
-    var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
-    var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
-    var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
-    var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
-    var safeAnchorName = editorExperiment('platform_editor_controls', 'variant1') ? refreshAnchorName({
-      getPos: getPos,
-      view: view,
-      anchorName: anchorName
-    }) : anchorName;
-    var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
-    var hasResizer = nodeType === 'table' || nodeType === 'mediaSingle';
-    var isExtension = nodeType === 'extension' || nodeType === 'bodiedExtension' || nodeType === 'multiBodiedExtension';
-    var isBlockCard = nodeType === 'blockCard';
-    var isEmbedCard = nodeType === 'embedCard';
-    var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
-    var innerContainer = null;
-    if (dom) {
-      if (isEmbedCard) {
-        innerContainer = dom.querySelector('.rich-media-item');
-      } else if (hasResizer) {
-        innerContainer = dom.querySelector('.resizer-item');
-      } else if (isExtension) {
-        innerContainer = dom.querySelector('.extension-container[data-layout]');
-      } else if (isBlockCard) {
-        //specific to datasource blockCard
-        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
-      }
-    }
-    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    var isSticky = shouldBeSticky(nodeType);
-    if (supportsAnchor) {
-      var bottom = editorExperiment('platform_editor_controls', 'variant1') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
-      return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
-        top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && getNodeTypeWithLevel($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
-      }, bottom);
-    }
-    var height = editorExperiment('platform_editor_controls', 'variant1') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
-    return _objectSpread({
-      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: getTopPosition(dom, nodeType)
-    }, height);
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = useCallback(function () {
     var pos = getPos();
     var $pos = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -907,9 +846,6 @@ export var DragHandle = function DragHandle(_ref) {
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   useEffect(function () {
-    if (editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
@@ -932,28 +868,6 @@ export var DragHandle = function DragHandle(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePositionOld, view.dom, anchorName, nodeType]);
-  useEffect(function () {
-    if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
-    var cleanUpTransitionListener;
-    if (nodeType === 'extension' || nodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
-      if (!dom) {
-        return;
-      }
-      cleanUpTransitionListener = bind(dom, {
-        type: 'transitionend',
-        listener: function listener() {
-          setRecalculatePosition(!recalculatePosition);
-        }
-      });
-    }
-    return function () {
-      var _cleanUpTransitionLis2;
-      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
-    };
-  }, [view, anchorName, nodeType, recalculatePosition]);
   useEffect(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
@@ -962,9 +876,7 @@ export var DragHandle = function DragHandle(_ref) {
       });
       return function () {
         cancelAnimationFrame(id);
-        if (!editorExperiment('platform_editor_block_control_optimise_render', true)) {
-          view.focus();
-        }
+        view.focus();
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -1080,7 +992,7 @@ export var DragHandle = function DragHandle(_ref) {
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !editorExperiment('platform_editor_controls', 'variant1') ? editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+        style: !editorExperiment('platform_editor_controls', 'variant1') ? positionStylesOld : {},
         onMouseDown: expValEqualsNoExposure('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
         onMouseUp: editorExperiment('platform_editor_block_menu', true) ? handleMouseUp : undefined,
         onClick: editorExperiment('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
@@ -1134,7 +1046,7 @@ export var DragHandle = function DragHandle(_ref) {
     return jsx(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld
+      style: positionStylesOld
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       xcss: [dragHandleContainerStyles],
@@ -1164,7 +1076,7 @@ export var DragHandle = function DragHandle(_ref) {
     return jsx(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: editorExperiment('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld
+      style: positionStylesOld
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       xcss: [dragHandleContainerStyles],