@atlaskit/editor-plugin-text-formatting 3.0.8 → 3.0.9

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 CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-text-formatting
2
2
 
3
+ ## 3.0.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
8
+ [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
9
+ Import keys for toolbar components
10
+ - Updated dependencies
11
+
3
12
  ## 3.0.8
4
13
 
5
14
  ### Patch Changes
@@ -74,54 +74,63 @@ var useComponentInfo = exports.useComponentInfo = function useComponentInfo(_ref
74
74
  onClick: onClick
75
75
  });
76
76
  };
77
- var formatOptions = exports.formatOptions = {
78
- strong: {
79
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.BOLD,
80
- icon: _editorToolbar.BoldIcon,
81
- title: _messages.toolbarMessages.bold,
82
- command: _toggleMark.toggleStrongWithAnalytics,
83
- shortcut: _keymaps.toggleBold
84
- },
85
- em: {
86
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.ITALIC,
87
- icon: _editorToolbar.ItalicIcon,
88
- title: _messages.toolbarMessages.italic,
89
- command: _toggleMark.toggleEmWithAnalytics,
90
- shortcut: _keymaps.toggleItalic
91
- },
92
- underline: {
93
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.UNDERLINE,
94
- icon: _editorToolbar.UnderlineIcon,
95
- title: _messages.toolbarMessages.underline,
96
- command: _toggleMark.toggleUnderlineWithAnalytics,
97
- shortcut: _keymaps.toggleUnderline
98
- },
99
- strike: {
100
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.STRIKETHROUGH,
101
- icon: _editorToolbar.StrikeThroughIcon,
102
- title: _messages.toolbarMessages.strike,
103
- command: _toggleMark.toggleStrikeWithAnalytics,
104
- shortcut: _keymaps.toggleStrikethrough
105
- },
106
- code: {
107
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.CODE,
108
- icon: _editorToolbar.CodeIcon,
109
- title: _messages.toolbarMessages.code,
110
- command: _toggleMark.toggleCodeWithAnalytics,
111
- shortcut: _keymaps.toggleCode
112
- },
113
- subscript: {
114
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.SUBSCRIPT,
115
- icon: _editorToolbar.SubscriptIcon,
116
- title: _messages.toolbarMessages.subscript,
117
- command: _toggleMark.toggleSubscriptWithAnalytics,
118
- shortcut: _keymaps.toggleSubscript
119
- },
120
- superscript: {
121
- rank: _toolbar.TEXT_FORMAT_OPTION_MENU_RANK.SUPERSCRIPT,
122
- icon: _editorToolbar.SuperscriptIcon,
123
- title: _messages.toolbarMessages.superscript,
124
- command: _toggleMark.toggleSuperscriptWithAnalytics,
125
- shortcut: _keymaps.toggleSuperscript
126
- }
77
+ var formatOptions = exports.formatOptions = function formatOptions() {
78
+ return {
79
+ strong: {
80
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.BOLD_MENU_ITEM.key],
81
+ key: _toolbar.BOLD_MENU_ITEM.key,
82
+ icon: _editorToolbar.BoldIcon,
83
+ title: _messages.toolbarMessages.bold,
84
+ command: _toggleMark.toggleStrongWithAnalytics,
85
+ shortcut: _keymaps.toggleBold
86
+ },
87
+ em: {
88
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.ITALIC_MENU_ITEM.key],
89
+ key: _toolbar.ITALIC_MENU_ITEM.key,
90
+ icon: _editorToolbar.ItalicIcon,
91
+ title: _messages.toolbarMessages.italic,
92
+ command: _toggleMark.toggleEmWithAnalytics,
93
+ shortcut: _keymaps.toggleItalic
94
+ },
95
+ underline: {
96
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.UNDERLINE_MENU_ITEM.key],
97
+ key: _toolbar.UNDERLINE_MENU_ITEM.key,
98
+ icon: _editorToolbar.UnderlineIcon,
99
+ title: _messages.toolbarMessages.underline,
100
+ command: _toggleMark.toggleUnderlineWithAnalytics,
101
+ shortcut: _keymaps.toggleUnderline
102
+ },
103
+ strike: {
104
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.STRIKE_MENU_ITEM.key],
105
+ key: _toolbar.STRIKE_MENU_ITEM.key,
106
+ icon: _editorToolbar.StrikeThroughIcon,
107
+ title: _messages.toolbarMessages.strike,
108
+ command: _toggleMark.toggleStrikeWithAnalytics,
109
+ shortcut: _keymaps.toggleStrikethrough
110
+ },
111
+ code: {
112
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.CODE_MENU_ITEM.key],
113
+ key: _toolbar.CODE_MENU_ITEM.key,
114
+ icon: _editorToolbar.CodeIcon,
115
+ title: _messages.toolbarMessages.code,
116
+ command: _toggleMark.toggleCodeWithAnalytics,
117
+ shortcut: _keymaps.toggleCode
118
+ },
119
+ subscript: {
120
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.SUBSCRIPT_MENU_ITEM.key],
121
+ key: _toolbar.SUBSCRIPT_MENU_ITEM.key,
122
+ icon: _editorToolbar.SubscriptIcon,
123
+ title: _messages.toolbarMessages.subscript,
124
+ command: _toggleMark.toggleSubscriptWithAnalytics,
125
+ shortcut: _keymaps.toggleSubscript
126
+ },
127
+ superscript: {
128
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.SUPERSCRIPT_MENU_ITEM.key],
129
+ key: _toolbar.SUPERSCRIPT_MENU_ITEM.key,
130
+ icon: _editorToolbar.SuperscriptIcon,
131
+ title: _messages.toolbarMessages.superscript,
132
+ command: _toggleMark.toggleSuperscriptWithAnalytics,
133
+ shortcut: _keymaps.toggleSuperscript
134
+ }
135
+ };
127
136
  };
@@ -14,7 +14,7 @@ var _Component = require("./Toolbar/components/Component");
14
14
  var _utils = require("./Toolbar/components/utils");
15
15
  var _types = require("./Toolbar/types");
16
16
  var getFormatMenuItems = function getFormatMenuItems(api) {
17
- return Object.entries(_utils.formatOptions).map(function (_ref) {
17
+ return Object.entries((0, _utils.formatOptions)()).map(function (_ref) {
18
18
  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
19
19
  optionType = _ref2[0],
20
20
  _ref2$ = _ref2[1],
@@ -22,13 +22,14 @@ var getFormatMenuItems = function getFormatMenuItems(api) {
22
22
  shortcut = _ref2$.shortcut,
23
23
  title = _ref2$.title,
24
24
  command = _ref2$.command,
25
- rank = _ref2$.rank;
25
+ rank = _ref2$.rank,
26
+ key = _ref2$.key;
26
27
  return {
27
28
  type: 'menu-item',
28
- key: optionType,
29
+ key: key,
29
30
  parents: [{
30
- type: 'menu-section',
31
- key: 'text-formatting-section',
31
+ type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
32
+ key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
32
33
  rank: rank
33
34
  }],
34
35
  component: function component(_ref3) {
@@ -48,24 +49,24 @@ var getFormatMenuItems = function getFormatMenuItems(api) {
48
49
  };
49
50
  var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
50
51
  return [{
51
- type: 'group',
52
- key: 'text-formatting',
52
+ type: _toolbar.TEXT_FORMATTING_GROUP.type,
53
+ key: _toolbar.TEXT_FORMATTING_GROUP.key,
53
54
  parents: [{
54
- type: 'section',
55
- key: 'text-section',
56
- rank: _toolbar.TEXT_SECTION_RANK.FORMAT
55
+ type: _toolbar.TEXT_SECTION.type,
56
+ key: _toolbar.TEXT_SECTION.key,
57
+ rank: _toolbar.TEXT_SECTION_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
57
58
  }]
58
59
  }, {
59
- type: 'button',
60
- key: 'bold',
60
+ type: _toolbar.TEXT_FORMATTING_HERO_BUTTON.type,
61
+ key: _toolbar.TEXT_FORMATTING_HERO_BUTTON.key,
61
62
  parents: [{
62
- type: 'group',
63
- key: 'text-formatting',
64
- rank: _toolbar.TEXT_FORMAT_GROUP_RANK.FORMAT_BUTTON
63
+ type: _toolbar.TEXT_FORMATTING_GROUP.type,
64
+ key: _toolbar.TEXT_FORMATTING_GROUP.key,
65
+ rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
65
66
  }],
66
67
  component: function component(_ref4) {
67
68
  var parents = _ref4.parents;
68
- var _formatOptions$strong = _utils.formatOptions.strong,
69
+ var _formatOptions$strong = (0, _utils.formatOptions)().strong,
69
70
  icon = _formatOptions$strong.icon,
70
71
  command = _formatOptions$strong.command,
71
72
  shortcut = _formatOptions$strong.shortcut,
@@ -81,12 +82,12 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
81
82
  });
82
83
  }
83
84
  }, {
84
- type: 'menu',
85
- key: 'more-formatting',
85
+ type: _toolbar.TEXT_FORMATTING_MENU.type,
86
+ key: _toolbar.TEXT_FORMATTING_MENU.key,
86
87
  parents: [{
87
- type: 'group',
88
- key: 'text-formatting',
89
- rank: _toolbar.TEXT_FORMAT_GROUP_RANK.MORE_FORMATTING
88
+ type: _toolbar.TEXT_FORMATTING_GROUP.type,
89
+ key: _toolbar.TEXT_FORMATTING_GROUP.key,
90
+ rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_MENU.key]
90
91
  }],
91
92
  component: function component(_ref5) {
92
93
  var children = _ref5.children,
@@ -96,28 +97,28 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
96
97
  }, children);
97
98
  }
98
99
  }, {
99
- type: 'menu-section',
100
- key: 'text-formatting-section',
100
+ type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
101
+ key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
101
102
  parents: [{
102
- type: 'menu',
103
- key: 'more-formatting',
104
- rank: _toolbar.TEXT_FORMAT_MENU_SECTION_RANK.FORMAT_OPTIONS
103
+ type: _toolbar.TEXT_FORMATTING_MENU.type,
104
+ key: _toolbar.TEXT_FORMATTING_MENU.key,
105
+ rank: _toolbar.TEXT_FORMAT_MENU_RANK[_toolbar.TEXT_FORMATTING_MENU_SECTION.key]
105
106
  }]
106
107
  }].concat((0, _toConsumableArray2.default)(getFormatMenuItems(api)), [{
107
- type: 'menu-section',
108
- key: 'clear-formatting-section',
108
+ type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
109
+ key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
109
110
  parents: [{
110
- type: 'menu',
111
- key: 'more-formatting',
112
- rank: _toolbar.TEXT_FORMAT_MENU_SECTION_RANK.CLEAR_FORMAT
111
+ type: _toolbar.TEXT_FORMATTING_MENU.type,
112
+ key: _toolbar.TEXT_FORMATTING_MENU.key,
113
+ rank: _toolbar.TEXT_FORMAT_MENU_RANK[_toolbar.CLEAR_FORMARTTING_MENU_SECTION.key]
113
114
  }]
114
115
  }, {
115
- type: 'menu-item',
116
- key: 'clear-formatting',
116
+ type: _toolbar.CLEAR_FORMATTING_MENU_ITEM.type,
117
+ key: _toolbar.CLEAR_FORMATTING_MENU_ITEM.key,
117
118
  parents: [{
118
- type: 'menu-section',
119
- key: 'clear-formatting-section',
120
- rank: _toolbar.TEXT_FORMAT_CLEAR_MENU_RANK.CLEAR_FORMAT
119
+ type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
120
+ key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
121
+ rank: _toolbar.CLEAR_FORMARTTING_MENU_SECTION_RANK[_toolbar.CLEAR_FORMATTING_MENU_ITEM.key]
121
122
  }],
122
123
  component: function component(_ref6) {
123
124
  var parents = _ref6.parents;
@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl-next';
2
2
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip } from '@atlaskit/editor-common/keymaps';
4
4
  import { toolbarMessages } from '@atlaskit/editor-common/messages';
5
- import { TEXT_FORMAT_OPTION_MENU_RANK } from '@atlaskit/editor-common/toolbar';
5
+ import { BOLD_MENU_ITEM, CODE_MENU_ITEM, ITALIC_MENU_ITEM, STRIKE_MENU_ITEM, SUBSCRIPT_MENU_ITEM, SUPERSCRIPT_MENU_ITEM, TEXT_FORMATTING_MENU_SECTION_RANK, UNDERLINE_MENU_ITEM } from '@atlaskit/editor-common/toolbar';
6
6
  import { BoldIcon, ItalicIcon, UnderlineIcon, CodeIcon, StrikeThroughIcon, SubscriptIcon, SuperscriptIcon } from '@atlaskit/editor-toolbar';
7
7
  import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleUnderlineWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics } from '../../../editor-commands/toggle-mark';
8
8
  import { getInputMethod } from '../input-method-utils';
@@ -68,54 +68,61 @@ export const useComponentInfo = ({
68
68
  onClick
69
69
  };
70
70
  };
71
- export const formatOptions = {
71
+ export const formatOptions = () => ({
72
72
  strong: {
73
- rank: TEXT_FORMAT_OPTION_MENU_RANK.BOLD,
73
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[BOLD_MENU_ITEM.key],
74
+ key: BOLD_MENU_ITEM.key,
74
75
  icon: BoldIcon,
75
76
  title: toolbarMessages.bold,
76
77
  command: toggleStrongWithAnalytics,
77
78
  shortcut: toggleBold
78
79
  },
79
80
  em: {
80
- rank: TEXT_FORMAT_OPTION_MENU_RANK.ITALIC,
81
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[ITALIC_MENU_ITEM.key],
82
+ key: ITALIC_MENU_ITEM.key,
81
83
  icon: ItalicIcon,
82
84
  title: toolbarMessages.italic,
83
85
  command: toggleEmWithAnalytics,
84
86
  shortcut: toggleItalic
85
87
  },
86
88
  underline: {
87
- rank: TEXT_FORMAT_OPTION_MENU_RANK.UNDERLINE,
89
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[UNDERLINE_MENU_ITEM.key],
90
+ key: UNDERLINE_MENU_ITEM.key,
88
91
  icon: UnderlineIcon,
89
92
  title: toolbarMessages.underline,
90
93
  command: toggleUnderlineWithAnalytics,
91
94
  shortcut: toggleUnderline
92
95
  },
93
96
  strike: {
94
- rank: TEXT_FORMAT_OPTION_MENU_RANK.STRIKETHROUGH,
97
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[STRIKE_MENU_ITEM.key],
98
+ key: STRIKE_MENU_ITEM.key,
95
99
  icon: StrikeThroughIcon,
96
100
  title: toolbarMessages.strike,
97
101
  command: toggleStrikeWithAnalytics,
98
102
  shortcut: toggleStrikethrough
99
103
  },
100
104
  code: {
101
- rank: TEXT_FORMAT_OPTION_MENU_RANK.CODE,
105
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[CODE_MENU_ITEM.key],
106
+ key: CODE_MENU_ITEM.key,
102
107
  icon: CodeIcon,
103
108
  title: toolbarMessages.code,
104
109
  command: toggleCodeWithAnalytics,
105
110
  shortcut: toggleCode
106
111
  },
107
112
  subscript: {
108
- rank: TEXT_FORMAT_OPTION_MENU_RANK.SUBSCRIPT,
113
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUBSCRIPT_MENU_ITEM.key],
114
+ key: SUBSCRIPT_MENU_ITEM.key,
109
115
  icon: SubscriptIcon,
110
116
  title: toolbarMessages.subscript,
111
117
  command: toggleSubscriptWithAnalytics,
112
118
  shortcut: toggleSubscript
113
119
  },
114
120
  superscript: {
115
- rank: TEXT_FORMAT_OPTION_MENU_RANK.SUPERSCRIPT,
121
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUPERSCRIPT_MENU_ITEM.key],
122
+ key: SUPERSCRIPT_MENU_ITEM.key,
116
123
  icon: SuperscriptIcon,
117
124
  title: toolbarMessages.superscript,
118
125
  command: toggleSuperscriptWithAnalytics,
119
126
  shortcut: toggleSuperscript
120
127
  }
121
- };
128
+ });
@@ -1,23 +1,24 @@
1
1
  import React from 'react';
2
- import { TEXT_FORMAT_CLEAR_MENU_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_SECTION_RANK, TEXT_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
2
+ import { CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
3
3
  import { ToolbarDropdownDivider } from '@atlaskit/editor-toolbar';
4
4
  import { FormatMenuItem, FormatButton, ClearFormatMenuItem, MoreFormattingMenu } from './Toolbar/components/Component';
5
5
  import { formatOptions } from './Toolbar/components/utils';
6
6
  import { FormatOptions } from './Toolbar/types';
7
7
  const getFormatMenuItems = api => {
8
- return Object.entries(formatOptions).map(([optionType, {
8
+ return Object.entries(formatOptions()).map(([optionType, {
9
9
  icon,
10
10
  shortcut,
11
11
  title,
12
12
  command,
13
- rank
13
+ rank,
14
+ key
14
15
  }]) => {
15
16
  return {
16
17
  type: 'menu-item',
17
- key: optionType,
18
+ key,
18
19
  parents: [{
19
- type: 'menu-section',
20
- key: 'text-formatting-section',
20
+ type: TEXT_FORMATTING_MENU_SECTION.type,
21
+ key: TEXT_FORMATTING_MENU_SECTION.key,
21
22
  rank
22
23
  }],
23
24
  component: ({
@@ -37,20 +38,20 @@ const getFormatMenuItems = api => {
37
38
  });
38
39
  };
39
40
  export const getToolbarComponents = api => [{
40
- type: 'group',
41
- key: 'text-formatting',
41
+ type: TEXT_FORMATTING_GROUP.type,
42
+ key: TEXT_FORMATTING_GROUP.key,
42
43
  parents: [{
43
- type: 'section',
44
- key: 'text-section',
45
- rank: TEXT_SECTION_RANK.FORMAT
44
+ type: TEXT_SECTION.type,
45
+ key: TEXT_SECTION.key,
46
+ rank: TEXT_SECTION_RANK[TEXT_FORMATTING_GROUP.key]
46
47
  }]
47
48
  }, {
48
- type: 'button',
49
- key: 'bold',
49
+ type: TEXT_FORMATTING_HERO_BUTTON.type,
50
+ key: TEXT_FORMATTING_HERO_BUTTON.key,
50
51
  parents: [{
51
- type: 'group',
52
- key: 'text-formatting',
53
- rank: TEXT_FORMAT_GROUP_RANK.FORMAT_BUTTON
52
+ type: TEXT_FORMATTING_GROUP.type,
53
+ key: TEXT_FORMATTING_GROUP.key,
54
+ rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
54
55
  }],
55
56
  component: ({
56
57
  parents
@@ -60,7 +61,7 @@ export const getToolbarComponents = api => [{
60
61
  command,
61
62
  shortcut,
62
63
  title
63
- } = formatOptions.strong;
64
+ } = formatOptions().strong;
64
65
  return /*#__PURE__*/React.createElement(FormatButton, {
65
66
  api: api,
66
67
  parents: parents,
@@ -72,12 +73,12 @@ export const getToolbarComponents = api => [{
72
73
  });
73
74
  }
74
75
  }, {
75
- type: 'menu',
76
- key: 'more-formatting',
76
+ type: TEXT_FORMATTING_MENU.type,
77
+ key: TEXT_FORMATTING_MENU.key,
77
78
  parents: [{
78
- type: 'group',
79
- key: 'text-formatting',
80
- rank: TEXT_FORMAT_GROUP_RANK.MORE_FORMATTING
79
+ type: TEXT_FORMATTING_GROUP.type,
80
+ key: TEXT_FORMATTING_GROUP.key,
81
+ rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_MENU.key]
81
82
  }],
82
83
  component: ({
83
84
  children,
@@ -88,28 +89,28 @@ export const getToolbarComponents = api => [{
88
89
  }, children);
89
90
  }
90
91
  }, {
91
- type: 'menu-section',
92
- key: 'text-formatting-section',
92
+ type: TEXT_FORMATTING_MENU_SECTION.type,
93
+ key: TEXT_FORMATTING_MENU_SECTION.key,
93
94
  parents: [{
94
- type: 'menu',
95
- key: 'more-formatting',
96
- rank: TEXT_FORMAT_MENU_SECTION_RANK.FORMAT_OPTIONS
95
+ type: TEXT_FORMATTING_MENU.type,
96
+ key: TEXT_FORMATTING_MENU.key,
97
+ rank: TEXT_FORMAT_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
97
98
  }]
98
99
  }, ...getFormatMenuItems(api), {
99
- type: 'menu-section',
100
- key: 'clear-formatting-section',
100
+ type: CLEAR_FORMARTTING_MENU_SECTION.type,
101
+ key: CLEAR_FORMARTTING_MENU_SECTION.key,
101
102
  parents: [{
102
- type: 'menu',
103
- key: 'more-formatting',
104
- rank: TEXT_FORMAT_MENU_SECTION_RANK.CLEAR_FORMAT
103
+ type: TEXT_FORMATTING_MENU.type,
104
+ key: TEXT_FORMATTING_MENU.key,
105
+ rank: TEXT_FORMAT_MENU_RANK[CLEAR_FORMARTTING_MENU_SECTION.key]
105
106
  }]
106
107
  }, {
107
- type: 'menu-item',
108
- key: 'clear-formatting',
108
+ type: CLEAR_FORMATTING_MENU_ITEM.type,
109
+ key: CLEAR_FORMATTING_MENU_ITEM.key,
109
110
  parents: [{
110
- type: 'menu-section',
111
- key: 'clear-formatting-section',
112
- rank: TEXT_FORMAT_CLEAR_MENU_RANK.CLEAR_FORMAT
111
+ type: CLEAR_FORMARTTING_MENU_SECTION.type,
112
+ key: CLEAR_FORMARTTING_MENU_SECTION.key,
113
+ rank: CLEAR_FORMARTTING_MENU_SECTION_RANK[CLEAR_FORMATTING_MENU_ITEM.key]
113
114
  }],
114
115
  component: ({
115
116
  parents
@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl-next';
5
5
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
6
6
  import { toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip } from '@atlaskit/editor-common/keymaps';
7
7
  import { toolbarMessages } from '@atlaskit/editor-common/messages';
8
- import { TEXT_FORMAT_OPTION_MENU_RANK } from '@atlaskit/editor-common/toolbar';
8
+ import { BOLD_MENU_ITEM, CODE_MENU_ITEM, ITALIC_MENU_ITEM, STRIKE_MENU_ITEM, SUBSCRIPT_MENU_ITEM, SUPERSCRIPT_MENU_ITEM, TEXT_FORMATTING_MENU_SECTION_RANK, UNDERLINE_MENU_ITEM } from '@atlaskit/editor-common/toolbar';
9
9
  import { BoldIcon, ItalicIcon, UnderlineIcon, CodeIcon, StrikeThroughIcon, SubscriptIcon, SuperscriptIcon } from '@atlaskit/editor-toolbar';
10
10
  import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleUnderlineWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics } from '../../../editor-commands/toggle-mark';
11
11
  import { getInputMethod } from '../input-method-utils';
@@ -67,54 +67,63 @@ export var useComponentInfo = function useComponentInfo(_ref) {
67
67
  onClick: onClick
68
68
  });
69
69
  };
70
- export var formatOptions = {
71
- strong: {
72
- rank: TEXT_FORMAT_OPTION_MENU_RANK.BOLD,
73
- icon: BoldIcon,
74
- title: toolbarMessages.bold,
75
- command: toggleStrongWithAnalytics,
76
- shortcut: toggleBold
77
- },
78
- em: {
79
- rank: TEXT_FORMAT_OPTION_MENU_RANK.ITALIC,
80
- icon: ItalicIcon,
81
- title: toolbarMessages.italic,
82
- command: toggleEmWithAnalytics,
83
- shortcut: toggleItalic
84
- },
85
- underline: {
86
- rank: TEXT_FORMAT_OPTION_MENU_RANK.UNDERLINE,
87
- icon: UnderlineIcon,
88
- title: toolbarMessages.underline,
89
- command: toggleUnderlineWithAnalytics,
90
- shortcut: toggleUnderline
91
- },
92
- strike: {
93
- rank: TEXT_FORMAT_OPTION_MENU_RANK.STRIKETHROUGH,
94
- icon: StrikeThroughIcon,
95
- title: toolbarMessages.strike,
96
- command: toggleStrikeWithAnalytics,
97
- shortcut: toggleStrikethrough
98
- },
99
- code: {
100
- rank: TEXT_FORMAT_OPTION_MENU_RANK.CODE,
101
- icon: CodeIcon,
102
- title: toolbarMessages.code,
103
- command: toggleCodeWithAnalytics,
104
- shortcut: toggleCode
105
- },
106
- subscript: {
107
- rank: TEXT_FORMAT_OPTION_MENU_RANK.SUBSCRIPT,
108
- icon: SubscriptIcon,
109
- title: toolbarMessages.subscript,
110
- command: toggleSubscriptWithAnalytics,
111
- shortcut: toggleSubscript
112
- },
113
- superscript: {
114
- rank: TEXT_FORMAT_OPTION_MENU_RANK.SUPERSCRIPT,
115
- icon: SuperscriptIcon,
116
- title: toolbarMessages.superscript,
117
- command: toggleSuperscriptWithAnalytics,
118
- shortcut: toggleSuperscript
119
- }
70
+ export var formatOptions = function formatOptions() {
71
+ return {
72
+ strong: {
73
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[BOLD_MENU_ITEM.key],
74
+ key: BOLD_MENU_ITEM.key,
75
+ icon: BoldIcon,
76
+ title: toolbarMessages.bold,
77
+ command: toggleStrongWithAnalytics,
78
+ shortcut: toggleBold
79
+ },
80
+ em: {
81
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[ITALIC_MENU_ITEM.key],
82
+ key: ITALIC_MENU_ITEM.key,
83
+ icon: ItalicIcon,
84
+ title: toolbarMessages.italic,
85
+ command: toggleEmWithAnalytics,
86
+ shortcut: toggleItalic
87
+ },
88
+ underline: {
89
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[UNDERLINE_MENU_ITEM.key],
90
+ key: UNDERLINE_MENU_ITEM.key,
91
+ icon: UnderlineIcon,
92
+ title: toolbarMessages.underline,
93
+ command: toggleUnderlineWithAnalytics,
94
+ shortcut: toggleUnderline
95
+ },
96
+ strike: {
97
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[STRIKE_MENU_ITEM.key],
98
+ key: STRIKE_MENU_ITEM.key,
99
+ icon: StrikeThroughIcon,
100
+ title: toolbarMessages.strike,
101
+ command: toggleStrikeWithAnalytics,
102
+ shortcut: toggleStrikethrough
103
+ },
104
+ code: {
105
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[CODE_MENU_ITEM.key],
106
+ key: CODE_MENU_ITEM.key,
107
+ icon: CodeIcon,
108
+ title: toolbarMessages.code,
109
+ command: toggleCodeWithAnalytics,
110
+ shortcut: toggleCode
111
+ },
112
+ subscript: {
113
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUBSCRIPT_MENU_ITEM.key],
114
+ key: SUBSCRIPT_MENU_ITEM.key,
115
+ icon: SubscriptIcon,
116
+ title: toolbarMessages.subscript,
117
+ command: toggleSubscriptWithAnalytics,
118
+ shortcut: toggleSubscript
119
+ },
120
+ superscript: {
121
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUPERSCRIPT_MENU_ITEM.key],
122
+ key: SUPERSCRIPT_MENU_ITEM.key,
123
+ icon: SuperscriptIcon,
124
+ title: toolbarMessages.superscript,
125
+ command: toggleSuperscriptWithAnalytics,
126
+ shortcut: toggleSuperscript
127
+ }
128
+ };
120
129
  };
@@ -1,13 +1,13 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import React from 'react';
4
- import { TEXT_FORMAT_CLEAR_MENU_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_SECTION_RANK, TEXT_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
4
+ import { CLEAR_FORMARTTING_MENU_SECTION, CLEAR_FORMATTING_MENU_ITEM, TEXT_FORMATTING_GROUP, TEXT_FORMATTING_HERO_BUTTON, TEXT_FORMATTING_MENU, TEXT_FORMATTING_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_RANK, CLEAR_FORMARTTING_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
5
5
  import { ToolbarDropdownDivider } from '@atlaskit/editor-toolbar';
6
6
  import { FormatMenuItem, FormatButton, ClearFormatMenuItem, MoreFormattingMenu } from './Toolbar/components/Component';
7
7
  import { formatOptions } from './Toolbar/components/utils';
8
8
  import { FormatOptions } from './Toolbar/types';
9
9
  var getFormatMenuItems = function getFormatMenuItems(api) {
10
- return Object.entries(formatOptions).map(function (_ref) {
10
+ return Object.entries(formatOptions()).map(function (_ref) {
11
11
  var _ref2 = _slicedToArray(_ref, 2),
12
12
  optionType = _ref2[0],
13
13
  _ref2$ = _ref2[1],
@@ -15,13 +15,14 @@ var getFormatMenuItems = function getFormatMenuItems(api) {
15
15
  shortcut = _ref2$.shortcut,
16
16
  title = _ref2$.title,
17
17
  command = _ref2$.command,
18
- rank = _ref2$.rank;
18
+ rank = _ref2$.rank,
19
+ key = _ref2$.key;
19
20
  return {
20
21
  type: 'menu-item',
21
- key: optionType,
22
+ key: key,
22
23
  parents: [{
23
- type: 'menu-section',
24
- key: 'text-formatting-section',
24
+ type: TEXT_FORMATTING_MENU_SECTION.type,
25
+ key: TEXT_FORMATTING_MENU_SECTION.key,
25
26
  rank: rank
26
27
  }],
27
28
  component: function component(_ref3) {
@@ -41,24 +42,24 @@ var getFormatMenuItems = function getFormatMenuItems(api) {
41
42
  };
42
43
  export var getToolbarComponents = function getToolbarComponents(api) {
43
44
  return [{
44
- type: 'group',
45
- key: 'text-formatting',
45
+ type: TEXT_FORMATTING_GROUP.type,
46
+ key: TEXT_FORMATTING_GROUP.key,
46
47
  parents: [{
47
- type: 'section',
48
- key: 'text-section',
49
- rank: TEXT_SECTION_RANK.FORMAT
48
+ type: TEXT_SECTION.type,
49
+ key: TEXT_SECTION.key,
50
+ rank: TEXT_SECTION_RANK[TEXT_FORMATTING_GROUP.key]
50
51
  }]
51
52
  }, {
52
- type: 'button',
53
- key: 'bold',
53
+ type: TEXT_FORMATTING_HERO_BUTTON.type,
54
+ key: TEXT_FORMATTING_HERO_BUTTON.key,
54
55
  parents: [{
55
- type: 'group',
56
- key: 'text-formatting',
57
- rank: TEXT_FORMAT_GROUP_RANK.FORMAT_BUTTON
56
+ type: TEXT_FORMATTING_GROUP.type,
57
+ key: TEXT_FORMATTING_GROUP.key,
58
+ rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
58
59
  }],
59
60
  component: function component(_ref4) {
60
61
  var parents = _ref4.parents;
61
- var _formatOptions$strong = formatOptions.strong,
62
+ var _formatOptions$strong = formatOptions().strong,
62
63
  icon = _formatOptions$strong.icon,
63
64
  command = _formatOptions$strong.command,
64
65
  shortcut = _formatOptions$strong.shortcut,
@@ -74,12 +75,12 @@ export var getToolbarComponents = function getToolbarComponents(api) {
74
75
  });
75
76
  }
76
77
  }, {
77
- type: 'menu',
78
- key: 'more-formatting',
78
+ type: TEXT_FORMATTING_MENU.type,
79
+ key: TEXT_FORMATTING_MENU.key,
79
80
  parents: [{
80
- type: 'group',
81
- key: 'text-formatting',
82
- rank: TEXT_FORMAT_GROUP_RANK.MORE_FORMATTING
81
+ type: TEXT_FORMATTING_GROUP.type,
82
+ key: TEXT_FORMATTING_GROUP.key,
83
+ rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_MENU.key]
83
84
  }],
84
85
  component: function component(_ref5) {
85
86
  var children = _ref5.children,
@@ -89,28 +90,28 @@ export var getToolbarComponents = function getToolbarComponents(api) {
89
90
  }, children);
90
91
  }
91
92
  }, {
92
- type: 'menu-section',
93
- key: 'text-formatting-section',
93
+ type: TEXT_FORMATTING_MENU_SECTION.type,
94
+ key: TEXT_FORMATTING_MENU_SECTION.key,
94
95
  parents: [{
95
- type: 'menu',
96
- key: 'more-formatting',
97
- rank: TEXT_FORMAT_MENU_SECTION_RANK.FORMAT_OPTIONS
96
+ type: TEXT_FORMATTING_MENU.type,
97
+ key: TEXT_FORMATTING_MENU.key,
98
+ rank: TEXT_FORMAT_MENU_RANK[TEXT_FORMATTING_MENU_SECTION.key]
98
99
  }]
99
100
  }].concat(_toConsumableArray(getFormatMenuItems(api)), [{
100
- type: 'menu-section',
101
- key: 'clear-formatting-section',
101
+ type: CLEAR_FORMARTTING_MENU_SECTION.type,
102
+ key: CLEAR_FORMARTTING_MENU_SECTION.key,
102
103
  parents: [{
103
- type: 'menu',
104
- key: 'more-formatting',
105
- rank: TEXT_FORMAT_MENU_SECTION_RANK.CLEAR_FORMAT
104
+ type: TEXT_FORMATTING_MENU.type,
105
+ key: TEXT_FORMATTING_MENU.key,
106
+ rank: TEXT_FORMAT_MENU_RANK[CLEAR_FORMARTTING_MENU_SECTION.key]
106
107
  }]
107
108
  }, {
108
- type: 'menu-item',
109
- key: 'clear-formatting',
109
+ type: CLEAR_FORMATTING_MENU_ITEM.type,
110
+ key: CLEAR_FORMATTING_MENU_ITEM.key,
110
111
  parents: [{
111
- type: 'menu-section',
112
- key: 'clear-formatting-section',
113
- rank: TEXT_FORMAT_CLEAR_MENU_RANK.CLEAR_FORMAT
112
+ type: CLEAR_FORMARTTING_MENU_SECTION.type,
113
+ key: CLEAR_FORMARTTING_MENU_SECTION.key,
114
+ rank: CLEAR_FORMARTTING_MENU_SECTION_RANK[CLEAR_FORMATTING_MENU_ITEM.key]
114
115
  }],
115
116
  component: function component(_ref6) {
116
117
  var parents = _ref6.parents;
@@ -29,10 +29,11 @@ export declare const useComponentInfo: ({ api, optionType, title, shortcut, togg
29
29
  };
30
30
  type FormatOptionInfo = {
31
31
  rank: number;
32
+ key: string;
32
33
  icon: IconComponent;
33
34
  title: MessageDescriptor;
34
35
  command: ToggleMarkWithAnalyticsEditorCommand;
35
36
  shortcut: Keymap;
36
37
  };
37
- export declare const formatOptions: Record<FormatOptions, FormatOptionInfo>;
38
+ export declare const formatOptions: () => Record<FormatOptions, FormatOptionInfo>;
38
39
  export {};
@@ -29,10 +29,11 @@ export declare const useComponentInfo: ({ api, optionType, title, shortcut, togg
29
29
  };
30
30
  type FormatOptionInfo = {
31
31
  rank: number;
32
+ key: string;
32
33
  icon: IconComponent;
33
34
  title: MessageDescriptor;
34
35
  command: ToggleMarkWithAnalyticsEditorCommand;
35
36
  shortcut: Keymap;
36
37
  };
37
- export declare const formatOptions: Record<FormatOptions, FormatOptionInfo>;
38
+ export declare const formatOptions: () => Record<FormatOptions, FormatOptionInfo>;
38
39
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-text-formatting",
3
- "version": "3.0.8",
3
+ "version": "3.0.9",
4
4
  "description": "Text-formatting plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,23 +37,23 @@
37
37
  "@atlaskit/editor-plugin-base": "^4.1.0",
38
38
  "@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
39
39
  "@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
40
- "@atlaskit/editor-plugin-toolbar": "^0.0.5",
40
+ "@atlaskit/editor-plugin-toolbar": "^0.0.6",
41
41
  "@atlaskit/editor-prosemirror": "7.0.0",
42
42
  "@atlaskit/editor-shared-styles": "^3.5.0",
43
43
  "@atlaskit/editor-tables": "^2.9.0",
44
- "@atlaskit/editor-toolbar": "^0.0.9",
44
+ "@atlaskit/editor-toolbar": "^0.0.10",
45
45
  "@atlaskit/editor-toolbar-model": "^0.0.4",
46
46
  "@atlaskit/icon": "^27.9.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/prosemirror-input-rules": "^3.4.0",
49
- "@atlaskit/tmp-editor-statsig": "^9.24.0",
49
+ "@atlaskit/tmp-editor-statsig": "^9.25.0",
50
50
  "@atlaskit/tokens": "^6.0.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1",
53
53
  "react-intl-next": "npm:react-intl@^5.18.1"
54
54
  },
55
55
  "peerDependencies": {
56
- "@atlaskit/editor-common": "^107.17.0",
56
+ "@atlaskit/editor-common": "^107.18.0",
57
57
  "react": "^18.2.0"
58
58
  },
59
59
  "devDependencies": {