@atlaskit/editor-plugin-media 2.2.4 → 2.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 2.2.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#121092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121092)
8
+ [`8cd08b738070d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cd08b738070d) -
9
+ [ux] Implemented full height separator as per design for media and card
10
+
3
11
  ## 2.2.4
4
12
 
5
13
  ### Patch Changes
@@ -361,7 +361,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
361
361
  }
362
362
  };
363
363
  toolbarButtons.push(switchFromBlockToInline, {
364
- type: 'separator'
364
+ type: 'separator',
365
+ fullHeight: true
365
366
  });
366
367
  }
367
368
  }
@@ -567,7 +568,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
567
568
  if (allowAltTextOnImages) {
568
569
  var _pluginInjectionApi$a8;
569
570
  toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
570
- type: 'separator'
571
+ type: 'separator',
572
+ fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
571
573
  });
572
574
  }
573
575
  var removeButton = {
@@ -586,7 +588,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
586
588
  testId: 'media-toolbar-remove-button',
587
589
  supportsViewMode: false
588
590
  };
589
- if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
591
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
590
592
  // Preview Support
591
593
  if (allowAdvancedToolBarOptions && allowImagePreview) {
592
594
  var _mediaNode$attrs2;
@@ -610,7 +612,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
610
612
  supportsViewMode: true
611
613
  }, {
612
614
  type: 'separator',
613
- supportsViewMode: true
615
+ supportsViewMode: true,
616
+ fullHeight: true
614
617
  });
615
618
  }
616
619
  }
@@ -731,11 +734,16 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
731
734
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
732
735
  }
733
736
  if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
734
- var _items;
735
- var overflowMenuConfig = [{
736
- type: 'separator',
737
- supportsViewMode: true
738
- }, {
737
+ if (items[items.length - 1].type === 'separator') {
738
+ var separatorItem = items[items.length - 1];
739
+ separatorItem.fullHeight = true;
740
+ } else {
741
+ items.push({
742
+ type: 'separator',
743
+ fullHeight: true
744
+ });
745
+ }
746
+ items.push({
739
747
  type: 'overflow-dropdown',
740
748
  options: [{
741
749
  title: 'Resize',
@@ -764,8 +772,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
764
772
  label: "Delete"
765
773
  })
766
774
  }]
767
- }];
768
- (_items = items).push.apply(_items, overflowMenuConfig);
775
+ });
769
776
  }
770
777
 
771
778
  // Ignored via go/ees005
@@ -88,7 +88,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
88
88
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
89
89
  }
90
90
  }, {
91
- type: 'separator'
91
+ type: 'separator',
92
+ fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
92
93
  }, {
93
94
  id: 'editor.media.card.download',
94
95
  type: 'button',
@@ -246,7 +247,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
246
247
  }
247
248
  };
248
249
  inlineImageItems.push(switchFromInlineToBlock, {
249
- type: 'separator'
250
+ type: 'separator',
251
+ fullHeight: true
250
252
  });
251
253
  }
252
254
 
@@ -296,30 +298,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
296
298
  supportsViewMode: true
297
299
  });
298
300
  }
299
- if (options.allowAltTextOnImages && !(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
301
+ if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
300
302
  var _pluginInjectionApi$a5;
301
303
  inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
302
- type: 'separator'
303
- });
304
- }
305
- if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
306
- inlineImageItems.push({
307
- id: 'editor.media.delete',
308
- type: 'button',
309
- appearance: 'danger',
310
- focusEditoronEnter: true,
311
- icon: _delete.default,
312
- iconFallback: _remove.default,
313
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
314
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
315
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
316
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
317
- title: intl.formatMessage(_messages.default.remove),
318
- onClick: _commands.removeInlineCard,
319
- testId: 'media-toolbar-remove-button'
320
- });
321
- inlineImageItems.push({
322
- type: 'separator'
304
+ type: 'separator',
305
+ fullHeight: true
323
306
  });
324
307
  }
325
308
 
@@ -342,7 +325,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
342
325
  supportsViewMode: true
343
326
  }, {
344
327
  type: 'separator',
345
- supportsViewMode: true
328
+ supportsViewMode: true,
329
+ fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
346
330
  });
347
331
  }
348
332
  if (options.isViewOnly) {
@@ -367,15 +351,17 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
367
351
  type: 'separator'
368
352
  });
369
353
  }
370
- inlineImageItems.push({
371
- type: 'copy-button',
372
- supportsViewMode: true,
373
- items: [{
374
- state: state,
375
- formatMessage: intl.formatMessage,
376
- nodeType: mediaInline
377
- }]
378
- });
354
+ if (options.isViewOnly || (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
355
+ inlineImageItems.push({
356
+ type: 'copy-button',
357
+ supportsViewMode: true,
358
+ items: [{
359
+ state: state,
360
+ formatMessage: intl.formatMessage,
361
+ nodeType: mediaInline
362
+ }]
363
+ });
364
+ }
379
365
  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
380
366
  inlineImageItems.push({
381
367
  type: 'separator'
@@ -349,7 +349,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
349
349
  })
350
350
  };
351
351
  toolbarButtons.push(switchFromBlockToInline, {
352
- type: 'separator'
352
+ type: 'separator',
353
+ fullHeight: true
353
354
  });
354
355
  }
355
356
  }
@@ -569,7 +570,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
569
570
  if (allowAltTextOnImages) {
570
571
  var _pluginInjectionApi$a8;
571
572
  toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
572
- type: 'separator'
573
+ type: 'separator',
574
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
573
575
  });
574
576
  }
575
577
  const removeButton = {
@@ -588,7 +590,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
588
590
  testId: 'media-toolbar-remove-button',
589
591
  supportsViewMode: false
590
592
  };
591
- if (!editorExperiment('platform_editor_controls', 'control')) {
593
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
592
594
  // Preview Support
593
595
  if (allowAdvancedToolBarOptions && allowImagePreview) {
594
596
  var _mediaNode$attrs2;
@@ -612,7 +614,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
612
614
  supportsViewMode: true
613
615
  }, {
614
616
  type: 'separator',
615
- supportsViewMode: true
617
+ supportsViewMode: true,
618
+ fullHeight: true
616
619
  });
617
620
  }
618
621
  }
@@ -731,10 +734,16 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
731
734
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
732
735
  }
733
736
  if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
734
- const overflowMenuConfig = [{
735
- type: 'separator',
736
- supportsViewMode: true
737
- }, {
737
+ if (items[items.length - 1].type === 'separator') {
738
+ const separatorItem = items[items.length - 1];
739
+ separatorItem.fullHeight = true;
740
+ } else {
741
+ items.push({
742
+ type: 'separator',
743
+ fullHeight: true
744
+ });
745
+ }
746
+ items.push({
738
747
  type: 'overflow-dropdown',
739
748
  options: [{
740
749
  title: 'Resize',
@@ -763,8 +772,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
763
772
  label: "Delete"
764
773
  })
765
774
  }]
766
- }];
767
- items.push(...overflowMenuConfig);
775
+ });
768
776
  }
769
777
 
770
778
  // Ignored via go/ees005
@@ -77,7 +77,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
77
77
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
78
78
  }
79
79
  }, {
80
- type: 'separator'
80
+ type: 'separator',
81
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
81
82
  }, {
82
83
  id: 'editor.media.card.download',
83
84
  type: 'button',
@@ -232,7 +233,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
232
233
  })
233
234
  };
234
235
  inlineImageItems.push(switchFromInlineToBlock, {
235
- type: 'separator'
236
+ type: 'separator',
237
+ fullHeight: true
236
238
  });
237
239
  }
238
240
 
@@ -288,30 +290,11 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
288
290
  supportsViewMode: true
289
291
  });
290
292
  }
291
- if (options.allowAltTextOnImages && !editorExperiment('platform_editor_controls', 'control')) {
293
+ if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
292
294
  var _pluginInjectionApi$a5;
293
295
  inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
294
- type: 'separator'
295
- });
296
- }
297
- if (!editorExperiment('platform_editor_controls', 'control')) {
298
- inlineImageItems.push({
299
- id: 'editor.media.delete',
300
- type: 'button',
301
- appearance: 'danger',
302
- focusEditoronEnter: true,
303
- icon: DeleteIcon,
304
- iconFallback: RemoveIcon,
305
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
306
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
307
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
308
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
309
- title: intl.formatMessage(commonMessages.remove),
310
- onClick: removeInlineCard,
311
- testId: 'media-toolbar-remove-button'
312
- });
313
- inlineImageItems.push({
314
- type: 'separator'
296
+ type: 'separator',
297
+ fullHeight: true
315
298
  });
316
299
  }
317
300
 
@@ -334,7 +317,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
334
317
  supportsViewMode: true
335
318
  }, {
336
319
  type: 'separator',
337
- supportsViewMode: true
320
+ supportsViewMode: true,
321
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
338
322
  });
339
323
  }
340
324
  if (options.isViewOnly) {
@@ -359,15 +343,17 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
359
343
  type: 'separator'
360
344
  });
361
345
  }
362
- inlineImageItems.push({
363
- type: 'copy-button',
364
- supportsViewMode: true,
365
- items: [{
366
- state,
367
- formatMessage: intl.formatMessage,
368
- nodeType: mediaInline
369
- }]
370
- });
346
+ if (options.isViewOnly || editorExperiment('platform_editor_controls', 'control')) {
347
+ inlineImageItems.push({
348
+ type: 'copy-button',
349
+ supportsViewMode: true,
350
+ items: [{
351
+ state,
352
+ formatMessage: intl.formatMessage,
353
+ nodeType: mediaInline
354
+ }]
355
+ });
356
+ }
371
357
  if (editorExperiment('platform_editor_controls', 'control')) {
372
358
  inlineImageItems.push({
373
359
  type: 'separator'
@@ -351,7 +351,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
351
351
  }
352
352
  };
353
353
  toolbarButtons.push(switchFromBlockToInline, {
354
- type: 'separator'
354
+ type: 'separator',
355
+ fullHeight: true
355
356
  });
356
357
  }
357
358
  }
@@ -557,7 +558,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
557
558
  if (allowAltTextOnImages) {
558
559
  var _pluginInjectionApi$a8;
559
560
  toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
560
- type: 'separator'
561
+ type: 'separator',
562
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
561
563
  });
562
564
  }
563
565
  var removeButton = {
@@ -576,7 +578,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
576
578
  testId: 'media-toolbar-remove-button',
577
579
  supportsViewMode: false
578
580
  };
579
- if (!editorExperiment('platform_editor_controls', 'control')) {
581
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
580
582
  // Preview Support
581
583
  if (allowAdvancedToolBarOptions && allowImagePreview) {
582
584
  var _mediaNode$attrs2;
@@ -600,7 +602,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
600
602
  supportsViewMode: true
601
603
  }, {
602
604
  type: 'separator',
603
- supportsViewMode: true
605
+ supportsViewMode: true,
606
+ fullHeight: true
604
607
  });
605
608
  }
606
609
  }
@@ -721,11 +724,16 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
721
724
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
722
725
  }
723
726
  if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
724
- var _items;
725
- var overflowMenuConfig = [{
726
- type: 'separator',
727
- supportsViewMode: true
728
- }, {
727
+ if (items[items.length - 1].type === 'separator') {
728
+ var separatorItem = items[items.length - 1];
729
+ separatorItem.fullHeight = true;
730
+ } else {
731
+ items.push({
732
+ type: 'separator',
733
+ fullHeight: true
734
+ });
735
+ }
736
+ items.push({
729
737
  type: 'overflow-dropdown',
730
738
  options: [{
731
739
  title: 'Resize',
@@ -754,8 +762,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
754
762
  label: "Delete"
755
763
  })
756
764
  }]
757
- }];
758
- (_items = items).push.apply(_items, overflowMenuConfig);
765
+ });
759
766
  }
760
767
 
761
768
  // Ignored via go/ees005
@@ -78,7 +78,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
78
78
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
79
79
  }
80
80
  }, {
81
- type: 'separator'
81
+ type: 'separator',
82
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
82
83
  }, {
83
84
  id: 'editor.media.card.download',
84
85
  type: 'button',
@@ -236,7 +237,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
236
237
  }
237
238
  };
238
239
  inlineImageItems.push(switchFromInlineToBlock, {
239
- type: 'separator'
240
+ type: 'separator',
241
+ fullHeight: true
240
242
  });
241
243
  }
242
244
 
@@ -286,30 +288,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
286
288
  supportsViewMode: true
287
289
  });
288
290
  }
289
- if (options.allowAltTextOnImages && !editorExperiment('platform_editor_controls', 'control')) {
291
+ if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
290
292
  var _pluginInjectionApi$a5;
291
293
  inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
292
- type: 'separator'
293
- });
294
- }
295
- if (!editorExperiment('platform_editor_controls', 'control')) {
296
- inlineImageItems.push({
297
- id: 'editor.media.delete',
298
- type: 'button',
299
- appearance: 'danger',
300
- focusEditoronEnter: true,
301
- icon: DeleteIcon,
302
- iconFallback: RemoveIcon,
303
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
304
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
305
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
306
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
307
- title: intl.formatMessage(commonMessages.remove),
308
- onClick: removeInlineCard,
309
- testId: 'media-toolbar-remove-button'
310
- });
311
- inlineImageItems.push({
312
- type: 'separator'
294
+ type: 'separator',
295
+ fullHeight: true
313
296
  });
314
297
  }
315
298
 
@@ -332,7 +315,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
332
315
  supportsViewMode: true
333
316
  }, {
334
317
  type: 'separator',
335
- supportsViewMode: true
318
+ supportsViewMode: true,
319
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
336
320
  });
337
321
  }
338
322
  if (options.isViewOnly) {
@@ -357,15 +341,17 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
357
341
  type: 'separator'
358
342
  });
359
343
  }
360
- inlineImageItems.push({
361
- type: 'copy-button',
362
- supportsViewMode: true,
363
- items: [{
364
- state: state,
365
- formatMessage: intl.formatMessage,
366
- nodeType: mediaInline
367
- }]
368
- });
344
+ if (options.isViewOnly || editorExperiment('platform_editor_controls', 'control')) {
345
+ inlineImageItems.push({
346
+ type: 'copy-button',
347
+ supportsViewMode: true,
348
+ items: [{
349
+ state: state,
350
+ formatMessage: intl.formatMessage,
351
+ nodeType: mediaInline
352
+ }]
353
+ });
354
+ }
369
355
  if (editorExperiment('platform_editor_controls', 'control')) {
370
356
  inlineImageItems.push({
371
357
  type: 'separator'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "2.2.4",
3
+ "version": "2.2.5",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -70,7 +70,7 @@
70
70
  "@atlaskit/textfield": "^8.0.0",
71
71
  "@atlaskit/theme": "^17.0.0",
72
72
  "@atlaskit/tmp-editor-statsig": "^3.3.0",
73
- "@atlaskit/tokens": "^4.2.0",
73
+ "@atlaskit/tokens": "^4.3.0",
74
74
  "@atlaskit/tooltip": "^20.0.0",
75
75
  "@babel/runtime": "^7.0.0",
76
76
  "@emotion/react": "^11.7.1",