@atlaskit/editor-plugin-block-controls 2.13.11 → 2.13.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.13.11",
+	"version": "2.13.13",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.16.0",
+		"@atlaskit/editor-common": "^94.21.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -46,9 +46,9 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
-		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.12.0",
+		"@atlaskit/tmp-editor-statsig": "^2.15.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
@@ -130,9 +130,6 @@
 		"platform_editor_element_drag_and_drop_ed_24885": {
 			"type": "boolean"
 		},
-		"platform_editor_empty_line_prompt_delay": {
-			"type": "boolean"
-		},
 		"platform_editor_element_dnd_nested_fix_patch_1": {
 			"type": "boolean"
 		},

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

@@ -1,46 +0,0 @@
-"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 _api$editorDisabled;
-  var isEditorDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
-  if (isEditorDisabled) {
-    return _view.DecorationSet.empty;
-  }
-  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/ui/empty-block-experiment/global-styles.js

@@ -1,66 +0,0 @@
-"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 markFragment = 'div[data-mark-type="fragment"]';
-var breakoutMark = 'div.fabric-editor-breakout-mark';
-var breakoutMarkDom = 'div.fabric-editor-breakout-mark-dom';
-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)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, "),\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, "),") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
-// is nested in the previous div. These selectors are to handle those cases.
-// -------------------
-// Empty block in new paragraph after indent
-"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after table
-"".concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after breakout mark
-"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child,\n\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child"), {
-  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, ",\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector, ",") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
-// is nested in the previous div. These selectors are to handle those cases.
-// -------------------
-// Empty block in new paragraph after indent
-"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after table
-"".concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after breakout mark
-"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").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

@@ -1,144 +0,0 @@
-"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-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 && {}.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; }
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
-
-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 appear = (0, _react2.keyframes)({
-  from: {
-    visibility: 'hidden'
-  },
-  to: {
-    visibility: 'visible'
-  }
-});
-var delayedAppearance = (0, _primitives.xcss)({
-  visibility: 'hidden',
-  animation: "".concat(appear, " 0.1s"),
-  animationDelay: '2s',
-  animationFillMode: 'forwards'
-});
-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.accent.gray',
-  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],
-    testId: "editor-empty-line-prompt-experiment"
-  }, /*#__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].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])),
-    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 wrapper = document.createElement('span');
-  wrapper.contentEditable = 'false';
-  wrapper.setAttribute('data-empty-block-experiment', 'true');
-  wrapper.setAttribute('class', 'empty-block-experiment');
-  var element = document.createElement('span');
-  element.contentEditable = 'false';
-  element.setAttribute('style', 'position: absolute;');
-  wrapper.appendChild(element);
-  _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);
-  wrapper.appendChild(cursorHack);
-  return wrapper;
-};
-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/es2019/pm-plugins/empty-block-experiment.js

@@ -1,38 +0,0 @@
-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) => {
-  var _api$editorDisabled, _api$editorDisabled$s;
-  const isEditorDisabled = api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled;
-  if (isEditorDisabled) {
-    return DecorationSet.empty;
-  }
-  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/ui/empty-block-experiment/global-styles.js

@@ -1,77 +0,0 @@
-/* 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 markFragment = 'div[data-mark-type="fragment"]';
-const breakoutMark = 'div.fabric-editor-breakout-mark';
-const breakoutMarkDom = 'div.fabric-editor-breakout-mark-dom';
-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({
-  [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}),
-		${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}),` +
-  // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
-  // is nested in the previous div. These selectors are to handle those cases.
-  // -------------------
-  // Empty block in new paragraph after indent
-  `${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
-	${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child,` +
-  // Empty block in new paragraph after table
-  `${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
-		${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child,` +
-  // Empty block in new paragraph after breakout mark
-  `${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child,
-	${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child`]: {
-    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},` +
-  // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
-  // is nested in the previous div. These selectors are to handle those cases.
-  // -------------------
-  // Empty block in new paragraph after indent
-  `${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
-	${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector},` +
-  // Empty block in new paragraph after table
-  `${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
-		${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector},` +
-  // Empty block in new paragraph after breakout mark
-  `${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child ${dragHandleSelector},
-		${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child ${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

@@ -1,138 +0,0 @@
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
-import React, { createElement } from 'react';
-import { keyframes } from '@emotion/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 { fg } from '@atlaskit/platform-feature-flags';
-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 appear = keyframes({
-  from: {
-    visibility: 'hidden'
-  },
-  to: {
-    visibility: 'visible'
-  }
-});
-const delayedAppearance = xcss({
-  visibility: 'hidden',
-  animation: `${appear} 0.1s`,
-  animationDelay: '2s',
-  animationFillMode: 'forwards'
-});
-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.accent.gray',
-  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],
-    testId: "editor-empty-line-prompt-experiment"
-  }, /*#__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, ...(fg('platform_editor_empty_line_prompt_delay') ? [delayedAppearance] : [])],
-    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 wrapper = document.createElement('span');
-  wrapper.contentEditable = 'false';
-  wrapper.setAttribute('data-empty-block-experiment', 'true');
-  wrapper.setAttribute('class', 'empty-block-experiment');
-  const element = document.createElement('span');
-  element.contentEditable = 'false';
-  element.setAttribute('style', 'position: absolute;');
-  wrapper.appendChild(element);
-  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);
-  wrapper.appendChild(cursorHack);
-  return wrapper;
-};
-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/esm/pm-plugins/empty-block-experiment.js

@@ -1,40 +0,0 @@
-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 _api$editorDisabled;
-  var isEditorDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
-  if (isEditorDisabled) {
-    return DecorationSet.empty;
-  }
-  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;
-      }
-    }
-  });
-};