@atlaskit/editor-plugin-block-controls 7.4.2 → 7.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.5.0
+
+### Minor Changes
+
+- [`f54c8f46bb85f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f54c8f46bb85f) -
+  Add @atlaskit/editor-plugin-toolbar as an optional dependency, and check its presence to enable
+  the floating insert button
+
+## 7.4.3
+
+### Patch Changes
+
+- [`c28cd65d12c24`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c28cd65d12c24) -
+  EDITOR-2447 Bump adf-schema to 51.3.1
+- Updated dependencies
+
 ## 7.4.2
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -8,6 +8,7 @@ exports.blockControlsPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _selection = require("@atlaskit/editor-common/selection");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -43,6 +44,10 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           name: 'blockControlsInteractionTrackingPlugin',
           plugin: _pmPlugin.createInteractionTrackingPlugin
         });
+      }
+
+      // platform_editor_controls note: quick insert rendering fixes
+      if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
         pmPlugins.push({
           name: 'firstNodeDec',
           plugin: _firstNodeDecPlugin.firstNodeDecPlugin
@@ -197,7 +202,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           var $to = $expandedAnchor.max($expandedHead);
           var expandedNormalisedSel;
           if ($from.nodeAfter === $to.nodeBefore) {
-            (0, _getSelection.selectNode)(tr, $from.pos, $expandedAnchor.node().type.name);
+            (0, _getSelection.selectNode)(tr, $from.pos, $expandedAnchor.node().type.name, api);
             expandedNormalisedSel = tr.selection;
           } else if (((_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.type.name) === 'mediaSingle' || ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'mediaSingle') {
             expandedNormalisedSel = new _state.TextSelection($expandedAnchor, $expandedHead);

package/dist/cjs/editor-commands/move-node.js

@@ -290,7 +290,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         // If the node is first/last one, only select the node
         api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref5) {
           var tr = _ref5.tr;
-          (0, _getSelection.selectNode)(tr, currentNodePos, nodeType);
+          (0, _getSelection.selectNode)(tr, currentNodePos, nodeType, api);
           tr.scrollIntoView();
           return tr;
         });
@@ -402,9 +402,9 @@ var moveNode = exports.moveNode = function moveNode(api) {
         tr.insert(mappedTo, convertedNode);
       }
       var sliceSize = sliceTo - sliceFrom;
-      tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
+      tr = inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP ? (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo, api) : isMultiSelect ? (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
         tr: tr
-      })) !== null && _api$blockControls$co !== void 0 ? _api$blockControls$co : tr : (0, _getSelection.selectNode)(tr, mappedTo, handleNode.type.name);
+      })) !== null && _api$blockControls$co !== void 0 ? _api$blockControls$co : tr : (0, _getSelection.selectNode)(tr, mappedTo, handleNode.type.name, api);
       var currMeta = tr.getMeta(_main.key);
       tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
         nodeMoved: true

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.handleMouseOver = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -49,6 +50,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       editorDisabled: false
     },
     editorDisabled = _ref2.editorDisabled;
+  var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
 
   // We shouldn't be firing mouse over transactions when the editor is disabled
   if (editorDisabled && (0, _platformFeatureFlags.fg)('aifc_create_enabled')) {
@@ -150,7 +152,9 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     var rootAnchorName;
     var rootNodeType;
     var rootPos;
-    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+
+    // platform_editor_controls note: enables quick insert
+    if (toolbarFlagsEnabled) {
       rootPos = view.state.doc.resolve(pos).before(1);
       if (targetPos !== rootPos) {
         var rootDOM = view.nodeDOM(rootPos);
@@ -163,7 +167,8 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
     var nodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      // platform_editor_controls note: enables quick insert
+      if (toolbarFlagsEnabled) {
         var _api$core, _api$blockControls2;
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
       } else {

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

@@ -12,6 +12,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -126,7 +127,7 @@ var destroyFn = function destroyFn(api, editorView) {
               var $head = tr.doc.resolve(multiSelectDnD.userHead);
               if ($head.node() === $anchor.node()) {
                 var $from = $anchor.min($head);
-                (0, _getSelection.selectNode)(tr, $from.pos, $from.node().type.name);
+                (0, _getSelection.selectNode)(tr, $from.pos, $from.node().type.name, api);
               } else {
                 tr.setSelection(_state.TextSelection.create(tr.doc, multiSelectDnD.userAnchor, multiSelectDnD.userHead));
               }
@@ -257,7 +258,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     lastDragCancelled = currentState.lastDragCancelled,
     isSelectedViaDragHandle = currentState.isSelectedViaDragHandle;
   var isActiveNodeDeleted = false;
-  var _getTrMetadata = (0, _transactions.getTrMetadata)(tr),
+  var _getTrMetadata = (0, _transactions.getTrMetadata)(tr, flags),
     from = _getTrMetadata.from,
     to = _getTrMetadata.to,
     numReplaceSteps = _getTrMetadata.numReplaceSteps,
@@ -281,8 +282,9 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   if (tr.docChanged) {
     decorations = decorations.map(tr.mapping, tr.doc);
 
+    // platform_editor_controls note: enables quick insert
     // don't remap activeNode if it's being dragged
-    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    if (!flags.toolbarFlagsEnabled) {
       if (activeNode) {
         var mappedPos = tr.mapping.mapResult(activeNode.pos);
         isActiveNodeDeleted = mappedPos.deleted;
@@ -360,7 +362,9 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     decorations = decorations.remove(oldNodeDecs);
     var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
-    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+
+    // platform_editor_controls note: enables quick insert
+    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);
@@ -417,7 +421,9 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
 
   // If the active node is missing, we need to remove the handle
   var shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted && !isReplacedWithSameSize || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+
+  // platform_editor_controls note: enables quick insert
+  if (flags.toolbarFlagsEnabled) {
     // Remove handle dec when editor is blurred
     shouldRemoveHandle = shouldRemoveHandle || (meta === null || meta === void 0 ? void 0 : meta.editorBlurred);
   }
@@ -425,7 +431,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     var _activeNode5, _activeNode6;
     var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(oldHandle);
-    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    // platform_editor_controls note: enables quick insert
+    if (flags.toolbarFlagsEnabled) {
       var _activeNode7, _activeNode8;
       var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
@@ -449,7 +456,9 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
-    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
+    // platform_editor_controls note: enables quick insert
+    flags.toolbarFlagsEnabled) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
@@ -511,7 +520,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   }
   var newActiveNode;
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  // platform_editor_controls note: enables quick insert
+  if (flags.toolbarFlagsEnabled) {
     var _latestActiveNode1, _latestActiveNode10;
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.pos, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos).length === 0 ? null : latestActiveNode;
@@ -520,7 +530,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
-  if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+  if (_consts.BLOCK_MENU_ENABLED && flags.toolbarFlagsEnabled || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {
       isMenuOpenNew = false;
     } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
@@ -531,10 +541,10 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isMenuOpenNew = !isMenuOpen;
   }
   var isSelectedViaDragHandleNew;
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _expValEquals.expValEquals)('platform_editor_controls_block_controls_state_fix', 'isEnabled', true)) {
+  if (flags.toolbarFlagsEnabled && (0, _expValEquals.expValEquals)('platform_editor_controls_block_controls_state_fix', 'isEnabled', true)) {
     isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined ? meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle : isSelectedViaDragHandle;
   } else {
-    isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle);
+    isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && flags.toolbarFlagsEnabled && (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle);
   }
   return {
     decorations: decorations,
@@ -542,7 +552,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     activeDropTargetNode: currentActiveDropTargetNode,
     isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
     isMenuOpen: isMenuOpenNew,
-    menuTriggerBy: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy : undefined,
+    menuTriggerBy: flags.toolbarFlagsEnabled || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy : undefined,
     blockMenuOptions: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? {
       canMoveUp: (meta === null || meta === void 0 || (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.moveUp) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu3 = meta.toggleMenu) === null || _meta$toggleMenu3 === void 0 ? void 0 : _meta$toggleMenu3.moveUp : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveUp,
       canMoveDown: (meta === null || meta === void 0 || (_meta$toggleMenu4 = meta.toggleMenu) === null || _meta$toggleMenu4 === void 0 ? void 0 : _meta$toggleMenu4.moveDown) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu5 = meta.toggleMenu) === null || _meta$toggleMenu5 === void 0 ? void 0 : _meta$toggleMenu5.moveDown : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveDown,
@@ -569,8 +579,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   var isMultiSelectEnabled = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
     exposure: true
   });
+  var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   var flags = {
-    isMultiSelectEnabled: isMultiSelectEnabled
+    isMultiSelectEnabled: isMultiSelectEnabled,
+    toolbarFlagsEnabled: toolbarFlagsEnabled
   };
   var anchorRectCache;
   if (!(0, _anchorUtils.isAnchorSupported)()) {

package/dist/cjs/pm-plugins/utils/getSelection.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
 var _selection2 = require("@atlaskit/editor-common/selection");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
   var $startPos = tr.doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -121,25 +121,25 @@ var newGetSelection = function newGetSelection(tr, start) {
     inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
   return new _state.TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
 };
-var getSelection = exports.getSelection = function getSelection(tr, start) {
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+var getSelection = exports.getSelection = function getSelection(tr, start, api) {
+  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
     return newGetSelection(tr, start);
   }
   return oldGetSelection(tr, start);
 };
-var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {
+var selectNode = exports.selectNode = function selectNode(tr, start, nodeType, api) {
   // For table, we need to do cell selection instead of node selection
   if (nodeType === 'table') {
     tr = (0, _utils2.selectTableClosestToPos)(tr, tr.doc.resolve(start + 1));
     return tr;
   }
-  var selection = getSelection(tr, start);
+  var selection = getSelection(tr, start, api);
   if (selection) {
     tr.setSelection(selection);
   }
   return tr;
 };
-var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(tr, start) {
+var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(tr, start, api) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
@@ -153,7 +153,7 @@ var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = functi
   }
 
   // this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
-  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
     var _selection = new _state.TextSelection(tr.doc.resolve(start));
     tr.setSelection(_selection);
     return tr;

package/dist/cjs/pm-plugins/utils/transactions.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isStepText = exports.isStepDelete = exports.getTrMetadata = void 0;
 var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 /**
  * Checks if step adds inline char
  * @param s
@@ -47,7 +46,7 @@ var isStepContentReplacedWithAnotherOfSameSize = function isStepContentReplacedW
  * Number of ReplaceStep and ReplaceAroundStep steps 'numReplaceSteps'.
  * 'isAllText' if all steps are represent adding inline text or a backspace/delete or no-op
  */
-var getTrMetadata = exports.getTrMetadata = function getTrMetadata(tr) {
+var getTrMetadata = exports.getTrMetadata = function getTrMetadata(tr, flags) {
   var from;
   var to;
   var numReplaceSteps = 0;
@@ -58,7 +57,9 @@ var getTrMetadata = exports.getTrMetadata = function getTrMetadata(tr) {
       if (s instanceof _transform.ReplaceAroundStep || s instanceof _transform.ReplaceStep && !isStepText(s) && !isStepDelete(s)) {
         isAllText = false;
       }
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      // Fixes drag handle and quick insert button overlap issues
+      if (flags.toolbarFlagsEnabled) {
+        // platform_editor_controls note: fixes drag handle and quick insert button overlap issues
         isReplacedWithSameSize = isStepContentReplacedWithAnotherOfSameSize(s);
       }
       var mappedTo = tr.mapping.map(s.to);

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

@@ -296,7 +296,7 @@ var getNodeMargins = function getNodeMargins(node) {
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var _api$core2, _api$blockControls4, _api$analytics2, _api$core4, _api$core6, _api$blockControls6, _api$userIntent2;
+  var _api$core3;
   var view = _ref.view,
     api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -391,10 +391,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             var _selection = new _state.NodeSelection(tr.doc.resolve(startPos));
             tr.setSelection(_selection);
           } else {
-            tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+            tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
           }
         } else {
-          tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+          tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
         }
         if (_consts2.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
@@ -440,7 +440,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       return tr;
     });
     view.focus();
-  }, [isMultiSelect, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : api.blockControls.sharedState, api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
+  }, [isMultiSelect, api, view, dragHandleSelected, getPos, isTopLevelNode, nodeType, anchorName]);
 
   // TODO: ED-26959 - This needs to be investigated further. Drag preview generation is not always working
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -458,9 +458,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     // allow user to use spacebar to select the node
     if (!e.repeat && e.key === ' ') {
-      var _api$core3;
+      var _api$core2;
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
+      api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
         var tr = _ref3.tr;
         if (startPos === undefined) {
           return tr;
@@ -484,28 +484,28 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // return focus to editor to resume editing from caret position
       view.focus();
     }
-  }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
+  }, [getPos, api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions, isMultiSelect, view]);
   var handleKeyDownNew = (0, _react.useCallback)(function (e) {
     // allow user to use spacebar to select the node
     if (e.key === 'Enter' || !e.repeat && e.key === ' ') {
-      var _api$core5;
+      var _api$core4;
       if (document.activeElement !== buttonRef.current) {
         return;
       }
       e.preventDefault();
       e.stopPropagation();
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
-        var _api$blockControls5, _api$userIntent;
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
+        var _api$blockControls4, _api$userIntent;
         var tr = _ref4.tr;
         if (startPos === undefined) {
           return tr;
         }
-        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
         !isMultiSelect && tr.setMeta(_main.key, {
           pos: startPos
         });
-        api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
+        api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.toggleBlockMenu({
           anchorName: anchorName,
           openedViaKeyboard: true
         })({
@@ -523,7 +523,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // return focus to editor to resume editing from caret position
       view.focus();
     }
-  }, [getPos, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands, api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands, nodeType, isMultiSelect, anchorName, view]);
+  }, [getPos, api, nodeType, isMultiSelect, anchorName, view]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -541,8 +541,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         var _api$blockControls$sh2;
         var nativeSetDragImage = _ref5.nativeSetDragImage;
         if (isMultiSelect) {
-          var _api$core7;
-          api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
+          var _api$core5;
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
             var tr = _ref6.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
@@ -550,12 +550,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             }
             var newHandlePosCheck = (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && newHandlePosCheck) {
-              var _api$blockControls7;
-              api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setMultiSelectPositions()({
+              var _api$blockControls5;
+              api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
                 tr: tr
               });
             } else if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_select_node_on_drag')) {
-              tr = (0, _getSelection.selectNode)(tr, handlePos, nodeType);
+              tr = (0, _getSelection.selectNode)(tr, handlePos, nodeType, api);
             }
             return tr;
           });
@@ -654,12 +654,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core8;
+        var _api$core6;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref8) {
-          var _api$blockControls$sh3, _api$blockControls8, _api$analytics3;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
+          var _api$blockControls$sh3, _api$blockControls6, _api$analytics2;
           var tr = _ref8.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
@@ -673,11 +673,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 || _api$blockControls8.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             eventType: _analytics.EVENT_TYPE.UI,
             action: _analytics.ACTION.DRAGGED,
             actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,

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

@@ -8,6 +8,7 @@ exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -409,9 +410,12 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
   var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
     disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
+  var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return (0, _react.jsx)(_react.Global, {
     styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
-    }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 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_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
+    }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', '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_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
   });
 };

package/dist/es2019/blockControlsPlugin.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -32,6 +33,10 @@ export const blockControlsPlugin = ({
         name: 'blockControlsInteractionTrackingPlugin',
         plugin: createInteractionTrackingPlugin
       });
+    }
+
+    // platform_editor_controls note: quick insert rendering fixes
+    if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
       pmPlugins.push({
         name: 'firstNodeDec',
         plugin: firstNodeDecPlugin
@@ -191,7 +196,7 @@ export const blockControlsPlugin = ({
       const $to = $expandedAnchor.max($expandedHead);
       let expandedNormalisedSel;
       if ($from.nodeAfter === $to.nodeBefore) {
-        selectNode(tr, $from.pos, $expandedAnchor.node().type.name);
+        selectNode(tr, $from.pos, $expandedAnchor.node().type.name, api);
         expandedNormalisedSel = tr.selection;
       } else if (((_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.type.name) === 'mediaSingle' || ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'mediaSingle') {
         expandedNormalisedSel = new TextSelection($expandedAnchor, $expandedHead);

package/dist/es2019/editor-commands/move-node.js

@@ -293,7 +293,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         api === null || api === void 0 ? void 0 : (_api$core8 = api.core) === null || _api$core8 === void 0 ? void 0 : _api$core8.actions.execute(({
           tr
         }) => {
-          selectNode(tr, currentNodePos, nodeType);
+          selectNode(tr, currentNodePos, nodeType, api);
           tr.scrollIntoView();
           return tr;
         });
@@ -404,9 +404,9 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     tr.insert(mappedTo, convertedNode);
   }
   const sliceSize = sliceTo - sliceFrom;
-  tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo) : isMultiSelect ? (_api$blockControls$co2 = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
+  tr = inputMethod === INPUT_METHOD.DRAG_AND_DROP ? setCursorPositionAtMovedNode(tr, mappedTo, api) : isMultiSelect ? (_api$blockControls$co2 = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
     tr
-  })) !== null && _api$blockControls$co2 !== void 0 ? _api$blockControls$co2 : tr : selectNode(tr, mappedTo, handleNode.type.name);
+  })) !== null && _api$blockControls$co2 !== void 0 ? _api$blockControls$co2 : tr : selectNode(tr, mappedTo, handleNode.type.name, api);
   const currMeta = tr.getMeta(key);
   tr.setMeta(key, {
     ...currMeta,

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

@@ -1,4 +1,5 @@
 import memoizeOne from 'memoize-one';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -39,6 +40,7 @@ export const handleMouseOver = (view, event, api) => {
   } = (api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.currentState()) || {
     editorDisabled: false
   };
+  const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
 
   // We shouldn't be firing mouse over transactions when the editor is disabled
   if (editorDisabled && fg('aifc_create_enabled')) {
@@ -140,7 +142,9 @@ export const handleMouseOver = (view, event, api) => {
     let rootAnchorName;
     let rootNodeType;
     let rootPos;
-    if (editorExperiment('platform_editor_controls', 'variant1')) {
+
+    // platform_editor_controls note: enables quick insert
+    if (toolbarFlagsEnabled) {
       rootPos = view.state.doc.resolve(pos).before(1);
       if (targetPos !== rootPos) {
         const rootDOM = view.nodeDOM(rootPos);
@@ -153,7 +157,8 @@ export const handleMouseOver = (view, event, api) => {
     }
     const nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
-      if (editorExperiment('platform_editor_controls', 'variant1')) {
+      // platform_editor_controls note: enables quick insert
+      if (toolbarFlagsEnabled) {
         var _api$core, _api$blockControls2, _rootPos, _rootAnchorName, _rootNodeType;
         api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
       } else {