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

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 (13) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/ui/Toolbar/components/Component.js +16 -12
  3. package/dist/cjs/ui/Toolbar/components/utils.js +72 -55
  4. package/dist/cjs/ui/toolbar-components.js +37 -36
  5. package/dist/es2019/ui/Toolbar/components/Component.js +16 -12
  6. package/dist/es2019/ui/Toolbar/components/utils.js +30 -15
  7. package/dist/es2019/ui/toolbar-components.js +38 -37
  8. package/dist/esm/ui/Toolbar/components/Component.js +16 -12
  9. package/dist/esm/ui/Toolbar/components/utils.js +73 -56
  10. package/dist/esm/ui/toolbar-components.js +38 -37
  11. package/dist/types/ui/Toolbar/components/utils.d.ts +3 -2
  12. package/dist/types-ts4.5/ui/Toolbar/components/utils.d.ts +3 -2
  13. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-text-formatting
2
2
 
3
+ ## 3.0.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5f5ead7ec9a6c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f5ead7ec9a6c) -
8
+ [ED-28682] Add text format mark schema check for isHidden state of format button options
9
+ - Updated dependencies
10
+
11
+ ## 3.0.9
12
+
13
+ ### Patch Changes
14
+
15
+ - [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
16
+ [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
17
+ Import keys for toolbar components
18
+ - Updated dependencies
19
+
3
20
  ## 3.0.8
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/ui/Toolbar/components/Component.js CHANGED
@@ -78,18 +78,22 @@ var FormatButton = exports.FormatButton = function FormatButton(_ref2) {
78
78
  ariaLabel = _useComponentInfo2.ariaLabel,
79
79
  formatTitle = _useComponentInfo2.formatTitle;
80
80
  var Icon = icon;
81
- return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
82
- content: formatTitle
83
- }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
84
- iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
85
- label: ariaLabel
86
- }),
87
- onClick: onClick,
88
- isSelected: isActive,
89
- isDisabled: isDisabled,
90
- groupLocation: groupLocation,
91
- ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut)
92
- }));
81
+ return (
82
+ /*#__PURE__*/
83
+ // TODO: ED-28743 - add keyboard shortcut here
84
+ _react.default.createElement(_editorToolbar.ToolbarTooltip, {
85
+ content: formatTitle
86
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
87
+ iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
88
+ label: ariaLabel
89
+ }),
90
+ onClick: onClick,
91
+ isSelected: isActive,
92
+ isDisabled: isDisabled,
93
+ groupLocation: groupLocation,
94
+ ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut)
95
+ }))
96
+ );
93
97
  };
94
98
  var ClearFormatMenuItem = exports.ClearFormatMenuItem = function ClearFormatMenuItem(_ref3) {
95
99
  var api = _ref3.api,
package/dist/cjs/ui/Toolbar/components/utils.js CHANGED
@@ -19,11 +19,19 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
19
19
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
20
20
  var getInputMethodFromParentKeys = exports.getInputMethodFromParentKeys = function getInputMethodFromParentKeys(parentKeys) {
21
21
  var _parentKeys$at;
22
- return (0, _inputMethodUtils.getInputMethod)(
23
- // TODO: ED-28682 - replace with const
24
- ((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === 'inline-text-toolbar' ? _types.ToolbarType.FLOATING : _types.ToolbarType.PRIMARY);
22
+ return (0, _inputMethodUtils.getInputMethod)(((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR ? _types.ToolbarType.FLOATING : _types.ToolbarType.PRIMARY);
23
+ };
24
+ var FormatMarkSchema = {
25
+ strong: 'strong',
26
+ em: 'em',
27
+ underline: 'underline',
28
+ strike: 'strike',
29
+ code: 'code',
30
+ subscript: 'subsup',
31
+ superscript: 'subsup'
25
32
  };
26
33
  var useComponentInfo = exports.useComponentInfo = function useComponentInfo(_ref) {
34
+ var _api$core;
27
35
  var api = _ref.api,
28
36
  optionType = _ref.optionType,
29
37
  title = _ref.title,
@@ -43,6 +51,7 @@ var useComponentInfo = exports.useComponentInfo = function useComponentInfo(_ref
43
51
  isDisabled = _useSharedPluginState.isDisabled,
44
52
  isHidden = _useSharedPluginState.isHidden,
45
53
  isPluginInitialised = _useSharedPluginState.isPluginInitialised;
54
+ var hasMarkSchema = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || (_api$core = _api$core.sharedState.currentState()) === null || _api$core === void 0 || (_api$core = _api$core.schema) === null || _api$core === void 0 ? void 0 : _api$core.marks[FormatMarkSchema[optionType]];
46
55
  var formatOptionState;
47
56
  if (!isPluginInitialised) {
48
57
  formatOptionState = {
@@ -54,8 +63,7 @@ var useComponentInfo = exports.useComponentInfo = function useComponentInfo(_ref
54
63
  formatOptionState = {
55
64
  isActive: Boolean(isActive),
56
65
  isDisabled: Boolean(isDisabled),
57
- // TODO: ED-28682 - also need to check if mark is present in the schema
58
- isHidden: Boolean(isHidden)
66
+ isHidden: Boolean(!hasMarkSchema || isHidden)
59
67
  };
60
68
  }
61
69
  var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -74,54 +82,63 @@ var useComponentInfo = exports.useComponentInfo = function useComponentInfo(_ref
74
82
  onClick: onClick
75
83
  });
76
84
  };
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
- }
85
+ var formatOptions = exports.formatOptions = function formatOptions() {
86
+ return {
87
+ strong: {
88
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.BOLD_MENU_ITEM.key],
89
+ key: _toolbar.BOLD_MENU_ITEM.key,
90
+ icon: _editorToolbar.BoldIcon,
91
+ title: _messages.toolbarMessages.bold,
92
+ command: _toggleMark.toggleStrongWithAnalytics,
93
+ shortcut: _keymaps.toggleBold
94
+ },
95
+ em: {
96
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.ITALIC_MENU_ITEM.key],
97
+ key: _toolbar.ITALIC_MENU_ITEM.key,
98
+ icon: _editorToolbar.ItalicIcon,
99
+ title: _messages.toolbarMessages.italic,
100
+ command: _toggleMark.toggleEmWithAnalytics,
101
+ shortcut: _keymaps.toggleItalic
102
+ },
103
+ underline: {
104
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.UNDERLINE_MENU_ITEM.key],
105
+ key: _toolbar.UNDERLINE_MENU_ITEM.key,
106
+ icon: _editorToolbar.UnderlineIcon,
107
+ title: _messages.toolbarMessages.underline,
108
+ command: _toggleMark.toggleUnderlineWithAnalytics,
109
+ shortcut: _keymaps.toggleUnderline
110
+ },
111
+ strike: {
112
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.STRIKE_MENU_ITEM.key],
113
+ key: _toolbar.STRIKE_MENU_ITEM.key,
114
+ icon: _editorToolbar.StrikeThroughIcon,
115
+ title: _messages.toolbarMessages.strike,
116
+ command: _toggleMark.toggleStrikeWithAnalytics,
117
+ shortcut: _keymaps.toggleStrikethrough
118
+ },
119
+ code: {
120
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.CODE_MENU_ITEM.key],
121
+ key: _toolbar.CODE_MENU_ITEM.key,
122
+ icon: _editorToolbar.CodeIcon,
123
+ title: _messages.toolbarMessages.code,
124
+ command: _toggleMark.toggleCodeWithAnalytics,
125
+ shortcut: _keymaps.toggleCode
126
+ },
127
+ subscript: {
128
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.SUBSCRIPT_MENU_ITEM.key],
129
+ key: _toolbar.SUBSCRIPT_MENU_ITEM.key,
130
+ icon: _editorToolbar.SubscriptIcon,
131
+ title: _messages.toolbarMessages.subscript,
132
+ command: _toggleMark.toggleSubscriptWithAnalytics,
133
+ shortcut: _keymaps.toggleSubscript
134
+ },
135
+ superscript: {
136
+ rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.SUPERSCRIPT_MENU_ITEM.key],
137
+ key: _toolbar.SUPERSCRIPT_MENU_ITEM.key,
138
+ icon: _editorToolbar.SuperscriptIcon,
139
+ title: _messages.toolbarMessages.superscript,
140
+ command: _toggleMark.toggleSuperscriptWithAnalytics,
141
+ shortcut: _keymaps.toggleSuperscript
142
+ }
143
+ };
127
144
  };
package/dist/cjs/ui/toolbar-components.js CHANGED
@@ -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;
package/dist/es2019/ui/Toolbar/components/Component.js CHANGED
@@ -74,18 +74,22 @@ export const FormatButton = ({
74
74
  parents
75
75
  });
76
76
  const Icon = icon;
77
- return /*#__PURE__*/React.createElement(ToolbarTooltip, {
78
- content: formatTitle
79
- }, /*#__PURE__*/React.createElement(ToolbarButton, {
80
- iconBefore: /*#__PURE__*/React.createElement(Icon, {
81
- label: ariaLabel
82
- }),
83
- onClick: onClick,
84
- isSelected: isActive,
85
- isDisabled: isDisabled,
86
- groupLocation: groupLocation,
87
- ariaKeyshortcuts: getAriaKeyshortcuts(shortcut)
88
- }));
77
+ return (
78
+ /*#__PURE__*/
79
+ // TODO: ED-28743 - add keyboard shortcut here
80
+ React.createElement(ToolbarTooltip, {
81
+ content: formatTitle
82
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
83
+ iconBefore: /*#__PURE__*/React.createElement(Icon, {
84
+ label: ariaLabel
85
+ }),
86
+ onClick: onClick,
87
+ isSelected: isActive,
88
+ isDisabled: isDisabled,
89
+ groupLocation: groupLocation,
90
+ ariaKeyshortcuts: getAriaKeyshortcuts(shortcut)
91
+ }))
92
+ );
89
93
  };
90
94
  export const ClearFormatMenuItem = ({
91
95
  api,
package/dist/es2019/ui/Toolbar/components/utils.js CHANGED
@@ -2,16 +2,23 @@ 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, TOOLBARS, 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';
9
9
  import { ToolbarType } from '../types';
10
10
  export const getInputMethodFromParentKeys = parentKeys => {
11
11
  var _parentKeys$at;
12
- return getInputMethod(
13
- // TODO: ED-28682 - replace with const
14
- ((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === 'inline-text-toolbar' ? ToolbarType.FLOATING : ToolbarType.PRIMARY);
12
+ return getInputMethod(((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === TOOLBARS.INLINE_TEXT_TOOLBAR ? ToolbarType.FLOATING : ToolbarType.PRIMARY);
13
+ };
14
+ const FormatMarkSchema = {
15
+ strong: 'strong',
16
+ em: 'em',
17
+ underline: 'underline',
18
+ strike: 'strike',
19
+ code: 'code',
20
+ subscript: 'subsup',
21
+ superscript: 'subsup'
15
22
  };
16
23
  export const useComponentInfo = ({
17
24
  api,
@@ -21,6 +28,7 @@ export const useComponentInfo = ({
21
28
  toggleMarkWithAnalyticsCallback,
22
29
  parents
23
30
  }) => {
31
+ var _api$core, _api$core$sharedState, _api$core$sharedState2;
24
32
  const {
25
33
  isActive,
26
34
  isDisabled,
@@ -35,6 +43,7 @@ export const useComponentInfo = ({
35
43
  isPluginInitialised: (_states$textFormattin4 = states.textFormattingState) === null || _states$textFormattin4 === void 0 ? void 0 : _states$textFormattin4.isInitialised
36
44
  };
37
45
  });
46
+ const hasMarkSchema = api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : (_api$core$sharedState = _api$core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.marks[FormatMarkSchema[optionType]];
38
47
  let formatOptionState;
39
48
  if (!isPluginInitialised) {
40
49
  formatOptionState = {
@@ -46,8 +55,7 @@ export const useComponentInfo = ({
46
55
  formatOptionState = {
47
56
  isActive: Boolean(isActive),
48
57
  isDisabled: Boolean(isDisabled),
49
- // TODO: ED-28682 - also need to check if mark is present in the schema
50
- isHidden: Boolean(isHidden)
58
+ isHidden: Boolean(!hasMarkSchema || isHidden)
51
59
  };
52
60
  }
53
61
  const {
@@ -68,54 +76,61 @@ export const useComponentInfo = ({
68
76
  onClick
69
77
  };
70
78
  };
71
- export const formatOptions = {
79
+ export const formatOptions = () => ({
72
80
  strong: {
73
- rank: TEXT_FORMAT_OPTION_MENU_RANK.BOLD,
81
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[BOLD_MENU_ITEM.key],
82
+ key: BOLD_MENU_ITEM.key,
74
83
  icon: BoldIcon,
75
84
  title: toolbarMessages.bold,
76
85
  command: toggleStrongWithAnalytics,
77
86
  shortcut: toggleBold
78
87
  },
79
88
  em: {
80
- rank: TEXT_FORMAT_OPTION_MENU_RANK.ITALIC,
89
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[ITALIC_MENU_ITEM.key],
90
+ key: ITALIC_MENU_ITEM.key,
81
91
  icon: ItalicIcon,
82
92
  title: toolbarMessages.italic,
83
93
  command: toggleEmWithAnalytics,
84
94
  shortcut: toggleItalic
85
95
  },
86
96
  underline: {
87
- rank: TEXT_FORMAT_OPTION_MENU_RANK.UNDERLINE,
97
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[UNDERLINE_MENU_ITEM.key],
98
+ key: UNDERLINE_MENU_ITEM.key,
88
99
  icon: UnderlineIcon,
89
100
  title: toolbarMessages.underline,
90
101
  command: toggleUnderlineWithAnalytics,
91
102
  shortcut: toggleUnderline
92
103
  },
93
104
  strike: {
94
- rank: TEXT_FORMAT_OPTION_MENU_RANK.STRIKETHROUGH,
105
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[STRIKE_MENU_ITEM.key],
106
+ key: STRIKE_MENU_ITEM.key,
95
107
  icon: StrikeThroughIcon,
96
108
  title: toolbarMessages.strike,
97
109
  command: toggleStrikeWithAnalytics,
98
110
  shortcut: toggleStrikethrough
99
111
  },
100
112
  code: {
101
- rank: TEXT_FORMAT_OPTION_MENU_RANK.CODE,
113
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[CODE_MENU_ITEM.key],
114
+ key: CODE_MENU_ITEM.key,
102
115
  icon: CodeIcon,
103
116
  title: toolbarMessages.code,
104
117
  command: toggleCodeWithAnalytics,
105
118
  shortcut: toggleCode
106
119
  },
107
120
  subscript: {
108
- rank: TEXT_FORMAT_OPTION_MENU_RANK.SUBSCRIPT,
121
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUBSCRIPT_MENU_ITEM.key],
122
+ key: SUBSCRIPT_MENU_ITEM.key,
109
123
  icon: SubscriptIcon,
110
124
  title: toolbarMessages.subscript,
111
125
  command: toggleSubscriptWithAnalytics,
112
126
  shortcut: toggleSubscript
113
127
  },
114
128
  superscript: {
115
- rank: TEXT_FORMAT_OPTION_MENU_RANK.SUPERSCRIPT,
129
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUPERSCRIPT_MENU_ITEM.key],
130
+ key: SUPERSCRIPT_MENU_ITEM.key,
116
131
  icon: SuperscriptIcon,
117
132
  title: toolbarMessages.superscript,
118
133
  command: toggleSuperscriptWithAnalytics,
119
134
  shortcut: toggleSuperscript
120
135
  }
121
- };
136
+ });
package/dist/es2019/ui/toolbar-components.js CHANGED
@@ -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
package/dist/esm/ui/Toolbar/components/Component.js CHANGED
@@ -71,18 +71,22 @@ export var FormatButton = function FormatButton(_ref2) {
71
71
  ariaLabel = _useComponentInfo2.ariaLabel,
72
72
  formatTitle = _useComponentInfo2.formatTitle;
73
73
  var Icon = icon;
74
- return /*#__PURE__*/React.createElement(ToolbarTooltip, {
75
- content: formatTitle
76
- }, /*#__PURE__*/React.createElement(ToolbarButton, {
77
- iconBefore: /*#__PURE__*/React.createElement(Icon, {
78
- label: ariaLabel
79
- }),
80
- onClick: onClick,
81
- isSelected: isActive,
82
- isDisabled: isDisabled,
83
- groupLocation: groupLocation,
84
- ariaKeyshortcuts: getAriaKeyshortcuts(shortcut)
85
- }));
74
+ return (
75
+ /*#__PURE__*/
76
+ // TODO: ED-28743 - add keyboard shortcut here
77
+ React.createElement(ToolbarTooltip, {
78
+ content: formatTitle
79
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
80
+ iconBefore: /*#__PURE__*/React.createElement(Icon, {
81
+ label: ariaLabel
82
+ }),
83
+ onClick: onClick,
84
+ isSelected: isActive,
85
+ isDisabled: isDisabled,
86
+ groupLocation: groupLocation,
87
+ ariaKeyshortcuts: getAriaKeyshortcuts(shortcut)
88
+ }))
89
+ );
86
90
  };
87
91
  export var ClearFormatMenuItem = function ClearFormatMenuItem(_ref3) {
88
92
  var api = _ref3.api,
package/dist/esm/ui/Toolbar/components/utils.js CHANGED
@@ -5,18 +5,26 @@ 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, TOOLBARS, 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';
12
12
  import { ToolbarType } from '../types';
13
13
  export var getInputMethodFromParentKeys = function getInputMethodFromParentKeys(parentKeys) {
14
14
  var _parentKeys$at;
15
- return getInputMethod(
16
- // TODO: ED-28682 - replace with const
17
- ((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === 'inline-text-toolbar' ? ToolbarType.FLOATING : ToolbarType.PRIMARY);
15
+ return getInputMethod(((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === TOOLBARS.INLINE_TEXT_TOOLBAR ? ToolbarType.FLOATING : ToolbarType.PRIMARY);
16
+ };
17
+ var FormatMarkSchema = {
18
+ strong: 'strong',
19
+ em: 'em',
20
+ underline: 'underline',
21
+ strike: 'strike',
22
+ code: 'code',
23
+ subscript: 'subsup',
24
+ superscript: 'subsup'
18
25
  };
19
26
  export var useComponentInfo = function useComponentInfo(_ref) {
27
+ var _api$core;
20
28
  var api = _ref.api,
21
29
  optionType = _ref.optionType,
22
30
  title = _ref.title,
@@ -36,6 +44,7 @@ export var useComponentInfo = function useComponentInfo(_ref) {
36
44
  isDisabled = _useSharedPluginState.isDisabled,
37
45
  isHidden = _useSharedPluginState.isHidden,
38
46
  isPluginInitialised = _useSharedPluginState.isPluginInitialised;
47
+ var hasMarkSchema = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || (_api$core = _api$core.sharedState.currentState()) === null || _api$core === void 0 || (_api$core = _api$core.schema) === null || _api$core === void 0 ? void 0 : _api$core.marks[FormatMarkSchema[optionType]];
39
48
  var formatOptionState;
40
49
  if (!isPluginInitialised) {
41
50
  formatOptionState = {
@@ -47,8 +56,7 @@ export var useComponentInfo = function useComponentInfo(_ref) {
47
56
  formatOptionState = {
48
57
  isActive: Boolean(isActive),
49
58
  isDisabled: Boolean(isDisabled),
50
- // TODO: ED-28682 - also need to check if mark is present in the schema
51
- isHidden: Boolean(isHidden)
59
+ isHidden: Boolean(!hasMarkSchema || isHidden)
52
60
  };
53
61
  }
54
62
  var _useIntl = useIntl(),
@@ -67,54 +75,63 @@ export var useComponentInfo = function useComponentInfo(_ref) {
67
75
  onClick: onClick
68
76
  });
69
77
  };
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
- }
78
+ export var formatOptions = function formatOptions() {
79
+ return {
80
+ strong: {
81
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[BOLD_MENU_ITEM.key],
82
+ key: BOLD_MENU_ITEM.key,
83
+ icon: BoldIcon,
84
+ title: toolbarMessages.bold,
85
+ command: toggleStrongWithAnalytics,
86
+ shortcut: toggleBold
87
+ },
88
+ em: {
89
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[ITALIC_MENU_ITEM.key],
90
+ key: ITALIC_MENU_ITEM.key,
91
+ icon: ItalicIcon,
92
+ title: toolbarMessages.italic,
93
+ command: toggleEmWithAnalytics,
94
+ shortcut: toggleItalic
95
+ },
96
+ underline: {
97
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[UNDERLINE_MENU_ITEM.key],
98
+ key: UNDERLINE_MENU_ITEM.key,
99
+ icon: UnderlineIcon,
100
+ title: toolbarMessages.underline,
101
+ command: toggleUnderlineWithAnalytics,
102
+ shortcut: toggleUnderline
103
+ },
104
+ strike: {
105
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[STRIKE_MENU_ITEM.key],
106
+ key: STRIKE_MENU_ITEM.key,
107
+ icon: StrikeThroughIcon,
108
+ title: toolbarMessages.strike,
109
+ command: toggleStrikeWithAnalytics,
110
+ shortcut: toggleStrikethrough
111
+ },
112
+ code: {
113
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[CODE_MENU_ITEM.key],
114
+ key: CODE_MENU_ITEM.key,
115
+ icon: CodeIcon,
116
+ title: toolbarMessages.code,
117
+ command: toggleCodeWithAnalytics,
118
+ shortcut: toggleCode
119
+ },
120
+ subscript: {
121
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUBSCRIPT_MENU_ITEM.key],
122
+ key: SUBSCRIPT_MENU_ITEM.key,
123
+ icon: SubscriptIcon,
124
+ title: toolbarMessages.subscript,
125
+ command: toggleSubscriptWithAnalytics,
126
+ shortcut: toggleSubscript
127
+ },
128
+ superscript: {
129
+ rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUPERSCRIPT_MENU_ITEM.key],
130
+ key: SUPERSCRIPT_MENU_ITEM.key,
131
+ icon: SuperscriptIcon,
132
+ title: toolbarMessages.superscript,
133
+ command: toggleSuperscriptWithAnalytics,
134
+ shortcut: toggleSuperscript
135
+ }
136
+ };
120
137
  };
package/dist/esm/ui/toolbar-components.js CHANGED
@@ -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;
package/dist/types/ui/Toolbar/components/utils.d.ts CHANGED
@@ -12,7 +12,7 @@ export type FormatComponentProps = {
12
12
  icon: IconComponent;
13
13
  shortcut: Keymap;
14
14
  title: MessageDescriptor;
15
- optionType: string;
15
+ optionType: FormatOptions;
16
16
  toggleMarkWithAnalyticsCallback: ToggleMarkWithAnalyticsEditorCommand | ClearFormattingWithAnalyticsEditorCommand;
17
17
  ariaLabel?: string;
18
18
  groupLocation?: ToolbarButtonGroupLocation;
@@ -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/dist/types-ts4.5/ui/Toolbar/components/utils.d.ts CHANGED
@@ -12,7 +12,7 @@ export type FormatComponentProps = {
12
12
  icon: IconComponent;
13
13
  shortcut: Keymap;
14
14
  title: MessageDescriptor;
15
- optionType: string;
15
+ optionType: FormatOptions;
16
16
  toggleMarkWithAnalyticsCallback: ToggleMarkWithAnalyticsEditorCommand | ClearFormattingWithAnalyticsEditorCommand;
17
17
  ariaLabel?: string;
18
18
  groupLocation?: ToolbarButtonGroupLocation;
@@ -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.10",
4
4
  "description": "Text-formatting plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,24 +36,24 @@
36
36
  "@atlaskit/editor-plugin-analytics": "^3.0.0",
37
37
  "@atlaskit/editor-plugin-base": "^4.1.0",
38
38
  "@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
39
- "@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
40
- "@atlaskit/editor-plugin-toolbar": "^0.0.5",
39
+ "@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
40
+ "@atlaskit/editor-plugin-toolbar": "^0.1.0",
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.1.0",
45
45
  "@atlaskit/editor-toolbar-model": "^0.0.4",
46
- "@atlaskit/icon": "^27.9.0",
46
+ "@atlaskit/icon": "^27.10.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.19.0",
57
57
  "react": "^18.2.0"
58
58
  },
59
59
  "devDependencies": {