@atlaskit/editor-plugin-text-color 1.4.1 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-text-color
 
+## 1.6.0
+
+### Minor Changes
+
+- [#110884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110884)
+  [`674f78166705c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/674f78166705c) -
+  [ux] [ED-23516] Change border color for highlight and text-color palettes to use tokens.
+  Changedefault palette color when undefined
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.5.0
+
+### Minor Changes
+
+- [#108745](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108745)
+  [`ef4a6d8a3ef73`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ef4a6d8a3ef73) -
+  [ux] [ED-23513] Allow text color mark to replace backgroundColor
+
 ## 1.4.1
 
 ### Patch Changes

package/dist/cjs/commands/toggle-color.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleColor = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
-var _preset = require("@atlaskit/editor-common/preset");
 var _main = require("../pm-plugins/main");
+var _constants = require("../utils/constants");
 var _disabled = require("../utils/disabled");
 var toggleColor = exports.toggleColor = function toggleColor(color) {
   return function (state, dispatch) {
@@ -22,14 +22,20 @@ var toggleColor = exports.toggleColor = function toggleColor(color) {
       return false;
     }
     if (dispatch) {
-      state.tr.setMeta(_main.pluginKey, {
-        action: _main.ACTIONS.SET_COLOR,
-        color: color
+      _constants.overrideMarks.forEach(function (mark) {
+        var marks = tr.doc.type.schema.marks;
+        if (marks[mark]) {
+          (0, _mark.removeMark)(marks[mark])({
+            tr: tr
+          });
+        }
       });
-      state.tr.scrollIntoView();
-      (0, _preset.editorCommandToPMCommand)((0, _mark.toggleMark)(textColor, {
+      (0, _mark.toggleMark)(textColor, {
         color: color
-      }))(state, dispatch);
+      })({
+        tr: tr
+      });
+      dispatch(tr);
     }
     return true;
   };

package/dist/cjs/pm-plugins/main.js

@@ -8,7 +8,7 @@ exports.ACTIONS = void 0;
 Object.defineProperty(exports, "DEFAULT_COLOR", {
   enumerable: true,
   get: function get() {
-    return _color.DEFAULT_COLOR;
+    return _constants.DEFAULT_COLOR;
   }
 });
 exports.createPlugin = createPlugin;
@@ -18,17 +18,19 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _color = require("../utils/color");
+var _constants = require("../utils/constants");
 var _disabled = require("../utils/disabled");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function createInitialPluginState(editorState, pluginConfig) {
-  var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || _color.DEFAULT_COLOR;
+  var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || _constants.DEFAULT_COLOR;
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
-    border: _uiColor.DEFAULT_BORDER_COLOR
-  }].concat((0, _toConsumableArray2.default)(_uiColor.textColorPalette));
+    border: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.dynamic-palette-borders') ? "var(--ds-border, #091E4224)" : _uiColor.DEFAULT_BORDER_COLOR
+  }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.editor.dynamic-palette-borders') ? _uiColor.textColorPaletteWithTokenBorders : _uiColor.textColorPalette));
   var state = {
     color: (0, _color.getActiveColor)(editorState),
     disabled: (0, _disabled.getDisabledState)(editorState),

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

@@ -167,7 +167,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
         selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
         selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
       return (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
           css: _styles.wrapperStyle
         }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
@@ -200,7 +200,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
             onKeyDown: this.onKeyDown,
             ref: this.toolbarItemRef,
             iconBefore:
-            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             (0, _react2.jsx)("div", {
               css: _styles.triggerWrapperStyles
             }, (0, _react2.jsx)(_icons.SteppedRainbowIconDecoration, {
@@ -227,6 +227,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
             paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
           }
         }))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
           css: _styles.separatorStyles
         }))

package/dist/cjs/utils/color.js

@@ -3,14 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActiveColor = exports.DEFAULT_COLOR = void 0;
-var _colors = require("@atlaskit/theme/colors");
-var DEFAULT_COLOR = exports.DEFAULT_COLOR = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
-  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
-  color: _colors.N800.toLowerCase(),
-  label: 'Dark gray'
-};
+exports.getActiveColor = void 0;
+var _constants = require("./constants");
 var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
   var _ref = state.selection,
     $from = _ref.$from,
@@ -50,5 +44,5 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
   if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
     return null;
   }
-  return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
+  return marksWithColor.length ? marksWithColor[0].attrs.color : _constants.DEFAULT_COLOR.color;
 };

package/dist/cjs/utils/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.overrideMarks = exports.DEFAULT_COLOR = void 0;
+var _colors = require("@atlaskit/theme/colors");
+var overrideMarks = exports.overrideMarks = ['backgroundColor'];
+var DEFAULT_COLOR = exports.DEFAULT_COLOR = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
+  color: _colors.N800.toLowerCase(),
+  label: 'Dark gray'
+};

package/dist/cjs/utils/disabled.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDisabledState = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
+var _constants = require("./constants");
 var hasLinkMark = function hasLinkMark($pos) {
   var linkMarkType = $pos.doc.type.schema.marks.link,
     pos = $pos.pos;
@@ -13,39 +14,24 @@ 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 _state$storedMarks;
     var _ref = state.selection,
       empty = _ref.empty,
       ranges = _ref.ranges,
-      $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) {
+      $cursor = _ref.$cursor;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || (0, _mark.isMarkAllowedInRange)(state.doc, ranges, textColor) === false) {
       return true;
     }
-    if ((0, _mark.isMarkExcluded)(textColor, state.storedMarks || $cursor && $cursor.marks())) {
+
+    // Allow "excluded" marks that can be overridden
+    // These marks are explicitly removed before applying the new mark (see toggleColor command)
+    var omitOverrides = function omitOverrides(mark) {
+      return !_constants.overrideMarks.includes(mark.type.name);
+    };
+    if ((0, _mark.isMarkExcluded)(textColor, ((_state$storedMarks = state.storedMarks) === null || _state$storedMarks === void 0 ? void 0 : _state$storedMarks.filter(omitOverrides)) || $cursor && $cursor.marks().filter(omitOverrides))) {
       return true;
     }
     return false;

package/dist/es2019/commands/toggle-color.js

@@ -1,6 +1,6 @@
-import { toggleMark } from '@atlaskit/editor-common/mark';
-import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
+import { overrideMarks } from '../utils/constants';
 import { getDisabledState } from '../utils/disabled';
 export const toggleColor = color => (state, dispatch) => {
   const {
@@ -17,14 +17,22 @@ export const toggleColor = color => (state, dispatch) => {
     return false;
   }
   if (dispatch) {
-    state.tr.setMeta(pluginKey, {
-      action: ACTIONS.SET_COLOR,
-      color
+    overrideMarks.forEach(mark => {
+      const {
+        marks
+      } = tr.doc.type.schema;
+      if (marks[mark]) {
+        removeMark(marks[mark])({
+          tr
+        });
+      }
     });
-    state.tr.scrollIntoView();
-    editorCommandToPMCommand(toggleMark(textColor, {
+    toggleMark(textColor, {
       color
-    }))(state, dispatch);
+    })({
+      tr
+    });
+    dispatch(tr);
   }
   return true;
 };

package/dist/es2019/pm-plugins/main.js

@@ -1,16 +1,18 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { DEFAULT_BORDER_COLOR, textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR, textColorPalette, textColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getActiveColor } from '../utils/color';
+import { DEFAULT_COLOR } from '../utils/constants';
 import { getDisabledState } from '../utils/disabled';
-export { DEFAULT_COLOR } from '../utils/color';
+export { DEFAULT_COLOR } from '../utils/constants';
 function createInitialPluginState(editorState, pluginConfig) {
   const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
   const palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
-    border: DEFAULT_BORDER_COLOR
-  }, ...textColorPalette];
+    border: getBooleanFF('platform.editor.dynamic-palette-borders') ? "var(--ds-border, #091E4224)" : DEFAULT_BORDER_COLOR
+  }, ...(getBooleanFF('platform.editor.dynamic-palette-borders') ? textColorPaletteWithTokenBorders : textColorPalette)];
   const state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),

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

@@ -146,7 +146,7 @@ export class ToolbarTextColor extends React.Component {
       selectedColumnIndex
     } = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
     return (
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       jsx("span", {
         css: wrapperStyle
       }, jsx(Dropdown, {
@@ -179,7 +179,7 @@ export class ToolbarTextColor extends React.Component {
           onKeyDown: this.onKeyDown,
           ref: this.toolbarItemRef,
           iconBefore:
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           jsx("div", {
             css: triggerWrapperStyles
           }, jsx(SteppedRainbowIconDecoration, {
@@ -206,6 +206,7 @@ export class ToolbarTextColor extends React.Component {
           paletteColorTooltipMessages: textPaletteTooltipMessages
         }
       }))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       jsx("span", {
         css: separatorStyles
       }))

package/dist/es2019/utils/color.js

@@ -1,10 +1,4 @@
-import { N800 } from '@atlaskit/theme/colors';
-export const DEFAULT_COLOR = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
-  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
-  color: N800.toLowerCase(),
-  label: 'Dark gray'
-};
+import { DEFAULT_COLOR } from './constants';
 export const getActiveColor = state => {
   const {
     $from,

package/dist/es2019/utils/constants.js

@@ -0,0 +1,8 @@
+import { N800 } from '@atlaskit/theme/colors';
+export const overrideMarks = ['backgroundColor'];
+export const DEFAULT_COLOR = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
+  color: N800.toLowerCase(),
+  label: 'Dark gray'
+};

package/dist/es2019/utils/disabled.js

@@ -1,4 +1,5 @@
-import { entireSelectionContainsMark, isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { overrideMarks } from './constants';
 const hasLinkMark = $pos => {
   const {
     doc: {
@@ -17,62 +18,27 @@ 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
   } = state.schema.marks;
   if (textColor) {
+    var _state$storedMarks;
     const {
       empty,
       ranges,
-      $cursor,
-      $from,
-      $to
+      $cursor
     } = state.selection;
-    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || $cursor && hasHighlightMark($cursor) || !$cursor && $from && $to && hasHighlightMarkInRange($from, $to) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
       return true;
     }
-    if (isMarkExcluded(textColor, state.storedMarks || $cursor && $cursor.marks())) {
+
+    // Allow "excluded" marks that can be overridden
+    // These marks are explicitly removed before applying the new mark (see toggleColor command)
+    const omitOverrides = mark => {
+      return !overrideMarks.includes(mark.type.name);
+    };
+    if (isMarkExcluded(textColor, ((_state$storedMarks = state.storedMarks) === null || _state$storedMarks === void 0 ? void 0 : _state$storedMarks.filter(omitOverrides)) || $cursor && $cursor.marks().filter(omitOverrides))) {
       return true;
     }
     return false;

package/dist/esm/commands/toggle-color.js

@@ -1,6 +1,6 @@
-import { toggleMark } from '@atlaskit/editor-common/mark';
-import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
+import { overrideMarks } from '../utils/constants';
 import { getDisabledState } from '../utils/disabled';
 export var toggleColor = function toggleColor(color) {
   return function (state, dispatch) {
@@ -16,14 +16,20 @@ export var toggleColor = function toggleColor(color) {
       return false;
     }
     if (dispatch) {
-      state.tr.setMeta(pluginKey, {
-        action: ACTIONS.SET_COLOR,
-        color: color
+      overrideMarks.forEach(function (mark) {
+        var marks = tr.doc.type.schema.marks;
+        if (marks[mark]) {
+          removeMark(marks[mark])({
+            tr: tr
+          });
+        }
       });
-      state.tr.scrollIntoView();
-      editorCommandToPMCommand(toggleMark(textColor, {
+      toggleMark(textColor, {
         color: color
-      }))(state, dispatch);
+      })({
+        tr: tr
+      });
+      dispatch(tr);
     }
     return true;
   };

package/dist/esm/pm-plugins/main.js

@@ -3,18 +3,20 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { DEFAULT_BORDER_COLOR, textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR, textColorPalette, textColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getActiveColor } from '../utils/color';
+import { DEFAULT_COLOR } from '../utils/constants';
 import { getDisabledState } from '../utils/disabled';
-export { DEFAULT_COLOR } from '../utils/color';
+export { DEFAULT_COLOR } from '../utils/constants';
 function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
-    border: DEFAULT_BORDER_COLOR
-  }].concat(_toConsumableArray(textColorPalette));
+    border: getBooleanFF('platform.editor.dynamic-palette-borders') ? "var(--ds-border, #091E4224)" : DEFAULT_BORDER_COLOR
+  }].concat(_toConsumableArray(getBooleanFF('platform.editor.dynamic-palette-borders') ? textColorPaletteWithTokenBorders : textColorPalette));
   var state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),

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

@@ -161,7 +161,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
         selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
       return (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         jsx("span", {
           css: wrapperStyle
         }, jsx(Dropdown, {
@@ -194,7 +194,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
             onKeyDown: this.onKeyDown,
             ref: this.toolbarItemRef,
             iconBefore:
-            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             jsx("div", {
               css: triggerWrapperStyles
             }, jsx(SteppedRainbowIconDecoration, {
@@ -221,6 +221,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
             paletteColorTooltipMessages: textPaletteTooltipMessages
           }
         }))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         jsx("span", {
           css: separatorStyles
         }))

package/dist/esm/utils/color.js

@@ -1,10 +1,4 @@
-import { N800 } from '@atlaskit/theme/colors';
-export var DEFAULT_COLOR = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
-  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
-  color: N800.toLowerCase(),
-  label: 'Dark gray'
-};
+import { DEFAULT_COLOR } from './constants';
 export var getActiveColor = function getActiveColor(state) {
   var _ref = state.selection,
     $from = _ref.$from,

package/dist/esm/utils/constants.js

@@ -0,0 +1,8 @@
+import { N800 } from '@atlaskit/theme/colors';
+export var overrideMarks = ['backgroundColor'];
+export var DEFAULT_COLOR = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
+  color: N800.toLowerCase(),
+  label: 'Dark gray'
+};

package/dist/esm/utils/disabled.js

@@ -1,4 +1,5 @@
-import { entireSelectionContainsMark, isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { overrideMarks } from './constants';
 var hasLinkMark = function hasLinkMark($pos) {
   var linkMarkType = $pos.doc.type.schema.marks.link,
     pos = $pos.pos;
@@ -7,39 +8,24 @@ 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 _state$storedMarks;
     var _ref = state.selection,
       empty = _ref.empty,
       ranges = _ref.ranges,
-      $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) {
+      $cursor = _ref.$cursor;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
       return true;
     }
-    if (isMarkExcluded(textColor, state.storedMarks || $cursor && $cursor.marks())) {
+
+    // Allow "excluded" marks that can be overridden
+    // These marks are explicitly removed before applying the new mark (see toggleColor command)
+    var omitOverrides = function omitOverrides(mark) {
+      return !overrideMarks.includes(mark.type.name);
+    };
+    if (isMarkExcluded(textColor, ((_state$storedMarks = state.storedMarks) === null || _state$storedMarks === void 0 ? void 0 : _state$storedMarks.filter(omitOverrides)) || $cursor && $cursor.marks().filter(omitOverrides))) {
       return true;
     }
     return false;

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

@@ -2,7 +2,7 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export { DEFAULT_COLOR } from '../utils/color';
+export { DEFAULT_COLOR } from '../utils/constants';
 export type TextColorPluginState = {
     palette: Array<PaletteColor>;
     defaultColor: string;

package/dist/types/utils/color.d.ts

@@ -1,6 +1,2 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const DEFAULT_COLOR: {
-    color: string;
-    label: string;
-};
 export declare const getActiveColor: (state: EditorState) => string | null;

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const overrideMarks: string[];
+export declare const DEFAULT_COLOR: {
+    color: string;
+    label: string;
+};

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

@@ -2,7 +2,7 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export { DEFAULT_COLOR } from '../utils/color';
+export { DEFAULT_COLOR } from '../utils/constants';
 export type TextColorPluginState = {
     palette: Array<PaletteColor>;
     defaultColor: string;

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

@@ -1,6 +1,2 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-export declare const DEFAULT_COLOR: {
-    color: string;
-    label: string;
-};
 export declare const getActiveColor: (state: EditorState) => string | null;

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

@@ -0,0 +1,5 @@
+export declare const overrideMarks: string[];
+export declare const DEFAULT_COLOR: {
+    color: string;
+    label: string;
+};

package/package.json

@@ -1,95 +1,82 @@
 {
-  "name": "@atlaskit/editor-plugin-text-color",
-  "version": "1.4.1",
-  "description": "Text color plugin for @atlaskit/editor-core",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "atlassian": {
-    "team": "Editor: Lego",
-    "singleton": true,
-    "inPublicMirror": false,
-    "releaseModel": "continuous",
-    "runReact18": false
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
-  "af:exports": {
-    ".": "./src/index.ts"
-  },
-  "dependencies": {
-    "@atlaskit/adf-schema": "^36.10.7",
-    "@atlaskit/editor-common": "^82.0.0",
-    "@atlaskit/editor-palette": "1.6.0",
-    "@atlaskit/editor-plugin-analytics": "^1.2.0",
-    "@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
-    "@atlaskit/editor-prosemirror": "4.0.1",
-    "@atlaskit/editor-shared-styles": "^2.12.0",
-    "@atlaskit/editor-tables": "^2.7.0",
-    "@atlaskit/icon": "^22.3.0",
-    "@atlaskit/theme": "^12.8.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1"
-  },
-  "devDependencies": {
-    "@af/visual-regression": "*",
-    "@atlaskit/ssr": "*",
-    "@atlaskit/visual-regression": "*",
-    "@testing-library/react": "^12.1.5",
-    "react-dom": "^16.8.0",
-    "typescript": "~5.4.2",
-    "wait-for-expect": "^1.2.0"
-  },
-  "techstack": {
-    "@atlassian/frontend": {
-      "import-structure": [
-        "atlassian-conventions"
-      ],
-      "circular-dependencies": [
-        "file-and-folder-level"
-      ]
-    },
-    "@repo/internal": {
-      "dom-events": "use-bind-event-listener",
-      "analytics": [
-        "analytics-next"
-      ],
-      "design-tokens": [
-        "color"
-      ],
-      "theming": [
-        "react-context"
-      ],
-      "ui-components": [
-        "lite-mode"
-      ],
-      "deprecation": "no-deprecated-imports",
-      "styling": [
-        "emotion",
-        "emotion"
-      ],
-      "imports": [
-        "import-no-extraneous-disable-for-examples-and-docs"
-      ]
-    }
-  }
-}
+	"name": "@atlaskit/editor-plugin-text-color",
+	"version": "1.6.0",
+	"description": "Text color plugin for @atlaskit/editor-core",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"atlassian": {
+		"team": "Editor: Lego",
+		"singleton": true,
+		"inPublicMirror": false,
+		"releaseModel": "continuous",
+		"runReact18": false
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
+		}
+	},
+	"sideEffects": false,
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/adf-schema": "^36.10.7",
+		"@atlaskit/editor-common": "^82.6.0",
+		"@atlaskit/editor-palette": "1.6.0",
+		"@atlaskit/editor-plugin-analytics": "^1.2.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
+		"@atlaskit/editor-prosemirror": "4.0.1",
+		"@atlaskit/editor-shared-styles": "^2.12.0",
+		"@atlaskit/editor-tables": "^2.7.0",
+		"@atlaskit/icon": "^22.3.0",
+		"@atlaskit/platform-feature-flags": "^0.2.0",
+		"@atlaskit/theme": "^12.9.0",
+		"@atlaskit/tokens": "^1.50.0",
+		"@babel/runtime": "^7.0.0",
+		"@emotion/react": "^11.7.1"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
+	},
+	"devDependencies": {
+		"@af/visual-regression": "*",
+		"@atlaskit/ssr": "*",
+		"@atlaskit/visual-regression": "*",
+		"@testing-library/react": "^12.1.5",
+		"react-dom": "^16.8.0",
+		"typescript": "~5.4.2",
+		"wait-for-expect": "^1.2.0"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": ["atlassian-conventions"],
+			"circular-dependencies": ["file-and-folder-level"]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": ["analytics-next"],
+			"design-tokens": ["color"],
+			"theming": ["react-context"],
+			"ui-components": ["lite-mode"],
+			"deprecation": "no-deprecated-imports",
+			"styling": ["emotion", "emotion"],
+			"imports": ["import-no-extraneous-disable-for-examples-and-docs"]
+		}
+	},
+	"platform-feature-flags": {
+		"platform.editor.dynamic-palette-borders": {
+			"type": "boolean"
+		}
+	}
+}