@atlaskit/editor-plugin-date 15.0.1 → 15.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-date
 
+## 15.0.2
+
+### Patch Changes
+
+- [`7087f393ec725`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7087f393ec725) -
+  Add the categorized registered Quick Insert browse experience with representative native elements
+- Updated dependencies
+
 ## 15.0.1
 
 ### Patch Changes

package/dist/cjs/datePlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -18,12 +19,16 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("./pm-plugins/actions");
 var _commands = require("./pm-plugins/commands");
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _getDateQuickInsertComponents = require("./ui/quick-insert/getDateQuickInsertComponents");
+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; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var DatePicker = (0, _reactLoadable.default)({
   loader: function loader() {
@@ -142,6 +147,13 @@ var datePlugin = function datePlugin(_ref3) {
   var _ref3$config = _ref3.config,
     config = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getDateQuickInsertComponents.getDateQuickInsertComponents)({
+      api: api
+    }));
+  }
   return {
     name: 'date',
     getSharedState: function getSharedState(editorState) {
@@ -209,7 +221,7 @@ var datePlugin = function datePlugin(_ref3) {
         weekStartDay: config.weekStartDay
       });
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({}, isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: function quickInsert(_ref6) {
         var formatMessage = _ref6.formatMessage;
         return [{
@@ -237,7 +249,8 @@ var datePlugin = function datePlugin(_ref3) {
             return tr;
           }
         }];
-      },
+      }
+    }), {}, {
       floatingToolbar: function floatingToolbar(state, intl) {
         var isViewMode = function isViewMode() {
           var _api$editorViewMode;
@@ -313,7 +326,7 @@ var datePlugin = function datePlugin(_ref3) {
           }
         };
       }
-    }
+    })
   };
 };
 var _default = exports.default = datePlugin;

package/dist/cjs/pm-plugins/actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setDatePickerAt = exports.openDatePicker = exports.focusDateInput = exports.createDate = exports.closeDatePickerWithAnalytics = exports.closeDatePicker = void 0;
+exports.setDatePickerAt = exports.openDatePicker = exports.focusDateInput = exports.createDateAtTransaction = exports.createDate = exports.closeDatePickerWithAnalytics = exports.closeDatePicker = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -11,6 +11,12 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _internal = require("../ui/DatePicker/utils/internal");
 var _pluginKey = require("./plugin-key");
+/**
+ * Creates a date using a new transaction from the editor state.
+ *
+ * @private
+ * @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
+ */
 var createDate = exports.createDate = function createDate(isQuickInsertAction) {
   return function (state) {
     var tr = state.tr;
@@ -37,6 +43,32 @@ var createDate = exports.createDate = function createDate(isQuickInsertAction) {
     return tr.setMeta(_pluginKey.pluginKey, newPluginState);
   };
 };
+var createDateAtTransaction = exports.createDateAtTransaction = function createDateAtTransaction(isQuickInsertAction) {
+  return function (tr) {
+    var schema = tr.doc.type.schema;
+    var annotationMarksForPos = (0, _utils.getAnnotationMarksForPos)(tr.selection.$head);
+    var dateNode = schema.nodes.date.createChecked({
+      timestamp: (0, _utils.todayTimestampInUTC)()
+    }, null, annotationMarksForPos);
+    var fragment = _model.Fragment.fromArray([dateNode, schema.text(' ', annotationMarksForPos)]);
+    var insertable = (0, _utils2.canInsert)(tr.selection.$from, fragment);
+    if (!insertable) {
+      var parentSelection = _state.NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+      tr.insert(parentSelection.to, fragment).setSelection(_state.NodeSelection.create(tr.doc, parentSelection.to + 1));
+    } else {
+      tr.insert(tr.selection.from, fragment).setSelection(_state.NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
+    }
+    var newPluginState = {
+      isQuickInsertAction: isQuickInsertAction,
+      showDatePickerAt: tr.selection.from,
+      isNew: true,
+      isDateEmpty: false,
+      focusDateInput: false,
+      isInitialised: true
+    };
+    return tr.setMeta(_pluginKey.pluginKey, newPluginState);
+  };
+};
 
 /** Focus input */
 var focusDateInput = exports.focusDateInput = function focusDateInput() {

package/dist/cjs/ui/quick-insert/DateQuickInsertMenuItem.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _actions = require("../../pm-plugins/actions");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var DateQuickInsertMenuItem = exports.DateQuickInsertMenuItem = function DateQuickInsertMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _api$analytics, _api$analytics$attach;
+    var insert = _ref2.insert,
+      source = _ref2.source;
+    var tr = (0, _actions.createDateAtTransaction)(true)(insert(undefined));
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || (_api$analytics$attach = _api$analytics.attachAnalyticsEvent) === null || _api$analytics$attach === void 0 || _api$analytics$attach.call(_api$analytics, {
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.DATE,
+      attributes: {
+        inputMethod: source !== null && source !== void 0 ? source : _analytics.INPUT_METHOD.QUICK_INSERT
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  }, [api]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_quickInsert.IconDate, null),
+    onSelect: onSelect,
+    shortcut: "//",
+    title: formatMessage(_messages.toolbarInsertBlockMessages.date)
+  });
+};

package/dist/cjs/ui/quick-insert/getDateQuickInsertComponents.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDateQuickInsertComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _rank = require("@atlaskit/editor-common/quick-insert/rank");
+var _DateQuickInsertMenuItem = require("./DateQuickInsertMenuItem");
+var getDateQuickInsertComponents = exports.getDateQuickInsertComponents = function getDateQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    key: _keys.DATE_MENU_ITEM.key,
+    type: _keys.DATE_MENU_ITEM.type,
+    parents: [{
+      key: _keys.STRUCTURE_SECTION.key,
+      type: _keys.STRUCTURE_SECTION.type,
+      rank: _rank.STRUCTURE_SECTION_RANK[_keys.DATE_MENU_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_DateQuickInsertMenuItem.DateQuickInsertMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/es2019/datePlugin.js

@@ -10,12 +10,14 @@ import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { closeDatePicker, closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
 import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
 import keymap from './pm-plugins/keymap';
 import createDatePlugin from './pm-plugins/main';
 import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
+import { getDateQuickInsertComponents } from './ui/quick-insert/getDateQuickInsertComponents';
 const DatePicker = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(mod => mod.default),
   loading: () => null
@@ -129,174 +131,185 @@ function ContentComponent({
 const datePlugin = ({
   config = {},
   api
-}) => ({
-  name: 'date',
-  getSharedState(editorState) {
-    if (!editorState) {
+}) => {
+  const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getDateQuickInsertComponents({
+      api
+    }));
+  }
+  return {
+    name: 'date',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          showDatePickerAt: null,
+          isNew: false,
+          focusDateInput: false,
+          isInitialised: true
+        };
+      }
+      const {
+        showDatePickerAt,
+        isNew,
+        focusDateInput,
+        isInitialised
+      } = datePluginKey.getState(editorState) || {};
       return {
-        showDatePickerAt: null,
-        isNew: false,
-        focusDateInput: false,
-        isInitialised: true
+        showDatePickerAt,
+        isNew: !!isNew,
+        focusDateInput: !!focusDateInput,
+        isInitialised: !!isInitialised
       };
-    }
-    const {
-      showDatePickerAt,
-      isNew,
-      focusDateInput,
-      isInitialised
-    } = datePluginKey.getState(editorState) || {};
-    return {
-      showDatePickerAt,
-      isNew: !!isNew,
-      focusDateInput: !!focusDateInput,
-      isInitialised: !!isInitialised
-    };
-  },
-  commands: {
-    insertDate: insertDateCommand(api),
-    deleteDate: deleteDateCommand(api)
-  },
-  nodes() {
-    return [{
-      name: 'date',
-      node: fg('platform_editor_adf_with_localid') ? dateWithLocalId : date
-    }];
-  },
-  pmPlugins() {
-    return [{
-      name: 'date',
-      plugin: pmPluginFactoryParams => {
-        DatePicker.preload();
-        return createDatePlugin(pmPluginFactoryParams);
-      }
-    }, {
-      name: 'dateKeymap',
-      plugin: () => {
-        DatePicker.preload();
-        return keymap();
+    },
+    commands: {
+      insertDate: insertDateCommand(api),
+      deleteDate: deleteDateCommand(api)
+    },
+    nodes() {
+      return [{
+        name: 'date',
+        node: fg('platform_editor_adf_with_localid') ? dateWithLocalId : date
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'date',
+        plugin: pmPluginFactoryParams => {
+          DatePicker.preload();
+          return createDatePlugin(pmPluginFactoryParams);
+        }
+      }, {
+        name: 'dateKeymap',
+        plugin: () => {
+          DatePicker.preload();
+          return keymap();
+        }
+      }];
+    },
+    contentComponent({
+      editorView,
+      dispatchAnalyticsEvent,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    }) {
+      if (!editorView) {
+        return null;
       }
-    }];
-  },
-  contentComponent({
-    editorView,
-    dispatchAnalyticsEvent,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement
-  }) {
-    if (!editorView) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(ContentComponent, {
-      dependencyApi: api,
-      editorView: editorView,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      popupsMountPoint: popupsMountPoint,
-      popupsBoundariesElement: popupsBoundariesElement,
-      popupsScrollableElement: popupsScrollableElement,
-      weekStartDay: config.weekStartDay
-    });
-  },
-  pluginsOptions: {
-    quickInsert: ({
-      formatMessage
-    }) => [{
-      id: 'date',
-      title: formatMessage(messages.date),
-      description: formatMessage(messages.dateDescription),
-      priority: 800,
-      keywords: ['calendar', 'day', 'time', 'today', '/'],
-      keyshortcut: '//',
-      icon: () => /*#__PURE__*/React.createElement(IconDate, null),
-      action(insert, state, source) {
-        var _api$analytics, _api$analytics$action, _api$analytics$action2;
-        const tr = createDate(true)(state);
-        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
-          action: ACTION.INSERTED,
-          actionSubject: ACTION_SUBJECT.DOCUMENT,
-          actionSubjectId: ACTION_SUBJECT_ID.DATE,
-          eventType: EVENT_TYPE.TRACK,
-          attributes: {
-            inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        dependencyApi: api,
+        editorView: editorView,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        weekStartDay: config.weekStartDay
+      });
+    },
+    pluginsOptions: {
+      ...(isRegisteredSlashCommandEnabled ? {} : {
+        quickInsert: ({
+          formatMessage
+        }) => [{
+          id: 'date',
+          title: formatMessage(messages.date),
+          description: formatMessage(messages.dateDescription),
+          priority: 800,
+          keywords: ['calendar', 'day', 'time', 'today', '/'],
+          keyshortcut: '//',
+          icon: () => /*#__PURE__*/React.createElement(IconDate, null),
+          action(insert, state, source) {
+            var _api$analytics, _api$analytics$action, _api$analytics$action2;
+            const tr = createDate(true)(state);
+            api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
+              action: ACTION.INSERTED,
+              actionSubject: ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: ACTION_SUBJECT_ID.DATE,
+              eventType: EVENT_TYPE.TRACK,
+              attributes: {
+                inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
+              }
+            })(tr);
+            return tr;
           }
-        })(tr);
-        return tr;
-      }
-    }],
-    floatingToolbar: (state, intl) => {
-      const isViewMode = () => {
-        var _api$editorViewMode, _api$editorViewMode$s;
-        return (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
-      };
-      if (!isViewMode()) {
-        return undefined;
-      }
-      const onClick = (stateFromClickEvent, dispatch) => {
-        var _api$analytics2, _api$annotation, _api$annotation$actio;
-        if (!(api !== null && api !== void 0 && api.annotation)) {
-          return true;
-        }
-        if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
-          var _api$analytics3, _api$analytics3$actio;
-          api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.fireAnalyticsEvent({
-            action: ACTION.CLICKED,
-            actionSubject: ACTION_SUBJECT.BUTTON,
-            actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
-            eventType: EVENT_TYPE.UI,
-            attributes: {
-              source: 'highlightActionsMenu',
-              pageMode: 'edit',
-              sourceNode: 'date'
-            }
-          });
+        }]
+      }),
+      floatingToolbar: (state, intl) => {
+        const isViewMode = () => {
+          var _api$editorViewMode, _api$editorViewMode$s;
+          return (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
+        };
+        if (!isViewMode()) {
+          return undefined;
         }
-        const command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : (_api$annotation$actio = _api$annotation.actions) === null || _api$annotation$actio === void 0 ? void 0 : _api$annotation$actio.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
-        return command(stateFromClickEvent, dispatch);
-      };
-      return {
-        title: 'Date floating toolbar',
-        nodeType: [state.schema.nodes.date],
-        getDomRef: editorView => {
-          const dateState = datePluginKey.getState(state);
-          const datePosition = dateState === null || dateState === void 0 ? void 0 : dateState.showDatePickerAt;
-          if (!datePosition) {
-            return undefined;
+        const onClick = (stateFromClickEvent, dispatch) => {
+          var _api$analytics2, _api$annotation, _api$annotation$actio;
+          if (!(api !== null && api !== void 0 && api.annotation)) {
+            return true;
           }
-          const domAtPos = editorView.domAtPos.bind(editorView);
-          const domRef = findDomRefAtPos(datePosition, domAtPos);
-          const isHTMLElement = element => {
-            return element instanceof HTMLElement;
-          };
-          if (isHTMLElement(domRef)) {
-            return domRef;
+          if (api !== null && api !== void 0 && (_api$analytics2 = api.analytics) !== null && _api$analytics2 !== void 0 && _api$analytics2.actions) {
+            var _api$analytics3, _api$analytics3$actio;
+            api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.fireAnalyticsEvent({
+              action: ACTION.CLICKED,
+              actionSubject: ACTION_SUBJECT.BUTTON,
+              actionSubjectId: ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
+              eventType: EVENT_TYPE.UI,
+              attributes: {
+                source: 'highlightActionsMenu',
+                pageMode: 'edit',
+                sourceNode: 'date'
+              }
+            });
           }
-          return undefined;
-        },
-        onPositionCalculated: calculateToolbarPositionAboveSelection('Date floating toolbar'),
-        items: node => {
-          var _api$annotation2;
-          const annotationState = api === null || api === void 0 ? void 0 : (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
-          const activeCommentMark = node.marks.find(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false);
-          const showAnnotation = annotationState && annotationState.isVisible && isViewMode() && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
-          if (showAnnotation) {
-            return [{
-              type: 'button',
-              showTitle: true,
-              testId: 'add-comment-date-button',
-              icon: CommentIcon,
-              title: intl.formatMessage(annotationMessages.createComment),
-              onClick,
-              tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
-                description: intl.formatMessage(annotationMessages.createComment)
-              }),
-              supportsViewMode: true
-            }];
+          const command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : (_api$annotation$actio = _api$annotation.actions) === null || _api$annotation$actio === void 0 ? void 0 : _api$annotation$actio.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
+          return command(stateFromClickEvent, dispatch);
+        };
+        return {
+          title: 'Date floating toolbar',
+          nodeType: [state.schema.nodes.date],
+          getDomRef: editorView => {
+            const dateState = datePluginKey.getState(state);
+            const datePosition = dateState === null || dateState === void 0 ? void 0 : dateState.showDatePickerAt;
+            if (!datePosition) {
+              return undefined;
+            }
+            const domAtPos = editorView.domAtPos.bind(editorView);
+            const domRef = findDomRefAtPos(datePosition, domAtPos);
+            const isHTMLElement = element => {
+              return element instanceof HTMLElement;
+            };
+            if (isHTMLElement(domRef)) {
+              return domRef;
+            }
+            return undefined;
+          },
+          onPositionCalculated: calculateToolbarPositionAboveSelection('Date floating toolbar'),
+          items: node => {
+            var _api$annotation2;
+            const annotationState = api === null || api === void 0 ? void 0 : (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            const activeCommentMark = node.marks.find(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false);
+            const showAnnotation = annotationState && annotationState.isVisible && isViewMode() && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
+            if (showAnnotation) {
+              return [{
+                type: 'button',
+                showTitle: true,
+                testId: 'add-comment-date-button',
+                icon: CommentIcon,
+                title: intl.formatMessage(annotationMessages.createComment),
+                onClick,
+                tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+                  description: intl.formatMessage(annotationMessages.createComment)
+                }),
+                supportsViewMode: true
+              }];
+            }
+            return [];
           }
-          return [];
-        }
-      };
+        };
+      }
     }
-  }
-});
+  };
+};
 export default datePlugin;

package/dist/es2019/pm-plugins/actions.js

@@ -5,6 +5,12 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { canInsert } from '@atlaskit/editor-prosemirror/utils';
 import { isToday } from '../ui/DatePicker/utils/internal';
 import { pluginKey } from './plugin-key';
+/**
+ * Creates a date using a new transaction from the editor state.
+ *
+ * @private
+ * @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
+ */
 export const createDate = isQuickInsertAction => state => {
   const tr = state.tr;
   const annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
@@ -29,6 +35,30 @@ export const createDate = isQuickInsertAction => state => {
   };
   return tr.setMeta(pluginKey, newPluginState);
 };
+export const createDateAtTransaction = isQuickInsertAction => tr => {
+  const schema = tr.doc.type.schema;
+  const annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
+  const dateNode = schema.nodes.date.createChecked({
+    timestamp: todayTimestampInUTC()
+  }, null, annotationMarksForPos);
+  const fragment = Fragment.fromArray([dateNode, schema.text(' ', annotationMarksForPos)]);
+  const insertable = canInsert(tr.selection.$from, fragment);
+  if (!insertable) {
+    const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+    tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
+  } else {
+    tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
+  }
+  const newPluginState = {
+    isQuickInsertAction,
+    showDatePickerAt: tr.selection.from,
+    isNew: true,
+    isDateEmpty: false,
+    focusDateInput: false,
+    isInitialised: true
+  };
+  return tr.setMeta(pluginKey, newPluginState);
+};
 
 /** Focus input */
 export const focusDateInput = () => (state, dispatch) => {

package/dist/es2019/ui/quick-insert/DateQuickInsertMenuItem.js

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconDate } from '@atlaskit/editor-common/quick-insert';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { createDateAtTransaction } from '../../pm-plugins/actions';
+export const DateQuickInsertMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const onSelect = useCallback(({
+    insert,
+    source
+  }) => {
+    var _api$analytics, _api$analytics$action, _api$analytics$action2;
+    const tr = createDateAtTransaction(true)(insert(undefined));
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.DATE,
+      attributes: {
+        inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  }, [api]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconDate, null),
+    onSelect: onSelect,
+    shortcut: "//",
+    title: formatMessage(messages.date)
+  });
+};

package/dist/es2019/ui/quick-insert/getDateQuickInsertComponents.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DATE_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { DateQuickInsertMenuItem } from './DateQuickInsertMenuItem';
+export const getDateQuickInsertComponents = ({
+  api
+}) => [{
+  key: DATE_MENU_ITEM.key,
+  type: DATE_MENU_ITEM.type,
+  parents: [{
+    key: STRUCTURE_SECTION.key,
+    type: STRUCTURE_SECTION.type,
+    rank: STRUCTURE_SECTION_RANK[DATE_MENU_ITEM.key]
+  }],
+  component: () => /*#__PURE__*/React.createElement(DateQuickInsertMenuItem, {
+    api: api
+  })
+}];

package/dist/esm/datePlugin.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import Loadable from 'react-loadable';
 import { date, dateWithLocalId } from '@atlaskit/adf-schema';
@@ -10,12 +13,14 @@ import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { closeDatePicker as _closeDatePicker, closeDatePickerWithAnalytics as _closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
 import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
 import keymap from './pm-plugins/keymap';
 import createDatePlugin from './pm-plugins/main';
 import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
+import { getDateQuickInsertComponents } from './ui/quick-insert/getDateQuickInsertComponents';
 var DatePicker = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(function (mod) {
@@ -131,6 +136,13 @@ var datePlugin = function datePlugin(_ref3) {
   var _ref3$config = _ref3.config,
     config = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
+  var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getDateQuickInsertComponents({
+      api: api
+    }));
+  }
   return {
     name: 'date',
     getSharedState: function getSharedState(editorState) {
@@ -198,7 +210,7 @@ var datePlugin = function datePlugin(_ref3) {
         weekStartDay: config.weekStartDay
       });
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({}, isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: function quickInsert(_ref6) {
         var formatMessage = _ref6.formatMessage;
         return [{
@@ -226,7 +238,8 @@ var datePlugin = function datePlugin(_ref3) {
             return tr;
           }
         }];
-      },
+      }
+    }), {}, {
       floatingToolbar: function floatingToolbar(state, intl) {
         var isViewMode = function isViewMode() {
           var _api$editorViewMode;
@@ -302,7 +315,7 @@ var datePlugin = function datePlugin(_ref3) {
           }
         };
       }
-    }
+    })
   };
 };
 export default datePlugin;

package/dist/esm/pm-plugins/actions.js

@@ -5,6 +5,12 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { canInsert } from '@atlaskit/editor-prosemirror/utils';
 import { isToday } from '../ui/DatePicker/utils/internal';
 import { pluginKey } from './plugin-key';
+/**
+ * Creates a date using a new transaction from the editor state.
+ *
+ * @private
+ * @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
+ */
 export var createDate = function createDate(isQuickInsertAction) {
   return function (state) {
     var tr = state.tr;
@@ -31,6 +37,32 @@ export var createDate = function createDate(isQuickInsertAction) {
     return tr.setMeta(pluginKey, newPluginState);
   };
 };
+export var createDateAtTransaction = function createDateAtTransaction(isQuickInsertAction) {
+  return function (tr) {
+    var schema = tr.doc.type.schema;
+    var annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
+    var dateNode = schema.nodes.date.createChecked({
+      timestamp: todayTimestampInUTC()
+    }, null, annotationMarksForPos);
+    var fragment = Fragment.fromArray([dateNode, schema.text(' ', annotationMarksForPos)]);
+    var insertable = canInsert(tr.selection.$from, fragment);
+    if (!insertable) {
+      var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+      tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
+    } else {
+      tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
+    }
+    var newPluginState = {
+      isQuickInsertAction: isQuickInsertAction,
+      showDatePickerAt: tr.selection.from,
+      isNew: true,
+      isDateEmpty: false,
+      focusDateInput: false,
+      isInitialised: true
+    };
+    return tr.setMeta(pluginKey, newPluginState);
+  };
+};
 
 /** Focus input */
 export var focusDateInput = function focusDateInput() {

package/dist/esm/ui/quick-insert/DateQuickInsertMenuItem.js

@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconDate } from '@atlaskit/editor-common/quick-insert';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { createDateAtTransaction } from '../../pm-plugins/actions';
+export var DateQuickInsertMenuItem = function DateQuickInsertMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = useCallback(function (_ref2) {
+    var _api$analytics, _api$analytics$attach;
+    var insert = _ref2.insert,
+      source = _ref2.source;
+    var tr = createDateAtTransaction(true)(insert(undefined));
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || (_api$analytics$attach = _api$analytics.attachAnalyticsEvent) === null || _api$analytics$attach === void 0 || _api$analytics$attach.call(_api$analytics, {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.DATE,
+      attributes: {
+        inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  }, [api]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconDate, null),
+    onSelect: onSelect,
+    shortcut: "//",
+    title: formatMessage(messages.date)
+  });
+};

package/dist/esm/ui/quick-insert/getDateQuickInsertComponents.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DATE_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { DateQuickInsertMenuItem } from './DateQuickInsertMenuItem';
+export var getDateQuickInsertComponents = function getDateQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    key: DATE_MENU_ITEM.key,
+    type: DATE_MENU_ITEM.type,
+    parents: [{
+      key: STRUCTURE_SECTION.key,
+      type: STRUCTURE_SECTION.type,
+      rank: STRUCTURE_SECTION_RANK[DATE_MENU_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(DateQuickInsertMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/types/datePluginType.d.ts

@@ -3,12 +3,14 @@ import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 import type { DatePluginOptions, DatePluginSharedState, DeleteDate, InsertDate } from './types';
 export type DatePluginDependencies = [
     typeof analyticsPlugin,
     EditorDisabledPlugin,
     OptionalPlugin<AnnotationPlugin>,
-    OptionalPlugin<EditorViewModePlugin>
+    OptionalPlugin<EditorViewModePlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type DatePlugin = NextEditorPlugin<'date', {
     commands: {

package/dist/types/pm-plugins/actions.d.ts

@@ -1,7 +1,14 @@
 import type { Command, CommandDispatch, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DatePlugin, DateType } from '../types';
+/**
+ * Creates a date using a new transaction from the editor state.
+ *
+ * @private
+ * @deprecated Used by the legacy Quick Insert flow. Use `createDateAtTransaction` when an existing transaction is available.
+ */
 export declare const createDate: (isQuickInsertAction?: boolean) => (state: EditorState) => Transaction;
+export declare const createDateAtTransaction: (isQuickInsertAction?: boolean) => (tr: Transaction) => Transaction;
 /** Focus input */
 export declare const focusDateInput: () => (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
 export declare const setDatePickerAt: (showDatePickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;

package/dist/types/types/index.d.ts

@@ -5,6 +5,7 @@ import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { AnnotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 export type DateSegment = 'day' | 'month' | 'year';
 export type DateType = {
     day?: number;
@@ -42,7 +43,8 @@ export type DatePlugin = NextEditorPlugin<'date', {
         typeof analyticsPlugin,
         EditorDisabledPlugin,
         OptionalPlugin<AnnotationPlugin>,
-        OptionalPlugin<EditorViewModePlugin>
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<UiControlRegistryPlugin>
     ];
     pluginConfiguration: DatePluginOptions | undefined;
     sharedState: DatePluginSharedState;

package/dist/types/ui/quick-insert/DateQuickInsertMenuItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { DatePlugin } from '../../datePluginType';
+export declare const DateQuickInsertMenuItem: ({ api, }: {
+    api: ExtractInjectionAPI<DatePlugin> | undefined;
+}) => React.JSX.Element;

package/dist/types/ui/quick-insert/getDateQuickInsertComponents.d.ts

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { DatePlugin } from '../../datePluginType';
+export declare const getDateQuickInsertComponents: ({ api, }: {
+    api: ExtractInjectionAPI<DatePlugin> | undefined;
+}) => RegisterMenuItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-date",
-	"version": "15.0.1",
+	"version": "15.0.2",
 	"description": "Date plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,11 +28,14 @@
 		"@atlaskit/editor-plugin-annotation": "^13.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^13.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^15.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
+		"@atlaskit/editor-ui-control-model": "^2.4.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/locale": "^5.0.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/textfield": "^10.0.0",
 		"@atlaskit/tmp-editor-statsig": "^139.0.0",
@@ -50,7 +53,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^117.0.0",
+		"@atlaskit/editor-common": "^117.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"