@atlaskit/editor-plugin-text-color 0.1.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-text-color

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin text color
+
+Text color plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-text-color*
+- **npm** - [@atlaskit/editor-plugin-text-color](https://www.npmjs.com/package/@atlaskit/editor-plugin-text-color)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-text-color)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-text-color/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-text-color is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin text color](https://atlaskit.atlassian.com/packages/editor/editor-plugin-text-color) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeColor = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _main = require("../pm-plugins/main");
+var _color = require("../utils/color");
+var _removeColor = require("./remove-color");
+var _toggleColor = require("./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 (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, {
+    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()
+    }
+  });
+}
+var changeColor = exports.changeColor = function changeColor(color, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var textColor = state.schema.marks.textColor;
+    if (textColor) {
+      var pluginState = _main.pluginKey.getState(state);
+      var activeColor = (0, _color.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((0, _removeColor.removeColor)())(state, dispatch);
+        return true;
+      }
+      withColorAnalytics((0, _toggleColor.toggleColor)(color))(state, dispatch);
+      return true;
+    }
+    return false;
+  };
+};

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeColor = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _main = require("../pm-plugins/main");
+var removeColor = exports.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 _state.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.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(_main.pluginKey, {
+        action: _main.ACTIONS.RESET_COLOR
+      }));
+    }
+    return true;
+  };
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleColor = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var _preset = require("@atlaskit/editor-common/preset");
+var _main = require("../pm-plugins/main");
+var _disabled = require("../utils/disabled");
+var toggleColor = exports.toggleColor = function toggleColor(color) {
+  return function (state, dispatch) {
+    var textColor = state.schema.marks.textColor;
+    var tr = state.tr;
+    var disabledState = (0, _disabled.getDisabledState)(state);
+    if (disabledState) {
+      if (dispatch) {
+        dispatch(tr.setMeta(_main.pluginKey, {
+          action: _main.ACTIONS.DISABLE
+        }));
+      }
+      return false;
+    }
+    if (dispatch) {
+      state.tr.setMeta(_main.pluginKey, {
+        action: _main.ACTIONS.SET_COLOR,
+        color: color
+      });
+      state.tr.scrollIntoView();
+      (0, _preset.editorCommandToPMCommand)((0, _mark.toggleMark)(textColor, {
+        color: color
+      }))(state, dispatch);
+    }
+    return true;
+  };
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "textColorPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.textColorPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColorPlugin = void 0;
+Object.defineProperty(exports, "textColorPluginKey", {
+  enumerable: true,
+  get: function get() {
+    return _main.pluginKey;
+  }
+});
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _changeColor2 = require("./commands/change-color");
+var _main = require("./pm-plugins/main");
+var _ToolbarTextColor = _interopRequireDefault(require("./ui/ToolbarTextColor"));
+var pluginConfig = function pluginConfig(textColorConfig) {
+  if (!textColorConfig || typeof textColorConfig === 'boolean') {
+    return undefined;
+  }
+  return textColorConfig;
+};
+var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
+  var textColorConfig = _ref.config,
+    api = _ref.api;
+  return {
+    name: 'textColor',
+    marks: function marks() {
+      return [{
+        name: 'textColor',
+        mark: _adfSchema.textColor
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'textColor',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch;
+          return (0, _main.createPlugin)(dispatch, pluginConfig(textColorConfig));
+        }
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return _main.pluginKey.getState(editorState);
+    },
+    actions: {
+      changeColor: function changeColor(color) {
+        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);
+      }
+    },
+    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.default.createElement(_withPluginState.WithPluginState, {
+        plugins: {
+          textColor: _main.pluginKey
+        },
+        render: function render(_ref4) {
+          var textColor = _ref4.textColor;
+          return /*#__PURE__*/_react.default.createElement(_ToolbarTextColor.default, {
+            pluginState: textColor,
+            isReducedSpacing: isToolbarReducedSpacing,
+            editorView: editorView,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            disabled: disabled,
+            pluginInjectionApi: api
+          });
+        }
+      });
+    }
+  };
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ACTIONS = void 0;
+Object.defineProperty(exports, "DEFAULT_COLOR", {
+  enumerable: true,
+  get: function get() {
+    return _color.DEFAULT_COLOR;
+  }
+});
+exports.createPlugin = createPlugin;
+exports.pluginKey = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _color = require("../utils/color");
+var _disabled = require("../utils/disabled");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function createInitialPluginState(editorState, pluginConfig) {
+  var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || _color.DEFAULT_COLOR;
+  var palette = [{
+    value: defaultColor.color,
+    label: defaultColor.label,
+    border: _uiColor.DEFAULT_BORDER_COLOR
+  }].concat((0, _toConsumableArray2.default)(_uiColor.textColorPalette));
+  var state = {
+    color: (0, _color.getActiveColor)(editorState),
+    disabled: (0, _disabled.getDisabledState)(editorState),
+    palette: palette,
+    defaultColor: defaultColor.color
+  };
+  return state;
+}
+var ACTIONS = exports.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;
+}({});
+var pluginKey = exports.pluginKey = new _state.PluginKey('textColorPlugin');
+function createPlugin(dispatch, pluginConfig) {
+  return new _safePlugin.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: (0, _color.getActiveColor)(newState),
+              disabled: (0, _disabled.getDisabledState)(newState)
+            });
+        }
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled) {
+          dispatch(pluginKey, nextState);
+          return nextState;
+        }
+        return pluginState;
+      }
+    }
+  });
+}

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorTextColorIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _base = _interopRequireDefault(require("@atlaskit/icon/base"));
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+var textColorGlyph = function textColorGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, props, {
+    width: "24",
+    height: "24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/_react.default.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"
+  }));
+};
+var EditorTextColorIcon = exports.EditorTextColorIcon = function EditorTextColorIcon() {
+  return /*#__PURE__*/_react.default.createElement(_base.default, {
+    glyph: textColorGlyph,
+    label: ""
+  });
+};