@atlaskit/editor-core 187.17.6 → 187.18.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 +11 -0
- package/dist/cjs/labs/next/presets/default.js +2 -2
- package/dist/cjs/plugins/annotation/toolbar.js +31 -8
- package/dist/cjs/plugins/index.js +0 -7
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/labs/next/presets/default.js +1 -1
- package/dist/es2019/plugins/annotation/toolbar.js +34 -9
- package/dist/es2019/plugins/index.js +0 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/labs/next/presets/default.js +1 -1
- package/dist/esm/plugins/annotation/toolbar.js +30 -7
- package/dist/esm/plugins/index.js +0 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/index.d.ts +0 -5
- package/dist/types/labs/next/presets/default.d.ts +28 -28
- package/dist/types/plugins/annotation/types.d.ts +9 -3
- package/dist/types/plugins/index.d.ts +0 -1
- package/dist/types/plugins/list/pm-plugins/input-rules/wrapping-join-rule.d.ts +1 -2
- package/dist/types-ts4.5/index.d.ts +0 -5
- package/dist/types-ts4.5/labs/next/presets/default.d.ts +28 -28
- package/dist/types-ts4.5/plugins/annotation/types.d.ts +9 -3
- package/dist/types-ts4.5/plugins/index.d.ts +0 -1
- package/dist/types-ts4.5/plugins/list/pm-plugins/input-rules/wrapping-join-rule.d.ts +1 -2
- package/package.json +2 -1
- package/report.api.md +1 -24
- package/tmp/api-report-tmp.d.ts +1 -21
- package/dist/cjs/plugins/text-formatting/actions.js +0 -188
- package/dist/cjs/plugins/text-formatting/commands/clear-formatting.js +0 -111
- package/dist/cjs/plugins/text-formatting/commands/text-formatting.js +0 -143
- package/dist/cjs/plugins/text-formatting/commands/transform-to-code.js +0 -68
- package/dist/cjs/plugins/text-formatting/index.js +0 -136
- package/dist/cjs/plugins/text-formatting/pm-plugins/clear-formatting-keymap.js +0 -21
- package/dist/cjs/plugins/text-formatting/pm-plugins/clear-formatting.js +0 -36
- package/dist/cjs/plugins/text-formatting/pm-plugins/cursor.js +0 -55
- package/dist/cjs/plugins/text-formatting/pm-plugins/input-rule.js +0 -276
- package/dist/cjs/plugins/text-formatting/pm-plugins/keymap.js +0 -52
- package/dist/cjs/plugins/text-formatting/pm-plugins/main.js +0 -113
- package/dist/cjs/plugins/text-formatting/pm-plugins/plugin-key.js +0 -9
- package/dist/cjs/plugins/text-formatting/pm-plugins/smart-input-rule.js +0 -176
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/constants.js +0 -19
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/dropdown-menu.js +0 -86
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js +0 -53
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js +0 -225
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/menu-state.js +0 -23
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.js +0 -60
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/index.js +0 -201
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/more-button.js +0 -40
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js +0 -46
- package/dist/cjs/plugins/text-formatting/ui/Toolbar/types.js +0 -17
- package/dist/cjs/plugins/text-formatting/utils/cell-selection.js +0 -12
- package/dist/cjs/plugins/text-formatting/utils.js +0 -86
- package/dist/es2019/plugins/text-formatting/actions.js +0 -161
- package/dist/es2019/plugins/text-formatting/commands/clear-formatting.js +0 -105
- package/dist/es2019/plugins/text-formatting/commands/text-formatting.js +0 -144
- package/dist/es2019/plugins/text-formatting/commands/transform-to-code.js +0 -71
- package/dist/es2019/plugins/text-formatting/index.js +0 -127
- package/dist/es2019/plugins/text-formatting/pm-plugins/clear-formatting-keymap.js +0 -10
- package/dist/es2019/plugins/text-formatting/pm-plugins/clear-formatting.js +0 -26
- package/dist/es2019/plugins/text-formatting/pm-plugins/cursor.js +0 -52
- package/dist/es2019/plugins/text-formatting/pm-plugins/input-rule.js +0 -244
- package/dist/es2019/plugins/text-formatting/pm-plugins/keymap.js +0 -43
- package/dist/es2019/plugins/text-formatting/pm-plugins/main.js +0 -109
- package/dist/es2019/plugins/text-formatting/pm-plugins/plugin-key.js +0 -2
- package/dist/es2019/plugins/text-formatting/pm-plugins/smart-input-rule.js +0 -155
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/constants.js +0 -20
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/dropdown-menu.js +0 -66
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js +0 -42
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js +0 -210
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/menu-state.js +0 -11
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.js +0 -48
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js +0 -168
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/more-button.js +0 -32
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js +0 -36
- package/dist/es2019/plugins/text-formatting/ui/Toolbar/types.js +0 -10
- package/dist/es2019/plugins/text-formatting/utils/cell-selection.js +0 -5
- package/dist/es2019/plugins/text-formatting/utils.js +0 -74
- package/dist/esm/plugins/text-formatting/actions.js +0 -168
- package/dist/esm/plugins/text-formatting/commands/clear-formatting.js +0 -101
- package/dist/esm/plugins/text-formatting/commands/text-formatting.js +0 -134
- package/dist/esm/plugins/text-formatting/commands/transform-to-code.js +0 -61
- package/dist/esm/plugins/text-formatting/index.js +0 -128
- package/dist/esm/plugins/text-formatting/pm-plugins/clear-formatting-keymap.js +0 -10
- package/dist/esm/plugins/text-formatting/pm-plugins/clear-formatting.js +0 -28
- package/dist/esm/plugins/text-formatting/pm-plugins/cursor.js +0 -48
- package/dist/esm/plugins/text-formatting/pm-plugins/input-rule.js +0 -259
- package/dist/esm/plugins/text-formatting/pm-plugins/keymap.js +0 -43
- package/dist/esm/plugins/text-formatting/pm-plugins/main.js +0 -98
- package/dist/esm/plugins/text-formatting/pm-plugins/plugin-key.js +0 -2
- package/dist/esm/plugins/text-formatting/pm-plugins/smart-input-rule.js +0 -169
- package/dist/esm/plugins/text-formatting/ui/Toolbar/constants.js +0 -8
- package/dist/esm/plugins/text-formatting/ui/Toolbar/dropdown-menu.js +0 -75
- package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js +0 -45
- package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js +0 -213
- package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/menu-state.js +0 -15
- package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.js +0 -50
- package/dist/esm/plugins/text-formatting/ui/Toolbar/index.js +0 -191
- package/dist/esm/plugins/text-formatting/ui/Toolbar/more-button.js +0 -31
- package/dist/esm/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js +0 -35
- package/dist/esm/plugins/text-formatting/ui/Toolbar/types.js +0 -10
- package/dist/esm/plugins/text-formatting/utils/cell-selection.js +0 -5
- package/dist/esm/plugins/text-formatting/utils.js +0 -75
- package/dist/types/plugins/text-formatting/actions.d.ts +0 -22
- package/dist/types/plugins/text-formatting/commands/clear-formatting.d.ts +0 -6
- package/dist/types/plugins/text-formatting/commands/text-formatting.d.ts +0 -5
- package/dist/types/plugins/text-formatting/commands/transform-to-code.d.ts +0 -2
- package/dist/types/plugins/text-formatting/index.d.ts +0 -17
- package/dist/types/plugins/text-formatting/pm-plugins/clear-formatting-keymap.d.ts +0 -4
- package/dist/types/plugins/text-formatting/pm-plugins/clear-formatting.d.ts +0 -8
- package/dist/types/plugins/text-formatting/pm-plugins/cursor.d.ts +0 -3
- package/dist/types/plugins/text-formatting/pm-plugins/input-rule.d.ts +0 -24
- package/dist/types/plugins/text-formatting/pm-plugins/keymap.d.ts +0 -4
- package/dist/types/plugins/text-formatting/pm-plugins/main.d.ts +0 -7
- package/dist/types/plugins/text-formatting/pm-plugins/plugin-key.d.ts +0 -3
- package/dist/types/plugins/text-formatting/pm-plugins/smart-input-rule.d.ts +0 -3
- package/dist/types/plugins/text-formatting/ui/Toolbar/constants.d.ts +0 -6
- package/dist/types/plugins/text-formatting/ui/Toolbar/dropdown-menu.d.ts +0 -15
- package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.d.ts +0 -7
- package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.d.ts +0 -14
- package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/menu-state.d.ts +0 -1
- package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.d.ts +0 -20
- package/dist/types/plugins/text-formatting/ui/Toolbar/index.d.ts +0 -26
- package/dist/types/plugins/text-formatting/ui/Toolbar/more-button.d.ts +0 -13
- package/dist/types/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.d.ts +0 -9
- package/dist/types/plugins/text-formatting/ui/Toolbar/types.d.ts +0 -32
- package/dist/types/plugins/text-formatting/utils/cell-selection.d.ts +0 -3
- package/dist/types/plugins/text-formatting/utils.d.ts +0 -11
- package/dist/types-ts4.5/plugins/text-formatting/actions.d.ts +0 -22
- package/dist/types-ts4.5/plugins/text-formatting/commands/clear-formatting.d.ts +0 -6
- package/dist/types-ts4.5/plugins/text-formatting/commands/text-formatting.d.ts +0 -5
- package/dist/types-ts4.5/plugins/text-formatting/commands/transform-to-code.d.ts +0 -2
- package/dist/types-ts4.5/plugins/text-formatting/index.d.ts +0 -19
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/clear-formatting-keymap.d.ts +0 -4
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/clear-formatting.d.ts +0 -8
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/cursor.d.ts +0 -3
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/input-rule.d.ts +0 -24
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/keymap.d.ts +0 -4
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/main.d.ts +0 -7
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/plugin-key.d.ts +0 -3
- package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/smart-input-rule.d.ts +0 -3
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/constants.d.ts +0 -6
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/dropdown-menu.d.ts +0 -15
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.d.ts +0 -7
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.d.ts +0 -14
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/menu-state.d.ts +0 -5
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.d.ts +0 -20
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/index.d.ts +0 -26
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/more-button.d.ts +0 -13
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.d.ts +0 -9
- package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/types.d.ts +0 -32
- package/dist/types-ts4.5/plugins/text-formatting/utils/cell-selection.d.ts +0 -3
- package/dist/types-ts4.5/plugins/text-formatting/utils.d.ts +0 -11
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import React, { useCallback, useMemo, useState } from 'react';
|
|
3
|
-
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
4
|
-
import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
|
|
5
|
-
import { useMenuState } from './hooks/menu-state';
|
|
6
|
-
import { MoreButton } from './more-button';
|
|
7
|
-
export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
8
|
-
var editorView = _ref.editorView,
|
|
9
|
-
moreButtonLabel = _ref.moreButtonLabel,
|
|
10
|
-
isReducedSpacing = _ref.isReducedSpacing,
|
|
11
|
-
items = _ref.items,
|
|
12
|
-
hasFormattingActive = _ref.hasFormattingActive,
|
|
13
|
-
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
14
|
-
popupsMountPoint = _ref.popupsMountPoint,
|
|
15
|
-
popupsScrollableElement = _ref.popupsScrollableElement;
|
|
16
|
-
var _useMenuState = useMenuState(),
|
|
17
|
-
_useMenuState2 = _slicedToArray(_useMenuState, 3),
|
|
18
|
-
isMenuOpen = _useMenuState2[0],
|
|
19
|
-
toggleMenu = _useMenuState2[1],
|
|
20
|
-
closeMenu = _useMenuState2[2];
|
|
21
|
-
var _useState = useState(false),
|
|
22
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
-
isOpenedByKeyboard = _useState2[0],
|
|
24
|
-
setIsOpenedByKeyboard = _useState2[1];
|
|
25
|
-
var group = useMemo(function () {
|
|
26
|
-
return [{
|
|
27
|
-
items: items
|
|
28
|
-
}];
|
|
29
|
-
}, [items]);
|
|
30
|
-
var onItemActivated = useCallback(function (_ref2) {
|
|
31
|
-
var item = _ref2.item,
|
|
32
|
-
_ref2$shouldCloseMenu = _ref2.shouldCloseMenu,
|
|
33
|
-
shouldCloseMenu = _ref2$shouldCloseMenu === void 0 ? true : _ref2$shouldCloseMenu;
|
|
34
|
-
item.command(editorView.state, editorView.dispatch);
|
|
35
|
-
if (shouldCloseMenu) {
|
|
36
|
-
closeMenu();
|
|
37
|
-
}
|
|
38
|
-
}, [editorView.state, editorView.dispatch, closeMenu]);
|
|
39
|
-
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
40
|
-
mountTo: popupsMountPoint,
|
|
41
|
-
onOpenChange: closeMenu,
|
|
42
|
-
boundariesElement: popupsBoundariesElement,
|
|
43
|
-
scrollableElement: popupsScrollableElement,
|
|
44
|
-
onItemActivated: onItemActivated,
|
|
45
|
-
isOpen: isMenuOpen,
|
|
46
|
-
items: group,
|
|
47
|
-
zIndex: akEditorMenuZIndex,
|
|
48
|
-
fitHeight: 188,
|
|
49
|
-
fitWidth: 136,
|
|
50
|
-
shouldUseDefaultRole: true,
|
|
51
|
-
shouldFocusFirstItem: function shouldFocusFirstItem() {
|
|
52
|
-
if (isOpenedByKeyboard) {
|
|
53
|
-
setIsOpenedByKeyboard(false);
|
|
54
|
-
}
|
|
55
|
-
return isOpenedByKeyboard;
|
|
56
|
-
}
|
|
57
|
-
}, /*#__PURE__*/React.createElement(MoreButton, {
|
|
58
|
-
isSelected: isMenuOpen || hasFormattingActive,
|
|
59
|
-
label: moreButtonLabel,
|
|
60
|
-
isReducedSpacing: isReducedSpacing,
|
|
61
|
-
isDisabled: false,
|
|
62
|
-
onClick: function onClick() {
|
|
63
|
-
toggleMenu();
|
|
64
|
-
setIsOpenedByKeyboard(false);
|
|
65
|
-
},
|
|
66
|
-
onKeyDown: function onKeyDown(event) {
|
|
67
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
toggleMenu();
|
|
70
|
-
setIsOpenedByKeyboard(true);
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
"aria-expanded": isMenuOpen
|
|
74
|
-
}));
|
|
75
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { useCallback, useMemo } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
5
|
-
import { toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
6
|
-
import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
|
|
7
|
-
import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
|
|
8
|
-
import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
9
|
-
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
10
|
-
var useClearFormattingPluginState = function useClearFormattingPluginState(editorState) {
|
|
11
|
-
return useMemo(function () {
|
|
12
|
-
return clearFormattingPluginKey.getState(editorState);
|
|
13
|
-
}, [editorState]);
|
|
14
|
-
};
|
|
15
|
-
export var useClearIcon = function useClearIcon(_ref) {
|
|
16
|
-
var intl = _ref.intl,
|
|
17
|
-
editorState = _ref.editorState,
|
|
18
|
-
editorAnalyticsAPI = _ref.editorAnalyticsAPI;
|
|
19
|
-
var pluginState = useClearFormattingPluginState(editorState);
|
|
20
|
-
var isPluginAvailable = Boolean(pluginState);
|
|
21
|
-
var formattingIsPresent = Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.formattingIsPresent);
|
|
22
|
-
var clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
|
|
23
|
-
var clearFormattingToolbar = useCallback(function (state, dispatch) {
|
|
24
|
-
return clearFormattingWithAnalytics(INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch);
|
|
25
|
-
}, [editorAnalyticsAPI]);
|
|
26
|
-
return useMemo(function () {
|
|
27
|
-
if (!isPluginAvailable) {
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
return {
|
|
31
|
-
key: 'clearFormatting',
|
|
32
|
-
command: clearFormattingToolbar,
|
|
33
|
-
content: clearFormattingLabel,
|
|
34
|
-
elemAfter: jsx("div", {
|
|
35
|
-
css: shortcutStyle
|
|
36
|
-
}, tooltip(clearFormattingKeymap)),
|
|
37
|
-
value: {
|
|
38
|
-
name: 'clearFormatting'
|
|
39
|
-
},
|
|
40
|
-
isActive: false,
|
|
41
|
-
isDisabled: !formattingIsPresent,
|
|
42
|
-
'aria-label': clearFormattingKeymap ? tooltip(clearFormattingKeymap, String(clearFormattingLabel)) : String(clearFormattingLabel)
|
|
43
|
-
};
|
|
44
|
-
}, [isPluginAvailable, clearFormattingToolbar, clearFormattingLabel, formattingIsPresent]);
|
|
45
|
-
};
|
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
var _IconsMarkSchema;
|
|
3
|
-
/** @jsx jsx */
|
|
4
|
-
import React, { useMemo } from 'react';
|
|
5
|
-
import { jsx } from '@emotion/react';
|
|
6
|
-
import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
|
|
7
|
-
import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
|
|
8
|
-
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
9
|
-
import { toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
10
|
-
import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../actions';
|
|
11
|
-
import { TOOLBAR_ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
12
|
-
import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
|
|
13
|
-
import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
|
|
14
|
-
import { IconTypes } from '../types';
|
|
15
|
-
var withToolbarInputMethod = function withToolbarInputMethod(func) {
|
|
16
|
-
return func({
|
|
17
|
-
inputMethod: INPUT_METHOD.TOOLBAR
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
var IconButtons = function IconButtons(editorAnalyticsAPI) {
|
|
21
|
-
return {
|
|
22
|
-
strong: {
|
|
23
|
-
buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
|
|
24
|
-
command: withToolbarInputMethod(toggleStrongWithAnalytics(editorAnalyticsAPI)),
|
|
25
|
-
message: toolbarMessages.bold,
|
|
26
|
-
tooltipKeymap: toggleBold,
|
|
27
|
-
component: function component() {
|
|
28
|
-
return jsx(BoldIcon, {
|
|
29
|
-
label: ""
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
em: {
|
|
34
|
-
buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
|
|
35
|
-
command: withToolbarInputMethod(toggleEmWithAnalytics(editorAnalyticsAPI)),
|
|
36
|
-
message: toolbarMessages.italic,
|
|
37
|
-
tooltipKeymap: toggleItalic,
|
|
38
|
-
component: function component() {
|
|
39
|
-
return jsx(ItalicIcon, {
|
|
40
|
-
label: ""
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
underline: {
|
|
45
|
-
command: withToolbarInputMethod(toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
|
|
46
|
-
message: toolbarMessages.underline,
|
|
47
|
-
tooltipKeymap: toggleUnderline
|
|
48
|
-
},
|
|
49
|
-
strike: {
|
|
50
|
-
command: withToolbarInputMethod(toggleStrikeWithAnalytics(editorAnalyticsAPI)),
|
|
51
|
-
message: toolbarMessages.strike,
|
|
52
|
-
tooltipKeymap: toggleStrikethrough
|
|
53
|
-
},
|
|
54
|
-
code: {
|
|
55
|
-
command: withToolbarInputMethod(toggleCodeWithAnalytics(editorAnalyticsAPI)),
|
|
56
|
-
message: toolbarMessages.code,
|
|
57
|
-
tooltipKeymap: toggleCode
|
|
58
|
-
},
|
|
59
|
-
subscript: {
|
|
60
|
-
command: withToolbarInputMethod(toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
|
|
61
|
-
message: toolbarMessages.subscript,
|
|
62
|
-
tooltipKeymap: toggleSubscript
|
|
63
|
-
},
|
|
64
|
-
superscript: {
|
|
65
|
-
command: withToolbarInputMethod(toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
|
|
66
|
-
message: toolbarMessages.superscript,
|
|
67
|
-
tooltipKeymap: toggleSuperscript
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
var getIcon = function getIcon(_ref) {
|
|
72
|
-
var iconType = _ref.iconType,
|
|
73
|
-
isDisabled = _ref.isDisabled,
|
|
74
|
-
isActive = _ref.isActive,
|
|
75
|
-
intl = _ref.intl,
|
|
76
|
-
editorAnalyticsAPI = _ref.editorAnalyticsAPI;
|
|
77
|
-
var icon = IconButtons(editorAnalyticsAPI)[iconType];
|
|
78
|
-
var content = intl.formatMessage(icon.message);
|
|
79
|
-
var tooltipKeymap = icon.tooltipKeymap;
|
|
80
|
-
return {
|
|
81
|
-
content: content,
|
|
82
|
-
buttonId: icon.buttonId,
|
|
83
|
-
iconMark: iconType,
|
|
84
|
-
key: iconType,
|
|
85
|
-
command: icon.command,
|
|
86
|
-
iconElement: icon.component ? icon.component() : undefined,
|
|
87
|
-
tooltipElement: tooltipKeymap ? jsx(ToolTipContent, {
|
|
88
|
-
description: content,
|
|
89
|
-
keymap: tooltipKeymap
|
|
90
|
-
}) : undefined,
|
|
91
|
-
elemAfter: tooltipKeymap ? jsx("div", {
|
|
92
|
-
css: shortcutStyle
|
|
93
|
-
}, tooltip(tooltipKeymap)) : undefined,
|
|
94
|
-
value: {
|
|
95
|
-
name: iconType
|
|
96
|
-
},
|
|
97
|
-
isActive: isActive,
|
|
98
|
-
isDisabled: isDisabled,
|
|
99
|
-
'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
|
|
100
|
-
'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
|
|
101
|
-
};
|
|
102
|
-
};
|
|
103
|
-
var IconsMarkSchema = (_IconsMarkSchema = {}, _defineProperty(_IconsMarkSchema, IconTypes.strong, 'strong'), _defineProperty(_IconsMarkSchema, IconTypes.em, 'em'), _defineProperty(_IconsMarkSchema, IconTypes.strike, 'strike'), _defineProperty(_IconsMarkSchema, IconTypes.code, 'code'), _defineProperty(_IconsMarkSchema, IconTypes.underline, 'underline'), _defineProperty(_IconsMarkSchema, IconTypes.superscript, 'subsup'), _defineProperty(_IconsMarkSchema, IconTypes.subscript, 'subsup'), _IconsMarkSchema);
|
|
104
|
-
var buildMenuIconState = function buildMenuIconState(iconMark) {
|
|
105
|
-
return function (_ref2) {
|
|
106
|
-
var schema = _ref2.schema,
|
|
107
|
-
textFormattingPluginState = _ref2.textFormattingPluginState;
|
|
108
|
-
var hasPluginState = Boolean(Object.keys(textFormattingPluginState || {}).length);
|
|
109
|
-
var markSchema = IconsMarkSchema[iconMark];
|
|
110
|
-
var hasSchemaMark = Boolean(schema.marks[markSchema]);
|
|
111
|
-
if (!hasPluginState) {
|
|
112
|
-
return {
|
|
113
|
-
isActive: false,
|
|
114
|
-
isDisabled: true,
|
|
115
|
-
isHidden: false,
|
|
116
|
-
hasSchemaMark: hasSchemaMark
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
var isActive = textFormattingPluginState["".concat(iconMark, "Active")];
|
|
120
|
-
var isDisabled = textFormattingPluginState["".concat(iconMark, "Disabled")];
|
|
121
|
-
var isHidden = textFormattingPluginState["".concat(iconMark, "Hidden")];
|
|
122
|
-
return {
|
|
123
|
-
isActive: Boolean(isActive),
|
|
124
|
-
isDisabled: Boolean(isDisabled),
|
|
125
|
-
isHidden: Boolean(isHidden),
|
|
126
|
-
hasSchemaMark: hasSchemaMark
|
|
127
|
-
};
|
|
128
|
-
};
|
|
129
|
-
};
|
|
130
|
-
var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
|
|
131
|
-
var getState = buildMenuIconState(iconMark);
|
|
132
|
-
return function (_ref3) {
|
|
133
|
-
var schema = _ref3.schema,
|
|
134
|
-
textFormattingPluginState = _ref3.textFormattingPluginState,
|
|
135
|
-
intl = _ref3.intl,
|
|
136
|
-
isToolbarDisabled = _ref3.isToolbarDisabled;
|
|
137
|
-
var iconState = getState({
|
|
138
|
-
schema: schema,
|
|
139
|
-
textFormattingPluginState: textFormattingPluginState
|
|
140
|
-
});
|
|
141
|
-
var isActive = iconState.isActive,
|
|
142
|
-
isDisabled = iconState.isDisabled,
|
|
143
|
-
isHidden = iconState.isHidden,
|
|
144
|
-
hasSchemaMark = iconState.hasSchemaMark;
|
|
145
|
-
var iconComponent = useMemo(function () {
|
|
146
|
-
return getIcon({
|
|
147
|
-
iconType: IconTypes[iconMark],
|
|
148
|
-
isDisabled: isToolbarDisabled || isDisabled,
|
|
149
|
-
isActive: isActive,
|
|
150
|
-
intl: intl,
|
|
151
|
-
editorAnalyticsAPI: editorAnalyticsAPI
|
|
152
|
-
});
|
|
153
|
-
}, [isToolbarDisabled, isDisabled, isActive, intl]);
|
|
154
|
-
var shouldRenderIcon = hasSchemaMark && !isHidden;
|
|
155
|
-
return useMemo(function () {
|
|
156
|
-
return shouldRenderIcon ? iconComponent : null;
|
|
157
|
-
}, [shouldRenderIcon, iconComponent]);
|
|
158
|
-
};
|
|
159
|
-
};
|
|
160
|
-
var useTextFormattingPluginState = function useTextFormattingPluginState(editorState) {
|
|
161
|
-
return useMemo(function () {
|
|
162
|
-
var pluginState = textFormattingPluginKey.getState(editorState);
|
|
163
|
-
|
|
164
|
-
// TODO: ED-13910 for reasons that goes beyond my knowledge. This is the only way to make the current unit tests happy. Even thought this was wrong before
|
|
165
|
-
return pluginState;
|
|
166
|
-
}, [editorState]);
|
|
167
|
-
};
|
|
168
|
-
export var useFormattingIcons = function useFormattingIcons(_ref4) {
|
|
169
|
-
var isToolbarDisabled = _ref4.isToolbarDisabled,
|
|
170
|
-
editorState = _ref4.editorState,
|
|
171
|
-
intl = _ref4.intl,
|
|
172
|
-
editorAnalyticsAPI = _ref4.editorAnalyticsAPI;
|
|
173
|
-
var textFormattingPluginState = useTextFormattingPluginState(editorState);
|
|
174
|
-
var schema = editorState.schema;
|
|
175
|
-
var props = {
|
|
176
|
-
schema: schema,
|
|
177
|
-
textFormattingPluginState: textFormattingPluginState,
|
|
178
|
-
intl: intl,
|
|
179
|
-
isToolbarDisabled: Boolean(isToolbarDisabled)
|
|
180
|
-
};
|
|
181
|
-
var buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI);
|
|
182
|
-
var buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI);
|
|
183
|
-
var buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI);
|
|
184
|
-
var buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI);
|
|
185
|
-
var buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI);
|
|
186
|
-
var buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI);
|
|
187
|
-
var buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI);
|
|
188
|
-
var strongIcon = buildStrongIcon(props);
|
|
189
|
-
var emIcon = buildEmIcon(props);
|
|
190
|
-
var underlineIcon = buildUnderlineIcon(props);
|
|
191
|
-
var strikeIcon = buildStrikeIcon(props);
|
|
192
|
-
var codeIcon = buildCodeIcon(props);
|
|
193
|
-
var subscriptIcon = buildSubscriptIcon(props);
|
|
194
|
-
var superscriptIcon = buildSuperscriptIcon(props);
|
|
195
|
-
var result = useMemo(function () {
|
|
196
|
-
return [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon];
|
|
197
|
-
}, [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
|
|
198
|
-
return result;
|
|
199
|
-
};
|
|
200
|
-
export var useHasFormattingActived = function useHasFormattingActived(_ref5) {
|
|
201
|
-
var editorState = _ref5.editorState,
|
|
202
|
-
iconTypeList = _ref5.iconTypeList;
|
|
203
|
-
var textFormattingPluginState = useTextFormattingPluginState(editorState);
|
|
204
|
-
var hasActiveFormatting = useMemo(function () {
|
|
205
|
-
if (!textFormattingPluginState) {
|
|
206
|
-
return false;
|
|
207
|
-
}
|
|
208
|
-
return iconTypeList.some(function (iconType) {
|
|
209
|
-
return textFormattingPluginState["".concat(iconType, "Active")];
|
|
210
|
-
});
|
|
211
|
-
}, [textFormattingPluginState, iconTypeList]);
|
|
212
|
-
return hasActiveFormatting;
|
|
213
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import { useCallback, useState } from 'react';
|
|
3
|
-
export var useMenuState = function useMenuState() {
|
|
4
|
-
var _useState = useState(false),
|
|
5
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
6
|
-
isMenuOpen = _useState2[0],
|
|
7
|
-
setIsMenuOpened = _useState2[1];
|
|
8
|
-
var toggleMenu = useCallback(function () {
|
|
9
|
-
setIsMenuOpened(!isMenuOpen);
|
|
10
|
-
}, [isMenuOpen]);
|
|
11
|
-
var closeMenu = useCallback(function () {
|
|
12
|
-
setIsMenuOpened(false);
|
|
13
|
-
}, []);
|
|
14
|
-
return [isMenuOpen, toggleMenu, closeMenu];
|
|
15
|
-
};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { ResponsiveCustomButtonToolbar, ResponsiveCustomMenu, DefaultButtonsMenu, DefaultButtonsToolbar } from '../constants';
|
|
4
|
-
export var useResponsiveIconTypeButtons = function useResponsiveIconTypeButtons(_ref) {
|
|
5
|
-
var toolbarSize = _ref.toolbarSize,
|
|
6
|
-
responsivenessEnabled = _ref.responsivenessEnabled;
|
|
7
|
-
var iconTypeList = useMemo(function () {
|
|
8
|
-
return ResponsiveCustomButtonToolbar[toolbarSize];
|
|
9
|
-
}, [toolbarSize]);
|
|
10
|
-
return responsivenessEnabled ? iconTypeList : DefaultButtonsToolbar;
|
|
11
|
-
};
|
|
12
|
-
export var useResponsiveIconTypeMenu = function useResponsiveIconTypeMenu(_ref2) {
|
|
13
|
-
var toolbarSize = _ref2.toolbarSize,
|
|
14
|
-
responsivenessEnabled = _ref2.responsivenessEnabled;
|
|
15
|
-
var iconTypeList = useMemo(function () {
|
|
16
|
-
return ResponsiveCustomMenu[toolbarSize];
|
|
17
|
-
}, [toolbarSize]);
|
|
18
|
-
return responsivenessEnabled ? iconTypeList : DefaultButtonsMenu;
|
|
19
|
-
};
|
|
20
|
-
export var useResponsiveToolbarButtons = function useResponsiveToolbarButtons(_ref3) {
|
|
21
|
-
var icons = _ref3.icons,
|
|
22
|
-
toolbarSize = _ref3.toolbarSize,
|
|
23
|
-
responsivenessEnabled = _ref3.responsivenessEnabled;
|
|
24
|
-
var iconTypeList = useResponsiveIconTypeButtons({
|
|
25
|
-
toolbarSize: toolbarSize,
|
|
26
|
-
responsivenessEnabled: responsivenessEnabled
|
|
27
|
-
});
|
|
28
|
-
var iconsPosition = useMemo(function () {
|
|
29
|
-
return icons.reduce(function (acc, icon) {
|
|
30
|
-
if (!icon || !icon.iconMark) {
|
|
31
|
-
return acc;
|
|
32
|
-
}
|
|
33
|
-
var isIconSingleButton = iconTypeList.includes(icon.iconMark);
|
|
34
|
-
if (isIconSingleButton) {
|
|
35
|
-
return {
|
|
36
|
-
dropdownItems: acc.dropdownItems,
|
|
37
|
-
singleItems: [].concat(_toConsumableArray(acc.singleItems), [icon])
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
return {
|
|
41
|
-
dropdownItems: [].concat(_toConsumableArray(acc.dropdownItems), [icon]),
|
|
42
|
-
singleItems: acc.singleItems
|
|
43
|
-
};
|
|
44
|
-
}, {
|
|
45
|
-
dropdownItems: [],
|
|
46
|
-
singleItems: []
|
|
47
|
-
});
|
|
48
|
-
}, [icons, iconTypeList]);
|
|
49
|
-
return iconsPosition;
|
|
50
|
-
};
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
7
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
8
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
10
|
-
/** @jsx jsx */
|
|
11
|
-
import React, { useMemo, useState, useEffect } from 'react';
|
|
12
|
-
import { jsx } from '@emotion/react';
|
|
13
|
-
import { injectIntl } from 'react-intl-next';
|
|
14
|
-
import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
|
|
15
|
-
import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
|
|
16
|
-
import { useClearIcon } from './hooks/clear-formatting-icon';
|
|
17
|
-
import { useResponsiveToolbarButtons, useResponsiveIconTypeMenu } from './hooks/responsive-toolbar-buttons';
|
|
18
|
-
import { SingleToolbarButtons } from './single-toolbar-buttons';
|
|
19
|
-
import { MoreButton } from './more-button';
|
|
20
|
-
import { FormattingTextDropdownMenu } from './dropdown-menu';
|
|
21
|
-
import { toolbarMessages } from '@atlaskit/editor-common/messages';
|
|
22
|
-
import { compareItemsArrays, isArrayContainsContent } from '../../utils';
|
|
23
|
-
import { Announcer } from '@atlaskit/editor-common/ui';
|
|
24
|
-
import { usePreviousState } from '@atlaskit/editor-common/hooks';
|
|
25
|
-
var ToolbarFormatting = function ToolbarFormatting(_ref) {
|
|
26
|
-
var _usePreviousState;
|
|
27
|
-
var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
|
|
28
|
-
popupsMountPoint = _ref.popupsMountPoint,
|
|
29
|
-
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
30
|
-
popupsScrollableElement = _ref.popupsScrollableElement,
|
|
31
|
-
editorView = _ref.editorView,
|
|
32
|
-
toolbarSize = _ref.toolbarSize,
|
|
33
|
-
isReducedSpacing = _ref.isReducedSpacing,
|
|
34
|
-
isToolbarDisabled = _ref.isToolbarDisabled,
|
|
35
|
-
intl = _ref.intl,
|
|
36
|
-
editorAnalyticsAPI = _ref.editorAnalyticsAPI;
|
|
37
|
-
var editorState = useMemo(function () {
|
|
38
|
-
return editorView.state;
|
|
39
|
-
}, [editorView.state]);
|
|
40
|
-
var _useState = useState(''),
|
|
41
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
42
|
-
message = _useState2[0],
|
|
43
|
-
setMessage = _useState2[1];
|
|
44
|
-
var defaultIcons = useFormattingIcons({
|
|
45
|
-
editorState: editorState,
|
|
46
|
-
intl: intl,
|
|
47
|
-
isToolbarDisabled: isToolbarDisabled,
|
|
48
|
-
editorAnalyticsAPI: editorAnalyticsAPI
|
|
49
|
-
});
|
|
50
|
-
var clearIcon = useClearIcon({
|
|
51
|
-
editorState: editorState,
|
|
52
|
-
intl: intl,
|
|
53
|
-
editorAnalyticsAPI: editorAnalyticsAPI
|
|
54
|
-
});
|
|
55
|
-
var menuIconTypeList = useResponsiveIconTypeMenu({
|
|
56
|
-
toolbarSize: toolbarSize,
|
|
57
|
-
responsivenessEnabled: shouldUseResponsiveToolbar
|
|
58
|
-
});
|
|
59
|
-
var hasFormattingActive = useHasFormattingActived({
|
|
60
|
-
editorState: editorView.state,
|
|
61
|
-
iconTypeList: menuIconTypeList
|
|
62
|
-
});
|
|
63
|
-
var _useResponsiveToolbar = useResponsiveToolbarButtons({
|
|
64
|
-
icons: defaultIcons,
|
|
65
|
-
toolbarSize: toolbarSize,
|
|
66
|
-
responsivenessEnabled: shouldUseResponsiveToolbar
|
|
67
|
-
}),
|
|
68
|
-
dropdownItems = _useResponsiveToolbar.dropdownItems,
|
|
69
|
-
singleItems = _useResponsiveToolbar.singleItems;
|
|
70
|
-
var clearFormattingStatus = intl.formatMessage(toolbarMessages.textFormattingOff);
|
|
71
|
-
var superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
|
|
72
|
-
var subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
|
|
73
|
-
var activeItems = [].concat(_toConsumableArray(dropdownItems), _toConsumableArray(singleItems)).filter(function (item) {
|
|
74
|
-
return item.isActive;
|
|
75
|
-
});
|
|
76
|
-
var prevActiveItems = (_usePreviousState = usePreviousState(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
|
|
77
|
-
var fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
|
|
78
|
-
var fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
|
|
79
|
-
var comparedItems;
|
|
80
|
-
var screenReaderMessage = '';
|
|
81
|
-
if (prevActiveItems && activeItems.length > prevActiveItems.length) {
|
|
82
|
-
comparedItems = compareItemsArrays(activeItems, prevActiveItems);
|
|
83
|
-
screenReaderMessage = intl.formatMessage(toolbarMessages.on, {
|
|
84
|
-
formattingType: comparedItems[0].content
|
|
85
|
-
});
|
|
86
|
-
} else {
|
|
87
|
-
comparedItems = compareItemsArrays(prevActiveItems, activeItems);
|
|
88
|
-
if (comparedItems && comparedItems.length) {
|
|
89
|
-
var _activeItems$;
|
|
90
|
-
screenReaderMessage = intl.formatMessage(toolbarMessages.off, {
|
|
91
|
-
formattingType: comparedItems[0].content
|
|
92
|
-
});
|
|
93
|
-
if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
|
|
94
|
-
screenReaderMessage = intl.formatMessage(toolbarMessages.codeOn, {
|
|
95
|
-
textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
if (fromSuperscriptToSubscript) {
|
|
99
|
-
screenReaderMessage = superscriptOffSubscriptOnStatus;
|
|
100
|
-
}
|
|
101
|
-
if (fromSubscriptToSuperscript) {
|
|
102
|
-
screenReaderMessage = subscriptOffSuperscriptOnStatus;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// handle 'Clear formatting' status for screen readers
|
|
108
|
-
if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
|
|
109
|
-
screenReaderMessage = clearFormattingStatus;
|
|
110
|
-
}
|
|
111
|
-
var items = useMemo(function () {
|
|
112
|
-
if (!clearIcon) {
|
|
113
|
-
return dropdownItems;
|
|
114
|
-
}
|
|
115
|
-
return [].concat(_toConsumableArray(dropdownItems), [clearIcon]);
|
|
116
|
-
}, [clearIcon, dropdownItems]);
|
|
117
|
-
var moreFormattingButtonLabel = intl.formatMessage(toolbarMessages.moreFormatting);
|
|
118
|
-
useEffect(function () {
|
|
119
|
-
if (screenReaderMessage) {
|
|
120
|
-
setMessage(screenReaderMessage);
|
|
121
|
-
}
|
|
122
|
-
}, [screenReaderMessage]);
|
|
123
|
-
return jsx("span", {
|
|
124
|
-
css: buttonGroupStyle
|
|
125
|
-
}, message && jsx(Announcer, {
|
|
126
|
-
ariaLive: "assertive",
|
|
127
|
-
text: message,
|
|
128
|
-
ariaRelevant: "additions",
|
|
129
|
-
delay: 250
|
|
130
|
-
}), jsx(SingleToolbarButtons, {
|
|
131
|
-
items: singleItems,
|
|
132
|
-
editorView: editorView,
|
|
133
|
-
isReducedSpacing: isReducedSpacing
|
|
134
|
-
}), jsx("span", {
|
|
135
|
-
css: wrapperStyle
|
|
136
|
-
}, isToolbarDisabled ? jsx("div", null, jsx(MoreButton, {
|
|
137
|
-
label: moreFormattingButtonLabel,
|
|
138
|
-
isReducedSpacing: isReducedSpacing,
|
|
139
|
-
isDisabled: true,
|
|
140
|
-
isSelected: false,
|
|
141
|
-
"aria-expanded": undefined,
|
|
142
|
-
"aria-pressed": undefined
|
|
143
|
-
})) : jsx(FormattingTextDropdownMenu, {
|
|
144
|
-
popupsMountPoint: popupsMountPoint,
|
|
145
|
-
popupsBoundariesElement: popupsBoundariesElement,
|
|
146
|
-
popupsScrollableElement: popupsScrollableElement,
|
|
147
|
-
editorView: editorView,
|
|
148
|
-
isReducedSpacing: isReducedSpacing,
|
|
149
|
-
moreButtonLabel: moreFormattingButtonLabel,
|
|
150
|
-
hasFormattingActive: hasFormattingActive,
|
|
151
|
-
items: items
|
|
152
|
-
}), jsx("span", {
|
|
153
|
-
css: separatorStyles
|
|
154
|
-
})));
|
|
155
|
-
};
|
|
156
|
-
var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
|
|
157
|
-
_inherits(Toolbar, _React$PureComponent);
|
|
158
|
-
var _super = _createSuper(Toolbar);
|
|
159
|
-
function Toolbar() {
|
|
160
|
-
_classCallCheck(this, Toolbar);
|
|
161
|
-
return _super.apply(this, arguments);
|
|
162
|
-
}
|
|
163
|
-
_createClass(Toolbar, [{
|
|
164
|
-
key: "render",
|
|
165
|
-
value: function render() {
|
|
166
|
-
var _this$props = this.props,
|
|
167
|
-
popupsMountPoint = _this$props.popupsMountPoint,
|
|
168
|
-
popupsScrollableElement = _this$props.popupsScrollableElement,
|
|
169
|
-
toolbarSize = _this$props.toolbarSize,
|
|
170
|
-
isReducedSpacing = _this$props.isReducedSpacing,
|
|
171
|
-
editorView = _this$props.editorView,
|
|
172
|
-
isToolbarDisabled = _this$props.isToolbarDisabled,
|
|
173
|
-
shouldUseResponsiveToolbar = _this$props.shouldUseResponsiveToolbar,
|
|
174
|
-
intl = _this$props.intl,
|
|
175
|
-
editorAnalyticsAPI = _this$props.editorAnalyticsAPI;
|
|
176
|
-
return jsx(ToolbarFormatting, {
|
|
177
|
-
popupsMountPoint: popupsMountPoint,
|
|
178
|
-
popupsScrollableElement: popupsScrollableElement,
|
|
179
|
-
toolbarSize: toolbarSize,
|
|
180
|
-
isReducedSpacing: isReducedSpacing,
|
|
181
|
-
editorView: editorView,
|
|
182
|
-
isToolbarDisabled: isToolbarDisabled,
|
|
183
|
-
shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
|
|
184
|
-
intl: intl,
|
|
185
|
-
editorAnalyticsAPI: editorAnalyticsAPI
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
}]);
|
|
189
|
-
return Toolbar;
|
|
190
|
-
}(React.PureComponent);
|
|
191
|
-
export default injectIntl(Toolbar);
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import MoreIcon from '@atlaskit/icon/glyph/editor/more';
|
|
5
|
-
import { triggerWrapperStyles } from '@atlaskit/editor-common/styles';
|
|
6
|
-
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
7
|
-
export var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
|
|
8
|
-
var label = _ref.label,
|
|
9
|
-
ariaExpanded = _ref['aria-expanded'],
|
|
10
|
-
isReducedSpacing = _ref.isReducedSpacing,
|
|
11
|
-
isSelected = _ref.isSelected,
|
|
12
|
-
isDisabled = _ref.isDisabled,
|
|
13
|
-
onClick = _ref.onClick,
|
|
14
|
-
onKeyDown = _ref.onKeyDown;
|
|
15
|
-
return jsx(ToolbarButton, {
|
|
16
|
-
disabled: isDisabled,
|
|
17
|
-
selected: isSelected,
|
|
18
|
-
onClick: onClick,
|
|
19
|
-
onKeyDown: onKeyDown,
|
|
20
|
-
spacing: isReducedSpacing ? 'none' : 'default',
|
|
21
|
-
title: label,
|
|
22
|
-
iconBefore: jsx("div", {
|
|
23
|
-
css: triggerWrapperStyles
|
|
24
|
-
}, jsx(MoreIcon, {
|
|
25
|
-
label: ""
|
|
26
|
-
})),
|
|
27
|
-
"aria-expanded": ariaExpanded,
|
|
28
|
-
"aria-label": label,
|
|
29
|
-
"aria-haspopup": true
|
|
30
|
-
});
|
|
31
|
-
});
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React, { useCallback } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
5
|
-
import { buttonGroupStyle } from '@atlaskit/editor-common/styles';
|
|
6
|
-
export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
|
|
7
|
-
var items = _ref.items,
|
|
8
|
-
isReducedSpacing = _ref.isReducedSpacing,
|
|
9
|
-
editorView = _ref.editorView;
|
|
10
|
-
var onClick = useCallback(function (command) {
|
|
11
|
-
return function () {
|
|
12
|
-
command(editorView.state, editorView.dispatch);
|
|
13
|
-
return false;
|
|
14
|
-
};
|
|
15
|
-
}, [editorView.state, editorView.dispatch]);
|
|
16
|
-
return jsx("span", {
|
|
17
|
-
css: buttonGroupStyle
|
|
18
|
-
}, items.map(function (item) {
|
|
19
|
-
var _item$ariaLabel;
|
|
20
|
-
return jsx(ToolbarButton, {
|
|
21
|
-
key: item.key,
|
|
22
|
-
testId: "editor-toolbar__".concat(String(item.content)),
|
|
23
|
-
buttonId: item.buttonId,
|
|
24
|
-
spacing: isReducedSpacing ? 'none' : 'default',
|
|
25
|
-
onClick: onClick(item.command),
|
|
26
|
-
selected: item.isActive,
|
|
27
|
-
disabled: item.isDisabled,
|
|
28
|
-
title: item.tooltipElement,
|
|
29
|
-
iconBefore: item.iconElement,
|
|
30
|
-
"aria-pressed": item.isActive,
|
|
31
|
-
"aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
|
|
32
|
-
"aria-keyshortcuts": item['aria-keyshortcuts']
|
|
33
|
-
});
|
|
34
|
-
}));
|
|
35
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export var IconTypes = /*#__PURE__*/function (IconTypes) {
|
|
2
|
-
IconTypes["strong"] = "strong";
|
|
3
|
-
IconTypes["em"] = "em";
|
|
4
|
-
IconTypes["underline"] = "underline";
|
|
5
|
-
IconTypes["strike"] = "strike";
|
|
6
|
-
IconTypes["code"] = "code";
|
|
7
|
-
IconTypes["subscript"] = "subscript";
|
|
8
|
-
IconTypes["superscript"] = "superscript";
|
|
9
|
-
return IconTypes;
|
|
10
|
-
}({});
|