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

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

@@ -0,0 +1,64 @@
+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 { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from '../ui/consts';
+import { refreshAnchorName } from '../ui/utils/anchor-name';
+import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from './utils/drag-handle-positions';
+import { getLeftPositionForRootElement } from './utils/widget-positions';
+
+// 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
+export var 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 = 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 = shouldBeSticky(rootNodeType);
+  var bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true);
+  if (supportsAnchor) {
+    return _objectSpread({
+      left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
+      top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
+    }, bottom);
+  }
+
+  // expensive, calls offsetHeight
+  var nodeHeight = getNodeHeight(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
+  var height = 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(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
+    top: getTopPosition(dom, rootNodeType)
+  }, height);
+};

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

@@ -0,0 +1,183 @@
+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 { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from '../ui/utils/document-checks';
+import { createNewLine } from '../ui/utils/editor-commands';
+import { calculatePosition } from './quick-insert-calculate-position';
+import { VanillaTooltip } from './vanilla-tooltip';
+// 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: convertToInlineCss(_objectSpread({
+      position: 'absolute'
+    }, 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
+ */
+export var createVanillaButton = function createVanillaButton(props) {
+  var _props$api$typeAhead, _props$api$blockContr, _props$api$typeAhead2, _props$api$blockContr2;
+  var _DOMSerializer$render = 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(button, props.formatMessage(messages.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 = 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) {
+      // Slash command is not meant to be triggered inside code block, hence always insert slash in a new line following
+      api.core.actions.execute(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 (isInTextSelection(view) && currentSelection.from !== currentSelection.to) {
+        var currentParagraphNode = 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(TextSelection.create(view.state.selection.$from.doc, newPos));
+            return tr;
+          });
+        }
+      }
+      if (isNestedNodeSelected(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if (isNonEditableBlock(view.state.selection.from, view)) {
+          api.core.actions.execute(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;
+            createNewLine(view.state.selection.from)({
+              tr: tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+      if (currentSelection instanceof CellSelection) {
+        // find the last inline position in the selection
+        var lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
+        lastInlinePosition && api.core.actions.execute(function (_ref7) {
+          var tr = _ref7.tr;
+          if (!(lastInlinePosition instanceof TextSelection)) {
+            // this will create a new line after the node
+            createNewLine(lastInlinePosition.from)({
+              tr: tr
+            });
+            // this will find the next valid text position after the node
+            tr.setSelection(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/esm/pm-plugins/vanilla-tooltip.js

@@ -0,0 +1,172 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+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 { createPopper } from '@popperjs/core';
+import { bind } from 'bind-event-listener';
+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.
+ */
+export var 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;
+    _classCallCheck(this, VanillaTooltip);
+    _defineProperty(this, "listeners", []);
+    _defineProperty(this, "shouldHidePopover", false);
+    _defineProperty(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(bind(button, {
+        type: event,
+        listener: function listener() {
+          return _this.show();
+        }
+      }));
+    });
+    hideEvents.forEach(function (event) {
+      _this.listeners.push(bind(button, {
+        type: event,
+        listener: function listener() {
+          return _this.hide();
+        }
+      }));
+    });
+    this.listeners.push(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 _createClass(VanillaTooltip, [{
+    key: "createPopperInstance",
+    value: function createPopperInstance() {
+      this.popperInstance = 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);
+    }
+  }]);
+}();

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

@@ -5,9 +5,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
+import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -118,6 +120,89 @@ var globalStyles = function globalStyles() {
     }
   });
 };
+var quickInsertStyles = function quickInsertStyles() {
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button': {
+      backgroundColor: 'transparent',
+      top: "var(--top-override,8px)",
+      position: 'sticky',
+      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',
+      borderRadius: '50%',
+      zIndex: layers.card(),
+      outline: 'none',
+      cursor: 'pointer',
+      color: "var(--ds-icon-subtle, #626F86)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      '--top-override': "".concat(tableControlsSpacing, "px")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+      '--top-override': "".concat(tableControlsSpacing, "px")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button:hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button:active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-button:focus': {
+      outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-visible-container': {
+      transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
+      opacity: 1,
+      visibility: 'visible'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-invisible-container': {
+      transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
+      opacity: 0,
+      visibility: 'hidden'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.blocks-quick-insert-tooltip': {
+      zIndex: layers.tooltip(),
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-050, 4px)".concat(" 0"),
+      boxSizing: 'border-box',
+      maxWidth: '240px',
+      backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+      insetBlockStart: "var(--ds-space-0, 0px)",
+      insetInlineStart: "var(--ds-space-0, 0px)",
+      overflowWrap: 'break-word',
+      paddingBlockEnd: "var(--ds-space-025, 2px)",
+      paddingBlockStart: "var(--ds-space-025, 2px)",
+      paddingInlineEnd: "var(--ds-space-075, 6px)",
+      paddingInlineStart: "var(--ds-space-075, 6px)",
+      wordWrap: 'break-word',
+      pointerEvents: 'none',
+      userSelect: 'none',
+      // Based on: platform/packages/design-system/motion/src/entering/keyframes-motion.tsx
+      transition: 'opacity .1s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out',
+      '@media (prefers-reduced-motion: reduce)': {
+        transition: 'none'
+      }
+    }
+  });
+};
 var topLevelNodeMarginStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror': {
@@ -194,6 +279,6 @@ var blockCardWithoutLayout = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, fg('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

package/dist/types/pm-plugins/quick-insert-calculate-position.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { AnchorRectCache } from './utils/anchor-utils';
+export declare const calculatePosition: ({ rootAnchorName, anchorName, view, getPos, rootNodeType, macroInteractionUpdates, anchorRectCache, }: {
+    rootAnchorName: string | undefined;
+    getPos: () => number | undefined;
+    view: EditorView;
+    rootNodeType: string;
+    anchorName: string;
+    macroInteractionUpdates: boolean | undefined;
+    anchorRectCache: AnchorRectCache | undefined;
+}) => CSSProperties;

package/dist/types/pm-plugins/vanilla-quick-insert.d.ts

@@ -0,0 +1,21 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
+type VanillaQuickInsertProps = {
+    formatMessage: IntlShape['formatMessage'];
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    view: EditorView;
+    getPos: () => number | undefined;
+    cleanupCallbacks: ((() => void) | undefined)[];
+    rootNodeType: string;
+    anchorRectCache?: AnchorRectCache;
+    anchorName: string;
+    rootAnchorName: string;
+};
+/**
+ * Create a Node which contains the quick insert button
+ */
+export declare const createVanillaButton: (props: VanillaQuickInsertProps) => Node;
+export {};

package/dist/types/pm-plugins/vanilla-tooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+export declare class VanillaTooltip {
+    private button;
+    private timeout;
+    private popperInstance;
+    private listeners;
+    private currentTimeoutId;
+    private shouldHidePopover;
+    private tooltip;
+    private isDisplayed;
+    constructor(button: HTMLButtonElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique.
+     */
+    id: string, timeout?: number);
+    private createPopperInstance;
+    destroy(): void;
+    private hide;
+    private show;
+}

package/dist/types-ts4.5/pm-plugins/quick-insert-calculate-position.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { AnchorRectCache } from './utils/anchor-utils';
+export declare const calculatePosition: ({ rootAnchorName, anchorName, view, getPos, rootNodeType, macroInteractionUpdates, anchorRectCache, }: {
+    rootAnchorName: string | undefined;
+    getPos: () => number | undefined;
+    view: EditorView;
+    rootNodeType: string;
+    anchorName: string;
+    macroInteractionUpdates: boolean | undefined;
+    anchorRectCache: AnchorRectCache | undefined;
+}) => CSSProperties;

package/dist/types-ts4.5/pm-plugins/vanilla-quick-insert.d.ts

@@ -0,0 +1,21 @@
+import { type IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import { AnchorRectCache } from './utils/anchor-utils';
+type VanillaQuickInsertProps = {
+    formatMessage: IntlShape['formatMessage'];
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    view: EditorView;
+    getPos: () => number | undefined;
+    cleanupCallbacks: ((() => void) | undefined)[];
+    rootNodeType: string;
+    anchorRectCache?: AnchorRectCache;
+    anchorName: string;
+    rootAnchorName: string;
+};
+/**
+ * Create a Node which contains the quick insert button
+ */
+export declare const createVanillaButton: (props: VanillaQuickInsertProps) => Node;
+export {};

package/dist/types-ts4.5/pm-plugins/vanilla-tooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+export declare class VanillaTooltip {
+    private button;
+    private timeout;
+    private popperInstance;
+    private listeners;
+    private currentTimeoutId;
+    private shouldHidePopover;
+    private tooltip;
+    private isDisplayed;
+    constructor(button: HTMLButtonElement, content: string, 
+    /**
+     * Id associated to the tooltip - must be unique.
+     */
+    id: string, timeout?: number);
+    private createPopperInstance;
+    destroy(): void;
+    private hide;
+    private show;
+}