@atlaskit/editor-plugin-text-color 0.1.0

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

@@ -0,0 +1,296 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.default = exports.ToolbarTextColor = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _changeColor = require("../../commands/change-color");
+var _icon = require("./icon");
+var _styles2 = require("./styles");
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
+var EXPERIMENT_GROUP_CONTROL = 'control';
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  textColor: {
+    id: 'fabric.editor.textColor',
+    defaultMessage: 'Text color',
+    description: ''
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ToolbarTextColor, _React$Component);
+  var _super = _createSuper(ToolbarTextColor);
+  function ToolbarTextColor() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ToolbarTextColor);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      isOpen: false,
+      isOpenedByKeyboard: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarItemRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeColor", function (color, editorAnalyticsApi) {
+      return (0, _changeColor.changeColor)(color, editorAnalyticsApi)(_this.props.editorView.state, _this.props.editorView.dispatch);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChange", function (attrs) {
+      _this.handleOpenChange({
+        isOpen: attrs.isOpen,
+        logCloseEvent: true,
+        event: attrs.event
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeTextColor", function (color, editorAnalyticsApi, disabled) {
+      if (!disabled) {
+        var _this$props$editorVie;
+        var palette = _this.props.pluginState.palette;
+
+        // we store color names in analytics
+        var swatch = palette.find(function (sw) {
+          return sw.value === color;
+        });
+        _this.dispatchAnalyticsEvent(_this.buildAnalyticsSelectColor({
+          color: (swatch ? swatch.label : color).toLowerCase()
+        }));
+        _this.handleOpenChange({
+          isOpen: false,
+          logCloseEvent: false
+        });
+        _this.changeColor(color, editorAnalyticsApi);
+        //To set the focus on the textcolor button when the menu is closed by 'Esc' only to meet aria guidelines
+        (_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 || _this$props$editorVie.focus();
+      }
+      return false;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
+      _this.handleOpenChange({
+        isOpen: !_this.state.isOpen,
+        logCloseEvent: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpenedByKeyboard: true
+        });
+        _this.toggleOpen();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (_ref) {
+      var isOpen = _ref.isOpen,
+        logCloseEvent = _ref.logCloseEvent,
+        event = _ref.event;
+      _this.setState({
+        isOpen: isOpen
+      });
+      if (!isOpen) {
+        _this.setState({
+          isOpenedByKeyboard: false
+        });
+      }
+      if (logCloseEvent) {
+        _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED, {
+          noSelect: isOpen === false
+        }));
+      }
+      if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
+        var _this$toolbarItemRef;
+        (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function (e) {
+      var isOpen = _this.state.isOpen;
+      if (isOpen === true) {
+        _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(_analytics.ACTION.CLOSED, {
+          noSelect: true
+        }));
+        _this.setState({
+          isOpen: false
+        });
+        if (e instanceof KeyboardEvent && e.key === 'Escape') {
+          var _this$toolbarItemRef2;
+          (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideonEsc", function (e) {
+      var _this$toolbarItemRef3;
+      _this.hide(e);
+      (_this$toolbarItemRef3 = _this.toolbarItemRef) === null || _this$toolbarItemRef3 === void 0 || (_this$toolbarItemRef3 = _this$toolbarItemRef3.current) === null || _this$toolbarItemRef3 === void 0 || _this$toolbarItemRef3.focus();
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(ToolbarTextColor, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$state = this.state,
+        isOpen = _this$state.isOpen,
+        isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
+      var _this$props = this.props,
+        popupsMountPoint = _this$props.popupsMountPoint,
+        popupsBoundariesElement = _this$props.popupsBoundariesElement,
+        popupsScrollableElement = _this$props.popupsScrollableElement,
+        isReducedSpacing = _this$props.isReducedSpacing,
+        pluginState = _this$props.pluginState,
+        formatMessage = _this$props.intl.formatMessage,
+        disabled = _this$props.disabled,
+        pluginInjectionApi = _this$props.pluginInjectionApi;
+      var labelTextColor = formatMessage(messages.textColor);
+      var palette = pluginState.palette;
+      var fitWidth;
+      if (document.body.clientWidth <= 740) {
+        // This was originally hard-coded, but moved here to a const
+        // My guess is it's based off (width of button * columns) + left/right padding
+        // 240 = (32 * 7) + (8 + 8)
+        // Not sure where the extra 2px comes from
+        fitWidth = 242;
+      }
+      var selectedColor = this.getSelectedColor(pluginState);
+      var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, pluginState.color),
+        selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+        selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        (0, _react2.jsx)("span", {
+          css: _styles.wrapperStyle
+        }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          isOpen: isOpen && !pluginState.disabled,
+          handleClickOutside: this.hide,
+          handleEscapeKeydown: this.hideonEsc,
+          zIndex: _editorSharedStyles.akEditorMenuZIndex,
+          fitWidth: fitWidth,
+          onOpenChange: this.onOpenChange,
+          closeOnTab: true,
+          arrowKeyNavigationProviderOptions: {
+            type: _uiMenu.ArrowKeyNavigationType.COLOR,
+            selectedRowIndex: selectedRowIndex,
+            selectedColumnIndex: selectedColumnIndex,
+            isOpenedByKeyboard: isOpenedByKeyboard,
+            isPopupPositioned: true
+          },
+          trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+            buttonId: _uiMenu.TOOLBAR_BUTTON.TEXT_COLOR,
+            spacing: isReducedSpacing ? 'none' : 'default',
+            disabled: disabled || pluginState.disabled,
+            selected: isOpen,
+            "aria-label": labelTextColor,
+            "aria-expanded": isOpen,
+            "aria-haspopup": true,
+            title: labelTextColor,
+            onClick: this.toggleOpen,
+            onKeyDown: this.onKeyDown,
+            ref: this.toolbarItemRef,
+            iconBefore:
+            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+            (0, _react2.jsx)("div", {
+              css: _styles.triggerWrapperStyles
+            }, (0, _react2.jsx)("div", {
+              css: _styles2.textColorIconWrapper
+            }, (0, _react2.jsx)(_icon.EditorTextColorIcon, null), (0, _react2.jsx)("div", {
+              css: [
+              // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+              _styles2.textColorIconBar, selectedColor ? // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+              "background: ".concat(selectedColor, ";") :
+              // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+              pluginState.disabled && _styles2.backgroundDisabled]
+            })), (0, _react2.jsx)("span", {
+              css: _styles.expandIconWrapperStyle
+            }, (0, _react2.jsx)(_chevronDown.default, {
+              label: ""
+            })))
+          })
+        }, (0, _react2.jsx)("div", {
+          "data-testid": "text-color-palette"
+        }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+          onClick: function onClick(color) {
+            var _pluginInjectionApi$a;
+            return _this2.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);
+          },
+          selectedColor: pluginState.color,
+          paletteOptions: {
+            palette: palette,
+            hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
+            paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
+          }
+        }))), (0, _react2.jsx)("span", {
+          css: _styles.separatorStyles
+        }))
+      );
+    }
+  }, {
+    key: "getSelectedColor",
+    value: function getSelectedColor(pluginState) {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? (0, _editorPalette.hexToEditorTextPaletteColor)(pluginState.color) : pluginState.color);
+      return selectedColor;
+    }
+  }, {
+    key: "getCommonAnalyticsAttributes",
+    value: function getCommonAnalyticsAttributes() {
+      return {
+        experiment: EXPERIMENT_NAME,
+        experimentGroup: EXPERIMENT_GROUP_CONTROL
+      };
+    }
+  }, {
+    key: "buildAnalyticsPalette",
+    value: function buildAnalyticsPalette(action, data) {
+      return {
+        action: action,
+        actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_COLOR,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
+      };
+    }
+  }, {
+    key: "buildAnalyticsSelectColor",
+    value: function buildAnalyticsSelectColor(data) {
+      return {
+        action: _analytics.ACTION.FORMATTED,
+        actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_COLOR,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
+      };
+    }
+  }, {
+    key: "dispatchAnalyticsEvent",
+    value: function dispatchAnalyticsEvent(payload) {
+      var dispatchAnalyticsEvent = this.props.dispatchAnalyticsEvent;
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(payload);
+      }
+    }
+  }]);
+  return ToolbarTextColor;
+}(_react.default.Component);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ToolbarTextColor);

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColorIconWrapper = exports.textColorIconBar = exports.backgroundDisabled = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3;
+var createSteppedRainbow = function createSteppedRainbow(colors) {
+  return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
+    var inc = 100 / colors.length;
+    var pos = i + 1;
+    if (i === 0) {
+      return "".concat(color, " ").concat(pos * inc, "%,");
+    }
+    if (i === colors.length - 1) {
+      return "".concat(color, " ").concat((pos - 1) * inc, "%");
+    }
+    return "\n            ".concat(color, " ").concat((pos - 1) * inc, "%,\n            ").concat(color, " ").concat(pos * inc, "%,\n          ");
+  }).join('\n'), "\n    );\n    ");
+};
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var rainbow = createSteppedRainbow([_colors.P300, _colors.T300, _colors.Y400, _colors.R400]);
+var disabledRainbow = createSteppedRainbow([_colors.N80, _colors.N60, _colors.N40, _colors.N60]);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+var textColorIconWrapper = exports.textColorIconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var textColorIconBar = exports.textColorIconBar = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: ", ";\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n  background: ", ";\n"])), "var(--ds-space-200, 16px)", (0, _constants.borderRadius)() + 'px', rainbow);
+var backgroundDisabled = exports.backgroundDisabled = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n"])), disabledRainbow);

package/dist/cjs/utils/color.js

@@ -0,0 +1,54 @@
+"use strict";
+
+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'
+};
+var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
+  var _ref = state.selection,
+    $from = _ref.$from,
+    $to = _ref.$to,
+    $cursor = _ref.$cursor;
+  var _ref2 = state.schema.marks,
+    textColor = _ref2.textColor;
+
+  // Filter out other marks
+  var marks = [];
+  if ($cursor) {
+    marks.push(textColor.isInSet(state.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    state.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) {
+    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;
+};

package/dist/cjs/utils/disabled.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDisabledState = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var hasLinkMark = function hasLinkMark($pos) {
+  var linkMarkType = $pos.doc.type.schema.marks.link,
+    pos = $pos.pos;
+  if (!linkMarkType) {
+    return false;
+  }
+  return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
+};
+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) {
+      return true;
+    }
+    if ((0, _mark.isMarkExcluded)(textColor, state.storedMarks || $cursor && $cursor.marks())) {
+      return true;
+    }
+    return false;
+  }
+  return true;
+};

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

@@ -0,0 +1,54 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { pluginKey } from '../pm-plugins/main';
+import { getActiveColor } from '../utils/color';
+import { removeColor } from './remove-color';
+import { toggleColor } from './toggle-color';
+
+/**
+ * Helper to create a higher order analytics command
+ * @param newColor  - Color to be change in hex code
+ * @param previousColor - Active color in hex code
+ * @param palette - Current palette of colors
+ * @return Higher order command with analytics logic inside.
+ */
+function createWithColorAnalytics(newColor, previousColor, palette, editorAnalyticsApi) {
+  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 withAnalytics(editorAnalyticsApi, {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase()
+    }
+  });
+}
+export const changeColor = (color, editorAnalyticsApi) => (state, dispatch) => {
+  const {
+    textColor
+  } = state.schema.marks;
+  if (textColor) {
+    const pluginState = pluginKey.getState(state);
+    const activeColor = getActiveColor(state);
+    const withColorAnalytics = createWithColorAnalytics(color, activeColor, (pluginState === null || pluginState === void 0 ? void 0 : pluginState.palette) || [], editorAnalyticsApi);
+    if (pluginState !== null && pluginState !== void 0 && pluginState.disabled) {
+      return false;
+    }
+    if (color === (pluginState === null || pluginState === void 0 ? void 0 : pluginState.defaultColor)) {
+      withColorAnalytics(removeColor())(state, dispatch);
+      return true;
+    }
+    withColorAnalytics(toggleColor(color))(state, dispatch);
+    return true;
+  }
+  return false;
+};

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

@@ -0,0 +1,57 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+export const removeColor = () => (state, dispatch) => {
+  const {
+    schema,
+    selection
+  } = state;
+  const {
+    textColor
+  } = schema.marks;
+  let tr = state.tr;
+  if (selection instanceof TextSelection) {
+    const {
+      from,
+      to,
+      $cursor
+    } = selection;
+    if ($cursor) {
+      tr = state.tr.removeStoredMark(textColor);
+    } else {
+      tr = state.tr.removeMark(from, to, textColor);
+    }
+  }
+  if (selection instanceof CellSelection) {
+    /**
+     * This is a slight abstraction from `src/utils/commands.ts`
+     * The main difference is we can't toggle the default from another (since they are different marks),
+     * we want to remove all text color marks on the selection, so we slightly modify the cell selection
+     * part here.
+     */
+    selection.forEachCell((cell, cellPos) => {
+      const from = cellPos;
+      const to = cellPos + cell.nodeSize;
+      tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), (node, pos) => {
+        if (!node.isText) {
+          return true;
+        }
+
+        // This is an issue when the user selects some text.
+        // We need to check if the current node position is less than the range selection from.
+        // If it’s true, that means we should apply the mark using the range selection,
+        // not the current node position.
+        const nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
+        const nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to));
+        tr.removeMark(nodeBetweenFrom, nodeBetweenTo, textColor);
+        return true;
+      });
+    });
+  }
+  if (dispatch) {
+    dispatch(tr.setMeta(pluginKey, {
+      action: ACTIONS.RESET_COLOR
+    }));
+  }
+  return true;
+};

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

@@ -0,0 +1,30 @@
+import { toggleMark } from '@atlaskit/editor-common/mark';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+import { getDisabledState } from '../utils/disabled';
+export const toggleColor = color => (state, dispatch) => {
+  const {
+    textColor
+  } = state.schema.marks;
+  let tr = state.tr;
+  const disabledState = getDisabledState(state);
+  if (disabledState) {
+    if (dispatch) {
+      dispatch(tr.setMeta(pluginKey, {
+        action: ACTIONS.DISABLE
+      }));
+    }
+    return false;
+  }
+  if (dispatch) {
+    state.tr.setMeta(pluginKey, {
+      action: ACTIONS.SET_COLOR,
+      color
+    });
+    state.tr.scrollIntoView();
+    editorCommandToPMCommand(toggleMark(textColor, {
+      color
+    }))(state, dispatch);
+  }
+  return true;
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { textColorPlugin } from './plugin';

package/dist/es2019/plugin.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { textColor } from '@atlaskit/adf-schema';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { changeColor } from './commands/change-color';
+import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
+import ToolbarTextColor from './ui/ToolbarTextColor';
+const pluginConfig = textColorConfig => {
+  if (!textColorConfig || typeof textColorConfig === 'boolean') {
+    return undefined;
+  }
+  return textColorConfig;
+};
+export const textColorPlugin = ({
+  config: textColorConfig,
+  api
+}) => {
+  return {
+    name: 'textColor',
+    marks() {
+      return [{
+        name: 'textColor',
+        mark: textColor
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'textColor',
+        plugin: ({
+          dispatch
+        }) => createPlugin(dispatch, pluginConfig(textColorConfig))
+      }];
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return textColorPluginKey.getState(editorState);
+    },
+    actions: {
+      changeColor: color => {
+        var _api$analytics;
+        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(WithPluginState, {
+        plugins: {
+          textColor: textColorPluginKey
+        },
+        render: ({
+          textColor
+        }) => /*#__PURE__*/React.createElement(ToolbarTextColor, {
+          pluginState: textColor,
+          isReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          disabled: disabled,
+          pluginInjectionApi: api
+        })
+      });
+    }
+  };
+};
+export { textColorPluginKey };