@atlaskit/editor-plugin-help-dialog 1.8.10 → 1.8.12

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 +14 -0
  2. package/dist/cjs/ui/formatting.js +223 -130
  3. package/dist/cjs/ui/styles.js +1 -37
  4. package/dist/cjs/ui/utils.js +50 -22
  5. package/dist/es2019/ui/formatting.js +224 -131
  6. package/dist/es2019/ui/styles.js +0 -36
  7. package/dist/es2019/ui/utils.js +51 -23
  8. package/dist/esm/ui/formatting.js +224 -131
  9. package/dist/esm/ui/styles.js +0 -36
  10. package/dist/esm/ui/utils.js +51 -23
  11. package/dist/types/ui/styles.d.ts +0 -3
  12. package/dist/types-ts4.5/ui/styles.d.ts +0 -3
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-help-dialog
2
2
 
3
+ ## 1.8.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [#150384](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150384)
8
+ [`6d48c5b6ce65e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6d48c5b6ce65e) -
9
+ [ED-25083] Typograpghy migration
10
+
11
+ ## 1.8.11
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 1.8.10
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/ui/formatting.js CHANGED
@@ -12,6 +12,7 @@ var _browser = require("@atlaskit/editor-common/browser");
12
12
  var _keymaps = require("@atlaskit/editor-common/keymaps");
13
13
  var _messages = require("@atlaskit/editor-common/messages");
14
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
+ var _primitives = require("@atlaskit/primitives");
15
16
  var _styles = require("./styles");
16
17
  /**
17
18
  * @jsxRuntime classic
@@ -19,6 +20,33 @@ var _styles = require("./styles");
19
20
  */
20
21
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
22
 
23
+ var codeSm = (0, _primitives.xcss)({
24
+ backgroundColor: 'color.background.neutral',
25
+ borderRadius: 'border.radius',
26
+ width: "var(--ds-space-300, 24px)",
27
+ display: 'inline-block',
28
+ height: "var(--ds-space-300, 24px)",
29
+ lineHeight: "var(--ds-space-300, 24px)",
30
+ textAlign: 'center'
31
+ });
32
+ var codeMd = (0, _primitives.xcss)({
33
+ backgroundColor: 'color.background.neutral',
34
+ borderRadius: 'border.radius',
35
+ display: 'inline-block',
36
+ height: "var(--ds-space-300, 24px)",
37
+ lineHeight: "var(--ds-space-300, 24px)",
38
+ width: '50px',
39
+ textAlign: 'center'
40
+ });
41
+ var codeLg = (0, _primitives.xcss)({
42
+ borderRadius: 'border.radius',
43
+ display: 'inline-block',
44
+ height: "var(--ds-space-300, 24px)",
45
+ lineHeight: "var(--ds-space-300, 24px)",
46
+ textAlign: 'center',
47
+ paddingInline: 'space.150',
48
+ backgroundColor: 'color.background.neutral'
49
+ });
22
50
  var navigationKeymaps = function navigationKeymaps(_ref) {
23
51
  var formatMessage = _ref.formatMessage;
24
52
  return [{
@@ -44,8 +72,9 @@ var formatting = exports.formatting = function formatting(_ref2) {
44
72
  return _keymaps.toggleBold;
45
73
  },
46
74
  autoFormatting: function autoFormatting() {
47
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
48
- css: _styles.codeLg
75
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
76
+ as: "span",
77
+ xcss: codeLg
49
78
  }, "**", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.bold), "**"));
50
79
  }
51
80
  }, {
@@ -55,8 +84,9 @@ var formatting = exports.formatting = function formatting(_ref2) {
55
84
  return _keymaps.toggleItalic;
56
85
  },
57
86
  autoFormatting: function autoFormatting() {
58
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
59
- css: _styles.codeLg
87
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
88
+ as: "span",
89
+ xcss: codeLg
60
90
  }, "*", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.italic), "*"));
61
91
  }
62
92
  }, {
@@ -72,8 +102,9 @@ var formatting = exports.formatting = function formatting(_ref2) {
72
102
  return _keymaps.toggleStrikethrough;
73
103
  },
74
104
  autoFormatting: function autoFormatting() {
75
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
76
- css: _styles.codeLg
105
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
106
+ as: "span",
107
+ xcss: codeLg
77
108
  }, "~~", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.strike), "~~"));
78
109
  }
79
110
  }, {
@@ -95,10 +126,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
95
126
  return _keymaps.toggleHeading1;
96
127
  },
97
128
  autoFormatting: function autoFormatting() {
98
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
99
- css: _styles.codeSm
100
- }, "#"), " ", (0, _react.jsx)("span", {
101
- css: _styles.codeLg
129
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
130
+ as: "span",
131
+ xcss: codeSm
132
+ }, "#"), ' ', (0, _react.jsx)(_primitives.Box, {
133
+ as: "span",
134
+ xcss: codeLg
102
135
  }, "Space"));
103
136
  }
104
137
  }, {
@@ -108,10 +141,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
108
141
  return _keymaps.toggleHeading2;
109
142
  },
110
143
  autoFormatting: function autoFormatting() {
111
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
112
- css: _styles.codeLg
113
- }, "##"), " ", (0, _react.jsx)("span", {
114
- css: _styles.codeLg
144
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
145
+ as: "span",
146
+ xcss: codeLg
147
+ }, "##"), ' ', (0, _react.jsx)(_primitives.Box, {
148
+ as: "span",
149
+ xcss: codeLg
115
150
  }, "Space"));
116
151
  }
117
152
  }, {
@@ -121,10 +156,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
121
156
  return _keymaps.toggleHeading3;
122
157
  },
123
158
  autoFormatting: function autoFormatting() {
124
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
125
- css: _styles.codeLg
126
- }, "###"), " ", (0, _react.jsx)("span", {
127
- css: _styles.codeLg
159
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
160
+ as: "span",
161
+ xcss: codeLg
162
+ }, "###"), ' ', (0, _react.jsx)(_primitives.Box, {
163
+ as: "span",
164
+ xcss: codeLg
128
165
  }, "Space"));
129
166
  }
130
167
  }, {
@@ -134,10 +171,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
134
171
  return _keymaps.toggleHeading4;
135
172
  },
136
173
  autoFormatting: function autoFormatting() {
137
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
138
- css: _styles.codeLg
139
- }, "####"), " ", (0, _react.jsx)("span", {
140
- css: _styles.codeLg
174
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
175
+ as: "span",
176
+ xcss: codeLg
177
+ }, "####"), ' ', (0, _react.jsx)(_primitives.Box, {
178
+ as: "span",
179
+ xcss: codeLg
141
180
  }, "Space"));
142
181
  }
143
182
  }, {
@@ -147,10 +186,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
147
186
  return _keymaps.toggleHeading5;
148
187
  },
149
188
  autoFormatting: function autoFormatting() {
150
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
151
- css: _styles.codeLg
152
- }, "#####"), " ", (0, _react.jsx)("span", {
153
- css: _styles.codeLg
189
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
190
+ as: "span",
191
+ xcss: codeLg
192
+ }, "#####"), ' ', (0, _react.jsx)(_primitives.Box, {
193
+ as: "span",
194
+ xcss: codeLg
154
195
  }, "Space"));
155
196
  }
156
197
  }, {
@@ -160,10 +201,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
160
201
  return _keymaps.toggleHeading6;
161
202
  },
162
203
  autoFormatting: function autoFormatting() {
163
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
164
- css: _styles.codeLg
165
- }, "######"), " ", (0, _react.jsx)("span", {
166
- css: _styles.codeLg
204
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
205
+ as: "span",
206
+ xcss: codeLg
207
+ }, "######"), ' ', (0, _react.jsx)(_primitives.Box, {
208
+ as: "span",
209
+ xcss: codeLg
167
210
  }, "Space"));
168
211
  }
169
212
  }, {
@@ -179,10 +222,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
179
222
  return _keymaps.toggleOrderedList;
180
223
  },
181
224
  autoFormatting: function autoFormatting() {
182
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
183
- css: _styles.codeSm
184
- }, "1."), " ", (0, _react.jsx)("span", {
185
- css: _styles.codeLg
225
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
226
+ as: "span",
227
+ xcss: codeSm
228
+ }, "1."), ' ', (0, _react.jsx)(_primitives.Box, {
229
+ as: "span",
230
+ xcss: codeLg
186
231
  }, "Space"));
187
232
  }
188
233
  }, {
@@ -192,10 +237,12 @@ var formatting = exports.formatting = function formatting(_ref2) {
192
237
  return _keymaps.toggleBulletList;
193
238
  },
194
239
  autoFormatting: function autoFormatting() {
195
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
196
- css: _styles.codeSm
197
- }, "*"), " ", (0, _react.jsx)("span", {
198
- css: _styles.codeLg
240
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
241
+ as: "span",
242
+ xcss: codeSm
243
+ }, "*"), ' ', (0, _react.jsx)(_primitives.Box, {
244
+ as: "span",
245
+ xcss: codeLg
199
246
  }, "Space"));
200
247
  }
201
248
  }, {
@@ -205,18 +252,21 @@ var formatting = exports.formatting = function formatting(_ref2) {
205
252
  return _keymaps.toggleBlockQuote;
206
253
  },
207
254
  autoFormatting: function autoFormatting() {
208
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
209
- css: _styles.codeLg
210
- }, '>'), " ", (0, _react.jsx)("span", {
211
- css: _styles.codeLg
255
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
256
+ as: "span",
257
+ xcss: codeLg
258
+ }, '>'), ' ', (0, _react.jsx)(_primitives.Box, {
259
+ as: "span",
260
+ xcss: codeLg
212
261
  }, "Space"));
213
262
  }
214
263
  }, {
215
264
  name: formatMessage(_messages.blockTypeMessages.codeblock),
216
265
  type: 'codeBlock',
217
266
  autoFormatting: function autoFormatting() {
218
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
219
- css: _styles.codeLg
267
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
268
+ as: "span",
269
+ xcss: codeLg
220
270
  }, "```"));
221
271
  }
222
272
  }, {
@@ -226,8 +276,9 @@ var formatting = exports.formatting = function formatting(_ref2) {
226
276
  return _keymaps.insertRule;
227
277
  },
228
278
  autoFormatting: function autoFormatting() {
229
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
230
- css: _styles.codeLg
279
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
280
+ as: "span",
281
+ xcss: codeLg
231
282
  }, "---"));
232
283
  }
233
284
  }, {
@@ -237,8 +288,9 @@ var formatting = exports.formatting = function formatting(_ref2) {
237
288
  return _keymaps.addLink;
238
289
  },
239
290
  autoFormatting: function autoFormatting() {
240
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
241
- css: _styles.codeLg
291
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
292
+ as: "span",
293
+ xcss: codeLg
242
294
  }, "[", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarInsertBlockMessages.link), "](http://a.com)"));
243
295
  }
244
296
  }, {
@@ -248,44 +300,51 @@ var formatting = exports.formatting = function formatting(_ref2) {
248
300
  return _keymaps.toggleCode;
249
301
  },
250
302
  autoFormatting: function autoFormatting() {
251
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
252
- css: _styles.codeLg
303
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
304
+ as: "span",
305
+ xcss: codeLg
253
306
  }, "`", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.toolbarMessages.code), "`"));
254
307
  }
255
308
  }, {
256
309
  name: formatMessage(_messages.toolbarInsertBlockMessages.action),
257
310
  type: 'taskItem',
258
311
  autoFormatting: function autoFormatting() {
259
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
260
- css: _styles.codeSm
261
- }, "[]"), " ", (0, _react.jsx)("span", {
262
- css: _styles.codeLg
312
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
313
+ as: "span",
314
+ xcss: codeSm
315
+ }, "[]"), ' ', (0, _react.jsx)(_primitives.Box, {
316
+ as: "span",
317
+ xcss: codeLg
263
318
  }, "Space"));
264
319
  }
265
320
  }, {
266
321
  name: formatMessage(_messages.toolbarInsertBlockMessages.decision),
267
322
  type: 'decisionItem',
268
323
  autoFormatting: function autoFormatting() {
269
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
270
- css: _styles.codeSm
271
- }, "<>"), " ", (0, _react.jsx)("span", {
272
- css: _styles.codeLg
324
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
325
+ as: "span",
326
+ xcss: codeSm
327
+ }, "<>"), ' ', (0, _react.jsx)(_primitives.Box, {
328
+ as: "span",
329
+ xcss: codeLg
273
330
  }, "Space"));
274
331
  }
275
332
  }, {
276
333
  name: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
277
334
  type: 'emoji',
278
335
  autoFormatting: function autoFormatting() {
279
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
280
- css: _styles.codeLg
336
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
337
+ as: "span",
338
+ xcss: codeLg
281
339
  }, ":"));
282
340
  }
283
341
  }, {
284
342
  name: formatMessage(_messages.toolbarInsertBlockMessages.mention),
285
343
  type: 'mention',
286
344
  autoFormatting: function autoFormatting() {
287
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
288
- css: _styles.codeLg
345
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
346
+ as: "span",
347
+ xcss: codeLg
289
348
  }, "@"));
290
349
  }
291
350
  }, {
@@ -354,22 +413,30 @@ var otherFormatting = function otherFormatting(_ref3) {
354
413
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
355
414
  (0, _react.jsx)("span", {
356
415
  css: _styles.shortcutsArray
357
- }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
358
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
359
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
360
- css: _styles.codeMd
361
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
362
- css: _styles.codeMd
363
- }, "Shift"), ' + ', (0, _react.jsx)("span", {
364
- css: _styles.codeSm
365
- }, "\u2190")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
366
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
367
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
368
- css: _styles.codeMd
369
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
370
- css: _styles.codeMd
371
- }, "Shift"), ' + ', (0, _react.jsx)("span", {
372
- css: _styles.codeSm
416
+ }, (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
417
+ as: "span",
418
+ xcss: _browser.browser.mac ? codeSm : codeMd
419
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
420
+ as: "span",
421
+ xcss: codeMd
422
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
423
+ as: "span",
424
+ xcss: codeMd
425
+ }, "Shift"), ' + ', (0, _react.jsx)(_primitives.Box, {
426
+ as: "span",
427
+ xcss: codeSm
428
+ }, "\u2190")), (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
429
+ as: "span",
430
+ xcss: _browser.browser.mac ? codeSm : codeMd
431
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
432
+ as: "span",
433
+ xcss: codeMd
434
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
435
+ as: "span",
436
+ xcss: codeMd
437
+ }, "Shift"), ' + ', (0, _react.jsx)(_primitives.Box, {
438
+ as: "span",
439
+ xcss: codeSm
373
440
  }, "\u2192")))
374
441
  );
375
442
  }
@@ -381,22 +448,30 @@ var otherFormatting = function otherFormatting(_ref3) {
381
448
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
382
449
  (0, _react.jsx)("span", {
383
450
  css: _styles.shortcutsArray
384
- }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
385
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
386
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
387
- css: _styles.codeMd
388
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
389
- css: _styles.codeMd
390
- }, "Shift"), ' + ', (0, _react.jsx)("span", {
391
- css: _styles.codeSm
392
- }, "\u2191")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
393
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
394
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
395
- css: _styles.codeMd
396
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
397
- css: _styles.codeMd
398
- }, "Shift"), ' + ', (0, _react.jsx)("span", {
399
- css: _styles.codeSm
451
+ }, (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
452
+ as: "span",
453
+ xcss: _browser.browser.mac ? codeSm : codeMd
454
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
455
+ as: "span",
456
+ xcss: codeMd
457
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
458
+ as: "span",
459
+ xcss: codeMd
460
+ }, "Shift"), ' + ', (0, _react.jsx)(_primitives.Box, {
461
+ as: "span",
462
+ xcss: codeSm
463
+ }, "\u2191")), (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
464
+ as: "span",
465
+ xcss: _browser.browser.mac ? codeSm : codeMd
466
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
467
+ as: "span",
468
+ xcss: codeMd
469
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
470
+ as: "span",
471
+ xcss: codeMd
472
+ }, "Shift"), ' + ', (0, _react.jsx)(_primitives.Box, {
473
+ as: "span",
474
+ xcss: codeSm
400
475
  }, "\u2193")))
401
476
  );
402
477
  }
@@ -408,18 +483,24 @@ var otherFormatting = function otherFormatting(_ref3) {
408
483
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
409
484
  (0, _react.jsx)("span", {
410
485
  css: _styles.shortcutsArray
411
- }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
412
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
413
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
414
- css: _styles.codeMd
415
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
416
- css: _styles.codeSm
417
- }, "=")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
418
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
419
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
420
- css: _styles.codeMd
421
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
422
- css: _styles.codeSm
486
+ }, (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
487
+ as: "span",
488
+ xcss: _browser.browser.mac ? codeSm : codeMd
489
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
490
+ as: "span",
491
+ xcss: codeMd
492
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
493
+ as: "span",
494
+ xcss: codeSm
495
+ }, "=")), (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
496
+ as: "span",
497
+ xcss: _browser.browser.mac ? codeSm : codeMd
498
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
499
+ as: "span",
500
+ xcss: codeMd
501
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
502
+ as: "span",
503
+ xcss: codeSm
423
504
  }, "-")))
424
505
  );
425
506
  }
@@ -431,18 +512,24 @@ var otherFormatting = function otherFormatting(_ref3) {
431
512
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
432
513
  (0, _react.jsx)("span", {
433
514
  css: _styles.shortcutsArray
434
- }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
435
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
436
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
437
- css: _styles.codeMd
438
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
439
- css: _styles.codeSm
440
- }, "]")), (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
441
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
442
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
443
- css: _styles.codeMd
444
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
445
- css: _styles.codeSm
515
+ }, (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
516
+ as: "span",
517
+ xcss: _browser.browser.mac ? codeSm : codeMd
518
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
519
+ as: "span",
520
+ xcss: codeMd
521
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
522
+ as: "span",
523
+ xcss: codeSm
524
+ }, "]")), (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
525
+ as: "span",
526
+ xcss: _browser.browser.mac ? codeSm : codeMd
527
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
528
+ as: "span",
529
+ xcss: codeMd
530
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
531
+ as: "span",
532
+ xcss: codeSm
446
533
  }, "[")))
447
534
  );
448
535
  }
@@ -454,14 +541,18 @@ var otherFormatting = function otherFormatting(_ref3) {
454
541
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
455
542
  (0, _react.jsx)("span", {
456
543
  css: _styles.shortcutsArray
457
- }, (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
458
- css: _browser.browser.mac ? _styles.codeSm : _styles.codeMd
459
- }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)("span", {
460
- css: _styles.codeMd
461
- }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)("span", {
462
- css: _styles.codeMd
463
- }, "Shift"), ' + ', (0, _react.jsx)("span", {
464
- css: _styles.codeSm
544
+ }, (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
545
+ as: "span",
546
+ xcss: _browser.browser.mac ? codeSm : codeMd
547
+ }, _browser.browser.mac ? '⌘' : 'Ctrl'), ' + ', (0, _react.jsx)(_primitives.Box, {
548
+ as: "span",
549
+ xcss: codeMd
550
+ }, _browser.browser.mac ? 'Opt' : 'Alt'), ' + ', (0, _react.jsx)(_primitives.Box, {
551
+ as: "span",
552
+ xcss: codeMd
553
+ }, "Shift"), ' + ', (0, _react.jsx)(_primitives.Box, {
554
+ as: "span",
555
+ xcss: codeSm
465
556
  }, "C")))
466
557
  );
467
558
  }
@@ -513,8 +604,9 @@ var imageAutoFormat = {
513
604
  name: 'Image',
514
605
  type: 'image',
515
606
  autoFormatting: function autoFormatting() {
516
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
517
- css: _styles.codeLg
607
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
608
+ as: "span",
609
+ xcss: codeLg
518
610
  }, "![", (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.helpDialogMessages.altText), "](http://www.image.com)"));
519
611
  }
520
612
  };
@@ -524,8 +616,9 @@ var quickInsertAutoFormat = function quickInsertAutoFormat(_ref7) {
524
616
  name: formatMessage(_messages.helpDialogMessages.quickInsert),
525
617
  type: 'quickInsert',
526
618
  autoFormatting: function autoFormatting() {
527
- return (0, _react.jsx)("span", null, (0, _react.jsx)("span", {
528
- css: _styles.codeLg
619
+ return (0, _react.jsx)("span", null, (0, _react.jsx)(_primitives.Box, {
620
+ as: "span",
621
+ xcss: codeLg
529
622
  }, "/"));
530
623
  }
531
624
  };
package/dist/cjs/ui/styles.js CHANGED
@@ -4,7 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.toolbarButton = exports.shortcutsArray = exports.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = exports.componentFromKeymapWrapperStyles = exports.column = exports.codeSm = exports.codeMd = exports.codeLg = void 0;
7
+ exports.toolbarButton = exports.shortcutsArray = exports.row = exports.line = exports.header = exports.footer = exports.dialogHeader = exports.contentWrapper = exports.content = exports.componentFromKeymapWrapperStyles = exports.column = void 0;
8
8
  var _react = require("@emotion/react");
9
9
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
10
10
  var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
@@ -100,42 +100,6 @@ var dialogHeader = exports.dialogHeader = {
100
100
  }
101
101
  };
102
102
 
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
104
- var codeSm = exports.codeSm = (0, _react.css)({
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
106
- backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
107
- borderRadius: "var(--ds-border-radius, 3px)",
108
- width: "var(--ds-space-300, 24px)",
109
- display: 'inline-block',
110
- height: "var(--ds-space-300, 24px)",
111
- lineHeight: '24px',
112
- textAlign: 'center'
113
- });
114
-
115
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
116
- var codeMd = exports.codeMd = (0, _react.css)({
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
118
- backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
119
- borderRadius: "var(--ds-border-radius, 3px)",
120
- display: 'inline-block',
121
- height: "var(--ds-space-300, 24px)",
122
- lineHeight: '24px',
123
- width: '50px',
124
- textAlign: 'center'
125
- });
126
-
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
128
- var codeLg = exports.codeLg = (0, _react.css)({
129
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
130
- backgroundColor: "var(--ds-background-neutral, ".concat(colors.N20, ")"),
131
- borderRadius: "var(--ds-border-radius, 3px)",
132
- display: 'inline-block',
133
- height: "var(--ds-space-300, 24px)",
134
- lineHeight: "var(--ds-space-300, 24px)",
135
- padding: "0 ".concat("var(--ds-space-150, 12px)"),
136
- textAlign: 'center'
137
- });
138
-
139
103
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
140
104
  var shortcutsArray = exports.shortcutsArray = (0, _react.css)({
141
105
  display: 'flex',