@atlaskit/editor-plugin-block-controls 3.15.10 → 3.15.12

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.15.12
+
+### Patch Changes
+
+- [#162142](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/162142)
+  [`b92367d4d728b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b92367d4d728b) -
+  Migrating the quick insert decoration button to vanilla javascript to improve performance
+- Updated dependencies
+
+## 3.15.11
+
+### Patch Changes
+
+- [#166480](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166480)
+  [`55d4dbd11d97d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55d4dbd11d97d) -
+  Add 'marks: []' to both widgets to ensure PM renders them at the top level document, not inside
+  sibling elements wrapped with marks
+- Updated dependencies
+
 ## 3.15.10
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -37,6 +37,34 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   }
   var unbind;
   var key = (0, _uuid.default)();
+  var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
+    side: -1,
+    type: _decorationsCommon.TYPE_HANDLE_DEC,
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
+    }
+  } : {
+    side: -1,
+    type: _decorationsCommon.TYPE_HANDLE_DEC,
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    destroy: function destroy(node) {
+      unbind && unbind();
+      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
+    }
+  };
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
     var element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
@@ -126,15 +154,5 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       }), element);
     }
     return element;
-  }, {
-    side: -1,
-    type: _decorationsCommon.TYPE_HANDLE_DEC,
-    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
-    destroy: function destroy(node) {
-      unbind && unbind();
-      if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        _reactDom.default.unmountComponentAtNode(node);
-      }
-    }
-  });
+  }, widgetSpec);
 };

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -9,7 +9,9 @@ var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
+var _vanillaQuickInsert = require("./vanilla-quick-insert");
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
@@ -18,11 +20,59 @@ var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonD
 };
 var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
   var key = (0, _uuid.default)();
+  var cleanupCallbacks = [];
+  var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    /**
+     * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
+     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
+     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
+     * this exact position at the top of the DOM.
+     */
+    marks: [],
+    destroy: function destroy(_) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+      cleanupCallbacks.forEach(function (cb) {
+        cb();
+      });
+    }
+  } : {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    destroy: function destroy(_) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+      cleanupCallbacks.forEach(function (cb) {
+        cb();
+      });
+    }
+  };
   return _view.Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
+    if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
+      exposure: true
+    })) {
+      var vanillaElement = (0, _vanillaQuickInsert.createVanillaButton)({
+        formatMessage: formatMessage,
+        api: api,
+        view: view,
+        getPos: getPos,
+        cleanupCallbacks: cleanupCallbacks,
+        rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
+        anchorName: anchorName,
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+        anchorRectCache: anchorRectCache
+      });
+      element.appendChild(vanillaElement);
+      return element;
+    }
 
     // all changes already under experiment
     if ((0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
@@ -55,13 +105,5 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
       }, element, key);
     }
     return element;
-  }, {
-    side: -2,
-    type: TYPE_QUICK_INSERT,
-    destroy: function destroy(_) {
-      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
-    }
-  });
+  }, widgetSpec);
 };

package/dist/cjs/pm-plugins/quick-insert-calculate-position.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculatePosition = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _consts = require("../ui/consts");
+var _anchorName = require("../ui/utils/anchor-name");
+var _dragHandlePositions = require("./utils/drag-handle-positions");
+var _widgetPositions = require("./utils/widget-positions");
+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; }
+// Adapted from `src/ui/drag-handle.tsx` as positioning logic is similar
+// CHANGES - added an offset so quick insert button can be positioned beside drag handle
+// CHANGES - removed `editorExperiment('nested-dnd', true)` check and rootNodeType calculation
+// CHANGES - replace anchorName with rootAnchorName
+// CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
+var calculatePosition = exports.calculatePosition = function calculatePosition(_ref) {
+  var rootAnchorName = _ref.rootAnchorName,
+    anchorName = _ref.anchorName,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    rootNodeType = _ref.rootNodeType,
+    macroInteractionUpdates = _ref.macroInteractionUpdates,
+    anchorRectCache = _ref.anchorRectCache;
+  var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
+  var safeAnchorName = (0, _anchorName.refreshAnchorName)({
+    getPos: getPos,
+    view: view,
+    anchorName: rootAnchorName
+  });
+  var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+  var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
+  var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+  var isBlockCard = rootNodeType === 'blockCard';
+  var isEmbedCard = rootNodeType === 'embedCard';
+  var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+  var innerContainer = null;
+  if (dom) {
+    if (isEmbedCard) {
+      innerContainer = dom.querySelector('.rich-media-item');
+    } else if (hasResizer) {
+      innerContainer = dom.querySelector('.resizer-item');
+    } else if (isExtension) {
+      innerContainer = dom.querySelector('.extension-container[data-layout]');
+    } else if (isBlockCard) {
+      //specific to datasource blockCard
+      innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+    }
+  }
+  var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+  var isSticky = (0, _dragHandlePositions.shouldBeSticky)(rootNodeType);
+  var bottom = (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName || anchorName, isSticky, true);
+  if (supportsAnchor) {
+    return _objectSpread({
+      left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
+      top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
+    }, bottom);
+  }
+
+  // expensive, calls offsetHeight
+  var nodeHeight = (0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
+  var height = (0, _dragHandlePositions.getControlHeightCSSValue)(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)");
+  return _objectSpread({
+    left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
+    top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
+  }, height);
+};

package/dist/cjs/pm-plugins/vanilla-quick-insert.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createVanillaButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _messages = require("@atlaskit/editor-common/messages");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _documentChecks = require("../ui/utils/document-checks");
+var _editorCommands = require("../ui/utils/editor-commands");
+var _quickInsertCalculatePosition = require("./quick-insert-calculate-position");
+var _vanillaTooltip = require("./vanilla-tooltip");
+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; }
+// Based on platform/packages/design-system/icon/svgs/utility/add.svg
+var plusButtonDOM = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 12 12',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'M5.25 6.75V11h1.5V6.75H11v-1.5H6.75V1h-1.5v4.25H1v1.5z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+var vanillaQuickInsert = function vanillaQuickInsert(_ref) {
+  var _api$featureFlags$sha, _api$featureFlags;
+  var view = _ref.view,
+    getPos = _ref.getPos,
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache,
+    anchorName = _ref.anchorName,
+    rootAnchorName = _ref.rootAnchorName,
+    api = _ref.api;
+  return ['div', {
+    style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread({
+      position: 'absolute'
+    }, (0, _quickInsertCalculatePosition.calculatePosition)({
+      rootAnchorName: rootAnchorName,
+      anchorName: anchorName,
+      view: view,
+      getPos: getPos,
+      rootNodeType: rootNodeType,
+      macroInteractionUpdates: (_api$featureFlags$sha = api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 || (_api$featureFlags = _api$featureFlags.sharedState.currentState()) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.macroInteractionUpdates) !== null && _api$featureFlags$sha !== void 0 ? _api$featureFlags$sha : false,
+      anchorRectCache: anchorRectCache
+    })))
+  }, ['button', {
+    class: 'blocks-quick-insert-button',
+    'data-testid': 'editor-quick-insert-button'
+  }, plusButtonDOM]];
+};
+
+/**
+ * Create a Node which contains the quick insert button
+ */
+var createVanillaButton = exports.createVanillaButton = function createVanillaButton(props) {
+  var _props$api$typeAhead, _props$api$blockContr, _props$api$typeAhead2, _props$api$blockContr2;
+  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, vanillaQuickInsert(props)),
+    dom = _DOMSerializer$render.dom;
+  if (dom instanceof HTMLElement) {
+    var button = dom.querySelector('button[data-testid="editor-quick-insert-button"]');
+    if (button instanceof HTMLButtonElement) {
+      button.onclick = function () {
+        return handleQuickInsert(props);
+      };
+      var tooltip = new _vanillaTooltip.VanillaTooltip(button, props.formatMessage(_messages.blockControlsMessages.insert), 'quick-insert-button-tooltip');
+      props.cleanupCallbacks.push(function () {
+        tooltip.destroy();
+      });
+    }
+  }
+
+  // Dynamically control the visibility of the node
+  var isTypeAheadOpen = (_props$api$typeAhead = props.api.typeAhead) === null || _props$api$typeAhead === void 0 || (_props$api$typeAhead = _props$api$typeAhead.sharedState.currentState()) === null || _props$api$typeAhead === void 0 ? void 0 : _props$api$typeAhead.isOpen;
+  var isEditing = (_props$api$blockContr = props.api.blockControls) === null || _props$api$blockContr === void 0 || (_props$api$blockContr = _props$api$blockContr.sharedState.currentState()) === null || _props$api$blockContr === void 0 ? void 0 : _props$api$blockContr.isEditing;
+  var changeDOMVisibility = function changeDOMVisibility() {
+    if (!(dom instanceof HTMLElement)) {
+      return;
+    }
+    if (isTypeAheadOpen || isEditing) {
+      dom.classList.add('blocks-quick-insert-invisible-container');
+      dom.classList.remove('blocks-quick-insert-visible-container');
+    } else {
+      dom.classList.add('blocks-quick-insert-visible-container');
+      dom.classList.remove('blocks-quick-insert-invisible-container');
+    }
+  };
+  changeDOMVisibility();
+  props.cleanupCallbacks.push((_props$api$typeAhead2 = props.api.typeAhead) === null || _props$api$typeAhead2 === void 0 ? void 0 : _props$api$typeAhead2.sharedState.onChange(function (_ref2) {
+    var nextSharedState = _ref2.nextSharedState;
+    isTypeAheadOpen = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isOpen;
+    changeDOMVisibility();
+  }));
+  props.cleanupCallbacks.push((_props$api$blockContr2 = props.api.blockControls) === null || _props$api$blockContr2 === void 0 ? void 0 : _props$api$blockContr2.sharedState.onChange(function (_ref3) {
+    var nextSharedState = _ref3.nextSharedState;
+    isEditing = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isEditing;
+    changeDOMVisibility();
+  }));
+  return dom;
+};
+var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
+var handleQuickInsert = function handleQuickInsert(_ref4) {
+  var _api$quickInsert;
+  var api = _ref4.api,
+    view = _ref4.view,
+    getPos = _ref4.getPos;
+  // if the selection is not within the node this decoration is rendered at
+  // then insert a newline and trigger quick insert
+  var start = getPos();
+  if (start !== undefined) {
+    // if the selection is not within the node this decoration is rendered at
+    // or the node is non-editable, then insert a newline and trigger quick insert
+    var isSelectionInsideNode = (0, _documentChecks.isSelectionInNode)(start, view);
+    if (!isSelectionInsideNode || (0, _documentChecks.isNonEditableBlock)(start, view)) {
+      api.core.actions.execute((0, _editorCommands.createNewLine)(start));
+    }
+    var codeBlock = view.state.schema.nodes.codeBlock;
+    var selection = view.state.selection;
+    var codeBlockParentNode = (0, _utils.findParentNodeOfType)(codeBlock)(selection);
+    if (codeBlockParentNode) {
+      // Slash command is not meant to be triggered inside code block, hence always insert slash in a new line following
+      api.core.actions.execute((0, _editorCommands.createNewLine)(codeBlockParentNode.pos));
+    } else if (isSelectionInsideNode) {
+      // text or element with be deselected and the / added immediately after the paragraph
+      // unless the selection is empty
+      var currentSelection = view.state.selection;
+      if ((0, _documentChecks.isInTextSelection)(view) && currentSelection.from !== currentSelection.to) {
+        var currentParagraphNode = (0, _utils.findParentNode)(function (node) {
+          return TEXT_PARENT_TYPES.includes(node.type.name);
+        })(currentSelection);
+        if (currentParagraphNode) {
+          var newPos =
+          //if the current selection is selected from right to left, then set the selection to the start of the paragraph
+          currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
+          api.core.actions.execute(function (_ref5) {
+            var tr = _ref5.tr;
+            tr.setSelection(_state.TextSelection.create(view.state.selection.$from.doc, newPos));
+            return tr;
+          });
+        }
+      }
+      if ((0, _documentChecks.isNestedNodeSelected)(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if ((0, _documentChecks.isNonEditableBlock)(view.state.selection.from, view)) {
+          api.core.actions.execute((0, _editorCommands.createNewLine)(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(function (_ref6) {
+            var tr = _ref6.tr;
+            (0, _editorCommands.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) {
+        // find the last inline position in the selection
+        var lastInlinePosition = _state.TextSelection.near(view.state.selection.$to, -1);
+        lastInlinePosition && api.core.actions.execute(function (_ref7) {
+          var tr = _ref7.tr;
+          if (!(lastInlinePosition instanceof _state.TextSelection)) {
+            // this will create a new line after the node
+            (0, _editorCommands.createNewLine)(lastInlinePosition.from)({
+              tr: tr
+            });
+            // this will find the next valid text position after the node
+            tr.setSelection(_state.TextSelection.create(tr.doc, lastInlinePosition.to));
+          } else {
+            tr.setSelection(lastInlinePosition);
+          }
+          return tr;
+        });
+      }
+    }
+  }
+  (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl', true);
+};

package/dist/cjs/pm-plugins/vanilla-tooltip.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VanillaTooltip = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@popperjs/core");
+var _bindEventListener = require("bind-event-listener");
+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 startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+var endingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 8]
+  }
+};
+
+/**
+ * A tooltip component similar to "@atlaskit/tooltip" but built for vanilla scenarios
+ *
+ * Uses Popover API for accessibility + stacking context: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ * Uses popperJS for positioning
+ *
+ * @warning Still experimental. One day we can likely want to move this to a common package.
+ */
+var VanillaTooltip = exports.VanillaTooltip = /*#__PURE__*/function () {
+  function VanillaTooltip(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id) {
+    var _this = this;
+    var timeout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300;
+    (0, _classCallCheck2.default)(this, VanillaTooltip);
+    (0, _defineProperty2.default)(this, "listeners", []);
+    (0, _defineProperty2.default)(this, "shouldHidePopover", false);
+    (0, _defineProperty2.default)(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    var tooltip = document.createElement('span');
+    tooltip.role = 'tooltip';
+    tooltip.popover = 'hint';
+    // Warning: Currently this is used for styling - only works in the block controls package
+    tooltip.className = 'blocks-quick-insert-tooltip';
+    tooltip.id = id;
+    tooltip.textContent = content;
+    this.tooltip = tooltip;
+
+    // Button preparation
+    button.appendChild(tooltip);
+    // Prepare the button to have the popover target and accessibility properties
+    button.setAttribute('popovertarget', tooltip.id);
+    button.setAttribute('aria-describedby', tooltip.id);
+    var showEvents = ['mouseenter', 'focus'];
+    var hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(function (event) {
+      _this.listeners.push((0, _bindEventListener.bind)(button, {
+        type: event,
+        listener: function listener() {
+          return _this.show();
+        }
+      }));
+    });
+    hideEvents.forEach(function (event) {
+      _this.listeners.push((0, _bindEventListener.bind)(button, {
+        type: event,
+        listener: function listener() {
+          return _this.hide();
+        }
+      }));
+    });
+    this.listeners.push((0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          _this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = function () {
+      if (_this.shouldHidePopover) {
+        _this.tooltip.hidePopover();
+      }
+    };
+  }
+  return (0, _createClass2.default)(VanillaTooltip, [{
+    key: "createPopperInstance",
+    value: function createPopperInstance() {
+      this.popperInstance = (0, _core.createPopper)(this.button, this.tooltip, {
+        placement: 'top',
+        modifiers: [startingOffset]
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$popperInstance;
+      (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 || _this$popperInstance.destroy();
+      this.listeners.forEach(function (listener) {
+        listener();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this2 = this;
+      var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = true;
+      // Disable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this2$popperInstance;
+        (_this2$popperInstance = _this2.popperInstance) === null || _this2$popperInstance === void 0 || _this2$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [startingOffset, {
+              name: 'eventListeners',
+              enabled: false
+            }]
+          });
+        });
+        _this2.tooltip.style.opacity = '0';
+        _this2.isDisplayed = false;
+        // If transition animations are disabled immediately hide the popover
+        if (_this2.tooltip.style.transition === 'none') {
+          _this2.tooltip.hidePopover();
+        }
+      }, immediate ? 0 : this.timeout);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this3 = this;
+      if (this.isDisplayed) {
+        return;
+      }
+      clearTimeout(this.currentTimeoutId);
+      this.shouldHidePopover = false;
+
+      // Make the tooltip visible - but hide until
+      this.tooltip.style.visibility = 'hidden';
+      this.tooltip.showPopover();
+
+      // Update its position
+      if (!this.popperInstance) {
+        this.createPopperInstance();
+      } else {
+        this.popperInstance.update();
+      }
+
+      // Enable the event listeners
+      this.currentTimeoutId = setTimeout(function () {
+        var _this3$popperInstance;
+        _this3.tooltip.style.opacity = '1';
+        _this3.tooltip.style.visibility = 'visible';
+        (_this3$popperInstance = _this3.popperInstance) === null || _this3$popperInstance === void 0 || _this3$popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [endingOffset, {
+              name: 'eventListeners',
+              enabled: true
+            }]
+          });
+        });
+        _this3.isDisplayed = true;
+      }, this.timeout);
+    }
+  }]);
+}();