@atlaskit/editor-plugin-highlight 1.12.7 → 1.13.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/commands/palette.js +1 -0
- package/dist/cjs/plugin.js +1 -11
- package/dist/cjs/ui/FloatingToolbarHighlightColor.js +4 -1
- package/dist/cjs/ui/PrimaryToolbarHighlightColor.js +4 -1
- package/dist/es2019/commands/palette.js +1 -0
- package/dist/es2019/plugin.js +1 -11
- package/dist/es2019/ui/FloatingToolbarHighlightColor.js +4 -1
- package/dist/es2019/ui/PrimaryToolbarHighlightColor.js +4 -1
- package/dist/esm/commands/palette.js +1 -0
- package/dist/esm/plugin.js +1 -11
- package/dist/esm/ui/FloatingToolbarHighlightColor.js +4 -1
- package/dist/esm/ui/PrimaryToolbarHighlightColor.js +4 -1
- package/package.json +10 -14
- package/dist/cjs/ui/ToolbarHighlightColor.js +0 -166
- package/dist/es2019/ui/ToolbarHighlightColor.js +0 -154
- package/dist/esm/ui/ToolbarHighlightColor.js +0 -155
- package/dist/types/ui/ToolbarHighlightColor.d.ts +0 -28
- package/dist/types-ts4.5/ui/ToolbarHighlightColor.d.ts +0 -28
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-highlight
|
|
2
2
|
|
|
3
|
+
## 1.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#124190](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124190)
|
|
8
|
+
[`9ab9c4ca2b9df`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ab9c4ca2b9df) -
|
|
9
|
+
Clean-up platform.editor.refactor-highlight-toolbar_mo0pj feature flag
|
|
10
|
+
- [#124209](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124209)
|
|
11
|
+
[`8aa1792f12ed3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8aa1792f12ed3) -
|
|
12
|
+
bump @atlaskit/editor-prosemirror to 5.0.0, bump @atlaskit/adf-schema to 40.1.0
|
|
13
|
+
- [#124190](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124190)
|
|
14
|
+
[`9ab9c4ca2b9df`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ab9c4ca2b9df) -
|
|
15
|
+
Fixed issue where opening the color palette for highlights would get added to history and cause
|
|
16
|
+
you to have to undo multiple times to undo actions
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 1.12.7
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -34,6 +34,7 @@ var setPalette = exports.setPalette = function setPalette(api) {
|
|
|
34
34
|
isPaletteOpen: isPaletteOpen
|
|
35
35
|
});
|
|
36
36
|
(_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(isPaletteOpen, inputMethod))(tr);
|
|
37
|
+
tr.setMeta('addToHistory', false);
|
|
37
38
|
if (dispatch) {
|
|
38
39
|
dispatch(tr);
|
|
39
40
|
}
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -6,13 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.highlightPlugin = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
10
9
|
var _commands = require("./commands");
|
|
11
10
|
var _keymap = require("./pm-plugins/keymap");
|
|
12
11
|
var _main = require("./pm-plugins/main");
|
|
13
12
|
var _FloatingToolbarHighlightColor = require("./ui/FloatingToolbarHighlightColor");
|
|
14
13
|
var _PrimaryToolbarHighlightColor = require("./ui/PrimaryToolbarHighlightColor");
|
|
15
|
-
var _ToolbarHighlightColor = require("./ui/ToolbarHighlightColor");
|
|
16
14
|
var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
|
|
17
15
|
var _api$analytics;
|
|
18
16
|
var api = _ref.api,
|
|
@@ -25,15 +23,7 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
|
|
|
25
23
|
disabled = _ref2.disabled,
|
|
26
24
|
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
|
|
27
25
|
editorView = _ref2.editorView;
|
|
28
|
-
return
|
|
29
|
-
popupsMountPoint: popupsMountPoint,
|
|
30
|
-
popupsBoundariesElement: popupsBoundariesElement,
|
|
31
|
-
popupsScrollableElement: popupsScrollableElement,
|
|
32
|
-
disabled: disabled,
|
|
33
|
-
isToolbarReducedSpacing: isToolbarReducedSpacing,
|
|
34
|
-
pluginInjectionApi: api,
|
|
35
|
-
editorView: editorView
|
|
36
|
-
}) : /*#__PURE__*/_react.default.createElement(_ToolbarHighlightColor.ToolbarHighlightColorWithIntl, {
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarHighlightColor.PrimaryToolbarHighlightColorWithIntl, {
|
|
37
27
|
popupsMountPoint: popupsMountPoint,
|
|
38
28
|
popupsBoundariesElement: popupsBoundariesElement,
|
|
39
29
|
popupsScrollableElement: popupsScrollableElement,
|
|
@@ -18,7 +18,10 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
|
|
|
18
18
|
var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
|
|
19
19
|
var _PaletteDropdown = require("./shared/PaletteDropdown");
|
|
20
20
|
var _useDropdownEvents2 = require("./shared/useDropdownEvents");
|
|
21
|
-
/**
|
|
21
|
+
/**
|
|
22
|
+
* @jsxRuntime classic
|
|
23
|
+
* @jsx jsx
|
|
24
|
+
*/
|
|
22
25
|
|
|
23
26
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
24
27
|
|
|
@@ -21,7 +21,10 @@ var _commands = require("../commands");
|
|
|
21
21
|
var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
|
|
22
22
|
var _PaletteDropdown = require("./shared/PaletteDropdown");
|
|
23
23
|
var _useDropdownEvents2 = require("./shared/useDropdownEvents");
|
|
24
|
-
/**
|
|
24
|
+
/**
|
|
25
|
+
* @jsxRuntime classic
|
|
26
|
+
* @jsx jsx
|
|
27
|
+
*/
|
|
25
28
|
|
|
26
29
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
27
30
|
|
|
@@ -24,6 +24,7 @@ export const setPalette = api => ({
|
|
|
24
24
|
isPaletteOpen
|
|
25
25
|
});
|
|
26
26
|
(_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(isPaletteOpen, inputMethod))(tr);
|
|
27
|
+
tr.setMeta('addToHistory', false);
|
|
27
28
|
if (dispatch) {
|
|
28
29
|
dispatch(tr);
|
|
29
30
|
}
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
import { changeColor } from './commands';
|
|
4
3
|
import { keymapPlugin } from './pm-plugins/keymap';
|
|
5
4
|
import { createPlugin, highlightPluginKey } from './pm-plugins/main';
|
|
6
5
|
import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
|
|
7
6
|
import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
|
|
8
|
-
import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
|
|
9
7
|
export const highlightPlugin = ({
|
|
10
8
|
api,
|
|
11
9
|
config: options
|
|
@@ -19,15 +17,7 @@ export const highlightPlugin = ({
|
|
|
19
17
|
disabled,
|
|
20
18
|
isToolbarReducedSpacing,
|
|
21
19
|
editorView
|
|
22
|
-
}) =>
|
|
23
|
-
popupsMountPoint: popupsMountPoint,
|
|
24
|
-
popupsBoundariesElement: popupsBoundariesElement,
|
|
25
|
-
popupsScrollableElement: popupsScrollableElement,
|
|
26
|
-
disabled: disabled,
|
|
27
|
-
isToolbarReducedSpacing: isToolbarReducedSpacing,
|
|
28
|
-
pluginInjectionApi: api,
|
|
29
|
-
editorView: editorView
|
|
30
|
-
}) : /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
|
|
20
|
+
}) => /*#__PURE__*/React.createElement(PrimaryToolbarHighlightColor, {
|
|
31
21
|
popupsMountPoint: popupsMountPoint,
|
|
32
22
|
popupsBoundariesElement: popupsBoundariesElement,
|
|
33
23
|
popupsScrollableElement: popupsScrollableElement,
|
|
@@ -28,6 +28,7 @@ export var setPalette = function setPalette(api) {
|
|
|
28
28
|
isPaletteOpen: isPaletteOpen
|
|
29
29
|
});
|
|
30
30
|
(_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(isPaletteOpen, inputMethod))(tr);
|
|
31
|
+
tr.setMeta('addToHistory', false);
|
|
31
32
|
if (dispatch) {
|
|
32
33
|
dispatch(tr);
|
|
33
34
|
}
|
package/dist/esm/plugin.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
import { changeColor } from './commands';
|
|
4
3
|
import { keymapPlugin } from './pm-plugins/keymap';
|
|
5
4
|
import { createPlugin, highlightPluginKey } from './pm-plugins/main';
|
|
6
5
|
import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
|
|
7
6
|
import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
|
|
8
|
-
import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
|
|
9
7
|
export var highlightPlugin = function highlightPlugin(_ref) {
|
|
10
8
|
var _api$analytics;
|
|
11
9
|
var api = _ref.api,
|
|
@@ -18,15 +16,7 @@ export var highlightPlugin = function highlightPlugin(_ref) {
|
|
|
18
16
|
disabled = _ref2.disabled,
|
|
19
17
|
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
|
|
20
18
|
editorView = _ref2.editorView;
|
|
21
|
-
return
|
|
22
|
-
popupsMountPoint: popupsMountPoint,
|
|
23
|
-
popupsBoundariesElement: popupsBoundariesElement,
|
|
24
|
-
popupsScrollableElement: popupsScrollableElement,
|
|
25
|
-
disabled: disabled,
|
|
26
|
-
isToolbarReducedSpacing: isToolbarReducedSpacing,
|
|
27
|
-
pluginInjectionApi: api,
|
|
28
|
-
editorView: editorView
|
|
29
|
-
}) : /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
|
|
19
|
+
return /*#__PURE__*/React.createElement(PrimaryToolbarHighlightColor, {
|
|
30
20
|
popupsMountPoint: popupsMountPoint,
|
|
31
21
|
popupsBoundariesElement: popupsBoundariesElement,
|
|
32
22
|
popupsScrollableElement: popupsScrollableElement,
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
3
6
|
import { useRef, useState } from 'react';
|
|
4
7
|
|
|
5
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-highlight",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "Highlight plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,18 +38,17 @@
|
|
|
38
38
|
".": "./src/index.ts"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@atlaskit/editor-common": "^86.
|
|
41
|
+
"@atlaskit/editor-common": "^86.8.0",
|
|
42
42
|
"@atlaskit/editor-palette": "1.6.0",
|
|
43
|
-
"@atlaskit/editor-plugin-analytics": "^1.
|
|
44
|
-
"@atlaskit/editor-plugin-background-color": "^1.
|
|
45
|
-
"@atlaskit/editor-plugin-primary-toolbar": "^1.
|
|
46
|
-
"@atlaskit/editor-plugin-text-formatting": "^1.
|
|
47
|
-
"@atlaskit/editor-prosemirror": "
|
|
43
|
+
"@atlaskit/editor-plugin-analytics": "^1.6.0",
|
|
44
|
+
"@atlaskit/editor-plugin-background-color": "^1.5.0",
|
|
45
|
+
"@atlaskit/editor-plugin-primary-toolbar": "^1.3.0",
|
|
46
|
+
"@atlaskit/editor-plugin-text-formatting": "^1.11.0",
|
|
47
|
+
"@atlaskit/editor-prosemirror": "5.0.1",
|
|
48
48
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
49
|
-
"@atlaskit/editor-tables": "^2.
|
|
50
|
-
"@atlaskit/icon": "^22.
|
|
51
|
-
"@atlaskit/
|
|
52
|
-
"@atlaskit/primitives": "^11.0.0",
|
|
49
|
+
"@atlaskit/editor-tables": "^2.8.0",
|
|
50
|
+
"@atlaskit/icon": "^22.7.0",
|
|
51
|
+
"@atlaskit/primitives": "^11.1.0",
|
|
53
52
|
"@atlaskit/tokens": "^1.56.0",
|
|
54
53
|
"@babel/runtime": "^7.0.0",
|
|
55
54
|
"@emotion/react": "^11.7.1"
|
|
@@ -105,9 +104,6 @@
|
|
|
105
104
|
}
|
|
106
105
|
},
|
|
107
106
|
"platform-feature-flags": {
|
|
108
|
-
"platform.editor.refactor-highlight-toolbar_mo0pj": {
|
|
109
|
-
"type": "boolean"
|
|
110
|
-
},
|
|
111
107
|
"editor_inline_comments_on_inline_nodes": {
|
|
112
108
|
"type": "boolean",
|
|
113
109
|
"referenceOnly": "true"
|
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.ToolbarHighlightColorWithIntl = void 0;
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _react2 = require("@emotion/react");
|
|
12
|
-
var _reactIntlNext = require("react-intl-next");
|
|
13
|
-
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
14
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
15
|
-
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
16
|
-
var _messages = require("@atlaskit/editor-common/messages");
|
|
17
|
-
var _styles = require("@atlaskit/editor-common/styles");
|
|
18
|
-
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
19
|
-
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
20
|
-
var _editorPalette = require("@atlaskit/editor-palette");
|
|
21
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
22
|
-
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
|
|
23
|
-
var _primitives = require("@atlaskit/primitives");
|
|
24
|
-
var _commands = require("../commands");
|
|
25
|
-
var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
|
|
26
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
27
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
28
|
-
/** @jsx jsx */
|
|
29
|
-
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
31
|
-
|
|
32
|
-
var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
|
|
33
|
-
var popupsMountPoint = _ref.popupsMountPoint,
|
|
34
|
-
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
35
|
-
popupsScrollableElement = _ref.popupsScrollableElement,
|
|
36
|
-
isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
|
|
37
|
-
disabled = _ref.disabled,
|
|
38
|
-
pluginInjectionApi = _ref.pluginInjectionApi,
|
|
39
|
-
formatMessage = _ref.intl.formatMessage,
|
|
40
|
-
editorView = _ref.editorView;
|
|
41
|
-
var toolbarItemRef = (0, _react.useRef)(null);
|
|
42
|
-
var _useState = (0, _react.useState)(false),
|
|
43
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
44
|
-
isOpenedByKeyboard = _useState2[0],
|
|
45
|
-
setIsOpenedByKeyboard = _useState2[1];
|
|
46
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
|
|
47
|
-
highlightState = _useSharedPluginState.highlightState;
|
|
48
|
-
var setDropdownOpen = function setDropdownOpen(isOpen) {
|
|
49
|
-
if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
|
|
50
|
-
var state = editorView.state,
|
|
51
|
-
dispatch = editorView.dispatch;
|
|
52
|
-
(0, _commands.setPalette)(pluginInjectionApi)({
|
|
53
|
-
isPaletteOpen: isOpen,
|
|
54
|
-
inputMethod: _analytics.INPUT_METHOD.TOOLBAR
|
|
55
|
-
})(state, dispatch);
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
|
|
59
|
-
var toggleDropdown = function toggleDropdown() {
|
|
60
|
-
return setDropdownOpen(!isDropdownOpen);
|
|
61
|
-
};
|
|
62
|
-
var handleClick = function handleClick() {
|
|
63
|
-
setIsOpenedByKeyboard(false);
|
|
64
|
-
toggleDropdown();
|
|
65
|
-
};
|
|
66
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
67
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
setIsOpenedByKeyboard(true);
|
|
70
|
-
toggleDropdown();
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
var handleClickOutside = function handleClickOutside() {
|
|
74
|
-
if (isDropdownOpen) {
|
|
75
|
-
setDropdownOpen(false);
|
|
76
|
-
setIsOpenedByKeyboard(false);
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
var handleEscapeKeydown = function handleEscapeKeydown() {
|
|
80
|
-
if (isDropdownOpen) {
|
|
81
|
-
var _toolbarItemRef$curre;
|
|
82
|
-
setDropdownOpen(false);
|
|
83
|
-
setIsOpenedByKeyboard(false);
|
|
84
|
-
toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
var handleColorChange = function handleColorChange(color) {
|
|
88
|
-
var _pluginInjectionApi$c, _pluginInjectionApi$a;
|
|
89
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute((0, _commands.changeColor)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
|
|
90
|
-
color: color,
|
|
91
|
-
inputMethod: _analytics.INPUT_METHOD.TOOLBAR
|
|
92
|
-
}));
|
|
93
|
-
setDropdownOpen(false);
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
// Don't render the toolbar option while the plugin is initialising
|
|
97
|
-
if (!highlightState) {
|
|
98
|
-
return null;
|
|
99
|
-
}
|
|
100
|
-
var toolbarButtonLabel = formatMessage(_messages.highlightMessages.highlight);
|
|
101
|
-
|
|
102
|
-
// Get the design token for the active color (if it exists) to modify the toolbar
|
|
103
|
-
// icon, but show the nice rainbow if none is selected
|
|
104
|
-
var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
|
|
105
|
-
|
|
106
|
-
// pixels, used to determine where to horizontally position the dropdown when space is limited
|
|
107
|
-
// this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
|
|
108
|
-
var fitWidth = 242;
|
|
109
|
-
var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.highlightColorPalette, highlightState.activeColor),
|
|
110
|
-
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
|
|
111
|
-
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
|
|
112
|
-
return (0, _react2.jsx)(_primitives.Flex, {
|
|
113
|
-
alignItems: "center"
|
|
114
|
-
}, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
|
|
115
|
-
mountTo: popupsMountPoint,
|
|
116
|
-
boundariesElement: popupsBoundariesElement,
|
|
117
|
-
scrollableElement: popupsScrollableElement,
|
|
118
|
-
isOpen: isDropdownOpen && !highlightState.disabled,
|
|
119
|
-
handleClickOutside: handleClickOutside,
|
|
120
|
-
handleEscapeKeydown: handleEscapeKeydown,
|
|
121
|
-
zIndex: _editorSharedStyles.akEditorMenuZIndex,
|
|
122
|
-
fitWidth: fitWidth,
|
|
123
|
-
closeOnTab: true,
|
|
124
|
-
arrowKeyNavigationProviderOptions: {
|
|
125
|
-
type: _uiMenu.ArrowKeyNavigationType.COLOR,
|
|
126
|
-
selectedRowIndex: selectedRowIndex,
|
|
127
|
-
selectedColumnIndex: selectedColumnIndex,
|
|
128
|
-
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
129
|
-
isPopupPositioned: true
|
|
130
|
-
},
|
|
131
|
-
trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
|
|
132
|
-
buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
|
|
133
|
-
spacing: isToolbarReducedSpacing ? 'none' : 'default',
|
|
134
|
-
disabled: disabled || highlightState.disabled,
|
|
135
|
-
selected: isDropdownOpen,
|
|
136
|
-
"aria-label": (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
|
|
137
|
-
"aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette),
|
|
138
|
-
"aria-expanded": isDropdownOpen,
|
|
139
|
-
"aria-haspopup": true,
|
|
140
|
-
title: (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
|
|
141
|
-
onClick: handleClick,
|
|
142
|
-
onKeyDown: handleKeyDown,
|
|
143
|
-
ref: toolbarItemRef,
|
|
144
|
-
iconBefore: (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
|
|
145
|
-
selectedColor: activeColorToken,
|
|
146
|
-
disabled: highlightState.disabled
|
|
147
|
-
}), (0, _react2.jsx)("span", {
|
|
148
|
-
css: _styles.expandIconWrapperStyle
|
|
149
|
-
}, (0, _react2.jsx)(_chevronDown.default, {
|
|
150
|
-
label: ""
|
|
151
|
-
})))
|
|
152
|
-
})
|
|
153
|
-
}, (0, _react2.jsx)("div", {
|
|
154
|
-
"data-testid": "highlight-color-palette"
|
|
155
|
-
}, (0, _react2.jsx)(_uiColor.ColorPalette, {
|
|
156
|
-
onClick: function onClick(color) {
|
|
157
|
-
return handleColorChange(color);
|
|
158
|
-
},
|
|
159
|
-
selectedColor: highlightState.activeColor,
|
|
160
|
-
paletteOptions: {
|
|
161
|
-
palette: _uiColor.highlightColorPalette,
|
|
162
|
-
hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
|
|
163
|
-
}
|
|
164
|
-
}))));
|
|
165
|
-
};
|
|
166
|
-
var ToolbarHighlightColorWithIntl = exports.ToolbarHighlightColorWithIntl = (0, _reactIntlNext.injectIntl)(ToolbarHighlightColor);
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React, { useRef, useState } from 'react';
|
|
3
|
-
|
|
4
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
|
-
import { jsx } from '@emotion/react';
|
|
6
|
-
import { injectIntl } from 'react-intl-next';
|
|
7
|
-
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
8
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
9
|
-
import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
10
|
-
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
|
|
12
|
-
import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
13
|
-
import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
14
|
-
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
15
|
-
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
16
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
17
|
-
import { Flex } from '@atlaskit/primitives';
|
|
18
|
-
import { changeColor, setPalette } from '../commands';
|
|
19
|
-
import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
|
|
20
|
-
const ToolbarHighlightColor = ({
|
|
21
|
-
popupsMountPoint,
|
|
22
|
-
popupsBoundariesElement,
|
|
23
|
-
popupsScrollableElement,
|
|
24
|
-
isToolbarReducedSpacing,
|
|
25
|
-
disabled,
|
|
26
|
-
pluginInjectionApi,
|
|
27
|
-
intl: {
|
|
28
|
-
formatMessage
|
|
29
|
-
},
|
|
30
|
-
editorView
|
|
31
|
-
}) => {
|
|
32
|
-
const toolbarItemRef = useRef(null);
|
|
33
|
-
const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
|
|
34
|
-
const {
|
|
35
|
-
highlightState
|
|
36
|
-
} = useSharedPluginState(pluginInjectionApi, ['highlight']);
|
|
37
|
-
const setDropdownOpen = isOpen => {
|
|
38
|
-
if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
|
|
39
|
-
const {
|
|
40
|
-
state,
|
|
41
|
-
dispatch
|
|
42
|
-
} = editorView;
|
|
43
|
-
setPalette(pluginInjectionApi)({
|
|
44
|
-
isPaletteOpen: isOpen,
|
|
45
|
-
inputMethod: INPUT_METHOD.TOOLBAR
|
|
46
|
-
})(state, dispatch);
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
|
|
50
|
-
const toggleDropdown = () => setDropdownOpen(!isDropdownOpen);
|
|
51
|
-
const handleClick = () => {
|
|
52
|
-
setIsOpenedByKeyboard(false);
|
|
53
|
-
toggleDropdown();
|
|
54
|
-
};
|
|
55
|
-
const handleKeyDown = event => {
|
|
56
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
setIsOpenedByKeyboard(true);
|
|
59
|
-
toggleDropdown();
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
const handleClickOutside = () => {
|
|
63
|
-
if (isDropdownOpen) {
|
|
64
|
-
setDropdownOpen(false);
|
|
65
|
-
setIsOpenedByKeyboard(false);
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
const handleEscapeKeydown = () => {
|
|
69
|
-
if (isDropdownOpen) {
|
|
70
|
-
var _toolbarItemRef$curre;
|
|
71
|
-
setDropdownOpen(false);
|
|
72
|
-
setIsOpenedByKeyboard(false);
|
|
73
|
-
toolbarItemRef === null || toolbarItemRef === void 0 ? void 0 : (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 ? void 0 : _toolbarItemRef$curre.focus();
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
const handleColorChange = color => {
|
|
77
|
-
var _pluginInjectionApi$c, _pluginInjectionApi$a;
|
|
78
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(changeColor(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
|
|
79
|
-
color,
|
|
80
|
-
inputMethod: INPUT_METHOD.TOOLBAR
|
|
81
|
-
}));
|
|
82
|
-
setDropdownOpen(false);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
// Don't render the toolbar option while the plugin is initialising
|
|
86
|
-
if (!highlightState) {
|
|
87
|
-
return null;
|
|
88
|
-
}
|
|
89
|
-
const toolbarButtonLabel = formatMessage(messages.highlight);
|
|
90
|
-
|
|
91
|
-
// Get the design token for the active color (if it exists) to modify the toolbar
|
|
92
|
-
// icon, but show the nice rainbow if none is selected
|
|
93
|
-
const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
|
|
94
|
-
|
|
95
|
-
// pixels, used to determine where to horizontally position the dropdown when space is limited
|
|
96
|
-
// this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
|
|
97
|
-
const fitWidth = 242;
|
|
98
|
-
const {
|
|
99
|
-
selectedRowIndex,
|
|
100
|
-
selectedColumnIndex
|
|
101
|
-
} = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor);
|
|
102
|
-
return jsx(Flex, {
|
|
103
|
-
alignItems: "center"
|
|
104
|
-
}, jsx(Dropdown, {
|
|
105
|
-
mountTo: popupsMountPoint,
|
|
106
|
-
boundariesElement: popupsBoundariesElement,
|
|
107
|
-
scrollableElement: popupsScrollableElement,
|
|
108
|
-
isOpen: isDropdownOpen && !highlightState.disabled,
|
|
109
|
-
handleClickOutside: handleClickOutside,
|
|
110
|
-
handleEscapeKeydown: handleEscapeKeydown,
|
|
111
|
-
zIndex: akEditorMenuZIndex,
|
|
112
|
-
fitWidth: fitWidth,
|
|
113
|
-
closeOnTab: true,
|
|
114
|
-
arrowKeyNavigationProviderOptions: {
|
|
115
|
-
type: ArrowKeyNavigationType.COLOR,
|
|
116
|
-
selectedRowIndex,
|
|
117
|
-
selectedColumnIndex,
|
|
118
|
-
isOpenedByKeyboard,
|
|
119
|
-
isPopupPositioned: true
|
|
120
|
-
},
|
|
121
|
-
trigger: jsx(ToolbarButton, {
|
|
122
|
-
buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
|
|
123
|
-
spacing: isToolbarReducedSpacing ? 'none' : 'default',
|
|
124
|
-
disabled: disabled || highlightState.disabled,
|
|
125
|
-
selected: isDropdownOpen,
|
|
126
|
-
"aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
|
|
127
|
-
"aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
|
|
128
|
-
"aria-expanded": isDropdownOpen,
|
|
129
|
-
"aria-haspopup": true,
|
|
130
|
-
title: tooltip(toggleHighlightPalette, toolbarButtonLabel),
|
|
131
|
-
onClick: handleClick,
|
|
132
|
-
onKeyDown: handleKeyDown,
|
|
133
|
-
ref: toolbarItemRef,
|
|
134
|
-
iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
|
|
135
|
-
selectedColor: activeColorToken,
|
|
136
|
-
disabled: highlightState.disabled
|
|
137
|
-
}), jsx("span", {
|
|
138
|
-
css: expandIconWrapperStyle
|
|
139
|
-
}, jsx(ExpandIcon, {
|
|
140
|
-
label: ""
|
|
141
|
-
})))
|
|
142
|
-
})
|
|
143
|
-
}, jsx("div", {
|
|
144
|
-
"data-testid": "highlight-color-palette"
|
|
145
|
-
}, jsx(ColorPalette, {
|
|
146
|
-
onClick: color => handleColorChange(color),
|
|
147
|
-
selectedColor: highlightState.activeColor,
|
|
148
|
-
paletteOptions: {
|
|
149
|
-
palette: highlightColorPalette,
|
|
150
|
-
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
|
|
151
|
-
}
|
|
152
|
-
}))));
|
|
153
|
-
};
|
|
154
|
-
export const ToolbarHighlightColorWithIntl = injectIntl(ToolbarHighlightColor);
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
/** @jsx jsx */
|
|
3
|
-
import React, { useRef, useState } from 'react';
|
|
4
|
-
|
|
5
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
|
-
import { injectIntl } from 'react-intl-next';
|
|
8
|
-
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
9
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
10
|
-
import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
11
|
-
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
|
|
12
|
-
import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
|
|
13
|
-
import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
14
|
-
import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
15
|
-
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
16
|
-
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
17
|
-
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
18
|
-
import { Flex } from '@atlaskit/primitives';
|
|
19
|
-
import { changeColor, setPalette } from '../commands';
|
|
20
|
-
import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
|
|
21
|
-
var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
|
|
22
|
-
var popupsMountPoint = _ref.popupsMountPoint,
|
|
23
|
-
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
24
|
-
popupsScrollableElement = _ref.popupsScrollableElement,
|
|
25
|
-
isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
|
|
26
|
-
disabled = _ref.disabled,
|
|
27
|
-
pluginInjectionApi = _ref.pluginInjectionApi,
|
|
28
|
-
formatMessage = _ref.intl.formatMessage,
|
|
29
|
-
editorView = _ref.editorView;
|
|
30
|
-
var toolbarItemRef = useRef(null);
|
|
31
|
-
var _useState = useState(false),
|
|
32
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
-
isOpenedByKeyboard = _useState2[0],
|
|
34
|
-
setIsOpenedByKeyboard = _useState2[1];
|
|
35
|
-
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
|
|
36
|
-
highlightState = _useSharedPluginState.highlightState;
|
|
37
|
-
var setDropdownOpen = function setDropdownOpen(isOpen) {
|
|
38
|
-
if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
|
|
39
|
-
var state = editorView.state,
|
|
40
|
-
dispatch = editorView.dispatch;
|
|
41
|
-
setPalette(pluginInjectionApi)({
|
|
42
|
-
isPaletteOpen: isOpen,
|
|
43
|
-
inputMethod: INPUT_METHOD.TOOLBAR
|
|
44
|
-
})(state, dispatch);
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
|
|
48
|
-
var toggleDropdown = function toggleDropdown() {
|
|
49
|
-
return setDropdownOpen(!isDropdownOpen);
|
|
50
|
-
};
|
|
51
|
-
var handleClick = function handleClick() {
|
|
52
|
-
setIsOpenedByKeyboard(false);
|
|
53
|
-
toggleDropdown();
|
|
54
|
-
};
|
|
55
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
56
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
setIsOpenedByKeyboard(true);
|
|
59
|
-
toggleDropdown();
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
var handleClickOutside = function handleClickOutside() {
|
|
63
|
-
if (isDropdownOpen) {
|
|
64
|
-
setDropdownOpen(false);
|
|
65
|
-
setIsOpenedByKeyboard(false);
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
var handleEscapeKeydown = function handleEscapeKeydown() {
|
|
69
|
-
if (isDropdownOpen) {
|
|
70
|
-
var _toolbarItemRef$curre;
|
|
71
|
-
setDropdownOpen(false);
|
|
72
|
-
setIsOpenedByKeyboard(false);
|
|
73
|
-
toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
var handleColorChange = function handleColorChange(color) {
|
|
77
|
-
var _pluginInjectionApi$c, _pluginInjectionApi$a;
|
|
78
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(changeColor(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
|
|
79
|
-
color: color,
|
|
80
|
-
inputMethod: INPUT_METHOD.TOOLBAR
|
|
81
|
-
}));
|
|
82
|
-
setDropdownOpen(false);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
// Don't render the toolbar option while the plugin is initialising
|
|
86
|
-
if (!highlightState) {
|
|
87
|
-
return null;
|
|
88
|
-
}
|
|
89
|
-
var toolbarButtonLabel = formatMessage(messages.highlight);
|
|
90
|
-
|
|
91
|
-
// Get the design token for the active color (if it exists) to modify the toolbar
|
|
92
|
-
// icon, but show the nice rainbow if none is selected
|
|
93
|
-
var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
|
|
94
|
-
|
|
95
|
-
// pixels, used to determine where to horizontally position the dropdown when space is limited
|
|
96
|
-
// this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
|
|
97
|
-
var fitWidth = 242;
|
|
98
|
-
var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor),
|
|
99
|
-
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
|
|
100
|
-
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
|
|
101
|
-
return jsx(Flex, {
|
|
102
|
-
alignItems: "center"
|
|
103
|
-
}, jsx(Dropdown, {
|
|
104
|
-
mountTo: popupsMountPoint,
|
|
105
|
-
boundariesElement: popupsBoundariesElement,
|
|
106
|
-
scrollableElement: popupsScrollableElement,
|
|
107
|
-
isOpen: isDropdownOpen && !highlightState.disabled,
|
|
108
|
-
handleClickOutside: handleClickOutside,
|
|
109
|
-
handleEscapeKeydown: handleEscapeKeydown,
|
|
110
|
-
zIndex: akEditorMenuZIndex,
|
|
111
|
-
fitWidth: fitWidth,
|
|
112
|
-
closeOnTab: true,
|
|
113
|
-
arrowKeyNavigationProviderOptions: {
|
|
114
|
-
type: ArrowKeyNavigationType.COLOR,
|
|
115
|
-
selectedRowIndex: selectedRowIndex,
|
|
116
|
-
selectedColumnIndex: selectedColumnIndex,
|
|
117
|
-
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
118
|
-
isPopupPositioned: true
|
|
119
|
-
},
|
|
120
|
-
trigger: jsx(ToolbarButton, {
|
|
121
|
-
buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
|
|
122
|
-
spacing: isToolbarReducedSpacing ? 'none' : 'default',
|
|
123
|
-
disabled: disabled || highlightState.disabled,
|
|
124
|
-
selected: isDropdownOpen,
|
|
125
|
-
"aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
|
|
126
|
-
"aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
|
|
127
|
-
"aria-expanded": isDropdownOpen,
|
|
128
|
-
"aria-haspopup": true,
|
|
129
|
-
title: tooltip(toggleHighlightPalette, toolbarButtonLabel),
|
|
130
|
-
onClick: handleClick,
|
|
131
|
-
onKeyDown: handleKeyDown,
|
|
132
|
-
ref: toolbarItemRef,
|
|
133
|
-
iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
|
|
134
|
-
selectedColor: activeColorToken,
|
|
135
|
-
disabled: highlightState.disabled
|
|
136
|
-
}), jsx("span", {
|
|
137
|
-
css: expandIconWrapperStyle
|
|
138
|
-
}, jsx(ExpandIcon, {
|
|
139
|
-
label: ""
|
|
140
|
-
})))
|
|
141
|
-
})
|
|
142
|
-
}, jsx("div", {
|
|
143
|
-
"data-testid": "highlight-color-palette"
|
|
144
|
-
}, jsx(ColorPalette, {
|
|
145
|
-
onClick: function onClick(color) {
|
|
146
|
-
return handleColorChange(color);
|
|
147
|
-
},
|
|
148
|
-
selectedColor: highlightState.activeColor,
|
|
149
|
-
paletteOptions: {
|
|
150
|
-
palette: highlightColorPalette,
|
|
151
|
-
hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
|
|
152
|
-
}
|
|
153
|
-
}))));
|
|
154
|
-
};
|
|
155
|
-
export var ToolbarHighlightColorWithIntl = injectIntl(ToolbarHighlightColor);
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
|
-
import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
5
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
6
|
-
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
-
import type { HighlightPlugin } from '../plugin';
|
|
8
|
-
export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-next").WithIntlProps<{
|
|
9
|
-
popupsMountPoint?: HTMLElement | undefined;
|
|
10
|
-
popupsBoundariesElement?: HTMLElement | undefined;
|
|
11
|
-
popupsScrollableElement?: HTMLElement | undefined;
|
|
12
|
-
disabled: boolean;
|
|
13
|
-
isToolbarReducedSpacing: boolean;
|
|
14
|
-
dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
|
|
15
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
16
|
-
editorView: EditorView;
|
|
17
|
-
} & WrappedComponentProps>> & {
|
|
18
|
-
WrappedComponent: React.ComponentType<{
|
|
19
|
-
popupsMountPoint?: HTMLElement | undefined;
|
|
20
|
-
popupsBoundariesElement?: HTMLElement | undefined;
|
|
21
|
-
popupsScrollableElement?: HTMLElement | undefined;
|
|
22
|
-
disabled: boolean;
|
|
23
|
-
isToolbarReducedSpacing: boolean;
|
|
24
|
-
dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
|
|
25
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
26
|
-
editorView: EditorView;
|
|
27
|
-
} & WrappedComponentProps>;
|
|
28
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
|
-
import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
5
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
6
|
-
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
-
import type { HighlightPlugin } from '../plugin';
|
|
8
|
-
export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-next").WithIntlProps<{
|
|
9
|
-
popupsMountPoint?: HTMLElement | undefined;
|
|
10
|
-
popupsBoundariesElement?: HTMLElement | undefined;
|
|
11
|
-
popupsScrollableElement?: HTMLElement | undefined;
|
|
12
|
-
disabled: boolean;
|
|
13
|
-
isToolbarReducedSpacing: boolean;
|
|
14
|
-
dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
|
|
15
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
16
|
-
editorView: EditorView;
|
|
17
|
-
} & WrappedComponentProps>> & {
|
|
18
|
-
WrappedComponent: React.ComponentType<{
|
|
19
|
-
popupsMountPoint?: HTMLElement | undefined;
|
|
20
|
-
popupsBoundariesElement?: HTMLElement | undefined;
|
|
21
|
-
popupsScrollableElement?: HTMLElement | undefined;
|
|
22
|
-
disabled: boolean;
|
|
23
|
-
isToolbarReducedSpacing: boolean;
|
|
24
|
-
dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
|
|
25
|
-
pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
|
|
26
|
-
editorView: EditorView;
|
|
27
|
-
} & WrappedComponentProps>;
|
|
28
|
-
};
|