@atlaskit/editor-plugin-block-type 5.1.4 → 5.1.6

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 (23) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/blockTypePlugin.js +1 -10
  3. package/dist/cjs/pm-plugins/block-types.js +17 -7
  4. package/dist/cjs/pm-plugins/ui/ToolbarBlockType/blocktype-button.js +8 -6
  5. package/dist/cjs/pm-plugins/ui/ToolbarBlockType/icons.js +121 -0
  6. package/dist/cjs/pm-plugins/ui/ToolbarBlockType/index.js +5 -2
  7. package/dist/es2019/blockTypePlugin.js +1 -10
  8. package/dist/es2019/pm-plugins/block-types.js +16 -7
  9. package/dist/es2019/pm-plugins/ui/ToolbarBlockType/blocktype-button.js +8 -6
  10. package/dist/es2019/pm-plugins/ui/ToolbarBlockType/icons.js +98 -0
  11. package/dist/es2019/pm-plugins/ui/ToolbarBlockType/index.js +5 -2
  12. package/dist/esm/blockTypePlugin.js +1 -10
  13. package/dist/esm/pm-plugins/block-types.js +16 -7
  14. package/dist/esm/pm-plugins/ui/ToolbarBlockType/blocktype-button.js +8 -6
  15. package/dist/esm/pm-plugins/ui/ToolbarBlockType/icons.js +113 -0
  16. package/dist/esm/pm-plugins/ui/ToolbarBlockType/index.js +5 -2
  17. package/dist/types/pm-plugins/types.d.ts +2 -0
  18. package/dist/types/pm-plugins/ui/ToolbarBlockType/blocktype-button.d.ts +2 -1
  19. package/dist/types/pm-plugins/ui/ToolbarBlockType/icons.d.ts +8 -0
  20. package/dist/types-ts4.5/pm-plugins/types.d.ts +2 -0
  21. package/dist/types-ts4.5/pm-plugins/ui/ToolbarBlockType/blocktype-button.d.ts +2 -1
  22. package/dist/types-ts4.5/pm-plugins/ui/ToolbarBlockType/icons.d.ts +8 -0
  23. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-block-type
2
2
 
3
+ ## 5.1.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 5.1.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [#126339](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126339)
14
+ [`d41ba7595dcd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d41ba7595dcd2) -
15
+ [ux] Updates the look of Text Formatting Contextual toolbar dropdowns.
16
+
3
17
  ## 5.1.4
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/blockTypePlugin.js CHANGED
@@ -212,16 +212,7 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
212
212
  pluginsOptions: _objectSpread({
213
213
  selectionToolbar: function selectionToolbar() {
214
214
  var _api$selectionToolbar;
215
- if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
216
- exposure: true
217
- })) {
218
- return undefined;
219
- }
220
- if ((0, _experiments.editorExperiment)('contextual_formatting_toolbar', true, {
221
- exposure: true
222
- }) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
223
- exposure: true
224
- }) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
215
+ if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'none' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
225
216
  exposure: true
226
217
  })) {
227
218
  var toolbarCustom = {
package/dist/cjs/pm-plugins/block-types.js CHANGED
@@ -1,58 +1,68 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.getBlockTypesInDropdown = exports.WRAPPER_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = exports.PANEL = exports.OTHER = exports.NORMAL_TEXT = exports.HEADING_6 = exports.HEADING_5 = exports.HEADING_4 = exports.HEADING_3 = exports.HEADING_2 = exports.HEADING_1 = exports.HEADINGS_BY_NAME = exports.HEADINGS_BY_LEVEL = exports.FORMATTING_NODE_TYPES = exports.FORMATTING_MARK_TYPES = exports.CODE_BLOCK = exports.BLOCK_QUOTE = exports.ALL_BLOCK_TYPES = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
7
9
  var _messages = require("@atlaskit/editor-common/messages");
8
10
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
11
+ var _icons = require("./ui/ToolbarBlockType/icons");
9
12
  var NORMAL_TEXT = exports.NORMAL_TEXT = {
10
13
  name: 'normal',
11
14
  title: _messages.blockTypeMessages.normal,
12
15
  nodeName: 'paragraph',
13
- tagName: 'p'
16
+ tagName: 'p',
17
+ icon: /*#__PURE__*/_react.default.createElement(_icons.Text, null)
14
18
  };
15
19
  var HEADING_1 = exports.HEADING_1 = {
16
20
  name: 'heading1',
17
21
  title: _messages.blockTypeMessages.heading1,
18
22
  nodeName: 'heading',
19
23
  tagName: 'h1',
20
- level: 1
24
+ level: 1,
25
+ icon: /*#__PURE__*/_react.default.createElement(_icons.H1, null)
21
26
  };
22
27
  var HEADING_2 = exports.HEADING_2 = {
23
28
  name: 'heading2',
24
29
  title: _messages.blockTypeMessages.heading2,
25
30
  nodeName: 'heading',
26
31
  tagName: 'h2',
27
- level: 2
32
+ level: 2,
33
+ icon: /*#__PURE__*/_react.default.createElement(_icons.H2, null)
28
34
  };
29
35
  var HEADING_3 = exports.HEADING_3 = {
30
36
  name: 'heading3',
31
37
  title: _messages.blockTypeMessages.heading3,
32
38
  nodeName: 'heading',
33
39
  tagName: 'h3',
34
- level: 3
40
+ level: 3,
41
+ icon: /*#__PURE__*/_react.default.createElement(_icons.H3, null)
35
42
  };
36
43
  var HEADING_4 = exports.HEADING_4 = {
37
44
  name: 'heading4',
38
45
  title: _messages.blockTypeMessages.heading4,
39
46
  nodeName: 'heading',
40
47
  tagName: 'h4',
41
- level: 4
48
+ level: 4,
49
+ icon: /*#__PURE__*/_react.default.createElement(_icons.H4, null)
42
50
  };
43
51
  var HEADING_5 = exports.HEADING_5 = {
44
52
  name: 'heading5',
45
53
  title: _messages.blockTypeMessages.heading5,
46
54
  nodeName: 'heading',
47
55
  tagName: 'h5',
48
- level: 5
56
+ level: 5,
57
+ icon: /*#__PURE__*/_react.default.createElement(_icons.H5, null)
49
58
  };
50
59
  var HEADING_6 = exports.HEADING_6 = {
51
60
  name: 'heading6',
52
61
  title: _messages.blockTypeMessages.heading6,
53
62
  nodeName: 'heading',
54
63
  tagName: 'h6',
55
- level: 6
64
+ level: 6,
65
+ icon: /*#__PURE__*/_react.default.createElement(_icons.H6, null)
56
66
  };
57
67
  var BLOCK_QUOTE = exports.BLOCK_QUOTE = {
58
68
  name: 'blockquote',
package/dist/cjs/pm-plugins/ui/ToolbarBlockType/blocktype-button.js CHANGED
@@ -15,6 +15,7 @@ var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
15
15
  var _textStyle = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/text-style"));
16
16
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
17
17
  var _primitives = require("@atlaskit/primitives");
18
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
19
  var _blockTypes = require("../../block-types");
19
20
  var _styled = require("./styled");
20
21
  /**
@@ -39,6 +40,12 @@ var BlockTypeButton = exports.BlockTypeButton = function BlockTypeButton(props)
39
40
  blockTypeName: blockTypeName
40
41
  });
41
42
  var toolipTextStyles = props.formatMessage(_messages.toolbarMessages.textStylesTooltip);
43
+ var icon = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && props.blockTypeIcon ? props.blockTypeIcon : (0, _react2.jsx)(_text.default, {
44
+ label: labelTextStyles,
45
+ spacing: "spacious",
46
+ color: "currentColor",
47
+ LEGACY_fallbackIcon: _textStyle.default
48
+ });
42
49
  return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
43
50
  spacing: props.isReducedSpacing ? 'none' : 'default',
44
51
  selected: props.selected
@@ -56,12 +63,7 @@ var BlockTypeButton = exports.BlockTypeButton = function BlockTypeButton(props)
56
63
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
57
64
  css: [_styles.wrapperStyle, props.isSmall && _styled.wrapperSmallStyle],
58
65
  "data-testid": "toolbar-block-type-text-styles-icon"
59
- }, (0, _react2.jsx)(_react.default.Fragment, null, props.isSmall && (0, _react2.jsx)(_text.default, {
60
- label: labelTextStyles,
61
- spacing: "spacious",
62
- color: "currentColor",
63
- LEGACY_fallbackIcon: _textStyle.default
64
- }), (0, _react2.jsx)("span", {
66
+ }, (0, _react2.jsx)(_react.default.Fragment, null, props.isSmall && icon, (0, _react2.jsx)("span", {
65
67
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
66
68
  css: _styles.expandIconContainerStyle
67
69
  }, (0, _react2.jsx)(_chevronDown.default, {
package/dist/cjs/pm-plugins/ui/ToolbarBlockType/icons.js ADDED
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Text = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
10
+
11
+ var SVGContainer = function SVGContainer(_ref) {
12
+ var children = _ref.children;
13
+ return /*#__PURE__*/_react.default.createElement("span", {
14
+ style: {
15
+ width: "var(--ds-space-300, 24px)",
16
+ height: "var(--ds-space-300, 24px)",
17
+ display: 'flex',
18
+ justifyContent: 'flex-start',
19
+ alignItems: 'center'
20
+ }
21
+ }, children);
22
+ };
23
+ var Text = exports.Text = function Text() {
24
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
25
+ width: "16",
26
+ height: "16",
27
+ viewBox: "0 0 16 16",
28
+ fill: "none",
29
+ xmlns: "http://www.w3.org/2000/svg"
30
+ }, /*#__PURE__*/_react.default.createElement("path", {
31
+ "fill-rule": "evenodd",
32
+ "clip-rule": "evenodd",
33
+ d: "M2 1H14V5H12.5V2.5H8.8125V13.5H10.5V15H5.5V13.5H7.3125V2.5H3.5V5H2V1Z",
34
+ fill: "#44546F"
35
+ })));
36
+ };
37
+ var H1 = exports.H1 = function H1() {
38
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
39
+ width: "14",
40
+ height: "14",
41
+ viewBox: "0 0 14 14",
42
+ fill: "none",
43
+ xmlns: "http://www.w3.org/2000/svg"
44
+ }, /*#__PURE__*/_react.default.createElement("path", {
45
+ "fill-rule": "evenodd",
46
+ "clip-rule": "evenodd",
47
+ d: "M0 0H1.5V6.25H6V0H7.5V6.25V7.75V14H6V7.75H1.5V14H0V7.75V6.25V0ZM9.85801 12.6959V14H13.9999V12.6959H12.8161V7.83108H11.3138L9.8418 8.86406V10.4342L11.3499 9.31528V12.6959H9.85801Z",
48
+ fill: "#44546F"
49
+ })));
50
+ };
51
+ var H2 = exports.H2 = function H2() {
52
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
53
+ width: "14",
54
+ height: "14",
55
+ viewBox: "0 0 14 14",
56
+ fill: "none",
57
+ xmlns: "http://www.w3.org/2000/svg"
58
+ }, /*#__PURE__*/_react.default.createElement("path", {
59
+ fillRule: "evenodd",
60
+ clipRule: "evenodd",
61
+ "clip-rule": "evenodd",
62
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM9.2395 12.8296V14H14V12.6553H11.5637V12.573L12.4146 11.875C12.7826 11.5734 13.0772 11.2981 13.2986 11.0491C13.5199 10.8 13.679 10.5635 13.7759 10.3394C13.8755 10.1152 13.9253 9.89111 13.9253 9.66699V9.64624C13.9253 9.28101 13.8285 8.96419 13.6348 8.6958C13.4411 8.42464 13.1685 8.21574 12.8171 8.06909C12.4685 7.91968 12.0562 7.84497 11.5803 7.84497C11.0906 7.84497 10.6617 7.93075 10.2937 8.10229C9.92847 8.27108 9.64347 8.50903 9.43872 8.81616C9.23674 9.12052 9.13574 9.47884 9.13574 9.89111V9.92432H10.7378V9.88696C10.7378 9.74308 10.771 9.6158 10.8374 9.50513C10.9038 9.39445 10.9951 9.30729 11.1113 9.24365C11.2303 9.18001 11.3659 9.14819 11.5181 9.14819C11.6647 9.14819 11.7906 9.1731 11.8958 9.2229C12.0037 9.27271 12.0853 9.34465 12.1406 9.43872C12.1987 9.5328 12.2278 9.64486 12.2278 9.7749V9.79565C12.2278 9.9008 12.1946 10.0115 12.1282 10.1277C12.0645 10.2439 11.9497 10.3878 11.7837 10.5593C11.6177 10.7281 11.3811 10.9467 11.074 11.2151L9.2395 12.8296Z",
63
+ fill: "#44546F"
64
+ })));
65
+ };
66
+ var H3 = exports.H3 = function H3() {
67
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
68
+ width: "14",
69
+ height: "14",
70
+ viewBox: "0 0 14 14",
71
+ fill: "none",
72
+ xmlns: "http://www.w3.org/2000/svg"
73
+ }, /*#__PURE__*/_react.default.createElement("path", {
74
+ "fill-rule": "evenodd",
75
+ "clip-rule": "evenodd",
76
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.219 13.7649C10.5811 13.9216 11.0012 14 11.4794 14C12.0009 14 12.4494 13.9257 12.825 13.7771C13.2005 13.6258 13.4896 13.411 13.6922 13.1327C13.8976 12.8544 14.0002 12.5248 14.0002 12.1438V12.1357C14.0002 11.7575 13.8706 11.4535 13.6112 11.2239C13.3518 10.9942 13.0006 10.8564 12.5575 10.8105V10.7781C12.7709 10.7348 12.9681 10.6565 13.1492 10.543C13.3329 10.4295 13.4801 10.2823 13.5909 10.1013C13.7017 9.91755 13.7571 9.70275 13.7571 9.45688V9.44878C13.7571 9.12186 13.6639 8.83817 13.4774 8.5977C13.291 8.35454 13.0262 8.16541 12.6831 8.03032C12.34 7.89523 11.9347 7.82769 11.4673 7.82769C11.0134 7.82769 10.6162 7.90469 10.2758 8.05869C9.93805 8.20999 9.67057 8.42479 9.47334 8.70308C9.27611 8.98136 9.16533 9.31099 9.14102 9.69194L9.13696 9.75273H10.6851L10.6892 9.71626C10.7027 9.58927 10.7418 9.4785 10.8067 9.38394C10.8715 9.28667 10.9593 9.21237 11.0701 9.16104C11.1836 9.107 11.316 9.07998 11.4673 9.07998C11.6132 9.07998 11.7388 9.10565 11.8442 9.15698C11.9523 9.20562 12.0347 9.27586 12.0914 9.36772C12.1481 9.45959 12.1765 9.56631 12.1765 9.68789V9.696C12.1765 9.81488 12.1427 9.9189 12.0752 10.0081C12.0104 10.0945 11.9158 10.1607 11.7915 10.2066C11.6672 10.2526 11.5159 10.2755 11.3376 10.2755H10.7337V11.4062H11.3376C11.6348 11.4062 11.8618 11.4589 12.0185 11.5643C12.1752 11.667 12.2535 11.8183 12.2535 12.0182V12.0263C12.2535 12.1506 12.2224 12.2614 12.1603 12.3586C12.0982 12.4532 12.009 12.5289 11.8928 12.5856C11.7766 12.6396 11.6375 12.6667 11.4754 12.6667C11.3133 12.6667 11.1728 12.641 11.0539 12.5896C10.935 12.5383 10.8405 12.4681 10.7702 12.3789C10.7 12.2897 10.6567 12.1911 10.6405 12.0831L10.6324 12.0344H8.99512L8.99917 12.0871C9.02889 12.4762 9.14912 12.8139 9.35986 13.1003C9.57061 13.3867 9.857 13.6082 10.219 13.7649Z",
77
+ fill: "#44546F"
78
+ })));
79
+ };
80
+ var H4 = exports.H4 = function H4() {
81
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
82
+ width: "14",
83
+ height: "14",
84
+ viewBox: "0 0 14 14",
85
+ fill: "none",
86
+ xmlns: "http://www.w3.org/2000/svg"
87
+ }, /*#__PURE__*/_react.default.createElement("path", {
88
+ "fill-rule": "evenodd",
89
+ "clip-rule": "evenodd",
90
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM11.542 13.0117V14H13.2607V13.0117H13.9998V11.6195H13.2607V7.79961H10.7428C10.5852 8.05169 10.4291 8.30378 10.2744 8.55586C10.1226 8.80508 9.97077 9.05573 9.81894 9.30781C9.66999 9.5599 9.52103 9.81628 9.37207 10.077C9.22311 10.3348 9.07559 10.5969 8.92949 10.8633C8.7834 11.1268 8.6373 11.3975 8.49121 11.6754V13.0117H11.542ZM11.5936 11.6883H10.0338V11.6023C10.1226 11.4276 10.2143 11.2543 10.3088 11.0824C10.4033 10.9077 10.4993 10.7344 10.5967 10.5625C10.6969 10.3906 10.7972 10.2202 10.8975 10.0512C10.9977 9.8793 11.098 9.71029 11.1982 9.54414C11.3014 9.37799 11.4045 9.21328 11.5076 9.05H11.5936V11.6883Z",
91
+ fill: "#44546F"
92
+ })));
93
+ };
94
+ var H5 = exports.H5 = function H5() {
95
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
96
+ width: "14",
97
+ height: "14",
98
+ viewBox: "0 0 14 14",
99
+ fill: "none",
100
+ xmlns: "http://www.w3.org/2000/svg"
101
+ }, /*#__PURE__*/_react.default.createElement("path", {
102
+ "fill-rule": "evenodd",
103
+ "clip-rule": "evenodd",
104
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.2808 13.7551C10.6349 13.9184 11.0527 14 11.5342 14C12.0239 14 12.4542 13.9101 12.825 13.7302C13.1957 13.5476 13.4835 13.2917 13.6882 12.9624C13.8958 12.6331 13.9995 12.2499 13.9995 11.8127V11.8044C13.9995 11.4281 13.9165 11.0961 13.7505 10.8083C13.5872 10.5178 13.3617 10.2896 13.074 10.1235C12.7862 9.95752 12.457 9.87451 12.0862 9.87451C11.887 9.87451 11.703 9.90356 11.5342 9.96167C11.3682 10.0198 11.2243 10.1 11.1025 10.2024C10.9808 10.3048 10.884 10.4237 10.812 10.5593H10.729L10.8203 9.1731H13.6177V7.84497H9.45898L9.22241 11.4973H10.7207C10.7511 11.4392 10.7913 11.3839 10.8411 11.3313C10.8909 11.276 10.9462 11.2275 11.0071 11.186C11.079 11.139 11.1579 11.103 11.2437 11.0781C11.3322 11.0505 11.4277 11.0366 11.53 11.0366C11.6933 11.0366 11.8385 11.0712 11.9658 11.1404C12.0931 11.2068 12.1927 11.2995 12.2646 11.4185C12.3366 11.5374 12.3726 11.6772 12.3726 11.8376V11.8459C12.3726 12.0037 12.3366 12.1448 12.2646 12.2693C12.1927 12.391 12.0931 12.4865 11.9658 12.5557C11.8413 12.6248 11.6974 12.6594 11.5342 12.6594C11.3903 12.6594 11.2616 12.6345 11.1482 12.5847C11.0347 12.5349 10.9393 12.4685 10.8618 12.3855C10.7871 12.2997 10.7318 12.2056 10.6958 12.1033L10.6875 12.0784H9.12695L9.1311 12.1531C9.15047 12.4989 9.25838 12.8116 9.45483 13.0911C9.65405 13.3705 9.92936 13.5919 10.2808 13.7551Z",
105
+ fill: "#44546F"
106
+ })));
107
+ };
108
+ var H6 = exports.H6 = function H6() {
109
+ return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
110
+ width: "14",
111
+ height: "14",
112
+ viewBox: "0 0 14 14",
113
+ fill: "none",
114
+ xmlns: "http://www.w3.org/2000/svg"
115
+ }, /*#__PURE__*/_react.default.createElement("path", {
116
+ "fill-rule": "evenodd",
117
+ "clip-rule": "evenodd",
118
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.4615 13.7893C10.7857 13.9298 11.1531 14 11.5638 14C12.0501 14 12.4757 13.9068 12.8404 13.7204C13.2052 13.5339 13.4889 13.28 13.6915 12.9584C13.8968 12.6342 13.9995 12.2681 13.9995 11.8602V11.8521C13.9995 11.4873 13.9225 11.1644 13.7685 10.8834C13.6172 10.5998 13.3997 10.3782 13.116 10.2188C12.835 10.0567 12.4973 9.97563 12.1028 9.97563C11.8272 9.97563 11.5935 10.0135 11.4017 10.0891C11.2099 10.1648 11.0532 10.2634 10.9316 10.385C10.81 10.5065 10.7141 10.6389 10.6438 10.7821H10.5547C10.5548 10.7402 10.5561 10.6984 10.5587 10.6565C10.575 10.3539 10.6195 10.0878 10.6925 9.8581C10.7681 9.62845 10.8762 9.44878 11.0167 9.31909C11.1572 9.1894 11.3328 9.12456 11.5436 9.12456C11.6624 9.12456 11.7678 9.14347 11.8597 9.1813C11.9542 9.21912 12.0353 9.27046 12.1028 9.3353C12.1704 9.40015 12.2204 9.47309 12.2528 9.55415L12.2649 9.58252H13.9266L13.9225 9.5582C13.8685 9.23398 13.7334 8.94219 13.5172 8.68281C13.3011 8.42074 13.0215 8.21269 12.6783 8.05869C12.3379 7.90469 11.9542 7.82768 11.5273 7.82768C11.0032 7.82768 10.5466 7.95062 10.1575 8.19648C9.76846 8.44235 9.4672 8.79629 9.25376 9.2583C9.04032 9.71761 8.93359 10.2674 8.93359 10.9078V10.9159C8.93359 11.3941 8.99303 11.8237 9.11191 12.2046C9.23079 12.5856 9.40371 12.9098 9.63066 13.1773C9.86032 13.4421 10.1373 13.6461 10.4615 13.7893ZM10.7492 11.9047C10.7492 12.056 10.7843 12.1925 10.8546 12.3141C10.9275 12.4356 11.0248 12.5316 11.1464 12.6018C11.2707 12.6694 11.4071 12.7031 11.5557 12.7031C11.707 12.7031 11.8435 12.6694 11.965 12.6018C12.0866 12.5316 12.1839 12.4383 12.2568 12.3222C12.3298 12.206 12.3663 12.075 12.3663 11.9291V11.9209C12.3663 11.7696 12.3311 11.6359 12.2609 11.5197C12.1906 11.4035 12.0947 11.3117 11.9731 11.2441C11.8543 11.1766 11.7165 11.1428 11.5598 11.1428C11.4112 11.1428 11.2747 11.1752 11.1504 11.2401C11.0289 11.3022 10.9316 11.39 10.8586 11.5035C10.7857 11.617 10.7492 11.748 10.7492 11.8966V11.9047Z",
119
+ fill: "#44546F"
120
+ })));
121
+ };
package/dist/cjs/pm-plugins/ui/ToolbarBlockType/index.js CHANGED
@@ -23,6 +23,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
23
23
  var _tokens = require("@atlaskit/tokens");
24
24
  var _blockTypes = require("../../block-types");
25
25
  var _blocktypeButton = require("./blocktype-button");
26
+ var _icons = require("./icons");
26
27
  var _styled = require("./styled");
27
28
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
28
29
  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; }
@@ -88,6 +89,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
88
89
  value: blockType,
89
90
  'aria-label': (0, _keymaps.tooltip)(keyMap, formatMessage(blockType.title)),
90
91
  key: "".concat(blockType.name, "-").concat(index),
92
+ elemBefore: blockType === null || blockType === void 0 ? void 0 : blockType.icon,
91
93
  elemAfter:
92
94
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
93
95
  (0, _react2.jsx)("div", {
@@ -99,7 +101,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
99
101
  });
100
102
  if (availableBlockTypesInDropdown.map(function (blockType) {
101
103
  return blockType.name;
102
- }).includes('blockquote')) {
104
+ }).includes('blockquote') && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
103
105
  var clearFormattingItem = {
104
106
  content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", null, _messages.toolbarMessages.clearFormatting.defaultMessage)),
105
107
  value: {
@@ -248,7 +250,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
248
250
  onKeyDown: this.handleTriggerByKeyboard,
249
251
  formatMessage: formatMessage,
250
252
  "aria-expanded": active,
251
- blockTypeName: currentBlockType.name
253
+ blockTypeName: currentBlockType.name,
254
+ blockTypeIcon: (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon) || (0, _react2.jsx)(_icons.Text, null)
252
255
  })), !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _react2.jsx)("span", {
253
256
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
254
257
  css: _styles.separatorStyles
package/dist/es2019/blockTypePlugin.js CHANGED
@@ -199,16 +199,7 @@ const blockTypePlugin = ({
199
199
  pluginsOptions: {
200
200
  selectionToolbar: () => {
201
201
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
202
- if ((api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking) === 'top' && editorExperiment('platform_editor_controls', 'variant1', {
203
- exposure: true
204
- })) {
205
- return undefined;
206
- }
207
- if (editorExperiment('contextual_formatting_toolbar', true, {
208
- exposure: true
209
- }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
210
- exposure: true
211
- }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
202
+ if ((api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking) === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
212
203
  exposure: true
213
204
  })) {
214
205
  const toolbarCustom = {
package/dist/es2019/pm-plugins/block-types.js CHANGED
@@ -1,52 +1,61 @@
1
+ import React from 'react';
1
2
  import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
2
3
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
+ import { Text, H1, H2, H3, H4, H5, H6 } from './ui/ToolbarBlockType/icons';
3
5
  export const NORMAL_TEXT = {
4
6
  name: 'normal',
5
7
  title: messages.normal,
6
8
  nodeName: 'paragraph',
7
- tagName: 'p'
9
+ tagName: 'p',
10
+ icon: /*#__PURE__*/React.createElement(Text, null)
8
11
  };
9
12
  export const HEADING_1 = {
10
13
  name: 'heading1',
11
14
  title: messages.heading1,
12
15
  nodeName: 'heading',
13
16
  tagName: 'h1',
14
- level: 1
17
+ level: 1,
18
+ icon: /*#__PURE__*/React.createElement(H1, null)
15
19
  };
16
20
  export const HEADING_2 = {
17
21
  name: 'heading2',
18
22
  title: messages.heading2,
19
23
  nodeName: 'heading',
20
24
  tagName: 'h2',
21
- level: 2
25
+ level: 2,
26
+ icon: /*#__PURE__*/React.createElement(H2, null)
22
27
  };
23
28
  export const HEADING_3 = {
24
29
  name: 'heading3',
25
30
  title: messages.heading3,
26
31
  nodeName: 'heading',
27
32
  tagName: 'h3',
28
- level: 3
33
+ level: 3,
34
+ icon: /*#__PURE__*/React.createElement(H3, null)
29
35
  };
30
36
  export const HEADING_4 = {
31
37
  name: 'heading4',
32
38
  title: messages.heading4,
33
39
  nodeName: 'heading',
34
40
  tagName: 'h4',
35
- level: 4
41
+ level: 4,
42
+ icon: /*#__PURE__*/React.createElement(H4, null)
36
43
  };
37
44
  export const HEADING_5 = {
38
45
  name: 'heading5',
39
46
  title: messages.heading5,
40
47
  nodeName: 'heading',
41
48
  tagName: 'h5',
42
- level: 5
49
+ level: 5,
50
+ icon: /*#__PURE__*/React.createElement(H5, null)
43
51
  };
44
52
  export const HEADING_6 = {
45
53
  name: 'heading6',
46
54
  title: messages.heading6,
47
55
  nodeName: 'heading',
48
56
  tagName: 'h6',
49
- level: 6
57
+ level: 6,
58
+ icon: /*#__PURE__*/React.createElement(H6, null)
50
59
  };
51
60
  export const BLOCK_QUOTE = {
52
61
  name: 'blockquote',
package/dist/es2019/pm-plugins/ui/ToolbarBlockType/blocktype-button.js CHANGED
@@ -14,6 +14,7 @@ import TextIcon from '@atlaskit/icon/core/text';
14
14
  import { default as TextStyleIconLegacy } from '@atlaskit/icon/glyph/editor/text-style';
15
15
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
16
16
  import { Box, xcss } from '@atlaskit/primitives';
17
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
18
  import { NORMAL_TEXT } from '../../block-types';
18
19
  import { wrapperSmallStyle } from './styled';
19
20
  const buttonContentStyle = xcss({
@@ -31,6 +32,12 @@ export const BlockTypeButton = props => {
31
32
  blockTypeName
32
33
  });
33
34
  const toolipTextStyles = props.formatMessage(toolbarMessages.textStylesTooltip);
35
+ const icon = editorExperiment('platform_editor_controls', 'variant1') && props.blockTypeIcon ? props.blockTypeIcon : jsx(TextIcon, {
36
+ label: labelTextStyles,
37
+ spacing: "spacious",
38
+ color: "currentColor",
39
+ LEGACY_fallbackIcon: TextStyleIconLegacy
40
+ });
34
41
  return jsx(ToolbarButton, {
35
42
  spacing: props.isReducedSpacing ? 'none' : 'default',
36
43
  selected: props.selected
@@ -48,12 +55,7 @@ export const BlockTypeButton = props => {
48
55
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
49
56
  css: [wrapperStyle, props.isSmall && wrapperSmallStyle],
50
57
  "data-testid": "toolbar-block-type-text-styles-icon"
51
- }, jsx(React.Fragment, null, props.isSmall && jsx(TextIcon, {
52
- label: labelTextStyles,
53
- spacing: "spacious",
54
- color: "currentColor",
55
- LEGACY_fallbackIcon: TextStyleIconLegacy
56
- }), jsx("span", {
58
+ }, jsx(React.Fragment, null, props.isSmall && icon, jsx("span", {
57
59
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
58
60
  css: expandIconContainerStyle
59
61
  }, jsx(ChevronDownIcon, {
package/dist/es2019/pm-plugins/ui/ToolbarBlockType/icons.js ADDED
@@ -0,0 +1,98 @@
1
+ /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
2
+ import React from 'react';
3
+ const SVGContainer = ({
4
+ children
5
+ }) => /*#__PURE__*/React.createElement("span", {
6
+ style: {
7
+ width: "var(--ds-space-300, 24px)",
8
+ height: "var(--ds-space-300, 24px)",
9
+ display: 'flex',
10
+ justifyContent: 'flex-start',
11
+ alignItems: 'center'
12
+ }
13
+ }, children);
14
+ export const Text = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
15
+ width: "16",
16
+ height: "16",
17
+ viewBox: "0 0 16 16",
18
+ fill: "none",
19
+ xmlns: "http://www.w3.org/2000/svg"
20
+ }, /*#__PURE__*/React.createElement("path", {
21
+ "fill-rule": "evenodd",
22
+ "clip-rule": "evenodd",
23
+ d: "M2 1H14V5H12.5V2.5H8.8125V13.5H10.5V15H5.5V13.5H7.3125V2.5H3.5V5H2V1Z",
24
+ fill: "#44546F"
25
+ })));
26
+ export const H1 = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
27
+ width: "14",
28
+ height: "14",
29
+ viewBox: "0 0 14 14",
30
+ fill: "none",
31
+ xmlns: "http://www.w3.org/2000/svg"
32
+ }, /*#__PURE__*/React.createElement("path", {
33
+ "fill-rule": "evenodd",
34
+ "clip-rule": "evenodd",
35
+ d: "M0 0H1.5V6.25H6V0H7.5V6.25V7.75V14H6V7.75H1.5V14H0V7.75V6.25V0ZM9.85801 12.6959V14H13.9999V12.6959H12.8161V7.83108H11.3138L9.8418 8.86406V10.4342L11.3499 9.31528V12.6959H9.85801Z",
36
+ fill: "#44546F"
37
+ })));
38
+ export const H2 = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
39
+ width: "14",
40
+ height: "14",
41
+ viewBox: "0 0 14 14",
42
+ fill: "none",
43
+ xmlns: "http://www.w3.org/2000/svg"
44
+ }, /*#__PURE__*/React.createElement("path", {
45
+ fillRule: "evenodd",
46
+ clipRule: "evenodd",
47
+ "clip-rule": "evenodd",
48
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM9.2395 12.8296V14H14V12.6553H11.5637V12.573L12.4146 11.875C12.7826 11.5734 13.0772 11.2981 13.2986 11.0491C13.5199 10.8 13.679 10.5635 13.7759 10.3394C13.8755 10.1152 13.9253 9.89111 13.9253 9.66699V9.64624C13.9253 9.28101 13.8285 8.96419 13.6348 8.6958C13.4411 8.42464 13.1685 8.21574 12.8171 8.06909C12.4685 7.91968 12.0562 7.84497 11.5803 7.84497C11.0906 7.84497 10.6617 7.93075 10.2937 8.10229C9.92847 8.27108 9.64347 8.50903 9.43872 8.81616C9.23674 9.12052 9.13574 9.47884 9.13574 9.89111V9.92432H10.7378V9.88696C10.7378 9.74308 10.771 9.6158 10.8374 9.50513C10.9038 9.39445 10.9951 9.30729 11.1113 9.24365C11.2303 9.18001 11.3659 9.14819 11.5181 9.14819C11.6647 9.14819 11.7906 9.1731 11.8958 9.2229C12.0037 9.27271 12.0853 9.34465 12.1406 9.43872C12.1987 9.5328 12.2278 9.64486 12.2278 9.7749V9.79565C12.2278 9.9008 12.1946 10.0115 12.1282 10.1277C12.0645 10.2439 11.9497 10.3878 11.7837 10.5593C11.6177 10.7281 11.3811 10.9467 11.074 11.2151L9.2395 12.8296Z",
49
+ fill: "#44546F"
50
+ })));
51
+ export const H3 = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
52
+ width: "14",
53
+ height: "14",
54
+ viewBox: "0 0 14 14",
55
+ fill: "none",
56
+ xmlns: "http://www.w3.org/2000/svg"
57
+ }, /*#__PURE__*/React.createElement("path", {
58
+ "fill-rule": "evenodd",
59
+ "clip-rule": "evenodd",
60
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.219 13.7649C10.5811 13.9216 11.0012 14 11.4794 14C12.0009 14 12.4494 13.9257 12.825 13.7771C13.2005 13.6258 13.4896 13.411 13.6922 13.1327C13.8976 12.8544 14.0002 12.5248 14.0002 12.1438V12.1357C14.0002 11.7575 13.8706 11.4535 13.6112 11.2239C13.3518 10.9942 13.0006 10.8564 12.5575 10.8105V10.7781C12.7709 10.7348 12.9681 10.6565 13.1492 10.543C13.3329 10.4295 13.4801 10.2823 13.5909 10.1013C13.7017 9.91755 13.7571 9.70275 13.7571 9.45688V9.44878C13.7571 9.12186 13.6639 8.83817 13.4774 8.5977C13.291 8.35454 13.0262 8.16541 12.6831 8.03032C12.34 7.89523 11.9347 7.82769 11.4673 7.82769C11.0134 7.82769 10.6162 7.90469 10.2758 8.05869C9.93805 8.20999 9.67057 8.42479 9.47334 8.70308C9.27611 8.98136 9.16533 9.31099 9.14102 9.69194L9.13696 9.75273H10.6851L10.6892 9.71626C10.7027 9.58927 10.7418 9.4785 10.8067 9.38394C10.8715 9.28667 10.9593 9.21237 11.0701 9.16104C11.1836 9.107 11.316 9.07998 11.4673 9.07998C11.6132 9.07998 11.7388 9.10565 11.8442 9.15698C11.9523 9.20562 12.0347 9.27586 12.0914 9.36772C12.1481 9.45959 12.1765 9.56631 12.1765 9.68789V9.696C12.1765 9.81488 12.1427 9.9189 12.0752 10.0081C12.0104 10.0945 11.9158 10.1607 11.7915 10.2066C11.6672 10.2526 11.5159 10.2755 11.3376 10.2755H10.7337V11.4062H11.3376C11.6348 11.4062 11.8618 11.4589 12.0185 11.5643C12.1752 11.667 12.2535 11.8183 12.2535 12.0182V12.0263C12.2535 12.1506 12.2224 12.2614 12.1603 12.3586C12.0982 12.4532 12.009 12.5289 11.8928 12.5856C11.7766 12.6396 11.6375 12.6667 11.4754 12.6667C11.3133 12.6667 11.1728 12.641 11.0539 12.5896C10.935 12.5383 10.8405 12.4681 10.7702 12.3789C10.7 12.2897 10.6567 12.1911 10.6405 12.0831L10.6324 12.0344H8.99512L8.99917 12.0871C9.02889 12.4762 9.14912 12.8139 9.35986 13.1003C9.57061 13.3867 9.857 13.6082 10.219 13.7649Z",
61
+ fill: "#44546F"
62
+ })));
63
+ export const H4 = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
64
+ width: "14",
65
+ height: "14",
66
+ viewBox: "0 0 14 14",
67
+ fill: "none",
68
+ xmlns: "http://www.w3.org/2000/svg"
69
+ }, /*#__PURE__*/React.createElement("path", {
70
+ "fill-rule": "evenodd",
71
+ "clip-rule": "evenodd",
72
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM11.542 13.0117V14H13.2607V13.0117H13.9998V11.6195H13.2607V7.79961H10.7428C10.5852 8.05169 10.4291 8.30378 10.2744 8.55586C10.1226 8.80508 9.97077 9.05573 9.81894 9.30781C9.66999 9.5599 9.52103 9.81628 9.37207 10.077C9.22311 10.3348 9.07559 10.5969 8.92949 10.8633C8.7834 11.1268 8.6373 11.3975 8.49121 11.6754V13.0117H11.542ZM11.5936 11.6883H10.0338V11.6023C10.1226 11.4276 10.2143 11.2543 10.3088 11.0824C10.4033 10.9077 10.4993 10.7344 10.5967 10.5625C10.6969 10.3906 10.7972 10.2202 10.8975 10.0512C10.9977 9.8793 11.098 9.71029 11.1982 9.54414C11.3014 9.37799 11.4045 9.21328 11.5076 9.05H11.5936V11.6883Z",
73
+ fill: "#44546F"
74
+ })));
75
+ export const H5 = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
76
+ width: "14",
77
+ height: "14",
78
+ viewBox: "0 0 14 14",
79
+ fill: "none",
80
+ xmlns: "http://www.w3.org/2000/svg"
81
+ }, /*#__PURE__*/React.createElement("path", {
82
+ "fill-rule": "evenodd",
83
+ "clip-rule": "evenodd",
84
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.2808 13.7551C10.6349 13.9184 11.0527 14 11.5342 14C12.0239 14 12.4542 13.9101 12.825 13.7302C13.1957 13.5476 13.4835 13.2917 13.6882 12.9624C13.8958 12.6331 13.9995 12.2499 13.9995 11.8127V11.8044C13.9995 11.4281 13.9165 11.0961 13.7505 10.8083C13.5872 10.5178 13.3617 10.2896 13.074 10.1235C12.7862 9.95752 12.457 9.87451 12.0862 9.87451C11.887 9.87451 11.703 9.90356 11.5342 9.96167C11.3682 10.0198 11.2243 10.1 11.1025 10.2024C10.9808 10.3048 10.884 10.4237 10.812 10.5593H10.729L10.8203 9.1731H13.6177V7.84497H9.45898L9.22241 11.4973H10.7207C10.7511 11.4392 10.7913 11.3839 10.8411 11.3313C10.8909 11.276 10.9462 11.2275 11.0071 11.186C11.079 11.139 11.1579 11.103 11.2437 11.0781C11.3322 11.0505 11.4277 11.0366 11.53 11.0366C11.6933 11.0366 11.8385 11.0712 11.9658 11.1404C12.0931 11.2068 12.1927 11.2995 12.2646 11.4185C12.3366 11.5374 12.3726 11.6772 12.3726 11.8376V11.8459C12.3726 12.0037 12.3366 12.1448 12.2646 12.2693C12.1927 12.391 12.0931 12.4865 11.9658 12.5557C11.8413 12.6248 11.6974 12.6594 11.5342 12.6594C11.3903 12.6594 11.2616 12.6345 11.1482 12.5847C11.0347 12.5349 10.9393 12.4685 10.8618 12.3855C10.7871 12.2997 10.7318 12.2056 10.6958 12.1033L10.6875 12.0784H9.12695L9.1311 12.1531C9.15047 12.4989 9.25838 12.8116 9.45483 13.0911C9.65405 13.3705 9.92936 13.5919 10.2808 13.7551Z",
85
+ fill: "#44546F"
86
+ })));
87
+ export const H6 = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
88
+ width: "14",
89
+ height: "14",
90
+ viewBox: "0 0 14 14",
91
+ fill: "none",
92
+ xmlns: "http://www.w3.org/2000/svg"
93
+ }, /*#__PURE__*/React.createElement("path", {
94
+ "fill-rule": "evenodd",
95
+ "clip-rule": "evenodd",
96
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.4615 13.7893C10.7857 13.9298 11.1531 14 11.5638 14C12.0501 14 12.4757 13.9068 12.8404 13.7204C13.2052 13.5339 13.4889 13.28 13.6915 12.9584C13.8968 12.6342 13.9995 12.2681 13.9995 11.8602V11.8521C13.9995 11.4873 13.9225 11.1644 13.7685 10.8834C13.6172 10.5998 13.3997 10.3782 13.116 10.2188C12.835 10.0567 12.4973 9.97563 12.1028 9.97563C11.8272 9.97563 11.5935 10.0135 11.4017 10.0891C11.2099 10.1648 11.0532 10.2634 10.9316 10.385C10.81 10.5065 10.7141 10.6389 10.6438 10.7821H10.5547C10.5548 10.7402 10.5561 10.6984 10.5587 10.6565C10.575 10.3539 10.6195 10.0878 10.6925 9.8581C10.7681 9.62845 10.8762 9.44878 11.0167 9.31909C11.1572 9.1894 11.3328 9.12456 11.5436 9.12456C11.6624 9.12456 11.7678 9.14347 11.8597 9.1813C11.9542 9.21912 12.0353 9.27046 12.1028 9.3353C12.1704 9.40015 12.2204 9.47309 12.2528 9.55415L12.2649 9.58252H13.9266L13.9225 9.5582C13.8685 9.23398 13.7334 8.94219 13.5172 8.68281C13.3011 8.42074 13.0215 8.21269 12.6783 8.05869C12.3379 7.90469 11.9542 7.82768 11.5273 7.82768C11.0032 7.82768 10.5466 7.95062 10.1575 8.19648C9.76846 8.44235 9.4672 8.79629 9.25376 9.2583C9.04032 9.71761 8.93359 10.2674 8.93359 10.9078V10.9159C8.93359 11.3941 8.99303 11.8237 9.11191 12.2046C9.23079 12.5856 9.40371 12.9098 9.63066 13.1773C9.86032 13.4421 10.1373 13.6461 10.4615 13.7893ZM10.7492 11.9047C10.7492 12.056 10.7843 12.1925 10.8546 12.3141C10.9275 12.4356 11.0248 12.5316 11.1464 12.6018C11.2707 12.6694 11.4071 12.7031 11.5557 12.7031C11.707 12.7031 11.8435 12.6694 11.965 12.6018C12.0866 12.5316 12.1839 12.4383 12.2568 12.3222C12.3298 12.206 12.3663 12.075 12.3663 11.9291V11.9209C12.3663 11.7696 12.3311 11.6359 12.2609 11.5197C12.1906 11.4035 12.0947 11.3117 11.9731 11.2441C11.8543 11.1766 11.7165 11.1428 11.5598 11.1428C11.4112 11.1428 11.2747 11.1752 11.1504 11.2401C11.0289 11.3022 10.9316 11.39 10.8586 11.5035C10.7857 11.617 10.7492 11.748 10.7492 11.8966V11.9047Z",
97
+ fill: "#44546F"
98
+ })));
package/dist/es2019/pm-plugins/ui/ToolbarBlockType/index.js CHANGED
@@ -17,6 +17,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
17
  import { ThemeMutationObserver } from '@atlaskit/tokens';
18
18
  import { NORMAL_TEXT } from '../../block-types';
19
19
  import { BlockTypeButton } from './blocktype-button';
20
+ import { Text } from './icons';
20
21
  import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect, floatingToolbarWrapperStyle } from './styled';
21
22
  // eslint-disable-next-line @repo/internal/react/no-class-components
22
23
  class ToolbarBlockType extends React.PureComponent {
@@ -76,6 +77,7 @@ class ToolbarBlockType extends React.PureComponent {
76
77
  value: blockType,
77
78
  'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
78
79
  key: `${blockType.name}-${index}`,
80
+ elemBefore: blockType === null || blockType === void 0 ? void 0 : blockType.icon,
79
81
  elemAfter:
80
82
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
81
83
  jsx("div", {
@@ -85,7 +87,7 @@ class ToolbarBlockType extends React.PureComponent {
85
87
  };
86
88
  return item;
87
89
  });
88
- if (availableBlockTypesInDropdown.map(blockType => blockType.name).includes('blockquote')) {
90
+ if (availableBlockTypesInDropdown.map(blockType => blockType.name).includes('blockquote') && editorExperiment('platform_editor_controls', 'control')) {
89
91
  const clearFormattingItem = {
90
92
  content: jsx("div", null, jsx("p", null, toolbarMessages.clearFormatting.defaultMessage)),
91
93
  value: {
@@ -226,7 +228,8 @@ class ToolbarBlockType extends React.PureComponent {
226
228
  onKeyDown: this.handleTriggerByKeyboard,
227
229
  formatMessage: formatMessage,
228
230
  "aria-expanded": active,
229
- blockTypeName: currentBlockType.name
231
+ blockTypeName: currentBlockType.name,
232
+ blockTypeIcon: (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon) || jsx(Text, null)
230
233
  })), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
231
234
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
232
235
  css: separatorStyles
package/dist/esm/blockTypePlugin.js CHANGED
@@ -205,16 +205,7 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
205
205
  pluginsOptions: _objectSpread({
206
206
  selectionToolbar: function selectionToolbar() {
207
207
  var _api$selectionToolbar;
208
- if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top' && editorExperiment('platform_editor_controls', 'variant1', {
209
- exposure: true
210
- })) {
211
- return undefined;
212
- }
213
- if (editorExperiment('contextual_formatting_toolbar', true, {
214
- exposure: true
215
- }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
216
- exposure: true
217
- }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
208
+ if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
218
209
  exposure: true
219
210
  })) {
220
211
  var toolbarCustom = {
package/dist/esm/pm-plugins/block-types.js CHANGED
@@ -1,52 +1,61 @@
1
+ import React from 'react';
1
2
  import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
2
3
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
+ import { Text, H1, H2, H3, H4, H5, H6 } from './ui/ToolbarBlockType/icons';
3
5
  export var NORMAL_TEXT = {
4
6
  name: 'normal',
5
7
  title: messages.normal,
6
8
  nodeName: 'paragraph',
7
- tagName: 'p'
9
+ tagName: 'p',
10
+ icon: /*#__PURE__*/React.createElement(Text, null)
8
11
  };
9
12
  export var HEADING_1 = {
10
13
  name: 'heading1',
11
14
  title: messages.heading1,
12
15
  nodeName: 'heading',
13
16
  tagName: 'h1',
14
- level: 1
17
+ level: 1,
18
+ icon: /*#__PURE__*/React.createElement(H1, null)
15
19
  };
16
20
  export var HEADING_2 = {
17
21
  name: 'heading2',
18
22
  title: messages.heading2,
19
23
  nodeName: 'heading',
20
24
  tagName: 'h2',
21
- level: 2
25
+ level: 2,
26
+ icon: /*#__PURE__*/React.createElement(H2, null)
22
27
  };
23
28
  export var HEADING_3 = {
24
29
  name: 'heading3',
25
30
  title: messages.heading3,
26
31
  nodeName: 'heading',
27
32
  tagName: 'h3',
28
- level: 3
33
+ level: 3,
34
+ icon: /*#__PURE__*/React.createElement(H3, null)
29
35
  };
30
36
  export var HEADING_4 = {
31
37
  name: 'heading4',
32
38
  title: messages.heading4,
33
39
  nodeName: 'heading',
34
40
  tagName: 'h4',
35
- level: 4
41
+ level: 4,
42
+ icon: /*#__PURE__*/React.createElement(H4, null)
36
43
  };
37
44
  export var HEADING_5 = {
38
45
  name: 'heading5',
39
46
  title: messages.heading5,
40
47
  nodeName: 'heading',
41
48
  tagName: 'h5',
42
- level: 5
49
+ level: 5,
50
+ icon: /*#__PURE__*/React.createElement(H5, null)
43
51
  };
44
52
  export var HEADING_6 = {
45
53
  name: 'heading6',
46
54
  title: messages.heading6,
47
55
  nodeName: 'heading',
48
56
  tagName: 'h6',
49
- level: 6
57
+ level: 6,
58
+ icon: /*#__PURE__*/React.createElement(H6, null)
50
59
  };
51
60
  export var BLOCK_QUOTE = {
52
61
  name: 'blockquote',
package/dist/esm/pm-plugins/ui/ToolbarBlockType/blocktype-button.js CHANGED
@@ -14,6 +14,7 @@ import TextIcon from '@atlaskit/icon/core/text';
14
14
  import { default as TextStyleIconLegacy } from '@atlaskit/icon/glyph/editor/text-style';
15
15
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
16
16
  import { Box, xcss } from '@atlaskit/primitives';
17
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
18
  import { NORMAL_TEXT } from '../../block-types';
18
19
  import { wrapperSmallStyle } from './styled';
19
20
  var buttonContentStyle = xcss({
@@ -31,6 +32,12 @@ export var BlockTypeButton = function BlockTypeButton(props) {
31
32
  blockTypeName: blockTypeName
32
33
  });
33
34
  var toolipTextStyles = props.formatMessage(toolbarMessages.textStylesTooltip);
35
+ var icon = editorExperiment('platform_editor_controls', 'variant1') && props.blockTypeIcon ? props.blockTypeIcon : jsx(TextIcon, {
36
+ label: labelTextStyles,
37
+ spacing: "spacious",
38
+ color: "currentColor",
39
+ LEGACY_fallbackIcon: TextStyleIconLegacy
40
+ });
34
41
  return jsx(ToolbarButton, {
35
42
  spacing: props.isReducedSpacing ? 'none' : 'default',
36
43
  selected: props.selected
@@ -48,12 +55,7 @@ export var BlockTypeButton = function BlockTypeButton(props) {
48
55
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
49
56
  css: [wrapperStyle, props.isSmall && wrapperSmallStyle],
50
57
  "data-testid": "toolbar-block-type-text-styles-icon"
51
- }, jsx(React.Fragment, null, props.isSmall && jsx(TextIcon, {
52
- label: labelTextStyles,
53
- spacing: "spacious",
54
- color: "currentColor",
55
- LEGACY_fallbackIcon: TextStyleIconLegacy
56
- }), jsx("span", {
58
+ }, jsx(React.Fragment, null, props.isSmall && icon, jsx("span", {
57
59
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
58
60
  css: expandIconContainerStyle
59
61
  }, jsx(ChevronDownIcon, {
package/dist/esm/pm-plugins/ui/ToolbarBlockType/icons.js ADDED
@@ -0,0 +1,113 @@
1
+ /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
2
+ import React from 'react';
3
+ var SVGContainer = function SVGContainer(_ref) {
4
+ var children = _ref.children;
5
+ return /*#__PURE__*/React.createElement("span", {
6
+ style: {
7
+ width: "var(--ds-space-300, 24px)",
8
+ height: "var(--ds-space-300, 24px)",
9
+ display: 'flex',
10
+ justifyContent: 'flex-start',
11
+ alignItems: 'center'
12
+ }
13
+ }, children);
14
+ };
15
+ export var Text = function Text() {
16
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
17
+ width: "16",
18
+ height: "16",
19
+ viewBox: "0 0 16 16",
20
+ fill: "none",
21
+ xmlns: "http://www.w3.org/2000/svg"
22
+ }, /*#__PURE__*/React.createElement("path", {
23
+ "fill-rule": "evenodd",
24
+ "clip-rule": "evenodd",
25
+ d: "M2 1H14V5H12.5V2.5H8.8125V13.5H10.5V15H5.5V13.5H7.3125V2.5H3.5V5H2V1Z",
26
+ fill: "#44546F"
27
+ })));
28
+ };
29
+ export var H1 = function H1() {
30
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
31
+ width: "14",
32
+ height: "14",
33
+ viewBox: "0 0 14 14",
34
+ fill: "none",
35
+ xmlns: "http://www.w3.org/2000/svg"
36
+ }, /*#__PURE__*/React.createElement("path", {
37
+ "fill-rule": "evenodd",
38
+ "clip-rule": "evenodd",
39
+ d: "M0 0H1.5V6.25H6V0H7.5V6.25V7.75V14H6V7.75H1.5V14H0V7.75V6.25V0ZM9.85801 12.6959V14H13.9999V12.6959H12.8161V7.83108H11.3138L9.8418 8.86406V10.4342L11.3499 9.31528V12.6959H9.85801Z",
40
+ fill: "#44546F"
41
+ })));
42
+ };
43
+ export var H2 = function H2() {
44
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
45
+ width: "14",
46
+ height: "14",
47
+ viewBox: "0 0 14 14",
48
+ fill: "none",
49
+ xmlns: "http://www.w3.org/2000/svg"
50
+ }, /*#__PURE__*/React.createElement("path", {
51
+ fillRule: "evenodd",
52
+ clipRule: "evenodd",
53
+ "clip-rule": "evenodd",
54
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM9.2395 12.8296V14H14V12.6553H11.5637V12.573L12.4146 11.875C12.7826 11.5734 13.0772 11.2981 13.2986 11.0491C13.5199 10.8 13.679 10.5635 13.7759 10.3394C13.8755 10.1152 13.9253 9.89111 13.9253 9.66699V9.64624C13.9253 9.28101 13.8285 8.96419 13.6348 8.6958C13.4411 8.42464 13.1685 8.21574 12.8171 8.06909C12.4685 7.91968 12.0562 7.84497 11.5803 7.84497C11.0906 7.84497 10.6617 7.93075 10.2937 8.10229C9.92847 8.27108 9.64347 8.50903 9.43872 8.81616C9.23674 9.12052 9.13574 9.47884 9.13574 9.89111V9.92432H10.7378V9.88696C10.7378 9.74308 10.771 9.6158 10.8374 9.50513C10.9038 9.39445 10.9951 9.30729 11.1113 9.24365C11.2303 9.18001 11.3659 9.14819 11.5181 9.14819C11.6647 9.14819 11.7906 9.1731 11.8958 9.2229C12.0037 9.27271 12.0853 9.34465 12.1406 9.43872C12.1987 9.5328 12.2278 9.64486 12.2278 9.7749V9.79565C12.2278 9.9008 12.1946 10.0115 12.1282 10.1277C12.0645 10.2439 11.9497 10.3878 11.7837 10.5593C11.6177 10.7281 11.3811 10.9467 11.074 11.2151L9.2395 12.8296Z",
55
+ fill: "#44546F"
56
+ })));
57
+ };
58
+ export var H3 = function H3() {
59
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
60
+ width: "14",
61
+ height: "14",
62
+ viewBox: "0 0 14 14",
63
+ fill: "none",
64
+ xmlns: "http://www.w3.org/2000/svg"
65
+ }, /*#__PURE__*/React.createElement("path", {
66
+ "fill-rule": "evenodd",
67
+ "clip-rule": "evenodd",
68
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.219 13.7649C10.5811 13.9216 11.0012 14 11.4794 14C12.0009 14 12.4494 13.9257 12.825 13.7771C13.2005 13.6258 13.4896 13.411 13.6922 13.1327C13.8976 12.8544 14.0002 12.5248 14.0002 12.1438V12.1357C14.0002 11.7575 13.8706 11.4535 13.6112 11.2239C13.3518 10.9942 13.0006 10.8564 12.5575 10.8105V10.7781C12.7709 10.7348 12.9681 10.6565 13.1492 10.543C13.3329 10.4295 13.4801 10.2823 13.5909 10.1013C13.7017 9.91755 13.7571 9.70275 13.7571 9.45688V9.44878C13.7571 9.12186 13.6639 8.83817 13.4774 8.5977C13.291 8.35454 13.0262 8.16541 12.6831 8.03032C12.34 7.89523 11.9347 7.82769 11.4673 7.82769C11.0134 7.82769 10.6162 7.90469 10.2758 8.05869C9.93805 8.20999 9.67057 8.42479 9.47334 8.70308C9.27611 8.98136 9.16533 9.31099 9.14102 9.69194L9.13696 9.75273H10.6851L10.6892 9.71626C10.7027 9.58927 10.7418 9.4785 10.8067 9.38394C10.8715 9.28667 10.9593 9.21237 11.0701 9.16104C11.1836 9.107 11.316 9.07998 11.4673 9.07998C11.6132 9.07998 11.7388 9.10565 11.8442 9.15698C11.9523 9.20562 12.0347 9.27586 12.0914 9.36772C12.1481 9.45959 12.1765 9.56631 12.1765 9.68789V9.696C12.1765 9.81488 12.1427 9.9189 12.0752 10.0081C12.0104 10.0945 11.9158 10.1607 11.7915 10.2066C11.6672 10.2526 11.5159 10.2755 11.3376 10.2755H10.7337V11.4062H11.3376C11.6348 11.4062 11.8618 11.4589 12.0185 11.5643C12.1752 11.667 12.2535 11.8183 12.2535 12.0182V12.0263C12.2535 12.1506 12.2224 12.2614 12.1603 12.3586C12.0982 12.4532 12.009 12.5289 11.8928 12.5856C11.7766 12.6396 11.6375 12.6667 11.4754 12.6667C11.3133 12.6667 11.1728 12.641 11.0539 12.5896C10.935 12.5383 10.8405 12.4681 10.7702 12.3789C10.7 12.2897 10.6567 12.1911 10.6405 12.0831L10.6324 12.0344H8.99512L8.99917 12.0871C9.02889 12.4762 9.14912 12.8139 9.35986 13.1003C9.57061 13.3867 9.857 13.6082 10.219 13.7649Z",
69
+ fill: "#44546F"
70
+ })));
71
+ };
72
+ export var H4 = function H4() {
73
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
74
+ width: "14",
75
+ height: "14",
76
+ viewBox: "0 0 14 14",
77
+ fill: "none",
78
+ xmlns: "http://www.w3.org/2000/svg"
79
+ }, /*#__PURE__*/React.createElement("path", {
80
+ "fill-rule": "evenodd",
81
+ "clip-rule": "evenodd",
82
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM11.542 13.0117V14H13.2607V13.0117H13.9998V11.6195H13.2607V7.79961H10.7428C10.5852 8.05169 10.4291 8.30378 10.2744 8.55586C10.1226 8.80508 9.97077 9.05573 9.81894 9.30781C9.66999 9.5599 9.52103 9.81628 9.37207 10.077C9.22311 10.3348 9.07559 10.5969 8.92949 10.8633C8.7834 11.1268 8.6373 11.3975 8.49121 11.6754V13.0117H11.542ZM11.5936 11.6883H10.0338V11.6023C10.1226 11.4276 10.2143 11.2543 10.3088 11.0824C10.4033 10.9077 10.4993 10.7344 10.5967 10.5625C10.6969 10.3906 10.7972 10.2202 10.8975 10.0512C10.9977 9.8793 11.098 9.71029 11.1982 9.54414C11.3014 9.37799 11.4045 9.21328 11.5076 9.05H11.5936V11.6883Z",
83
+ fill: "#44546F"
84
+ })));
85
+ };
86
+ export var H5 = function H5() {
87
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
88
+ width: "14",
89
+ height: "14",
90
+ viewBox: "0 0 14 14",
91
+ fill: "none",
92
+ xmlns: "http://www.w3.org/2000/svg"
93
+ }, /*#__PURE__*/React.createElement("path", {
94
+ "fill-rule": "evenodd",
95
+ "clip-rule": "evenodd",
96
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.2808 13.7551C10.6349 13.9184 11.0527 14 11.5342 14C12.0239 14 12.4542 13.9101 12.825 13.7302C13.1957 13.5476 13.4835 13.2917 13.6882 12.9624C13.8958 12.6331 13.9995 12.2499 13.9995 11.8127V11.8044C13.9995 11.4281 13.9165 11.0961 13.7505 10.8083C13.5872 10.5178 13.3617 10.2896 13.074 10.1235C12.7862 9.95752 12.457 9.87451 12.0862 9.87451C11.887 9.87451 11.703 9.90356 11.5342 9.96167C11.3682 10.0198 11.2243 10.1 11.1025 10.2024C10.9808 10.3048 10.884 10.4237 10.812 10.5593H10.729L10.8203 9.1731H13.6177V7.84497H9.45898L9.22241 11.4973H10.7207C10.7511 11.4392 10.7913 11.3839 10.8411 11.3313C10.8909 11.276 10.9462 11.2275 11.0071 11.186C11.079 11.139 11.1579 11.103 11.2437 11.0781C11.3322 11.0505 11.4277 11.0366 11.53 11.0366C11.6933 11.0366 11.8385 11.0712 11.9658 11.1404C12.0931 11.2068 12.1927 11.2995 12.2646 11.4185C12.3366 11.5374 12.3726 11.6772 12.3726 11.8376V11.8459C12.3726 12.0037 12.3366 12.1448 12.2646 12.2693C12.1927 12.391 12.0931 12.4865 11.9658 12.5557C11.8413 12.6248 11.6974 12.6594 11.5342 12.6594C11.3903 12.6594 11.2616 12.6345 11.1482 12.5847C11.0347 12.5349 10.9393 12.4685 10.8618 12.3855C10.7871 12.2997 10.7318 12.2056 10.6958 12.1033L10.6875 12.0784H9.12695L9.1311 12.1531C9.15047 12.4989 9.25838 12.8116 9.45483 13.0911C9.65405 13.3705 9.92936 13.5919 10.2808 13.7551Z",
97
+ fill: "#44546F"
98
+ })));
99
+ };
100
+ export var H6 = function H6() {
101
+ return /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
102
+ width: "14",
103
+ height: "14",
104
+ viewBox: "0 0 14 14",
105
+ fill: "none",
106
+ xmlns: "http://www.w3.org/2000/svg"
107
+ }, /*#__PURE__*/React.createElement("path", {
108
+ "fill-rule": "evenodd",
109
+ "clip-rule": "evenodd",
110
+ d: "M1.5 0H0V6.25V7.75V14H1.5V7.75H6V14H7.5V7.75V6.25V0H6V6.25H1.5V0ZM10.4615 13.7893C10.7857 13.9298 11.1531 14 11.5638 14C12.0501 14 12.4757 13.9068 12.8404 13.7204C13.2052 13.5339 13.4889 13.28 13.6915 12.9584C13.8968 12.6342 13.9995 12.2681 13.9995 11.8602V11.8521C13.9995 11.4873 13.9225 11.1644 13.7685 10.8834C13.6172 10.5998 13.3997 10.3782 13.116 10.2188C12.835 10.0567 12.4973 9.97563 12.1028 9.97563C11.8272 9.97563 11.5935 10.0135 11.4017 10.0891C11.2099 10.1648 11.0532 10.2634 10.9316 10.385C10.81 10.5065 10.7141 10.6389 10.6438 10.7821H10.5547C10.5548 10.7402 10.5561 10.6984 10.5587 10.6565C10.575 10.3539 10.6195 10.0878 10.6925 9.8581C10.7681 9.62845 10.8762 9.44878 11.0167 9.31909C11.1572 9.1894 11.3328 9.12456 11.5436 9.12456C11.6624 9.12456 11.7678 9.14347 11.8597 9.1813C11.9542 9.21912 12.0353 9.27046 12.1028 9.3353C12.1704 9.40015 12.2204 9.47309 12.2528 9.55415L12.2649 9.58252H13.9266L13.9225 9.5582C13.8685 9.23398 13.7334 8.94219 13.5172 8.68281C13.3011 8.42074 13.0215 8.21269 12.6783 8.05869C12.3379 7.90469 11.9542 7.82768 11.5273 7.82768C11.0032 7.82768 10.5466 7.95062 10.1575 8.19648C9.76846 8.44235 9.4672 8.79629 9.25376 9.2583C9.04032 9.71761 8.93359 10.2674 8.93359 10.9078V10.9159C8.93359 11.3941 8.99303 11.8237 9.11191 12.2046C9.23079 12.5856 9.40371 12.9098 9.63066 13.1773C9.86032 13.4421 10.1373 13.6461 10.4615 13.7893ZM10.7492 11.9047C10.7492 12.056 10.7843 12.1925 10.8546 12.3141C10.9275 12.4356 11.0248 12.5316 11.1464 12.6018C11.2707 12.6694 11.4071 12.7031 11.5557 12.7031C11.707 12.7031 11.8435 12.6694 11.965 12.6018C12.0866 12.5316 12.1839 12.4383 12.2568 12.3222C12.3298 12.206 12.3663 12.075 12.3663 11.9291V11.9209C12.3663 11.7696 12.3311 11.6359 12.2609 11.5197C12.1906 11.4035 12.0947 11.3117 11.9731 11.2441C11.8543 11.1766 11.7165 11.1428 11.5598 11.1428C11.4112 11.1428 11.2747 11.1752 11.1504 11.2401C11.0289 11.3022 10.9316 11.39 10.8586 11.5035C10.7857 11.617 10.7492 11.748 10.7492 11.8966V11.9047Z",
111
+ fill: "#44546F"
112
+ })));
113
+ };
package/dist/esm/pm-plugins/ui/ToolbarBlockType/index.js CHANGED
@@ -26,6 +26,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
26
26
  import { ThemeMutationObserver } from '@atlaskit/tokens';
27
27
  import { NORMAL_TEXT } from '../../block-types';
28
28
  import { BlockTypeButton } from './blocktype-button';
29
+ import { Text } from './icons';
29
30
  import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect, floatingToolbarWrapperStyle } from './styled';
30
31
  // eslint-disable-next-line @repo/internal/react/no-class-components
31
32
  var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
@@ -84,6 +85,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
84
85
  value: blockType,
85
86
  'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
86
87
  key: "".concat(blockType.name, "-").concat(index),
88
+ elemBefore: blockType === null || blockType === void 0 ? void 0 : blockType.icon,
87
89
  elemAfter:
88
90
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
89
91
  jsx("div", {
@@ -95,7 +97,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
95
97
  });
96
98
  if (availableBlockTypesInDropdown.map(function (blockType) {
97
99
  return blockType.name;
98
- }).includes('blockquote')) {
100
+ }).includes('blockquote') && editorExperiment('platform_editor_controls', 'control')) {
99
101
  var clearFormattingItem = {
100
102
  content: jsx("div", null, jsx("p", null, toolbarMessages.clearFormatting.defaultMessage)),
101
103
  value: {
@@ -244,7 +246,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
244
246
  onKeyDown: this.handleTriggerByKeyboard,
245
247
  formatMessage: formatMessage,
246
248
  "aria-expanded": active,
247
- blockTypeName: currentBlockType.name
249
+ blockTypeName: currentBlockType.name,
250
+ blockTypeIcon: (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon) || jsx(Text, null)
248
251
  })), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
249
252
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
250
253
  css: separatorStyles
package/dist/types/pm-plugins/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { ReactElement } from 'react';
1
2
  import type { MessageDescriptor } from 'react-intl-next';
2
3
  import type { AllowedBlockTypes, HeadingLevelsAndNormalText } from '@atlaskit/editor-common/types';
3
4
  import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
@@ -8,6 +9,7 @@ export interface BlockType {
8
9
  nodeName: string;
9
10
  tagName?: string;
10
11
  level?: HeadingLevelsAndNormalText;
12
+ icon?: ReactElement;
11
13
  }
12
14
  export interface BlockTypeNode {
13
15
  name: AllowedBlockTypes;
package/dist/types/pm-plugins/ui/ToolbarBlockType/blocktype-button.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import React from 'react';
5
+ import React, { type ReactElement } from 'react';
6
6
  import { jsx } from '@emotion/react';
7
7
  import type { MessageDescriptor, WrappedComponentProps } from 'react-intl-next';
8
8
  export interface BlockTypeButtonProps {
@@ -16,5 +16,6 @@ export interface BlockTypeButtonProps {
16
16
  onKeyDown(e: React.KeyboardEvent): void;
17
17
  formatMessage: WrappedComponentProps['intl']['formatMessage'];
18
18
  blockTypeName?: string;
19
+ blockTypeIcon?: ReactElement;
19
20
  }
20
21
  export declare const BlockTypeButton: (props: BlockTypeButtonProps) => jsx.JSX.Element;
package/dist/types/pm-plugins/ui/ToolbarBlockType/icons.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ export declare const Text: () => React.JSX.Element;
3
+ export declare const H1: () => React.JSX.Element;
4
+ export declare const H2: () => React.JSX.Element;
5
+ export declare const H3: () => React.JSX.Element;
6
+ export declare const H4: () => React.JSX.Element;
7
+ export declare const H5: () => React.JSX.Element;
8
+ export declare const H6: () => React.JSX.Element;
package/dist/types-ts4.5/pm-plugins/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { ReactElement } from 'react';
1
2
  import type { MessageDescriptor } from 'react-intl-next';
2
3
  import type { AllowedBlockTypes, HeadingLevelsAndNormalText } from '@atlaskit/editor-common/types';
3
4
  import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
@@ -8,6 +9,7 @@ export interface BlockType {
8
9
  nodeName: string;
9
10
  tagName?: string;
10
11
  level?: HeadingLevelsAndNormalText;
12
+ icon?: ReactElement;
11
13
  }
12
14
  export interface BlockTypeNode {
13
15
  name: AllowedBlockTypes;
package/dist/types-ts4.5/pm-plugins/ui/ToolbarBlockType/blocktype-button.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import React from 'react';
5
+ import React, { type ReactElement } from 'react';
6
6
  import { jsx } from '@emotion/react';
7
7
  import type { MessageDescriptor, WrappedComponentProps } from 'react-intl-next';
8
8
  export interface BlockTypeButtonProps {
@@ -16,5 +16,6 @@ export interface BlockTypeButtonProps {
16
16
  onKeyDown(e: React.KeyboardEvent): void;
17
17
  formatMessage: WrappedComponentProps['intl']['formatMessage'];
18
18
  blockTypeName?: string;
19
+ blockTypeIcon?: ReactElement;
19
20
  }
20
21
  export declare const BlockTypeButton: (props: BlockTypeButtonProps) => jsx.JSX.Element;
package/dist/types-ts4.5/pm-plugins/ui/ToolbarBlockType/icons.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ export declare const Text: () => React.JSX.Element;
3
+ export declare const H1: () => React.JSX.Element;
4
+ export declare const H2: () => React.JSX.Element;
5
+ export declare const H3: () => React.JSX.Element;
6
+ export declare const H4: () => React.JSX.Element;
7
+ export declare const H5: () => React.JSX.Element;
8
+ export declare const H6: () => React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-type",
3
- "version": "5.1.4",
3
+ "version": "5.1.6",
4
4
  "description": "BlockType plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,8 +36,8 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@atlaskit/adf-schema": "^47.6.0",
39
- "@atlaskit/editor-common": "^102.4.0",
40
- "@atlaskit/editor-plugin-analytics": "^2.1.0",
39
+ "@atlaskit/editor-common": "^102.8.0",
40
+ "@atlaskit/editor-plugin-analytics": "^2.2.0",
41
41
  "@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
42
42
  "@atlaskit/editor-plugin-selection-toolbar": "^2.0.0",
43
43
  "@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,8 +48,8 @@
48
48
  "@atlaskit/primitives": "^14.1.0",
49
49
  "@atlaskit/prosemirror-input-rules": "^3.3.0",
50
50
  "@atlaskit/theme": "^18.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^3.6.0",
52
- "@atlaskit/tokens": "^4.4.0",
51
+ "@atlaskit/tmp-editor-statsig": "^4.0.0",
52
+ "@atlaskit/tokens": "^4.5.0",
53
53
  "@babel/runtime": "^7.0.0",
54
54
  "@emotion/react": "^11.7.1"
55
55
  },