@atlaskit/editor-plugin-highlight 3.0.11 → 3.0.13
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/HighlightColorMenuItem.compiled.css +0 -1
- package/dist/cjs/ui/HighlightColorMenuItem.js +48 -14
- package/dist/cjs/ui/toolbar-component.js +4 -2
- package/dist/es2019/ui/HighlightColorMenuItem.compiled.css +0 -1
- package/dist/es2019/ui/HighlightColorMenuItem.js +42 -14
- package/dist/es2019/ui/toolbar-component.js +5 -2
- package/dist/esm/ui/HighlightColorMenuItem.compiled.css +0 -1
- package/dist/esm/ui/HighlightColorMenuItem.js +50 -16
- package/dist/esm/ui/toolbar-component.js +4 -2
- package/dist/types/ui/HighlightColorMenuItem.d.ts +3 -1
- package/dist/types-ts4.5/ui/HighlightColorMenuItem.d.ts +3 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-highlight
|
|
2
2
|
|
|
3
|
+
## 3.0.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 3.0.12
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`4d47716053c75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d47716053c75) -
|
|
14
|
+
[ux] ED-28799 Complete text colour / highlight menu items
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 3.0.11
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -3,5 +3,4 @@
|
|
|
3
3
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
4
4
|
._1dqonqa1{border-style:solid}
|
|
5
5
|
._1h6dmuej{border-color:var(--ds-border,#091e4224)}
|
|
6
|
-
._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
|
|
7
6
|
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
@@ -8,44 +8,78 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
});
|
|
9
9
|
exports.HighlightColorMenuItem = HighlightColorMenuItem;
|
|
10
10
|
require("./HighlightColorMenuItem.compiled.css");
|
|
11
|
-
var
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var React = _react;
|
|
12
13
|
var _runtime = require("@compiled/react/runtime");
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
var _reactIntlNext = require("react-intl-next");
|
|
13
16
|
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
|
|
17
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
18
|
+
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
14
19
|
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
15
20
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
16
21
|
var _editorPalette = require("@atlaskit/editor-palette");
|
|
17
22
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
18
23
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
19
24
|
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); }
|
|
25
|
+
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; }
|
|
26
|
+
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; }
|
|
20
27
|
var styles = {
|
|
21
28
|
container: "_zulpu2gc _19pkpxbi",
|
|
22
|
-
colorPalette: "_18u0x0bf",
|
|
23
29
|
removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
|
|
24
30
|
};
|
|
25
|
-
var colorPalette = _uiColor.highlightColorPaletteNext.filter(function (color) {
|
|
26
|
-
return color.label !== 'No color';
|
|
27
|
-
});
|
|
28
31
|
function HighlightColorMenuItem(_ref) {
|
|
29
|
-
var api = _ref.api
|
|
32
|
+
var api = _ref.api,
|
|
33
|
+
parents = _ref.parents;
|
|
34
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
35
|
+
formatMessage = _useIntl.formatMessage;
|
|
30
36
|
var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
|
|
31
|
-
|
|
37
|
+
var _useToolbarDropdownMe = (0, _editorToolbar.useToolbarDropdownMenu)(),
|
|
38
|
+
closeMenu = _useToolbarDropdownMe.closeMenu;
|
|
39
|
+
var handleHighlightColorChange = (0, _react.useCallback)(function (color) {
|
|
40
|
+
var _api$highlight;
|
|
41
|
+
if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight = _api$highlight.commands) !== null && _api$highlight !== void 0 && _api$highlight.changeColor) {
|
|
42
|
+
api.core.actions.execute(api.highlight.commands.changeColor({
|
|
43
|
+
color: color,
|
|
44
|
+
inputMethod: (0, _toolbar.getInputMethodFromParentKeys)(parents)
|
|
45
|
+
}));
|
|
46
|
+
closeMenu();
|
|
47
|
+
}
|
|
48
|
+
}, [api, closeMenu, parents]);
|
|
49
|
+
var colorPalette = (0, _react.useMemo)(function () {
|
|
50
|
+
return _uiColor.highlightColorPaletteNext.filter(function (color) {
|
|
51
|
+
return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
|
|
52
|
+
}).map(function (color) {
|
|
53
|
+
return _objectSpread(_objectSpread({}, color), {}, {
|
|
54
|
+
decorator: /*#__PURE__*/React.createElement(_editorToolbar.TextColorIcon, {
|
|
55
|
+
label: color.label,
|
|
56
|
+
size: "small",
|
|
57
|
+
spacing: "spacious"
|
|
58
|
+
})
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
}, []);
|
|
62
|
+
return /*#__PURE__*/React.createElement(_compiled.Stack, {
|
|
32
63
|
xcss: styles.container,
|
|
33
64
|
testId: "highlight-color-menu-item"
|
|
34
65
|
}, /*#__PURE__*/React.createElement(_compiled.Text, {
|
|
35
66
|
weight: "bold"
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
67
|
+
}, formatMessage(_messages.highlightMessages.highlight)), /*#__PURE__*/React.createElement(_editorToolbar.ColorPalette, {
|
|
68
|
+
onClick: function onClick(color) {
|
|
69
|
+
handleHighlightColorChange(color);
|
|
70
|
+
},
|
|
40
71
|
selectedColor: activeColor || null,
|
|
41
72
|
paletteOptions: {
|
|
42
73
|
palette: colorPalette || [],
|
|
43
74
|
hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
|
|
44
75
|
}
|
|
45
|
-
})
|
|
76
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
46
77
|
className: (0, _runtime.ax)([styles.removeHighlightButton])
|
|
47
78
|
}, /*#__PURE__*/React.createElement(_new.default, {
|
|
48
79
|
shouldFitContainer: true,
|
|
49
|
-
appearance: "subtle"
|
|
50
|
-
|
|
80
|
+
appearance: "subtle",
|
|
81
|
+
onClick: function onClick() {
|
|
82
|
+
return handleHighlightColorChange(_uiColor.REMOVE_HIGHLIGHT_COLOR);
|
|
83
|
+
}
|
|
84
|
+
}, "Remove highlight")));
|
|
51
85
|
}
|
|
@@ -16,9 +16,11 @@ var getToolbarComponent = exports.getToolbarComponent = function getToolbarCompo
|
|
|
16
16
|
parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
|
|
17
17
|
rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.HIGHLIGHT_MENU_ITEM.key]
|
|
18
18
|
})],
|
|
19
|
-
component: function component() {
|
|
19
|
+
component: function component(_ref) {
|
|
20
|
+
var parents = _ref.parents;
|
|
20
21
|
return /*#__PURE__*/_react.default.createElement(_HighlightColorMenuItem.HighlightColorMenuItem, {
|
|
21
|
-
api: api
|
|
22
|
+
api: api,
|
|
23
|
+
parents: parents
|
|
22
24
|
});
|
|
23
25
|
}
|
|
24
26
|
})];
|
|
@@ -3,5 +3,4 @@
|
|
|
3
3
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
4
4
|
._1dqonqa1{border-style:solid}
|
|
5
5
|
._1h6dmuej{border-color:var(--ds-border,#091e4224)}
|
|
6
|
-
._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
|
|
7
6
|
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
@@ -2,40 +2,68 @@
|
|
|
2
2
|
import "./HighlightColorMenuItem.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { useCallback, useMemo } from 'react';
|
|
6
|
+
import { useIntl } from 'react-intl-next';
|
|
5
7
|
import Button from '@atlaskit/button/new';
|
|
6
|
-
import {
|
|
8
|
+
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
|
|
9
|
+
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
|
|
10
|
+
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
|
|
7
11
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
8
12
|
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
9
|
-
import {
|
|
10
|
-
import { Stack,
|
|
13
|
+
import { ColorPalette, TextColorIcon, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
14
|
+
import { Stack, Text } from '@atlaskit/primitives/compiled';
|
|
11
15
|
const styles = {
|
|
12
16
|
container: "_zulpu2gc _19pkpxbi",
|
|
13
|
-
colorPalette: "_18u0x0bf",
|
|
14
17
|
removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
|
|
15
18
|
};
|
|
16
|
-
const colorPalette = highlightColorPaletteNext.filter(color => color.label !== 'No color');
|
|
17
19
|
export function HighlightColorMenuItem({
|
|
18
|
-
api
|
|
20
|
+
api,
|
|
21
|
+
parents
|
|
19
22
|
}) {
|
|
23
|
+
const {
|
|
24
|
+
formatMessage
|
|
25
|
+
} = useIntl();
|
|
20
26
|
const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
|
|
21
|
-
|
|
27
|
+
const {
|
|
28
|
+
closeMenu
|
|
29
|
+
} = useToolbarDropdownMenu();
|
|
30
|
+
const handleHighlightColorChange = useCallback(color => {
|
|
31
|
+
var _api$highlight, _api$highlight$comman;
|
|
32
|
+
if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight$comman = _api$highlight.commands) !== null && _api$highlight$comman !== void 0 && _api$highlight$comman.changeColor) {
|
|
33
|
+
api.core.actions.execute(api.highlight.commands.changeColor({
|
|
34
|
+
color,
|
|
35
|
+
inputMethod: getInputMethodFromParentKeys(parents)
|
|
36
|
+
}));
|
|
37
|
+
closeMenu();
|
|
38
|
+
}
|
|
39
|
+
}, [api, closeMenu, parents]);
|
|
40
|
+
const colorPalette = useMemo(() => highlightColorPaletteNext.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
|
|
41
|
+
...color,
|
|
42
|
+
decorator: /*#__PURE__*/React.createElement(TextColorIcon, {
|
|
43
|
+
label: color.label,
|
|
44
|
+
size: "small",
|
|
45
|
+
spacing: "spacious"
|
|
46
|
+
})
|
|
47
|
+
})), []);
|
|
48
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
22
49
|
xcss: styles.container,
|
|
23
50
|
testId: "highlight-color-menu-item"
|
|
24
51
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
25
52
|
weight: "bold"
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
53
|
+
}, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette, {
|
|
54
|
+
onClick: color => {
|
|
55
|
+
handleHighlightColorChange(color);
|
|
56
|
+
},
|
|
30
57
|
selectedColor: activeColor || null,
|
|
31
58
|
paletteOptions: {
|
|
32
59
|
palette: colorPalette || [],
|
|
33
60
|
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
|
|
34
61
|
}
|
|
35
|
-
})
|
|
62
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
36
63
|
className: ax([styles.removeHighlightButton])
|
|
37
64
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
38
65
|
shouldFitContainer: true,
|
|
39
|
-
appearance: "subtle"
|
|
40
|
-
|
|
66
|
+
appearance: "subtle",
|
|
67
|
+
onClick: () => handleHighlightColorChange(REMOVE_HIGHLIGHT_COLOR)
|
|
68
|
+
}, "Remove highlight")));
|
|
41
69
|
}
|
|
@@ -8,8 +8,11 @@ export const getToolbarComponent = api => {
|
|
|
8
8
|
...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
|
|
9
9
|
rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[HIGHLIGHT_MENU_ITEM.key]
|
|
10
10
|
}],
|
|
11
|
-
component: (
|
|
12
|
-
|
|
11
|
+
component: ({
|
|
12
|
+
parents
|
|
13
|
+
}) => /*#__PURE__*/React.createElement(HighlightColorMenuItem, {
|
|
14
|
+
api: api,
|
|
15
|
+
parents: parents
|
|
13
16
|
})
|
|
14
17
|
}];
|
|
15
18
|
};
|
|
@@ -3,5 +3,4 @@
|
|
|
3
3
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
4
4
|
._1dqonqa1{border-style:solid}
|
|
5
5
|
._1h6dmuej{border-color:var(--ds-border,#091e4224)}
|
|
6
|
-
._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
|
|
7
6
|
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
@@ -1,42 +1,76 @@
|
|
|
1
1
|
/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
3
|
import "./HighlightColorMenuItem.compiled.css";
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
+
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; }
|
|
7
|
+
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) { _defineProperty(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; }
|
|
8
|
+
import { useCallback, useMemo } from 'react';
|
|
9
|
+
import { useIntl } from 'react-intl-next';
|
|
5
10
|
import Button from '@atlaskit/button/new';
|
|
6
|
-
import {
|
|
11
|
+
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
|
|
12
|
+
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
|
|
13
|
+
import { REMOVE_HIGHLIGHT_COLOR, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
|
|
7
14
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
8
15
|
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
9
|
-
import {
|
|
10
|
-
import { Stack,
|
|
16
|
+
import { ColorPalette, TextColorIcon, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
17
|
+
import { Stack, Text } from '@atlaskit/primitives/compiled';
|
|
11
18
|
var styles = {
|
|
12
19
|
container: "_zulpu2gc _19pkpxbi",
|
|
13
|
-
colorPalette: "_18u0x0bf",
|
|
14
20
|
removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
|
|
15
21
|
};
|
|
16
|
-
var colorPalette = highlightColorPaletteNext.filter(function (color) {
|
|
17
|
-
return color.label !== 'No color';
|
|
18
|
-
});
|
|
19
22
|
export function HighlightColorMenuItem(_ref) {
|
|
20
|
-
var api = _ref.api
|
|
23
|
+
var api = _ref.api,
|
|
24
|
+
parents = _ref.parents;
|
|
25
|
+
var _useIntl = useIntl(),
|
|
26
|
+
formatMessage = _useIntl.formatMessage;
|
|
21
27
|
var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
|
|
22
|
-
|
|
28
|
+
var _useToolbarDropdownMe = useToolbarDropdownMenu(),
|
|
29
|
+
closeMenu = _useToolbarDropdownMe.closeMenu;
|
|
30
|
+
var handleHighlightColorChange = useCallback(function (color) {
|
|
31
|
+
var _api$highlight;
|
|
32
|
+
if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight = _api$highlight.commands) !== null && _api$highlight !== void 0 && _api$highlight.changeColor) {
|
|
33
|
+
api.core.actions.execute(api.highlight.commands.changeColor({
|
|
34
|
+
color: color,
|
|
35
|
+
inputMethod: getInputMethodFromParentKeys(parents)
|
|
36
|
+
}));
|
|
37
|
+
closeMenu();
|
|
38
|
+
}
|
|
39
|
+
}, [api, closeMenu, parents]);
|
|
40
|
+
var colorPalette = useMemo(function () {
|
|
41
|
+
return highlightColorPaletteNext.filter(function (color) {
|
|
42
|
+
return color.value !== REMOVE_HIGHLIGHT_COLOR;
|
|
43
|
+
}).map(function (color) {
|
|
44
|
+
return _objectSpread(_objectSpread({}, color), {}, {
|
|
45
|
+
decorator: /*#__PURE__*/React.createElement(TextColorIcon, {
|
|
46
|
+
label: color.label,
|
|
47
|
+
size: "small",
|
|
48
|
+
spacing: "spacious"
|
|
49
|
+
})
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
}, []);
|
|
53
|
+
return /*#__PURE__*/React.createElement(Stack, {
|
|
23
54
|
xcss: styles.container,
|
|
24
55
|
testId: "highlight-color-menu-item"
|
|
25
56
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
26
57
|
weight: "bold"
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
58
|
+
}, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette, {
|
|
59
|
+
onClick: function onClick(color) {
|
|
60
|
+
handleHighlightColorChange(color);
|
|
61
|
+
},
|
|
31
62
|
selectedColor: activeColor || null,
|
|
32
63
|
paletteOptions: {
|
|
33
64
|
palette: colorPalette || [],
|
|
34
65
|
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
|
|
35
66
|
}
|
|
36
|
-
})
|
|
67
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
37
68
|
className: ax([styles.removeHighlightButton])
|
|
38
69
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
39
70
|
shouldFitContainer: true,
|
|
40
|
-
appearance: "subtle"
|
|
41
|
-
|
|
71
|
+
appearance: "subtle",
|
|
72
|
+
onClick: function onClick() {
|
|
73
|
+
return handleHighlightColorChange(REMOVE_HIGHLIGHT_COLOR);
|
|
74
|
+
}
|
|
75
|
+
}, "Remove highlight")));
|
|
42
76
|
}
|
|
@@ -9,9 +9,11 @@ export var getToolbarComponent = function getToolbarComponent(api) {
|
|
|
9
9
|
parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
|
|
10
10
|
rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[HIGHLIGHT_MENU_ITEM.key]
|
|
11
11
|
})],
|
|
12
|
-
component: function component() {
|
|
12
|
+
component: function component(_ref) {
|
|
13
|
+
var parents = _ref.parents;
|
|
13
14
|
return /*#__PURE__*/React.createElement(HighlightColorMenuItem, {
|
|
14
|
-
api: api
|
|
15
|
+
api: api,
|
|
16
|
+
parents: parents
|
|
15
17
|
});
|
|
16
18
|
}
|
|
17
19
|
})];
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
6
|
+
import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
|
|
6
7
|
import type { HighlightPlugin } from '../highlightPluginType';
|
|
7
8
|
interface HighlightMenuItemProps {
|
|
8
9
|
api: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
10
|
+
parents: ToolbarComponentTypes;
|
|
9
11
|
}
|
|
10
|
-
export declare function HighlightColorMenuItem({ api }: HighlightMenuItemProps): JSX.Element;
|
|
12
|
+
export declare function HighlightColorMenuItem({ api, parents }: HighlightMenuItemProps): JSX.Element;
|
|
11
13
|
export {};
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
6
|
+
import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
|
|
6
7
|
import type { HighlightPlugin } from '../highlightPluginType';
|
|
7
8
|
interface HighlightMenuItemProps {
|
|
8
9
|
api: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
10
|
+
parents: ToolbarComponentTypes;
|
|
9
11
|
}
|
|
10
|
-
export declare function HighlightColorMenuItem({ api }: HighlightMenuItemProps): JSX.Element;
|
|
12
|
+
export declare function HighlightColorMenuItem({ api, parents }: HighlightMenuItemProps): JSX.Element;
|
|
11
13
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-highlight",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.13",
|
|
4
4
|
"description": "Highlight plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@atlaskit/adf-schema": "^50.2.0",
|
|
39
|
-
"@atlaskit/button": "^23.
|
|
39
|
+
"@atlaskit/button": "^23.4.0",
|
|
40
40
|
"@atlaskit/css": "^0.12.0",
|
|
41
41
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
42
42
|
"@atlaskit/editor-plugin-analytics": "^3.0.0",
|
|
@@ -47,18 +47,18 @@
|
|
|
47
47
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
48
48
|
"@atlaskit/editor-shared-styles": "^3.6.0",
|
|
49
49
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
50
|
-
"@atlaskit/editor-toolbar": "^0.
|
|
50
|
+
"@atlaskit/editor-toolbar": "^0.3.0",
|
|
51
51
|
"@atlaskit/editor-toolbar-model": "^0.1.0",
|
|
52
|
-
"@atlaskit/icon": "^27.
|
|
52
|
+
"@atlaskit/icon": "^27.12.0",
|
|
53
53
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
54
54
|
"@atlaskit/primitives": "^14.11.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^10.0.0",
|
|
56
56
|
"@atlaskit/tokens": "^6.0.0",
|
|
57
57
|
"@babel/runtime": "^7.0.0",
|
|
58
58
|
"@emotion/react": "^11.7.1"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@atlaskit/editor-common": "^107.
|
|
61
|
+
"@atlaskit/editor-common": "^107.25.0",
|
|
62
62
|
"react": "^18.2.0",
|
|
63
63
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
64
64
|
},
|