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

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

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _styles = require("@atlaskit/editor-common/styles");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("@atlaskit/theme/constants");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 /**
@@ -125,6 +127,89 @@ var globalStyles = function globalStyles() {
     }
   });
 };
+var quickInsertStyles = function quickInsertStyles() {
+  return (0, _react.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: _constants.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(_styles.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(_styles.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: _constants.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 = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror': {
@@ -201,6 +286,6 @@ var blockCardWithoutLayout = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _platformFeatureFlags.fg)('platform_editor_fix_safari_cursor_hidden_empty') ? withRelativePosStyle : withRelativePosStyleLegacy, topLevelNodeMarginStyles, withAnchorNameZindexStyle]
   });
 };

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

@@ -28,6 +28,34 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
   }
   let unbind;
   const key = uuid();
+  const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
+    /**
+     * 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: node => {
+      unbind && unbind();
+      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
+  } : {
+    side: -1,
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
+    destroy: node => {
+      unbind && unbind();
+      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
+    }
+  };
   return Decoration.widget(pos, (view, getPosUnsafe) => {
     const element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
@@ -117,15 +145,5 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       }), element);
     }
     return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
-    destroy: node => {
-      unbind && unbind();
-      if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
-        ReactDOM.unmountComponentAtNode(node);
-      }
-    }
-  });
+  }, widgetSpec);
 };

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

@@ -2,18 +2,68 @@ import { createElement } from 'react';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
+import { createVanillaButton } from './vanilla-quick-insert';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
 };
 export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) => {
   const key = uuid();
+  const cleanupCallbacks = [];
+  const widgetSpec = 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: _ => {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+      cleanupCallbacks.forEach(cb => {
+        cb();
+      });
+    }
+  } : {
+    side: -2,
+    type: TYPE_QUICK_INSERT,
+    destroy: _ => {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+      cleanupCallbacks.forEach(cb => {
+        cb();
+      });
+    }
+  };
   return Decoration.widget(rootPos, (view, getPos) => {
     const 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 (editorExperiment('platform_editor_block_control_optimise_render', true, {
+      exposure: true
+    })) {
+      const vanillaElement = createVanillaButton({
+        formatMessage,
+        api,
+        view,
+        getPos,
+        cleanupCallbacks,
+        rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
+        anchorName,
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+        anchorRectCache
+      });
+      element.appendChild(vanillaElement);
+      return element;
+    }
 
     // all changes already under experiment
     if (fg('platform_editor_controls_widget_visibility')) {
@@ -42,13 +92,5 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
       }), element, key);
     }
     return element;
-  }, {
-    side: -2,
-    type: TYPE_QUICK_INSERT,
-    destroy: _ => {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
-    }
-  });
+  }, widgetSpec);
 };

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

@@ -0,0 +1,64 @@
+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 const calculatePosition = ({
+  rootAnchorName,
+  anchorName,
+  view,
+  getPos,
+  rootNodeType,
+  macroInteractionUpdates,
+  anchorRectCache
+}) => {
+  const supportsAnchor = CSS.supports('top', `anchor(${rootAnchorName} start)`) && CSS.supports('left', `anchor(${rootAnchorName} start)`);
+  const safeAnchorName = refreshAnchorName({
+    getPos,
+    view,
+    anchorName: rootAnchorName
+  });
+  const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${safeAnchorName}"]`);
+  const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
+  const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+  const isBlockCard = rootNodeType === 'blockCard';
+  const isEmbedCard = rootNodeType === 'embedCard';
+  const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+  let 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');
+    }
+  }
+  const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+  const isSticky = shouldBeSticky(rootNodeType);
+  const bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true);
+  if (supportsAnchor) {
+    return {
+      left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${safeAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
+      top: `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`,
+      ...bottom
+    };
+  }
+
+  // expensive, calls offsetHeight
+  const nodeHeight = getNodeHeight(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
+  const height = getControlHeightCSSValue(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)");
+  return {
+    left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)`,
+    top: getTopPosition(dom, rootNodeType),
+    ...height
+  };
+};

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

@@ -0,0 +1,189 @@
+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
+const 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;'
+}]];
+const vanillaQuickInsert = ({
+  view,
+  getPos,
+  rootNodeType,
+  anchorRectCache,
+  anchorName,
+  rootAnchorName,
+  api
+}) => {
+  var _api$featureFlags$sha, _api$featureFlags, _api$featureFlags$sha2;
+  return ['div', {
+    style: convertToInlineCss({
+      position: 'absolute',
+      ...calculatePosition({
+        rootAnchorName,
+        anchorName,
+        view,
+        getPos,
+        rootNodeType: rootNodeType,
+        macroInteractionUpdates: (_api$featureFlags$sha = api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : (_api$featureFlags$sha2 = _api$featureFlags.sharedState.currentState()) === null || _api$featureFlags$sha2 === void 0 ? void 0 : _api$featureFlags$sha2.macroInteractionUpdates) !== null && _api$featureFlags$sha !== void 0 ? _api$featureFlags$sha : false,
+        anchorRectCache
+      })
+    })
+  }, ['button', {
+    class: 'blocks-quick-insert-button',
+    'data-testid': 'editor-quick-insert-button'
+  }, plusButtonDOM]];
+};
+
+/**
+ * Create a Node which contains the quick insert button
+ */
+export const createVanillaButton = props => {
+  var _props$api$typeAhead, _props$api$typeAhead$, _props$api$blockContr, _props$api$blockContr2, _props$api$typeAhead2, _props$api$blockContr3;
+  const {
+    dom
+  } = DOMSerializer.renderSpec(document, vanillaQuickInsert(props));
+  if (dom instanceof HTMLElement) {
+    const button = dom.querySelector('button[data-testid="editor-quick-insert-button"]');
+    if (button instanceof HTMLButtonElement) {
+      button.onclick = () => handleQuickInsert(props);
+      const tooltip = new VanillaTooltip(button, props.formatMessage(messages.insert), 'quick-insert-button-tooltip');
+      props.cleanupCallbacks.push(() => {
+        tooltip.destroy();
+      });
+    }
+  }
+
+  // Dynamically control the visibility of the node
+  let isTypeAheadOpen = (_props$api$typeAhead = props.api.typeAhead) === null || _props$api$typeAhead === void 0 ? void 0 : (_props$api$typeAhead$ = _props$api$typeAhead.sharedState.currentState()) === null || _props$api$typeAhead$ === void 0 ? void 0 : _props$api$typeAhead$.isOpen;
+  let isEditing = (_props$api$blockContr = props.api.blockControls) === null || _props$api$blockContr === void 0 ? void 0 : (_props$api$blockContr2 = _props$api$blockContr.sharedState.currentState()) === null || _props$api$blockContr2 === void 0 ? void 0 : _props$api$blockContr2.isEditing;
+  const 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(({
+    nextSharedState
+  }) => {
+    isTypeAheadOpen = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isOpen;
+    changeDOMVisibility();
+  }));
+  props.cleanupCallbacks.push((_props$api$blockContr3 = props.api.blockControls) === null || _props$api$blockContr3 === void 0 ? void 0 : _props$api$blockContr3.sharedState.onChange(({
+    nextSharedState
+  }) => {
+    isEditing = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isEditing;
+    changeDOMVisibility();
+  }));
+  return dom;
+};
+const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
+const handleQuickInsert = ({
+  api,
+  view,
+  getPos
+}) => {
+  var _api$quickInsert;
+  // if the selection is not within the node this decoration is rendered at
+  // then insert a newline and trigger quick insert
+  const 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
+    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) {
+      // 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
+      const currentSelection = view.state.selection;
+      if (isInTextSelection(view) && currentSelection.from !== currentSelection.to) {
+        const currentParagraphNode = findParentNode(node => TEXT_PARENT_TYPES.includes(node.type.name))(currentSelection);
+        if (currentParagraphNode) {
+          const 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(({
+            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(({
+            tr
+          }) => {
+            createNewLine(view.state.selection.from)({
+              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
+        const lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
+        lastInlinePosition && api.core.actions.execute(({
+          tr
+        }) => {
+          if (!(lastInlinePosition instanceof TextSelection)) {
+            // this will create a new line after the node
+            createNewLine(lastInlinePosition.from)({
+              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 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl', true);
+};

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

@@ -0,0 +1,147 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { createPopper } from '@popperjs/core';
+import { bind } from 'bind-event-listener';
+const startingOffset = {
+  name: 'offset',
+  options: {
+    offset: [0, 4]
+  }
+};
+const 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 class VanillaTooltip {
+  constructor(button, content,
+  /**
+   * Id associated to the tooltip - must be unique.
+   */
+  id, timeout = 300) {
+    _defineProperty(this, "listeners", []);
+    _defineProperty(this, "shouldHidePopover", false);
+    _defineProperty(this, "isDisplayed", false);
+    this.button = button;
+    this.timeout = timeout;
+    const 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);
+    const showEvents = ['mouseenter', 'focus'];
+    const hideEvents = ['mouseleave', 'blur'];
+    showEvents.forEach(event => {
+      this.listeners.push(bind(button, {
+        type: event,
+        listener: () => this.show()
+      }));
+    });
+    hideEvents.forEach(event => {
+      this.listeners.push(bind(button, {
+        type: event,
+        listener: () => this.hide()
+      }));
+    });
+    this.listeners.push(bind(window, {
+      type: 'keydown',
+      listener: e => {
+        if (e.key === 'Escape') {
+          this.hide(true);
+        }
+      }
+    }));
+
+    // Hide the tooltip if the hide transition has completed
+    this.tooltip.ontransitionend = () => {
+      if (this.shouldHidePopover) {
+        this.tooltip.hidePopover();
+      }
+    };
+  }
+  createPopperInstance() {
+    this.popperInstance = createPopper(this.button, this.tooltip, {
+      placement: 'top',
+      modifiers: [startingOffset]
+    });
+  }
+  destroy() {
+    var _this$popperInstance;
+    (_this$popperInstance = this.popperInstance) === null || _this$popperInstance === void 0 ? void 0 : _this$popperInstance.destroy();
+    this.listeners.forEach(listener => {
+      listener();
+    });
+  }
+  hide(immediate = false) {
+    clearTimeout(this.currentTimeoutId);
+    this.shouldHidePopover = true;
+    // Disable the event listeners
+    this.currentTimeoutId = setTimeout(() => {
+      var _this$popperInstance2;
+      (_this$popperInstance2 = this.popperInstance) === null || _this$popperInstance2 === void 0 ? void 0 : _this$popperInstance2.setOptions(options => ({
+        ...options,
+        modifiers: [startingOffset, {
+          name: 'eventListeners',
+          enabled: false
+        }]
+      }));
+      this.tooltip.style.opacity = '0';
+      this.isDisplayed = false;
+      // If transition animations are disabled immediately hide the popover
+      if (this.tooltip.style.transition === 'none') {
+        this.tooltip.hidePopover();
+      }
+    }, immediate ? 0 : this.timeout);
+  }
+  show() {
+    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(() => {
+      var _this$popperInstance3;
+      this.tooltip.style.opacity = '1';
+      this.tooltip.style.visibility = 'visible';
+      (_this$popperInstance3 = this.popperInstance) === null || _this$popperInstance3 === void 0 ? void 0 : _this$popperInstance3.setOptions(options => ({
+        ...options,
+        modifiers: [endingOffset, {
+          name: 'eventListeners',
+          enabled: true
+        }]
+      }));
+      this.isDisplayed = true;
+    }, this.timeout);
+  }
+}