@atlaskit/editor-core 189.0.10 → 189.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/plugins/index.js +0 -7
  3. package/dist/cjs/presets/universal.js +2 -1
  4. package/dist/cjs/version-wrapper.js +1 -1
  5. package/dist/es2019/plugins/index.js +0 -1
  6. package/dist/es2019/presets/universal.js +2 -1
  7. package/dist/es2019/version-wrapper.js +1 -1
  8. package/dist/esm/plugins/index.js +0 -1
  9. package/dist/esm/presets/universal.js +2 -1
  10. package/dist/esm/version-wrapper.js +1 -1
  11. package/dist/types/plugins/index.d.ts +0 -1
  12. package/dist/types/types/editor-props.d.ts +1 -1
  13. package/dist/types-ts4.5/plugins/index.d.ts +0 -1
  14. package/dist/types-ts4.5/types/editor-props.d.ts +1 -1
  15. package/package.json +5 -4
  16. package/report.api.md +1 -12
  17. package/tmp/api-report-tmp.d.ts +1 -12
  18. package/dist/cjs/plugins/text-color/commands/change-color.js +0 -61
  19. package/dist/cjs/plugins/text-color/commands/remove-color.js +0 -59
  20. package/dist/cjs/plugins/text-color/commands/toggle-color.js +0 -36
  21. package/dist/cjs/plugins/text-color/index.js +0 -75
  22. package/dist/cjs/plugins/text-color/pm-plugins/main.js +0 -88
  23. package/dist/cjs/plugins/text-color/types.js +0 -5
  24. package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/icon.js +0 -29
  25. package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js +0 -285
  26. package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/styles.js +0 -38
  27. package/dist/cjs/plugins/text-color/utils/color.js +0 -54
  28. package/dist/cjs/plugins/text-color/utils/disabled.js +0 -32
  29. package/dist/es2019/plugins/text-color/commands/change-color.js +0 -54
  30. package/dist/es2019/plugins/text-color/commands/remove-color.js +0 -57
  31. package/dist/es2019/plugins/text-color/commands/toggle-color.js +0 -30
  32. package/dist/es2019/plugins/text-color/index.js +0 -63
  33. package/dist/es2019/plugins/text-color/pm-plugins/main.js +0 -75
  34. package/dist/es2019/plugins/text-color/types.js +0 -1
  35. package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/icon.js +0 -20
  36. package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js +0 -265
  37. package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/styles.js +0 -48
  38. package/dist/es2019/plugins/text-color/utils/color.js +0 -48
  39. package/dist/es2019/plugins/text-color/utils/disabled.js +0 -39
  40. package/dist/esm/plugins/text-color/commands/change-color.js +0 -56
  41. package/dist/esm/plugins/text-color/commands/remove-color.js +0 -53
  42. package/dist/esm/plugins/text-color/commands/toggle-color.js +0 -30
  43. package/dist/esm/plugins/text-color/index.js +0 -63
  44. package/dist/esm/plugins/text-color/pm-plugins/main.js +0 -75
  45. package/dist/esm/plugins/text-color/types.js +0 -1
  46. package/dist/esm/plugins/text-color/ui/ToolbarTextColor/icon.js +0 -22
  47. package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js +0 -282
  48. package/dist/esm/plugins/text-color/ui/ToolbarTextColor/styles.js +0 -28
  49. package/dist/esm/plugins/text-color/utils/color.js +0 -48
  50. package/dist/esm/plugins/text-color/utils/disabled.js +0 -26
  51. package/dist/types/plugins/text-color/commands/change-color.d.ts +0 -3
  52. package/dist/types/plugins/text-color/commands/remove-color.d.ts +0 -2
  53. package/dist/types/plugins/text-color/commands/toggle-color.d.ts +0 -2
  54. package/dist/types/plugins/text-color/index.d.ts +0 -7
  55. package/dist/types/plugins/text-color/pm-plugins/main.d.ts +0 -25
  56. package/dist/types/plugins/text-color/types.d.ts +0 -10
  57. package/dist/types/plugins/text-color/ui/ToolbarTextColor/icon.d.ts +0 -2
  58. package/dist/types/plugins/text-color/ui/ToolbarTextColor/index.d.ts +0 -53
  59. package/dist/types/plugins/text-color/ui/ToolbarTextColor/styles.d.ts +0 -3
  60. package/dist/types/plugins/text-color/utils/color.d.ts +0 -6
  61. package/dist/types/plugins/text-color/utils/disabled.d.ts +0 -2
  62. package/dist/types-ts4.5/plugins/text-color/commands/change-color.d.ts +0 -3
  63. package/dist/types-ts4.5/plugins/text-color/commands/remove-color.d.ts +0 -2
  64. package/dist/types-ts4.5/plugins/text-color/commands/toggle-color.d.ts +0 -2
  65. package/dist/types-ts4.5/plugins/text-color/index.d.ts +0 -7
  66. package/dist/types-ts4.5/plugins/text-color/pm-plugins/main.d.ts +0 -25
  67. package/dist/types-ts4.5/plugins/text-color/types.d.ts +0 -12
  68. package/dist/types-ts4.5/plugins/text-color/ui/ToolbarTextColor/icon.d.ts +0 -2
  69. package/dist/types-ts4.5/plugins/text-color/ui/ToolbarTextColor/index.d.ts +0 -53
  70. package/dist/types-ts4.5/plugins/text-color/ui/ToolbarTextColor/styles.d.ts +0 -3
  71. package/dist/types-ts4.5/plugins/text-color/utils/color.d.ts +0 -6
  72. package/dist/types-ts4.5/plugins/text-color/utils/disabled.d.ts +0 -2
@@ -1,75 +0,0 @@
1
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { PluginKey } from '@atlaskit/editor-prosemirror/state';
3
- import { textColorPalette } from '@atlaskit/editor-common/ui-color';
4
- import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
5
- import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
6
- import { getDisabledState } from '../utils/disabled';
7
- export { DEFAULT_COLOR } from '../utils/color';
8
- function createInitialPluginState(editorState, pluginConfig) {
9
- const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
10
- const palette = [{
11
- value: defaultColor.color,
12
- label: defaultColor.label,
13
- border: DEFAULT_BORDER_COLOR
14
- }, ...textColorPalette];
15
- const state = {
16
- color: getActiveColor(editorState),
17
- disabled: getDisabledState(editorState),
18
- palette,
19
- defaultColor: defaultColor.color
20
- };
21
- return state;
22
- }
23
- export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
24
- ACTIONS[ACTIONS["RESET_COLOR"] = 0] = "RESET_COLOR";
25
- ACTIONS[ACTIONS["SET_COLOR"] = 1] = "SET_COLOR";
26
- ACTIONS[ACTIONS["DISABLE"] = 2] = "DISABLE";
27
- return ACTIONS;
28
- }({});
29
- export const pluginKey = new PluginKey('textColorPlugin');
30
- export function createPlugin(dispatch, pluginConfig) {
31
- return new SafePlugin({
32
- key: pluginKey,
33
- state: {
34
- init(_config, editorState) {
35
- return createInitialPluginState(editorState, pluginConfig);
36
- },
37
- apply(tr, pluginState, _, newState) {
38
- const meta = tr.getMeta(pluginKey) || {};
39
- let nextState;
40
- switch (meta.action) {
41
- case ACTIONS.RESET_COLOR:
42
- nextState = {
43
- ...pluginState,
44
- color: pluginState.defaultColor
45
- };
46
- break;
47
- case ACTIONS.SET_COLOR:
48
- nextState = {
49
- ...pluginState,
50
- color: meta.color,
51
- disabled: false
52
- };
53
- break;
54
- case ACTIONS.DISABLE:
55
- nextState = {
56
- ...pluginState,
57
- disabled: true
58
- };
59
- break;
60
- default:
61
- nextState = {
62
- ...pluginState,
63
- color: getActiveColor(newState),
64
- disabled: getDisabledState(newState)
65
- };
66
- }
67
- if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled) {
68
- dispatch(pluginKey, nextState);
69
- return nextState;
70
- }
71
- return pluginState;
72
- }
73
- }
74
- });
75
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,20 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import React from 'react';
3
-
4
- // eslint-disable-next-line @atlassian/tangerine/import/entry-points
5
- import Icon from '@atlaskit/icon/base';
6
- const textColorGlyph = props => /*#__PURE__*/React.createElement("svg", _extends({}, props, {
7
- width: "24",
8
- height: "24",
9
- xmlns: "http://www.w3.org/2000/svg"
10
- }), /*#__PURE__*/React.createElement("path", {
11
- 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",
12
- fill: "currentColor",
13
- fillRule: "evenodd"
14
- }));
15
- export const EditorTextColorIcon = () => {
16
- return /*#__PURE__*/React.createElement(Icon, {
17
- glyph: textColorGlyph,
18
- label: ""
19
- });
20
- };
@@ -1,265 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- /** @jsx jsx */
3
- import React from 'react';
4
- import { jsx } from '@emotion/react';
5
- import { defineMessages, injectIntl } from 'react-intl-next';
6
- import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
7
- import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
8
- import { ColorPalette, textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
9
- import { wrapperStyle, separatorStyles, triggerWrapperStyles } from '@atlaskit/editor-common/styles';
10
- import { DropdownContainer as Dropdown, ToolbarButton, TOOLBAR_BUTTON } from '@atlaskit/editor-common/ui-menu';
11
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
12
- import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
13
- import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
14
- import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
15
- import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
16
- import { changeColor as changeColorWithAnalytics } from '../../commands/change-color';
17
- import { EditorTextColorIcon } from './icon';
18
- import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
19
- const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
20
- const EXPERIMENT_GROUP_CONTROL = 'control';
21
- export const messages = defineMessages({
22
- textColor: {
23
- id: 'fabric.editor.textColor',
24
- defaultMessage: 'Text color',
25
- description: ''
26
- }
27
- });
28
- export class ToolbarTextColor extends React.Component {
29
- constructor(...args) {
30
- super(...args);
31
- _defineProperty(this, "state", {
32
- isOpen: false,
33
- isOpenedByKeyboard: false
34
- });
35
- _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
36
- _defineProperty(this, "changeColor", (color, editorAnalyticsApi) => changeColorWithAnalytics(color, editorAnalyticsApi)(this.props.editorView.state, this.props.editorView.dispatch));
37
- _defineProperty(this, "onOpenChange", attrs => {
38
- this.handleOpenChange({
39
- isOpen: attrs.isOpen,
40
- logCloseEvent: true,
41
- event: attrs.event
42
- });
43
- });
44
- _defineProperty(this, "changeTextColor", (color, editorAnalyticsApi, disabled) => {
45
- if (!disabled) {
46
- var _this$props$editorVie;
47
- const {
48
- pluginState: {
49
- palette
50
- }
51
- } = this.props;
52
-
53
- // we store color names in analytics
54
- const swatch = palette.find(sw => sw.value === color);
55
- this.dispatchAnalyticsEvent(this.buildAnalyticsSelectColor({
56
- color: (swatch ? swatch.label : color).toLowerCase()
57
- }));
58
- this.handleOpenChange({
59
- isOpen: false,
60
- logCloseEvent: false
61
- });
62
- this.changeColor(color, editorAnalyticsApi);
63
- //To set the focus on the textcolor button when the menu is closed by 'Esc' only to meet aria guidelines
64
- (_this$props$editorVie = this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
65
- }
66
- return false;
67
- });
68
- _defineProperty(this, "toggleOpen", () => {
69
- this.handleOpenChange({
70
- isOpen: !this.state.isOpen,
71
- logCloseEvent: true
72
- });
73
- });
74
- _defineProperty(this, "onKeyDown", event => {
75
- if (event.key === 'Enter' || event.key === ' ') {
76
- event.preventDefault();
77
- this.setState({
78
- isOpenedByKeyboard: true
79
- });
80
- this.toggleOpen();
81
- }
82
- });
83
- _defineProperty(this, "handleOpenChange", ({
84
- isOpen,
85
- logCloseEvent,
86
- event
87
- }) => {
88
- this.setState({
89
- isOpen
90
- });
91
- if (!isOpen) {
92
- this.setState({
93
- isOpenedByKeyboard: false
94
- });
95
- }
96
- if (logCloseEvent) {
97
- this.dispatchAnalyticsEvent(this.buildAnalyticsPalette(isOpen ? ACTION.OPENED : ACTION.CLOSED, {
98
- noSelect: isOpen === false
99
- }));
100
- }
101
- if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
102
- var _this$toolbarItemRef, _this$toolbarItemRef$;
103
- (_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();
104
- }
105
- });
106
- _defineProperty(this, "hide", e => {
107
- const {
108
- isOpen
109
- } = this.state;
110
- if (isOpen === true) {
111
- this.dispatchAnalyticsEvent(this.buildAnalyticsPalette(ACTION.CLOSED, {
112
- noSelect: true
113
- }));
114
- this.setState({
115
- isOpen: false
116
- });
117
- if (e instanceof KeyboardEvent && e.key === 'Escape') {
118
- var _this$toolbarItemRef2, _this$toolbarItemRef3;
119
- (_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();
120
- }
121
- }
122
- });
123
- _defineProperty(this, "hideonEsc", e => {
124
- var _this$toolbarItemRef4, _this$toolbarItemRef5;
125
- this.hide(e);
126
- (_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();
127
- });
128
- }
129
- render() {
130
- const {
131
- isOpen,
132
- isOpenedByKeyboard
133
- } = this.state;
134
- const {
135
- popupsMountPoint,
136
- popupsBoundariesElement,
137
- popupsScrollableElement,
138
- isReducedSpacing,
139
- pluginState,
140
- intl: {
141
- formatMessage
142
- },
143
- disabled,
144
- pluginInjectionApi
145
- } = this.props;
146
- const labelTextColor = formatMessage(messages.textColor);
147
- const palette = pluginState.palette;
148
- let fitWidth;
149
- if (document.body.clientWidth <= 740) {
150
- // This was originally hard-coded, but moved here to a const
151
- // My guess is it's based off (width of button * columns) + left/right padding
152
- // 240 = (32 * 7) + (8 + 8)
153
- // Not sure where the extra 2px comes from
154
- fitWidth = 242;
155
- }
156
- const selectedColor = this.getSelectedColor(pluginState);
157
- const {
158
- selectedRowIndex,
159
- selectedColumnIndex
160
- } = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
161
- return jsx("span", {
162
- css: wrapperStyle
163
- }, jsx(Dropdown, {
164
- mountTo: popupsMountPoint,
165
- boundariesElement: popupsBoundariesElement,
166
- scrollableElement: popupsScrollableElement,
167
- isOpen: isOpen && !pluginState.disabled,
168
- handleClickOutside: this.hide,
169
- handleEscapeKeydown: this.hideonEsc,
170
- zIndex: akEditorMenuZIndex,
171
- fitWidth: fitWidth,
172
- onOpenChange: this.onOpenChange,
173
- closeOnTab: true,
174
- arrowKeyNavigationProviderOptions: {
175
- type: ArrowKeyNavigationType.COLOR,
176
- selectedRowIndex,
177
- selectedColumnIndex,
178
- isOpenedByKeyboard,
179
- isPopupPositioned: true
180
- },
181
- trigger: jsx(ToolbarButton, {
182
- buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
183
- spacing: isReducedSpacing ? 'none' : 'default',
184
- disabled: disabled || pluginState.disabled,
185
- selected: isOpen,
186
- "aria-label": labelTextColor,
187
- "aria-expanded": isOpen,
188
- "aria-haspopup": true,
189
- title: labelTextColor,
190
- onClick: this.toggleOpen,
191
- onKeyDown: this.onKeyDown,
192
- ref: this.toolbarItemRef,
193
- iconBefore: jsx("div", {
194
- css: triggerWrapperStyles
195
- }, jsx("div", {
196
- css: textColorIconWrapper
197
- }, jsx(EditorTextColorIcon, null), jsx("div", {
198
- css: [textColorIconBar, selectedColor ? `background: ${selectedColor};` : pluginState.disabled && backgroundDisabled]
199
- })), jsx("span", {
200
- css: expandIconWrapperStyle
201
- }, jsx(ExpandIcon, {
202
- label: ""
203
- })))
204
- })
205
- }, jsx("div", {
206
- "data-testid": "text-color-palette"
207
- }, jsx(ColorPalette, {
208
- onClick: color => {
209
- var _pluginInjectionApi$a;
210
- 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);
211
- },
212
- selectedColor: pluginState.color,
213
- paletteOptions: {
214
- palette,
215
- hexToPaletteColor: hexToEditorTextPaletteColor,
216
- paletteColorTooltipMessages: textPaletteTooltipMessages
217
- }
218
- }))), jsx("span", {
219
- css: separatorStyles
220
- }));
221
- }
222
- getSelectedColor(pluginState) {
223
- const selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? hexToEditorTextPaletteColor(pluginState.color) : pluginState.color);
224
- return selectedColor;
225
- }
226
- getCommonAnalyticsAttributes() {
227
- return {
228
- experiment: EXPERIMENT_NAME,
229
- experimentGroup: EXPERIMENT_GROUP_CONTROL
230
- };
231
- }
232
- buildAnalyticsPalette(action, data) {
233
- return {
234
- action,
235
- actionSubject: ACTION_SUBJECT.TOOLBAR,
236
- actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
237
- eventType: EVENT_TYPE.TRACK,
238
- attributes: {
239
- ...this.getCommonAnalyticsAttributes(),
240
- ...data
241
- }
242
- };
243
- }
244
- buildAnalyticsSelectColor(data) {
245
- return {
246
- action: ACTION.FORMATTED,
247
- actionSubject: ACTION_SUBJECT.TEXT,
248
- actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
249
- eventType: EVENT_TYPE.TRACK,
250
- attributes: {
251
- ...this.getCommonAnalyticsAttributes(),
252
- ...data
253
- }
254
- };
255
- }
256
- dispatchAnalyticsEvent(payload) {
257
- const {
258
- dispatchAnalyticsEvent
259
- } = this.props;
260
- if (dispatchAnalyticsEvent) {
261
- dispatchAnalyticsEvent(payload);
262
- }
263
- }
264
- }
265
- export default injectIntl(ToolbarTextColor);
@@ -1,48 +0,0 @@
1
- import { css } from '@emotion/react';
2
- import { borderRadius } from '@atlaskit/theme/constants';
3
- import * as colors from '@atlaskit/theme/colors';
4
- const createSteppedRainbow = colors => {
5
- return `
6
- linear-gradient(
7
- to right,
8
- ${colors.map((color, i) => {
9
- const inc = 100 / colors.length;
10
- const pos = i + 1;
11
- if (i === 0) {
12
- return `${color} ${pos * inc}%,`;
13
- }
14
- if (i === colors.length - 1) {
15
- return `${color} ${(pos - 1) * inc}%`;
16
- }
17
- return `
18
- ${color} ${(pos - 1) * inc}%,
19
- ${color} ${pos * inc}%,
20
- `;
21
- }).join('\n')}
22
- );
23
- `;
24
- };
25
-
26
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
27
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
28
- const rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
29
- const disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
30
- /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
31
-
32
- export const textColorIconWrapper = css`
33
- position: relative;
34
- `;
35
- export const textColorIconBar = css`
36
- position: absolute;
37
- left: 0;
38
- right: 0;
39
- top: 16px;
40
- margin: auto;
41
- width: 12px;
42
- height: 3px;
43
- border-radius: ${borderRadius() + 'px'};
44
- background: ${rainbow};
45
- `;
46
- export const backgroundDisabled = css`
47
- background: ${disabledRainbow};
48
- `;
@@ -1,48 +0,0 @@
1
- import { N800 } from '@atlaskit/theme/colors';
2
- export const DEFAULT_COLOR = {
3
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
4
- /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
5
- color: N800.toLowerCase(),
6
- label: 'Dark gray'
7
- };
8
- export const getActiveColor = state => {
9
- const {
10
- $from,
11
- $to,
12
- $cursor
13
- } = state.selection;
14
- const {
15
- textColor
16
- } = state.schema.marks;
17
-
18
- // Filter out other marks
19
- let marks = [];
20
- if ($cursor) {
21
- marks.push(textColor.isInSet(state.storedMarks || $cursor.marks()) || undefined);
22
- } else {
23
- state.doc.nodesBetween($from.pos, $to.pos, currentNode => {
24
- if (currentNode.isLeaf) {
25
- const mark = textColor.isInSet(currentNode.marks) || undefined;
26
- marks.push(mark);
27
- return !mark;
28
- }
29
- return true;
30
- });
31
- }
32
-
33
- // Merge consecutive same color marks
34
- let prevMark;
35
- marks = marks.filter(mark => {
36
- if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
37
- return false;
38
- }
39
- prevMark = mark;
40
- return true;
41
- });
42
- const marksWithColor = marks.filter(mark => !!mark);
43
- // When multiple colors are selected revert back to default color
44
- if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
45
- return null;
46
- }
47
- return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
48
- };
@@ -1,39 +0,0 @@
1
- import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
2
- const hasLinkMark = $pos => {
3
- const {
4
- doc: {
5
- type: {
6
- schema: {
7
- marks: {
8
- link: linkMarkType
9
- }
10
- }
11
- }
12
- },
13
- pos
14
- } = $pos;
15
- if (!linkMarkType) {
16
- return false;
17
- }
18
- return $pos.doc.rangeHasMark(pos, Math.min(pos + 1, $pos.doc.content.size), linkMarkType);
19
- };
20
- export const getDisabledState = state => {
21
- const {
22
- textColor
23
- } = state.schema.marks;
24
- if (textColor) {
25
- const {
26
- empty,
27
- ranges,
28
- $cursor
29
- } = state.selection;
30
- if (empty && !$cursor || $cursor && hasLinkMark($cursor) || isMarkAllowedInRange(state.doc, ranges, textColor) === false) {
31
- return true;
32
- }
33
- if (isMarkExcluded(textColor, state.storedMarks || $cursor && $cursor.marks())) {
34
- return true;
35
- }
36
- return false;
37
- }
38
- return true;
39
- };
@@ -1,56 +0,0 @@
1
- import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
- import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
3
- import { pluginKey } from '../pm-plugins/main';
4
- import { getActiveColor } from '../utils/color';
5
- import { removeColor } from './remove-color';
6
- import { toggleColor } from './toggle-color';
7
-
8
- /**
9
- * Helper to create a higher order analytics command
10
- * @param newColor - Color to be change in hex code
11
- * @param previousColor - Active color in hex code
12
- * @param palette - Current palette of colors
13
- * @return Higher order command with analytics logic inside.
14
- */
15
- function createWithColorAnalytics(newColor, previousColor, palette, editorAnalyticsApi) {
16
- var newColorFromPalette = palette.find(function (_ref) {
17
- var value = _ref.value;
18
- return value === newColor;
19
- });
20
- var previousColorFromPalette = palette.find(function (_ref2) {
21
- var value = _ref2.value;
22
- return value === previousColor;
23
- });
24
- var newColorLabel = newColorFromPalette ? newColorFromPalette.label : newColor;
25
- var previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
26
- return withAnalytics(editorAnalyticsApi, {
27
- action: ACTION.FORMATTED,
28
- actionSubject: ACTION_SUBJECT.TEXT,
29
- actionSubjectId: ACTION_SUBJECT_ID.FORMAT_COLOR,
30
- eventType: EVENT_TYPE.TRACK,
31
- attributes: {
32
- newColor: newColorLabel.toLowerCase(),
33
- previousColor: previousColorLabel.toLowerCase()
34
- }
35
- });
36
- }
37
- export var changeColor = function changeColor(color, editorAnalyticsApi) {
38
- return function (state, dispatch) {
39
- var textColor = state.schema.marks.textColor;
40
- if (textColor) {
41
- var pluginState = pluginKey.getState(state);
42
- var activeColor = getActiveColor(state);
43
- var withColorAnalytics = createWithColorAnalytics(color, activeColor, (pluginState === null || pluginState === void 0 ? void 0 : pluginState.palette) || [], editorAnalyticsApi);
44
- if (pluginState !== null && pluginState !== void 0 && pluginState.disabled) {
45
- return false;
46
- }
47
- if (color === (pluginState === null || pluginState === void 0 ? void 0 : pluginState.defaultColor)) {
48
- withColorAnalytics(removeColor())(state, dispatch);
49
- return true;
50
- }
51
- withColorAnalytics(toggleColor(color))(state, dispatch);
52
- return true;
53
- }
54
- return false;
55
- };
56
- };
@@ -1,53 +0,0 @@
1
- import { TextSelection } from '@atlaskit/editor-prosemirror/state';
2
- import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
3
- import { ACTIONS, pluginKey } from '../pm-plugins/main';
4
- export var removeColor = function removeColor() {
5
- return function (state, dispatch) {
6
- var schema = state.schema,
7
- selection = state.selection;
8
- var textColor = schema.marks.textColor;
9
- var tr = state.tr;
10
- if (selection instanceof TextSelection) {
11
- var from = selection.from,
12
- to = selection.to,
13
- $cursor = selection.$cursor;
14
- if ($cursor) {
15
- tr = state.tr.removeStoredMark(textColor);
16
- } else {
17
- tr = state.tr.removeMark(from, to, textColor);
18
- }
19
- }
20
- if (selection instanceof CellSelection) {
21
- /**
22
- * This is a slight abstraction from `src/utils/commands.ts`
23
- * The main difference is we can't toggle the default from another (since they are different marks),
24
- * we want to remove all text color marks on the selection, so we slightly modify the cell selection
25
- * part here.
26
- */
27
- selection.forEachCell(function (cell, cellPos) {
28
- var from = cellPos;
29
- var to = cellPos + cell.nodeSize;
30
- tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), function (node, pos) {
31
- if (!node.isText) {
32
- return true;
33
- }
34
-
35
- // This is an issue when the user selects some text.
36
- // We need to check if the current node position is less than the range selection from.
37
- // If it’s true, that means we should apply the mark using the range selection,
38
- // not the current node position.
39
- var nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
40
- var nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to));
41
- tr.removeMark(nodeBetweenFrom, nodeBetweenTo, textColor);
42
- return true;
43
- });
44
- });
45
- }
46
- if (dispatch) {
47
- dispatch(tr.setMeta(pluginKey, {
48
- action: ACTIONS.RESET_COLOR
49
- }));
50
- }
51
- return true;
52
- };
53
- };
@@ -1,30 +0,0 @@
1
- import { toggleMark } from '@atlaskit/editor-common/mark';
2
- import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
3
- import { ACTIONS, pluginKey } from '../pm-plugins/main';
4
- import { getDisabledState } from '../utils/disabled';
5
- export var toggleColor = function toggleColor(color) {
6
- return function (state, dispatch) {
7
- var textColor = state.schema.marks.textColor;
8
- var tr = state.tr;
9
- var disabledState = getDisabledState(state);
10
- if (disabledState) {
11
- if (dispatch) {
12
- dispatch(tr.setMeta(pluginKey, {
13
- action: ACTIONS.DISABLE
14
- }));
15
- }
16
- return false;
17
- }
18
- if (dispatch) {
19
- state.tr.setMeta(pluginKey, {
20
- action: ACTIONS.SET_COLOR,
21
- color: color
22
- });
23
- state.tr.scrollIntoView();
24
- editorCommandToPMCommand(toggleMark(textColor, {
25
- color: color
26
- }))(state, dispatch);
27
- }
28
- return true;
29
- };
30
- };