@atlaskit/editor-plugin-highlight 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.10.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.10.0
+
+### Minor Changes
+
+- [#114903](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114903)
+  [`8f2977cd60ba0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f2977cd60ba0) -
+  [ux] [ED-23063] Adds optional floating toolbar button for text highlighting to the selection
+  toolbar (disabled by default)
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -10,11 +10,13 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
+var _FloatingToolbarHighlightColor = require("./ui/FloatingToolbarHighlightColor");
 var _PrimaryToolbarHighlightColor = require("./ui/PrimaryToolbarHighlightColor");
 var _ToolbarHighlightColor = require("./ui/ToolbarHighlightColor");
 var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
-  var api = _ref.api;
+  var api = _ref.api,
+    options = _ref.config;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var popupsMountPoint = _ref2.popupsMountPoint,
@@ -76,6 +78,28 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
         component: primaryToolbarComponent
       }));
     },
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) || !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd')) {
+          return;
+        }
+        var toolbarCustom = {
+          type: 'custom',
+          render: function render(_view, _idx, dispatchAnalyticsEvent) {
+            return /*#__PURE__*/_react.default.createElement(_FloatingToolbarHighlightColor.FloatingToolbarHighlightColorWithIntl, {
+              dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+              pluginInjectionApi: api
+            });
+          },
+          fallback: []
+        };
+        return {
+          rank: -9,
+          isToolbarAbove: true,
+          items: [toolbarCustom]
+        };
+      }
+    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/cjs/ui/FloatingToolbarHighlightColor.js

@@ -21,13 +21,10 @@ var _PaletteDropdown = require("./shared/PaletteDropdown");
 var _useDropdownEvents2 = require("./shared/useDropdownEvents");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
-  var popupsMountPoint = _ref.popupsMountPoint,
-    popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsScrollableElement = _ref.popupsScrollableElement,
-    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
-    disabled = _ref.disabled,
-    pluginInjectionApi = _ref.pluginInjectionApi,
+  var pluginInjectionApi = _ref.pluginInjectionApi,
     formatMessage = _ref.intl.formatMessage;
   var toolbarItemRef = (0, _react.useRef)(null);
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
@@ -61,15 +58,12 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
   return (0, _react2.jsx)(_primitives.Flex, {
     alignItems: "center"
   }, (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement,
     isOpen: isDropdownOpen && !highlightState.disabled,
     activeColor: highlightState.activeColor,
     trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
       buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
-      spacing: isToolbarReducedSpacing ? 'none' : 'default',
-      disabled: disabled || highlightState.disabled,
+      spacing: 'default',
+      disabled: highlightState.disabled,
       selected: isDropdownOpen,
       "aria-label": toolbarButtonLabel,
       "aria-expanded": isDropdownOpen,
@@ -86,7 +80,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
       }, (0, _react2.jsx)(_chevronDown.default, {
         label: ""
       })))
-    }),
+    }, formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
     onColorChange: function onColorChange(color) {
       return handleColorChange(color);
     },

package/dist/es2019/plugin.js

@@ -3,10 +3,12 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeColor } from './commands';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
+import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
 import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
 import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export const highlightPlugin = ({
-  api
+  api,
+  config: options
 }) => {
   var _api$analytics;
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
@@ -63,6 +65,26 @@ export const highlightPlugin = ({
         component: primaryToolbarComponent
       }));
     },
+    pluginsOptions: {
+      selectionToolbar() {
+        if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) || !getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {
+          return;
+        }
+        const toolbarCustom = {
+          type: 'custom',
+          render: (_view, _idx, dispatchAnalyticsEvent) => /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            pluginInjectionApi: api
+          }),
+          fallback: []
+        };
+        return {
+          rank: -9,
+          isToolbarAbove: true,
+          items: [toolbarCustom]
+        };
+      }
+    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/es2019/ui/FloatingToolbarHighlightColor.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -13,11 +15,6 @@ import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
 const FloatingToolbarHighlightColor = ({
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  isToolbarReducedSpacing,
-  disabled,
   pluginInjectionApi,
   intl: {
     formatMessage
@@ -54,15 +51,12 @@ const FloatingToolbarHighlightColor = ({
   return jsx(Flex, {
     alignItems: "center"
   }, jsx(PaletteDropdown, {
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement,
     isOpen: isDropdownOpen && !highlightState.disabled,
     activeColor: highlightState.activeColor,
     trigger: jsx(ToolbarButton, {
       buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
-      spacing: isToolbarReducedSpacing ? 'none' : 'default',
-      disabled: disabled || highlightState.disabled,
+      spacing: 'default',
+      disabled: highlightState.disabled,
       selected: isDropdownOpen,
       "aria-label": toolbarButtonLabel,
       "aria-expanded": isDropdownOpen,
@@ -79,7 +73,7 @@ const FloatingToolbarHighlightColor = ({
       }, jsx(ExpandIcon, {
         label: ""
       })))
-    }),
+    }, formatMessage(messages.highlightFloatingToolbar)),
     onColorChange: color => handleColorChange(color),
     isOpenedByKeyboard: isOpenedByKeyboard,
     handleClickOutside: handleClickOutside,

package/dist/esm/plugin.js

@@ -3,11 +3,13 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeColor } from './commands';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
+import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
 import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
 import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export var highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
-  var api = _ref.api;
+  var api = _ref.api,
+    options = _ref.config;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var popupsMountPoint = _ref2.popupsMountPoint,
@@ -69,6 +71,28 @@ export var highlightPlugin = function highlightPlugin(_ref) {
         component: primaryToolbarComponent
       }));
     },
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) || !getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {
+          return;
+        }
+        var toolbarCustom = {
+          type: 'custom',
+          render: function render(_view, _idx, dispatchAnalyticsEvent) {
+            return /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
+              dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+              pluginInjectionApi: api
+            });
+          },
+          fallback: []
+        };
+        return {
+          rank: -9,
+          isToolbarAbove: true,
+          items: [toolbarCustom]
+        };
+      }
+    },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/esm/ui/FloatingToolbarHighlightColor.js

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -14,12 +16,7 @@ import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
 var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
-  var popupsMountPoint = _ref.popupsMountPoint,
-    popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsScrollableElement = _ref.popupsScrollableElement,
-    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
-    disabled = _ref.disabled,
-    pluginInjectionApi = _ref.pluginInjectionApi,
+  var pluginInjectionApi = _ref.pluginInjectionApi,
     formatMessage = _ref.intl.formatMessage;
   var toolbarItemRef = useRef(null);
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
@@ -53,15 +50,12 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
   return jsx(Flex, {
     alignItems: "center"
   }, jsx(PaletteDropdown, {
-    popupsMountPoint: popupsMountPoint,
-    popupsBoundariesElement: popupsBoundariesElement,
-    popupsScrollableElement: popupsScrollableElement,
     isOpen: isDropdownOpen && !highlightState.disabled,
     activeColor: highlightState.activeColor,
     trigger: jsx(ToolbarButton, {
       buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
-      spacing: isToolbarReducedSpacing ? 'none' : 'default',
-      disabled: disabled || highlightState.disabled,
+      spacing: 'default',
+      disabled: highlightState.disabled,
       selected: isDropdownOpen,
       "aria-label": toolbarButtonLabel,
       "aria-expanded": isDropdownOpen,
@@ -78,7 +72,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
       }, jsx(ExpandIcon, {
         label: ""
       })))
-    }),
+    }, formatMessage(messages.highlightFloatingToolbar)),
     onColorChange: function onColorChange(color) {
       return handleColorChange(color);
     },

package/dist/types/plugin.d.ts

@@ -4,7 +4,11 @@ import type { BackgroundColorPlugin } from '@atlaskit/editor-plugin-background-c
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import type { HighlightPluginState } from './pm-plugins/main';
+export type HighlightPluginOptions = {
+    textHighlightingFloatingToolbarExperiment?: boolean;
+};
 export type HighlightPlugin = NextEditorPlugin<'highlight', {
+    pluginConfiguration?: HighlightPluginOptions;
     dependencies: [
         BackgroundColorPlugin,
         OptionalPlugin<AnalyticsPlugin>,

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

@@ -4,20 +4,10 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { HighlightPlugin } from '../plugin';
 export declare const FloatingToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<{
-    popupsMountPoint?: HTMLElement | undefined;
-    popupsBoundariesElement?: HTMLElement | undefined;
-    popupsScrollableElement?: HTMLElement | undefined;
-    disabled: boolean;
-    isToolbarReducedSpacing: boolean;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
     pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<{
-        popupsMountPoint?: HTMLElement | undefined;
-        popupsBoundariesElement?: HTMLElement | undefined;
-        popupsScrollableElement?: HTMLElement | undefined;
-        disabled: boolean;
-        isToolbarReducedSpacing: boolean;
         dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
         pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
     } & WrappedComponentProps>;

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

@@ -4,7 +4,11 @@ import type { BackgroundColorPlugin } from '@atlaskit/editor-plugin-background-c
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import type { HighlightPluginState } from './pm-plugins/main';
+export type HighlightPluginOptions = {
+    textHighlightingFloatingToolbarExperiment?: boolean;
+};
 export type HighlightPlugin = NextEditorPlugin<'highlight', {
+    pluginConfiguration?: HighlightPluginOptions;
     dependencies: [
         BackgroundColorPlugin,
         OptionalPlugin<AnalyticsPlugin>,

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

@@ -4,20 +4,10 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { HighlightPlugin } from '../plugin';
 export declare const FloatingToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<{
-    popupsMountPoint?: HTMLElement | undefined;
-    popupsBoundariesElement?: HTMLElement | undefined;
-    popupsScrollableElement?: HTMLElement | undefined;
-    disabled: boolean;
-    isToolbarReducedSpacing: boolean;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
     pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<{
-        popupsMountPoint?: HTMLElement | undefined;
-        popupsBoundariesElement?: HTMLElement | undefined;
-        popupsScrollableElement?: HTMLElement | undefined;
-        disabled: boolean;
-        isToolbarReducedSpacing: boolean;
         dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
         pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
     } & WrappedComponentProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "1.9.0",
+	"version": "1.10.1",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,18 +38,18 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^82.9.0",
+		"@atlaskit/editor-common": "^83.0.0",
 		"@atlaskit/editor-palette": "1.6.0",
-		"@atlaskit/editor-plugin-analytics": "^1.2.0",
-		"@atlaskit/editor-plugin-background-color": "^1.1.0",
+		"@atlaskit/editor-plugin-analytics": "^1.3.0",
+		"@atlaskit/editor-plugin-background-color": "^1.2.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
-		"@atlaskit/editor-plugin-text-formatting": "^1.7.0",
+		"@atlaskit/editor-plugin-text-formatting": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/editor-shared-styles": "^2.12.0",
 		"@atlaskit/editor-tables": "^2.7.4",
-		"@atlaskit/icon": "^22.4.0",
+		"@atlaskit/icon": "^22.5.0",
 		"@atlaskit/platform-feature-flags": "^0.2.0",
-		"@atlaskit/primitives": "^8.0.0",
+		"@atlaskit/primitives": "^9.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -58,7 +58,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/tokens": "^1.53.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {
@@ -110,6 +110,9 @@
 		},
 		"platform.editor.refactor-highlight-toolbar_mo0pj": {
 			"type": "boolean"
+		},
+		"platform.editor.enable-selection-toolbar_ucdwd": {
+			"type": "boolean"
 		}
 	}
 }