@atlaskit/editor-plugin-text-color 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-text-color
 
+## 1.4.0
+
+### Minor Changes
+
+-   [#101406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101406)
+    [`6daffd65aec4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6daffd65aec4) -
+    [ED-23298] Extract primary toolbar components to editor plugin to allow for custom ordering
+
+### Patch Changes
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
+## 1.3.3
+
+### Patch Changes
+
+-   [#101513](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101513)
+    [`98b5dfc33bed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/98b5dfc33bed) -
+    [ux] [ED-23156] The highlight primary toolbar button is disabled when trying to apply it on
+    nodes that don't enable the mark and when in a gap cursor. The text color primary toolbar button
+    is disabled when selecting text with a highlight.
+
 ## 1.3.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -25,6 +25,25 @@ var pluginConfig = function pluginConfig(textColorConfig) {
 var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
   var textColorConfig = _ref.config,
     api = _ref.api;
+  var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+    var editorView = _ref2.editorView,
+      popupsMountPoint = _ref2.popupsMountPoint,
+      popupsBoundariesElement = _ref2.popupsBoundariesElement,
+      popupsScrollableElement = _ref2.popupsScrollableElement,
+      isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+      disabled = _ref2.disabled;
+    return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+      isReducedSpacing: isToolbarReducedSpacing,
+      editorView: editorView,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      disabled: disabled,
+      api: api
+    });
+  };
   return {
     name: 'textColor',
     marks: function marks() {
@@ -36,8 +55,8 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'textColor',
-        plugin: function plugin(_ref2) {
-          var dispatch = _ref2.dispatch;
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
           return (0, _main.createPlugin)(dispatch, pluginConfig(textColorConfig));
         }
       }];
@@ -54,24 +73,13 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
         return (0, _changeColor2.changeColor)(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
       }
     },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
-      var editorView = _ref3.editorView,
-        popupsMountPoint = _ref3.popupsMountPoint,
-        popupsBoundariesElement = _ref3.popupsBoundariesElement,
-        popupsScrollableElement = _ref3.popupsScrollableElement,
-        isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing,
-        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
-        disabled = _ref3.disabled;
-      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
-        isReducedSpacing: isToolbarReducedSpacing,
-        editorView: editorView,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        disabled: disabled,
-        api: api
-      });
-    }
+    usePluginHook: function usePluginHook() {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'textColor',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

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

@@ -226,9 +226,8 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
             hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
             paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
           }
-        }))),
-        // Only render the separator if the highlight toolbar option isn't being rendered after it
-        !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.highlight) && (0, _react2.jsx)("span", {
+        }))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        (0, _react2.jsx)("span", {
           css: _styles.separatorStyles
         }))
       );

package/dist/cjs/utils/disabled.js

@@ -13,14 +13,36 @@ var hasLinkMark = function hasLinkMark($pos) {
   }
   return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
 };
+var hasHighlightMark = function hasHighlightMark($pos) {
+  var highlightMarkType = $pos.doc.type.schema.marks.backgroundColor;
+  if (!highlightMarkType) {
+    return false;
+  }
+  var node = $pos.nodeBefore;
+  if (!node) {
+    return false;
+  }
+  return !!highlightMarkType.isInSet(node.marks);
+};
+var hasHighlightMarkInRange = function hasHighlightMarkInRange($from, $to) {
+  var highlightMarkType = $from.doc.type.schema.marks.backgroundColor,
+    pos = $from.pos,
+    doc = $from.doc;
+  if (!highlightMarkType) {
+    return false;
+  }
+  return (0, _mark.entireSelectionContainsMark)(highlightMarkType, doc, pos, $to.pos);
+};
 var getDisabledState = exports.getDisabledState = function getDisabledState(state) {
   var textColor = state.schema.marks.textColor;
   if (textColor) {
     var _ref = state.selection,
       empty = _ref.empty,
       ranges = _ref.ranges,
-      $cursor = _ref.$cursor;
-    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || (0, _mark.isMarkAllowedInRange)(state.doc, ranges, textColor) === false) {
+      $cursor = _ref.$cursor,
+      $from = _ref.$from,
+      $to = _ref.$to;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || $cursor && hasHighlightMark($cursor) || !$cursor && $from && $to && hasHighlightMarkInRange($from, $to) || (0, _mark.isMarkAllowedInRange)(state.doc, ranges, textColor) === false) {
       return true;
     }
     if ((0, _mark.isMarkExcluded)(textColor, state.storedMarks || $cursor && $cursor.marks())) {

package/dist/es2019/plugin.js

@@ -13,6 +13,26 @@ export const textColorPlugin = ({
   config: textColorConfig,
   api
 }) => {
+  const primaryToolbarComponent = ({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    isToolbarReducedSpacing,
+    dispatchAnalyticsEvent,
+    disabled
+  }) => {
+    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+      isReducedSpacing: isToolbarReducedSpacing,
+      editorView: editorView,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      disabled: disabled,
+      api: api
+    });
+  };
   return {
     name: 'textColor',
     marks() {
@@ -41,26 +61,14 @@ export const textColorPlugin = ({
         return changeColor(color, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
       }
     },
-    primaryToolbarComponent({
-      editorView,
-      popupsMountPoint,
-      popupsBoundariesElement,
-      popupsScrollableElement,
-      isToolbarReducedSpacing,
-      dispatchAnalyticsEvent,
-      disabled
-    }) {
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        isReducedSpacing: isToolbarReducedSpacing,
-        editorView: editorView,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        disabled: disabled,
-        api: api
-      });
-    }
+    usePluginHook: () => {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'textColor',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };
 export { textColorPluginKey };

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

@@ -205,9 +205,8 @@ export class ToolbarTextColor extends React.Component {
           hexToPaletteColor: hexToEditorTextPaletteColor,
           paletteColorTooltipMessages: textPaletteTooltipMessages
         }
-      }))),
-      // Only render the separator if the highlight toolbar option isn't being rendered after it
-      !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.highlight) && jsx("span", {
+      }))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+      jsx("span", {
         css: separatorStyles
       }))
     );

package/dist/es2019/utils/disabled.js

@@ -1,4 +1,4 @@
-import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { entireSelectionContainsMark, isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
 const hasLinkMark = $pos => {
   const {
     doc: {
@@ -17,6 +17,46 @@ const hasLinkMark = $pos => {
   }
   return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
 };
+const hasHighlightMark = $pos => {
+  const {
+    doc: {
+      type: {
+        schema: {
+          marks: {
+            backgroundColor: highlightMarkType
+          }
+        }
+      }
+    }
+  } = $pos;
+  if (!highlightMarkType) {
+    return false;
+  }
+  const node = $pos.nodeBefore;
+  if (!node) {
+    return false;
+  }
+  return !!highlightMarkType.isInSet(node.marks);
+};
+const hasHighlightMarkInRange = ($from, $to) => {
+  const {
+    doc: {
+      type: {
+        schema: {
+          marks: {
+            backgroundColor: highlightMarkType
+          }
+        }
+      }
+    },
+    pos,
+    doc
+  } = $from;
+  if (!highlightMarkType) {
+    return false;
+  }
+  return entireSelectionContainsMark(highlightMarkType, doc, pos, $to.pos);
+};
 export const getDisabledState = state => {
   const {
     textColor
@@ -25,9 +65,11 @@ export const getDisabledState = state => {
     const {
       empty,
       ranges,
-      $cursor
+      $cursor,
+      $from,
+      $to
     } = state.selection;
-    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || $cursor && hasHighlightMark($cursor) || !$cursor && $from && $to && hasHighlightMarkInRange($from, $to) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
       return true;
     }
     if (isMarkExcluded(textColor, state.storedMarks || $cursor && $cursor.marks())) {

package/dist/esm/plugin.js

@@ -12,6 +12,25 @@ var pluginConfig = function pluginConfig(textColorConfig) {
 export var textColorPlugin = function textColorPlugin(_ref) {
   var textColorConfig = _ref.config,
     api = _ref.api;
+  var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+    var editorView = _ref2.editorView,
+      popupsMountPoint = _ref2.popupsMountPoint,
+      popupsBoundariesElement = _ref2.popupsBoundariesElement,
+      popupsScrollableElement = _ref2.popupsScrollableElement,
+      isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+      disabled = _ref2.disabled;
+    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+      isReducedSpacing: isToolbarReducedSpacing,
+      editorView: editorView,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      disabled: disabled,
+      api: api
+    });
+  };
   return {
     name: 'textColor',
     marks: function marks() {
@@ -23,8 +42,8 @@ export var textColorPlugin = function textColorPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'textColor',
-        plugin: function plugin(_ref2) {
-          var dispatch = _ref2.dispatch;
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
           return createPlugin(dispatch, pluginConfig(textColorConfig));
         }
       }];
@@ -41,25 +60,14 @@ export var textColorPlugin = function textColorPlugin(_ref) {
         return _changeColor(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
       }
     },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
-      var editorView = _ref3.editorView,
-        popupsMountPoint = _ref3.popupsMountPoint,
-        popupsBoundariesElement = _ref3.popupsBoundariesElement,
-        popupsScrollableElement = _ref3.popupsScrollableElement,
-        isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing,
-        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
-        disabled = _ref3.disabled;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        isReducedSpacing: isToolbarReducedSpacing,
-        editorView: editorView,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        disabled: disabled,
-        api: api
-      });
-    }
+    usePluginHook: function usePluginHook() {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'textColor',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };
 export { textColorPluginKey };

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

@@ -220,9 +220,8 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
             hexToPaletteColor: hexToEditorTextPaletteColor,
             paletteColorTooltipMessages: textPaletteTooltipMessages
           }
-        }))),
-        // Only render the separator if the highlight toolbar option isn't being rendered after it
-        !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.highlight) && jsx("span", {
+        }))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        jsx("span", {
           css: separatorStyles
         }))
       );

package/dist/esm/utils/disabled.js

@@ -1,4 +1,4 @@
-import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { entireSelectionContainsMark, isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
 var hasLinkMark = function hasLinkMark($pos) {
   var linkMarkType = $pos.doc.type.schema.marks.link,
     pos = $pos.pos;
@@ -7,14 +7,36 @@ var hasLinkMark = function hasLinkMark($pos) {
   }
   return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
 };
+var hasHighlightMark = function hasHighlightMark($pos) {
+  var highlightMarkType = $pos.doc.type.schema.marks.backgroundColor;
+  if (!highlightMarkType) {
+    return false;
+  }
+  var node = $pos.nodeBefore;
+  if (!node) {
+    return false;
+  }
+  return !!highlightMarkType.isInSet(node.marks);
+};
+var hasHighlightMarkInRange = function hasHighlightMarkInRange($from, $to) {
+  var highlightMarkType = $from.doc.type.schema.marks.backgroundColor,
+    pos = $from.pos,
+    doc = $from.doc;
+  if (!highlightMarkType) {
+    return false;
+  }
+  return entireSelectionContainsMark(highlightMarkType, doc, pos, $to.pos);
+};
 export var getDisabledState = function getDisabledState(state) {
   var textColor = state.schema.marks.textColor;
   if (textColor) {
     var _ref = state.selection,
       empty = _ref.empty,
       ranges = _ref.ranges,
-      $cursor = _ref.$cursor;
-    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
+      $cursor = _ref.$cursor,
+      $from = _ref.$from,
+      $to = _ref.$to;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || $cursor && hasHighlightMark($cursor) || !$cursor && $from && $to && hasHighlightMarkInRange($from, $to) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
       return true;
     }
     if (isMarkExcluded(textColor, state.storedMarks || $cursor && $cursor.marks())) {

package/dist/types/types.d.ts

@@ -1,13 +1,13 @@
 import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
 type Config = TextColorPluginConfig | boolean;
 export type TextColorPlugin = NextEditorPlugin<'textColor', {
     pluginConfiguration: Config | undefined;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<HighlightPlugin>
+        OptionalPlugin<PrimaryToolbarPlugin>
     ];
     actions: {
         changeColor: (color: string) => Command;

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

@@ -1,13 +1,13 @@
 import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
 type Config = TextColorPluginConfig | boolean;
 export type TextColorPlugin = NextEditorPlugin<'textColor', {
     pluginConfiguration: Config | undefined;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<HighlightPlugin>
+        OptionalPlugin<PrimaryToolbarPlugin>
     ];
     actions: {
         changeColor: (color: string) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-text-color",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Text color plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,15 +33,15 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.8.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/adf-schema": "^36.10.7",
+    "@atlaskit/editor-common": "^81.0.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
-    "@atlaskit/editor-plugin-highlight": "^1.4.0",
+    "@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-shared-styles": "^2.11.0",
     "@atlaskit/editor-tables": "^2.7.0",
-    "@atlaskit/icon": "^22.2.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/theme": "^12.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"