@atlaskit/editor-plugin-media 2.2.3 → 2.2.4
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 +12 -0
- package/dist/cjs/ui/toolbar/index.js +125 -44
- package/dist/cjs/ui/toolbar/mediaInline.js +75 -24
- package/dist/es2019/ui/toolbar/index.js +128 -50
- package/dist/es2019/ui/toolbar/mediaInline.js +79 -30
- package/dist/esm/ui/toolbar/index.js +125 -44
- package/dist/esm/ui/toolbar/mediaInline.js +75 -24
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 2.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#120999](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120999)
|
|
8
|
+
[`3d280e8a1e183`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d280e8a1e183) -
|
|
9
|
+
[ux] Moves media floating toolbar options to convert image from block to inline and back to a
|
|
10
|
+
dropdown.
|
|
11
|
+
- [#120575](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120575)
|
|
12
|
+
[`0da64a47689b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0da64a47689b5) -
|
|
13
|
+
[ux] Add overflow menu on editor floating toolbar for media and card plugin
|
|
14
|
+
|
|
3
15
|
## 2.2.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -18,7 +18,9 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
|
|
|
18
18
|
var _state2 = require("@atlaskit/editor-prosemirror/state");
|
|
19
19
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
20
20
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
21
|
+
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
|
|
21
22
|
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
|
|
23
|
+
var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
|
|
22
24
|
var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
|
|
23
25
|
var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
|
|
24
26
|
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
|
|
@@ -273,46 +275,95 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
273
275
|
var _selectedNode$node$fi;
|
|
274
276
|
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
|
|
275
277
|
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
|
|
276
|
-
var _pluginInjectionApi$a4;
|
|
277
278
|
var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
|
|
278
279
|
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
279
280
|
var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
281
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
282
|
+
var _pluginInjectionApi$a4;
|
|
283
|
+
toolbarButtons.push({
|
|
284
|
+
type: 'button',
|
|
285
|
+
id: 'editor.media.image.view.switcher.inline',
|
|
286
|
+
title: inlineSwitcherTitle,
|
|
287
|
+
icon: function icon() {
|
|
288
|
+
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
289
|
+
color: "currentColor",
|
|
290
|
+
spacing: "spacious",
|
|
291
|
+
label: inlineSwitcherTitle,
|
|
292
|
+
LEGACY_size: "medium",
|
|
293
|
+
LEGACY_fallbackIcon: _card.IconInline
|
|
294
|
+
});
|
|
295
|
+
},
|
|
296
|
+
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
297
|
+
testId: 'image-inline-appearance'
|
|
298
|
+
}, {
|
|
299
|
+
type: 'button',
|
|
300
|
+
id: 'editor.media.image.view.switcher.floating',
|
|
301
|
+
title: floatingSwitcherTitle,
|
|
302
|
+
icon: function icon() {
|
|
303
|
+
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
304
|
+
color: "currentColor",
|
|
305
|
+
spacing: "spacious",
|
|
306
|
+
label: floatingSwitcherTitle,
|
|
307
|
+
LEGACY_size: "medium",
|
|
308
|
+
LEGACY_fallbackIcon: _card.IconEmbed
|
|
309
|
+
});
|
|
310
|
+
},
|
|
311
|
+
onClick: function onClick() {
|
|
312
|
+
return true;
|
|
313
|
+
},
|
|
314
|
+
testId: 'image-floating-appearance',
|
|
315
|
+
selected: true
|
|
316
|
+
}, {
|
|
317
|
+
type: 'separator'
|
|
318
|
+
});
|
|
319
|
+
} else {
|
|
320
|
+
var _pluginInjectionApi$a5;
|
|
321
|
+
var _options2 = [{
|
|
322
|
+
id: 'editor.media.convert.mediainline',
|
|
323
|
+
title: inlineSwitcherTitle,
|
|
324
|
+
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
325
|
+
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
286
326
|
color: "currentColor",
|
|
287
327
|
spacing: "spacious",
|
|
288
328
|
label: inlineSwitcherTitle,
|
|
289
329
|
LEGACY_size: "medium",
|
|
290
330
|
LEGACY_fallbackIcon: _card.IconInline
|
|
291
|
-
})
|
|
292
|
-
},
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
331
|
+
})
|
|
332
|
+
}, {
|
|
333
|
+
id: 'editor.media.convert.mediasingle',
|
|
334
|
+
title: floatingSwitcherTitle,
|
|
335
|
+
selected: true,
|
|
336
|
+
onClick: function onClick() {
|
|
337
|
+
return true;
|
|
338
|
+
},
|
|
339
|
+
icon: /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
301
340
|
color: "currentColor",
|
|
302
341
|
spacing: "spacious",
|
|
303
342
|
label: floatingSwitcherTitle,
|
|
304
343
|
LEGACY_size: "medium",
|
|
305
344
|
LEGACY_fallbackIcon: _card.IconEmbed
|
|
306
|
-
})
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
345
|
+
})
|
|
346
|
+
}];
|
|
347
|
+
var switchFromBlockToInline = {
|
|
348
|
+
id: 'media-block-to-inline-toolbar-item',
|
|
349
|
+
testId: 'media-inline-to-block-dropdown',
|
|
350
|
+
type: 'dropdown',
|
|
351
|
+
options: _options2,
|
|
352
|
+
title: intl.formatMessage(_mediaUi.messages.sizeOptions),
|
|
353
|
+
icon: function icon() {
|
|
354
|
+
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
355
|
+
color: "currentColor",
|
|
356
|
+
spacing: "spacious",
|
|
357
|
+
label: intl.formatMessage(_mediaUi.messages.sizeOptions),
|
|
358
|
+
LEGACY_size: "medium",
|
|
359
|
+
LEGACY_fallbackIcon: _card.IconEmbed
|
|
360
|
+
});
|
|
361
|
+
}
|
|
362
|
+
};
|
|
363
|
+
toolbarButtons.push(switchFromBlockToInline, {
|
|
364
|
+
type: 'separator'
|
|
365
|
+
});
|
|
366
|
+
}
|
|
316
367
|
}
|
|
317
368
|
}
|
|
318
369
|
|
|
@@ -373,11 +424,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
373
424
|
}
|
|
374
425
|
},
|
|
375
426
|
onSubmit: function onSubmit(_ref3) {
|
|
376
|
-
var _pluginInjectionApi$
|
|
427
|
+
var _pluginInjectionApi$a6;
|
|
377
428
|
var width = _ref3.width,
|
|
378
429
|
validation = _ref3.validation;
|
|
379
430
|
var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
380
|
-
(0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
431
|
+
(0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
|
|
381
432
|
},
|
|
382
433
|
onMigrate: function onMigrate() {
|
|
383
434
|
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
|
|
@@ -439,10 +490,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
439
490
|
};
|
|
440
491
|
var openLink = function openLink() {
|
|
441
492
|
if (editorView) {
|
|
442
|
-
var _pluginInjectionApi$
|
|
493
|
+
var _pluginInjectionApi$a7;
|
|
443
494
|
var tr = editorView.state.tr,
|
|
444
495
|
dispatch = editorView.dispatch;
|
|
445
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
496
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
|
|
446
497
|
eventType: _analytics.EVENT_TYPE.TRACK,
|
|
447
498
|
action: _analytics.ACTION.VISITED,
|
|
448
499
|
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
|
|
@@ -514,8 +565,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
514
565
|
});
|
|
515
566
|
}
|
|
516
567
|
if (allowAltTextOnImages) {
|
|
517
|
-
var _pluginInjectionApi$
|
|
518
|
-
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
568
|
+
var _pluginInjectionApi$a8;
|
|
569
|
+
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), {
|
|
519
570
|
type: 'separator'
|
|
520
571
|
});
|
|
521
572
|
}
|
|
@@ -536,12 +587,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
536
587
|
supportsViewMode: false
|
|
537
588
|
};
|
|
538
589
|
if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
539
|
-
toolbarButtons.push(removeButton);
|
|
540
|
-
toolbarButtons.push({
|
|
541
|
-
type: 'separator',
|
|
542
|
-
supportsViewMode: false
|
|
543
|
-
});
|
|
544
|
-
|
|
545
590
|
// Preview Support
|
|
546
591
|
if (allowAdvancedToolBarOptions && allowImagePreview) {
|
|
547
592
|
var _mediaNode$attrs2;
|
|
@@ -569,7 +614,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
569
614
|
});
|
|
570
615
|
}
|
|
571
616
|
}
|
|
572
|
-
toolbarButtons.push({
|
|
617
|
+
isViewOnly && toolbarButtons.push({
|
|
573
618
|
type: 'copy-button',
|
|
574
619
|
items: [{
|
|
575
620
|
state: state,
|
|
@@ -577,8 +622,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
577
622
|
nodeType: mediaSingle
|
|
578
623
|
}],
|
|
579
624
|
supportsViewMode: true
|
|
580
|
-
}
|
|
581
|
-
toolbarButtons.push({
|
|
625
|
+
}, {
|
|
582
626
|
type: 'separator',
|
|
583
627
|
supportsViewMode: true
|
|
584
628
|
});
|
|
@@ -664,7 +708,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
664
708
|
selectedNodeType = state.selection.node.type;
|
|
665
709
|
}
|
|
666
710
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
667
|
-
var _pluginInjectionApi$
|
|
711
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
|
|
668
712
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
669
713
|
baseToolbar.getDomRef = function () {
|
|
670
714
|
var _mediaPluginState$ele;
|
|
@@ -673,7 +717,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
673
717
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
674
718
|
return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
|
|
675
719
|
};
|
|
676
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
720
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
|
|
677
721
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
678
722
|
items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
679
723
|
} else {
|
|
@@ -686,6 +730,43 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
686
730
|
};
|
|
687
731
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
688
732
|
}
|
|
733
|
+
if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
734
|
+
var _items;
|
|
735
|
+
var overflowMenuConfig = [{
|
|
736
|
+
type: 'separator',
|
|
737
|
+
supportsViewMode: true
|
|
738
|
+
}, {
|
|
739
|
+
type: 'overflow-dropdown',
|
|
740
|
+
options: [{
|
|
741
|
+
title: 'Resize',
|
|
742
|
+
onClick: function onClick() {
|
|
743
|
+
// TODO open resize dialog?
|
|
744
|
+
return true;
|
|
745
|
+
},
|
|
746
|
+
icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
|
|
747
|
+
label: "Resize"
|
|
748
|
+
})
|
|
749
|
+
}, {
|
|
750
|
+
type: 'separator'
|
|
751
|
+
}, {
|
|
752
|
+
title: 'Copy',
|
|
753
|
+
onClick: function onClick() {
|
|
754
|
+
// TODO replace with copy-button plugin
|
|
755
|
+
return true;
|
|
756
|
+
},
|
|
757
|
+
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
|
|
758
|
+
label: "Copy"
|
|
759
|
+
})
|
|
760
|
+
}, {
|
|
761
|
+
title: 'Delete',
|
|
762
|
+
onClick: remove,
|
|
763
|
+
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
|
|
764
|
+
label: "Delete"
|
|
765
|
+
})
|
|
766
|
+
}]
|
|
767
|
+
}];
|
|
768
|
+
(_items = items).push.apply(_items, overflowMenuConfig);
|
|
769
|
+
}
|
|
689
770
|
|
|
690
771
|
// Ignored via go/ees005
|
|
691
772
|
// eslint-disable-next-line no-var
|
|
@@ -164,40 +164,91 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
164
164
|
type: 'separator'
|
|
165
165
|
});
|
|
166
166
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
167
|
+
|
|
168
|
+
// For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
|
|
169
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
170
|
+
inlineImageItems.push({
|
|
171
|
+
id: 'editor.media.convert.mediainline',
|
|
172
|
+
type: 'button',
|
|
173
|
+
title: mediaInlineImageTitle,
|
|
174
|
+
icon: function icon() {
|
|
175
|
+
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
176
|
+
color: "currentColor",
|
|
177
|
+
spacing: "spacious",
|
|
178
|
+
label: mediaInlineImageTitle,
|
|
179
|
+
LEGACY_size: "medium",
|
|
180
|
+
LEGACY_fallbackIcon: _card.IconInline
|
|
181
|
+
});
|
|
182
|
+
},
|
|
183
|
+
onClick: function onClick() {
|
|
184
|
+
return true;
|
|
185
|
+
},
|
|
186
|
+
selected: true
|
|
187
|
+
}, {
|
|
188
|
+
id: 'editor.media.convert.mediasingle',
|
|
189
|
+
type: 'button',
|
|
190
|
+
title: mediaSingleTitle,
|
|
191
|
+
icon: function icon() {
|
|
192
|
+
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
193
|
+
color: "currentColor",
|
|
194
|
+
spacing: "spacious",
|
|
195
|
+
label: mediaSingleTitle,
|
|
196
|
+
LEGACY_size: "medium",
|
|
197
|
+
LEGACY_fallbackIcon: _card.IconEmbed
|
|
198
|
+
});
|
|
199
|
+
},
|
|
200
|
+
onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
|
|
201
|
+
}, {
|
|
202
|
+
type: 'separator'
|
|
203
|
+
});
|
|
204
|
+
} else {
|
|
205
|
+
var _options = [{
|
|
206
|
+
id: 'editor.media.convert.mediainline',
|
|
207
|
+
title: mediaInlineImageTitle,
|
|
208
|
+
onClick: function onClick() {
|
|
209
|
+
return true;
|
|
210
|
+
},
|
|
211
|
+
selected: true,
|
|
212
|
+
disabled: false,
|
|
213
|
+
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
173
214
|
color: "currentColor",
|
|
174
215
|
spacing: "spacious",
|
|
175
216
|
label: mediaInlineImageTitle,
|
|
176
217
|
LEGACY_size: "medium",
|
|
177
218
|
LEGACY_fallbackIcon: _card.IconInline
|
|
178
|
-
})
|
|
179
|
-
},
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}, {
|
|
185
|
-
id: 'editor.media.convert.mediasingle',
|
|
186
|
-
type: 'button',
|
|
187
|
-
title: mediaSingleTitle,
|
|
188
|
-
icon: function icon() {
|
|
189
|
-
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
219
|
+
})
|
|
220
|
+
}, {
|
|
221
|
+
id: 'editor.media.convert.mediasingle',
|
|
222
|
+
title: mediaSingleTitle,
|
|
223
|
+
onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState),
|
|
224
|
+
icon: /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
190
225
|
color: "currentColor",
|
|
191
226
|
spacing: "spacious",
|
|
192
227
|
label: mediaSingleTitle,
|
|
193
228
|
LEGACY_size: "medium",
|
|
194
229
|
LEGACY_fallbackIcon: _card.IconEmbed
|
|
195
|
-
})
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
230
|
+
})
|
|
231
|
+
}];
|
|
232
|
+
var switchFromInlineToBlock = {
|
|
233
|
+
id: 'media-inline-to-block-toolbar-item',
|
|
234
|
+
testId: 'media-inline-to-block-dropdown',
|
|
235
|
+
type: 'dropdown',
|
|
236
|
+
options: _options,
|
|
237
|
+
title: intl.formatMessage(_mediaUi.messages.sizeOptions),
|
|
238
|
+
icon: function icon() {
|
|
239
|
+
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
240
|
+
color: "currentColor",
|
|
241
|
+
spacing: "spacious",
|
|
242
|
+
label: mediaInlineImageTitle,
|
|
243
|
+
LEGACY_size: "medium",
|
|
244
|
+
LEGACY_fallbackIcon: _card.IconInline
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
inlineImageItems.push(switchFromInlineToBlock, {
|
|
249
|
+
type: 'separator'
|
|
250
|
+
});
|
|
251
|
+
}
|
|
201
252
|
|
|
202
253
|
// TODO: editor controls move to overflow menu
|
|
203
254
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
@@ -8,7 +8,9 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
|
|
|
8
8
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
9
|
import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
10
10
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
11
|
+
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
11
12
|
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
13
|
+
import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
|
|
12
14
|
import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
|
|
13
15
|
import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
|
|
14
16
|
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
@@ -267,42 +269,89 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
267
269
|
var _selectedNode$node$fi;
|
|
268
270
|
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
|
|
269
271
|
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
|
|
270
|
-
var _pluginInjectionApi$a4;
|
|
271
272
|
const hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
|
|
272
273
|
const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
273
274
|
const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
275
|
+
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
276
|
+
var _pluginInjectionApi$a4;
|
|
277
|
+
toolbarButtons.push({
|
|
278
|
+
type: 'button',
|
|
279
|
+
id: 'editor.media.image.view.switcher.inline',
|
|
280
|
+
title: inlineSwitcherTitle,
|
|
281
|
+
icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
282
|
+
color: "currentColor",
|
|
283
|
+
spacing: "spacious",
|
|
284
|
+
label: inlineSwitcherTitle,
|
|
285
|
+
LEGACY_size: "medium",
|
|
286
|
+
LEGACY_fallbackIcon: IconInline
|
|
287
|
+
}),
|
|
288
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
289
|
+
testId: 'image-inline-appearance'
|
|
290
|
+
}, {
|
|
291
|
+
type: 'button',
|
|
292
|
+
id: 'editor.media.image.view.switcher.floating',
|
|
293
|
+
title: floatingSwitcherTitle,
|
|
294
|
+
icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
295
|
+
color: "currentColor",
|
|
296
|
+
spacing: "spacious",
|
|
297
|
+
label: floatingSwitcherTitle,
|
|
298
|
+
LEGACY_size: "medium",
|
|
299
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
300
|
+
}),
|
|
301
|
+
onClick: () => {
|
|
302
|
+
return true;
|
|
303
|
+
},
|
|
304
|
+
testId: 'image-floating-appearance',
|
|
305
|
+
selected: true
|
|
306
|
+
}, {
|
|
307
|
+
type: 'separator'
|
|
308
|
+
});
|
|
309
|
+
} else {
|
|
310
|
+
var _pluginInjectionApi$a5;
|
|
311
|
+
const options = [{
|
|
312
|
+
id: 'editor.media.convert.mediainline',
|
|
313
|
+
title: inlineSwitcherTitle,
|
|
314
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
315
|
+
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
316
|
+
color: "currentColor",
|
|
317
|
+
spacing: "spacious",
|
|
318
|
+
label: inlineSwitcherTitle,
|
|
319
|
+
LEGACY_size: "medium",
|
|
320
|
+
LEGACY_fallbackIcon: IconInline
|
|
321
|
+
})
|
|
322
|
+
}, {
|
|
323
|
+
id: 'editor.media.convert.mediasingle',
|
|
324
|
+
title: floatingSwitcherTitle,
|
|
325
|
+
selected: true,
|
|
326
|
+
onClick: () => {
|
|
327
|
+
return true;
|
|
328
|
+
},
|
|
329
|
+
icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
330
|
+
color: "currentColor",
|
|
331
|
+
spacing: "spacious",
|
|
332
|
+
label: floatingSwitcherTitle,
|
|
333
|
+
LEGACY_size: "medium",
|
|
334
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
335
|
+
})
|
|
336
|
+
}];
|
|
337
|
+
const switchFromBlockToInline = {
|
|
338
|
+
id: 'media-block-to-inline-toolbar-item',
|
|
339
|
+
testId: 'media-inline-to-block-dropdown',
|
|
340
|
+
type: 'dropdown',
|
|
341
|
+
options: options,
|
|
342
|
+
title: intl.formatMessage(messages.sizeOptions),
|
|
343
|
+
icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
344
|
+
color: "currentColor",
|
|
345
|
+
spacing: "spacious",
|
|
346
|
+
label: intl.formatMessage(messages.sizeOptions),
|
|
347
|
+
LEGACY_size: "medium",
|
|
348
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
349
|
+
})
|
|
350
|
+
};
|
|
351
|
+
toolbarButtons.push(switchFromBlockToInline, {
|
|
352
|
+
type: 'separator'
|
|
353
|
+
});
|
|
354
|
+
}
|
|
306
355
|
}
|
|
307
356
|
}
|
|
308
357
|
|
|
@@ -370,9 +419,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
370
419
|
width,
|
|
371
420
|
validation
|
|
372
421
|
}) => {
|
|
373
|
-
var _pluginInjectionApi$
|
|
422
|
+
var _pluginInjectionApi$a6;
|
|
374
423
|
const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
375
|
-
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
424
|
+
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
|
|
376
425
|
},
|
|
377
426
|
onMigrate: () => {
|
|
378
427
|
const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
|
|
@@ -439,14 +488,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
439
488
|
};
|
|
440
489
|
const openLink = () => {
|
|
441
490
|
if (editorView) {
|
|
442
|
-
var _pluginInjectionApi$
|
|
491
|
+
var _pluginInjectionApi$a7;
|
|
443
492
|
const {
|
|
444
493
|
state: {
|
|
445
494
|
tr
|
|
446
495
|
},
|
|
447
496
|
dispatch
|
|
448
497
|
} = editorView;
|
|
449
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
498
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
|
|
450
499
|
eventType: EVENT_TYPE.TRACK,
|
|
451
500
|
action: ACTION.VISITED,
|
|
452
501
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -518,8 +567,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
518
567
|
});
|
|
519
568
|
}
|
|
520
569
|
if (allowAltTextOnImages) {
|
|
521
|
-
var _pluginInjectionApi$
|
|
522
|
-
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
570
|
+
var _pluginInjectionApi$a8;
|
|
571
|
+
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), {
|
|
523
572
|
type: 'separator'
|
|
524
573
|
});
|
|
525
574
|
}
|
|
@@ -540,12 +589,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
540
589
|
supportsViewMode: false
|
|
541
590
|
};
|
|
542
591
|
if (!editorExperiment('platform_editor_controls', 'control')) {
|
|
543
|
-
toolbarButtons.push(removeButton);
|
|
544
|
-
toolbarButtons.push({
|
|
545
|
-
type: 'separator',
|
|
546
|
-
supportsViewMode: false
|
|
547
|
-
});
|
|
548
|
-
|
|
549
592
|
// Preview Support
|
|
550
593
|
if (allowAdvancedToolBarOptions && allowImagePreview) {
|
|
551
594
|
var _mediaNode$attrs2;
|
|
@@ -573,7 +616,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
573
616
|
});
|
|
574
617
|
}
|
|
575
618
|
}
|
|
576
|
-
toolbarButtons.push({
|
|
619
|
+
isViewOnly && toolbarButtons.push({
|
|
577
620
|
type: 'copy-button',
|
|
578
621
|
items: [{
|
|
579
622
|
state,
|
|
@@ -581,8 +624,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
581
624
|
nodeType: mediaSingle
|
|
582
625
|
}],
|
|
583
626
|
supportsViewMode: true
|
|
584
|
-
}
|
|
585
|
-
toolbarButtons.push({
|
|
627
|
+
}, {
|
|
586
628
|
type: 'separator',
|
|
587
629
|
supportsViewMode: true
|
|
588
630
|
});
|
|
@@ -666,7 +708,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
666
708
|
selectedNodeType = state.selection.node.type;
|
|
667
709
|
}
|
|
668
710
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
669
|
-
var _pluginInjectionApi$
|
|
711
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
|
|
670
712
|
const mediaOffset = state.selection.$from.parentOffset + 1;
|
|
671
713
|
baseToolbar.getDomRef = () => {
|
|
672
714
|
var _mediaPluginState$ele;
|
|
@@ -675,7 +717,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
675
717
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
676
718
|
return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
|
|
677
719
|
};
|
|
678
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
720
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
|
|
679
721
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
680
722
|
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
681
723
|
} else {
|
|
@@ -688,6 +730,42 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
688
730
|
};
|
|
689
731
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
690
732
|
}
|
|
733
|
+
if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
734
|
+
const overflowMenuConfig = [{
|
|
735
|
+
type: 'separator',
|
|
736
|
+
supportsViewMode: true
|
|
737
|
+
}, {
|
|
738
|
+
type: 'overflow-dropdown',
|
|
739
|
+
options: [{
|
|
740
|
+
title: 'Resize',
|
|
741
|
+
onClick: () => {
|
|
742
|
+
// TODO open resize dialog?
|
|
743
|
+
return true;
|
|
744
|
+
},
|
|
745
|
+
icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
|
|
746
|
+
label: "Resize"
|
|
747
|
+
})
|
|
748
|
+
}, {
|
|
749
|
+
type: 'separator'
|
|
750
|
+
}, {
|
|
751
|
+
title: 'Copy',
|
|
752
|
+
onClick: () => {
|
|
753
|
+
// TODO replace with copy-button plugin
|
|
754
|
+
return true;
|
|
755
|
+
},
|
|
756
|
+
icon: /*#__PURE__*/React.createElement(CopyIcon, {
|
|
757
|
+
label: "Copy"
|
|
758
|
+
})
|
|
759
|
+
}, {
|
|
760
|
+
title: 'Delete',
|
|
761
|
+
onClick: remove,
|
|
762
|
+
icon: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
763
|
+
label: "Delete"
|
|
764
|
+
})
|
|
765
|
+
}]
|
|
766
|
+
}];
|
|
767
|
+
items.push(...overflowMenuConfig);
|
|
768
|
+
}
|
|
691
769
|
|
|
692
770
|
// Ignored via go/ees005
|
|
693
771
|
// eslint-disable-next-line no-var
|
|
@@ -156,36 +156,85 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
|
|
|
156
156
|
type: 'separator'
|
|
157
157
|
});
|
|
158
158
|
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
159
|
+
|
|
160
|
+
// For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
|
|
161
|
+
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
162
|
+
inlineImageItems.push({
|
|
163
|
+
id: 'editor.media.convert.mediainline',
|
|
164
|
+
type: 'button',
|
|
165
|
+
title: mediaInlineImageTitle,
|
|
166
|
+
icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
167
|
+
color: "currentColor",
|
|
168
|
+
spacing: "spacious",
|
|
169
|
+
label: mediaInlineImageTitle,
|
|
170
|
+
LEGACY_size: "medium",
|
|
171
|
+
LEGACY_fallbackIcon: IconInline
|
|
172
|
+
}),
|
|
173
|
+
onClick: () => {
|
|
174
|
+
return true;
|
|
175
|
+
},
|
|
176
|
+
selected: true
|
|
177
|
+
}, {
|
|
178
|
+
id: 'editor.media.convert.mediasingle',
|
|
179
|
+
type: 'button',
|
|
180
|
+
title: mediaSingleTitle,
|
|
181
|
+
icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
182
|
+
color: "currentColor",
|
|
183
|
+
spacing: "spacious",
|
|
184
|
+
label: mediaSingleTitle,
|
|
185
|
+
LEGACY_size: "medium",
|
|
186
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
187
|
+
}),
|
|
188
|
+
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
|
|
189
|
+
}, {
|
|
190
|
+
type: 'separator'
|
|
191
|
+
});
|
|
192
|
+
} else {
|
|
193
|
+
const options = [{
|
|
194
|
+
id: 'editor.media.convert.mediainline',
|
|
195
|
+
title: mediaInlineImageTitle,
|
|
196
|
+
onClick: () => {
|
|
197
|
+
return true;
|
|
198
|
+
},
|
|
199
|
+
selected: true,
|
|
200
|
+
disabled: false,
|
|
201
|
+
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
202
|
+
color: "currentColor",
|
|
203
|
+
spacing: "spacious",
|
|
204
|
+
label: mediaInlineImageTitle,
|
|
205
|
+
LEGACY_size: "medium",
|
|
206
|
+
LEGACY_fallbackIcon: IconInline
|
|
207
|
+
})
|
|
208
|
+
}, {
|
|
209
|
+
id: 'editor.media.convert.mediasingle',
|
|
210
|
+
title: mediaSingleTitle,
|
|
211
|
+
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
|
|
212
|
+
icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
213
|
+
color: "currentColor",
|
|
214
|
+
spacing: "spacious",
|
|
215
|
+
label: mediaSingleTitle,
|
|
216
|
+
LEGACY_size: "medium",
|
|
217
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
218
|
+
})
|
|
219
|
+
}];
|
|
220
|
+
const switchFromInlineToBlock = {
|
|
221
|
+
id: 'media-inline-to-block-toolbar-item',
|
|
222
|
+
testId: 'media-inline-to-block-dropdown',
|
|
223
|
+
type: 'dropdown',
|
|
224
|
+
options: options,
|
|
225
|
+
title: intl.formatMessage(messages.sizeOptions),
|
|
226
|
+
icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
227
|
+
color: "currentColor",
|
|
228
|
+
spacing: "spacious",
|
|
229
|
+
label: mediaInlineImageTitle,
|
|
230
|
+
LEGACY_size: "medium",
|
|
231
|
+
LEGACY_fallbackIcon: IconInline
|
|
232
|
+
})
|
|
233
|
+
};
|
|
234
|
+
inlineImageItems.push(switchFromInlineToBlock, {
|
|
235
|
+
type: 'separator'
|
|
236
|
+
});
|
|
237
|
+
}
|
|
189
238
|
|
|
190
239
|
// TODO: editor controls move to overflow menu
|
|
191
240
|
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
@@ -12,7 +12,9 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
|
|
|
12
12
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
13
13
|
import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
14
14
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
15
|
+
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
15
16
|
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
17
|
+
import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
|
|
16
18
|
import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
|
|
17
19
|
import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
|
|
18
20
|
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
@@ -263,46 +265,95 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
263
265
|
var _selectedNode$node$fi;
|
|
264
266
|
// mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
|
|
265
267
|
if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
|
|
266
|
-
var _pluginInjectionApi$a4;
|
|
267
268
|
var hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
|
|
268
269
|
var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
269
270
|
var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
271
|
+
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
272
|
+
var _pluginInjectionApi$a4;
|
|
273
|
+
toolbarButtons.push({
|
|
274
|
+
type: 'button',
|
|
275
|
+
id: 'editor.media.image.view.switcher.inline',
|
|
276
|
+
title: inlineSwitcherTitle,
|
|
277
|
+
icon: function icon() {
|
|
278
|
+
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
279
|
+
color: "currentColor",
|
|
280
|
+
spacing: "spacious",
|
|
281
|
+
label: inlineSwitcherTitle,
|
|
282
|
+
LEGACY_size: "medium",
|
|
283
|
+
LEGACY_fallbackIcon: IconInline
|
|
284
|
+
});
|
|
285
|
+
},
|
|
286
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
287
|
+
testId: 'image-inline-appearance'
|
|
288
|
+
}, {
|
|
289
|
+
type: 'button',
|
|
290
|
+
id: 'editor.media.image.view.switcher.floating',
|
|
291
|
+
title: floatingSwitcherTitle,
|
|
292
|
+
icon: function icon() {
|
|
293
|
+
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
294
|
+
color: "currentColor",
|
|
295
|
+
spacing: "spacious",
|
|
296
|
+
label: floatingSwitcherTitle,
|
|
297
|
+
LEGACY_size: "medium",
|
|
298
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
299
|
+
});
|
|
300
|
+
},
|
|
301
|
+
onClick: function onClick() {
|
|
302
|
+
return true;
|
|
303
|
+
},
|
|
304
|
+
testId: 'image-floating-appearance',
|
|
305
|
+
selected: true
|
|
306
|
+
}, {
|
|
307
|
+
type: 'separator'
|
|
308
|
+
});
|
|
309
|
+
} else {
|
|
310
|
+
var _pluginInjectionApi$a5;
|
|
311
|
+
var _options2 = [{
|
|
312
|
+
id: 'editor.media.convert.mediainline',
|
|
313
|
+
title: inlineSwitcherTitle,
|
|
314
|
+
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
|
|
315
|
+
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
276
316
|
color: "currentColor",
|
|
277
317
|
spacing: "spacious",
|
|
278
318
|
label: inlineSwitcherTitle,
|
|
279
319
|
LEGACY_size: "medium",
|
|
280
320
|
LEGACY_fallbackIcon: IconInline
|
|
281
|
-
})
|
|
282
|
-
},
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
321
|
+
})
|
|
322
|
+
}, {
|
|
323
|
+
id: 'editor.media.convert.mediasingle',
|
|
324
|
+
title: floatingSwitcherTitle,
|
|
325
|
+
selected: true,
|
|
326
|
+
onClick: function onClick() {
|
|
327
|
+
return true;
|
|
328
|
+
},
|
|
329
|
+
icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
291
330
|
color: "currentColor",
|
|
292
331
|
spacing: "spacious",
|
|
293
332
|
label: floatingSwitcherTitle,
|
|
294
333
|
LEGACY_size: "medium",
|
|
295
334
|
LEGACY_fallbackIcon: IconEmbed
|
|
296
|
-
})
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
335
|
+
})
|
|
336
|
+
}];
|
|
337
|
+
var switchFromBlockToInline = {
|
|
338
|
+
id: 'media-block-to-inline-toolbar-item',
|
|
339
|
+
testId: 'media-inline-to-block-dropdown',
|
|
340
|
+
type: 'dropdown',
|
|
341
|
+
options: _options2,
|
|
342
|
+
title: intl.formatMessage(messages.sizeOptions),
|
|
343
|
+
icon: function icon() {
|
|
344
|
+
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
345
|
+
color: "currentColor",
|
|
346
|
+
spacing: "spacious",
|
|
347
|
+
label: intl.formatMessage(messages.sizeOptions),
|
|
348
|
+
LEGACY_size: "medium",
|
|
349
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
350
|
+
});
|
|
351
|
+
}
|
|
352
|
+
};
|
|
353
|
+
toolbarButtons.push(switchFromBlockToInline, {
|
|
354
|
+
type: 'separator'
|
|
355
|
+
});
|
|
356
|
+
}
|
|
306
357
|
}
|
|
307
358
|
}
|
|
308
359
|
|
|
@@ -363,11 +414,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
363
414
|
}
|
|
364
415
|
},
|
|
365
416
|
onSubmit: function onSubmit(_ref3) {
|
|
366
|
-
var _pluginInjectionApi$
|
|
417
|
+
var _pluginInjectionApi$a6;
|
|
367
418
|
var width = _ref3.width,
|
|
368
419
|
validation = _ref3.validation;
|
|
369
420
|
var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
370
|
-
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
421
|
+
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
|
|
371
422
|
},
|
|
372
423
|
onMigrate: function onMigrate() {
|
|
373
424
|
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
|
|
@@ -429,10 +480,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
429
480
|
};
|
|
430
481
|
var openLink = function openLink() {
|
|
431
482
|
if (editorView) {
|
|
432
|
-
var _pluginInjectionApi$
|
|
483
|
+
var _pluginInjectionApi$a7;
|
|
433
484
|
var tr = editorView.state.tr,
|
|
434
485
|
dispatch = editorView.dispatch;
|
|
435
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
486
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
|
|
436
487
|
eventType: EVENT_TYPE.TRACK,
|
|
437
488
|
action: ACTION.VISITED,
|
|
438
489
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -504,8 +555,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
504
555
|
});
|
|
505
556
|
}
|
|
506
557
|
if (allowAltTextOnImages) {
|
|
507
|
-
var _pluginInjectionApi$
|
|
508
|
-
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
558
|
+
var _pluginInjectionApi$a8;
|
|
559
|
+
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
|
|
509
560
|
type: 'separator'
|
|
510
561
|
});
|
|
511
562
|
}
|
|
@@ -526,12 +577,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
526
577
|
supportsViewMode: false
|
|
527
578
|
};
|
|
528
579
|
if (!editorExperiment('platform_editor_controls', 'control')) {
|
|
529
|
-
toolbarButtons.push(removeButton);
|
|
530
|
-
toolbarButtons.push({
|
|
531
|
-
type: 'separator',
|
|
532
|
-
supportsViewMode: false
|
|
533
|
-
});
|
|
534
|
-
|
|
535
580
|
// Preview Support
|
|
536
581
|
if (allowAdvancedToolBarOptions && allowImagePreview) {
|
|
537
582
|
var _mediaNode$attrs2;
|
|
@@ -559,7 +604,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
559
604
|
});
|
|
560
605
|
}
|
|
561
606
|
}
|
|
562
|
-
toolbarButtons.push({
|
|
607
|
+
isViewOnly && toolbarButtons.push({
|
|
563
608
|
type: 'copy-button',
|
|
564
609
|
items: [{
|
|
565
610
|
state: state,
|
|
@@ -567,8 +612,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
567
612
|
nodeType: mediaSingle
|
|
568
613
|
}],
|
|
569
614
|
supportsViewMode: true
|
|
570
|
-
}
|
|
571
|
-
toolbarButtons.push({
|
|
615
|
+
}, {
|
|
572
616
|
type: 'separator',
|
|
573
617
|
supportsViewMode: true
|
|
574
618
|
});
|
|
@@ -654,7 +698,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
654
698
|
selectedNodeType = state.selection.node.type;
|
|
655
699
|
}
|
|
656
700
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
657
|
-
var _pluginInjectionApi$
|
|
701
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
|
|
658
702
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
659
703
|
baseToolbar.getDomRef = function () {
|
|
660
704
|
var _mediaPluginState$ele;
|
|
@@ -663,7 +707,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
663
707
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
664
708
|
return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
|
|
665
709
|
};
|
|
666
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
710
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
|
|
667
711
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
668
712
|
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
669
713
|
} else {
|
|
@@ -676,6 +720,43 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
676
720
|
};
|
|
677
721
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
678
722
|
}
|
|
723
|
+
if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
724
|
+
var _items;
|
|
725
|
+
var overflowMenuConfig = [{
|
|
726
|
+
type: 'separator',
|
|
727
|
+
supportsViewMode: true
|
|
728
|
+
}, {
|
|
729
|
+
type: 'overflow-dropdown',
|
|
730
|
+
options: [{
|
|
731
|
+
title: 'Resize',
|
|
732
|
+
onClick: function onClick() {
|
|
733
|
+
// TODO open resize dialog?
|
|
734
|
+
return true;
|
|
735
|
+
},
|
|
736
|
+
icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
|
|
737
|
+
label: "Resize"
|
|
738
|
+
})
|
|
739
|
+
}, {
|
|
740
|
+
type: 'separator'
|
|
741
|
+
}, {
|
|
742
|
+
title: 'Copy',
|
|
743
|
+
onClick: function onClick() {
|
|
744
|
+
// TODO replace with copy-button plugin
|
|
745
|
+
return true;
|
|
746
|
+
},
|
|
747
|
+
icon: /*#__PURE__*/React.createElement(CopyIcon, {
|
|
748
|
+
label: "Copy"
|
|
749
|
+
})
|
|
750
|
+
}, {
|
|
751
|
+
title: 'Delete',
|
|
752
|
+
onClick: remove,
|
|
753
|
+
icon: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
754
|
+
label: "Delete"
|
|
755
|
+
})
|
|
756
|
+
}]
|
|
757
|
+
}];
|
|
758
|
+
(_items = items).push.apply(_items, overflowMenuConfig);
|
|
759
|
+
}
|
|
679
760
|
|
|
680
761
|
// Ignored via go/ees005
|
|
681
762
|
// eslint-disable-next-line no-var
|
|
@@ -154,40 +154,91 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
154
154
|
type: 'separator'
|
|
155
155
|
});
|
|
156
156
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
157
|
+
|
|
158
|
+
// For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
|
|
159
|
+
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
160
|
+
inlineImageItems.push({
|
|
161
|
+
id: 'editor.media.convert.mediainline',
|
|
162
|
+
type: 'button',
|
|
163
|
+
title: mediaInlineImageTitle,
|
|
164
|
+
icon: function icon() {
|
|
165
|
+
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
166
|
+
color: "currentColor",
|
|
167
|
+
spacing: "spacious",
|
|
168
|
+
label: mediaInlineImageTitle,
|
|
169
|
+
LEGACY_size: "medium",
|
|
170
|
+
LEGACY_fallbackIcon: IconInline
|
|
171
|
+
});
|
|
172
|
+
},
|
|
173
|
+
onClick: function onClick() {
|
|
174
|
+
return true;
|
|
175
|
+
},
|
|
176
|
+
selected: true
|
|
177
|
+
}, {
|
|
178
|
+
id: 'editor.media.convert.mediasingle',
|
|
179
|
+
type: 'button',
|
|
180
|
+
title: mediaSingleTitle,
|
|
181
|
+
icon: function icon() {
|
|
182
|
+
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
183
|
+
color: "currentColor",
|
|
184
|
+
spacing: "spacious",
|
|
185
|
+
label: mediaSingleTitle,
|
|
186
|
+
LEGACY_size: "medium",
|
|
187
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
188
|
+
});
|
|
189
|
+
},
|
|
190
|
+
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
|
|
191
|
+
}, {
|
|
192
|
+
type: 'separator'
|
|
193
|
+
});
|
|
194
|
+
} else {
|
|
195
|
+
var _options = [{
|
|
196
|
+
id: 'editor.media.convert.mediainline',
|
|
197
|
+
title: mediaInlineImageTitle,
|
|
198
|
+
onClick: function onClick() {
|
|
199
|
+
return true;
|
|
200
|
+
},
|
|
201
|
+
selected: true,
|
|
202
|
+
disabled: false,
|
|
203
|
+
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
163
204
|
color: "currentColor",
|
|
164
205
|
spacing: "spacious",
|
|
165
206
|
label: mediaInlineImageTitle,
|
|
166
207
|
LEGACY_size: "medium",
|
|
167
208
|
LEGACY_fallbackIcon: IconInline
|
|
168
|
-
})
|
|
169
|
-
},
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
}, {
|
|
175
|
-
id: 'editor.media.convert.mediasingle',
|
|
176
|
-
type: 'button',
|
|
177
|
-
title: mediaSingleTitle,
|
|
178
|
-
icon: function icon() {
|
|
179
|
-
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
209
|
+
})
|
|
210
|
+
}, {
|
|
211
|
+
id: 'editor.media.convert.mediasingle',
|
|
212
|
+
title: mediaSingleTitle,
|
|
213
|
+
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
|
|
214
|
+
icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
180
215
|
color: "currentColor",
|
|
181
216
|
spacing: "spacious",
|
|
182
217
|
label: mediaSingleTitle,
|
|
183
218
|
LEGACY_size: "medium",
|
|
184
219
|
LEGACY_fallbackIcon: IconEmbed
|
|
185
|
-
})
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
220
|
+
})
|
|
221
|
+
}];
|
|
222
|
+
var switchFromInlineToBlock = {
|
|
223
|
+
id: 'media-inline-to-block-toolbar-item',
|
|
224
|
+
testId: 'media-inline-to-block-dropdown',
|
|
225
|
+
type: 'dropdown',
|
|
226
|
+
options: _options,
|
|
227
|
+
title: intl.formatMessage(messages.sizeOptions),
|
|
228
|
+
icon: function icon() {
|
|
229
|
+
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
230
|
+
color: "currentColor",
|
|
231
|
+
spacing: "spacious",
|
|
232
|
+
label: mediaInlineImageTitle,
|
|
233
|
+
LEGACY_size: "medium",
|
|
234
|
+
LEGACY_fallbackIcon: IconInline
|
|
235
|
+
});
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
inlineImageItems.push(switchFromInlineToBlock, {
|
|
239
|
+
type: 'separator'
|
|
240
|
+
});
|
|
241
|
+
}
|
|
191
242
|
|
|
192
243
|
// TODO: editor controls move to overflow menu
|
|
193
244
|
if (editorExperiment('platform_editor_controls', 'control')) {
|