@atlaskit/editor-core 187.17.6 → 187.18.1

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 (181) hide show
  1. package/CHANGELOG.md +18 -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/help-dialog/ui/index.js +26 -27
  5. package/dist/cjs/plugins/index.js +0 -7
  6. package/dist/cjs/plugins/list/index.js +5 -5
  7. package/dist/cjs/plugins/list/transforms.js +1 -223
  8. package/dist/cjs/plugins/paste/commands.js +224 -2
  9. package/dist/cjs/plugins/paste/pm-plugins/main.js +3 -3
  10. package/dist/cjs/plugins/toolbar-lists-indentation/ui/Toolbar.js +3 -3
  11. package/dist/cjs/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js +4 -4
  12. package/dist/cjs/version-wrapper.js +1 -1
  13. package/dist/cjs/version.json +1 -1
  14. package/dist/es2019/labs/next/presets/default.js +1 -1
  15. package/dist/es2019/plugins/annotation/toolbar.js +34 -9
  16. package/dist/es2019/plugins/help-dialog/ui/index.js +1 -2
  17. package/dist/es2019/plugins/index.js +0 -1
  18. package/dist/es2019/plugins/list/index.js +1 -1
  19. package/dist/es2019/plugins/list/transforms.js +2 -210
  20. package/dist/es2019/plugins/paste/commands.js +210 -2
  21. package/dist/es2019/plugins/paste/pm-plugins/main.js +1 -1
  22. package/dist/es2019/plugins/toolbar-lists-indentation/ui/Toolbar.js +1 -1
  23. package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js +1 -1
  24. package/dist/es2019/version-wrapper.js +1 -1
  25. package/dist/es2019/version.json +1 -1
  26. package/dist/esm/labs/next/presets/default.js +1 -1
  27. package/dist/esm/plugins/annotation/toolbar.js +30 -7
  28. package/dist/esm/plugins/help-dialog/ui/index.js +1 -2
  29. package/dist/esm/plugins/index.js +0 -1
  30. package/dist/esm/plugins/list/index.js +1 -1
  31. package/dist/esm/plugins/list/transforms.js +2 -219
  32. package/dist/esm/plugins/paste/commands.js +218 -1
  33. package/dist/esm/plugins/paste/pm-plugins/main.js +1 -1
  34. package/dist/esm/plugins/toolbar-lists-indentation/ui/Toolbar.js +1 -1
  35. package/dist/esm/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js +1 -1
  36. package/dist/esm/version-wrapper.js +1 -1
  37. package/dist/esm/version.json +1 -1
  38. package/dist/types/index.d.ts +0 -5
  39. package/dist/types/labs/next/presets/default.d.ts +28 -28
  40. package/dist/types/plugins/annotation/types.d.ts +9 -3
  41. package/dist/types/plugins/index.d.ts +0 -1
  42. package/dist/types/plugins/list/pm-plugins/input-rules/wrapping-join-rule.d.ts +1 -2
  43. package/dist/types/plugins/list/transforms.d.ts +0 -13
  44. package/dist/types/plugins/paste/commands.d.ts +14 -0
  45. package/dist/types/plugins/paste/index.d.ts +2 -0
  46. package/dist/types-ts4.5/index.d.ts +0 -5
  47. package/dist/types-ts4.5/labs/next/presets/default.d.ts +28 -28
  48. package/dist/types-ts4.5/plugins/annotation/types.d.ts +9 -3
  49. package/dist/types-ts4.5/plugins/index.d.ts +0 -1
  50. package/dist/types-ts4.5/plugins/list/pm-plugins/input-rules/wrapping-join-rule.d.ts +1 -2
  51. package/dist/types-ts4.5/plugins/list/transforms.d.ts +0 -13
  52. package/dist/types-ts4.5/plugins/paste/commands.d.ts +14 -0
  53. package/dist/types-ts4.5/plugins/paste/index.d.ts +2 -0
  54. package/package.json +3 -2
  55. package/report.api.md +1 -24
  56. package/tmp/api-report-tmp.d.ts +1 -21
  57. package/dist/cjs/plugins/text-formatting/actions.js +0 -188
  58. package/dist/cjs/plugins/text-formatting/commands/clear-formatting.js +0 -111
  59. package/dist/cjs/plugins/text-formatting/commands/text-formatting.js +0 -143
  60. package/dist/cjs/plugins/text-formatting/commands/transform-to-code.js +0 -68
  61. package/dist/cjs/plugins/text-formatting/index.js +0 -136
  62. package/dist/cjs/plugins/text-formatting/pm-plugins/clear-formatting-keymap.js +0 -21
  63. package/dist/cjs/plugins/text-formatting/pm-plugins/clear-formatting.js +0 -36
  64. package/dist/cjs/plugins/text-formatting/pm-plugins/cursor.js +0 -55
  65. package/dist/cjs/plugins/text-formatting/pm-plugins/input-rule.js +0 -276
  66. package/dist/cjs/plugins/text-formatting/pm-plugins/keymap.js +0 -52
  67. package/dist/cjs/plugins/text-formatting/pm-plugins/main.js +0 -113
  68. package/dist/cjs/plugins/text-formatting/pm-plugins/plugin-key.js +0 -9
  69. package/dist/cjs/plugins/text-formatting/pm-plugins/smart-input-rule.js +0 -176
  70. package/dist/cjs/plugins/text-formatting/ui/Toolbar/constants.js +0 -19
  71. package/dist/cjs/plugins/text-formatting/ui/Toolbar/dropdown-menu.js +0 -86
  72. package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js +0 -53
  73. package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js +0 -225
  74. package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/menu-state.js +0 -23
  75. package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.js +0 -60
  76. package/dist/cjs/plugins/text-formatting/ui/Toolbar/index.js +0 -201
  77. package/dist/cjs/plugins/text-formatting/ui/Toolbar/more-button.js +0 -40
  78. package/dist/cjs/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js +0 -46
  79. package/dist/cjs/plugins/text-formatting/ui/Toolbar/types.js +0 -17
  80. package/dist/cjs/plugins/text-formatting/utils/cell-selection.js +0 -12
  81. package/dist/cjs/plugins/text-formatting/utils.js +0 -86
  82. package/dist/es2019/plugins/text-formatting/actions.js +0 -161
  83. package/dist/es2019/plugins/text-formatting/commands/clear-formatting.js +0 -105
  84. package/dist/es2019/plugins/text-formatting/commands/text-formatting.js +0 -144
  85. package/dist/es2019/plugins/text-formatting/commands/transform-to-code.js +0 -71
  86. package/dist/es2019/plugins/text-formatting/index.js +0 -127
  87. package/dist/es2019/plugins/text-formatting/pm-plugins/clear-formatting-keymap.js +0 -10
  88. package/dist/es2019/plugins/text-formatting/pm-plugins/clear-formatting.js +0 -26
  89. package/dist/es2019/plugins/text-formatting/pm-plugins/cursor.js +0 -52
  90. package/dist/es2019/plugins/text-formatting/pm-plugins/input-rule.js +0 -244
  91. package/dist/es2019/plugins/text-formatting/pm-plugins/keymap.js +0 -43
  92. package/dist/es2019/plugins/text-formatting/pm-plugins/main.js +0 -109
  93. package/dist/es2019/plugins/text-formatting/pm-plugins/plugin-key.js +0 -2
  94. package/dist/es2019/plugins/text-formatting/pm-plugins/smart-input-rule.js +0 -155
  95. package/dist/es2019/plugins/text-formatting/ui/Toolbar/constants.js +0 -20
  96. package/dist/es2019/plugins/text-formatting/ui/Toolbar/dropdown-menu.js +0 -66
  97. package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js +0 -42
  98. package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js +0 -210
  99. package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/menu-state.js +0 -11
  100. package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.js +0 -48
  101. package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js +0 -168
  102. package/dist/es2019/plugins/text-formatting/ui/Toolbar/more-button.js +0 -32
  103. package/dist/es2019/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js +0 -36
  104. package/dist/es2019/plugins/text-formatting/ui/Toolbar/types.js +0 -10
  105. package/dist/es2019/plugins/text-formatting/utils/cell-selection.js +0 -5
  106. package/dist/es2019/plugins/text-formatting/utils.js +0 -74
  107. package/dist/esm/plugins/text-formatting/actions.js +0 -168
  108. package/dist/esm/plugins/text-formatting/commands/clear-formatting.js +0 -101
  109. package/dist/esm/plugins/text-formatting/commands/text-formatting.js +0 -134
  110. package/dist/esm/plugins/text-formatting/commands/transform-to-code.js +0 -61
  111. package/dist/esm/plugins/text-formatting/index.js +0 -128
  112. package/dist/esm/plugins/text-formatting/pm-plugins/clear-formatting-keymap.js +0 -10
  113. package/dist/esm/plugins/text-formatting/pm-plugins/clear-formatting.js +0 -28
  114. package/dist/esm/plugins/text-formatting/pm-plugins/cursor.js +0 -48
  115. package/dist/esm/plugins/text-formatting/pm-plugins/input-rule.js +0 -259
  116. package/dist/esm/plugins/text-formatting/pm-plugins/keymap.js +0 -43
  117. package/dist/esm/plugins/text-formatting/pm-plugins/main.js +0 -98
  118. package/dist/esm/plugins/text-formatting/pm-plugins/plugin-key.js +0 -2
  119. package/dist/esm/plugins/text-formatting/pm-plugins/smart-input-rule.js +0 -169
  120. package/dist/esm/plugins/text-formatting/ui/Toolbar/constants.js +0 -8
  121. package/dist/esm/plugins/text-formatting/ui/Toolbar/dropdown-menu.js +0 -75
  122. package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js +0 -45
  123. package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js +0 -213
  124. package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/menu-state.js +0 -15
  125. package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.js +0 -50
  126. package/dist/esm/plugins/text-formatting/ui/Toolbar/index.js +0 -191
  127. package/dist/esm/plugins/text-formatting/ui/Toolbar/more-button.js +0 -31
  128. package/dist/esm/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js +0 -35
  129. package/dist/esm/plugins/text-formatting/ui/Toolbar/types.js +0 -10
  130. package/dist/esm/plugins/text-formatting/utils/cell-selection.js +0 -5
  131. package/dist/esm/plugins/text-formatting/utils.js +0 -75
  132. package/dist/types/plugins/text-formatting/actions.d.ts +0 -22
  133. package/dist/types/plugins/text-formatting/commands/clear-formatting.d.ts +0 -6
  134. package/dist/types/plugins/text-formatting/commands/text-formatting.d.ts +0 -5
  135. package/dist/types/plugins/text-formatting/commands/transform-to-code.d.ts +0 -2
  136. package/dist/types/plugins/text-formatting/index.d.ts +0 -17
  137. package/dist/types/plugins/text-formatting/pm-plugins/clear-formatting-keymap.d.ts +0 -4
  138. package/dist/types/plugins/text-formatting/pm-plugins/clear-formatting.d.ts +0 -8
  139. package/dist/types/plugins/text-formatting/pm-plugins/cursor.d.ts +0 -3
  140. package/dist/types/plugins/text-formatting/pm-plugins/input-rule.d.ts +0 -24
  141. package/dist/types/plugins/text-formatting/pm-plugins/keymap.d.ts +0 -4
  142. package/dist/types/plugins/text-formatting/pm-plugins/main.d.ts +0 -7
  143. package/dist/types/plugins/text-formatting/pm-plugins/plugin-key.d.ts +0 -3
  144. package/dist/types/plugins/text-formatting/pm-plugins/smart-input-rule.d.ts +0 -3
  145. package/dist/types/plugins/text-formatting/ui/Toolbar/constants.d.ts +0 -6
  146. package/dist/types/plugins/text-formatting/ui/Toolbar/dropdown-menu.d.ts +0 -15
  147. package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.d.ts +0 -7
  148. package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.d.ts +0 -14
  149. package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/menu-state.d.ts +0 -1
  150. package/dist/types/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.d.ts +0 -20
  151. package/dist/types/plugins/text-formatting/ui/Toolbar/index.d.ts +0 -26
  152. package/dist/types/plugins/text-formatting/ui/Toolbar/more-button.d.ts +0 -13
  153. package/dist/types/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.d.ts +0 -9
  154. package/dist/types/plugins/text-formatting/ui/Toolbar/types.d.ts +0 -32
  155. package/dist/types/plugins/text-formatting/utils/cell-selection.d.ts +0 -3
  156. package/dist/types/plugins/text-formatting/utils.d.ts +0 -11
  157. package/dist/types-ts4.5/plugins/text-formatting/actions.d.ts +0 -22
  158. package/dist/types-ts4.5/plugins/text-formatting/commands/clear-formatting.d.ts +0 -6
  159. package/dist/types-ts4.5/plugins/text-formatting/commands/text-formatting.d.ts +0 -5
  160. package/dist/types-ts4.5/plugins/text-formatting/commands/transform-to-code.d.ts +0 -2
  161. package/dist/types-ts4.5/plugins/text-formatting/index.d.ts +0 -19
  162. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/clear-formatting-keymap.d.ts +0 -4
  163. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/clear-formatting.d.ts +0 -8
  164. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/cursor.d.ts +0 -3
  165. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/input-rule.d.ts +0 -24
  166. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/keymap.d.ts +0 -4
  167. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/main.d.ts +0 -7
  168. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/plugin-key.d.ts +0 -3
  169. package/dist/types-ts4.5/plugins/text-formatting/pm-plugins/smart-input-rule.d.ts +0 -3
  170. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/constants.d.ts +0 -6
  171. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/dropdown-menu.d.ts +0 -15
  172. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.d.ts +0 -7
  173. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.d.ts +0 -14
  174. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/menu-state.d.ts +0 -5
  175. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/hooks/responsive-toolbar-buttons.d.ts +0 -20
  176. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/index.d.ts +0 -26
  177. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/more-button.d.ts +0 -13
  178. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.d.ts +0 -9
  179. package/dist/types-ts4.5/plugins/text-formatting/ui/Toolbar/types.d.ts +0 -32
  180. package/dist/types-ts4.5/plugins/text-formatting/utils/cell-selection.d.ts +0 -3
  181. 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
- };