@atlaskit/editor-plugin-block-controls 1.12.9 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.13.0
+
+### Minor Changes
+
+- [#137234](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137234)
+  [`e80c81de138e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e80c81de138e9) -
+  [ux] [ED-24803] Experiment for editor block controls which adds a button to insert quickInsert
+  elements
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.12.10
+
+### Patch Changes
+
+- [#136410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136410)
+  [`52083ca79b5dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52083ca79b5dc) -
+  [ux] ED-24603 Disable dragging nested nodes within table behind FF
+
 ## 1.12.9
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -5,8 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockControlsPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./commands/move-node");
+var _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
@@ -22,13 +25,21 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           var getIntl = _ref2.getIntl;
           return (0, _main.createPlugin)(api, getIntl);
         }
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
+        exposure: true
+      }) ? [{
+        name: 'emptyBlockExperimentPlugin',
+        plugin: function plugin(_ref3) {
+          var getIntl = _ref3.getIntl;
+          return (0, _emptyBlockExperiment.createEmptyBlockExperimentPlugin)(api, getIntl);
+        }
+      }] : []));
     },
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           tr.setMeta(_main.key, {
             activeNode: {
               pos: pos,
@@ -41,8 +52,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           if (pos === undefined) {
             return tr;
           }

package/dist/cjs/pm-plugins/empty-block-experiment.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyBlockExperimentPluginKey = exports.createEmptyBlockExperimentPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _widget = require("../ui/empty-block-experiment/widget");
+var emptyBlockExperimentPluginKey = exports.emptyBlockExperimentPluginKey = new _state.PluginKey('emptyBlockExperiment');
+var getDecorations = function getDecorations(tr, api, getIntl) {
+  var widget = (0, _widget.createEmptyBlockWidgetDecoration)(tr.selection, api, getIntl);
+  if (widget) {
+    return _view.DecorationSet.create(tr.doc, [widget]);
+  }
+  return _view.DecorationSet.empty;
+};
+var createEmptyBlockExperimentPlugin = exports.createEmptyBlockExperimentPlugin = function createEmptyBlockExperimentPlugin(api, getIntl) {
+  return new _safePlugin.SafePlugin({
+    key: emptyBlockExperimentPluginKey,
+    state: {
+      init: function init(_, _editorState) {
+        return {
+          decorations: _view.DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, _currentState) {
+        return {
+          decorations: getDecorations(tr, api, getIntl)
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _emptyBlockExperiment;
+        return (_emptyBlockExperiment = emptyBlockExperimentPluginKey.getState(state)) === null || _emptyBlockExperiment === void 0 ? void 0 : _emptyBlockExperiment.decorations;
+      }
+    }
+  });
+};

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

@@ -22,7 +22,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
+    var tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
+    if (tableElement && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
+      exposure: true
+    })) {
+      rootElement = tableElement;
+    }
     var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
@@ -39,6 +46,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       var depth = $rootPos.depth;
       var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
       var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+
       /**
        * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
        * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
@@ -51,7 +59,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }
-    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       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(rootPos, anchorName, nodeType));

package/dist/cjs/ui/empty-block-experiment/global-styles.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyBlockExperimentGlobalStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
+var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
+var formattingElement = 'div.fabric-editor-block-mark';
+var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
+// Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
+var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
+var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
+var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+
+// Hides the drag handle when the block contains the empty block experiment
+// Override is consistent with how the drag handle is hidden when the block contains a placeholder
+var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(elementWithEmptyBlockExperiment, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(elementWithEmptyBlockExperimentFormatted, ")"), {
+  display: 'none !important'
+}));
+
+// Alternate styling for hiding the drag handle when the block contains the empty block experiment
+// Override is consistent with a feature-gated bugfix that hides the drag handle when the block contains a placeholder
+/**
+ * Please do not change change transform to display:none, or visibility:hidden
+ * Otherwise it might break composition input for Chrome
+ * https://product-fabric.atlassian.net/browse/ED-24136
+ */
+var dragHandleWithInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ", ").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector), {
+  transform: 'scale(0)'
+}));
+var getDragHandleOverrides = function getDragHandleOverrides() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_element_controls_chrome_input_fix') ? dragHandleWithInlineNodeStyleWithChromeFix : dragHandleWithInlineNodeStyle;
+};
+
+/**
+ * Hide the experiment button when it has been activated. (contains quick-insert decoration widget)
+ */
+var emptyBlockExperimentGlobalStyles = exports.emptyBlockExperimentGlobalStyles = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(emptyBlockExperimentWidget, ":has(+ ").concat(quickInsertWidget, ") button"), {
+  transform: 'scale(0)'
+}), getDragHandleOverrides());

package/dist/cjs/ui/empty-block-experiment/widget.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEmptyBlockWidgetDecoration = exports.TypeAheadControl = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var wrapperStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
+  left: "calc(".concat("var(--ds-space-negative-300, -24px)", " + ", "var(--ds-space-negative-100, -8px)", ")")
+});
+var buttonStyles = (0, _primitives.xcss)({
+  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',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: '50%',
+  color: 'color.text',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
+var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref) {
+  var api = _ref.api,
+    getPos = _ref.getPos,
+    formatMessage = _ref.intl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [wrapperStyles]
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: formatMessage(_messages.blockControlsMessages.insert),
+      shortcutOverride: "/"
+    })
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    type: "button",
+    "aria-label": formatMessage(_messages.blockControlsMessages.insert),
+    xcss: [buttonStyles],
+    onClick: function onClick() {
+      var _api$core, _api$quickInsert;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        var start = getPos();
+        if (!start) {
+          return null;
+        }
+        return tr.setSelection(_state.TextSelection.create(tr.doc, start));
+      });
+      api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_add.default, {
+    label: "add",
+    size: "medium"
+  }))));
+};
+var TypeAheadControlWithIntl = (0, _reactIntlNext.injectIntl)(TypeAheadControl);
+var toDOM = function toDOM(api, getPos, getIntl) {
+  var element = document.createElement('span');
+  element.contentEditable = 'false';
+  element.setAttribute('style', 'position: relative');
+  element.setAttribute('class', 'empty-block-experiment');
+  element.setAttribute('data-empty-block-experiment', 'true');
+  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+    value: getIntl()
+  }, /*#__PURE__*/(0, _react.createElement)(TypeAheadControlWithIntl, {
+    api: api,
+    getPos: getPos
+  })), element);
+
+  // // This is a hack to ensure that the cursor in Chrome does not take on the height of the widget button.
+  // // Cursor height cannot be controlled via CSS and is handled by the browser.
+  // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
+  var cursorHack = document.createTextNode(_whitespace.ZERO_WIDTH_SPACE);
+  element.appendChild(cursorHack);
+  return element;
+};
+var createEmptyBlockWidgetDecoration = exports.createEmptyBlockWidgetDecoration = function createEmptyBlockWidgetDecoration(selection, api, getIntl) {
+  if (selection instanceof _state.TextSelection && selection.$cursor) {
+    var _$cursor$parent, _$cursor$parent2;
+    var $cursor = selection.$cursor;
+    var depth = $cursor.depth;
+    var cursorAtRoot = depth === 1;
+    var nodeIsEmpty = ((_$cursor$parent = $cursor.parent) === null || _$cursor$parent === void 0 ? void 0 : _$cursor$parent.nodeSize) === 2;
+    var supportedNodeTypes = ['paragraph', 'heading'];
+    if (cursorAtRoot && nodeIsEmpty && supportedNodeTypes.includes((_$cursor$parent2 = $cursor.parent) === null || _$cursor$parent2 === void 0 ? void 0 : _$cursor$parent2.type.name)) {
+      return _view2.Decoration.widget(selection.$cursor.posAtIndex($cursor.depth - 1), function (_view, getPos) {
+        return toDOM(api, getPos, getIntl);
+      }, {
+        key: 'emptyBlockWidgetDecoration',
+        side: -1
+      });
+    }
+  }
+};

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

@@ -10,6 +10,7 @@ var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
+var _globalStyles = require("./empty-block-experiment/global-styles");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -85,7 +86,7 @@ var extendedHoverZoneNested = (0, _react.css)({
   'hr[data-drag-handler-anchor-name]': {
     overflow: 'visible'
   },
-  //Hide psudeo element at top depth level. Leave for nested depths to prevent mouseover loop.
+  //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
   //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
     display: 'none'
@@ -131,6 +132,8 @@ var getTextNodeStyle = function getTextNodeStyle() {
 };
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
+    styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
+      exposure: false
+    }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined]
   });
 };

package/dist/es2019/plugin.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './commands/move-node';
+import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -14,7 +16,14 @@ export const blockControlsPlugin = ({
       plugin: ({
         getIntl
       }) => createPlugin(api, getIntl)
-    }];
+    }, ...(editorExperiment('platform_editor_empty_line_prompt', true, {
+      exposure: true
+    }) ? [{
+      name: 'emptyBlockExperimentPlugin',
+      plugin: ({
+        getIntl
+      }) => createEmptyBlockExperimentPlugin(api, getIntl)
+    }] : [])];
   },
   commands: {
     moveNode: moveNode(api),

package/dist/es2019/pm-plugins/empty-block-experiment.js

@@ -0,0 +1,33 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { createEmptyBlockWidgetDecoration } from '../ui/empty-block-experiment/widget';
+export const emptyBlockExperimentPluginKey = new PluginKey('emptyBlockExperiment');
+const getDecorations = (tr, api, getIntl) => {
+  const widget = createEmptyBlockWidgetDecoration(tr.selection, api, getIntl);
+  if (widget) {
+    return DecorationSet.create(tr.doc, [widget]);
+  }
+  return DecorationSet.empty;
+};
+export const createEmptyBlockExperimentPlugin = (api, getIntl) => {
+  return new SafePlugin({
+    key: emptyBlockExperimentPluginKey,
+    state: {
+      init: (_, _editorState) => ({
+        decorations: DecorationSet.empty
+      }),
+      apply: (tr, _currentState) => {
+        return {
+          decorations: getDecorations(tr, api, getIntl)
+        };
+      }
+    },
+    props: {
+      decorations: state => {
+        var _emptyBlockExperiment;
+        return (_emptyBlockExperiment = emptyBlockExperimentPluginKey.getState(state)) === null || _emptyBlockExperiment === void 0 ? void 0 : _emptyBlockExperiment.decorations;
+      }
+    }
+  });
+};

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

@@ -15,9 +15,16 @@ export const handleMouseOver = (view, event, api) => {
   if (target.classList.contains('ProseMirror')) {
     return false;
   }
-  const rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
+  let rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
+    const tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
+    if (tableElement && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
+      exposure: true
+    })) {
+      rootElement = tableElement;
+    }
     const anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
@@ -34,6 +41,7 @@ export const handleMouseOver = (view, event, api) => {
       const depth = $rootPos.depth;
       const isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
       const isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+
       /**
        * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
        * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
@@ -46,7 +54,6 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }
-    const nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       var _api$core, _api$blockControls2;
       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(rootPos, anchorName, nodeType));

package/dist/es2019/ui/empty-block-experiment/global-styles.js

@@ -0,0 +1,48 @@
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+const emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
+const quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
+const formattingElement = 'div.fabric-editor-block-mark';
+const elementWithEmptyBlockExperiment = `+ p > ${emptyBlockExperimentWidget}, + h1 > ${emptyBlockExperimentWidget}, + h2 > ${emptyBlockExperimentWidget}, + h3 > ${emptyBlockExperimentWidget}, + h4 > ${emptyBlockExperimentWidget}, + h5 > ${emptyBlockExperimentWidget}, + h6 > ${emptyBlockExperimentWidget}`;
+// Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
+const elementWithEmptyBlockExperimentFormatted = `+ ${formattingElement} > p > ${emptyBlockExperimentWidget}, + ${formattingElement} > h1 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h2 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h3 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h4 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h5 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h6 > ${emptyBlockExperimentWidget}`;
+const dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
+const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+
+// Hides the drag handle when the block contains the empty block experiment
+// Override is consistent with how the drag handle is hidden when the block contains a placeholder
+const dragHandleWithInlineNodeStyle = css({
+  [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${elementWithEmptyBlockExperiment}), .ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${elementWithEmptyBlockExperimentFormatted})`]: {
+    display: 'none !important'
+  }
+});
+
+// Alternate styling for hiding the drag handle when the block contains the empty block experiment
+// Override is consistent with a feature-gated bugfix that hides the drag handle when the block contains a placeholder
+/**
+ * Please do not change change transform to display:none, or visibility:hidden
+ * Otherwise it might break composition input for Chrome
+ * https://product-fabric.atlassian.net/browse/ED-24136
+ */
+const dragHandleWithInlineNodeStyleWithChromeFix = css({
+  [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}) ${dragHandleSelector}, ${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}) ${dragHandleSelector}`]: {
+    transform: 'scale(0)'
+  }
+});
+const getDragHandleOverrides = () => {
+  return fg('platform_editor_element_controls_chrome_input_fix') ? dragHandleWithInlineNodeStyleWithChromeFix : dragHandleWithInlineNodeStyle;
+};
+
+/**
+ * Hide the experiment button when it has been activated. (contains quick-insert decoration widget)
+ */
+export const emptyBlockExperimentGlobalStyles = css({
+  [`${emptyBlockExperimentWidget}:has(+ ${quickInsertWidget}) button`]: {
+    transform: 'scale(0)'
+  }
+}, getDragHandleOverrides());

package/dist/es2019/ui/empty-block-experiment/widget.js

@@ -0,0 +1,117 @@
+import React, { createElement } from 'react';
+import ReactDOM from 'react-dom';
+import { injectIntl, RawIntlProvider } from 'react-intl-next';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+const wrapperStyles = xcss({
+  position: 'absolute',
+  top: `calc('50%' - ${"var(--ds-space-150, 12px)"})`,
+  left: `calc(${"var(--ds-space-negative-300, -24px)"} + ${"var(--ds-space-negative-100, -8px)"})`
+});
+const buttonStyles = xcss({
+  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',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: '50%',
+  color: 'color.text',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});
+export const TypeAheadControl = ({
+  api,
+  getPos,
+  intl: {
+    formatMessage
+  }
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [wrapperStyles]
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.insert),
+      shortcutOverride: "/"
+    })
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    type: "button",
+    "aria-label": formatMessage(messages.insert),
+    xcss: [buttonStyles],
+    onClick: () => {
+      var _api$core, _api$quickInsert;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+        tr
+      }) => {
+        const start = getPos();
+        if (!start) {
+          return null;
+        }
+        return tr.setSelection(TextSelection.create(tr.doc, start));
+      });
+      api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
+    }
+  }, /*#__PURE__*/React.createElement(EditorAddIcon, {
+    label: "add",
+    size: "medium"
+  }))));
+};
+const TypeAheadControlWithIntl = injectIntl(TypeAheadControl);
+const toDOM = (api, getPos, getIntl) => {
+  const element = document.createElement('span');
+  element.contentEditable = 'false';
+  element.setAttribute('style', 'position: relative');
+  element.setAttribute('class', 'empty-block-experiment');
+  element.setAttribute('data-empty-block-experiment', 'true');
+  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+    value: getIntl()
+  }, /*#__PURE__*/createElement(TypeAheadControlWithIntl, {
+    api,
+    getPos
+  })), element);
+
+  // // This is a hack to ensure that the cursor in Chrome does not take on the height of the widget button.
+  // // Cursor height cannot be controlled via CSS and is handled by the browser.
+  // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
+  const cursorHack = document.createTextNode(ZERO_WIDTH_SPACE);
+  element.appendChild(cursorHack);
+  return element;
+};
+export const createEmptyBlockWidgetDecoration = (selection, api, getIntl) => {
+  if (selection instanceof TextSelection && selection.$cursor) {
+    var _$cursor$parent, _$cursor$parent2;
+    const {
+      $cursor
+    } = selection;
+    const {
+      depth
+    } = $cursor;
+    const cursorAtRoot = depth === 1;
+    const nodeIsEmpty = ((_$cursor$parent = $cursor.parent) === null || _$cursor$parent === void 0 ? void 0 : _$cursor$parent.nodeSize) === 2;
+    const supportedNodeTypes = ['paragraph', 'heading'];
+    if (cursorAtRoot && nodeIsEmpty && supportedNodeTypes.includes((_$cursor$parent2 = $cursor.parent) === null || _$cursor$parent2 === void 0 ? void 0 : _$cursor$parent2.type.name)) {
+      return Decoration.widget(selection.$cursor.posAtIndex($cursor.depth - 1), (_view, getPos) => toDOM(api, getPos, getIntl), {
+        key: 'emptyBlockWidgetDecoration',
+        side: -1
+      });
+    }
+  }
+};

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

@@ -7,6 +7,7 @@ import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
 const extendedHoverZone = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
@@ -76,7 +77,7 @@ const extendedHoverZoneNested = css({
   'hr[data-drag-handler-anchor-name]': {
     overflow: 'visible'
   },
-  //Hide psudeo element at top depth level. Leave for nested depths to prevent mouseover loop.
+  //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
   //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
     display: 'none'
@@ -135,6 +136,8 @@ const getTextNodeStyle = () => {
 };
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
+    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+      exposure: false
+    }) ? emptyBlockExperimentGlobalStyles : undefined]
   });
 };

package/dist/esm/plugin.js

@@ -1,5 +1,8 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './commands/move-node';
+import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
@@ -15,13 +18,21 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           var getIntl = _ref2.getIntl;
           return createPlugin(api, getIntl);
         }
-      }];
+      }].concat(_toConsumableArray(editorExperiment('platform_editor_empty_line_prompt', true, {
+        exposure: true
+      }) ? [{
+        name: 'emptyBlockExperimentPlugin',
+        plugin: function plugin(_ref3) {
+          var getIntl = _ref3.getIntl;
+          return createEmptyBlockExperimentPlugin(api, getIntl);
+        }
+      }] : []));
     },
     commands: {
       moveNode: moveNode(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref4) {
+          var tr = _ref4.tr;
           tr.setMeta(key, {
             activeNode: {
               pos: pos,
@@ -34,8 +45,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         };
       },
       setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
-        return function (_ref4) {
-          var tr = _ref4.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           if (pos === undefined) {
             return tr;
           }

package/dist/esm/pm-plugins/empty-block-experiment.js

@@ -0,0 +1,35 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { createEmptyBlockWidgetDecoration } from '../ui/empty-block-experiment/widget';
+export var emptyBlockExperimentPluginKey = new PluginKey('emptyBlockExperiment');
+var getDecorations = function getDecorations(tr, api, getIntl) {
+  var widget = createEmptyBlockWidgetDecoration(tr.selection, api, getIntl);
+  if (widget) {
+    return DecorationSet.create(tr.doc, [widget]);
+  }
+  return DecorationSet.empty;
+};
+export var createEmptyBlockExperimentPlugin = function createEmptyBlockExperimentPlugin(api, getIntl) {
+  return new SafePlugin({
+    key: emptyBlockExperimentPluginKey,
+    state: {
+      init: function init(_, _editorState) {
+        return {
+          decorations: DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, _currentState) {
+        return {
+          decorations: getDecorations(tr, api, getIntl)
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _emptyBlockExperiment;
+        return (_emptyBlockExperiment = emptyBlockExperimentPluginKey.getState(state)) === null || _emptyBlockExperiment === void 0 ? void 0 : _emptyBlockExperiment.decorations;
+      }
+    }
+  });
+};

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

@@ -16,7 +16,14 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest('[data-drag-handler-anchor-name]');
   if (rootElement) {
+    var tableElement = rootElement.closest('[data-drag-handler-node-type="table"]');
+    if (tableElement && editorExperiment('nested-dnd', true) && editorExperiment('table-nested-dnd', false, {
+      exposure: true
+    })) {
+      rootElement = tableElement;
+    }
     var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
+    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) === anchorName) {
       return false;
     }
@@ -33,6 +40,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       var depth = $rootPos.depth;
       var isParentAnIsolatingNode = ((_$rootPos$parent = $rootPos.parent) === null || _$rootPos$parent === void 0 ? void 0 : _$rootPos$parent.type.name) !== 'doc' && ((_$rootPos$parent2 = $rootPos.parent) === null || _$rootPos$parent2 === void 0 ? void 0 : _$rootPos$parent2.type.spec.isolating);
       var isCurrentNodeAtom = (_$rootPos$nodeAfter = $rootPos.nodeAfter) === null || _$rootPos$nodeAfter === void 0 ? void 0 : _$rootPos$nodeAfter.isAtom;
+
       /**
        * If the parent node is an isolating node, the sides of nodes of this type are considered boundaries, such as a table cell.
        * And the current node, as a direct child, is an atom node, meaning it does not have directly editable content.
@@ -45,7 +53,6 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     } else {
       rootPos = view.state.doc.resolve(pos).start(1) - 1;
     }
-    var nodeType = rootElement.getAttribute('data-drag-handler-node-type');
     if (nodeType) {
       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(rootPos, anchorName, nodeType));

package/dist/esm/ui/empty-block-experiment/global-styles.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
+var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
+var formattingElement = 'div.fabric-editor-block-mark';
+var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
+// Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
+var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
+var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
+var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
+
+// Hides the drag handle when the block contains the empty block experiment
+// Override is consistent with how the drag handle is hidden when the block contains a placeholder
+var dragHandleWithInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(elementWithEmptyBlockExperiment, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(elementWithEmptyBlockExperimentFormatted, ")"), {
+  display: 'none !important'
+}));
+
+// Alternate styling for hiding the drag handle when the block contains the empty block experiment
+// Override is consistent with a feature-gated bugfix that hides the drag handle when the block contains a placeholder
+/**
+ * Please do not change change transform to display:none, or visibility:hidden
+ * Otherwise it might break composition input for Chrome
+ * https://product-fabric.atlassian.net/browse/ED-24136
+ */
+var dragHandleWithInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ", ").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector), {
+  transform: 'scale(0)'
+}));
+var getDragHandleOverrides = function getDragHandleOverrides() {
+  return fg('platform_editor_element_controls_chrome_input_fix') ? dragHandleWithInlineNodeStyleWithChromeFix : dragHandleWithInlineNodeStyle;
+};
+
+/**
+ * Hide the experiment button when it has been activated. (contains quick-insert decoration widget)
+ */
+export var emptyBlockExperimentGlobalStyles = css(_defineProperty({}, "".concat(emptyBlockExperimentWidget, ":has(+ ").concat(quickInsertWidget, ") button"), {
+  transform: 'scale(0)'
+}), getDragHandleOverrides());

package/dist/esm/ui/empty-block-experiment/widget.js

@@ -0,0 +1,111 @@
+import React, { createElement } from 'react';
+import ReactDOM from 'react-dom';
+import { injectIntl, RawIntlProvider } from 'react-intl-next';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+var wrapperStyles = xcss({
+  position: 'absolute',
+  top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
+  left: "calc(".concat("var(--ds-space-negative-300, -24px)", " + ", "var(--ds-space-negative-100, -8px)", ")")
+});
+var buttonStyles = xcss({
+  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',
+  backgroundColor: 'color.background.neutral',
+  borderRadius: '50%',
+  color: 'color.text',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
+export var TypeAheadControl = function TypeAheadControl(_ref) {
+  var api = _ref.api,
+    getPos = _ref.getPos,
+    formatMessage = _ref.intl.formatMessage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [wrapperStyles]
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.insert),
+      shortcutOverride: "/"
+    })
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    type: "button",
+    "aria-label": formatMessage(messages.insert),
+    xcss: [buttonStyles],
+    onClick: function onClick() {
+      var _api$core, _api$quickInsert;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        var start = getPos();
+        if (!start) {
+          return null;
+        }
+        return tr.setSelection(TextSelection.create(tr.doc, start));
+      });
+      api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+    }
+  }, /*#__PURE__*/React.createElement(EditorAddIcon, {
+    label: "add",
+    size: "medium"
+  }))));
+};
+var TypeAheadControlWithIntl = injectIntl(TypeAheadControl);
+var toDOM = function toDOM(api, getPos, getIntl) {
+  var element = document.createElement('span');
+  element.contentEditable = 'false';
+  element.setAttribute('style', 'position: relative');
+  element.setAttribute('class', 'empty-block-experiment');
+  element.setAttribute('data-empty-block-experiment', 'true');
+  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+    value: getIntl()
+  }, /*#__PURE__*/createElement(TypeAheadControlWithIntl, {
+    api: api,
+    getPos: getPos
+  })), element);
+
+  // // This is a hack to ensure that the cursor in Chrome does not take on the height of the widget button.
+  // // Cursor height cannot be controlled via CSS and is handled by the browser.
+  // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
+  var cursorHack = document.createTextNode(ZERO_WIDTH_SPACE);
+  element.appendChild(cursorHack);
+  return element;
+};
+export var createEmptyBlockWidgetDecoration = function createEmptyBlockWidgetDecoration(selection, api, getIntl) {
+  if (selection instanceof TextSelection && selection.$cursor) {
+    var _$cursor$parent, _$cursor$parent2;
+    var $cursor = selection.$cursor;
+    var depth = $cursor.depth;
+    var cursorAtRoot = depth === 1;
+    var nodeIsEmpty = ((_$cursor$parent = $cursor.parent) === null || _$cursor$parent === void 0 ? void 0 : _$cursor$parent.nodeSize) === 2;
+    var supportedNodeTypes = ['paragraph', 'heading'];
+    if (cursorAtRoot && nodeIsEmpty && supportedNodeTypes.includes((_$cursor$parent2 = $cursor.parent) === null || _$cursor$parent2 === void 0 ? void 0 : _$cursor$parent2.type.name)) {
+      return Decoration.widget(selection.$cursor.posAtIndex($cursor.depth - 1), function (_view, getPos) {
+        return toDOM(api, getPos, getIntl);
+      }, {
+        key: 'emptyBlockWidgetDecoration',
+        side: -1
+      });
+    }
+  }
+};

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

@@ -8,6 +8,7 @@ import { css, Global, jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { emptyBlockExperimentGlobalStyles } from './empty-block-experiment/global-styles';
 var extendedHoverZone = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
@@ -77,7 +78,7 @@ var extendedHoverZoneNested = css({
   'hr[data-drag-handler-anchor-name]': {
     overflow: 'visible'
   },
-  //Hide psudeo element at top depth level. Leave for nested depths to prevent mouseover loop.
+  //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
   //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
     display: 'none'
@@ -123,6 +124,8 @@ var getTextNodeStyle = function getTextNodeStyle() {
 };
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
+    styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, editorExperiment('platform_editor_empty_line_prompt', true, {
+      exposure: false
+    }) ? emptyBlockExperimentGlobalStyles : undefined]
   });
 };

package/dist/types/pm-plugins/empty-block-experiment.d.ts

@@ -0,0 +1,13 @@
+import { type IntlShape } from 'react-intl-next';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { type BlockControlsPlugin } from '../types';
+export declare const emptyBlockExperimentPluginKey: PluginKey<EmptyBlockExperimentState>;
+export type EmptyBlockExperimentState = {
+    decorations: DecorationSet;
+};
+export declare const createEmptyBlockExperimentPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<{
+    decorations: DecorationSet;
+}>;

package/dist/types/types.d.ts

@@ -5,6 +5,7 @@ import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibi
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { QuickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
@@ -51,7 +52,12 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         OptionalPlugin<WidthPlugin>,
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<AccessibilityUtilsPlugin>
+        OptionalPlugin<AccessibilityUtilsPlugin>,
+        /**
+         * For Typeahead - Empty line prompt experiment
+         * Clean up ticket ED-24824
+         */
+        OptionalPlugin<QuickInsertPlugin>
     ];
     sharedState: BlockControlsSharedState;
     commands: {

package/dist/types/ui/empty-block-experiment/global-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hide the experiment button when it has been activated. (contains quick-insert decoration widget)
+ */
+export declare const emptyBlockExperimentGlobalStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/empty-block-experiment/widget.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type IntlShape, type WrappedComponentProps } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type Selection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { type BlockControlsPlugin } from '../../types';
+type Props = {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    getPos: () => number | undefined;
+};
+export declare const TypeAheadControl: ({ api, getPos, intl: { formatMessage }, }: Props & WrappedComponentProps) => JSX.Element;
+export declare const createEmptyBlockWidgetDecoration: (selection: Selection, api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => Decoration | undefined;
+export {};

package/dist/types-ts4.5/pm-plugins/empty-block-experiment.d.ts

@@ -0,0 +1,13 @@
+import { type IntlShape } from 'react-intl-next';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { type BlockControlsPlugin } from '../types';
+export declare const emptyBlockExperimentPluginKey: PluginKey<EmptyBlockExperimentState>;
+export type EmptyBlockExperimentState = {
+    decorations: DecorationSet;
+};
+export declare const createEmptyBlockExperimentPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<{
+    decorations: DecorationSet;
+}>;

package/dist/types-ts4.5/types.d.ts

@@ -5,6 +5,7 @@ import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibi
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { QuickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
@@ -51,7 +52,12 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         OptionalPlugin<WidthPlugin>,
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<AccessibilityUtilsPlugin>
+        OptionalPlugin<AccessibilityUtilsPlugin>,
+        /**
+         * For Typeahead - Empty line prompt experiment
+         * Clean up ticket ED-24824
+         */
+        OptionalPlugin<QuickInsertPlugin>
     ];
     sharedState: BlockControlsSharedState;
     commands: {

package/dist/types-ts4.5/ui/empty-block-experiment/global-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hide the experiment button when it has been activated. (contains quick-insert decoration widget)
+ */
+export declare const emptyBlockExperimentGlobalStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/empty-block-experiment/widget.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type IntlShape, type WrappedComponentProps } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type Selection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { type BlockControlsPlugin } from '../../types';
+type Props = {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    getPos: () => number | undefined;
+};
+export declare const TypeAheadControl: ({ api, getPos, intl: { formatMessage }, }: Props & WrappedComponentProps) => JSX.Element;
+export declare const createEmptyBlockWidgetDecoration: (selection: Selection, api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => Decoration | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.12.9",
+	"version": "1.13.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,11 +29,12 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^88.8.0",
+		"@atlaskit/editor-common": "^88.9.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
+		"@atlaskit/editor-plugin-quick-insert": "^1.3.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
@@ -43,6 +44,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.1.0",
 		"@atlaskit/tokens": "^1.59.0",