@atlaskit/editor-plugin-block-controls 1.12.10 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.13.1
+
+### Patch Changes
+
+- [#137849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137849)
+  [`005c00c30884a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/005c00c30884a) -
+  ED-24874 Only disable dragging top level nested nodes in tables
+- [#137156](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137156)
+  [`eccceae25389f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eccceae25389f) -
+  [ux] Don't show drop target in final container position if proceeded by empty paragraph, replace
+  it if only empty paragraph
+- [#137755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137755)
+  [`f3d004d4e3a3e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3d004d4e3a3e) -
+  ED-24650 fix nested node jittering issue
+- Updated dependencies
+
+## 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

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

@@ -10,12 +10,13 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../consts");
 var _main = require("../pm-plugins/main");
-var _utils2 = require("../utils");
+var _utils3 = require("../utils");
 var _validation = require("../utils/validation");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; }
@@ -56,12 +57,12 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
     // 1. drag handle of the node is focused
     currentNodePos = activeNode.pos;
-  } else if ((0, _utils.isInTable)(state)) {
-    if ((0, _utils.isTableSelected)(selection)) {
+  } else if ((0, _utils2.isInTable)(state)) {
+    if ((0, _utils2.isTableSelected)(selection)) {
       var _findTable$pos, _findTable;
       // We only move table node if it's fully selected
       // to avoid shortcut collision with table drag and drop
-      currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+      currentNodePos = (_findTable$pos = (_findTable = (0, _utils2.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
     }
   } else if (!(state.selection instanceof _selection.GapCursorSelection)) {
     // 2. caret cursor is inside the node
@@ -108,7 +109,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         // If the node is first/last one, only select the node
         api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
           var tr = _ref3.tr;
-          (0, _utils2.selectNode)(tr, currentNodePos, nodeType);
+          (0, _utils3.selectNode)(tr, currentNodePos, nodeType);
           tr.scrollIntoView();
           return tr;
         });
@@ -134,7 +135,6 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var end = start + size;
       var mappedTo;
       if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-        var _transformSourceSlice;
         var nodeCopy = tr.doc.slice(start, end, false); // cut the content
         var $to = tr.doc.resolve(to);
         var $from = tr.doc.resolve(start);
@@ -143,20 +143,28 @@ var moveNode = exports.moveNode = function moveNode(api) {
         if (!(0, _validation.canMoveNodeToIndex)(destParent, $to.index(), $from.node().child($from.index()))) {
           return tr;
         }
-        var convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
+        var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
+        var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
         if (!convertedNode) {
           return tr;
         }
         tr.delete(start, end); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
-        tr.insert(mappedTo, convertedNode); // insert the content at the new position
+        var isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && (0, _utils.isEmptyParagraph)($to.nodeAfter);
+        if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
+          // if only a single empty paragraph within container, replace it
+          tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
+        } else {
+          // otherwise just insert the content at the new position
+          tr.insert(mappedTo, convertedNode);
+        }
       } else {
         var _nodeCopy = tr.doc.content.cut(start, end); // cut the content
         tr.delete(start, end); // delete the content from the original position
         mappedTo = tr.mapping.map(to);
         tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
       }
-      tr = (0, _utils2.selectNode)(tr, mappedTo, node.type.name);
+      tr = (0, _utils3.selectNode)(tr, mappedTo, node.type.name);
       tr.setMeta(_main.key, {
         nodeMoved: true
       });

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/decorations.js

@@ -13,6 +13,7 @@ var _bindEventListener = require("bind-event-listener");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
+var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
@@ -48,7 +49,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
     var depth = 0;
-    // drop target dco at the end position
+    // drop target deco at the end position
     var endPosDeco = null;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
@@ -71,7 +72,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         id: pos,
         pos: pos
       });
-      if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
+      if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
         var endpos = pos + node.nodeSize;
         endPosDeco = {
           id: endpos,

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,11 +22,12 @@ 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, {
+    var _rootElement$parentEl;
+    var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
+    if (parentElement && parentElement.getAttribute('data-drag-handler-node-type') === 'table' && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _experiments.editorExperiment)('table-nested-dnd', false, {
       exposure: true
     })) {
-      rootElement = tableElement;
+      rootElement = parentElement;
     }
     var anchorName = rootElement.getAttribute('data-drag-handler-anchor-name');
     var nodeType = rootElement.getAttribute('data-drag-handler-node-type');

package/dist/cjs/ui/drop-target.js

@@ -24,12 +24,12 @@ var _consts = require("./consts");
 
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
-var EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
+var EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN = '--editor-block-controls-drop-indicator-leftMargin';
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
-  marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0))"),
-  paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, ", 0)"),
+  marginLeft: "calc(-1 * var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0))"),
+  paddingLeft: "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, ", 0)"),
   position: 'absolute',
   left: '0',
   display: 'block',
@@ -78,7 +78,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
   return marginLookupMap[offset];
 };
 var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
-  var _widthStyle;
+  var _dynamicStyle;
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
@@ -139,9 +139,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
     }
     return getDropTargetOffsetStyle(prevNode, nextNode);
   }, [prevNode, nextNode, parentNode]);
-  var widthStyle = (_widthStyle = {
+  var dynamicStyle = (_dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%'
-  }, (0, _defineProperty2.default)(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_widthStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _widthStyle);
+  }, (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), _dynamicStyle);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {
@@ -149,7 +149,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
       css: [styleDropTarget, dropTargetOffsetStyle, isNestedDropTarget && nestedDropIndicatorStyle]
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
-      style: widthStyle,
+      style: dynamicStyle,
       ref: ref,
       "data-testid": "block-ctrl-drop-target"
     },

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'
@@ -108,7 +109,13 @@ var withInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".Pr
 var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector, ",\n\t  ").concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector), {
   transform: 'scale(0)'
 }));
-var globalStyles = (0, _react.css)({
+var globalStyles = (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: '0 !important'
+  }
+}) : (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -131,6 +138,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/commands/move-node.js

@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -128,7 +129,6 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   const end = start + size;
   let mappedTo;
   if (editorExperiment('nested-dnd', true)) {
-    var _transformSourceSlice;
     const nodeCopy = tr.doc.slice(start, end, false); // cut the content
     const $to = tr.doc.resolve(to);
     const $from = tr.doc.resolve(start);
@@ -137,13 +137,21 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     if (!canMoveNodeToIndex(destParent, $to.index(), $from.node().child($from.index()))) {
       return tr;
     }
-    const convertedNode = (_transformSourceSlice = transformSourceSlice(nodeCopy, destType)) === null || _transformSourceSlice === void 0 ? void 0 : _transformSourceSlice.content;
+    const convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
+    const convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
     if (!convertedNode) {
       return tr;
     }
     tr.delete(start, end); // delete the content from the original position
     mappedTo = tr.mapping.map(to);
-    tr.insert(mappedTo, convertedNode); // insert the content at the new position
+    const isDestNestedLoneEmptyParagraph = destParent.type.name !== 'doc' && destParent.childCount === 1 && isEmptyParagraph($to.nodeAfter);
+    if (convertedNodeSlice && isDestNestedLoneEmptyParagraph) {
+      // if only a single empty paragraph within container, replace it
+      tr.replace(mappedTo, mappedTo + 1, convertedNodeSlice);
+    } else {
+      // otherwise just insert the content at the new position
+      tr.insert(mappedTo, convertedNode);
+    }
   } else {
     const nodeCopy = tr.doc.content.cut(start, end); // cut the content
     tr.delete(start, end); // delete the content from the original position

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/decorations.js

@@ -4,6 +4,7 @@ import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle } from '../ui/drag-handle';
@@ -37,7 +38,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
   const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
   newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
     let depth = 0;
-    // drop target dco at the end position
+    // drop target deco at the end position
     let endPosDeco = null;
     if (editorExperiment('nested-dnd', true)) {
       depth = newState.doc.resolve(pos).depth;
@@ -60,7 +61,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
         id: pos,
         pos
       });
-      if (parent.lastChild === node && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
+      if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
         const endpos = pos + node.nodeSize;
         endPosDeco = {
           id: endpos,

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;
+      }
+    }
+  });
+};