@atlaskit/editor-plugin-insert-block 2.4.15 → 2.4.16

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.4.16
+
+### Patch Changes
+
+- [#169233](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169233)
+  [`2ca37f881a673`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ca37f881a673) -
+  [ux] Disable media, emoji, and mention toolbar items while the editor is offline.
+
 ## 2.4.15
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -309,7 +309,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     options = _ref4.options,
     appearance = _ref4.appearance;
   var buttons = toolbarSizeToButtons(toolbarSize, appearance);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
@@ -319,7 +319,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     mediaState = _useSharedPluginState.mediaState,
     typeAheadState = _useSharedPluginState.typeAheadState,
     placeholderTextState = _useSharedPluginState.placeholderTextState,
-    insertBlockState = _useSharedPluginState.insertBlockState;
+    insertBlockState = _useSharedPluginState.insertBlockState,
+    connectivityState = _useSharedPluginState.connectivityState;
   var getEmojiProvider = function getEmojiProvider() {
     if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
       return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
@@ -358,6 +359,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     mediaUploadsEnabled: (_ref5 = mediaState && mediaState.allowsUploads) !== null && _ref5 !== void 0 ? _ref5 : undefined,
     onShowMediaPicker: onShowMediaPicker,
     mediaSupported: !!mediaState,
+    isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
     imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
     handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,

package/dist/cjs/ui/ToolbarInsertBlock/create-items.js

@@ -63,8 +63,10 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     expandEnabled = config.expandEnabled,
     numberOfButtons = config.numberOfButtons,
     schema = config.schema,
-    formatMessage = config.formatMessage;
+    formatMessage = config.formatMessage,
+    isEditorOffline = config.isEditorOffline;
   var items = [];
+  var isOffline = isEditorOffline === true;
   if (actionSupported) {
     items.push((0, _item.action)({
       content: formatMessage(_messages2.messages.action),
@@ -84,20 +86,20 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push((0, _item.media)({
       content: formatMessage(_messages2.messages.addMediaFiles),
       tooltipDescription: formatMessage(_messages2.messages.mediaFilesDescription),
-      disabled: false
+      disabled: isOffline
     }));
   }
   if (imageUploadSupported) {
     items.push((0, _item.imageUpload)({
       content: formatMessage(_messages2.messages.image),
-      disabled: !imageUploadEnabled
+      disabled: !imageUploadEnabled || isOffline
     }));
   }
   if (mentionsSupported) {
     items.push((0, _item.mention)({
       content: formatMessage(_messages2.messages.mention),
       tooltipDescription: formatMessage(_messages2.messages.mentionDescription),
-      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+      disabled: !isTypeAheadAllowed || !!mentionsDisabled || isOffline,
       'aria-haspopup': 'listbox'
     }));
   }
@@ -105,7 +107,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push((0, _item.emoji)({
       content: formatMessage(_messages2.messages.emoji),
       tooltipDescription: formatMessage(_messages2.messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed,
+      disabled: emojiDisabled || !isTypeAheadAllowed || isOffline,
       'aria-haspopup': 'dialog'
     }));
   }

package/dist/cjs/ui/ToolbarInsertBlock/index.js

@@ -826,6 +826,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           tableSelectorSupported: props.tableSelectorSupported,
           mediaUploadsEnabled: props.mediaUploadsEnabled,
           mediaSupported: props.mediaSupported,
+          isEditorOffline: props.isEditorOffline,
           imageUploadSupported: props.imageUploadSupported,
           imageUploadEnabled: props.imageUploadEnabled,
           mentionsSupported: props.mentionsSupported,

package/dist/es2019/plugin.js

@@ -315,8 +315,9 @@ function ToolbarInsertBlockWithInjectionApi({
     mediaState,
     typeAheadState,
     placeholderTextState,
-    insertBlockState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock']);
+    insertBlockState,
+    connectivityState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']);
   const getEmojiProvider = () => {
     if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
       return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
@@ -355,6 +356,7 @@ function ToolbarInsertBlockWithInjectionApi({
     mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
     onShowMediaPicker: onShowMediaPicker,
     mediaSupported: !!mediaState,
+    isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
     imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
     handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,

package/dist/es2019/ui/ToolbarInsertBlock/create-items.js

@@ -49,9 +49,11 @@ const createInsertBlockItems = config => {
     expandEnabled,
     numberOfButtons,
     schema,
-    formatMessage
+    formatMessage,
+    isEditorOffline
   } = config;
   const items = [];
+  const isOffline = isEditorOffline === true;
   if (actionSupported) {
     items.push(action({
       content: formatMessage(messages.action),
@@ -71,20 +73,20 @@ const createInsertBlockItems = config => {
     items.push(media({
       content: formatMessage(messages.addMediaFiles),
       tooltipDescription: formatMessage(messages.mediaFilesDescription),
-      disabled: false
+      disabled: isOffline
     }));
   }
   if (imageUploadSupported) {
     items.push(imageUpload({
       content: formatMessage(messages.image),
-      disabled: !imageUploadEnabled
+      disabled: !imageUploadEnabled || isOffline
     }));
   }
   if (mentionsSupported) {
     items.push(mention({
       content: formatMessage(messages.mention),
       tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+      disabled: !isTypeAheadAllowed || !!mentionsDisabled || isOffline,
       'aria-haspopup': 'listbox'
     }));
   }
@@ -92,7 +94,7 @@ const createInsertBlockItems = config => {
     items.push(emoji({
       content: formatMessage(messages.emoji),
       tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed,
+      disabled: emojiDisabled || !isTypeAheadAllowed || isOffline,
       'aria-haspopup': 'dialog'
     }));
   }

package/dist/es2019/ui/ToolbarInsertBlock/index.js

@@ -577,6 +577,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       tableSelectorSupported: props.tableSelectorSupported,
       mediaUploadsEnabled: props.mediaUploadsEnabled,
       mediaSupported: props.mediaSupported,
+      isEditorOffline: props.isEditorOffline,
       imageUploadSupported: props.imageUploadSupported,
       imageUploadEnabled: props.imageUploadEnabled,
       mentionsSupported: props.mentionsSupported,

package/dist/esm/plugin.js

@@ -302,7 +302,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     options = _ref4.options,
     appearance = _ref4.appearance;
   var buttons = toolbarSizeToButtons(toolbarSize, appearance);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
@@ -312,7 +312,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     mediaState = _useSharedPluginState.mediaState,
     typeAheadState = _useSharedPluginState.typeAheadState,
     placeholderTextState = _useSharedPluginState.placeholderTextState,
-    insertBlockState = _useSharedPluginState.insertBlockState;
+    insertBlockState = _useSharedPluginState.insertBlockState,
+    connectivityState = _useSharedPluginState.connectivityState;
   var getEmojiProvider = function getEmojiProvider() {
     if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
       return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
@@ -351,6 +352,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     mediaUploadsEnabled: (_ref5 = mediaState && mediaState.allowsUploads) !== null && _ref5 !== void 0 ? _ref5 : undefined,
     onShowMediaPicker: onShowMediaPicker,
     mediaSupported: !!mediaState,
+    isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
     imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
     handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,

package/dist/esm/ui/ToolbarInsertBlock/create-items.js

@@ -56,8 +56,10 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     expandEnabled = config.expandEnabled,
     numberOfButtons = config.numberOfButtons,
     schema = config.schema,
-    formatMessage = config.formatMessage;
+    formatMessage = config.formatMessage,
+    isEditorOffline = config.isEditorOffline;
   var items = [];
+  var isOffline = isEditorOffline === true;
   if (actionSupported) {
     items.push(action({
       content: formatMessage(messages.action),
@@ -77,20 +79,20 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push(media({
       content: formatMessage(messages.addMediaFiles),
       tooltipDescription: formatMessage(messages.mediaFilesDescription),
-      disabled: false
+      disabled: isOffline
     }));
   }
   if (imageUploadSupported) {
     items.push(imageUpload({
       content: formatMessage(messages.image),
-      disabled: !imageUploadEnabled
+      disabled: !imageUploadEnabled || isOffline
     }));
   }
   if (mentionsSupported) {
     items.push(mention({
       content: formatMessage(messages.mention),
       tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed || !!mentionsDisabled,
+      disabled: !isTypeAheadAllowed || !!mentionsDisabled || isOffline,
       'aria-haspopup': 'listbox'
     }));
   }
@@ -98,7 +100,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push(emoji({
       content: formatMessage(messages.emoji),
       tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed,
+      disabled: emojiDisabled || !isTypeAheadAllowed || isOffline,
       'aria-haspopup': 'dialog'
     }));
   }

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -817,6 +817,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           tableSelectorSupported: props.tableSelectorSupported,
           mediaUploadsEnabled: props.mediaUploadsEnabled,
           mediaSupported: props.mediaSupported,
+          isEditorOffline: props.isEditorOffline,
           imageUploadSupported: props.imageUploadSupported,
           imageUploadEnabled: props.imageUploadEnabled,
           mentionsSupported: props.mentionsSupported,

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockTypePlugin } from '@atlaskit/editor-plugin-block-type';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { DatePlugin } from '@atlaskit/editor-plugin-date';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
@@ -47,5 +48,6 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<TasksAndDecisionsPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ContextPanelPlugin>
+    OptionalPlugin<ContextPanelPlugin>,
+    OptionalPlugin<ConnectivityPlugin>
 ];

package/dist/types/ui/ToolbarInsertBlock/create-items.d.ts

@@ -33,6 +33,7 @@ export interface CreateItemsConfig {
     numberOfButtons: number;
     formatMessage: WrappedComponentProps['intl']['formatMessage'];
     isNewMenuEnabled?: boolean;
+    isEditorOffline?: boolean;
 }
 export interface BlockMenuItem extends MenuItem {
     title: JSX.Element | null;

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

@@ -23,6 +23,7 @@ export interface Props {
     mentionsSupported?: boolean;
     mediaUploadsEnabled?: boolean;
     mediaSupported?: boolean;
+    isEditorOffline?: boolean;
     imageUploadSupported?: boolean;
     imageUploadEnabled?: boolean;
     handleImageUpload?: (event?: ImageUploadPluginReferenceEvent) => Command;

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

@@ -2,6 +2,7 @@ import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockTypePlugin } from '@atlaskit/editor-plugin-block-type';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { DatePlugin } from '@atlaskit/editor-plugin-date';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
@@ -47,5 +48,6 @@ export type InsertBlockPluginDependencies = [
     OptionalPlugin<TasksAndDecisionsPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ContextPanelPlugin>
+    OptionalPlugin<ContextPanelPlugin>,
+    OptionalPlugin<ConnectivityPlugin>
 ];

package/dist/types-ts4.5/ui/ToolbarInsertBlock/create-items.d.ts

@@ -33,6 +33,7 @@ export interface CreateItemsConfig {
     numberOfButtons: number;
     formatMessage: WrappedComponentProps['intl']['formatMessage'];
     isNewMenuEnabled?: boolean;
+    isEditorOffline?: boolean;
 }
 export interface BlockMenuItem extends MenuItem {
     title: JSX.Element | null;

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

@@ -23,6 +23,7 @@ export interface Props {
     mentionsSupported?: boolean;
     mediaUploadsEnabled?: boolean;
     mediaSupported?: boolean;
+    isEditorOffline?: boolean;
     imageUploadSupported?: boolean;
     imageUploadEnabled?: boolean;
     handleImageUpload?: (event?: ImageUploadPluginReferenceEvent) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.4.15",
+	"version": "2.4.16",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,10 +32,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/editor-common": "^95.6.0",
+		"@atlaskit/editor-common": "^95.7.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-block-type": "^4.0.0",
 		"@atlaskit/editor-plugin-code-block": "^3.5.0",
+		"@atlaskit/editor-plugin-connectivity": "^1.0.0",
 		"@atlaskit/editor-plugin-date": "^2.4.0",
 		"@atlaskit/editor-plugin-emoji": "^2.7.0",
 		"@atlaskit/editor-plugin-expand": "^2.10.0",
@@ -63,9 +64,9 @@
 		"@atlaskit/icon": "^22.26.0",
 		"@atlaskit/icon-lab": "^1.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.20.0",
+		"@atlaskit/tmp-editor-statsig": "^2.21.0",
 		"@atlaskit/tokens": "^2.3.0",
 		"@atlaskit/tooltip": "18.9.3",
 		"@babel/runtime": "^7.0.0",