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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 11.2.0
+
+### Minor Changes
+
+- [`64134fd6d8fee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64134fd6d8fee) -
+  clean up platform_editor_block_control_optimise_render
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.1.1
 
 ### Patch Changes

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

@@ -50,16 +50,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)
@@ -69,43 +59,25 @@ var getPositionBeforeNodeAtPos = function getPositionBeforeNodeAtPos(state, pos)
  */
 var findNodeDecs = exports.findNodeDecs = function findNodeDecs(state, decorations, from, to) {
   var newFrom = from;
-  if ((0, _experiments.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 === _decorationsCommon.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 === _decorationsCommon.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 === _decorationsCommon.TYPE_NODE_DEC;
+  });
 };
 var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
@@ -120,12 +92,6 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     var shouldDescend = shouldDescendIntoNode(node);
     var anchorName = (0, _decorationsCommon.getNodeAnchor)(node);
     var nodeTypeWithLevel = (0, _decorationsCommon.getNodeTypeWithLevel)(node);
-    if ((0, _experiments.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/cjs/pm-plugins/decorations-drag-handle.js

@@ -43,11 +43,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     handleOptions = _ref.handleOptions,
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
-  if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
-    exposure: true
-  })) {
-    (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
-  }
+  (0, _decorationsCommon.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 = (0, _uuid.default)();
@@ -64,9 +60,6 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     marks: (0, _expValEquals.expValEquals)('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : (0, _marks.getActiveBlockMarks)(editorState, pos),
     destroy: function destroy(node) {
       unbind && unbind();
-      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        _reactDom.default.unmountComponentAtNode(node);
-      }
     }
   } : {
     side: -1,
@@ -76,9 +69,6 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     marks: (0, _expValEquals.expValEquals)('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (0, _marks.getActiveBlockMarks)(editorState, pos) : undefined,
     destroy: function destroy(node) {
       unbind && unbind();
-      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        _reactDom.default.unmountComponentAtNode(node);
-      }
     }
   };
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {

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

@@ -13,7 +13,6 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
 var _marks = require("./utils/marks");
-var _vanillaQuickInsert = require("./vanilla-quick-insert");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
@@ -79,23 +78,6 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
       element.setAttribute('data-blocks-quick-insert-button', 'true');
     }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
-      exposure: true
-    })) {
-      var vanillaElement = (0, _vanillaQuickInsert.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__*/(0, _react.createElement)(_quickInsertButton.QuickInsertWithVisibility, {
         api: api,

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

@@ -231,7 +231,7 @@ var getDecorations = exports.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 = (0, _decorationsAnchor.findNodeDecs)(state, decorations, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? pos : pos - 1, to);
+  var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(state, decorations, pos - 1, to);
 
   // Find the specific dec that the active node corresponds to
   var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
@@ -378,7 +378,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     if (!flags.toolbarFlagsEnabled) {
       if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
-        var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(newState, decorations, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? latestActiveNode.pos : latestActiveNode.pos - 1, to);
+        var findNewNodeDecs = (0, _decorationsAnchor.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/cjs/ui/drag-handle.js

@@ -365,20 +365,16 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     blockCardWidth = _useState6[0],
     setBlockCardWidth = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    recalculatePosition = _useState8[0],
-    setRecalculatePosition = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       display: 'none'
     }),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    positionStylesOld = _useState8[0],
+    setPositionStylesOld = _useState8[1];
+  var _useState9 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    positionStylesOld = _useState0[0],
-    setPositionStylesOld = _useState0[1];
-  var _useState1 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    isFocused = _useState10[0],
-    setIsFocused = _useState10[1];
+    isFocused = _useState0[0],
+    setIsFocused = _useState0[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags', 'selection', 'blockControls', 'interaction'], function (states) {
       var _states$featureFlagsS, _states$selectionStat, _states$blockControls, _states$interactionSt;
       return {
@@ -414,9 +410,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   // just rely on the dynamic value (rename it to isTopLevelNode for simplicitiy)
   var isTopLevelNodeValue = (0, _expValEquals.expValEquals)('platform_editor_nested_drag_handle_icon', 'isEnabled', true) ? isTopLevelNodeDynamic : isTopLevelNode;
   (0, _react.useEffect)(function () {
-    if ((0, _experiments.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((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
@@ -810,60 +803,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     });
   }, [anchorName, api, getPos, isMultiSelect, nodeType, start, view]);
-  var positionStyles = (0, _react.useMemo)(function () {
-    if (!(0, _experiments.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 = (0, _expValEquals.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 = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _anchorName.refreshAnchorName)({
-      getPos: getPos,
-      view: view,
-      anchorName: anchorName
-    }) : anchorName;
-    var dom = view.dom.querySelector("[".concat((0, _domAttrName.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 = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
-    if (supportsAnchor) {
-      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn) : {};
-      return _objectSpread({
-        left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
-      }, bottom);
-    }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
-    return _objectSpread({
-      left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
-      top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
-    }, height);
-  }, [anchorName, getPos, view, nodeType, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn, recalculatePosition]);
   var calculatePositionOld = (0, _react.useCallback)(function () {
     var pos = getPos();
     var $pos = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? typeof pos === 'number' && view.state.doc.resolve(pos) : pos && view.state.doc.resolve(pos);
@@ -911,9 +850,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }, height);
   }, [anchorName, getPos, view, nodeType, blockCardWidth, macroInteractionUpdates, anchorRectCache, isTopLevelNodeValue, isLayoutColumn]);
   (0, _react.useEffect)(function () {
-    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
     var cleanUpTransitionListener;
     if (nodeType === 'extension' || nodeType === 'embedCard') {
       var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
@@ -936,28 +872,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePositionOld, view.dom, anchorName, nodeType]);
-  (0, _react.useEffect)(function () {
-    if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-      return;
-    }
-    var cleanUpTransitionListener;
-    if (nodeType === 'extension' || nodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
-      if (!dom) {
-        return;
-      }
-      cleanUpTransitionListener = (0, _bindEventListener.bind)(dom, {
-        type: 'transitionend',
-        listener: function listener() {
-          setRecalculatePosition(!recalculatePosition);
-        }
-      });
-    }
-    return function () {
-      var _cleanUpTransitionLis2;
-      (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
-    };
-  }, [view, anchorName, nodeType, recalculatePosition]);
   (0, _react.useEffect)(function () {
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
@@ -966,9 +880,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
       return function () {
         cancelAnimationFrame(id);
-        if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true)) {
-          view.focus();
-        }
+        view.focus();
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
@@ -1084,7 +996,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? positionStyles : positionStylesOld : {},
+        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? positionStylesOld : {},
         onMouseDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
         onMouseUp: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleMouseUp : undefined,
         onClick: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
@@ -1138,7 +1050,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return (0, _react2.jsx)(_primitives.Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: (0, _experiments.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],
@@ -1168,7 +1080,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     return (0, _react2.jsx)(_primitives.Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     , {
-      style: (0, _experiments.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/cjs/ui/global-styles.js

@@ -12,7 +12,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _constants = require("@atlaskit/theme/constants");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
@@ -249,89 +248,6 @@ var globalStyles = function globalStyles() {
     }
   });
 };
-var quickInsertStyles = function quickInsertStyles() {
-  return (0, _react.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: _constants.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': "".concat(_styles.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': "".concat(_styles.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)".concat(" 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: _constants.layers.tooltip(),
-      borderRadius: "var(--ds-radius-small, 4px)",
-      padding: "var(--ds-space-050, 4px)".concat(" 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'
-      }
-    }
-  });
-};
 var topLevelNodeMarginStyles = (0, _react.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': {
@@ -495,6 +411,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
       exposure: true
     }) ? (0, _expValEquals.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, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

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

@@ -42,16 +42,6 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
     exposure: true
   }) ? true : ignore_nodes.includes(node.type.name);
 };
-const getPositionBeforeNodeAtPos = (state, pos) => {
-  if (pos <= 0 || pos >= state.doc.nodeSize - 2) {
-    return pos;
-  }
-  const $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)
@@ -61,39 +51,23 @@ const getPositionBeforeNodeAtPos = (state, pos) => {
  */
 export const findNodeDecs = (state, decorations, from, to) => {
   let 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 [];
-    }
-    let decs = decorations.find(newFrom, to, spec => spec.type === TYPE_NODE_DEC);
+  let 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(dec => {
-        return dec.from >= (newFrom || 0) && dec.from < to;
-      });
-    }
-    return decs;
-  } else {
-    let 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, spec => spec.type === TYPE_NODE_DEC);
+  // return empty array if range reversed
+  if (newFrom !== undefined && newTo !== undefined && newFrom > newTo) {
+    return [];
   }
+  return decorations.find(newFrom, newTo, spec => spec.type === TYPE_NODE_DEC);
 };
 export const nodeDecorations = (newState, from, to) => {
   const decs = [];
@@ -108,12 +82,6 @@ export const nodeDecorations = (newState, from, to) => {
     const shouldDescend = shouldDescendIntoNode(node);
     const anchorName = getNodeAnchor(node);
     const 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/es2019/pm-plugins/decorations-drag-handle.js

@@ -34,11 +34,7 @@ export const dragHandleDecoration = ({
   anchorRectCache,
   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');
   let unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
@@ -55,9 +51,6 @@ export const dragHandleDecoration = ({
     marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : getActiveBlockMarks(editorState, pos),
     destroy: node => {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   } : {
     side: -1,
@@ -67,9 +60,6 @@ export const dragHandleDecoration = ({
     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: node => {
       unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
     }
   };
   return Decoration.widget(pos, (view, getPosUnsafe) => {

package/dist/es2019/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';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
@@ -70,23 +69,6 @@ export const quickInsertButtonDecoration = ({
       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
-    })) {
-      const vanillaElement = createVanillaButton({
-        formatMessage,
-        api,
-        view,
-        getPos,
-        cleanupCallbacks,
-        rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
-        anchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-        anchorRectCache
-      });
-      element.appendChild(vanillaElement);
-      return element;
-    }
     nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(QuickInsertWithVisibility, {
       api,
       getPos,

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

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