@atlaskit/editor-plugin-block-controls 7.2.10 → 7.2.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.2.12
+
+### Patch Changes
+
+- [`5e7e734485a98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5e7e734485a98) -
+  upgrade browser util api
+- Updated dependencies
+
+## 7.2.11
+
+### Patch Changes
+
+- [`606c3303a0d61`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/606c3303a0d61) -
+  [ux] ED-29331 fix block controls misalignment on first line of empty document with
+  platform_editor_native_anchor_support on
+- Updated dependencies
+
 ## 7.2.10
 
 ### Patch Changes

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleMouseDown = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
@@ -12,7 +13,6 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
       return false;
     }
     if (!view.editable) {
-      var _rootNode$type$name, _rootNode$type$name2;
       var targetPos = view.posAtDOM(event.target, 0);
       // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
       var rootPos = view.state.doc.resolve(targetPos).before(1);
@@ -20,7 +20,19 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
       if (!rootNode) {
         return false;
       }
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+      if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        var _rootNode$type$name, _rootNode$type$name2;
+        var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);
+
+        // don't show the handles if we can't find an anchor
+        if (!anchorName) {
+          return false;
+        }
+        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, anchorName, (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, anchorName, (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+      } else {
+        var _rootNode$type$name3, _rootNode$type$name4;
+        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name3 = rootNode.type.name) !== null && _rootNode$type$name3 !== void 0 ? _rootNode$type$name3 : '', undefined, rootPos, '', (_rootNode$type$name4 = rootNode.type.name) !== null && _rootNode$type$name4 !== void 0 ? _rootNode$type$name4 : ''));
+      }
     } else {
       var isDragHandle = event.target.closest((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? _styles.DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));

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

@@ -100,10 +100,20 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
         rootElement = parentElement;
       }
     }
+    var anchorName;
+    if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
+
+      // don't show handles if we can't find an anchor
+      if (!anchorName) {
+        return false;
+      }
+    } else {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
+    }
 
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
     // No need to update handle position if its already there
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;

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

@@ -296,12 +296,13 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       if (activeNode && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== true) {
         var _mappedRootPos$pos, _mappedRootPos;
         var _mappedPos;
+        var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
         // In safari, when platform_editor_controls is on,
         // sometimes the drag handle for the layout disppears after you click on the handle for a few times
         // Which caused the drag handle onClick event not firing, then block menu wouldn't be opened
         // This is caused by the mappedPos.deletedAfter sometimes returning true in webkit browsers even though the active node still exists
         // This is likely a prosemirror and safari integration bug, but to unblock the issue, we are going to use mappedPos.deleted in safari for now
-        if (_browser.browser.webkit && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+        if (browser.webkit && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
           _mappedPos = tr.mapping.mapResult(activeNode.pos);
           isActiveNodeDeleted = _mappedPos.deleted;
         } else {
@@ -503,7 +504,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
   }
   var isEmptyDoc = (0, _utils.isEmptyDocument)(newState.doc);
-  if (isEmptyDoc) {
+  if (isEmptyDoc && !(0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true)) {
     var hasNodeDecoration = !!(0, _decorationsAnchor.findNodeDecs)(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);

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

@@ -248,7 +248,8 @@ var selectedStyles = (0, _react2.css)({
 // icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
 // with pragmatic DnD and pragmatic DnD is not triggered
 var handleIconDragStart = function handleIconDragStart(e) {
-  if (!_browser.browser.chrome) {
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
+  if (!browser.chrome) {
     return;
   }
   // prevent dragStart handler triggered by icon
@@ -947,6 +948,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
   };
   var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
   var renderButton = function renderButton() {
     return (
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
@@ -955,7 +957,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
+        browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

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

@@ -8,6 +8,7 @@ exports.dragPreview = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _browser = require("@atlaskit/editor-common/browser");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var previewStyle = {
   borderColor: "var(--ds-border, ".concat(_colors.N30, ")"),
   borderStyle: 'solid',
@@ -69,12 +70,13 @@ var createContentPreviewElement = function createContentPreviewElement(dom, node
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   dom.cloneNode(true);
+  var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
   clonedDom.style.marginLeft = '0';
   clonedDom.style.marginTop = nodeSpacing ? "".concat(nodeSpacing.top) : '0';
   clonedDom.style.marginRight = '0';
   clonedDom.style.marginBottom = nodeSpacing ? "".concat(nodeSpacing.bottom) : '0';
   clonedDom.style.boxShadow = 'none';
-  clonedDom.style.opacity = _browser.browser.windows ? '1' : '0.31';
+  clonedDom.style.opacity = browser.windows ? '1' : '0.31';
   contentPreviewOneElement.appendChild(clonedDom);
   return contentPreviewOneElement;
 };

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

@@ -1,11 +1,11 @@
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export const handleMouseDown = api => (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
   if (!view.editable) {
-    var _rootNode$type$name, _rootNode$type$name2;
     const targetPos = view.posAtDOM(event.target, 0);
     // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
     const rootPos = view.state.doc.resolve(targetPos).before(1);
@@ -13,7 +13,19 @@ export const handleMouseDown = api => (view, event) => {
     if (!rootNode) {
       return false;
     }
-    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      var _rootNode$type$name, _rootNode$type$name2;
+      const anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);
+
+      // don't show the handles if we can't find an anchor
+      if (!anchorName) {
+        return false;
+      }
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, anchorName, (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, anchorName, (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+    } else {
+      var _rootNode$type$name3, _rootNode$type$name4;
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name3 = rootNode.type.name) !== null && _rootNode$type$name3 !== void 0 ? _rootNode$type$name3 : '', undefined, rootPos, '', (_rootNode$type$name4 = rootNode.type.name) !== null && _rootNode$type$name4 !== void 0 ? _rootNode$type$name4 : ''));
+    }
   } else {
     const isDragHandle = event.target.closest(expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));

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

@@ -90,10 +90,20 @@ export const handleMouseOver = (view, event, api) => {
         rootElement = parentElement;
       }
     }
+    let anchorName;
+    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      anchorName = rootElement.getAttribute(getAnchorAttrName());
+
+      // don't show handles if we can't find an anchor
+      if (!anchorName) {
+        return false;
+      }
+    } else {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      anchorName = rootElement.getAttribute(getAnchorAttrName());
+    }
 
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const anchorName = rootElement.getAttribute(getAnchorAttrName());
     // No need to update handle position if its already there
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;

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

@@ -1,6 +1,6 @@
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { browser } from '@atlaskit/editor-common/browser';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
@@ -295,6 +295,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       if (activeNode && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== true) {
         var _mappedRootPos$pos, _mappedRootPos;
         let mappedPos;
+        const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
         // In safari, when platform_editor_controls is on,
         // sometimes the drag handle for the layout disppears after you click on the handle for a few times
         // Which caused the drag handle onClick event not firing, then block menu wouldn't be opened
@@ -501,7 +502,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
   }
   const isEmptyDoc = isEmptyDocument(newState.doc);
-  if (isEmptyDoc) {
+  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
     const hasNodeDecoration = !!findNodeDecs(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);

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

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { browser } from '@atlaskit/editor-common/browser';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
@@ -243,6 +243,7 @@ const selectedStyles = css({
 // icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
 // with pragmatic DnD and pragmatic DnD is not triggered
 const handleIconDragStart = e => {
+  const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
   if (!browser.chrome) {
     return;
   }
@@ -933,6 +934,7 @@ export const DragHandle = ({
     editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
   };
   const hasHadInteraction = interactionState !== 'hasNotHadInteraction';
+  const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
   const renderButton = () =>
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {

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

@@ -1,5 +1,6 @@
-import { browser } from '@atlaskit/editor-common/browser';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { N20, N30 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const previewStyle = {
   borderColor: `var(--ds-border, ${N30})`,
   borderStyle: 'solid',
@@ -62,6 +63,7 @@ const createContentPreviewElement = (dom, nodeType, nodeSpacing) => {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   dom.cloneNode(true);
+  const browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
   clonedDom.style.marginLeft = '0';
   clonedDom.style.marginTop = nodeSpacing ? `${nodeSpacing.top}` : '0';
   clonedDom.style.marginRight = '0';

package/dist/esm/pm-plugins/handle-mouse-down.js

@@ -1,4 +1,5 @@
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 export var handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
@@ -6,7 +7,6 @@ export var handleMouseDown = function handleMouseDown(api) {
       return false;
     }
     if (!view.editable) {
-      var _rootNode$type$name, _rootNode$type$name2;
       var targetPos = view.posAtDOM(event.target, 0);
       // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
       var rootPos = view.state.doc.resolve(targetPos).before(1);
@@ -14,7 +14,19 @@ export var handleMouseDown = function handleMouseDown(api) {
       if (!rootNode) {
         return false;
       }
-      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+      if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        var _rootNode$type$name, _rootNode$type$name2;
+        var anchorName = api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(rootNode, rootPos);
+
+        // don't show the handles if we can't find an anchor
+        if (!anchorName) {
+          return false;
+        }
+        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, anchorName, (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, anchorName, (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+      } else {
+        var _rootNode$type$name3, _rootNode$type$name4;
+        api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name3 = rootNode.type.name) !== null && _rootNode$type$name3 !== void 0 ? _rootNode$type$name3 : '', undefined, rootPos, '', (_rootNode$type$name4 = rootNode.type.name) !== null && _rootNode$type$name4 !== void 0 ? _rootNode$type$name4 : ''));
+      }
     } else {
       var isDragHandle = event.target.closest(expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? DRAG_HANDLE_SELECTOR : '[data-editor-block-ctrl-drag-handle]') !== null;
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));

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

@@ -93,10 +93,20 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
         rootElement = parentElement;
       }
     }
+    var anchorName;
+    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      anchorName = rootElement.getAttribute(getAnchorAttrName());
+
+      // don't show handles if we can't find an anchor
+      if (!anchorName) {
+        return false;
+      }
+    } else {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      anchorName = rootElement.getAttribute(getAnchorAttrName());
+    }
 
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var anchorName = rootElement.getAttribute(getAnchorAttrName());
     // No need to update handle position if its already there
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;

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

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { browser } from '@atlaskit/editor-common/browser';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
@@ -289,6 +289,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       if (activeNode && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== true) {
         var _mappedRootPos$pos, _mappedRootPos;
         var _mappedPos;
+        var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
         // In safari, when platform_editor_controls is on,
         // sometimes the drag handle for the layout disppears after you click on the handle for a few times
         // Which caused the drag handle onClick event not firing, then block menu wouldn't be opened
@@ -496,7 +497,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
   }
   var isEmptyDoc = isEmptyDocument(newState.doc);
-  if (isEmptyDoc) {
+  if (isEmptyDoc && !expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
     var hasNodeDecoration = !!findNodeDecs(newState, decorations).length;
     if (!hasNodeDecoration) {
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);

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

@@ -14,7 +14,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { browser } from '@atlaskit/editor-common/browser';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
@@ -245,6 +245,7 @@ var selectedStyles = css({
 // icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
 // with pragmatic DnD and pragmatic DnD is not triggered
 var handleIconDragStart = function handleIconDragStart(e) {
+  var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
   if (!browser.chrome) {
     return;
   }
@@ -944,6 +945,7 @@ export var DragHandle = function DragHandle(_ref) {
     editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
   };
   var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
+  var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
   var renderButton = function renderButton() {
     return (
       // eslint-disable-next-line @atlaskit/design-system/no-html-button

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

@@ -1,6 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import { browser } from '@atlaskit/editor-common/browser';
+import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { N20, N30 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var previewStyle = {
   borderColor: "var(--ds-border, ".concat(N30, ")"),
   borderStyle: 'solid',
@@ -62,6 +63,7 @@ var createContentPreviewElement = function createContentPreviewElement(dom, node
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   dom.cloneNode(true);
+  var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
   clonedDom.style.marginLeft = '0';
   clonedDom.style.marginTop = nodeSpacing ? "".concat(nodeSpacing.top) : '0';
   clonedDom.style.marginRight = '0';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.2.10",
+	"version": "7.2.12",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-plugin-analytics": "^6.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
-		"@atlaskit/editor-plugin-interaction": "^8.0.0",
+		"@atlaskit/editor-plugin-interaction": "^9.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^3.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^6.0.0",
@@ -52,8 +52,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^15.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.11.0",
-		"@atlaskit/tokens": "^6.5.0",
+		"@atlaskit/tmp-editor-statsig": "^13.13.0",
+		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",