@atlaskit/editor-plugin-text-color 3.1.4 → 3.1.6
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 +14 -0
- package/dist/cjs/ui/TextColorHighlightMenu.js +4 -2
- package/dist/cjs/ui/TextColorMenuItem.compiled.css +1 -2
- package/dist/cjs/ui/TextColorMenuItem.js +33 -11
- package/dist/cjs/ui/toolbar-components.js +4 -2
- package/dist/es2019/ui/TextColorHighlightMenu.js +4 -2
- package/dist/es2019/ui/TextColorMenuItem.compiled.css +1 -2
- package/dist/es2019/ui/TextColorMenuItem.js +37 -13
- package/dist/es2019/ui/toolbar-components.js +5 -2
- package/dist/esm/ui/TextColorHighlightMenu.js +4 -2
- package/dist/esm/ui/TextColorMenuItem.compiled.css +1 -2
- package/dist/esm/ui/TextColorMenuItem.js +34 -13
- package/dist/esm/ui/toolbar-components.js +4 -2
- package/dist/types/textColorPluginType.d.ts +3 -1
- package/dist/types/ui/TextColorMenuItem.d.ts +6 -2
- package/dist/types/ui/toolbar-components.d.ts +1 -1
- package/dist/types-ts4.5/textColorPluginType.d.ts +3 -1
- package/dist/types-ts4.5/ui/TextColorMenuItem.d.ts +6 -2
- package/dist/types-ts4.5/ui/toolbar-components.d.ts +1 -1
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-text-color
|
|
2
2
|
|
|
3
|
+
## 3.1.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`4d47716053c75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d47716053c75) -
|
|
8
|
+
[ux] ED-28799 Complete text colour / highlight menu items
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 3.1.5
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 3.1.4
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -21,14 +21,16 @@ var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColor
|
|
|
21
21
|
var children = _ref.children,
|
|
22
22
|
api = _ref.api;
|
|
23
23
|
var isTextColorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.disabled');
|
|
24
|
+
var highlightColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
|
|
25
|
+
var textColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.color');
|
|
24
26
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
25
27
|
formatMessage = _useIntl.formatMessage;
|
|
26
28
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
|
|
27
29
|
iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
|
|
28
|
-
highlightColor:
|
|
30
|
+
highlightColor: highlightColor || ''
|
|
29
31
|
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
|
|
30
32
|
label: formatMessage(_messages.textColorMessages.textColorTooltip),
|
|
31
|
-
iconColor: "var(--ds-text-accent-magenta, #943D73)",
|
|
33
|
+
iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
|
|
32
34
|
shouldRecommendSmallIcon: true,
|
|
33
35
|
size: 'small',
|
|
34
36
|
isDisabled: isTextColorDisabled,
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
|
|
1
|
+
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.TextColorMenuItem = TextColorMenuItem;
|
|
9
9
|
require("./TextColorMenuItem.compiled.css");
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
|
-
var _react =
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _reactIntlNext = require("react-intl-next");
|
|
13
13
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
14
14
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
15
|
+
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
15
16
|
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
16
17
|
var _editorPalette = require("@atlaskit/editor-palette");
|
|
17
18
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
18
19
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
19
21
|
var styles = {
|
|
20
|
-
container: "_zulpu2gc"
|
|
21
|
-
colorPalette: "_18u0x0bf"
|
|
22
|
+
container: "_zulpu2gc"
|
|
22
23
|
};
|
|
23
24
|
function TextColorMenuItem(_ref) {
|
|
24
|
-
var api = _ref.api
|
|
25
|
+
var api = _ref.api,
|
|
26
|
+
parents = _ref.parents;
|
|
25
27
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor'], function (states) {
|
|
26
28
|
var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
|
|
27
29
|
return {
|
|
@@ -33,22 +35,42 @@ function TextColorMenuItem(_ref) {
|
|
|
33
35
|
color = _useSharedPluginState.color,
|
|
34
36
|
defaultColor = _useSharedPluginState.defaultColor,
|
|
35
37
|
palette = _useSharedPluginState.palette;
|
|
38
|
+
var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
|
|
39
|
+
editorView = _useEditorToolbar.editorView;
|
|
40
|
+
var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
|
|
41
|
+
state: null,
|
|
42
|
+
dispatch: null
|
|
43
|
+
},
|
|
44
|
+
state = _ref2.state,
|
|
45
|
+
dispatch = _ref2.dispatch;
|
|
46
|
+
var _useToolbarDropdownMe = (0, _editorToolbar.useToolbarDropdownMenu)(),
|
|
47
|
+
closeMenu = _useToolbarDropdownMe.closeMenu;
|
|
48
|
+
var handleTextColorChange = (0, _react.useCallback)(function (color) {
|
|
49
|
+
var _api$textColor;
|
|
50
|
+
if (!state || !dispatch) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
|
|
54
|
+
api.textColor.actions.changeColor(color, (0, _toolbar.getInputMethodFromParentKeys)(parents))(state, dispatch);
|
|
55
|
+
closeMenu();
|
|
56
|
+
}
|
|
57
|
+
}, [api, state, dispatch, closeMenu, parents]);
|
|
36
58
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
37
59
|
formatMessage = _useIntl.formatMessage;
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
|
|
39
61
|
xcss: styles.container,
|
|
40
62
|
testId: "text-color-menu-item"
|
|
41
63
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
42
64
|
weight: "bold"
|
|
43
|
-
}, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
65
|
+
}, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(_editorToolbar.ColorPalette, {
|
|
66
|
+
onClick: function onClick(color) {
|
|
67
|
+
handleTextColorChange(color);
|
|
68
|
+
},
|
|
47
69
|
selectedColor: color || defaultColor,
|
|
48
70
|
paletteOptions: {
|
|
49
71
|
palette: palette,
|
|
50
72
|
hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
|
|
51
73
|
paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
|
|
52
74
|
}
|
|
53
|
-
}))
|
|
75
|
+
}));
|
|
54
76
|
}
|
|
@@ -35,9 +35,11 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
|
|
|
35
35
|
parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
|
|
36
36
|
rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.TEXT_COLOR_MENU_ITEM.key]
|
|
37
37
|
})],
|
|
38
|
-
component: function component() {
|
|
38
|
+
component: function component(_ref2) {
|
|
39
|
+
var parents = _ref2.parents;
|
|
39
40
|
return /*#__PURE__*/_react.default.createElement(_TextColorMenuItem.TextColorMenuItem, {
|
|
40
|
-
api: api
|
|
41
|
+
api: api,
|
|
42
|
+
parents: parents
|
|
41
43
|
});
|
|
42
44
|
}
|
|
43
45
|
})];
|
|
@@ -15,15 +15,17 @@ export const TextColorHighlightMenu = ({
|
|
|
15
15
|
api
|
|
16
16
|
}) => {
|
|
17
17
|
const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
|
|
18
|
+
const highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
|
|
19
|
+
const textColor = useSharedPluginStateSelector(api, 'textColor.color');
|
|
18
20
|
const {
|
|
19
21
|
formatMessage
|
|
20
22
|
} = useIntl();
|
|
21
23
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
|
|
22
24
|
iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
|
|
23
|
-
highlightColor:
|
|
25
|
+
highlightColor: highlightColor || ''
|
|
24
26
|
}, /*#__PURE__*/React.createElement(TextColorIcon, {
|
|
25
27
|
label: formatMessage(messages.textColorTooltip),
|
|
26
|
-
iconColor: "var(--ds-text-accent-magenta, #943D73)",
|
|
28
|
+
iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
|
|
27
29
|
shouldRecommendSmallIcon: true,
|
|
28
30
|
size: 'small',
|
|
29
31
|
isDisabled: isTextColorDisabled,
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
|
|
1
|
+
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import "./TextColorMenuItem.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useCallback } from 'react';
|
|
5
5
|
import { useIntl } from 'react-intl-next';
|
|
6
6
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
7
7
|
import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
|
|
8
|
-
import {
|
|
8
|
+
import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
9
|
+
import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
9
10
|
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
10
|
-
import {
|
|
11
|
-
import { Stack,
|
|
11
|
+
import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
12
|
+
import { Stack, Text } from '@atlaskit/primitives/compiled';
|
|
12
13
|
const styles = {
|
|
13
|
-
container: "_zulpu2gc"
|
|
14
|
-
colorPalette: "_18u0x0bf"
|
|
14
|
+
container: "_zulpu2gc"
|
|
15
15
|
};
|
|
16
16
|
export function TextColorMenuItem({
|
|
17
|
-
api
|
|
17
|
+
api,
|
|
18
|
+
parents
|
|
18
19
|
}) {
|
|
19
20
|
const {
|
|
20
21
|
color,
|
|
@@ -28,23 +29,46 @@ export function TextColorMenuItem({
|
|
|
28
29
|
palette: ((_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.palette) || []
|
|
29
30
|
};
|
|
30
31
|
});
|
|
32
|
+
const {
|
|
33
|
+
editorView
|
|
34
|
+
} = useEditorToolbar();
|
|
35
|
+
const {
|
|
36
|
+
state,
|
|
37
|
+
dispatch
|
|
38
|
+
} = editorView !== null && editorView !== void 0 ? editorView : {
|
|
39
|
+
state: null,
|
|
40
|
+
dispatch: null
|
|
41
|
+
};
|
|
42
|
+
const {
|
|
43
|
+
closeMenu
|
|
44
|
+
} = useToolbarDropdownMenu();
|
|
45
|
+
const handleTextColorChange = useCallback(color => {
|
|
46
|
+
var _api$textColor, _api$textColor$action;
|
|
47
|
+
if (!state || !dispatch) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$action = _api$textColor.actions) !== null && _api$textColor$action !== void 0 && _api$textColor$action.changeColor) {
|
|
51
|
+
api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(state, dispatch);
|
|
52
|
+
closeMenu();
|
|
53
|
+
}
|
|
54
|
+
}, [api, state, dispatch, closeMenu, parents]);
|
|
31
55
|
const {
|
|
32
56
|
formatMessage
|
|
33
57
|
} = useIntl();
|
|
34
|
-
return /*#__PURE__*/React.createElement(
|
|
58
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
35
59
|
xcss: styles.container,
|
|
36
60
|
testId: "text-color-menu-item"
|
|
37
61
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
38
62
|
weight: "bold"
|
|
39
|
-
}, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
63
|
+
}, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
|
|
64
|
+
onClick: color => {
|
|
65
|
+
handleTextColorChange(color);
|
|
66
|
+
},
|
|
43
67
|
selectedColor: color || defaultColor,
|
|
44
68
|
paletteOptions: {
|
|
45
69
|
palette: palette,
|
|
46
70
|
hexToPaletteColor: hexToEditorTextPaletteColor,
|
|
47
71
|
paletteColorTooltipMessages: textPaletteTooltipMessages
|
|
48
72
|
}
|
|
49
|
-
}))
|
|
73
|
+
}));
|
|
50
74
|
}
|
|
@@ -32,8 +32,11 @@ export const getToolbarComponents = api => {
|
|
|
32
32
|
...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
|
|
33
33
|
rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
|
|
34
34
|
}],
|
|
35
|
-
component: (
|
|
36
|
-
|
|
35
|
+
component: ({
|
|
36
|
+
parents
|
|
37
|
+
}) => /*#__PURE__*/React.createElement(TextColorMenuItem, {
|
|
38
|
+
api: api,
|
|
39
|
+
parents: parents
|
|
37
40
|
})
|
|
38
41
|
}];
|
|
39
42
|
};
|
|
@@ -14,14 +14,16 @@ export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
|
|
|
14
14
|
var children = _ref.children,
|
|
15
15
|
api = _ref.api;
|
|
16
16
|
var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
|
|
17
|
+
var highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
|
|
18
|
+
var textColor = useSharedPluginStateSelector(api, 'textColor.color');
|
|
17
19
|
var _useIntl = useIntl(),
|
|
18
20
|
formatMessage = _useIntl.formatMessage;
|
|
19
21
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
|
|
20
22
|
iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
|
|
21
|
-
highlightColor:
|
|
23
|
+
highlightColor: highlightColor || ''
|
|
22
24
|
}, /*#__PURE__*/React.createElement(TextColorIcon, {
|
|
23
25
|
label: formatMessage(messages.textColorTooltip),
|
|
24
|
-
iconColor: "var(--ds-text-accent-magenta, #943D73)",
|
|
26
|
+
iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
|
|
25
27
|
shouldRecommendSmallIcon: true,
|
|
26
28
|
size: 'small',
|
|
27
29
|
isDisabled: isTextColorDisabled,
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
|
|
1
|
+
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import "./TextColorMenuItem.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useCallback } from 'react';
|
|
5
5
|
import { useIntl } from 'react-intl-next';
|
|
6
6
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
7
7
|
import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
|
|
8
|
-
import {
|
|
8
|
+
import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
9
|
+
import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
9
10
|
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
10
|
-
import {
|
|
11
|
-
import { Stack,
|
|
11
|
+
import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
12
|
+
import { Stack, Text } from '@atlaskit/primitives/compiled';
|
|
12
13
|
var styles = {
|
|
13
|
-
container: "_zulpu2gc"
|
|
14
|
-
colorPalette: "_18u0x0bf"
|
|
14
|
+
container: "_zulpu2gc"
|
|
15
15
|
};
|
|
16
16
|
export function TextColorMenuItem(_ref) {
|
|
17
|
-
var api = _ref.api
|
|
17
|
+
var api = _ref.api,
|
|
18
|
+
parents = _ref.parents;
|
|
18
19
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['textColor'], function (states) {
|
|
19
20
|
var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
|
|
20
21
|
return {
|
|
@@ -26,22 +27,42 @@ export function TextColorMenuItem(_ref) {
|
|
|
26
27
|
color = _useSharedPluginState.color,
|
|
27
28
|
defaultColor = _useSharedPluginState.defaultColor,
|
|
28
29
|
palette = _useSharedPluginState.palette;
|
|
30
|
+
var _useEditorToolbar = useEditorToolbar(),
|
|
31
|
+
editorView = _useEditorToolbar.editorView;
|
|
32
|
+
var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
|
|
33
|
+
state: null,
|
|
34
|
+
dispatch: null
|
|
35
|
+
},
|
|
36
|
+
state = _ref2.state,
|
|
37
|
+
dispatch = _ref2.dispatch;
|
|
38
|
+
var _useToolbarDropdownMe = useToolbarDropdownMenu(),
|
|
39
|
+
closeMenu = _useToolbarDropdownMe.closeMenu;
|
|
40
|
+
var handleTextColorChange = useCallback(function (color) {
|
|
41
|
+
var _api$textColor;
|
|
42
|
+
if (!state || !dispatch) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
|
|
46
|
+
api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(state, dispatch);
|
|
47
|
+
closeMenu();
|
|
48
|
+
}
|
|
49
|
+
}, [api, state, dispatch, closeMenu, parents]);
|
|
29
50
|
var _useIntl = useIntl(),
|
|
30
51
|
formatMessage = _useIntl.formatMessage;
|
|
31
|
-
return /*#__PURE__*/React.createElement(
|
|
52
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
32
53
|
xcss: styles.container,
|
|
33
54
|
testId: "text-color-menu-item"
|
|
34
55
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
35
56
|
weight: "bold"
|
|
36
|
-
}, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
57
|
+
}, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
|
|
58
|
+
onClick: function onClick(color) {
|
|
59
|
+
handleTextColorChange(color);
|
|
60
|
+
},
|
|
40
61
|
selectedColor: color || defaultColor,
|
|
41
62
|
paletteOptions: {
|
|
42
63
|
palette: palette,
|
|
43
64
|
hexToPaletteColor: hexToEditorTextPaletteColor,
|
|
44
65
|
paletteColorTooltipMessages: textPaletteTooltipMessages
|
|
45
66
|
}
|
|
46
|
-
}))
|
|
67
|
+
}));
|
|
47
68
|
}
|
|
@@ -28,9 +28,11 @@ export var getToolbarComponents = function getToolbarComponents(api) {
|
|
|
28
28
|
parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
|
|
29
29
|
rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
|
|
30
30
|
})],
|
|
31
|
-
component: function component() {
|
|
31
|
+
component: function component(_ref2) {
|
|
32
|
+
var parents = _ref2.parents;
|
|
32
33
|
return /*#__PURE__*/React.createElement(TextColorMenuItem, {
|
|
33
|
-
api: api
|
|
34
|
+
api: api,
|
|
35
|
+
parents: parents
|
|
34
36
|
});
|
|
35
37
|
}
|
|
36
38
|
})];
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
|
+
import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
|
|
3
4
|
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
4
5
|
import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
|
|
5
6
|
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
@@ -12,7 +13,8 @@ export type Dependencies = [
|
|
|
12
13
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
13
14
|
OptionalPlugin<SelectionToolbarPlugin>,
|
|
14
15
|
OptionalPlugin<ToolbarPlugin>,
|
|
15
|
-
OptionalPlugin<UserPreferencesPlugin
|
|
16
|
+
OptionalPlugin<UserPreferencesPlugin>,
|
|
17
|
+
OptionalPlugin<HighlightPlugin>
|
|
16
18
|
];
|
|
17
19
|
export type TextColorPlugin = NextEditorPlugin<'textColor', {
|
|
18
20
|
pluginConfiguration: TextColorPluginOptions | undefined;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
|
|
3
4
|
import type { TextColorPlugin } from '../textColorPluginType';
|
|
4
|
-
|
|
5
|
+
interface TextColorMenuItemProps {
|
|
5
6
|
api: ExtractInjectionAPI<TextColorPlugin> | undefined;
|
|
6
|
-
|
|
7
|
+
parents: ToolbarComponentTypes;
|
|
8
|
+
}
|
|
9
|
+
export declare function TextColorMenuItem({ api, parents }: TextColorMenuItemProps): React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
-
import {
|
|
2
|
+
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
3
|
import type { TextColorPlugin } from '../textColorPluginType';
|
|
4
4
|
export declare const getToolbarComponents: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => RegisterComponent[];
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
3
|
+
import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
|
|
3
4
|
import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
|
|
4
5
|
import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
|
|
5
6
|
import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
|
|
@@ -12,7 +13,8 @@ export type Dependencies = [
|
|
|
12
13
|
OptionalPlugin<PrimaryToolbarPlugin>,
|
|
13
14
|
OptionalPlugin<SelectionToolbarPlugin>,
|
|
14
15
|
OptionalPlugin<ToolbarPlugin>,
|
|
15
|
-
OptionalPlugin<UserPreferencesPlugin
|
|
16
|
+
OptionalPlugin<UserPreferencesPlugin>,
|
|
17
|
+
OptionalPlugin<HighlightPlugin>
|
|
16
18
|
];
|
|
17
19
|
export type TextColorPlugin = NextEditorPlugin<'textColor', {
|
|
18
20
|
pluginConfiguration: TextColorPluginOptions | undefined;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
|
|
3
4
|
import type { TextColorPlugin } from '../textColorPluginType';
|
|
4
|
-
|
|
5
|
+
interface TextColorMenuItemProps {
|
|
5
6
|
api: ExtractInjectionAPI<TextColorPlugin> | undefined;
|
|
6
|
-
|
|
7
|
+
parents: ToolbarComponentTypes;
|
|
8
|
+
}
|
|
9
|
+
export declare function TextColorMenuItem({ api, parents }: TextColorMenuItemProps): React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
-
import {
|
|
2
|
+
import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
|
|
3
3
|
import type { TextColorPlugin } from '../textColorPluginType';
|
|
4
4
|
export declare const getToolbarComponents: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => RegisterComponent[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-text-color",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.6",
|
|
4
4
|
"description": "Text color plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,25 +36,26 @@
|
|
|
36
36
|
"@atlaskit/css": "^0.12.0",
|
|
37
37
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^3.0.0",
|
|
39
|
+
"@atlaskit/editor-plugin-highlight": "^3.0.0",
|
|
39
40
|
"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
|
|
40
41
|
"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
|
|
41
|
-
"@atlaskit/editor-plugin-toolbar": "^0.
|
|
42
|
+
"@atlaskit/editor-plugin-toolbar": "^0.2.0",
|
|
42
43
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
43
44
|
"@atlaskit/editor-shared-styles": "^3.6.0",
|
|
44
45
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
45
|
-
"@atlaskit/editor-toolbar": "^0.
|
|
46
|
-
"@atlaskit/editor-toolbar-model": "^0.0
|
|
47
|
-
"@atlaskit/icon": "^27.
|
|
46
|
+
"@atlaskit/editor-toolbar": "^0.3.0",
|
|
47
|
+
"@atlaskit/editor-toolbar-model": "^0.1.0",
|
|
48
|
+
"@atlaskit/icon": "^27.12.0",
|
|
48
49
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
49
50
|
"@atlaskit/primitives": "^14.11.0",
|
|
50
51
|
"@atlaskit/theme": "^19.0.0",
|
|
51
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
52
|
+
"@atlaskit/tmp-editor-statsig": "^9.28.0",
|
|
52
53
|
"@atlaskit/tokens": "^6.0.0",
|
|
53
54
|
"@babel/runtime": "^7.0.0",
|
|
54
55
|
"@emotion/react": "^11.7.1"
|
|
55
56
|
},
|
|
56
57
|
"peerDependencies": {
|
|
57
|
-
"@atlaskit/editor-common": "^107.
|
|
58
|
+
"@atlaskit/editor-common": "^107.23.0",
|
|
58
59
|
"react": "^18.2.0",
|
|
59
60
|
"react-dom": "^18.2.0",
|
|
60
61
|
"react-intl-next": "npm:react-intl@^5.18.1"
|