@atlaskit/editor-plugin-text-color 0.1.0

package/dist/esm/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 as _changeColor } from './commands/change-color';
+import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
+import ToolbarTextColor from './ui/ToolbarTextColor';
+var pluginConfig = function pluginConfig(textColorConfig) {
+  if (!textColorConfig || typeof textColorConfig === 'boolean') {
+    return undefined;
+  }
+  return textColorConfig;
+};
+export var textColorPlugin = function textColorPlugin(_ref) {
+  var textColorConfig = _ref.config,
+    api = _ref.api;
+  return {
+    name: 'textColor',
+    marks: function marks() {
+      return [{
+        name: 'textColor',
+        mark: textColor
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'textColor',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return createPlugin(dispatch, pluginConfig(textColorConfig));
+        }
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return textColorPluginKey.getState(editorState);
+    },
+    actions: {
+      changeColor: function changeColor(color) {
+        var _api$analytics;
+        return _changeColor(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        popupsMountPoint = _ref3.popupsMountPoint,
+        popupsBoundariesElement = _ref3.popupsBoundariesElement,
+        popupsScrollableElement = _ref3.popupsScrollableElement,
+        isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing,
+        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+        disabled = _ref3.disabled;
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          textColor: textColorPluginKey
+        },
+        render: function render(_ref4) {
+          var textColor = _ref4.textColor;
+          return /*#__PURE__*/React.createElement(ToolbarTextColor, {
+            pluginState: textColor,
+            isReducedSpacing: isToolbarReducedSpacing,
+            editorView: editorView,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            disabled: disabled,
+            pluginInjectionApi: api
+          });
+        }
+      });
+    }
+  };
+};
+export { textColorPluginKey };

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

@@ -0,0 +1,74 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DEFAULT_BORDER_COLOR, textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
+import { getDisabledState } from '../utils/disabled';
+export { DEFAULT_COLOR } from '../utils/color';
+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));
+  var state = {
+    color: getActiveColor(editorState),
+    disabled: getDisabledState(editorState),
+    palette: palette,
+    defaultColor: defaultColor.color
+  };
+  return state;
+}
+export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
+  ACTIONS[ACTIONS["RESET_COLOR"] = 0] = "RESET_COLOR";
+  ACTIONS[ACTIONS["SET_COLOR"] = 1] = "SET_COLOR";
+  ACTIONS[ACTIONS["DISABLE"] = 2] = "DISABLE";
+  return ACTIONS;
+}({});
+export var pluginKey = new PluginKey('textColorPlugin');
+export function createPlugin(dispatch, pluginConfig) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init(_config, editorState) {
+        return createInitialPluginState(editorState, pluginConfig);
+      },
+      apply: function apply(tr, pluginState, _, newState) {
+        var meta = tr.getMeta(pluginKey) || {};
+        var nextState;
+        switch (meta.action) {
+          case ACTIONS.RESET_COLOR:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              color: pluginState.defaultColor
+            });
+            break;
+          case ACTIONS.SET_COLOR:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              color: meta.color,
+              disabled: false
+            });
+            break;
+          case ACTIONS.DISABLE:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              disabled: true
+            });
+            break;
+          default:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              color: getActiveColor(newState),
+              disabled: getDisabledState(newState)
+            });
+        }
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled) {
+          dispatch(pluginKey, nextState);
+          return nextState;
+        }
+        return pluginState;
+      }
+    }
+  });
+}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import Icon from '@atlaskit/icon/base';
+var textColorGlyph = function textColorGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    width: "24",
+    height: "24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export var EditorTextColorIcon = function EditorTextColorIcon() {
+  return /*#__PURE__*/React.createElement(Icon, {
+    glyph: textColorGlyph,
+    label: ""
+  });
+};

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

@@ -0,0 +1,290 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { expandIconWrapperStyle, separatorStyles, triggerWrapperStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { changeColor as changeColorWithAnalytics } from '../../commands/change-color';
+import { EditorTextColorIcon } from './icon';
+import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
+var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
+var EXPERIMENT_GROUP_CONTROL = 'control';
+export var messages = defineMessages({
+  textColor: {
+    id: 'fabric.editor.textColor',
+    defaultMessage: 'Text color',
+    description: ''
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
+  _inherits(ToolbarTextColor, _React$Component);
+  var _super = _createSuper(ToolbarTextColor);
+  function ToolbarTextColor() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isOpen: false,
+      isOpenedByKeyboard: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "changeColor", function (color, editorAnalyticsApi) {
+      return changeColorWithAnalytics(color, editorAnalyticsApi)(_this.props.editorView.state, _this.props.editorView.dispatch);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (attrs) {
+      _this.handleOpenChange({
+        isOpen: attrs.isOpen,
+        logCloseEvent: true,
+        event: attrs.event
+      });
+    });
+    _defineProperty(_assertThisInitialized(_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;
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
+      _this.handleOpenChange({
+        isOpen: !_this.state.isOpen,
+        logCloseEvent: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpenedByKeyboard: true
+        });
+        _this.toggleOpen();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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 ? ACTION.OPENED : 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();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "hide", function (e) {
+      var isOpen = _this.state.isOpen;
+      if (isOpen === true) {
+        _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(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();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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;
+  }
+  _createClass(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 = getSelectedRowAndColumnFromPalette(palette, pluginState.color),
+        selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+        selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        jsx("span", {
+          css: wrapperStyle
+        }, jsx(Dropdown, {
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          isOpen: isOpen && !pluginState.disabled,
+          handleClickOutside: this.hide,
+          handleEscapeKeydown: this.hideonEsc,
+          zIndex: akEditorMenuZIndex,
+          fitWidth: fitWidth,
+          onOpenChange: this.onOpenChange,
+          closeOnTab: true,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.COLOR,
+            selectedRowIndex: selectedRowIndex,
+            selectedColumnIndex: selectedColumnIndex,
+            isOpenedByKeyboard: isOpenedByKeyboard,
+            isPopupPositioned: true
+          },
+          trigger: jsx(ToolbarButton, {
+            buttonId: 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
+            jsx("div", {
+              css: triggerWrapperStyles
+            }, jsx("div", {
+              css: textColorIconWrapper
+            }, jsx(EditorTextColorIcon, null), jsx("div", {
+              css: [
+              // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+              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 && backgroundDisabled]
+            })), jsx("span", {
+              css: expandIconWrapperStyle
+            }, jsx(ExpandIcon, {
+              label: ""
+            })))
+          })
+        }, jsx("div", {
+          "data-testid": "text-color-palette"
+        }, jsx(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: hexToEditorTextPaletteColor,
+            paletteColorTooltipMessages: textPaletteTooltipMessages
+          }
+        }))), jsx("span", {
+          css: separatorStyles
+        }))
+      );
+    }
+  }, {
+    key: "getSelectedColor",
+    value: function getSelectedColor(pluginState) {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? 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: ACTION_SUBJECT.TOOLBAR,
+        actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: _objectSpread(_objectSpread({}, this.getCommonAnalyticsAttributes()), data)
+      };
+    }
+  }, {
+    key: "buildAnalyticsSelectColor",
+    value: function buildAnalyticsSelectColor(data) {
+      return {
+        action: ACTION.FORMATTED,
+        actionSubject: ACTION_SUBJECT.TEXT,
+        actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+        eventType: 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.Component);
+export default injectIntl(ToolbarTextColor);

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

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+import { N40, N60, N80, P300, R400, T300, Y400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+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([P300, T300, Y400, R400]);
+var disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+export var textColorIconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+export var textColorIconBar = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)", borderRadius() + 'px', rainbow);
+export var backgroundDisabled = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), disabledRainbow);

package/dist/esm/utils/color.js

@@ -0,0 +1,48 @@
+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'
+};
+export var 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/esm/utils/disabled.js

@@ -0,0 +1,26 @@
+import { isMarkAllowedInRange, isMarkExcluded } from '@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);
+};
+export var getDisabledState = function getDisabledState(state) {
+  var textColor = state.schema.marks.textColor;
+  if (textColor) {
+    var _ref = state.selection,
+      empty = _ref.empty,
+      ranges = _ref.ranges,
+      $cursor = _ref.$cursor;
+    if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
+      return true;
+    }
+    if (isMarkExcluded(textColor, state.storedMarks || $cursor && $cursor.marks())) {
+      return true;
+    }
+    return false;
+  }
+  return true;
+};

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

@@ -0,0 +1,3 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+export declare const changeColor: (color: string, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;

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

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

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

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

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { textColorPlugin } from './plugin';
+export type { TextColorPlugin } from './types';
+export type { TextColorPluginState, TextColorPluginConfig, } from './pm-plugins/main';

package/dist/types/plugin.d.ts

@@ -0,0 +1,6 @@
+import type { TextColorPluginState } from './pm-plugins/main';
+import { pluginKey as textColorPluginKey } from './pm-plugins/main';
+import type { TextColorPlugin } from './types';
+export declare const textColorPlugin: TextColorPlugin;
+export { textColorPluginKey };
+export type { TextColorPluginState };

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

@@ -0,0 +1,25 @@
+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 type TextColorPluginState = {
+    palette: Array<PaletteColor>;
+    defaultColor: string;
+    disabled?: boolean;
+    color: string | null;
+};
+type TextColorDefaultColor = {
+    color: string;
+    label: string;
+};
+export interface TextColorPluginConfig {
+    defaultColor?: TextColorDefaultColor;
+}
+export declare enum ACTIONS {
+    RESET_COLOR = 0,
+    SET_COLOR = 1,
+    DISABLE = 2
+}
+export declare const pluginKey: PluginKey<TextColorPluginState>;
+export declare function createPlugin(dispatch: Dispatch, pluginConfig?: TextColorPluginConfig): SafePlugin;

package/dist/types/types.d.ts

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

package/dist/types/ui/ToolbarTextColor/icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EditorTextColorIcon: () => JSX.Element;