@atlaskit/editor-plugin-text-color 0.1.0

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

@@ -0,0 +1,74 @@
+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) {
+  const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
+  const palette = [{
+    value: defaultColor.color,
+    label: defaultColor.label,
+    border: DEFAULT_BORDER_COLOR
+  }, ...textColorPalette];
+  const state = {
+    color: getActiveColor(editorState),
+    disabled: getDisabledState(editorState),
+    palette,
+    defaultColor: defaultColor.color
+  };
+  return state;
+}
+export let 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 const pluginKey = new PluginKey('textColorPlugin');
+export function createPlugin(dispatch, pluginConfig) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init(_config, editorState) {
+        return createInitialPluginState(editorState, pluginConfig);
+      },
+      apply(tr, pluginState, _, newState) {
+        const meta = tr.getMeta(pluginKey) || {};
+        let nextState;
+        switch (meta.action) {
+          case ACTIONS.RESET_COLOR:
+            nextState = {
+              ...pluginState,
+              color: pluginState.defaultColor
+            };
+            break;
+          case ACTIONS.SET_COLOR:
+            nextState = {
+              ...pluginState,
+              color: meta.color,
+              disabled: false
+            };
+            break;
+          case ACTIONS.DISABLE:
+            nextState = {
+              ...pluginState,
+              disabled: true
+            };
+            break;
+          default:
+            nextState = {
+              ...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/es2019/types.js

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

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

@@ -0,0 +1,20 @@
+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';
+const textColorGlyph = props => /*#__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 const EditorTextColorIcon = () => {
+  return /*#__PURE__*/React.createElement(Icon, {
+    glyph: textColorGlyph,
+    label: ""
+  });
+};

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

@@ -0,0 +1,274 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @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';
+const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
+const EXPERIMENT_GROUP_CONTROL = 'control';
+export const messages = defineMessages({
+  textColor: {
+    id: 'fabric.editor.textColor',
+    defaultMessage: 'Text color',
+    description: ''
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class ToolbarTextColor extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      isOpen: false,
+      isOpenedByKeyboard: false
+    });
+    _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "changeColor", (color, editorAnalyticsApi) => changeColorWithAnalytics(color, editorAnalyticsApi)(this.props.editorView.state, this.props.editorView.dispatch));
+    _defineProperty(this, "onOpenChange", attrs => {
+      this.handleOpenChange({
+        isOpen: attrs.isOpen,
+        logCloseEvent: true,
+        event: attrs.event
+      });
+    });
+    _defineProperty(this, "changeTextColor", (color, editorAnalyticsApi, disabled) => {
+      if (!disabled) {
+        var _this$props$editorVie;
+        const {
+          pluginState: {
+            palette
+          }
+        } = this.props;
+
+        // we store color names in analytics
+        const swatch = palette.find(sw => 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 ? void 0 : _this$props$editorVie.focus();
+      }
+      return false;
+    });
+    _defineProperty(this, "toggleOpen", () => {
+      this.handleOpenChange({
+        isOpen: !this.state.isOpen,
+        logCloseEvent: true
+      });
+    });
+    _defineProperty(this, "onKeyDown", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpenedByKeyboard: true
+        });
+        this.toggleOpen();
+      }
+    });
+    _defineProperty(this, "handleOpenChange", ({
+      isOpen,
+      logCloseEvent,
+      event
+    }) => {
+      this.setState({
+        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 = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
+      }
+    });
+    _defineProperty(this, "hide", e => {
+      const {
+        isOpen
+      } = this.state;
+      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$toolbarItemRef3;
+          (_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
+        }
+      }
+    });
+    _defineProperty(this, "hideonEsc", e => {
+      var _this$toolbarItemRef4, _this$toolbarItemRef5;
+      this.hide(e);
+      (_this$toolbarItemRef4 = this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
+    });
+  }
+  render() {
+    const {
+      isOpen,
+      isOpenedByKeyboard
+    } = this.state;
+    const {
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      isReducedSpacing,
+      pluginState,
+      intl: {
+        formatMessage
+      },
+      disabled,
+      pluginInjectionApi
+    } = this.props;
+    const labelTextColor = formatMessage(messages.textColor);
+    const palette = pluginState.palette;
+    let 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;
+    }
+    const selectedColor = this.getSelectedColor(pluginState);
+    const {
+      selectedRowIndex,
+      selectedColumnIndex
+    } = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
+    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,
+          selectedColumnIndex,
+          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: ${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: color => {
+          var _pluginInjectionApi$a;
+          return this.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);
+        },
+        selectedColor: pluginState.color,
+        paletteOptions: {
+          palette,
+          hexToPaletteColor: hexToEditorTextPaletteColor,
+          paletteColorTooltipMessages: textPaletteTooltipMessages
+        }
+      }))), jsx("span", {
+        css: separatorStyles
+      }))
+    );
+  }
+  getSelectedColor(pluginState) {
+    const selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? hexToEditorTextPaletteColor(pluginState.color) : pluginState.color);
+    return selectedColor;
+  }
+  getCommonAnalyticsAttributes() {
+    return {
+      experiment: EXPERIMENT_NAME,
+      experimentGroup: EXPERIMENT_GROUP_CONTROL
+    };
+  }
+  buildAnalyticsPalette(action, data) {
+    return {
+      action,
+      actionSubject: ACTION_SUBJECT.TOOLBAR,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        ...this.getCommonAnalyticsAttributes(),
+        ...data
+      }
+    };
+  }
+  buildAnalyticsSelectColor(data) {
+    return {
+      action: ACTION.FORMATTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        ...this.getCommonAnalyticsAttributes(),
+        ...data
+      }
+    };
+  }
+  dispatchAnalyticsEvent(payload) {
+    const {
+      dispatchAnalyticsEvent
+    } = this.props;
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+}
+export default injectIntl(ToolbarTextColor);

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

@@ -0,0 +1,48 @@
+import { css } from '@emotion/react';
+import { N40, N60, N80, P300, R400, T300, Y400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+const createSteppedRainbow = colors => {
+  return `
+    linear-gradient(
+      to right,
+      ${colors.map((color, i) => {
+    const inc = 100 / colors.length;
+    const pos = i + 1;
+    if (i === 0) {
+      return `${color} ${pos * inc}%,`;
+    }
+    if (i === colors.length - 1) {
+      return `${color} ${(pos - 1) * inc}%`;
+    }
+    return `
+            ${color} ${(pos - 1) * inc}%,
+            ${color} ${pos * inc}%,
+          `;
+  }).join('\n')}
+    );
+    `;
+};
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+const rainbow = createSteppedRainbow([P300, T300, Y400, R400]);
+const disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+export const textColorIconWrapper = css`
+  position: relative;
+`;
+export const textColorIconBar = css`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: ${"var(--ds-space-200, 16px)"};
+  margin: auto;
+  width: 12px;
+  height: 3px;
+  border-radius: ${borderRadius() + 'px'};
+  background: ${rainbow};
+`;
+export const backgroundDisabled = css`
+  background: ${disabledRainbow};
+`;

package/dist/es2019/utils/color.js

@@ -0,0 +1,48 @@
+import { N800 } from '@atlaskit/theme/colors';
+export const DEFAULT_COLOR = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
+  color: N800.toLowerCase(),
+  label: 'Dark gray'
+};
+export const getActiveColor = state => {
+  const {
+    $from,
+    $to,
+    $cursor
+  } = state.selection;
+  const {
+    textColor
+  } = state.schema.marks;
+
+  // Filter out other marks
+  let marks = [];
+  if ($cursor) {
+    marks.push(textColor.isInSet(state.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    state.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 => {
+    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;
+};

package/dist/es2019/utils/disabled.js

@@ -0,0 +1,39 @@
+import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+const hasLinkMark = $pos => {
+  const {
+    doc: {
+      type: {
+        schema: {
+          marks: {
+            link: linkMarkType
+          }
+        }
+      }
+    },
+    pos
+  } = $pos;
+  if (!linkMarkType) {
+    return false;
+  }
+  return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
+};
+export const getDisabledState = state => {
+  const {
+    textColor
+  } = state.schema.marks;
+  if (textColor) {
+    const {
+      empty,
+      ranges,
+      $cursor
+    } = state.selection;
+    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/esm/commands/change-color.js

@@ -0,0 +1,56 @@
+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) {
+  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 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 var changeColor = function changeColor(color, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var textColor = state.schema.marks.textColor;
+    if (textColor) {
+      var pluginState = pluginKey.getState(state);
+      var activeColor = getActiveColor(state);
+      var 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/esm/commands/remove-color.js

@@ -0,0 +1,53 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { ACTIONS, pluginKey } from '../pm-plugins/main';
+export var removeColor = function removeColor() {
+  return function (state, dispatch) {
+    var schema = state.schema,
+      selection = state.selection;
+    var textColor = schema.marks.textColor;
+    var tr = state.tr;
+    if (selection instanceof TextSelection) {
+      var from = selection.from,
+        to = selection.to,
+        $cursor = selection.$cursor;
+      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(function (cell, cellPos) {
+        var from = cellPos;
+        var to = cellPos + cell.nodeSize;
+        tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), function (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.
+          var nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
+          var 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/esm/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 var toggleColor = function toggleColor(color) {
+  return function (state, dispatch) {
+    var textColor = state.schema.marks.textColor;
+    var tr = state.tr;
+    var 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: color
+      });
+      state.tr.scrollIntoView();
+      editorCommandToPMCommand(toggleMark(textColor, {
+        color: color
+      }))(state, dispatch);
+    }
+    return true;
+  };
+};

package/dist/esm/index.js

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