@atlaskit/editor-plugin-quick-insert 6.0.5 → 6.0.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 6.0.6
+
+### Patch Changes
+
+- [`610bf07ab4a4f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/610bf07ab4a4f) -
+  ED-29611 Editor quick insert experience tracking
+- Updated dependencies
+
 ## 6.0.5
 
 ### Patch Changes

package/dist/cjs/pm-plugins/experiences/quick-insert-open-experience.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getQuickInsertOpenExperiencePlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = new _state.PluginKey('quickInsertOpenExperience');
+var START_METHOD = {
+  QUICK_INSERT_BUTTON: 'quick-insert-button',
+  TYPEAHEAD: 'typeahead'
+};
+var ABORT_REASON = {
+  USER_CANCELED: 'user-canceled',
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+/**
+ * This experience tracks when the quick insert is opened.
+ *
+ * Start: When user types `/` to open quick insert or clicks the quick insert button
+ * Success: When the quick insert menu is added to the DOM within 500ms of start
+ * Failure: When 500ms passes without the quick insert menu being added to the DOM
+ * Abort: When user presses escape or backspace
+ */
+var getQuickInsertOpenExperiencePlugin = exports.getQuickInsertOpenExperiencePlugin = function getQuickInsertOpenExperiencePlugin(_ref) {
+  var refs = _ref.refs;
+  var targetEl;
+  var editorViewEl;
+  var getTarget = function getTarget() {
+    if (!targetEl) {
+      targetEl = refs.popupsMountPoint || refs.wrapperElement || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
+    }
+    return targetEl;
+  };
+  var experience = new _experiences.Experience('quick-insert-open', {
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 500
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref2) {
+        var mutations = _ref2.mutations;
+        if (mutations.some(isQuickInsertMenuAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: getTarget(),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        click: function click(_view, event) {
+          if (isTargetQuickInsertButton(event.target)) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.QUICK_INSERT_BUTTON
+              }
+            });
+          }
+        },
+        beforeinput: function beforeinput(view, event) {
+          if (isQuickInsertTrigger(event) && isSelectionWhichSupportsTypeahead(view)) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.TYPEAHEAD
+              }
+            });
+          }
+        },
+        keydown: function keydown(_view, event) {
+          if (isCancelKey(event.key) && !isQuickInsertMenuWithinNode(getTarget())) {
+            experience.abort({
+              metadata: {
+                reason: ABORT_REASON.USER_CANCELED
+              }
+            });
+          }
+        }
+      }
+    },
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.EDITOR_DESTROYED
+            }
+          });
+        }
+      };
+    }
+  });
+};
+var isQuickInsertTrigger = function isQuickInsertTrigger(_ref3) {
+  var inputType = _ref3.inputType,
+    data = _ref3.data;
+  return inputType === 'insertText' && data === '/';
+};
+var isSelectionWhichSupportsTypeahead = function isSelectionWhichSupportsTypeahead(_ref4) {
+  var _nodeBefore$textConte;
+  var state = _ref4.state;
+  var _state$selection = state.selection,
+    from = _state$selection.from,
+    $from = _state$selection.$from;
+  if ($from.parent.type.name === 'codeBlock') {
+    return false;
+  }
+  if ($from.marks().some(function (mark) {
+    return mark.type.name === 'code';
+  })) {
+    return false;
+  }
+  if (from === 0) {
+    return true;
+  }
+  var nodeBefore = state.doc.resolve(from).nodeBefore;
+  if (!nodeBefore) {
+    return true;
+  }
+  var charBefore = ((_nodeBefore$textConte = nodeBefore.textContent) === null || _nodeBefore$textConte === void 0 ? void 0 : _nodeBefore$textConte.slice(-1)) || '';
+  return charBefore.trim().length === 0;
+};
+var isCancelKey = function isCancelKey(key) {
+  return key === 'Escape' || key === 'Backspace';
+};
+var isTargetQuickInsertButton = function isTargetQuickInsertButton(target) {
+  return target instanceof HTMLElement && (target.dataset.testid === 'editor-quick-insert-button' || !!target.closest('[data-testid="editor-quick-insert-button"]'));
+};
+var isQuickInsertMenuAddedInMutation = function isQuickInsertMenuAddedInMutation(_ref5) {
+  var type = _ref5.type,
+    addedNodes = _ref5.addedNodes;
+  return type === 'childList' && (0, _toConsumableArray2.default)(addedNodes).some(isQuickInsertMenuWithinNode);
+};
+var isQuickInsertMenuWithinNode = function isQuickInsertMenuWithinNode(node) {
+  return (0, _experiences.containsPopupWithNestedElement)(node, '.fabric-editor-typeahead');
+};

package/dist/cjs/quickInsertPlugin.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.quickInsertPlugin = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
@@ -21,6 +21,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
+var _quickInsertOpenExperience = require("./pm-plugins/experiences/quick-insert-open-experience");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
 var _search = require("./ui/search");
@@ -29,6 +30,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
+  var refs = {};
   var onInsert = function onInsert(item) {
     var _options$onInsert;
     options === null || options === void 0 || (_options$onInsert = options.onInsert) === null || _options$onInsert === void 0 || _options$onInsert.call(options, item);
@@ -81,13 +83,24 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
             dispatch = _ref4.dispatch;
           return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
         }
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+        name: 'quickInsertOpenExperience',
+        plugin: function plugin() {
+          return (0, _quickInsertOpenExperience.getQuickInsertOpenExperiencePlugin)({
+            refs: refs
+          });
+        }
+      }] : []));
     },
     pluginsOptions: {
       typeAhead: typeAhead
     },
     contentComponent: function contentComponent(_ref5) {
-      var editorView = _ref5.editorView;
+      var editorView = _ref5.editorView,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        wrapperElement = _ref5.wrapperElement;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
+      refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && (0, _coreUtils.isSSR)()) {
         return null;
       }

package/dist/es2019/pm-plugins/experiences/quick-insert-open-experience.js

@@ -0,0 +1,144 @@
+import { containsPopupWithNestedElement, Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+const pluginKey = new PluginKey('quickInsertOpenExperience');
+const START_METHOD = {
+  QUICK_INSERT_BUTTON: 'quick-insert-button',
+  TYPEAHEAD: 'typeahead'
+};
+const ABORT_REASON = {
+  USER_CANCELED: 'user-canceled',
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+/**
+ * This experience tracks when the quick insert is opened.
+ *
+ * Start: When user types `/` to open quick insert or clicks the quick insert button
+ * Success: When the quick insert menu is added to the DOM within 500ms of start
+ * Failure: When 500ms passes without the quick insert menu being added to the DOM
+ * Abort: When user presses escape or backspace
+ */
+export const getQuickInsertOpenExperiencePlugin = ({
+  refs
+}) => {
+  let targetEl;
+  let editorViewEl;
+  const getTarget = () => {
+    if (!targetEl) {
+      targetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return targetEl;
+  };
+  const experience = new Experience('quick-insert-open', {
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 500
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        if (mutations.some(isQuickInsertMenuAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+      },
+      observeConfig: () => ({
+        target: getTarget(),
+        options: {
+          childList: true
+        }
+      })
+    })]
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        click: (_view, event) => {
+          if (isTargetQuickInsertButton(event.target)) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.QUICK_INSERT_BUTTON
+              }
+            });
+          }
+        },
+        beforeinput: (view, event) => {
+          if (isQuickInsertTrigger(event) && isSelectionWhichSupportsTypeahead(view)) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.TYPEAHEAD
+              }
+            });
+          }
+        },
+        keydown: (_view, event) => {
+          if (isCancelKey(event.key) && !isQuickInsertMenuWithinNode(getTarget())) {
+            experience.abort({
+              metadata: {
+                reason: ABORT_REASON.USER_CANCELED
+              }
+            });
+          }
+        }
+      }
+    },
+    view: editorView => {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: () => {
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.EDITOR_DESTROYED
+            }
+          });
+        }
+      };
+    }
+  });
+};
+const isQuickInsertTrigger = ({
+  inputType,
+  data
+}) => {
+  return inputType === 'insertText' && data === '/';
+};
+const isSelectionWhichSupportsTypeahead = ({
+  state
+}) => {
+  var _nodeBefore$textConte;
+  const {
+    from,
+    $from
+  } = state.selection;
+  if ($from.parent.type.name === 'codeBlock') {
+    return false;
+  }
+  if ($from.marks().some(mark => mark.type.name === 'code')) {
+    return false;
+  }
+  if (from === 0) {
+    return true;
+  }
+  const nodeBefore = state.doc.resolve(from).nodeBefore;
+  if (!nodeBefore) {
+    return true;
+  }
+  const charBefore = ((_nodeBefore$textConte = nodeBefore.textContent) === null || _nodeBefore$textConte === void 0 ? void 0 : _nodeBefore$textConte.slice(-1)) || '';
+  return charBefore.trim().length === 0;
+};
+const isCancelKey = key => {
+  return key === 'Escape' || key === 'Backspace';
+};
+const isTargetQuickInsertButton = target => {
+  return target instanceof HTMLElement && (target.dataset.testid === 'editor-quick-insert-button' || !!target.closest('[data-testid="editor-quick-insert-button"]'));
+};
+const isQuickInsertMenuAddedInMutation = ({
+  type,
+  addedNodes
+}) => {
+  return type === 'childList' && [...addedNodes].some(isQuickInsertMenuWithinNode);
+};
+const isQuickInsertMenuWithinNode = node => {
+  return containsPopupWithNestedElement(node, '.fabric-editor-typeahead');
+};

package/dist/es2019/quickInsertPlugin.js

@@ -10,6 +10,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertItem, openElementBrowserModal } from './pm-plugins/commands';
+import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
 import { pluginKey } from './pm-plugins/plugin-key';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { getQuickInsertSuggestions } from './ui/search';
@@ -17,6 +18,7 @@ export const quickInsertPlugin = ({
   config: options,
   api
 }) => {
+  const refs = {};
   const onInsert = item => {
     var _options$onInsert;
     options === null || options === void 0 ? void 0 : (_options$onInsert = options.onInsert) === null || _options$onInsert === void 0 ? void 0 : _options$onInsert.call(options, item);
@@ -70,14 +72,23 @@ export const quickInsertPlugin = ({
           getIntl,
           dispatch
         }) => quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
-      }];
+      }, ...(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+        name: 'quickInsertOpenExperience',
+        plugin: () => getQuickInsertOpenExperiencePlugin({
+          refs
+        })
+      }] : [])];
     },
     pluginsOptions: {
       typeAhead
     },
     contentComponent({
-      editorView
+      editorView,
+      popupsMountPoint,
+      wrapperElement
     }) {
+      refs.popupsMountPoint = popupsMountPoint || undefined;
+      refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && isSSR()) {
         return null;
       }

package/dist/esm/pm-plugins/experiences/quick-insert-open-experience.js

@@ -0,0 +1,143 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { containsPopupWithNestedElement, Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+var pluginKey = new PluginKey('quickInsertOpenExperience');
+var START_METHOD = {
+  QUICK_INSERT_BUTTON: 'quick-insert-button',
+  TYPEAHEAD: 'typeahead'
+};
+var ABORT_REASON = {
+  USER_CANCELED: 'user-canceled',
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+/**
+ * This experience tracks when the quick insert is opened.
+ *
+ * Start: When user types `/` to open quick insert or clicks the quick insert button
+ * Success: When the quick insert menu is added to the DOM within 500ms of start
+ * Failure: When 500ms passes without the quick insert menu being added to the DOM
+ * Abort: When user presses escape or backspace
+ */
+export var getQuickInsertOpenExperiencePlugin = function getQuickInsertOpenExperiencePlugin(_ref) {
+  var refs = _ref.refs;
+  var targetEl;
+  var editorViewEl;
+  var getTarget = function getTarget() {
+    if (!targetEl) {
+      targetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return targetEl;
+  };
+  var experience = new Experience('quick-insert-open', {
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 500
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref2) {
+        var mutations = _ref2.mutations;
+        if (mutations.some(isQuickInsertMenuAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: getTarget(),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        click: function click(_view, event) {
+          if (isTargetQuickInsertButton(event.target)) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.QUICK_INSERT_BUTTON
+              }
+            });
+          }
+        },
+        beforeinput: function beforeinput(view, event) {
+          if (isQuickInsertTrigger(event) && isSelectionWhichSupportsTypeahead(view)) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.TYPEAHEAD
+              }
+            });
+          }
+        },
+        keydown: function keydown(_view, event) {
+          if (isCancelKey(event.key) && !isQuickInsertMenuWithinNode(getTarget())) {
+            experience.abort({
+              metadata: {
+                reason: ABORT_REASON.USER_CANCELED
+              }
+            });
+          }
+        }
+      }
+    },
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.EDITOR_DESTROYED
+            }
+          });
+        }
+      };
+    }
+  });
+};
+var isQuickInsertTrigger = function isQuickInsertTrigger(_ref3) {
+  var inputType = _ref3.inputType,
+    data = _ref3.data;
+  return inputType === 'insertText' && data === '/';
+};
+var isSelectionWhichSupportsTypeahead = function isSelectionWhichSupportsTypeahead(_ref4) {
+  var _nodeBefore$textConte;
+  var state = _ref4.state;
+  var _state$selection = state.selection,
+    from = _state$selection.from,
+    $from = _state$selection.$from;
+  if ($from.parent.type.name === 'codeBlock') {
+    return false;
+  }
+  if ($from.marks().some(function (mark) {
+    return mark.type.name === 'code';
+  })) {
+    return false;
+  }
+  if (from === 0) {
+    return true;
+  }
+  var nodeBefore = state.doc.resolve(from).nodeBefore;
+  if (!nodeBefore) {
+    return true;
+  }
+  var charBefore = ((_nodeBefore$textConte = nodeBefore.textContent) === null || _nodeBefore$textConte === void 0 ? void 0 : _nodeBefore$textConte.slice(-1)) || '';
+  return charBefore.trim().length === 0;
+};
+var isCancelKey = function isCancelKey(key) {
+  return key === 'Escape' || key === 'Backspace';
+};
+var isTargetQuickInsertButton = function isTargetQuickInsertButton(target) {
+  return target instanceof HTMLElement && (target.dataset.testid === 'editor-quick-insert-button' || !!target.closest('[data-testid="editor-quick-insert-button"]'));
+};
+var isQuickInsertMenuAddedInMutation = function isQuickInsertMenuAddedInMutation(_ref5) {
+  var type = _ref5.type,
+    addedNodes = _ref5.addedNodes;
+  return type === 'childList' && _toConsumableArray(addedNodes).some(isQuickInsertMenuWithinNode);
+};
+var isQuickInsertMenuWithinNode = function isQuickInsertMenuWithinNode(node) {
+  return containsPopupWithNestedElement(node, '.fabric-editor-typeahead');
+};

package/dist/esm/quickInsertPlugin.js

@@ -1,6 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -16,12 +16,14 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertItem, openElementBrowserModal as _openElementBrowserModal } from './pm-plugins/commands';
+import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
 import { pluginKey } from './pm-plugins/plugin-key';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { getQuickInsertSuggestions } from './ui/search';
 export var quickInsertPlugin = function quickInsertPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
+  var refs = {};
   var onInsert = function onInsert(item) {
     var _options$onInsert;
     options === null || options === void 0 || (_options$onInsert = options.onInsert) === null || _options$onInsert === void 0 || _options$onInsert.call(options, item);
@@ -74,13 +76,24 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
             dispatch = _ref4.dispatch;
           return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
         }
-      }];
+      }].concat(_toConsumableArray(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+        name: 'quickInsertOpenExperience',
+        plugin: function plugin() {
+          return getQuickInsertOpenExperiencePlugin({
+            refs: refs
+          });
+        }
+      }] : []));
     },
     pluginsOptions: {
       typeAhead: typeAhead
     },
     contentComponent: function contentComponent(_ref5) {
-      var editorView = _ref5.editorView;
+      var editorView = _ref5.editorView,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        wrapperElement = _ref5.wrapperElement;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
+      refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && isSSR()) {
         return null;
       }

package/dist/types/pm-plugins/experiences/quick-insert-open-experience.d.ts

@@ -0,0 +1,17 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type QuickInsertOpenExperienceOptions = {
+    refs: {
+        popupsMountPoint?: HTMLElement;
+        wrapperElement?: HTMLElement;
+    };
+};
+/**
+ * This experience tracks when the quick insert is opened.
+ *
+ * Start: When user types `/` to open quick insert or clicks the quick insert button
+ * Success: When the quick insert menu is added to the DOM within 500ms of start
+ * Failure: When 500ms passes without the quick insert menu being added to the DOM
+ * Abort: When user presses escape or backspace
+ */
+export declare const getQuickInsertOpenExperiencePlugin: ({ refs }: QuickInsertOpenExperienceOptions) => SafePlugin<any>;
+export {};

package/dist/types-ts4.5/pm-plugins/experiences/quick-insert-open-experience.d.ts

@@ -0,0 +1,17 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type QuickInsertOpenExperienceOptions = {
+    refs: {
+        popupsMountPoint?: HTMLElement;
+        wrapperElement?: HTMLElement;
+    };
+};
+/**
+ * This experience tracks when the quick insert is opened.
+ *
+ * Start: When user types `/` to open quick insert or clicks the quick insert button
+ * Success: When the quick insert menu is added to the DOM within 500ms of start
+ * Failure: When 500ms passes without the quick insert menu being added to the DOM
+ * Abort: When user presses escape or backspace
+ */
+export declare const getQuickInsertOpenExperiencePlugin: ({ refs }: QuickInsertOpenExperienceOptions) => SafePlugin<any>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "6.0.5",
+	"version": "6.0.6",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,20 +31,20 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/editor-plugin-connectivity": "^6.0.0",
-		"@atlaskit/editor-plugin-metrics": "^7.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^6.4.0",
+		"@atlaskit/editor-plugin-metrics": "^7.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^6.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/modal-dialog": "^14.5.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.13.0",
+		"@atlaskit/tmp-editor-statsig": "^13.20.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.13.0",
+		"@atlaskit/editor-common": "^110.18.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"