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