@atlaskit/editor-plugin-text-color 5.0.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-text-color
 
+## 5.2.0
+
+### Minor Changes
+
+- [`64ec65231b4cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64ec65231b4cf) -
+  EDITOR-1568 bump adf-schema for afm
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.0
+
+### Minor Changes
+
+- [`52e588636f4d0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52e588636f4d0) -
+  Add new 'changeColor' Editor Command to editor-plugin-text-color, add new keys for clear color
+  menu item, add new clear color menu item, add new platform_editor_toolbar_aifc_patch_4 experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/editor-commands/change-color.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeColor = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _color = require("../pm-plugins/utils/color");
+var _removeColor = require("./remove-color");
+var _toggleColor = require("./toggle-color");
+/**
+ * Helper to create an analytics payload
+ * @param newColor  - Color to be change in hex code
+ * @param previousColor - Active color in hex code
+ * @param palette - Current palette of colors
+ * @returns Higher order command with analytics logic inside.
+ */
+function createColorAnalyticsPayload(newColor, previousColor, palette, inputMethod) {
+  var newColorFromPalette = palette.find(function (_ref) {
+    var value = _ref.value;
+    return value === newColor;
+  });
+  var previousColorFromPalette = palette.find(function (_ref2) {
+    var value = _ref2.value;
+    return value === previousColor;
+  });
+  var newColorLabel = newColorFromPalette ? newColorFromPalette.label : newColor;
+  var previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
+  return {
+    action: _analytics.ACTION.FORMATTED,
+    actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_COLOR,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase(),
+      inputMethod: inputMethod
+    }
+  };
+}
+var changeColor = exports.changeColor = function changeColor(color, api, inputMethod) {
+  return function (_ref3) {
+    var _api$analytics2;
+    var tr = _ref3.tr;
+    var textColor = tr.doc.type.schema.marks.textColor;
+    var pluginState = api === null || api === void 0 ? void 0 : api.textColor.sharedState.currentState();
+    if (!textColor || !pluginState) {
+      return tr;
+    }
+    var activeColor = (0, _color.getActiveColorNew)(tr);
+    var colorAnalyticsPayload = createColorAnalyticsPayload(color, activeColor, pluginState.palette, inputMethod);
+    if (pluginState.disabled) {
+      return tr;
+    }
+    if (color === pluginState.defaultColor) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
+      (0, _removeColor.removeColor)({
+        tr: tr
+      });
+      return tr;
+    }
+    api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
+    (0, _toggleColor.toggleColor)(color)({
+      tr: tr
+    });
+    return tr;
+  };
+};

package/dist/cjs/editor-commands/remove-color.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeColor = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var _main = require("../pm-plugins/main");
+var removeColor = exports.removeColor = function removeColor(_ref) {
+  var tr = _ref.tr;
+  var textColor = tr.doc.type.schema.marks.textColor;
+  (0, _mark.removeMark)(textColor)({
+    tr: tr
+  });
+  tr.setMeta(_main.pluginKey, {
+    action: _main.ACTIONS.RESET_COLOR
+  });
+  return tr;
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleColor = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var _main = require("../pm-plugins/main");
+var _constants = require("../pm-plugins/utils/constants");
+var _disabled = require("../pm-plugins/utils/disabled");
+var toggleColor = exports.toggleColor = function toggleColor(color) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var textColor = tr.doc.type.schema.marks.textColor;
+    var disabledState = (0, _disabled.getDisabledStateNew)(tr);
+    if (disabledState) {
+      tr.setMeta(_main.pluginKey, {
+        action: _main.ACTIONS.DISABLE
+      });
+      return tr;
+    }
+    _constants.overrideMarks.forEach(function (mark) {
+      var marks = tr.doc.type.schema.marks;
+      if (marks[mark]) {
+        (0, _mark.removeMark)(marks[mark])({
+          tr: tr
+        });
+      }
+    });
+    (0, _mark.toggleMark)(textColor, {
+      color: color
+    })({
+      tr: tr
+    });
+    return tr;
+  };
+};

package/dist/cjs/pm-plugins/utils/color.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActiveColor = void 0;
+exports.getActiveColorNew = exports.getActiveColor = void 0;
 var _constants = require("./constants");
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
   var _ref = state.selection,
     $from = _ref.$from,
@@ -28,6 +31,47 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
     });
   }
 
+  // Merge consecutive same color marks
+  var prevMark;
+  marks = marks.filter(function (mark) {
+    if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
+      return false;
+    }
+    prevMark = mark;
+    return true;
+  });
+  var marksWithColor = marks.filter(function (mark) {
+    return !!mark;
+  });
+  // When multiple colors are selected revert back to default color
+  if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
+    return null;
+  }
+  return marksWithColor.length ? marksWithColor[0].attrs.color : _constants.DEFAULT_COLOR.color;
+};
+var getActiveColorNew = exports.getActiveColorNew = function getActiveColorNew(tr) {
+  var _ref3 = tr.selection,
+    $from = _ref3.$from,
+    $to = _ref3.$to,
+    $cursor = _ref3.$cursor;
+  var _ref4 = tr.doc.type.schema.marks,
+    textColor = _ref4.textColor;
+
+  // Filter out other marks
+  var marks = [];
+  if ($cursor) {
+    marks.push(textColor.isInSet(tr.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    tr.doc.nodesBetween($from.pos, $to.pos, function (currentNode) {
+      if (currentNode.isLeaf) {
+        var mark = textColor.isInSet(currentNode.marks) || undefined;
+        marks.push(mark);
+        return !mark;
+      }
+      return true;
+    });
+  }
+
   // Merge consecutive same color marks
   var prevMark;
   marks = marks.filter(function (mark) {

package/dist/cjs/pm-plugins/utils/disabled.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDisabledState = void 0;
+exports.getDisabledStateNew = exports.getDisabledState = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
 var _constants = require("./constants");
 var hasLinkMark = function hasLinkMark($pos) {
@@ -14,6 +14,10 @@ var hasLinkMark = function hasLinkMark($pos) {
   }
   return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
 };
+
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 var getDisabledState = exports.getDisabledState = function getDisabledState(state) {
   var textColor = state.schema.marks.textColor;
   if (textColor) {
@@ -37,4 +41,28 @@ var getDisabledState = exports.getDisabledState = function getDisabledState(stat
     return false;
   }
   return true;
+};
+var getDisabledStateNew = exports.getDisabledStateNew = function getDisabledStateNew(tr) {
+  var textColor = tr.doc.type.schema.marks.textColor;
+  if (textColor) {
+    var _tr$storedMarks;
+    var _ref2 = tr.selection,
+      empty = _ref2.empty,
+      ranges = _ref2.ranges,
+      $cursor = _ref2.$cursor;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || (0, _mark.isMarkAllowedInRange)(tr.doc, ranges, textColor) === false) {
+      return true;
+    }
+
+    // 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, ((_tr$storedMarks = tr.storedMarks) === null || _tr$storedMarks === void 0 ? void 0 : _tr$storedMarks.filter(omitOverrides)) || $cursor && $cursor.marks().filter(omitOverrides))) {
+      return true;
+    }
+    return false;
+  }
+  return true;
 };

package/dist/cjs/textColorPlugin.js

@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _changeColor2 = require("./pm-plugins/commands/change-color");
+var _changeColor2 = require("./editor-commands/change-color");
+var _changeColor3 = require("./pm-plugins/commands/change-color");
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
@@ -83,7 +84,12 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
     actions: {
       changeColor: function changeColor(color, inputMethod) {
         var _api$analytics;
-        return (0, _changeColor2.changeColor)(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
+        return (0, _changeColor3.changeColor)(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
+      }
+    },
+    commands: {
+      changeColor: function changeColor(color, inputMethod) {
+        return (0, _changeColor2.changeColor)(color, api, inputMethod);
       }
     },
     pluginsOptions: !isToolbarAIFCEnabled ? {

package/dist/cjs/ui/RemoveColorMenuItem.compiled.css

@@ -0,0 +1,6 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._195gv77o{margin-inline:var(--ds-space-025,2px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}

package/dist/cjs/ui/RemoveColorMenuItem.js

@@ -0,0 +1,65 @@
+/* RemoveColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RemoveColorMenuItem = void 0;
+require("./RemoveColorMenuItem.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  removeColorButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej _19pk12x7"
+};
+var RemoveColorMenuItem = exports.RemoveColorMenuItem = function RemoveColorMenuItem(_ref) {
+  var api = _ref.api,
+    parents = _ref.parents;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var context = (0, _editorToolbar.useToolbarDropdownMenu)();
+  var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
+  var onClick = function onClick() {
+    var _api$textColor$shared;
+    if (!api) {
+      return;
+    }
+    var defaultColor = (_api$textColor$shared = api.textColor.sharedState.currentState()) === null || _api$textColor$shared === void 0 ? void 0 : _api$textColor$shared.defaultColor;
+    if (!defaultColor) {
+      return;
+    }
+    api.core.actions.execute(function (_ref2) {
+      var _api$highlight;
+      var tr = _ref2.tr;
+      api.textColor.commands.changeColor(defaultColor, (0, _toolbar.getInputMethodFromParentKeys)(parents))({
+        tr: tr
+      });
+      (_api$highlight = api.highlight) === null || _api$highlight === void 0 || _api$highlight.commands.changeColor({
+        color: _uiColor.REMOVE_HIGHLIGHT_COLOR,
+        inputMethod: (0, _toolbar.getInputMethodFromParentKeys)(parents)
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    closeMenu === null || closeMenu === void 0 || closeMenu();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.removeColorButton])
+  }, /*#__PURE__*/React.createElement(_new.default, {
+    shouldFitContainer: true,
+    appearance: "subtle",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    weight: "medium"
+  }, formatMessage(_messages.highlightMessages.removeColor))));
+};

package/dist/cjs/ui/toolbar-components.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarComponents = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _RemoveColorMenuItem = require("./RemoveColorMenuItem");
 var _TextColorHighlightMenu = require("./TextColorHighlightMenu");
 var _TextColorMenuItem = require("./TextColorMenuItem");
 var _TextMenuSection = require("./TextMenuSection");
@@ -50,5 +51,16 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         parents: parents
       });
     }
-  })];
+  })].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? [_objectSpread(_objectSpread({}, _toolbar.CLEAR_COLOR_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.CLEAR_COLOR_MENU_ITEM.key]
+    })],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      return /*#__PURE__*/_react.default.createElement(_RemoveColorMenuItem.RemoveColorMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  })] : []));
 };

package/dist/es2019/editor-commands/change-color.js

@@ -0,0 +1,63 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { getActiveColorNew } from '../pm-plugins/utils/color';
+import { removeColor } from './remove-color';
+import { toggleColor } from './toggle-color';
+
+/**
+ * Helper to create an analytics payload
+ * @param newColor  - Color to be change in hex code
+ * @param previousColor - Active color in hex code
+ * @param palette - Current palette of colors
+ * @returns Higher order command with analytics logic inside.
+ */
+function createColorAnalyticsPayload(newColor, previousColor, palette, inputMethod) {
+  const newColorFromPalette = palette.find(({
+    value
+  }) => value === newColor);
+  const previousColorFromPalette = palette.find(({
+    value
+  }) => value === previousColor);
+  const newColorLabel = newColorFromPalette ? newColorFromPalette.label : newColor;
+  const previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
+  return {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase(),
+      inputMethod
+    }
+  };
+}
+export const changeColor = (color, api, inputMethod) => ({
+  tr
+}) => {
+  var _api$analytics2;
+  const {
+    textColor
+  } = tr.doc.type.schema.marks;
+  const pluginState = api === null || api === void 0 ? void 0 : api.textColor.sharedState.currentState();
+  if (!textColor || !pluginState) {
+    return tr;
+  }
+  const activeColor = getActiveColorNew(tr);
+  const colorAnalyticsPayload = createColorAnalyticsPayload(color, activeColor, pluginState.palette, inputMethod);
+  if (pluginState.disabled) {
+    return tr;
+  }
+  if (color === pluginState.defaultColor) {
+    var _api$analytics;
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
+    removeColor({
+      tr
+    });
+    return tr;
+  }
+  api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
+  toggleColor(color)({
+    tr
+  });
+  return tr;
+};

package/dist/es2019/editor-commands/remove-color.js

@@ -0,0 +1,16 @@
+import { removeMark } from '@atlaskit/editor-common/mark';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+export const removeColor = ({
+  tr
+}) => {
+  const {
+    textColor
+  } = tr.doc.type.schema.marks;
+  removeMark(textColor)({
+    tr
+  });
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.RESET_COLOR
+  });
+  return tr;
+};

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

@@ -0,0 +1,34 @@
+import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+import { overrideMarks } from '../pm-plugins/utils/constants';
+import { getDisabledStateNew } from '../pm-plugins/utils/disabled';
+export const toggleColor = color => ({
+  tr
+}) => {
+  const {
+    textColor
+  } = tr.doc.type.schema.marks;
+  const disabledState = getDisabledStateNew(tr);
+  if (disabledState) {
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.DISABLE
+    });
+    return tr;
+  }
+  overrideMarks.forEach(mark => {
+    const {
+      marks
+    } = tr.doc.type.schema;
+    if (marks[mark]) {
+      removeMark(marks[mark])({
+        tr
+      });
+    }
+  });
+  toggleMark(textColor, {
+    color
+  })({
+    tr
+  });
+  return tr;
+};

package/dist/es2019/pm-plugins/utils/color.js

@@ -1,4 +1,8 @@
 import { DEFAULT_COLOR } from './constants';
+
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export const getActiveColor = state => {
   const {
     $from,
@@ -24,6 +28,47 @@ export const getActiveColor = state => {
     });
   }
 
+  // Merge consecutive same color marks
+  let prevMark;
+  marks = marks.filter(mark => {
+    if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
+      return false;
+    }
+    prevMark = mark;
+    return true;
+  });
+  const marksWithColor = marks.filter(mark => !!mark);
+  // When multiple colors are selected revert back to default color
+  if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
+    return null;
+  }
+  return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
+};
+export const getActiveColorNew = tr => {
+  const {
+    $from,
+    $to,
+    $cursor
+  } = tr.selection;
+  const {
+    textColor
+  } = tr.doc.type.schema.marks;
+
+  // Filter out other marks
+  let marks = [];
+  if ($cursor) {
+    marks.push(textColor.isInSet(tr.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    tr.doc.nodesBetween($from.pos, $to.pos, currentNode => {
+      if (currentNode.isLeaf) {
+        const mark = textColor.isInSet(currentNode.marks) || undefined;
+        marks.push(mark);
+        return !mark;
+      }
+      return true;
+    });
+  }
+
   // Merge consecutive same color marks
   let prevMark;
   marks = marks.filter(mark => {

package/dist/es2019/pm-plugins/utils/disabled.js

@@ -18,6 +18,10 @@ const hasLinkMark = $pos => {
   }
   return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
 };
+
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export const getDisabledState = state => {
   const {
     textColor
@@ -44,4 +48,31 @@ export const getDisabledState = state => {
     return false;
   }
   return true;
+};
+export const getDisabledStateNew = tr => {
+  const {
+    textColor
+  } = tr.doc.type.schema.marks;
+  if (textColor) {
+    var _tr$storedMarks;
+    const {
+      empty,
+      ranges,
+      $cursor
+    } = tr.selection;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(tr.doc, ranges, textColor) === false) {
+      return true;
+    }
+
+    // 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, ((_tr$storedMarks = tr.storedMarks) === null || _tr$storedMarks === void 0 ? void 0 : _tr$storedMarks.filter(omitOverrides)) || $cursor && $cursor.marks().filter(omitOverrides))) {
+      return true;
+    }
+    return false;
+  }
+  return true;
 };

package/dist/es2019/textColorPlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { textColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { changeColor as changeColorCommand } from './editor-commands/change-color';
 import { changeColor } from './pm-plugins/commands/change-color';
 import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
@@ -80,6 +81,11 @@ 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, inputMethod);
       }
     },
+    commands: {
+      changeColor: (color, inputMethod) => {
+        return changeColorCommand(color, api, inputMethod);
+      }
+    },
     pluginsOptions: !isToolbarAIFCEnabled ? {
       selectionToolbar: () => {
         var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;

package/dist/es2019/ui/RemoveColorMenuItem.compiled.css

@@ -0,0 +1,6 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._195gv77o{margin-inline:var(--ds-space-025,2px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}

package/dist/es2019/ui/RemoveColorMenuItem.js

@@ -0,0 +1,59 @@
+/* RemoveColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./RemoveColorMenuItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
+import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
+import { useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  removeColorButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej _19pk12x7"
+};
+export const RemoveColorMenuItem = ({
+  api,
+  parents
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const context = useToolbarDropdownMenu();
+  const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
+  const onClick = () => {
+    var _api$textColor$shared;
+    if (!api) {
+      return;
+    }
+    const defaultColor = (_api$textColor$shared = api.textColor.sharedState.currentState()) === null || _api$textColor$shared === void 0 ? void 0 : _api$textColor$shared.defaultColor;
+    if (!defaultColor) {
+      return;
+    }
+    api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$highlight;
+      api.textColor.commands.changeColor(defaultColor, getInputMethodFromParentKeys(parents))({
+        tr
+      });
+      (_api$highlight = api.highlight) === null || _api$highlight === void 0 ? void 0 : _api$highlight.commands.changeColor({
+        color: REMOVE_HIGHLIGHT_COLOR,
+        inputMethod: getInputMethodFromParentKeys(parents)
+      })({
+        tr
+      });
+      return tr;
+    });
+    closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.removeColorButton])
+  }, /*#__PURE__*/React.createElement(Button, {
+    shouldFitContainer: true,
+    appearance: "subtle",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "medium"
+  }, formatMessage(messages.removeColor))));
+};

package/dist/es2019/ui/toolbar-components.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
+import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU, CLEAR_COLOR_MENU_ITEM } from '@atlaskit/editor-common/toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { RemoveColorMenuItem } from './RemoveColorMenuItem';
 import { TextColorHighlightMenu } from './TextColorHighlightMenu';
 import { TextColorMenuItem } from './TextColorMenuItem';
 import { TextMenuSection } from './TextMenuSection';
@@ -45,5 +46,19 @@ export const getToolbarComponents = api => {
       api: api,
       parents: parents
     })
-  }];
+  }, ...(expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? [{
+    ...CLEAR_COLOR_MENU_ITEM,
+    parents: [{
+      ...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[CLEAR_COLOR_MENU_ITEM.key]
+    }],
+    component: ({
+      parents
+    }) => {
+      return /*#__PURE__*/React.createElement(RemoveColorMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  }] : [])];
 };

package/dist/esm/editor-commands/change-color.js

@@ -0,0 +1,64 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { getActiveColorNew } from '../pm-plugins/utils/color';
+import { removeColor } from './remove-color';
+import { toggleColor } from './toggle-color';
+
+/**
+ * Helper to create an analytics payload
+ * @param newColor  - Color to be change in hex code
+ * @param previousColor - Active color in hex code
+ * @param palette - Current palette of colors
+ * @returns Higher order command with analytics logic inside.
+ */
+function createColorAnalyticsPayload(newColor, previousColor, palette, inputMethod) {
+  var newColorFromPalette = palette.find(function (_ref) {
+    var value = _ref.value;
+    return value === newColor;
+  });
+  var previousColorFromPalette = palette.find(function (_ref2) {
+    var value = _ref2.value;
+    return value === previousColor;
+  });
+  var newColorLabel = newColorFromPalette ? newColorFromPalette.label : newColor;
+  var previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
+  return {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase(),
+      inputMethod: inputMethod
+    }
+  };
+}
+export var changeColor = function changeColor(color, api, inputMethod) {
+  return function (_ref3) {
+    var _api$analytics2;
+    var tr = _ref3.tr;
+    var textColor = tr.doc.type.schema.marks.textColor;
+    var pluginState = api === null || api === void 0 ? void 0 : api.textColor.sharedState.currentState();
+    if (!textColor || !pluginState) {
+      return tr;
+    }
+    var activeColor = getActiveColorNew(tr);
+    var colorAnalyticsPayload = createColorAnalyticsPayload(color, activeColor, pluginState.palette, inputMethod);
+    if (pluginState.disabled) {
+      return tr;
+    }
+    if (color === pluginState.defaultColor) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
+      removeColor({
+        tr: tr
+      });
+      return tr;
+    }
+    api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
+    toggleColor(color)({
+      tr: tr
+    });
+    return tr;
+  };
+};

package/dist/esm/editor-commands/remove-color.js

@@ -0,0 +1,13 @@
+import { removeMark } from '@atlaskit/editor-common/mark';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+export var removeColor = function removeColor(_ref) {
+  var tr = _ref.tr;
+  var textColor = tr.doc.type.schema.marks.textColor;
+  removeMark(textColor)({
+    tr: tr
+  });
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.RESET_COLOR
+  });
+  return tr;
+};

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

@@ -0,0 +1,31 @@
+import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+import { overrideMarks } from '../pm-plugins/utils/constants';
+import { getDisabledStateNew } from '../pm-plugins/utils/disabled';
+export var toggleColor = function toggleColor(color) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var textColor = tr.doc.type.schema.marks.textColor;
+    var disabledState = getDisabledStateNew(tr);
+    if (disabledState) {
+      tr.setMeta(pluginKey, {
+        action: ACTIONS.DISABLE
+      });
+      return tr;
+    }
+    overrideMarks.forEach(function (mark) {
+      var marks = tr.doc.type.schema.marks;
+      if (marks[mark]) {
+        removeMark(marks[mark])({
+          tr: tr
+        });
+      }
+    });
+    toggleMark(textColor, {
+      color: color
+    })({
+      tr: tr
+    });
+    return tr;
+  };
+};

package/dist/esm/pm-plugins/utils/color.js

@@ -1,4 +1,8 @@
 import { DEFAULT_COLOR } from './constants';
+
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export var getActiveColor = function getActiveColor(state) {
   var _ref = state.selection,
     $from = _ref.$from,
@@ -22,6 +26,47 @@ export var getActiveColor = function getActiveColor(state) {
     });
   }
 
+  // Merge consecutive same color marks
+  var prevMark;
+  marks = marks.filter(function (mark) {
+    if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
+      return false;
+    }
+    prevMark = mark;
+    return true;
+  });
+  var marksWithColor = marks.filter(function (mark) {
+    return !!mark;
+  });
+  // When multiple colors are selected revert back to default color
+  if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
+    return null;
+  }
+  return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
+};
+export var getActiveColorNew = function getActiveColorNew(tr) {
+  var _ref3 = tr.selection,
+    $from = _ref3.$from,
+    $to = _ref3.$to,
+    $cursor = _ref3.$cursor;
+  var _ref4 = tr.doc.type.schema.marks,
+    textColor = _ref4.textColor;
+
+  // Filter out other marks
+  var marks = [];
+  if ($cursor) {
+    marks.push(textColor.isInSet(tr.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    tr.doc.nodesBetween($from.pos, $to.pos, function (currentNode) {
+      if (currentNode.isLeaf) {
+        var mark = textColor.isInSet(currentNode.marks) || undefined;
+        marks.push(mark);
+        return !mark;
+      }
+      return true;
+    });
+  }
+
   // Merge consecutive same color marks
   var prevMark;
   marks = marks.filter(function (mark) {

package/dist/esm/pm-plugins/utils/disabled.js

@@ -8,6 +8,10 @@ var hasLinkMark = function hasLinkMark($pos) {
   }
   return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
 };
+
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export var getDisabledState = function getDisabledState(state) {
   var textColor = state.schema.marks.textColor;
   if (textColor) {
@@ -31,4 +35,28 @@ export var getDisabledState = function getDisabledState(state) {
     return false;
   }
   return true;
+};
+export var getDisabledStateNew = function getDisabledStateNew(tr) {
+  var textColor = tr.doc.type.schema.marks.textColor;
+  if (textColor) {
+    var _tr$storedMarks;
+    var _ref2 = tr.selection,
+      empty = _ref2.empty,
+      ranges = _ref2.ranges,
+      $cursor = _ref2.$cursor;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(tr.doc, ranges, textColor) === false) {
+      return true;
+    }
+
+    // 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, ((_tr$storedMarks = tr.storedMarks) === null || _tr$storedMarks === void 0 ? void 0 : _tr$storedMarks.filter(omitOverrides)) || $cursor && $cursor.marks().filter(omitOverrides))) {
+      return true;
+    }
+    return false;
+  }
+  return true;
 };

package/dist/esm/textColorPlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { textColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { changeColor as changeColorCommand } from './editor-commands/change-color';
 import { changeColor as _changeColor } from './pm-plugins/commands/change-color';
 import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
@@ -79,6 +80,11 @@ 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, inputMethod);
       }
     },
+    commands: {
+      changeColor: function changeColor(color, inputMethod) {
+        return changeColorCommand(color, api, inputMethod);
+      }
+    },
     pluginsOptions: !isToolbarAIFCEnabled ? {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;

package/dist/esm/ui/RemoveColorMenuItem.compiled.css

@@ -0,0 +1,6 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._195gv77o{margin-inline:var(--ds-space-025,2px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}

package/dist/esm/ui/RemoveColorMenuItem.js

@@ -0,0 +1,56 @@
+/* RemoveColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./RemoveColorMenuItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
+import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
+import { useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  removeColorButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej _19pk12x7"
+};
+export var RemoveColorMenuItem = function RemoveColorMenuItem(_ref) {
+  var api = _ref.api,
+    parents = _ref.parents;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var context = useToolbarDropdownMenu();
+  var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
+  var onClick = function onClick() {
+    var _api$textColor$shared;
+    if (!api) {
+      return;
+    }
+    var defaultColor = (_api$textColor$shared = api.textColor.sharedState.currentState()) === null || _api$textColor$shared === void 0 ? void 0 : _api$textColor$shared.defaultColor;
+    if (!defaultColor) {
+      return;
+    }
+    api.core.actions.execute(function (_ref2) {
+      var _api$highlight;
+      var tr = _ref2.tr;
+      api.textColor.commands.changeColor(defaultColor, getInputMethodFromParentKeys(parents))({
+        tr: tr
+      });
+      (_api$highlight = api.highlight) === null || _api$highlight === void 0 || _api$highlight.commands.changeColor({
+        color: REMOVE_HIGHLIGHT_COLOR,
+        inputMethod: getInputMethodFromParentKeys(parents)
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    closeMenu === null || closeMenu === void 0 || closeMenu();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.removeColorButton])
+  }, /*#__PURE__*/React.createElement(Button, {
+    shouldFitContainer: true,
+    appearance: "subtle",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "medium"
+  }, formatMessage(messages.removeColor))));
+};

package/dist/esm/ui/toolbar-components.js

@@ -1,10 +1,11 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 React from 'react';
-import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
+import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU, CLEAR_COLOR_MENU_ITEM } from '@atlaskit/editor-common/toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { RemoveColorMenuItem } from './RemoveColorMenuItem';
 import { TextColorHighlightMenu } from './TextColorHighlightMenu';
 import { TextColorMenuItem } from './TextColorMenuItem';
 import { TextMenuSection } from './TextMenuSection';
@@ -43,5 +44,16 @@ export var getToolbarComponents = function getToolbarComponents(api) {
         parents: parents
       });
     }
-  })];
+  })].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_patch_4', 'isEnabled', true) ? [_objectSpread(_objectSpread({}, CLEAR_COLOR_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[CLEAR_COLOR_MENU_ITEM.key]
+    })],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      return /*#__PURE__*/React.createElement(RemoveColorMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  })] : []));
 };

package/dist/types/editor-commands/change-color.d.ts

@@ -0,0 +1,4 @@
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+import type { TextColorInputMethod } from '../types';
+export declare const changeColor: (color: string, api: ExtractInjectionAPI<TextColorPlugin> | undefined, inputMethod?: TextColorInputMethod) => EditorCommand;

package/dist/types/editor-commands/remove-color.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const removeColor: EditorCommand;

package/dist/types/editor-commands/toggle-color.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const toggleColor: (color: string) => EditorCommand;

package/dist/types/pm-plugins/utils/color.d.ts

@@ -1,2 +1,6 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export declare const getActiveColor: (state: EditorState) => string | null;
+export declare const getActiveColorNew: (tr: Transaction) => string | null;

package/dist/types/pm-plugins/utils/disabled.d.ts

@@ -1,2 +1,6 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export declare const getDisabledState: (state: EditorState) => boolean;
+export declare const getDisabledStateNew: (tr: Transaction) => boolean;

package/dist/types/textColorPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, 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';
@@ -20,6 +20,9 @@ export type TextColorPlugin = NextEditorPlugin<'textColor', {
     actions: {
         changeColor: (color: string, inputMethod?: TextColorInputMethod) => Command;
     };
+    commands: {
+        changeColor: (color: string, inputMethod?: TextColorInputMethod) => EditorCommand;
+    };
     dependencies: Dependencies;
     pluginConfiguration: TextColorPluginOptions | undefined;
     sharedState: TextColorPluginState | undefined;

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

@@ -0,0 +1,9 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { TextColorPlugin } from '../textColorPluginType';
+type RemoveColorMenuItemButtonProps = {
+    api?: ExtractInjectionAPI<TextColorPlugin>;
+    parents: ToolbarComponentTypes;
+};
+export declare const RemoveColorMenuItem: ({ api, parents }: RemoveColorMenuItemButtonProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/editor-commands/change-color.d.ts

@@ -0,0 +1,4 @@
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+import type { TextColorInputMethod } from '../types';
+export declare const changeColor: (color: string, api: ExtractInjectionAPI<TextColorPlugin> | undefined, inputMethod?: TextColorInputMethod) => EditorCommand;

package/dist/types-ts4.5/editor-commands/remove-color.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const removeColor: EditorCommand;

package/dist/types-ts4.5/editor-commands/toggle-color.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const toggleColor: (color: string) => EditorCommand;

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

@@ -1,2 +1,6 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export declare const getActiveColor: (state: EditorState) => string | null;
+export declare const getActiveColorNew: (tr: Transaction) => string | null;

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

@@ -1,2 +1,6 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Use getDisabledStateNew instead and pass in `tr`
+ */
 export declare const getDisabledState: (state: EditorState) => boolean;
+export declare const getDisabledStateNew: (tr: Transaction) => boolean;

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

@@ -1,4 +1,4 @@
-import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, 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';
@@ -20,6 +20,9 @@ export type TextColorPlugin = NextEditorPlugin<'textColor', {
     actions: {
         changeColor: (color: string, inputMethod?: TextColorInputMethod) => Command;
     };
+    commands: {
+        changeColor: (color: string, inputMethod?: TextColorInputMethod) => EditorCommand;
+    };
     dependencies: Dependencies;
     pluginConfiguration: TextColorPluginOptions | undefined;
     sharedState: TextColorPluginState | undefined;

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

@@ -0,0 +1,9 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { TextColorPlugin } from '../textColorPluginType';
+type RemoveColorMenuItemButtonProps = {
+    api?: ExtractInjectionAPI<TextColorPlugin>;
+    parents: ToolbarComponentTypes;
+};
+export declare const RemoveColorMenuItem: ({ api, parents }: RemoveColorMenuItemButtonProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "5.0.1",
+	"version": "5.2.0",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,11 +29,12 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.0.0",
+		"@atlaskit/adf-schema": "^51.1.1",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/editor-palette": "^2.1.0",
-		"@atlaskit/editor-plugin-analytics": "^5.0.0",
-		"@atlaskit/editor-plugin-highlight": "^5.0.0",
+		"@atlaskit/editor-plugin-analytics": "^5.1.0",
+		"@atlaskit/editor-plugin-highlight": "^5.2.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^6.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^6.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^2.1.0",
@@ -47,13 +48,13 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.14.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.10.0",
+		"@atlaskit/tmp-editor-statsig": "^12.14.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.1.0",
+		"@atlaskit/editor-common": "^109.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"