@atlaskit/editor-plugin-help-dialog 1.8.11 → 1.8.13

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.
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.shortcutNamesWithoutKeymap = exports.getComponentFromKeymap = void 0;
7
7
  var _react = require("@emotion/react");
8
8
  var _browser = require("@atlaskit/editor-common/browser");
9
+ var _primitives = require("@atlaskit/primitives");
9
10
  var _styles = require("./styles");
10
11
  /**
11
12
  * @jsxRuntime classic
@@ -13,6 +14,33 @@ var _styles = require("./styles");
13
14
  */
14
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
16
 
17
+ var codeLg = (0, _primitives.xcss)({
18
+ borderRadius: 'border.radius',
19
+ display: 'inline-block',
20
+ height: "var(--ds-space-300, 24px)",
21
+ lineHeight: "var(--ds-space-300, 24px)",
22
+ textAlign: 'center',
23
+ paddingInline: 'space.150',
24
+ backgroundColor: 'color.background.neutral'
25
+ });
26
+ var codeMd = (0, _primitives.xcss)({
27
+ backgroundColor: 'color.background.neutral',
28
+ borderRadius: 'border.radius',
29
+ display: 'inline-block',
30
+ height: "var(--ds-space-300, 24px)",
31
+ lineHeight: "var(--ds-space-300, 24px)",
32
+ width: '50px',
33
+ textAlign: 'center'
34
+ });
35
+ var codeSm = (0, _primitives.xcss)({
36
+ backgroundColor: 'color.background.neutral',
37
+ borderRadius: 'border.radius',
38
+ width: "var(--ds-space-300, 24px)",
39
+ display: 'inline-block',
40
+ height: "var(--ds-space-300, 24px)",
41
+ lineHeight: "var(--ds-space-300, 24px)",
42
+ textAlign: 'center'
43
+ });
16
44
  var getKeyParts = function getKeyParts(keymap) {
17
45
  var shortcut = keymap[_browser.browser.mac ? 'mac' : 'windows'];
18
46
  if (_browser.browser.mac) {
@@ -29,47 +57,47 @@ var getComponentFromKeymap = exports.getComponentFromKeymap = function getCompon
29
57
  css: _styles.componentFromKeymapWrapperStyles
30
58
  }, keyParts.map(function (part, index) {
31
59
  if (part === '+') {
32
- return (0, _react.jsx)("span", {
60
+ return (0, _react.jsx)(_primitives.Box, {
61
+ as: "span",
33
62
  key: "".concat(keyParts, "-").concat(index)
34
63
  }, ' + ');
35
64
  } else if (part === 'Cmd') {
36
- return (
37
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
38
- (0, _react.jsx)("span", {
39
- css: _styles.codeSm,
40
- key: "".concat(keyParts, "-").concat(index)
41
- }, "\u2318")
42
- );
65
+ return (0, _react.jsx)(_primitives.Box, {
66
+ as: "span",
67
+ xcss: codeSm,
68
+ key: "".concat(keyParts, "-").concat(index)
69
+ }, "\u2318");
43
70
  } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
44
71
  return (
45
72
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
46
- (0, _react.jsx)("span", {
47
- css: _styles.codeMd,
73
+ (0, _react.jsx)(_primitives.Box, {
74
+ as: "span",
75
+ xcss: codeMd,
48
76
  key: "".concat(keyParts, "-").concat(index)
49
77
  }, part)
50
78
  );
51
79
  } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
52
80
  return (
53
81
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
54
- (0, _react.jsx)("span", {
55
- css: _styles.codeLg,
82
+ (0, _react.jsx)(_primitives.Box, {
83
+ as: "span",
84
+ xcss: codeLg,
56
85
  key: "".concat(keyParts, "-").concat(index)
57
86
  }, part)
58
87
  );
59
88
  } else if (part.toLowerCase() === 'enter') {
60
- return (
61
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
62
- (0, _react.jsx)("span", {
63
- className: "enter-keymap",
64
- css: _styles.codeSm,
65
- key: "".concat(keyParts, "-").concat(index)
66
- }, '⏎')
67
- );
89
+ return (0, _react.jsx)(_primitives.Box, {
90
+ as: "span",
91
+ "data-editor-help-dialog-enter-keymap": "true",
92
+ xcss: codeSm,
93
+ key: "".concat(keyParts, "-").concat(index)
94
+ }, '⏎');
68
95
  }
69
96
  return (
70
97
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
71
- (0, _react.jsx)("span", {
72
- css: _styles.codeSm,
98
+ (0, _react.jsx)(_primitives.Box, {
99
+ as: "span",
100
+ xcss: codeSm,
73
101
  key: "".concat(keyParts, "-").concat(index)
74
102
  }, part.toUpperCase())
75
103
  );
@@ -9,7 +9,35 @@ import { browser } from '@atlaskit/editor-common/browser';
9
9
  import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, focusToContextMenuTrigger, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
10
10
  import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
11
11
  import { fg } from '@atlaskit/platform-feature-flags';
12
- import { codeLg, codeMd, codeSm, shortcutsArray } from './styles';
12
+ import { Box, xcss } from '@atlaskit/primitives';
13
+ import { shortcutsArray } from './styles';
14
+ const codeSm = xcss({
15
+ backgroundColor: 'color.background.neutral',
16
+ borderRadius: 'border.radius',
17
+ width: "var(--ds-space-300, 24px)",
18
+ display: 'inline-block',
19
+ height: "var(--ds-space-300, 24px)",
20
+ lineHeight: "var(--ds-space-300, 24px)",
21
+ textAlign: 'center'
22
+ });
23
+ const codeMd = xcss({
24
+ backgroundColor: 'color.background.neutral',
25
+ borderRadius: 'border.radius',
26
+ display: 'inline-block',
27
+ height: "var(--ds-space-300, 24px)",
28
+ lineHeight: "var(--ds-space-300, 24px)",
29
+ width: '50px',
30
+ textAlign: 'center'
31
+ });
32
+ const codeLg = xcss({
33
+ borderRadius: 'border.radius',
34
+ display: 'inline-block',
35
+ height: "var(--ds-space-300, 24px)",
36
+ lineHeight: "var(--ds-space-300, 24px)",
37
+ textAlign: 'center',
38
+ paddingInline: 'space.150',
39
+ backgroundColor: 'color.background.neutral'
40
+ });
13
41
  const navigationKeymaps = ({
14
42
  formatMessage
15
43
  }) => [{
@@ -27,15 +55,17 @@ export const formatting = ({
27
55
  name: formatMessage(toolbarMessages.bold),
28
56
  type: 'strong',
29
57
  keymap: () => toggleBold,
30
- autoFormatting: () => jsx("span", null, jsx("span", {
31
- css: codeLg
58
+ autoFormatting: () => jsx("span", null, jsx(Box, {
59
+ as: "span",
60
+ xcss: codeLg
32
61
  }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"))
33
62
  }, {
34
63
  name: formatMessage(toolbarMessages.italic),
35
64
  type: 'em',
36
65
  keymap: () => toggleItalic,
37
- autoFormatting: () => jsx("span", null, jsx("span", {
38
- css: codeLg
66
+ autoFormatting: () => jsx("span", null, jsx(Box, {
67
+ as: "span",
68
+ xcss: codeLg
39
69
  }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"))
40
70
  }, {
41
71
  name: formatMessage(toolbarMessages.underline),
@@ -45,8 +75,9 @@ export const formatting = ({
45
75
  name: formatMessage(toolbarMessages.strike),
46
76
  type: 'strike',
47
77
  keymap: () => toggleStrikethrough,
48
- autoFormatting: () => jsx("span", null, jsx("span", {
49
- css: codeLg
78
+ autoFormatting: () => jsx("span", null, jsx(Box, {
79
+ as: "span",
80
+ xcss: codeLg
50
81
  }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"))
51
82
  }, {
52
83
  name: formatMessage(toolbarMessages.subscript),
@@ -60,55 +91,67 @@ export const formatting = ({
60
91
  name: formatMessage(blockTypeMessages.heading1),
61
92
  type: 'heading',
62
93
  keymap: () => toggleHeading1,
63
- autoFormatting: () => jsx("span", null, jsx("span", {
64
- css: codeSm
65
- }, "#"), " ", jsx("span", {
66
- css: codeLg
94
+ autoFormatting: () => jsx("span", null, jsx(Box, {
95
+ as: "span",
96
+ xcss: codeSm
97
+ }, "#"), ' ', jsx(Box, {
98
+ as: "span",
99
+ xcss: codeLg
67
100
  }, "Space"))
68
101
  }, {
69
102
  name: formatMessage(blockTypeMessages.heading2),
70
103
  type: 'heading',
71
104
  keymap: () => toggleHeading2,
72
- autoFormatting: () => jsx("span", null, jsx("span", {
73
- css: codeLg
74
- }, "##"), " ", jsx("span", {
75
- css: codeLg
105
+ autoFormatting: () => jsx("span", null, jsx(Box, {
106
+ as: "span",
107
+ xcss: codeLg
108
+ }, "##"), ' ', jsx(Box, {
109
+ as: "span",
110
+ xcss: codeLg
76
111
  }, "Space"))
77
112
  }, {
78
113
  name: formatMessage(blockTypeMessages.heading3),
79
114
  type: 'heading',
80
115
  keymap: () => toggleHeading3,
81
- autoFormatting: () => jsx("span", null, jsx("span", {
82
- css: codeLg
83
- }, "###"), " ", jsx("span", {
84
- css: codeLg
116
+ autoFormatting: () => jsx("span", null, jsx(Box, {
117
+ as: "span",
118
+ xcss: codeLg
119
+ }, "###"), ' ', jsx(Box, {
120
+ as: "span",
121
+ xcss: codeLg
85
122
  }, "Space"))
86
123
  }, {
87
124
  name: formatMessage(blockTypeMessages.heading4),
88
125
  type: 'heading',
89
126
  keymap: () => toggleHeading4,
90
- autoFormatting: () => jsx("span", null, jsx("span", {
91
- css: codeLg
92
- }, "####"), " ", jsx("span", {
93
- css: codeLg
127
+ autoFormatting: () => jsx("span", null, jsx(Box, {
128
+ as: "span",
129
+ xcss: codeLg
130
+ }, "####"), ' ', jsx(Box, {
131
+ as: "span",
132
+ xcss: codeLg
94
133
  }, "Space"))
95
134
  }, {
96
135
  name: formatMessage(blockTypeMessages.heading5),
97
136
  type: 'heading',
98
137
  keymap: () => toggleHeading5,
99
- autoFormatting: () => jsx("span", null, jsx("span", {
100
- css: codeLg
101
- }, "#####"), " ", jsx("span", {
102
- css: codeLg
138
+ autoFormatting: () => jsx("span", null, jsx(Box, {
139
+ as: "span",
140
+ xcss: codeLg
141
+ }, "#####"), ' ', jsx(Box, {
142
+ as: "span",
143
+ xcss: codeLg
103
144
  }, "Space"))
104
145
  }, {
105
146
  name: formatMessage(blockTypeMessages.heading6),
106
147
  type: 'heading',
107
148
  keymap: () => toggleHeading6,
108
- autoFormatting: () => jsx("span", null, jsx("span", {
109
- css: codeLg
110
- }, "######"), " ", jsx("span", {
111
- css: codeLg
149
+ autoFormatting: () => jsx("span", null, jsx(Box, {
150
+ as: "span",
151
+ xcss: codeLg
152
+ }, "######"), ' ', jsx(Box, {
153
+ as: "span",
154
+ xcss: codeLg
112
155
  }, "Space"))
113
156
  }, {
114
157
  name: formatMessage(blockTypeMessages.normal),
@@ -118,83 +161,99 @@ export const formatting = ({
118
161
  name: formatMessage(listMessages.orderedList),
119
162
  type: 'orderedList',
120
163
  keymap: () => toggleOrderedList,
121
- autoFormatting: () => jsx("span", null, jsx("span", {
122
- css: codeSm
123
- }, "1."), " ", jsx("span", {
124
- css: codeLg
164
+ autoFormatting: () => jsx("span", null, jsx(Box, {
165
+ as: "span",
166
+ xcss: codeSm
167
+ }, "1."), ' ', jsx(Box, {
168
+ as: "span",
169
+ xcss: codeLg
125
170
  }, "Space"))
126
171
  }, {
127
172
  name: formatMessage(listMessages.unorderedList),
128
173
  type: 'bulletList',
129
174
  keymap: () => toggleBulletList,
130
- autoFormatting: () => jsx("span", null, jsx("span", {
131
- css: codeSm
132
- }, "*"), " ", jsx("span", {
133
- css: codeLg
175
+ autoFormatting: () => jsx("span", null, jsx(Box, {
176
+ as: "span",
177
+ xcss: codeSm
178
+ }, "*"), ' ', jsx(Box, {
179
+ as: "span",
180
+ xcss: codeLg
134
181
  }, "Space"))
135
182
  }, {
136
183
  name: formatMessage(blockTypeMessages.blockquote),
137
184
  type: 'blockquote',
138
185
  keymap: () => toggleBlockQuote,
139
- autoFormatting: () => jsx("span", null, jsx("span", {
140
- css: codeLg
141
- }, '>'), " ", jsx("span", {
142
- css: codeLg
186
+ autoFormatting: () => jsx("span", null, jsx(Box, {
187
+ as: "span",
188
+ xcss: codeLg
189
+ }, '>'), ' ', jsx(Box, {
190
+ as: "span",
191
+ xcss: codeLg
143
192
  }, "Space"))
144
193
  }, {
145
194
  name: formatMessage(blockTypeMessages.codeblock),
146
195
  type: 'codeBlock',
147
- autoFormatting: () => jsx("span", null, jsx("span", {
148
- css: codeLg
196
+ autoFormatting: () => jsx("span", null, jsx(Box, {
197
+ as: "span",
198
+ xcss: codeLg
149
199
  }, "```"))
150
200
  }, {
151
201
  name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
152
202
  type: 'rule',
153
203
  keymap: () => insertRule,
154
- autoFormatting: () => jsx("span", null, jsx("span", {
155
- css: codeLg
204
+ autoFormatting: () => jsx("span", null, jsx(Box, {
205
+ as: "span",
206
+ xcss: codeLg
156
207
  }, "---"))
157
208
  }, {
158
209
  name: formatMessage(toolbarInsertBlockMessages.link),
159
210
  type: 'link',
160
211
  keymap: () => addLink,
161
- autoFormatting: () => jsx("span", null, jsx("span", {
162
- css: codeLg
212
+ autoFormatting: () => jsx("span", null, jsx(Box, {
213
+ as: "span",
214
+ xcss: codeLg
163
215
  }, "[", jsx(FormattedMessage, toolbarInsertBlockMessages.link), "](http://a.com)"))
164
216
  }, {
165
217
  name: formatMessage(toolbarMessages.code),
166
218
  type: 'code',
167
219
  keymap: () => toggleCode,
168
- autoFormatting: () => jsx("span", null, jsx("span", {
169
- css: codeLg
220
+ autoFormatting: () => jsx("span", null, jsx(Box, {
221
+ as: "span",
222
+ xcss: codeLg
170
223
  }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"))
171
224
  }, {
172
225
  name: formatMessage(toolbarInsertBlockMessages.action),
173
226
  type: 'taskItem',
174
- autoFormatting: () => jsx("span", null, jsx("span", {
175
- css: codeSm
176
- }, "[]"), " ", jsx("span", {
177
- css: codeLg
227
+ autoFormatting: () => jsx("span", null, jsx(Box, {
228
+ as: "span",
229
+ xcss: codeSm
230
+ }, "[]"), ' ', jsx(Box, {
231
+ as: "span",
232
+ xcss: codeLg
178
233
  }, "Space"))
179
234
  }, {
180
235
  name: formatMessage(toolbarInsertBlockMessages.decision),
181
236
  type: 'decisionItem',
182
- autoFormatting: () => jsx("span", null, jsx("span", {
183
- css: codeSm
184
- }, "<>"), " ", jsx("span", {
185
- css: codeLg
237
+ autoFormatting: () => jsx("span", null, jsx(Box, {
238
+ as: "span",
239
+ xcss: codeSm
240
+ }, "<>"), ' ', jsx(Box, {
241
+ as: "span",
242
+ xcss: codeLg
186
243
  }, "Space"))
187
244
  }, {
188
245
  name: formatMessage(toolbarInsertBlockMessages.emoji),
189
246
  type: 'emoji',
190
- autoFormatting: () => jsx("span", null, jsx("span", {
191
- css: codeLg
247
+ autoFormatting: () => jsx("span", null, jsx(Box, {
248
+ as: "span",
249
+ xcss: codeLg
192
250
  }, ":"))
193
251
  }, {
194
252
  name: formatMessage(toolbarInsertBlockMessages.mention),
195
253
  type: 'mention',
196
- autoFormatting: () => jsx("span", null, jsx("span", {
197
- css: codeLg
254
+ autoFormatting: () => jsx("span", null, jsx(Box, {
255
+ as: "span",
256
+ xcss: codeLg
198
257
  }, "@"))
199
258
  }, {
200
259
  name: formatMessage(alignmentMessages.alignLeft),
@@ -242,22 +301,30 @@ const otherFormatting = ({
242
301
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
243
302
  jsx("span", {
244
303
  css: shortcutsArray
245
- }, jsx("span", null, jsx("span", {
246
- css: browser.mac ? codeSm : codeMd
247
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
248
- css: codeMd
249
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
250
- css: codeMd
251
- }, "Shift"), ' + ', jsx("span", {
252
- css: codeSm
253
- }, "\u2190")), jsx("span", null, jsx("span", {
254
- css: browser.mac ? codeSm : codeMd
255
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
256
- css: codeMd
257
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
258
- css: codeMd
259
- }, "Shift"), ' + ', jsx("span", {
260
- css: codeSm
304
+ }, jsx("span", null, jsx(Box, {
305
+ as: "span",
306
+ xcss: browser.mac ? codeSm : codeMd
307
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
308
+ as: "span",
309
+ xcss: codeMd
310
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
311
+ as: "span",
312
+ xcss: codeMd
313
+ }, "Shift"), ' + ', jsx(Box, {
314
+ as: "span",
315
+ xcss: codeSm
316
+ }, "\u2190")), jsx("span", null, jsx(Box, {
317
+ as: "span",
318
+ xcss: browser.mac ? codeSm : codeMd
319
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
320
+ as: "span",
321
+ xcss: codeMd
322
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
323
+ as: "span",
324
+ xcss: codeMd
325
+ }, "Shift"), ' + ', jsx(Box, {
326
+ as: "span",
327
+ xcss: codeSm
261
328
  }, "\u2192")))
262
329
  }, {
263
330
  name: formatMessage(messages.selectTableColumn),
@@ -266,22 +333,30 @@ const otherFormatting = ({
266
333
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
267
334
  jsx("span", {
268
335
  css: shortcutsArray
269
- }, jsx("span", null, jsx("span", {
270
- css: browser.mac ? codeSm : codeMd
271
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
272
- css: codeMd
273
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
274
- css: codeMd
275
- }, "Shift"), ' + ', jsx("span", {
276
- css: codeSm
277
- }, "\u2191")), jsx("span", null, jsx("span", {
278
- css: browser.mac ? codeSm : codeMd
279
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
280
- css: codeMd
281
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
282
- css: codeMd
283
- }, "Shift"), ' + ', jsx("span", {
284
- css: codeSm
336
+ }, jsx("span", null, jsx(Box, {
337
+ as: "span",
338
+ xcss: browser.mac ? codeSm : codeMd
339
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
340
+ as: "span",
341
+ xcss: codeMd
342
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
343
+ as: "span",
344
+ xcss: codeMd
345
+ }, "Shift"), ' + ', jsx(Box, {
346
+ as: "span",
347
+ xcss: codeSm
348
+ }, "\u2191")), jsx("span", null, jsx(Box, {
349
+ as: "span",
350
+ xcss: browser.mac ? codeSm : codeMd
351
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
352
+ as: "span",
353
+ xcss: codeMd
354
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
355
+ as: "span",
356
+ xcss: codeMd
357
+ }, "Shift"), ' + ', jsx(Box, {
358
+ as: "span",
359
+ xcss: codeSm
285
360
  }, "\u2193")))
286
361
  }, ...[{
287
362
  name: formatMessage(messages.InsertTableColumn),
@@ -290,18 +365,24 @@ const otherFormatting = ({
290
365
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
291
366
  jsx("span", {
292
367
  css: shortcutsArray
293
- }, jsx("span", null, jsx("span", {
294
- css: browser.mac ? codeSm : codeMd
295
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
296
- css: codeMd
297
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
298
- css: codeSm
299
- }, "=")), jsx("span", null, jsx("span", {
300
- css: browser.mac ? codeSm : codeMd
301
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
302
- css: codeMd
303
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
304
- css: codeSm
368
+ }, jsx("span", null, jsx(Box, {
369
+ as: "span",
370
+ xcss: browser.mac ? codeSm : codeMd
371
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
372
+ as: "span",
373
+ xcss: codeMd
374
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
375
+ as: "span",
376
+ xcss: codeSm
377
+ }, "=")), jsx("span", null, jsx(Box, {
378
+ as: "span",
379
+ xcss: browser.mac ? codeSm : codeMd
380
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
381
+ as: "span",
382
+ xcss: codeMd
383
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
384
+ as: "span",
385
+ xcss: codeSm
305
386
  }, "-")))
306
387
  }, {
307
388
  name: formatMessage(messages.InsertTableRow),
@@ -310,18 +391,24 @@ const otherFormatting = ({
310
391
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
311
392
  jsx("span", {
312
393
  css: shortcutsArray
313
- }, jsx("span", null, jsx("span", {
314
- css: browser.mac ? codeSm : codeMd
315
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
316
- css: codeMd
317
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
318
- css: codeSm
319
- }, "]")), jsx("span", null, jsx("span", {
320
- css: browser.mac ? codeSm : codeMd
321
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
322
- css: codeMd
323
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
324
- css: codeSm
394
+ }, jsx("span", null, jsx(Box, {
395
+ as: "span",
396
+ xcss: browser.mac ? codeSm : codeMd
397
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
398
+ as: "span",
399
+ xcss: codeMd
400
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
401
+ as: "span",
402
+ xcss: codeSm
403
+ }, "]")), jsx("span", null, jsx(Box, {
404
+ as: "span",
405
+ xcss: browser.mac ? codeSm : codeMd
406
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
407
+ as: "span",
408
+ xcss: codeMd
409
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
410
+ as: "span",
411
+ xcss: codeSm
325
412
  }, "[")))
326
413
  }], ...[{
327
414
  name: formatMessage(messages.selectColumnResize),
@@ -330,14 +417,18 @@ const otherFormatting = ({
330
417
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
331
418
  jsx("span", {
332
419
  css: shortcutsArray
333
- }, jsx("span", null, jsx("span", {
334
- css: browser.mac ? codeSm : codeMd
335
- }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
336
- css: codeMd
337
- }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
338
- css: codeMd
339
- }, "Shift"), ' + ', jsx("span", {
340
- css: codeSm
420
+ }, jsx("span", null, jsx(Box, {
421
+ as: "span",
422
+ xcss: browser.mac ? codeSm : codeMd
423
+ }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
424
+ as: "span",
425
+ xcss: codeMd
426
+ }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
427
+ as: "span",
428
+ xcss: codeMd
429
+ }, "Shift"), ' + ', jsx(Box, {
430
+ as: "span",
431
+ xcss: codeSm
341
432
  }, "C")))
342
433
  }], {
343
434
  name: formatMessage(messages.highlightColor),
@@ -372,8 +463,9 @@ const openCellOptionsFormattingtoFormat = ({
372
463
  const imageAutoFormat = {
373
464
  name: 'Image',
374
465
  type: 'image',
375
- autoFormatting: () => jsx("span", null, jsx("span", {
376
- css: codeLg
466
+ autoFormatting: () => jsx("span", null, jsx(Box, {
467
+ as: "span",
468
+ xcss: codeLg
377
469
  }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"))
378
470
  };
379
471
  const quickInsertAutoFormat = ({
@@ -381,8 +473,9 @@ const quickInsertAutoFormat = ({
381
473
  }) => ({
382
474
  name: formatMessage(messages.quickInsert),
383
475
  type: 'quickInsert',
384
- autoFormatting: () => jsx("span", null, jsx("span", {
385
- css: codeLg
476
+ autoFormatting: () => jsx("span", null, jsx(Box, {
477
+ as: "span",
478
+ xcss: codeLg
386
479
  }, "/"))
387
480
  });
388
481
  export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {