@atlaskit/editor-plugin-highlight 11.0.16 → 11.1.0
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.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/editor-commands/change-color.js +0 -11
- package/dist/cjs/pm-plugins/main.js +1 -2
- package/dist/cjs/ui/HighlightColorMenuItem.js +19 -5
- package/dist/es2019/editor-commands/change-color.js +1 -14
- package/dist/es2019/pm-plugins/main.js +0 -1
- package/dist/es2019/ui/HighlightColorMenuItem.js +22 -7
- package/dist/esm/editor-commands/change-color.js +1 -12
- package/dist/esm/pm-plugins/main.js +0 -1
- package/dist/esm/ui/HighlightColorMenuItem.js +21 -7
- package/dist/types/pm-plugins/main.d.ts +0 -1
- package/highlightPlugin/package.json +1 -8
- package/highlightPluginType/package.json +1 -8
- package/main/package.json +1 -8
- package/package.json +3 -3
- package/dist/types-ts4.5/editor-commands/change-color.d.ts +0 -6
- package/dist/types-ts4.5/editor-commands/color.d.ts +0 -2
- package/dist/types-ts4.5/editor-commands/disabled.d.ts +0 -2
- package/dist/types-ts4.5/editor-commands/palette.d.ts +0 -10
- package/dist/types-ts4.5/entry-points/highlightPlugin.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/highlightPluginType.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/main.d.ts +0 -1
- package/dist/types-ts4.5/highlightPlugin.d.ts +0 -2
- package/dist/types-ts4.5/highlightPluginType.d.ts +0 -26
- package/dist/types-ts4.5/index.d.ts +0 -3
- package/dist/types-ts4.5/pm-plugins/highlight-padding/add-padding-decorations.d.ts +0 -14
- package/dist/types-ts4.5/pm-plugins/highlight-padding/index.d.ts +0 -16
- package/dist/types-ts4.5/pm-plugins/highlight-padding/update-padding-decorations.d.ts +0 -13
- package/dist/types-ts4.5/pm-plugins/highlight-padding/utils.d.ts +0 -14
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +0 -6
- package/dist/types-ts4.5/pm-plugins/main.d.ts +0 -18
- package/dist/types-ts4.5/ui/FloatingToolbarHighlightColor.d.ts +0 -15
- package/dist/types-ts4.5/ui/HighlightColorMenuItem.d.ts +0 -13
- package/dist/types-ts4.5/ui/PrimaryToolbarHighlightColor.d.ts +0 -18
- package/dist/types-ts4.5/ui/shared/EditorHighlightIcon.d.ts +0 -7
- package/dist/types-ts4.5/ui/shared/PaletteDropdown.d.ts +0 -14
- package/dist/types-ts4.5/ui/shared/useDropdownEvents.d.ts +0 -22
- package/dist/types-ts4.5/ui/toolbar-component.d.ts +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-highlight
|
|
2
2
|
|
|
3
|
+
## 11.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`b26d59f2d7dbf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b26d59f2d7dbf) -
|
|
8
|
+
[ux] [EDITOR-7589] combine text color highlight color behind experiment
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- [`3a59e88cfd890`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a59e88cfd890) -
|
|
13
|
+
[ux] [EDITOR-7589] update icon colors for highlight color palette and toolbar icon
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 11.0.17
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 11.0.16
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -7,7 +7,6 @@ exports.changeColor = void 0;
|
|
|
7
7
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
8
8
|
var _mark = require("@atlaskit/editor-common/mark");
|
|
9
9
|
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
10
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
11
10
|
var _main = require("../pm-plugins/main");
|
|
12
11
|
var _color = require("./color");
|
|
13
12
|
var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI) {
|
|
@@ -31,16 +30,6 @@ var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI)
|
|
|
31
30
|
type: _main.HighlightPluginAction.CHANGE_COLOR,
|
|
32
31
|
color: color
|
|
33
32
|
});
|
|
34
|
-
var marks = tr.doc.type.schema.marks;
|
|
35
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
|
|
36
|
-
_main.overrideMarks.forEach(function (mark) {
|
|
37
|
-
if (marks[mark]) {
|
|
38
|
-
(0, _mark.removeMark)(marks[mark])({
|
|
39
|
-
tr: tr
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
33
|
(0, _mark.toggleMark)(backgroundColor, {
|
|
45
34
|
color: color
|
|
46
35
|
})({
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginAction = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
10
10
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
@@ -18,7 +18,6 @@ var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/functio
|
|
|
18
18
|
HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
|
|
19
19
|
return HighlightPluginAction;
|
|
20
20
|
}({});
|
|
21
|
-
var overrideMarks = exports.overrideMarks = ['textColor'];
|
|
22
21
|
var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
23
22
|
var api = _ref.api;
|
|
24
23
|
return new _safePlugin.SafePlugin({
|
|
@@ -32,12 +32,21 @@ var styles = {
|
|
|
32
32
|
removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
|
|
33
33
|
icon: "_1e0c1o8l _18u01n1a"
|
|
34
34
|
};
|
|
35
|
+
var getTextColorIconColor = function getTextColorIconColor(defaultColor, textColor) {
|
|
36
|
+
if (!(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
|
|
37
|
+
return "var(--ds-icon, #292A2E)";
|
|
38
|
+
}
|
|
39
|
+
if (!textColor || defaultColor && textColor === defaultColor) {
|
|
40
|
+
return "var(--ds-icon, #292A2E)";
|
|
41
|
+
}
|
|
42
|
+
return (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || "var(--ds-icon, #292A2E)";
|
|
43
|
+
};
|
|
35
44
|
var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
|
|
36
45
|
var label = _ref.label,
|
|
37
|
-
isSelected = _ref.isSelected
|
|
38
|
-
|
|
46
|
+
isSelected = _ref.isSelected,
|
|
47
|
+
iconColor = _ref.iconColor;
|
|
39
48
|
return isSelected ? /*#__PURE__*/React.createElement(_checkMark.default, {
|
|
40
|
-
color:
|
|
49
|
+
color: "var(--ds-icon, #292A2E)",
|
|
41
50
|
label: label
|
|
42
51
|
}) : /*#__PURE__*/React.createElement(_compiled.Box, {
|
|
43
52
|
as: "span",
|
|
@@ -57,6 +66,9 @@ function HighlightColorMenuItem(_ref2) {
|
|
|
57
66
|
formatMessage = _useIntl.formatMessage;
|
|
58
67
|
var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
|
|
59
68
|
var context = (0, _editorToolbar.useToolbarDropdownMenu)();
|
|
69
|
+
var _useSelectedTextColor = (0, _uiColor.useSelectedTextColor)(),
|
|
70
|
+
textColor = _useSelectedTextColor.textColor,
|
|
71
|
+
defaultColor = _useSelectedTextColor.defaultColor;
|
|
60
72
|
var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
|
|
61
73
|
var handleHighlightColorChange = (0, _react.useCallback)(function (color, event) {
|
|
62
74
|
var _api$highlight;
|
|
@@ -74,17 +86,19 @@ function HighlightColorMenuItem(_ref2) {
|
|
|
74
86
|
var isSelected = function isSelected(color) {
|
|
75
87
|
return color.value === activeColor;
|
|
76
88
|
};
|
|
89
|
+
var iconColor = getTextColorIconColor(defaultColor, textColor);
|
|
77
90
|
return _uiColor.highlightColorPalette.filter(function (color) {
|
|
78
91
|
return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
|
|
79
92
|
}).map(function (color) {
|
|
80
93
|
return _objectSpread(_objectSpread({}, color), {}, {
|
|
81
94
|
decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
|
|
82
95
|
label: color.label,
|
|
83
|
-
isSelected: isSelected(color)
|
|
96
|
+
isSelected: isSelected(color),
|
|
97
|
+
iconColor: iconColor
|
|
84
98
|
})
|
|
85
99
|
});
|
|
86
100
|
});
|
|
87
|
-
}, [activeColor]);
|
|
101
|
+
}, [activeColor, defaultColor, textColor]);
|
|
88
102
|
return /*#__PURE__*/React.createElement(_compiled.Stack, {
|
|
89
103
|
xcss: styles.container,
|
|
90
104
|
testId: "highlight-color-menu-item"
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
|
|
3
3
|
import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
|
|
4
|
-
import {
|
|
5
|
-
import { HighlightPluginAction, highlightPluginKey, overrideMarks } from '../pm-plugins/main';
|
|
4
|
+
import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
|
|
6
5
|
import { getActiveColor } from './color';
|
|
7
6
|
export const changeColor = editorAnalyticsAPI => ({
|
|
8
7
|
color,
|
|
@@ -27,18 +26,6 @@ export const changeColor = editorAnalyticsAPI => ({
|
|
|
27
26
|
type: HighlightPluginAction.CHANGE_COLOR,
|
|
28
27
|
color
|
|
29
28
|
});
|
|
30
|
-
const {
|
|
31
|
-
marks
|
|
32
|
-
} = tr.doc.type.schema;
|
|
33
|
-
if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
|
|
34
|
-
overrideMarks.forEach(mark => {
|
|
35
|
-
if (marks[mark]) {
|
|
36
|
-
removeMark(marks[mark])({
|
|
37
|
-
tr
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
29
|
toggleMark(backgroundColor, {
|
|
43
30
|
color
|
|
44
31
|
})({
|
|
@@ -8,7 +8,6 @@ export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
|
|
|
8
8
|
HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
|
|
9
9
|
return HighlightPluginAction;
|
|
10
10
|
}({});
|
|
11
|
-
export const overrideMarks = ['textColor'];
|
|
12
11
|
export const createPlugin = ({
|
|
13
12
|
api
|
|
14
13
|
}) => {
|
|
@@ -6,9 +6,9 @@ import { useCallback, useMemo } from 'react';
|
|
|
6
6
|
import { useIntl } from 'react-intl';
|
|
7
7
|
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
|
|
8
8
|
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
|
|
9
|
-
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
9
|
+
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
|
|
10
10
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
11
|
-
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
11
|
+
import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
12
12
|
import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
13
13
|
import Heading from '@atlaskit/heading';
|
|
14
14
|
import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
|
|
@@ -20,13 +20,22 @@ const styles = {
|
|
|
20
20
|
removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
|
|
21
21
|
icon: "_1e0c1o8l _18u01n1a"
|
|
22
22
|
};
|
|
23
|
+
const getTextColorIconColor = (defaultColor, textColor) => {
|
|
24
|
+
if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
|
|
25
|
+
return "var(--ds-icon, #292A2E)";
|
|
26
|
+
}
|
|
27
|
+
if (!textColor || defaultColor && textColor === defaultColor) {
|
|
28
|
+
return "var(--ds-icon, #292A2E)";
|
|
29
|
+
}
|
|
30
|
+
return hexToEditorTextPaletteColor(textColor) || "var(--ds-icon, #292A2E)";
|
|
31
|
+
};
|
|
23
32
|
const TextColorIconDecorator = ({
|
|
24
33
|
label,
|
|
25
|
-
isSelected
|
|
34
|
+
isSelected,
|
|
35
|
+
iconColor
|
|
26
36
|
}) => {
|
|
27
|
-
const iconColor = "var(--ds-icon, #292A2E)";
|
|
28
37
|
return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
|
|
29
|
-
color:
|
|
38
|
+
color: "var(--ds-icon, #292A2E)",
|
|
30
39
|
label: label
|
|
31
40
|
}) : /*#__PURE__*/React.createElement(Box, {
|
|
32
41
|
as: "span",
|
|
@@ -48,6 +57,10 @@ export function HighlightColorMenuItem({
|
|
|
48
57
|
} = useIntl();
|
|
49
58
|
const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
|
|
50
59
|
const context = useToolbarDropdownMenu();
|
|
60
|
+
const {
|
|
61
|
+
textColor,
|
|
62
|
+
defaultColor
|
|
63
|
+
} = useSelectedTextColor();
|
|
51
64
|
const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
|
|
52
65
|
const handleHighlightColorChange = useCallback((color, event) => {
|
|
53
66
|
var _api$highlight, _api$highlight$comman;
|
|
@@ -63,14 +76,16 @@ export function HighlightColorMenuItem({
|
|
|
63
76
|
}, [api, closeMenu, parents]);
|
|
64
77
|
const colorPalette = useMemo(() => {
|
|
65
78
|
const isSelected = color => color.value === activeColor;
|
|
79
|
+
const iconColor = getTextColorIconColor(defaultColor, textColor);
|
|
66
80
|
return highlightColorPalette.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
|
|
67
81
|
...color,
|
|
68
82
|
decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
|
|
69
83
|
label: color.label,
|
|
70
|
-
isSelected: isSelected(color)
|
|
84
|
+
isSelected: isSelected(color),
|
|
85
|
+
iconColor: iconColor
|
|
71
86
|
})
|
|
72
87
|
}));
|
|
73
|
-
}, [activeColor]);
|
|
88
|
+
}, [activeColor, defaultColor, textColor]);
|
|
74
89
|
return /*#__PURE__*/React.createElement(Stack, {
|
|
75
90
|
xcss: styles.container,
|
|
76
91
|
testId: "highlight-color-menu-item"
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
|
|
3
3
|
import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
|
|
4
|
-
import {
|
|
5
|
-
import { HighlightPluginAction, highlightPluginKey, overrideMarks } from '../pm-plugins/main';
|
|
4
|
+
import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
|
|
6
5
|
import { getActiveColor } from './color';
|
|
7
6
|
export var changeColor = function changeColor(editorAnalyticsAPI) {
|
|
8
7
|
return function (_ref) {
|
|
@@ -25,16 +24,6 @@ export var changeColor = function changeColor(editorAnalyticsAPI) {
|
|
|
25
24
|
type: HighlightPluginAction.CHANGE_COLOR,
|
|
26
25
|
color: color
|
|
27
26
|
});
|
|
28
|
-
var marks = tr.doc.type.schema.marks;
|
|
29
|
-
if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
|
|
30
|
-
overrideMarks.forEach(function (mark) {
|
|
31
|
-
if (marks[mark]) {
|
|
32
|
-
removeMark(marks[mark])({
|
|
33
|
-
tr: tr
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
27
|
toggleMark(backgroundColor, {
|
|
39
28
|
color: color
|
|
40
29
|
})({
|
|
@@ -11,7 +11,6 @@ export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
|
|
|
11
11
|
HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
|
|
12
12
|
return HighlightPluginAction;
|
|
13
13
|
}({});
|
|
14
|
-
export var overrideMarks = ['textColor'];
|
|
15
14
|
export var createPlugin = function createPlugin(_ref) {
|
|
16
15
|
var api = _ref.api;
|
|
17
16
|
return new SafePlugin({
|
|
@@ -9,9 +9,9 @@ import { useCallback, useMemo } from 'react';
|
|
|
9
9
|
import { useIntl } from 'react-intl';
|
|
10
10
|
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
11
|
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
|
|
12
|
-
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
12
|
+
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
|
|
13
13
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
14
|
-
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
14
|
+
import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
15
15
|
import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
16
16
|
import Heading from '@atlaskit/heading';
|
|
17
17
|
import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
|
|
@@ -23,12 +23,21 @@ var styles = {
|
|
|
23
23
|
removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
|
|
24
24
|
icon: "_1e0c1o8l _18u01n1a"
|
|
25
25
|
};
|
|
26
|
+
var getTextColorIconColor = function getTextColorIconColor(defaultColor, textColor) {
|
|
27
|
+
if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
|
|
28
|
+
return "var(--ds-icon, #292A2E)";
|
|
29
|
+
}
|
|
30
|
+
if (!textColor || defaultColor && textColor === defaultColor) {
|
|
31
|
+
return "var(--ds-icon, #292A2E)";
|
|
32
|
+
}
|
|
33
|
+
return hexToEditorTextPaletteColor(textColor) || "var(--ds-icon, #292A2E)";
|
|
34
|
+
};
|
|
26
35
|
var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
|
|
27
36
|
var label = _ref.label,
|
|
28
|
-
isSelected = _ref.isSelected
|
|
29
|
-
|
|
37
|
+
isSelected = _ref.isSelected,
|
|
38
|
+
iconColor = _ref.iconColor;
|
|
30
39
|
return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
|
|
31
|
-
color:
|
|
40
|
+
color: "var(--ds-icon, #292A2E)",
|
|
32
41
|
label: label
|
|
33
42
|
}) : /*#__PURE__*/React.createElement(Box, {
|
|
34
43
|
as: "span",
|
|
@@ -48,6 +57,9 @@ export function HighlightColorMenuItem(_ref2) {
|
|
|
48
57
|
formatMessage = _useIntl.formatMessage;
|
|
49
58
|
var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
|
|
50
59
|
var context = useToolbarDropdownMenu();
|
|
60
|
+
var _useSelectedTextColor = useSelectedTextColor(),
|
|
61
|
+
textColor = _useSelectedTextColor.textColor,
|
|
62
|
+
defaultColor = _useSelectedTextColor.defaultColor;
|
|
51
63
|
var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
|
|
52
64
|
var handleHighlightColorChange = useCallback(function (color, event) {
|
|
53
65
|
var _api$highlight;
|
|
@@ -65,17 +77,19 @@ export function HighlightColorMenuItem(_ref2) {
|
|
|
65
77
|
var isSelected = function isSelected(color) {
|
|
66
78
|
return color.value === activeColor;
|
|
67
79
|
};
|
|
80
|
+
var iconColor = getTextColorIconColor(defaultColor, textColor);
|
|
68
81
|
return highlightColorPalette.filter(function (color) {
|
|
69
82
|
return color.value !== REMOVE_HIGHLIGHT_COLOR;
|
|
70
83
|
}).map(function (color) {
|
|
71
84
|
return _objectSpread(_objectSpread({}, color), {}, {
|
|
72
85
|
decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
|
|
73
86
|
label: color.label,
|
|
74
|
-
isSelected: isSelected(color)
|
|
87
|
+
isSelected: isSelected(color),
|
|
88
|
+
iconColor: iconColor
|
|
75
89
|
})
|
|
76
90
|
});
|
|
77
91
|
});
|
|
78
|
-
}, [activeColor]);
|
|
92
|
+
}, [activeColor, defaultColor, textColor]);
|
|
79
93
|
return /*#__PURE__*/React.createElement(Stack, {
|
|
80
94
|
xcss: styles.container,
|
|
81
95
|
testId: "highlight-color-menu-item"
|
|
@@ -12,7 +12,6 @@ export declare enum HighlightPluginAction {
|
|
|
12
12
|
CHANGE_COLOR = 0,
|
|
13
13
|
SET_PALETTE = 1
|
|
14
14
|
}
|
|
15
|
-
export declare const overrideMarks: string[];
|
|
16
15
|
export declare const createPlugin: ({ api, }: {
|
|
17
16
|
api: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
18
17
|
}) => SafePlugin<HighlightPluginState>;
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/highlightPlugin.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/highlightPlugin.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/highlightPlugin.d.ts"
|
|
17
10
|
}
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/highlightPluginType.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/highlightPluginType.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/highlightPluginType.d.ts"
|
|
17
10
|
}
|
package/main/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/main.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/main.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/main.d.ts"
|
|
17
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-highlight",
|
|
3
|
-
"version": "11.0
|
|
3
|
+
"version": "11.1.0",
|
|
4
4
|
"description": "Highlight plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,13 +49,13 @@
|
|
|
49
49
|
"@atlaskit/icon": "^35.4.0",
|
|
50
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
51
51
|
"@atlaskit/primitives": "^19.0.0",
|
|
52
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
52
|
+
"@atlaskit/tmp-editor-statsig": "^103.0.0",
|
|
53
53
|
"@atlaskit/tokens": "^13.4.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@emotion/react": "^11.7.1"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@atlaskit/editor-common": "^115.
|
|
58
|
+
"@atlaskit/editor-common": "^115.16.0",
|
|
59
59
|
"react": "^18.2.0",
|
|
60
60
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
61
61
|
},
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
3
|
-
export declare const changeColor: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color, inputMethod }: {
|
|
4
|
-
color: string;
|
|
5
|
-
inputMethod: INPUT_METHOD;
|
|
6
|
-
}) => EditorCommand;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
4
|
-
export declare const togglePalette: (api: ExtractInjectionAPI<HighlightPlugin>) => ({ inputMethod }: {
|
|
5
|
-
inputMethod: INPUT_METHOD;
|
|
6
|
-
}) => Command;
|
|
7
|
-
export declare const setPalette: (api: ExtractInjectionAPI<HighlightPlugin>) => ({ isPaletteOpen, inputMethod, }: {
|
|
8
|
-
inputMethod: INPUT_METHOD;
|
|
9
|
-
isPaletteOpen: boolean;
|
|
10
|
-
}) => Command;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { highlightPlugin } from '../highlightPlugin';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { HighlightPlugin } from '../highlightPluginType';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { HighlightPluginState } from '../pm-plugins/main';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
3
|
-
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
4
|
-
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
5
|
-
import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
|
|
6
|
-
import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
|
|
7
|
-
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
8
|
-
import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
|
|
9
|
-
import type { HighlightPluginState } from './pm-plugins/main';
|
|
10
|
-
export type HighlightPlugin = NextEditorPlugin<'highlight', {
|
|
11
|
-
commands: {
|
|
12
|
-
changeColor: ({ color }: {
|
|
13
|
-
color: string;
|
|
14
|
-
inputMethod: INPUT_METHOD;
|
|
15
|
-
}) => EditorCommand;
|
|
16
|
-
};
|
|
17
|
-
dependencies: [
|
|
18
|
-
OptionalPlugin<AnalyticsPlugin>,
|
|
19
|
-
OptionalPlugin<TextFormattingPlugin>,
|
|
20
|
-
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
21
|
-
OptionalPlugin<ToolbarPlugin>,
|
|
22
|
-
OptionalPlugin<SelectionToolbarPlugin>,
|
|
23
|
-
OptionalPlugin<UserPreferencesPlugin>
|
|
24
|
-
];
|
|
25
|
-
sharedState: HighlightPluginState | undefined;
|
|
26
|
-
}>;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
type AddPaddingDecorationsOptions = {
|
|
4
|
-
decorationSet: DecorationSet;
|
|
5
|
-
from: number;
|
|
6
|
-
state: EditorState;
|
|
7
|
-
to: number;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* Adds padding decorations to highlighted text
|
|
11
|
-
* within the specified range.
|
|
12
|
-
*/
|
|
13
|
-
export declare const addPaddingDecorations: ({ decorationSet, state, from, to, }: AddPaddingDecorationsOptions) => DecorationSet;
|
|
14
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
type HighlightPaddingPluginState = {
|
|
5
|
-
decorationSet: DecorationSet;
|
|
6
|
-
};
|
|
7
|
-
export declare const highlightPaddingPluginKey: PluginKey;
|
|
8
|
-
/**
|
|
9
|
-
* Plugin to add padding decorations around highlighted text.
|
|
10
|
-
*
|
|
11
|
-
* Padding is added to the left and/or right of highlighted text
|
|
12
|
-
* only when it is at the start or end of a block, or when it is adjacent
|
|
13
|
-
* to whitespace.
|
|
14
|
-
*/
|
|
15
|
-
export declare const createHighlightPaddingPlugin: () => SafePlugin<HighlightPaddingPluginState>;
|
|
16
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
type UpdatePaddingDecorationsOptions = {
|
|
4
|
-
decorationSet: DecorationSet;
|
|
5
|
-
end: number;
|
|
6
|
-
start: number;
|
|
7
|
-
state: EditorState;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* Updates padding decorations in the specified range.
|
|
11
|
-
*/
|
|
12
|
-
export declare const updatePaddingDecorations: ({ decorationSet: prevDecorationSet, state, start, end, }: UpdatePaddingDecorationsOptions) => DecorationSet;
|
|
13
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
export declare const isHighlightedTextNode: (node: PMNode) => boolean;
|
|
4
|
-
type ShouldPadLeftOptions = {
|
|
5
|
-
nodeStart: number;
|
|
6
|
-
state: EditorState;
|
|
7
|
-
};
|
|
8
|
-
export declare const shouldPadLeft: ({ state, nodeStart }: ShouldPadLeftOptions) => boolean;
|
|
9
|
-
type ShouldPadRightOptions = {
|
|
10
|
-
nodeEnd: number;
|
|
11
|
-
state: EditorState;
|
|
12
|
-
};
|
|
13
|
-
export declare const shouldPadRight: ({ state, nodeEnd }: ShouldPadRightOptions) => boolean;
|
|
14
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
4
|
-
export declare function keymapPlugin({ api }: {
|
|
5
|
-
api: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
6
|
-
}): SafePlugin;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
5
|
-
export declare const highlightPluginKey: PluginKey<HighlightPluginState>;
|
|
6
|
-
export type HighlightPluginState = {
|
|
7
|
-
activeColor: string | null;
|
|
8
|
-
disabled: boolean;
|
|
9
|
-
isPaletteOpen: boolean;
|
|
10
|
-
};
|
|
11
|
-
export declare enum HighlightPluginAction {
|
|
12
|
-
CHANGE_COLOR = 0,
|
|
13
|
-
SET_PALETTE = 1
|
|
14
|
-
}
|
|
15
|
-
export declare const overrideMarks: string[];
|
|
16
|
-
export declare const createPlugin: ({ api, }: {
|
|
17
|
-
api: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
18
|
-
}) => SafePlugin<HighlightPluginState>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ComponentType, FC } from 'react';
|
|
2
|
-
import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
|
|
3
|
-
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
4
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
5
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
6
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
7
|
-
type FloatingToolbarHighlightColorProps = {
|
|
8
|
-
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
9
|
-
editorView: EditorView | undefined;
|
|
10
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
11
|
-
} & WrappedComponentProps;
|
|
12
|
-
export declare const FloatingToolbarHighlightColorWithIntl: FC<WithIntlProps<FloatingToolbarHighlightColorProps>> & {
|
|
13
|
-
WrappedComponent: ComponentType<FloatingToolbarHighlightColorProps>;
|
|
14
|
-
};
|
|
15
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
6
|
-
import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
|
|
7
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
8
|
-
interface HighlightMenuItemProps {
|
|
9
|
-
api: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
10
|
-
parents: ToolbarComponentTypes;
|
|
11
|
-
}
|
|
12
|
-
export declare function HighlightColorMenuItem({ api, parents }: HighlightMenuItemProps): JSX.Element;
|
|
13
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { ComponentType, FC } from 'react';
|
|
2
|
-
import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
|
|
3
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
6
|
-
type PrimaryToolbarHighlightColorProps = {
|
|
7
|
-
disabled: boolean;
|
|
8
|
-
editorView: EditorView;
|
|
9
|
-
isToolbarReducedSpacing: boolean;
|
|
10
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
11
|
-
popupsBoundariesElement?: HTMLElement;
|
|
12
|
-
popupsMountPoint?: HTMLElement;
|
|
13
|
-
popupsScrollableElement?: HTMLElement;
|
|
14
|
-
} & WrappedComponentProps;
|
|
15
|
-
export declare const PrimaryToolbarHighlightColorWithIntl: FC<WithIntlProps<PrimaryToolbarHighlightColorProps>> & {
|
|
16
|
-
WrappedComponent: ComponentType<PrimaryToolbarHighlightColorProps>;
|
|
17
|
-
};
|
|
18
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { WithOutsideClickProps } from '@atlaskit/editor-common/ui';
|
|
3
|
-
type PaletteDropdownProps = {
|
|
4
|
-
activeColor: string | null;
|
|
5
|
-
isOpen: boolean;
|
|
6
|
-
isOpenedByKeyboard: boolean;
|
|
7
|
-
onColorChange: (color: string) => void;
|
|
8
|
-
popupsBoundariesElement?: HTMLElement;
|
|
9
|
-
popupsMountPoint?: HTMLElement;
|
|
10
|
-
popupsScrollableElement?: HTMLElement;
|
|
11
|
-
trigger: React.ReactElement;
|
|
12
|
-
} & WithOutsideClickProps;
|
|
13
|
-
export declare const PaletteDropdown: (props: PaletteDropdownProps) => React.JSX.Element;
|
|
14
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
-
import type { ToolbarButtonRef } from '@atlaskit/editor-common/ui-menu';
|
|
4
|
-
import type { HighlightPlugin } from '../../highlightPluginType';
|
|
5
|
-
type UseDropdownEventArgs = {
|
|
6
|
-
isDropdownOpen: boolean;
|
|
7
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
8
|
-
setIsDropdownOpen: (isOpen: boolean) => void;
|
|
9
|
-
toolbarItemRef: React.RefObject<ToolbarButtonRef>;
|
|
10
|
-
};
|
|
11
|
-
export declare const useDropdownEvents: (args: UseDropdownEventArgs) => {
|
|
12
|
-
handleClick: () => void;
|
|
13
|
-
handleClickOutside: () => void;
|
|
14
|
-
handleColorChange: ({ color, inputMethod }: {
|
|
15
|
-
color: string;
|
|
16
|
-
inputMethod: INPUT_METHOD;
|
|
17
|
-
}) => void;
|
|
18
|
-
handleEscapeKeydown: () => void;
|
|
19
|
-
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
20
|
-
isOpenedByKeyboard: boolean;
|
|
21
|
-
};
|
|
22
|
-
export {};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
-
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
|
-
import type { HighlightPlugin } from '../highlightPluginType';
|
|
4
|
-
export declare const getToolbarComponent: (api: ExtractInjectionAPI<HighlightPlugin> | undefined) => RegisterComponent[];
|