@atlaskit/editor-plugin-quick-insert 16.0.1 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 16.1.0
+
+### Minor Changes
+
+- [`5f66a8c3706e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f66a8c3706e3) -
+  Add the registry-backed Block Controls Quick Insert surface behind
+  `platform_editor_block_control_migration`, including typed surface context, cached registry
+  lookup, stable left/right surface identities, and experiment-gated Quick Insert registration.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.0.1
 
 ### Patch Changes

package/dist/cjs/quickInsertPlugin.js

@@ -25,6 +25,7 @@ var _commands = require("./pm-plugins/commands");
 var _quickInsertOpenExperience = require("./pm-plugins/experiences/quick-insert-open-experience");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _getLegacyCompatibleComponents = require("./ui/getLegacyCompatibleComponents");
+var _blockControlQuickInsert = require("./ui/block-control-quick-insert");
 var _getQuickInsertComponents = require("./ui/getQuickInsertComponents");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
 var _RegistryElementBrowser = require("./ui/RegistryElementBrowser");
@@ -106,6 +107,23 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
       isRecommendedItem: options === null || options === void 0 ? void 0 : options.isRecommendedItem
     }));
   }
+  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
+    var _api$uiControlRegistr2;
+    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register((0, _blockControlQuickInsert.getBlockControlQuickInsertComponents)({
+      api: api,
+      getEditorView: function getEditorView() {
+        return refs.editorView;
+      },
+      openTypeAhead: function openTypeAhead() {
+        var _api$typeAhead;
+        return api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+          triggerHandler: typeAhead,
+          inputMethod: 'blockControl',
+          removePrefixTriggerOnCancel: true
+        });
+      }
+    }));
+  }
   var openElementBrowser = function openElementBrowser(options) {
     return function (_ref5) {
       var tr = _ref5.tr;
@@ -157,6 +175,7 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
       var editorView = _ref7.editorView,
         popupsMountPoint = _ref7.popupsMountPoint,
         wrapperElement = _ref7.wrapperElement;
+      refs.editorView = editorView || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || (0, _coreUtils.isSSR)()) {
@@ -195,8 +214,8 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
     actions: {
       insertItem: (0, _commands.createInsertItem)(onInsert),
       openTypeAhead: function openTypeAhead(inputMethod, removePrefixTriggerOnCancel) {
-        var _api$typeAhead;
-        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+        var _api$typeAhead2;
+        return Boolean(api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.open({
           triggerHandler: typeAhead,
           inputMethod: inputMethod,
           removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
@@ -369,7 +388,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
       var isDestroyed = false;
       var providerHandler = /*#__PURE__*/function () {
         var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
-          var provider, providedItems, _api$uiControlRegistr2, directComponents, components, _t, _t2;
+          var provider, providedItems, _api$uiControlRegistr3, directComponents, components, _t, _t2;
           return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -410,7 +429,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                   onInsert: onInsert,
                   providedItems: providedItems
                 });
-                api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(components);
+                api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 || _api$uiControlRegistr3.actions.register(components);
               case 7:
                 setProviderState({
                   provider: provider,

package/dist/cjs/ui/BlockControlQuickInsertButton.compiled.css

@@ -0,0 +1,20 @@
+._19itglyw{border:none}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb9xsi{width:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i9xsi{height:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
+._80omtlke{cursor:pointer}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._vchhusvi{box-sizing:border-box}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/cjs/ui/BlockControlQuickInsertButton.js

@@ -0,0 +1,163 @@
+/* BlockControlQuickInsertButton.tsx generated by @compiled/babel-plugin v2.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.BlockControlQuickInsertButton = void 0;
+require("./BlockControlQuickInsertButton.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
+
+// @atlaskit/css intentionally restricts height and width values, so Compiled owns only the
+// dimensions that scale at runtime with the editor's dense-mode font-size custom property.
+var quickInsertButtonContainerStyles = {
+  root: "_1e0c1txw _4t3i9xsi _1bsb9xsi"
+};
+var quickInsertButtonStyles = {
+  root: "_19itglyw _2rko1rr0 _1rjcze3t _18zrze3t _4cvr1h6o _bfhksm61 _vchhusvi _syazazsu _80omtlke _1e0c1txw _4t3i1osq _1bah1h6o _1bsb1osq _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa _irr31dpa _1di6fcek"
+};
+var createNewLine = function createNewLine(start) {
+  return function (_ref) {
+    var _tr$doc$nodeAt;
+    var tr = _ref.tr;
+    var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+    if (nodeSize === undefined) {
+      return tr;
+    }
+    var position = start + nodeSize;
+    tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+    return tr.setSelection(_state.TextSelection.near(tr.doc.resolve(position)));
+  };
+};
+var isSelectionInNode = function isSelectionInNode(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (!node) {
+    return false;
+  }
+  var _view$state$selection = view.state.selection,
+    $from = _view$state$selection.$from,
+    $to = _view$state$selection.$to;
+  return $from.pos >= start && $to.pos <= start + node.nodeSize;
+};
+var isNonEditableBlock = function isNonEditableBlock(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (!node) {
+    return false;
+  }
+  if (node.type.name === 'mediaGroup' || node.type.name === 'mediaSingle') {
+    return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};
+var openQuickInsert = function openQuickInsert(api, view, start, openTypeAhead) {
+  var isSelectionInsideNode = isSelectionInNode(start, view);
+  if (!isSelectionInsideNode || isNonEditableBlock(start, view)) {
+    api.core.actions.execute(createNewLine(start));
+  }
+  var codeBlock = view.state.schema.nodes.codeBlock;
+  var selection = view.state.selection;
+  var codeBlockParentNode = (0, _utils.findParentNodeOfType)(codeBlock)(selection);
+  if (codeBlockParentNode) {
+    api.core.actions.execute(createNewLine(codeBlockParentNode.pos));
+  } else if (isSelectionInsideNode) {
+    var currentSelection = view.state.selection;
+    if ((currentSelection instanceof _state.TextSelection || currentSelection instanceof _state.NodeSelection && currentSelection.node.isInline) && currentSelection.from !== currentSelection.to) {
+      var currentParagraphNode = (0, _utils.findParentNode)(function (node) {
+        return TEXT_PARENT_TYPES.includes(node.type.name);
+      })(currentSelection);
+      if (currentParagraphNode) {
+        var newPos = currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
+        api.core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          tr.setSelection(_state.TextSelection.create(view.state.selection.$from.doc, newPos));
+          return tr;
+        });
+      }
+    }
+    if (currentSelection instanceof _state.NodeSelection && currentSelection.$from.depth > 0) {
+      if (isNonEditableBlock(view.state.selection.from, view)) {
+        api.core.actions.execute(createNewLine(view.state.selection.from));
+      } else {
+        api.core.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          createNewLine(view.state.selection.from)({
+            tr: tr
+          });
+          tr.setSelection(_state.TextSelection.create(tr.doc, view.state.selection.from));
+          return tr;
+        });
+      }
+    }
+    if (currentSelection instanceof _cellSelection.CellSelection) {
+      var lastInlinePosition = _state.TextSelection.near(view.state.selection.$to, -1);
+      if (lastInlinePosition) {
+        api.core.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
+          if (!(lastInlinePosition instanceof _state.TextSelection)) {
+            createNewLine(lastInlinePosition.from)({
+              tr: tr
+            });
+            tr.setSelection(_state.TextSelection.create(tr.doc, lastInlinePosition.to));
+          } else {
+            tr.setSelection(lastInlinePosition);
+          }
+          return tr;
+        });
+      }
+    }
+  }
+  openTypeAhead();
+};
+var BlockControlQuickInsertButton = exports.BlockControlQuickInsertButton = function BlockControlQuickInsertButton(_ref5) {
+  var api = _ref5.api,
+    openTypeAhead = _ref5.openTypeAhead,
+    start = _ref5.start,
+    view = _ref5.view;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(_messages.blockControlsMessages.insert);
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    var _api$typeAhead;
+    if ((_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && _api$typeAhead.actions.isOpen(view.state)) {
+      api.typeAhead.actions.close({
+        insertCurrentQueryAsRawText: false
+      });
+    }
+  }, [api, view]);
+  var handleClick = (0, _react.useCallback)(function () {
+    return openQuickInsert(api, view, start, openTypeAhead);
+  }, [api, openTypeAhead, start, view]);
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    position: "top",
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: label
+    })
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([quickInsertButtonContainerStyles.root])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    "aria-label": label,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    testId: "editor-quick-insert-button",
+    type: "button",
+    xcss: quickInsertButtonStyles.root
+  }, /*#__PURE__*/_react.default.createElement(_add.default, {
+    label: "",
+    color: "var(--ds-icon-subtle, #505258)",
+    size: "small"
+  }))));
+};

package/dist/cjs/ui/block-control-quick-insert.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockControlQuickInsertComponents = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
+var _BlockControlQuickInsertButton = require("./BlockControlQuickInsertButton");
+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; }
+var getBlockControlQuickInsertComponents = exports.getBlockControlQuickInsertComponents = function getBlockControlQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    getEditorView = _ref.getEditorView,
+    openTypeAhead = _ref.openTypeAhead;
+  return [{
+    key: 'block-controls-quick-insert',
+    type: 'button',
+    parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_GROUP), {}, {
+      rank: 100
+    })],
+    isHidden: function isHidden() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        surfaceContext = _ref2.surfaceContext;
+      return (surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT)) === undefined;
+    },
+    component: function component(_ref3) {
+      var surfaceContext = _ref3.surfaceContext;
+      var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
+      var view = getEditorView();
+      if (!context || !view) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_BlockControlQuickInsertButton.BlockControlQuickInsertButton, {
+        api: api,
+        openTypeAhead: openTypeAhead,
+        start: context.targetNode.pos,
+        view: view
+      });
+    }
+  }];
+};

package/dist/es2019/quickInsertPlugin.js

@@ -14,6 +14,7 @@ import { createInsertItem, openElementBrowser as openElementBrowserCommand, open
 import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { getLegacyCompatibleComponents } from './ui/getLegacyCompatibleComponents';
+import { getBlockControlQuickInsertComponents } from './ui/block-control-quick-insert';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { RegistryElementBrowserContainer } from './ui/RegistryElementBrowser';
@@ -95,6 +96,21 @@ export const quickInsertPlugin = ({
       isRecommendedItem: options === null || options === void 0 ? void 0 : options.isRecommendedItem
     }));
   }
+  if (isExperimentEnabled('platform_editor_block_control_migration')) {
+    var _api$uiControlRegistr2;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register(getBlockControlQuickInsertComponents({
+      api,
+      getEditorView: () => refs.editorView,
+      openTypeAhead: () => {
+        var _api$typeAhead;
+        return api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+          triggerHandler: typeAhead,
+          inputMethod: 'blockControl',
+          removePrefixTriggerOnCancel: true
+        });
+      }
+    }));
+  }
   const openElementBrowser = options => ({
     tr
   }) => {
@@ -143,6 +159,7 @@ export const quickInsertPlugin = ({
       popupsMountPoint,
       wrapperElement
     }) {
+      refs.editorView = editorView || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || isSSR()) {
@@ -181,11 +198,11 @@ export const quickInsertPlugin = ({
     actions: {
       insertItem: createInsertItem(onInsert),
       openTypeAhead(inputMethod, removePrefixTriggerOnCancel) {
-        var _api$typeAhead;
-        return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+        var _api$typeAhead2;
+        return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.open({
           triggerHandler: typeAhead,
           inputMethod,
-          removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
+          removePrefixTriggerOnCancel
         }));
       },
       getSuggestions: searchOptions => {
@@ -340,7 +357,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
             const provider = await providerPromise;
             const providedItems = await provider.getItems();
             if (isExperimentEnabled('platform_editor_slash_command')) {
-              var _api$uiControlRegistr2;
+              var _api$uiControlRegistr3;
               const directComponents = provider.getComponents ? await provider.getComponents() : [];
               const components = getLegacyCompatibleComponents({
                 directComponents,
@@ -348,7 +365,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                 onInsert,
                 providedItems
               });
-              api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register(components);
+              api === null || api === void 0 ? void 0 : (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.register(components);
             }
             setProviderState({
               provider,

package/dist/es2019/ui/BlockControlQuickInsertButton.compiled.css

@@ -0,0 +1,20 @@
+._19itglyw{border:none}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb9xsi{width:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i9xsi{height:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
+._80omtlke{cursor:pointer}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._vchhusvi{box-sizing:border-box}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/es2019/ui/BlockControlQuickInsertButton.js

@@ -0,0 +1,159 @@
+/* BlockControlQuickInsertButton.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./BlockControlQuickInsertButton.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import AddIcon from '@atlaskit/icon/core/add';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
+const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
+
+// @atlaskit/css intentionally restricts height and width values, so Compiled owns only the
+// dimensions that scale at runtime with the editor's dense-mode font-size custom property.
+const quickInsertButtonContainerStyles = {
+  root: "_1e0c1txw _4t3i9xsi _1bsb9xsi"
+};
+const quickInsertButtonStyles = {
+  root: "_19itglyw _2rko1rr0 _1rjcze3t _18zrze3t _4cvr1h6o _bfhksm61 _vchhusvi _syazazsu _80omtlke _1e0c1txw _4t3i1osq _1bah1h6o _1bsb1osq _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa _irr31dpa _1di6fcek"
+};
+const createNewLine = start => ({
+  tr
+}) => {
+  var _tr$doc$nodeAt;
+  const nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+  if (nodeSize === undefined) {
+    return tr;
+  }
+  const position = start + nodeSize;
+  tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+  return tr.setSelection(TextSelection.near(tr.doc.resolve(position)));
+};
+const isSelectionInNode = (start, view) => {
+  const node = view.state.doc.nodeAt(start);
+  if (!node) {
+    return false;
+  }
+  const {
+    $from,
+    $to
+  } = view.state.selection;
+  return $from.pos >= start && $to.pos <= start + node.nodeSize;
+};
+const isNonEditableBlock = (start, view) => {
+  const node = view.state.doc.nodeAt(start);
+  if (!node) {
+    return false;
+  }
+  if (node.type.name === 'mediaGroup' || node.type.name === 'mediaSingle') {
+    return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};
+const openQuickInsert = (api, view, start, openTypeAhead) => {
+  const isSelectionInsideNode = isSelectionInNode(start, view);
+  if (!isSelectionInsideNode || isNonEditableBlock(start, view)) {
+    api.core.actions.execute(createNewLine(start));
+  }
+  const {
+    codeBlock
+  } = view.state.schema.nodes;
+  const {
+    selection
+  } = view.state;
+  const codeBlockParentNode = findParentNodeOfType(codeBlock)(selection);
+  if (codeBlockParentNode) {
+    api.core.actions.execute(createNewLine(codeBlockParentNode.pos));
+  } else if (isSelectionInsideNode) {
+    const currentSelection = view.state.selection;
+    if ((currentSelection instanceof TextSelection || currentSelection instanceof NodeSelection && currentSelection.node.isInline) && currentSelection.from !== currentSelection.to) {
+      const currentParagraphNode = findParentNode(node => TEXT_PARENT_TYPES.includes(node.type.name))(currentSelection);
+      if (currentParagraphNode) {
+        const newPos = currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
+        api.core.actions.execute(({
+          tr
+        }) => {
+          tr.setSelection(TextSelection.create(view.state.selection.$from.doc, newPos));
+          return tr;
+        });
+      }
+    }
+    if (currentSelection instanceof NodeSelection && currentSelection.$from.depth > 0) {
+      if (isNonEditableBlock(view.state.selection.from, view)) {
+        api.core.actions.execute(createNewLine(view.state.selection.from));
+      } else {
+        api.core.actions.execute(({
+          tr
+        }) => {
+          createNewLine(view.state.selection.from)({
+            tr
+          });
+          tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+          return tr;
+        });
+      }
+    }
+    if (currentSelection instanceof CellSelection) {
+      const lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
+      if (lastInlinePosition) {
+        api.core.actions.execute(({
+          tr
+        }) => {
+          if (!(lastInlinePosition instanceof TextSelection)) {
+            createNewLine(lastInlinePosition.from)({
+              tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, lastInlinePosition.to));
+          } else {
+            tr.setSelection(lastInlinePosition);
+          }
+          return tr;
+        });
+      }
+    }
+  }
+  openTypeAhead();
+};
+export const BlockControlQuickInsertButton = ({
+  api,
+  openTypeAhead,
+  start,
+  view
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const label = formatMessage(messages.insert);
+  const handleMouseDown = useCallback(() => {
+    var _api$typeAhead;
+    if ((_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && _api$typeAhead.actions.isOpen(view.state)) {
+      api.typeAhead.actions.close({
+        insertCurrentQueryAsRawText: false
+      });
+    }
+  }, [api, view]);
+  const handleClick = useCallback(() => openQuickInsert(api, view, start, openTypeAhead), [api, openTypeAhead, start, view]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: label
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([quickInsertButtonContainerStyles.root])
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": label,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    testId: "editor-quick-insert-button",
+    type: "button",
+    xcss: quickInsertButtonStyles.root
+  }, /*#__PURE__*/React.createElement(AddIcon, {
+    label: "",
+    color: "var(--ds-icon-subtle, #505258)",
+    size: "small"
+  }))));
+};

package/dist/es2019/ui/block-control-quick-insert.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_GROUP } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BlockControlQuickInsertButton } from './BlockControlQuickInsertButton';
+export const getBlockControlQuickInsertComponents = ({
+  api,
+  getEditorView,
+  openTypeAhead
+}) => [{
+  key: 'block-controls-quick-insert',
+  type: 'button',
+  parents: [{
+    ...BLOCK_CONTROLS_LEFT_GROUP,
+    rank: 100
+  }],
+  isHidden: ({
+    surfaceContext
+  } = {}) => (surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT)) === undefined,
+  component: ({
+    surfaceContext
+  }) => {
+    const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+    const view = getEditorView();
+    if (!context || !view) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(BlockControlQuickInsertButton, {
+      api: api,
+      openTypeAhead: openTypeAhead,
+      start: context.targetNode.pos,
+      view: view
+    });
+  }
+}];

package/dist/esm/quickInsertPlugin.js

@@ -20,6 +20,7 @@ import { createInsertItem, openElementBrowser as openElementBrowserCommand, open
 import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { getLegacyCompatibleComponents } from './ui/getLegacyCompatibleComponents';
+import { getBlockControlQuickInsertComponents } from './ui/block-control-quick-insert';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { RegistryElementBrowserContainer } from './ui/RegistryElementBrowser';
@@ -99,6 +100,23 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
       isRecommendedItem: options === null || options === void 0 ? void 0 : options.isRecommendedItem
     }));
   }
+  if (isExperimentEnabled('platform_editor_block_control_migration')) {
+    var _api$uiControlRegistr2;
+    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(getBlockControlQuickInsertComponents({
+      api: api,
+      getEditorView: function getEditorView() {
+        return refs.editorView;
+      },
+      openTypeAhead: function openTypeAhead() {
+        var _api$typeAhead;
+        return api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+          triggerHandler: typeAhead,
+          inputMethod: 'blockControl',
+          removePrefixTriggerOnCancel: true
+        });
+      }
+    }));
+  }
   var openElementBrowser = function openElementBrowser(options) {
     return function (_ref5) {
       var tr = _ref5.tr;
@@ -150,6 +168,7 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
       var editorView = _ref7.editorView,
         popupsMountPoint = _ref7.popupsMountPoint,
         wrapperElement = _ref7.wrapperElement;
+      refs.editorView = editorView || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || isSSR()) {
@@ -188,8 +207,8 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
     actions: {
       insertItem: createInsertItem(onInsert),
       openTypeAhead: function openTypeAhead(inputMethod, removePrefixTriggerOnCancel) {
-        var _api$typeAhead;
-        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+        var _api$typeAhead2;
+        return Boolean(api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.open({
           triggerHandler: typeAhead,
           inputMethod: inputMethod,
           removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
@@ -362,7 +381,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
       var isDestroyed = false;
       var providerHandler = /*#__PURE__*/function () {
         var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, providerPromise) {
-          var provider, providedItems, _api$uiControlRegistr2, directComponents, components, _t, _t2;
+          var provider, providedItems, _api$uiControlRegistr3, directComponents, components, _t, _t2;
           return _regeneratorRuntime.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -403,7 +422,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                   onInsert: onInsert,
                   providedItems: providedItems
                 });
-                api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(components);
+                api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 || _api$uiControlRegistr3.actions.register(components);
               case 7:
                 setProviderState({
                   provider: provider,

package/dist/esm/ui/BlockControlQuickInsertButton.compiled.css

@@ -0,0 +1,20 @@
+._19itglyw{border:none}
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb9xsi{width:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i9xsi{height:calc(var(--ak-editor-base-font-size, 1pc)*24/16)}
+._80omtlke{cursor:pointer}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._vchhusvi{box-sizing:border-box}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}

package/dist/esm/ui/BlockControlQuickInsertButton.js

@@ -0,0 +1,154 @@
+/* BlockControlQuickInsertButton.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./BlockControlQuickInsertButton.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import AddIcon from '@atlaskit/icon/core/add';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
+var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
+
+// @atlaskit/css intentionally restricts height and width values, so Compiled owns only the
+// dimensions that scale at runtime with the editor's dense-mode font-size custom property.
+var quickInsertButtonContainerStyles = {
+  root: "_1e0c1txw _4t3i9xsi _1bsb9xsi"
+};
+var quickInsertButtonStyles = {
+  root: "_19itglyw _2rko1rr0 _1rjcze3t _18zrze3t _4cvr1h6o _bfhksm61 _vchhusvi _syazazsu _80omtlke _1e0c1txw _4t3i1osq _1bah1h6o _1bsb1osq _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa _irr31dpa _1di6fcek"
+};
+var createNewLine = function createNewLine(start) {
+  return function (_ref) {
+    var _tr$doc$nodeAt;
+    var tr = _ref.tr;
+    var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+    if (nodeSize === undefined) {
+      return tr;
+    }
+    var position = start + nodeSize;
+    tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+    return tr.setSelection(TextSelection.near(tr.doc.resolve(position)));
+  };
+};
+var isSelectionInNode = function isSelectionInNode(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (!node) {
+    return false;
+  }
+  var _view$state$selection = view.state.selection,
+    $from = _view$state$selection.$from,
+    $to = _view$state$selection.$to;
+  return $from.pos >= start && $to.pos <= start + node.nodeSize;
+};
+var isNonEditableBlock = function isNonEditableBlock(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (!node) {
+    return false;
+  }
+  if (node.type.name === 'mediaGroup' || node.type.name === 'mediaSingle') {
+    return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};
+var openQuickInsert = function openQuickInsert(api, view, start, openTypeAhead) {
+  var isSelectionInsideNode = isSelectionInNode(start, view);
+  if (!isSelectionInsideNode || isNonEditableBlock(start, view)) {
+    api.core.actions.execute(createNewLine(start));
+  }
+  var codeBlock = view.state.schema.nodes.codeBlock;
+  var selection = view.state.selection;
+  var codeBlockParentNode = findParentNodeOfType(codeBlock)(selection);
+  if (codeBlockParentNode) {
+    api.core.actions.execute(createNewLine(codeBlockParentNode.pos));
+  } else if (isSelectionInsideNode) {
+    var currentSelection = view.state.selection;
+    if ((currentSelection instanceof TextSelection || currentSelection instanceof NodeSelection && currentSelection.node.isInline) && currentSelection.from !== currentSelection.to) {
+      var currentParagraphNode = findParentNode(function (node) {
+        return TEXT_PARENT_TYPES.includes(node.type.name);
+      })(currentSelection);
+      if (currentParagraphNode) {
+        var newPos = currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
+        api.core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          tr.setSelection(TextSelection.create(view.state.selection.$from.doc, newPos));
+          return tr;
+        });
+      }
+    }
+    if (currentSelection instanceof NodeSelection && currentSelection.$from.depth > 0) {
+      if (isNonEditableBlock(view.state.selection.from, view)) {
+        api.core.actions.execute(createNewLine(view.state.selection.from));
+      } else {
+        api.core.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          createNewLine(view.state.selection.from)({
+            tr: tr
+          });
+          tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+          return tr;
+        });
+      }
+    }
+    if (currentSelection instanceof CellSelection) {
+      var lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
+      if (lastInlinePosition) {
+        api.core.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
+          if (!(lastInlinePosition instanceof TextSelection)) {
+            createNewLine(lastInlinePosition.from)({
+              tr: tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, lastInlinePosition.to));
+          } else {
+            tr.setSelection(lastInlinePosition);
+          }
+          return tr;
+        });
+      }
+    }
+  }
+  openTypeAhead();
+};
+export var BlockControlQuickInsertButton = function BlockControlQuickInsertButton(_ref5) {
+  var api = _ref5.api,
+    openTypeAhead = _ref5.openTypeAhead,
+    start = _ref5.start,
+    view = _ref5.view;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(messages.insert);
+  var handleMouseDown = useCallback(function () {
+    var _api$typeAhead;
+    if ((_api$typeAhead = api.typeAhead) !== null && _api$typeAhead !== void 0 && _api$typeAhead.actions.isOpen(view.state)) {
+      api.typeAhead.actions.close({
+        insertCurrentQueryAsRawText: false
+      });
+    }
+  }, [api, view]);
+  var handleClick = useCallback(function () {
+    return openQuickInsert(api, view, start, openTypeAhead);
+  }, [api, openTypeAhead, start, view]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: label
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([quickInsertButtonContainerStyles.root])
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": label,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    testId: "editor-quick-insert-button",
+    type: "button",
+    xcss: quickInsertButtonStyles.root
+  }, /*#__PURE__*/React.createElement(AddIcon, {
+    label: "",
+    color: "var(--ds-icon-subtle, #505258)",
+    size: "small"
+  }))));
+};

package/dist/esm/ui/block-control-quick-insert.js

@@ -0,0 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_GROUP } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BlockControlQuickInsertButton } from './BlockControlQuickInsertButton';
+export var getBlockControlQuickInsertComponents = function getBlockControlQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    getEditorView = _ref.getEditorView,
+    openTypeAhead = _ref.openTypeAhead;
+  return [{
+    key: 'block-controls-quick-insert',
+    type: 'button',
+    parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_GROUP), {}, {
+      rank: 100
+    })],
+    isHidden: function isHidden() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        surfaceContext = _ref2.surfaceContext;
+      return (surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT)) === undefined;
+    },
+    component: function component(_ref3) {
+      var surfaceContext = _ref3.surfaceContext;
+      var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+      var view = getEditorView();
+      if (!context || !view) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(BlockControlQuickInsertButton, {
+        api: api,
+        openTypeAhead: openTypeAhead,
+        start: context.targetNode.pos,
+        view: view
+      });
+    }
+  }];
+};

package/dist/types/ui/BlockControlQuickInsertButton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { QuickInsertPlugin } from '../quickInsertPluginType';
+type Props = {
+    api: ExtractInjectionAPI<QuickInsertPlugin>;
+    openTypeAhead: () => void;
+    start: number;
+    view: EditorView;
+};
+export declare const BlockControlQuickInsertButton: ({ api, openTypeAhead, start, view, }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/block-control-quick-insert.d.ts

@@ -0,0 +1,9 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RegisterButton } from '@atlaskit/editor-ui-control-model/types';
+import type { QuickInsertPlugin } from '../quickInsertPluginType';
+export declare const getBlockControlQuickInsertComponents: ({ api, getEditorView, openTypeAhead, }: {
+    api: ExtractInjectionAPI<QuickInsertPlugin>;
+    getEditorView: () => EditorView | undefined;
+    openTypeAhead: () => void;
+}) => RegisterButton[];

package/dist/types/ui/getLegacyCompatibleComponents.d.ts

@@ -1,7 +1,14 @@
+import React from 'react';
 import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
-import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { CommonComponentProps, RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+type LegacyCompatibleComponentProps = CommonComponentProps & {
+    onInsert?: () => void;
+};
+type LegacyCompatibleRegisterMenuItem = Omit<RegisterMenuItem, 'component'> & {
+    component?: (props: LegacyCompatibleComponentProps) => React.ReactNode;
+};
 type Options = {
-    directComponents: RegisterMenuItem[];
+    directComponents: LegacyCompatibleRegisterMenuItem[];
     itemFilter?: (item: QuickInsertItem) => boolean;
     onInsert: (item: QuickInsertItem) => void;
     providedItems: QuickInsertItem[];

package/dist/types/ui/getQuickInsertComponents.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { RegisterComponent } from '@atlaskit/editor-ui-control-model/types';
+import type { CommonComponentProps, RegisterComponent } from '@atlaskit/editor-ui-control-model/types';
 import type { IsRecommendedItem } from '@atlaskit/editor-common/quick-insert/is-recommended-item';
 import type { QuickInsertPlugin } from '../quickInsertPluginType';
 type Params = {
@@ -7,5 +7,5 @@ type Params = {
     includeElementBrowserItems: boolean;
     isRecommendedItem?: IsRecommendedItem;
 };
-export declare const getQuickInsertComponents: ({ api, includeElementBrowserItems, isRecommendedItem, }: Params) => RegisterComponent[];
+export declare const getQuickInsertComponents: <TProps extends CommonComponentProps = CommonComponentProps>({ api, includeElementBrowserItems, isRecommendedItem, }: Params) => RegisterComponent<TProps>[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "16.0.1",
+	"version": "16.1.0",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,6 +29,7 @@
 		"@atlaskit/editor-plugin-type-ahead": "^17.0.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
+		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/editor-ui-control-model": "^2.8.0",
 		"@atlaskit/heading": "^7.1.0",
 		"@atlaskit/icon": "^37.5.0",
@@ -39,12 +40,13 @@
 		"@atlaskit/textfield": "^10.1.0",
 		"@atlaskit/tmp-editor-statsig": "^161.0.0",
 		"@atlaskit/tokens": "^16.8.0",
+		"@atlaskit/tooltip": "^24.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.0.0",
+		"@atlaskit/editor-common": "^120.1.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"