@atlaskit/editor-plugin-synced-block 4.2.7 → 4.2.9

package/dist/esm/ui/CreateSyncedBlockItem.js

@@ -5,16 +5,21 @@ import { syncBlockMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
 import Lozenge from '@atlaskit/lozenge';
-import { Flex } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export var CreateSyncedBlockItem = function CreateSyncedBlockItem(_ref) {
   var api = _ref.api;
-  var intl = useIntl();
-  var selection = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
-    var _states$selectionStat;
-    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
-  });
-  var isDisabled = Boolean(!selection || !canBeConvertedToSyncBlock(selection));
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'connectivity'], function (states) {
+      var _states$selectionStat, _states$connectivityS;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      };
+    }),
+    selection = _useSharedPluginState.selection,
+    mode = _useSharedPluginState.mode;
+  var isDisabled = Boolean(!selection || !canBeConvertedToSyncBlock(selection) || mode === 'offline');
   var onClick = useCallback(function () {
     var _api$core, _api$core2;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
@@ -25,18 +30,15 @@ export var CreateSyncedBlockItem = function CreateSyncedBlockItem(_ref) {
     });
     api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
   }, [api]);
-  var message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: onClick,
     isDisabled: isDisabled,
     elemBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
       size: "small",
       label: ""
-    })
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    gap: "space.050"
-  }, message, /*#__PURE__*/React.createElement(Lozenge, {
-    appearance: "new"
-  }, intl.formatMessage(syncBlockMessages.newLozenge))));
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(syncBlockMessages.newLozenge))
+  }, formatMessage(syncBlockMessages.createSyncBlockLabel));
 };

package/dist/esm/ui/DeleteConfirmationModal.js

@@ -2,11 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { Text } from '@atlaskit/primitives/compiled';
 export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
-  var syncBlockStoreManager = _ref.syncBlockStoreManager;
+  var syncBlockStoreManager = _ref.syncBlockStoreManager,
+    api = _ref.api;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -15,6 +17,13 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     syncBlockCount = _useState4[0],
     setSyncBlockCount = _useState4[1];
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (states) {
+      var _states$connectivityS;
+      return {
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      };
+    }),
+    mode = _useSharedPluginState.mode;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var resolverRef = React.useRef(undefined);
@@ -55,6 +64,7 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
   }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
     appearance: "warning",
     onClick: handleClose(true),
-    autoFocus: true
+    autoFocus: true,
+    isDisabled: mode === 'offline'
   }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };

package/dist/esm/ui/Flag.js

@@ -0,0 +1,58 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import AkFlag, { FlagGroup } from '@atlaskit/flag';
+import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { syncedBlockPluginKey } from '../pm-plugins/main';
+import { FLAG_ID } from '../types';
+var flagMap = _defineProperty(_defineProperty(_defineProperty({}, FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
+  title: messages.failToDeleteTitle,
+  description: messages.failToDeleteWhenOfflineDescription
+}), FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE, {
+  title: messages.failToEditTitle,
+  description: messages.failToEditWhenOfflineDescription
+}), FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE, {
+  title: messages.failToCreateTitle,
+  description: messages.failToCreateWhenOfflineDescription
+});
+export var Flag = function Flag(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['syncedBlock'], function (states) {
+      var _states$syncedBlockSt;
+      return {
+        showFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.showFlag
+      };
+    }),
+    showFlag = _useSharedPluginState.showFlag;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  if (!showFlag) {
+    return;
+  }
+  var _flagMap$showFlag = flagMap[showFlag],
+    title = _flagMap$showFlag.title,
+    description = _flagMap$showFlag.description;
+  var onDismissed = function onDismissed() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(syncedBlockPluginKey, {
+        showFlag: false
+      });
+      return tr;
+    });
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(AkFlag, {
+    onDismissed: onDismissed,
+    title: formatMessage(title),
+    description: formatMessage(description),
+    id: showFlag,
+    testId: showFlag,
+    icon: /*#__PURE__*/React.createElement(StatusErrorIcon, {
+      label: "",
+      color: "var(--ds-icon-danger, #C9372C)"
+    })
+  }));
+};

package/dist/esm/ui/floating-toolbar.js

@@ -11,7 +11,7 @@ import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
-  var _api$decorations;
+  var _api$decorations, _api$connectivity;
   var syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
   if (!syncBlockObject) {
     return;
@@ -83,6 +83,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
     nodeType: nodeType,
     items: items,
     scrollable: true,
-    groupLabel: formatMessage(messages.syncBlockGroup)
+    groupLabel: formatMessage(messages.syncBlockGroup),
+    visible: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) !== 'offline'
   };
 };

package/dist/types/nodeviews/bodiedSyncedBlock.d.ts

@@ -14,8 +14,8 @@ export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     pluginOptions: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
-    view: EditorView;
     syncBlockStore: SyncBlockStoreManager;
+    view: EditorView;
 }
 export interface BodiedSyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;

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

@@ -1,12 +1,14 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+import { FLAG_ID } from '../types';
 export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {
-    decorationSet: DecorationSet;
+    selectionDecorationSet: DecorationSet;
+    showFlag: FLAG_ID | false;
 };
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types/pm-plugins/utils/ignore-dom-event.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SyncedBlockPlugin } from '../../syncedBlockPluginType';
+/**
+ *
+ * @returns true if should ignore event happens within bodiedSyncBlock node when offline
+ */
+export declare const shouldIgnoreDomEvent: (view: EditorView, event: MouseEvent | PointerEvent, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => true | undefined;

package/dist/types/pm-plugins/utils/track-sync-blocks.d.ts

@@ -5,3 +5,8 @@ export declare const trackSyncBlocks: (storeManager: SyncBlockStoreManager, tr:
     removed: SyncBlockAttrs[];
     added: SyncBlockAttrs[];
 };
+/**
+ *
+ * @returns true if steps modifies children node within bodiedSyncBlock
+ */
+export declare const hasEditInSyncBlock: (tr: Transaction, state: EditorState) => boolean;

package/dist/types/syncedBlockPluginType.d.ts

@@ -4,12 +4,14 @@ import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockDataProvider, UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockSharedState } from './types';
 export type SyncedBlockEditorProps = {
     defaultDocument: JSONDocNode;
     onChange: (editorView: EditorView, meta: {
@@ -61,9 +63,11 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<ToolbarPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<ConnectivityPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
+    sharedState: SyncedBlockSharedState | undefined;
 }>;
 export type SyncBlockAttrs = {
     localId: string;

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

@@ -0,0 +1,11 @@
+export declare enum FLAG_ID {
+    CANNOT_DELETE_WHEN_OFFLINE = "cannot-delete-when-offline",
+    CANNOT_EDIT_WHEN_OFFLINE = "cannot-edit-when-offline",
+    CANNOT_CREATE_WHEN_OFFLINE = "cannot-create-when-offline"
+}
+export type SyncedBlockSharedState = {
+    /**
+     * Whether to show a flag (usually for errors, e.g. fail to delete)
+     */
+    showFlag: FLAG_ID | false;
+};

package/dist/types/ui/DeleteConfirmationModal.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
-export declare const DeleteConfirmationModal: ({ syncBlockStoreManager, }: {
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const DeleteConfirmationModal: ({ syncBlockStoreManager, api, }: {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     syncBlockStoreManager: SyncBlockStoreManager;
 }) => React.JSX.Element;

package/dist/types/ui/Flag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+type Props = {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+};
+export declare const Flag: ({ api }: Props) => React.JSX.Element | undefined;
+export {};

package/dist/types-ts4.5/nodeviews/bodiedSyncedBlock.d.ts

@@ -14,8 +14,8 @@ export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     pluginOptions: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
-    view: EditorView;
     syncBlockStore: SyncBlockStoreManager;
+    view: EditorView;
 }
 export interface BodiedSyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;

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

@@ -1,12 +1,14 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+import { FLAG_ID } from '../types';
 export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {
-    decorationSet: DecorationSet;
+    selectionDecorationSet: DecorationSet;
+    showFlag: FLAG_ID | false;
 };
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types-ts4.5/pm-plugins/utils/ignore-dom-event.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SyncedBlockPlugin } from '../../syncedBlockPluginType';
+/**
+ *
+ * @returns true if should ignore event happens within bodiedSyncBlock node when offline
+ */
+export declare const shouldIgnoreDomEvent: (view: EditorView, event: MouseEvent | PointerEvent, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined) => true | undefined;

package/dist/types-ts4.5/pm-plugins/utils/track-sync-blocks.d.ts

@@ -5,3 +5,8 @@ export declare const trackSyncBlocks: (storeManager: SyncBlockStoreManager, tr:
     removed: SyncBlockAttrs[];
     added: SyncBlockAttrs[];
 };
+/**
+ *
+ * @returns true if steps modifies children node within bodiedSyncBlock
+ */
+export declare const hasEditInSyncBlock: (tr: Transaction, state: EditorState) => boolean;

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

@@ -4,12 +4,14 @@ import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockDataProvider, UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockSharedState } from './types';
 export type SyncedBlockEditorProps = {
     defaultDocument: JSONDocNode;
     onChange: (editorView: EditorView, meta: {
@@ -61,9 +63,11 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<ToolbarPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<ConnectivityPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
+    sharedState: SyncedBlockSharedState | undefined;
 }>;
 export type SyncBlockAttrs = {
     localId: string;

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

@@ -0,0 +1,11 @@
+export declare enum FLAG_ID {
+    CANNOT_DELETE_WHEN_OFFLINE = "cannot-delete-when-offline",
+    CANNOT_EDIT_WHEN_OFFLINE = "cannot-edit-when-offline",
+    CANNOT_CREATE_WHEN_OFFLINE = "cannot-create-when-offline"
+}
+export type SyncedBlockSharedState = {
+    /**
+     * Whether to show a flag (usually for errors, e.g. fail to delete)
+     */
+    showFlag: FLAG_ID | false;
+};

package/dist/types-ts4.5/ui/DeleteConfirmationModal.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
-export declare const DeleteConfirmationModal: ({ syncBlockStoreManager, }: {
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+export declare const DeleteConfirmationModal: ({ syncBlockStoreManager, api, }: {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     syncBlockStoreManager: SyncBlockStoreManager;
 }) => React.JSX.Element;

package/dist/types-ts4.5/ui/Flag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
+type Props = {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+};
+export declare const Flag: ({ api }: Props) => React.JSX.Element | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.2.7",
+	"version": "4.2.9",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,27 +33,30 @@
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-block-menu": "^5.0.0",
+		"@atlaskit/editor-plugin-connectivity": "6.0.0",
 		"@atlaskit/editor-plugin-decorations": "^6.1.0",
 		"@atlaskit/editor-plugin-floating-toolbar": "^8.2.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.9.0",
-		"@atlaskit/editor-synced-block-provider": "^2.8.0",
+		"@atlaskit/editor-synced-block-provider": "^2.9.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.17.0",
+		"@atlaskit/flag": "^17.5.0",
 		"@atlaskit/icon": "29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/modal-dialog": "^14.7.0",
 		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/tokens": "8.0.0",
 		"@atlaskit/tooltip": "^20.8.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.29.0",
+		"@atlaskit/editor-common": "^110.31.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {