@atlaskit/editor-plugin-limited-mode 1.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-limited-mode
 
+## 2.1.0
+
+### Minor Changes
+
+- [`a471e1e42004e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a471e1e42004e) -
+  [ux] ED-29329: Remove limited mode banner and replace with a limited mode flag, reusing
+  confluence's flag setup.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -17,6 +17,9 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/primitives/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/limitedModePlugin.js

@@ -1,11 +1,24 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.limitedModePlugin = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _reactIntlNext = require("react-intl-next");
+var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _main = require("./pm-plugins/main");
-var limitedModePlugin = exports.limitedModePlugin = function limitedModePlugin() {
+var _messages = _interopRequireDefault(require("./pm-plugins/messages"));
+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 limitedModePlugin = exports.limitedModePlugin = function limitedModePlugin(_ref) {
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
   return {
     name: 'limitedMode',
     pmPlugins: function pmPlugins() {
@@ -28,6 +41,64 @@ var limitedModePlugin = exports.limitedModePlugin = function limitedModePlugin()
         enabled: false,
         limitedModePluginKey: _main.limitedModePluginKey
       };
+    },
+    usePluginHook: function usePluginHook(_ref2) {
+      var editorView = _ref2.editorView;
+      var hasEditorBeenFocusedRef = (0, _react.useRef)(false);
+      var hasShownFlagRef = (0, _react.useRef)(false);
+      var _useIntl = (0, _reactIntlNext.useIntl)(),
+        formatMessage = _useIntl.formatMessage;
+
+      // Reset hasEditorBeenFocusedRef so live-to-live page navigation refreshes the flag. We rely on the page's contentId for this.
+      (0, _react.useEffect)(function () {
+        hasShownFlagRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [options.contentId]);
+      var checkAndShowFlag = (0, _react.useCallback)(function (isLimitedModeEnabled) {
+        var _learnMoreLink = (0, _expVal.expVal)('cc_editor_limited_mode', 'learnMoreLink', '');
+        if (isLimitedModeEnabled && hasEditorBeenFocusedRef.current && !hasShownFlagRef.current) {
+          var _options$showFlag;
+          void ((_options$showFlag = options.showFlag) === null || _options$showFlag === void 0 ? void 0 : _options$showFlag.call(options, {
+            title: formatMessage(_messages.default.limitedModeTitle),
+            description: _learnMoreLink ? formatMessage(_messages.default.limitedModeDescriptionWithLink, {
+              learnMoreLink: function learnMoreLink(chunks) {
+                return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+                  target: "_blank",
+                  href: _learnMoreLink
+                }, chunks);
+              }
+            }) : formatMessage(_messages.default.limitedModeDescriptionWithoutLink),
+            close: 'auto'
+          }));
+          hasShownFlagRef.current = true;
+        }
+      }, [formatMessage]);
+
+      // Track if the editor has been focused. On focus, check if the flag should be shown.
+      (0, _react.useEffect)(function () {
+        var handleFocus = function handleFocus() {
+          var _api$limitedMode$shar, _api$limitedMode;
+          hasEditorBeenFocusedRef.current = true;
+          // Get current state when focus happens
+          var isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
+          checkAndShowFlag(isLimitedModeEnabled);
+        };
+        var unbind = (0, _bindEventListener.bind)(editorView.dom, {
+          type: 'focus',
+          listener: handleFocus
+        });
+        return function () {
+          unbind();
+        };
+      }, [editorView, checkAndShowFlag]);
+
+      // On change of the limited mode enabled state, check if the flag should be shown.
+      (0, _usePluginStateEffect.usePluginStateEffect)(api, ['limitedMode'], function (_ref3) {
+        var _limitedModeState$ena;
+        var limitedModeState = _ref3.limitedModeState;
+        var isLimitedModeEnabled = (_limitedModeState$ena = limitedModeState === null || limitedModeState === void 0 ? void 0 : limitedModeState.enabled) !== null && _limitedModeState$ena !== void 0 ? _limitedModeState$ena : false;
+        checkAndShowFlag(isLimitedModeEnabled);
+      });
     }
   };
 };

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+var _default = exports.default = (0, _reactIntlNext.defineMessages)({
+  limitedModeTitle: {
+    id: 'fabric.editor.limitedModeTitle',
+    defaultMessage: 'Speed Improvements',
+    description: 'Title for flag shown when some functionality is disabled in a page in order to improve the pages speed.'
+  },
+  limitedModeDescriptionWithLink: {
+    id: 'fabric.editor.limitedModeDescription',
+    defaultMessage: 'To increase speed and response time <learnMoreLink>some editing features are limited.</learnMoreLink>',
+    description: 'Description for flag shown when some functionality is disabled in a page in order to improve the pages speed. This description contains a link to learn more about limited mode.'
+  },
+  limitedModeDescriptionWithoutLink: {
+    id: 'fabric.editor.limitedModeDescriptionWithoutLink',
+    defaultMessage: 'To increase speed and response time some editing features are limited.',
+    description: 'Description for flag shown when some functionality is disabled in a page in order to improve the pages speed. This description does not contain a link to learn more about limited mode.'
+  }
+});

package/dist/es2019/limitedModePlugin.js

@@ -1,5 +1,15 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { bind } from 'bind-event-listener';
+import { useIntl } from 'react-intl-next';
+import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
+import { Anchor } from '@atlaskit/primitives/compiled';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { createPlugin, limitedModePluginKey } from './pm-plugins/main';
-export const limitedModePlugin = () => {
+import messages from './pm-plugins/messages';
+export const limitedModePlugin = ({
+  config: options = {},
+  api
+}) => {
   return {
     name: 'limitedMode',
     pmPlugins() {
@@ -22,6 +32,65 @@ export const limitedModePlugin = () => {
         enabled: false,
         limitedModePluginKey
       };
+    },
+    usePluginHook: ({
+      editorView
+    }) => {
+      const hasEditorBeenFocusedRef = useRef(false);
+      const hasShownFlagRef = useRef(false);
+      const {
+        formatMessage
+      } = useIntl();
+
+      // Reset hasEditorBeenFocusedRef so live-to-live page navigation refreshes the flag. We rely on the page's contentId for this.
+      useEffect(() => {
+        hasShownFlagRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [options.contentId]);
+      const checkAndShowFlag = useCallback(isLimitedModeEnabled => {
+        const learnMoreLink = expVal('cc_editor_limited_mode', 'learnMoreLink', '');
+        if (isLimitedModeEnabled && hasEditorBeenFocusedRef.current && !hasShownFlagRef.current) {
+          var _options$showFlag;
+          void ((_options$showFlag = options.showFlag) === null || _options$showFlag === void 0 ? void 0 : _options$showFlag.call(options, {
+            title: formatMessage(messages.limitedModeTitle),
+            description: learnMoreLink ? formatMessage(messages.limitedModeDescriptionWithLink, {
+              learnMoreLink: chunks => /*#__PURE__*/React.createElement(Anchor, {
+                target: "_blank",
+                href: learnMoreLink
+              }, chunks)
+            }) : formatMessage(messages.limitedModeDescriptionWithoutLink),
+            close: 'auto'
+          }));
+          hasShownFlagRef.current = true;
+        }
+      }, [formatMessage]);
+
+      // Track if the editor has been focused. On focus, check if the flag should be shown.
+      useEffect(() => {
+        const handleFocus = () => {
+          var _api$limitedMode$shar, _api$limitedMode, _api$limitedMode$shar2;
+          hasEditorBeenFocusedRef.current = true;
+          // Get current state when focus happens
+          const isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar2 = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar2 === void 0 ? void 0 : _api$limitedMode$shar2.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
+          checkAndShowFlag(isLimitedModeEnabled);
+        };
+        const unbind = bind(editorView.dom, {
+          type: 'focus',
+          listener: handleFocus
+        });
+        return () => {
+          unbind();
+        };
+      }, [editorView, checkAndShowFlag]);
+
+      // On change of the limited mode enabled state, check if the flag should be shown.
+      usePluginStateEffect(api, ['limitedMode'], ({
+        limitedModeState
+      }) => {
+        var _limitedModeState$ena;
+        const isLimitedModeEnabled = (_limitedModeState$ena = limitedModeState === null || limitedModeState === void 0 ? void 0 : limitedModeState.enabled) !== null && _limitedModeState$ena !== void 0 ? _limitedModeState$ena : false;
+        checkAndShowFlag(isLimitedModeEnabled);
+      });
     }
   };
 };

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

@@ -0,0 +1,21 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  limitedModeTitle: {
+    id: 'fabric.editor.limitedModeTitle',
+    defaultMessage: 'Speed Improvements',
+    description: 'Title for flag shown when some functionality is disabled in a page in order to improve the pages speed.'
+  },
+  limitedModeDescriptionWithLink: {
+    id: 'fabric.editor.limitedModeDescription',
+    defaultMessage: 'To increase speed and response time <learnMoreLink>some editing features are limited.</learnMoreLink>',
+    description: 'Description for flag shown when some functionality is disabled in a page in order to improve the pages speed. This description contains a link to learn more about limited mode.'
+  },
+  limitedModeDescriptionWithoutLink: {
+    id: 'fabric.editor.limitedModeDescriptionWithoutLink',
+    defaultMessage: 'To increase speed and response time some editing features are limited.',
+    description: 'Description for flag shown when some functionality is disabled in a page in order to improve the pages speed. This description does not contain a link to learn more about limited mode.'
+  }
+});

package/dist/esm/limitedModePlugin.js

@@ -1,5 +1,15 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { bind } from 'bind-event-listener';
+import { useIntl } from 'react-intl-next';
+import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
+import { Anchor } from '@atlaskit/primitives/compiled';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { createPlugin, limitedModePluginKey } from './pm-plugins/main';
-export var limitedModePlugin = function limitedModePlugin() {
+import messages from './pm-plugins/messages';
+export var limitedModePlugin = function limitedModePlugin(_ref) {
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
   return {
     name: 'limitedMode',
     pmPlugins: function pmPlugins() {
@@ -22,6 +32,64 @@ export var limitedModePlugin = function limitedModePlugin() {
         enabled: false,
         limitedModePluginKey: limitedModePluginKey
       };
+    },
+    usePluginHook: function usePluginHook(_ref2) {
+      var editorView = _ref2.editorView;
+      var hasEditorBeenFocusedRef = useRef(false);
+      var hasShownFlagRef = useRef(false);
+      var _useIntl = useIntl(),
+        formatMessage = _useIntl.formatMessage;
+
+      // Reset hasEditorBeenFocusedRef so live-to-live page navigation refreshes the flag. We rely on the page's contentId for this.
+      useEffect(function () {
+        hasShownFlagRef.current = false;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [options.contentId]);
+      var checkAndShowFlag = useCallback(function (isLimitedModeEnabled) {
+        var _learnMoreLink = expVal('cc_editor_limited_mode', 'learnMoreLink', '');
+        if (isLimitedModeEnabled && hasEditorBeenFocusedRef.current && !hasShownFlagRef.current) {
+          var _options$showFlag;
+          void ((_options$showFlag = options.showFlag) === null || _options$showFlag === void 0 ? void 0 : _options$showFlag.call(options, {
+            title: formatMessage(messages.limitedModeTitle),
+            description: _learnMoreLink ? formatMessage(messages.limitedModeDescriptionWithLink, {
+              learnMoreLink: function learnMoreLink(chunks) {
+                return /*#__PURE__*/React.createElement(Anchor, {
+                  target: "_blank",
+                  href: _learnMoreLink
+                }, chunks);
+              }
+            }) : formatMessage(messages.limitedModeDescriptionWithoutLink),
+            close: 'auto'
+          }));
+          hasShownFlagRef.current = true;
+        }
+      }, [formatMessage]);
+
+      // Track if the editor has been focused. On focus, check if the flag should be shown.
+      useEffect(function () {
+        var handleFocus = function handleFocus() {
+          var _api$limitedMode$shar, _api$limitedMode;
+          hasEditorBeenFocusedRef.current = true;
+          // Get current state when focus happens
+          var isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
+          checkAndShowFlag(isLimitedModeEnabled);
+        };
+        var unbind = bind(editorView.dom, {
+          type: 'focus',
+          listener: handleFocus
+        });
+        return function () {
+          unbind();
+        };
+      }, [editorView, checkAndShowFlag]);
+
+      // On change of the limited mode enabled state, check if the flag should be shown.
+      usePluginStateEffect(api, ['limitedMode'], function (_ref3) {
+        var _limitedModeState$ena;
+        var limitedModeState = _ref3.limitedModeState;
+        var isLimitedModeEnabled = (_limitedModeState$ena = limitedModeState === null || limitedModeState === void 0 ? void 0 : limitedModeState.enabled) !== null && _limitedModeState$ena !== void 0 ? _limitedModeState$ena : false;
+        checkAndShowFlag(isLimitedModeEnabled);
+      });
     }
   };
 };

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

@@ -0,0 +1,21 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  limitedModeTitle: {
+    id: 'fabric.editor.limitedModeTitle',
+    defaultMessage: 'Speed Improvements',
+    description: 'Title for flag shown when some functionality is disabled in a page in order to improve the pages speed.'
+  },
+  limitedModeDescriptionWithLink: {
+    id: 'fabric.editor.limitedModeDescription',
+    defaultMessage: 'To increase speed and response time <learnMoreLink>some editing features are limited.</learnMoreLink>',
+    description: 'Description for flag shown when some functionality is disabled in a page in order to improve the pages speed. This description contains a link to learn more about limited mode.'
+  },
+  limitedModeDescriptionWithoutLink: {
+    id: 'fabric.editor.limitedModeDescriptionWithoutLink',
+    defaultMessage: 'To increase speed and response time some editing features are limited.',
+    description: 'Description for flag shown when some functionality is disabled in a page in order to improve the pages speed. This description does not contain a link to learn more about limited mode.'
+  }
+});

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { limitedModePlugin } from './limitedModePlugin';
-export type { LimitedModePlugin, LimitedModePluginState } from './limitedModePluginType';
+export type { LimitedModePlugin, LimitedModePluginState, LimitedModePluginOptions, } from './limitedModePluginType';

package/dist/types/limitedModePluginType.d.ts

@@ -1,11 +1,21 @@
+import type React from 'react';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export type LimitedModePluginState = {
     documentSizeBreachesThreshold: boolean;
 };
 export type LimitedModePlugin = NextEditorPlugin<'limitedMode', {
+    pluginConfiguration: LimitedModePluginOptions | undefined;
     sharedState: {
         enabled: boolean;
         limitedModePluginKey: PluginKey<LimitedModePluginState>;
     };
 }>;
+export type LimitedModePluginOptions = {
+    contentId?: string;
+    showFlag?: (props: {
+        close: string;
+        description: React.ReactNode;
+        title: string;
+    }) => void;
+};

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

@@ -0,0 +1,18 @@
+declare const _default: {
+    limitedModeTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    limitedModeDescriptionWithLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    limitedModeDescriptionWithoutLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { limitedModePlugin } from './limitedModePlugin';
-export type { LimitedModePlugin, LimitedModePluginState } from './limitedModePluginType';
+export type { LimitedModePlugin, LimitedModePluginState, LimitedModePluginOptions, } from './limitedModePluginType';

package/dist/types-ts4.5/limitedModePluginType.d.ts

@@ -1,11 +1,21 @@
+import type React from 'react';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export type LimitedModePluginState = {
     documentSizeBreachesThreshold: boolean;
 };
 export type LimitedModePlugin = NextEditorPlugin<'limitedMode', {
+    pluginConfiguration: LimitedModePluginOptions | undefined;
     sharedState: {
         enabled: boolean;
         limitedModePluginKey: PluginKey<LimitedModePluginState>;
     };
 }>;
+export type LimitedModePluginOptions = {
+    contentId?: string;
+    showFlag?: (props: {
+        close: string;
+        description: React.ReactNode;
+        title: string;
+    }) => void;
+};

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

@@ -0,0 +1,18 @@
+declare const _default: {
+    limitedModeTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    limitedModeDescriptionWithLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    limitedModeDescriptionWithoutLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-limited-mode",
-	"version": "1.0.2",
+	"version": "2.1.0",
 	"description": "LimitedMode plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,11 +29,14 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.5.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/tmp-editor-statsig": "^12.24.0",
+		"@babel/runtime": "^7.0.0",
+		"bind-event-listener": "^3.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.3.0",
+		"@atlaskit/editor-common": "^109.8.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {