@atlaskit/editor-plugin-floating-toolbar 0.7.29 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 0.9.0
+
+### Minor Changes
+
+- [#68824](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68824) [`2ce43bd09627`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ce43bd09627) - [ux] When editor is in view mode, only show "Comment" floating toolbar item
+
+## 0.8.0
+
+### Minor Changes
+
+- [#68277](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68277) [`fe0abf4abc01`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fe0abf4abc01) - Enable the selection toolbar to work with live pages view mode
+
 ## 0.7.29
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -194,9 +194,10 @@ function ContentComponent(_ref5) {
     providerFactory = _ref5.providerFactory,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
   var featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode']),
     floatingToolbarState = _useSharedPluginState.floatingToolbarState,
-    editorDisabledState = _useSharedPluginState.editorDisabledState;
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
   var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
     configWithNodeInfo = _ref6.configWithNodeInfo,
     floatingToolbarData = _ref6.floatingToolbarData;
@@ -205,10 +206,10 @@ function ContentComponent(_ref5) {
   }
   var config = configWithNodeInfo.config,
     node = configWithNodeInfo.node;
+  var items = config.items;
   var title = config.title,
     _config$getDomRef = config.getDomRef,
     getDomRef = _config$getDomRef === void 0 ? getDomRefFromSelection : _config$getDomRef,
-    items = config.items,
     _config$align = config.align,
     align = _config$align === void 0 ? 'center' : _config$align,
     _config$className = config.className,
@@ -232,9 +233,23 @@ function ContentComponent(_ref5) {
     _config$mediaAssistiv = config.mediaAssistiveMessage,
     mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
+  var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
+  var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  if (!targetRef || isEditorDisabled && !isInViewMode) {
     return null;
   }
+
+  // TODO: MODES-3950 Update this view mode specific logic once we refactor view mode.
+  //       We should inverse the responsibility here: A blacklist for toolbar items in view mode, rather than this white list.
+  //       Also consider moving this logic to the more specific toolbar plugins (media and selection).
+  var iterableItems = Array.isArray(items) ? items : [];
+  if (isInViewMode) {
+    // Typescript note: Not all toolbar item types have the `supportsViewMode` prop.
+    var toolbarItemViewModeProp = 'supportsViewMode';
+    items = iterableItems.filter(function (item) {
+      return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
+    });
+  }
   var customPositionCalculation;
   var toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   if (onPositionCalculated) {

package/dist/es2019/plugin.js

@@ -184,8 +184,9 @@ function ContentComponent({
   const featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
   const {
     floatingToolbarState,
-    editorDisabledState
-  } = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled']);
+    editorDisabledState,
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode']);
   const {
     configWithNodeInfo,
     floatingToolbarData
@@ -197,10 +198,12 @@ function ContentComponent({
     config,
     node
   } = configWithNodeInfo;
+  let {
+    items
+  } = config;
   const {
     title,
     getDomRef = getDomRefFromSelection,
-    items,
     align = 'center',
     className = '',
     height,
@@ -220,9 +223,21 @@ function ContentComponent({
     mediaAssistiveMessage = ''
   } = config;
   const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
+  const isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
+  const isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  if (!targetRef || isEditorDisabled && !isInViewMode) {
     return null;
   }
+
+  // TODO: MODES-3950 Update this view mode specific logic once we refactor view mode.
+  //       We should inverse the responsibility here: A blacklist for toolbar items in view mode, rather than this white list.
+  //       Also consider moving this logic to the more specific toolbar plugins (media and selection).
+  const iterableItems = Array.isArray(items) ? items : [];
+  if (isInViewMode) {
+    // Typescript note: Not all toolbar item types have the `supportsViewMode` prop.
+    const toolbarItemViewModeProp = 'supportsViewMode';
+    items = iterableItems.filter(item => toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp]);
+  }
   let customPositionCalculation;
   const toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   if (onPositionCalculated) {

package/dist/esm/plugin.js

@@ -185,9 +185,10 @@ function ContentComponent(_ref5) {
     providerFactory = _ref5.providerFactory,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
   var featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode']),
     floatingToolbarState = _useSharedPluginState.floatingToolbarState,
-    editorDisabledState = _useSharedPluginState.editorDisabledState;
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
   var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
     configWithNodeInfo = _ref6.configWithNodeInfo,
     floatingToolbarData = _ref6.floatingToolbarData;
@@ -196,10 +197,10 @@ function ContentComponent(_ref5) {
   }
   var config = configWithNodeInfo.config,
     node = configWithNodeInfo.node;
+  var items = config.items;
   var title = config.title,
     _config$getDomRef = config.getDomRef,
     getDomRef = _config$getDomRef === void 0 ? getDomRefFromSelection : _config$getDomRef,
-    items = config.items,
     _config$align = config.align,
     align = _config$align === void 0 ? 'center' : _config$align,
     _config$className = config.className,
@@ -223,9 +224,23 @@ function ContentComponent(_ref5) {
     _config$mediaAssistiv = config.mediaAssistiveMessage,
     mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
+  var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
+  var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  if (!targetRef || isEditorDisabled && !isInViewMode) {
     return null;
   }
+
+  // TODO: MODES-3950 Update this view mode specific logic once we refactor view mode.
+  //       We should inverse the responsibility here: A blacklist for toolbar items in view mode, rather than this white list.
+  //       Also consider moving this logic to the more specific toolbar plugins (media and selection).
+  var iterableItems = Array.isArray(items) ? items : [];
+  if (isInViewMode) {
+    // Typescript note: Not all toolbar item types have the `supportsViewMode` prop.
+    var toolbarItemViewModeProp = 'supportsViewMode';
+    items = iterableItems.filter(function (item) {
+      return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
+    });
+  }
   var customPositionCalculation;
   var toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   if (onPositionCalculated) {

package/dist/types/types.d.ts

@@ -3,6 +3,7 @@ import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { CopyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
@@ -30,7 +31,8 @@ export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
         OptionalPlugin<ContextPanelPlugin>,
         OptionalPlugin<ExtensionPlugin>,
         CopyButtonPlugin,
-        EditorDisabledPlugin
+        EditorDisabledPlugin,
+        OptionalPlugin<EditorViewModePlugin>
     ];
     actions: {
         forceFocusSelector: ForceFocusSelector;

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

@@ -3,6 +3,7 @@ import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 import type { CopyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
@@ -30,7 +31,8 @@ export type FloatingToolbarPlugin = NextEditorPlugin<'floatingToolbar', {
         OptionalPlugin<ContextPanelPlugin>,
         OptionalPlugin<ExtensionPlugin>,
         CopyButtonPlugin,
-        EditorDisabledPlugin
+        EditorDisabledPlugin,
+        OptionalPlugin<EditorViewModePlugin>
     ];
     actions: {
         forceFocusSelector: ForceFocusSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-floating-toolbar",
-  "version": "0.7.29",
+  "version": "0.9.0",
   "description": "Floating toolbar plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -28,15 +28,16 @@
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/button": "^17.2.0",
     "@atlaskit/checkbox": "^13.0.0",
-    "@atlaskit/editor-common": "^77.0.0",
+    "@atlaskit/editor-common": "^77.1.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-context-panel": "^0.2.0",
     "@atlaskit/editor-plugin-copy-button": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
+    "@atlaskit/editor-plugin-editor-viewmode": "^0.1.0",
     "@atlaskit/editor-plugin-extension": "^0.6.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
-    "@atlaskit/editor-plugin-table": "^7.0.0",
+    "@atlaskit/editor-plugin-table": "^7.1.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.0.0",
@@ -44,7 +45,7 @@
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",