@atlaskit/editor-plugin-media 4.1.0 → 4.1.2
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 +18 -0
- package/dist/cjs/nodeviews/lazy-media-group.js +1 -3
- package/dist/cjs/nodeviews/lazy-media-inline.js +1 -3
- package/dist/cjs/nodeviews/mediaNodeView/index.js +1 -2
- package/dist/cjs/nodeviews/mediaSingle.js +2 -3
- package/dist/cjs/pm-plugins/pixel-resizing/ui/pixel-entry.js +1 -12
- package/dist/cjs/ui/MediaLinkingToolbar.js +2 -3
- package/dist/cjs/ui/toolbar/index.js +12 -55
- package/dist/cjs/ui/toolbar/mediaInline.js +1 -43
- package/dist/es2019/nodeviews/lazy-media-group.js +1 -3
- package/dist/es2019/nodeviews/lazy-media-inline.js +1 -3
- package/dist/es2019/nodeviews/mediaNodeView/index.js +1 -2
- package/dist/es2019/nodeviews/mediaSingle.js +1 -2
- package/dist/es2019/pm-plugins/pixel-resizing/ui/pixel-entry.js +1 -12
- package/dist/es2019/ui/MediaLinkingToolbar.js +2 -3
- package/dist/es2019/ui/toolbar/index.js +12 -53
- package/dist/es2019/ui/toolbar/mediaInline.js +1 -41
- package/dist/esm/nodeviews/lazy-media-group.js +1 -3
- package/dist/esm/nodeviews/lazy-media-inline.js +1 -3
- package/dist/esm/nodeviews/mediaNodeView/index.js +1 -2
- package/dist/esm/nodeviews/mediaSingle.js +2 -3
- package/dist/esm/pm-plugins/pixel-resizing/ui/pixel-entry.js +1 -12
- package/dist/esm/ui/MediaLinkingToolbar.js +2 -3
- package/dist/esm/ui/toolbar/index.js +12 -55
- package/dist/esm/ui/toolbar/mediaInline.js +1 -43
- package/package.json +6 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 4.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#173895](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173895)
|
|
8
|
+
[`6e123631d7c26`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e123631d7c26) -
|
|
9
|
+
Clean up platform_editor_interaction_api_refactor
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 4.1.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#174513](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/174513)
|
|
17
|
+
[`9190f78c5c704`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9190f78c5c704) -
|
|
18
|
+
Remove platform_editor_exp_disable_lnv experiment key.
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 4.1.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
|
@@ -13,9 +13,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
13
13
|
var lazyMediaGroupView = exports.lazyMediaGroupView = function lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory) {
|
|
14
14
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
15
15
|
var api = arguments.length > 4 ? arguments[4] : undefined;
|
|
16
|
-
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)
|
|
17
|
-
exposure: true
|
|
18
|
-
})) {
|
|
16
|
+
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
|
|
19
17
|
return (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
20
18
|
}
|
|
21
19
|
return (0, _lazyNodeView.withLazyLoading)({
|
|
@@ -11,9 +11,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
|
11
11
|
var _mediaInline = require("./mediaInline");
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
13
13
|
var lazyMediaInlineView = exports.lazyMediaInlineView = function lazyMediaInlineView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
|
|
14
|
-
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)
|
|
15
|
-
exposure: true
|
|
16
|
-
})) {
|
|
14
|
+
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
|
|
17
15
|
return (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent);
|
|
18
16
|
}
|
|
19
17
|
return (0, _lazyNodeView.withLazyLoading)({
|
|
@@ -20,7 +20,6 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
|
20
20
|
var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
|
|
21
21
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
22
22
|
var _mediaClient = require("@atlaskit/media-client");
|
|
23
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
24
23
|
var _helpers = require("../../pm-plugins/commands/helpers");
|
|
25
24
|
var _mediaCommon = require("../../pm-plugins/utils/media-common");
|
|
26
25
|
var _media = _interopRequireDefault(require("./media"));
|
|
@@ -121,7 +120,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
121
120
|
width: width,
|
|
122
121
|
height: height
|
|
123
122
|
};
|
|
124
|
-
var isSelectedAndInteracted = _this.nodeInsideSelection() &&
|
|
123
|
+
var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
|
|
125
124
|
return /*#__PURE__*/_react.default.createElement(_media.default, {
|
|
126
125
|
view: _this.view,
|
|
127
126
|
node: _this.node,
|
|
@@ -89,14 +89,13 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref) {
|
|
|
89
89
|
lineLength = _useSharedState.lineLength,
|
|
90
90
|
editorDisabled = _useSharedState.editorDisabled,
|
|
91
91
|
viewMode = _useSharedState.viewMode;
|
|
92
|
-
var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
|
|
93
92
|
var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
|
|
94
93
|
var mediaProvider = (0, _react.useMemo)(function () {
|
|
95
94
|
return mediaProviderPromise ? Promise.resolve(mediaProviderPromise) : undefined;
|
|
96
95
|
}, [mediaProviderPromise]);
|
|
97
96
|
var isSelectedAndInteracted = (0, _react.useCallback)(function () {
|
|
98
|
-
return Boolean(selected() &&
|
|
99
|
-
}, [
|
|
97
|
+
return Boolean(selected() && interactionState !== 'hasNotHadInteraction');
|
|
98
|
+
}, [interactionState, selected]);
|
|
100
99
|
return (0, _react2.jsx)(_mediaSingleNext.MediaSingleNodeNext, {
|
|
101
100
|
width: width || 0,
|
|
102
101
|
lineLength: lineLength || 0,
|
|
@@ -15,7 +15,6 @@ var _new = require("@atlaskit/button/new");
|
|
|
15
15
|
var _media = require("@atlaskit/editor-common/media");
|
|
16
16
|
var _form = _interopRequireWildcard(require("@atlaskit/form"));
|
|
17
17
|
var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
|
|
18
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
18
|
var _primitives = require("@atlaskit/primitives");
|
|
20
19
|
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
|
|
21
20
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
@@ -312,16 +311,6 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
|
|
|
312
311
|
}, shouldSetFocus);
|
|
313
312
|
}
|
|
314
313
|
}, [computedWidth, computedHeight, handleCloseAndSave]);
|
|
315
|
-
var getButtonKeyDownHandler = function getButtonKeyDownHandler() {
|
|
316
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
317
|
-
if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
|
|
318
|
-
return handleKeyDown;
|
|
319
|
-
} else if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
|
|
320
|
-
return handleCloseButtonKeyDown;
|
|
321
|
-
} else {
|
|
322
|
-
return undefined;
|
|
323
|
-
}
|
|
324
|
-
};
|
|
325
314
|
return (0, _react2.jsx)(_primitives.Box, {
|
|
326
315
|
xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
|
|
327
316
|
}, (0, _react2.jsx)(_primitives.Inline, {
|
|
@@ -389,6 +378,6 @@ var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEn
|
|
|
389
378
|
inputHeight: computedHeight
|
|
390
379
|
});
|
|
391
380
|
},
|
|
392
|
-
onKeyDown:
|
|
381
|
+
onKeyDown: handleCloseButtonKeyDown
|
|
393
382
|
}))));
|
|
394
383
|
};
|
|
@@ -22,7 +22,6 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
22
22
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
23
23
|
var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-left--chevron-left-large"));
|
|
24
24
|
var _linkBrokenEditorUnlink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-broken--editor-unlink"));
|
|
25
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
26
25
|
var _colors = require("@atlaskit/theme/colors");
|
|
27
26
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
28
27
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
@@ -135,7 +134,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
135
134
|
});
|
|
136
135
|
},
|
|
137
136
|
onKeyDown: function onKeyDown(event) {
|
|
138
|
-
if (event.key === 'Enter' || event.key === ' '
|
|
137
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
139
138
|
event.preventDefault();
|
|
140
139
|
_this.handleOnBack({
|
|
141
140
|
url: value,
|
|
@@ -178,7 +177,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
178
177
|
return _this.handleUnlink();
|
|
179
178
|
},
|
|
180
179
|
onKeyDown: function onKeyDown(event) {
|
|
181
|
-
if (event.key === 'Enter' || event.key === ' '
|
|
180
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
182
181
|
event.preventDefault();
|
|
183
182
|
_this.handleUnlink(true);
|
|
184
183
|
}
|
|
@@ -426,50 +426,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
426
426
|
type: 'separator'
|
|
427
427
|
});
|
|
428
428
|
} else {
|
|
429
|
-
var
|
|
430
|
-
var inlineTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
431
|
-
var _options2 = [{
|
|
432
|
-
id: 'editor.media.convert.mediainline',
|
|
433
|
-
title: inlineTitle,
|
|
434
|
-
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions),
|
|
435
|
-
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
436
|
-
color: "currentColor",
|
|
437
|
-
spacing: "spacious",
|
|
438
|
-
label: ""
|
|
439
|
-
}),
|
|
440
|
-
tooltip: hasCaption ? inlineSwitcherTitle : undefined
|
|
441
|
-
}, {
|
|
442
|
-
id: 'editor.media.convert.mediasingle',
|
|
443
|
-
title: floatingSwitcherTitle,
|
|
444
|
-
selected: true,
|
|
445
|
-
onClick: function onClick() {
|
|
446
|
-
return true;
|
|
447
|
-
},
|
|
448
|
-
icon: /*#__PURE__*/_react.default.createElement(_maximize.default, {
|
|
449
|
-
color: "currentColor",
|
|
450
|
-
spacing: "spacious",
|
|
451
|
-
label: ""
|
|
452
|
-
})
|
|
453
|
-
}];
|
|
454
|
-
var switchFromBlockToInline;
|
|
455
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_11')) {
|
|
456
|
-
switchFromBlockToInline = (0, _utils2.getMediaSingleAndMediaInlineSwitcherDropdown)('block', intl, pluginInjectionApi, hasCaption);
|
|
457
|
-
} else {
|
|
458
|
-
switchFromBlockToInline = {
|
|
459
|
-
id: 'media-block-to-inline-toolbar-item',
|
|
460
|
-
testId: 'media-inline-to-block-dropdown',
|
|
461
|
-
type: 'dropdown',
|
|
462
|
-
options: _options2,
|
|
463
|
-
title: intl.formatMessage(_mediaUi.messages.sizeOptions),
|
|
464
|
-
icon: function icon() {
|
|
465
|
-
return /*#__PURE__*/_react.default.createElement(_maximize.default, {
|
|
466
|
-
color: "currentColor",
|
|
467
|
-
spacing: "spacious",
|
|
468
|
-
label: intl.formatMessage(_mediaUi.messages.sizeOptions)
|
|
469
|
-
});
|
|
470
|
-
}
|
|
471
|
-
};
|
|
472
|
-
}
|
|
429
|
+
var switchFromBlockToInline = (0, _utils2.getMediaSingleAndMediaInlineSwitcherDropdown)('block', intl, pluginInjectionApi, hasCaption);
|
|
473
430
|
toolbarButtons.push(switchFromBlockToInline, {
|
|
474
431
|
type: 'separator',
|
|
475
432
|
fullHeight: true
|
|
@@ -551,10 +508,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
551
508
|
};
|
|
552
509
|
var openLink = function openLink() {
|
|
553
510
|
if (editorView) {
|
|
554
|
-
var _pluginInjectionApi$
|
|
511
|
+
var _pluginInjectionApi$a6;
|
|
555
512
|
var tr = editorView.state.tr,
|
|
556
513
|
dispatch = editorView.dispatch;
|
|
557
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
514
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
|
|
558
515
|
eventType: _analytics.EVENT_TYPE.TRACK,
|
|
559
516
|
action: _analytics.ACTION.VISITED,
|
|
560
517
|
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
|
|
@@ -627,10 +584,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
627
584
|
});
|
|
628
585
|
}
|
|
629
586
|
if (!isEditorControlsEnabled) {
|
|
630
|
-
var _pluginInjectionApi$
|
|
587
|
+
var _pluginInjectionApi$a8;
|
|
631
588
|
if (allowAltTextOnImages) {
|
|
632
|
-
var _pluginInjectionApi$
|
|
633
|
-
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
589
|
+
var _pluginInjectionApi$a7;
|
|
590
|
+
toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
|
|
634
591
|
type: 'separator'
|
|
635
592
|
});
|
|
636
593
|
}
|
|
@@ -645,7 +602,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
645
602
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
|
|
646
603
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
|
|
647
604
|
title: intl.formatMessage(_messages.default.remove),
|
|
648
|
-
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
605
|
+
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions),
|
|
649
606
|
testId: 'media-toolbar-remove-button',
|
|
650
607
|
supportsViewMode: false
|
|
651
608
|
};
|
|
@@ -809,7 +766,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
809
766
|
selectedNodeType = state.selection.node.type;
|
|
810
767
|
}
|
|
811
768
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
812
|
-
var _pluginInjectionApi$
|
|
769
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
|
|
813
770
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
814
771
|
baseToolbar.getDomRef = function () {
|
|
815
772
|
var _mediaPluginState$ele2;
|
|
@@ -818,7 +775,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
818
775
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
819
776
|
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
|
|
820
777
|
};
|
|
821
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
778
|
+
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);
|
|
822
779
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
823
780
|
items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
824
781
|
} else {
|
|
@@ -832,9 +789,9 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
832
789
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
833
790
|
}
|
|
834
791
|
if (!mediaPluginState.isResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
835
|
-
var _pluginInjectionApi$
|
|
792
|
+
var _pluginInjectionApi$a0, _pluginInjectionApi$a1;
|
|
836
793
|
(0, _utils2.updateToFullHeightSeparator)(items);
|
|
837
|
-
var customOptions = [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), (0, _toConsumableArray2.default)((0, _altText2.getAltTextDropdownOption)(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
794
|
+
var customOptions = [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), (0, _toConsumableArray2.default)((0, _altText2.getAltTextDropdownOption)(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a0 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a0 === void 0 ? void 0 : _pluginInjectionApi$a0.actions)), (0, _toConsumableArray2.default)((0, _pixelResizing2.getResizeDropdownOption)(options, state, intl.formatMessage, selectedNodeType)));
|
|
838
795
|
if (customOptions.length) {
|
|
839
796
|
customOptions.push({
|
|
840
797
|
type: 'separator'
|
|
@@ -865,7 +822,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
|
|
|
865
822
|
})
|
|
866
823
|
}, hoverDecorationProps(nodeType, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
|
|
867
824
|
title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(_messages.default.delete),
|
|
868
|
-
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
825
|
+
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions, selectedNodeType),
|
|
869
826
|
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
|
|
870
827
|
label: ""
|
|
871
828
|
})
|
|
@@ -19,7 +19,6 @@ var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
|
|
|
19
19
|
var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
|
|
20
20
|
var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
|
|
21
21
|
var _mediaUi = require("@atlaskit/media-ui");
|
|
22
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
22
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
24
23
|
var _linking = require("../../pm-plugins/commands/linking");
|
|
25
24
|
var _linking2 = require("../../pm-plugins/linking");
|
|
@@ -310,48 +309,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
310
309
|
supportsViewMode: true
|
|
311
310
|
});
|
|
312
311
|
} else {
|
|
313
|
-
var
|
|
314
|
-
id: 'editor.media.convert.mediainline',
|
|
315
|
-
title: mediaInlineImageTitle,
|
|
316
|
-
onClick: function onClick() {
|
|
317
|
-
return true;
|
|
318
|
-
},
|
|
319
|
-
selected: true,
|
|
320
|
-
disabled: false,
|
|
321
|
-
icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
322
|
-
color: "currentColor",
|
|
323
|
-
spacing: "spacious",
|
|
324
|
-
label: ""
|
|
325
|
-
})
|
|
326
|
-
}, {
|
|
327
|
-
id: 'editor.media.convert.mediasingle',
|
|
328
|
-
title: mediaSingleTitle,
|
|
329
|
-
onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState),
|
|
330
|
-
icon: /*#__PURE__*/_react.default.createElement(_maximize.default, {
|
|
331
|
-
color: "currentColor",
|
|
332
|
-
spacing: "spacious",
|
|
333
|
-
label: ""
|
|
334
|
-
})
|
|
335
|
-
}];
|
|
336
|
-
var switchFromInlineToBlock;
|
|
337
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_11')) {
|
|
338
|
-
switchFromInlineToBlock = (0, _utils.getMediaSingleAndMediaInlineSwitcherDropdown)('inline', intl, pluginInjectionApi);
|
|
339
|
-
} else {
|
|
340
|
-
switchFromInlineToBlock = {
|
|
341
|
-
id: 'media-inline-to-block-toolbar-item',
|
|
342
|
-
testId: 'media-inline-to-block-dropdown',
|
|
343
|
-
type: 'dropdown',
|
|
344
|
-
options: _options2,
|
|
345
|
-
title: intl.formatMessage(_mediaUi.messages.sizeOptions),
|
|
346
|
-
icon: function icon() {
|
|
347
|
-
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
348
|
-
color: "currentColor",
|
|
349
|
-
spacing: "spacious",
|
|
350
|
-
label: mediaInlineImageTitle
|
|
351
|
-
});
|
|
352
|
-
}
|
|
353
|
-
};
|
|
354
|
-
}
|
|
312
|
+
var switchFromInlineToBlock = (0, _utils.getMediaSingleAndMediaInlineSwitcherDropdown)('inline', intl, pluginInjectionApi);
|
|
355
313
|
inlineImageItems.push(switchFromInlineToBlock, {
|
|
356
314
|
type: 'separator',
|
|
357
315
|
fullHeight: true
|
|
@@ -2,9 +2,7 @@ import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
|
2
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
import { ReactMediaGroupNode } from './mediaGroup';
|
|
4
4
|
export const lazyMediaGroupView = (portalProviderAPI, eventDispatcher, providerFactory, options = {}, api) => {
|
|
5
|
-
if (editorExperiment('platform_editor_exp_lazy_node_views', false)
|
|
6
|
-
exposure: true
|
|
7
|
-
})) {
|
|
5
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
|
|
8
6
|
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
9
7
|
}
|
|
10
8
|
return withLazyLoading({
|
|
@@ -2,9 +2,7 @@ import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
|
2
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
import { ReactMediaInlineNode } from './mediaInline';
|
|
4
4
|
export const lazyMediaInlineView = (portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) => {
|
|
5
|
-
if (editorExperiment('platform_editor_exp_lazy_node_views', false)
|
|
6
|
-
exposure: true
|
|
7
|
-
})) {
|
|
5
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
|
|
8
6
|
return ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent);
|
|
9
7
|
}
|
|
10
8
|
return withLazyLoading({
|
|
@@ -6,7 +6,6 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
|
6
6
|
import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
|
|
7
7
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
8
8
|
import { getAttrsFromUrl } from '@atlaskit/media-client';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
|
|
11
10
|
import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
|
|
12
11
|
// Ignored via go/ees005
|
|
@@ -109,7 +108,7 @@ class MediaNodeView extends SelectionBasedNodeView {
|
|
|
109
108
|
width,
|
|
110
109
|
height
|
|
111
110
|
};
|
|
112
|
-
const isSelectedAndInteracted = this.nodeInsideSelection() &&
|
|
111
|
+
const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
|
|
113
112
|
return /*#__PURE__*/React.createElement(MediaNode, {
|
|
114
113
|
view: this.view,
|
|
115
114
|
node: this.node,
|
|
@@ -79,10 +79,9 @@ const MediaSingleNodeWrapper = ({
|
|
|
79
79
|
editorDisabled,
|
|
80
80
|
viewMode
|
|
81
81
|
} = useSharedState(pluginInjectionApi);
|
|
82
|
-
const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
|
|
83
82
|
const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
|
|
84
83
|
const mediaProvider = useMemo(() => mediaProviderPromise ? Promise.resolve(mediaProviderPromise) : undefined, [mediaProviderPromise]);
|
|
85
|
-
const isSelectedAndInteracted = useCallback(() => Boolean(selected() &&
|
|
84
|
+
const isSelectedAndInteracted = useCallback(() => Boolean(selected() && interactionState !== 'hasNotHadInteraction'), [interactionState, selected]);
|
|
86
85
|
return jsx(MediaSingleNodeNext, {
|
|
87
86
|
width: width || 0,
|
|
88
87
|
lineLength: lineLength || 0,
|
|
@@ -12,7 +12,6 @@ import { IconButton } from '@atlaskit/button/new';
|
|
|
12
12
|
import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
|
|
13
13
|
import Form, { Field } from '@atlaskit/form';
|
|
14
14
|
import CloseIcon from '@atlaskit/icon/core/close';
|
|
15
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
15
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
|
|
17
16
|
import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
|
|
18
17
|
import Textfield from '@atlaskit/textfield';
|
|
@@ -294,16 +293,6 @@ export const PixelEntryComponentNext = ({
|
|
|
294
293
|
}, shouldSetFocus);
|
|
295
294
|
}
|
|
296
295
|
}, [computedWidth, computedHeight, handleCloseAndSave]);
|
|
297
|
-
const getButtonKeyDownHandler = () => {
|
|
298
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
299
|
-
if (!fg('platform_editor_controls_patch_9')) {
|
|
300
|
-
return handleKeyDown;
|
|
301
|
-
} else if (fg('platform_editor_controls_patch_9')) {
|
|
302
|
-
return handleCloseButtonKeyDown;
|
|
303
|
-
} else {
|
|
304
|
-
return undefined;
|
|
305
|
-
}
|
|
306
|
-
};
|
|
307
296
|
return jsx(Box, {
|
|
308
297
|
xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
|
|
309
298
|
}, jsx(Inline, {
|
|
@@ -369,6 +358,6 @@ export const PixelEntryComponentNext = ({
|
|
|
369
358
|
inputHeight: computedHeight
|
|
370
359
|
});
|
|
371
360
|
},
|
|
372
|
-
onKeyDown:
|
|
361
|
+
onKeyDown: handleCloseButtonKeyDown
|
|
373
362
|
}))));
|
|
374
363
|
};
|
|
@@ -17,7 +17,6 @@ PanelTextInput } from '@atlaskit/editor-common/ui';
|
|
|
17
17
|
import { normalizeUrl } from '@atlaskit/editor-common/utils';
|
|
18
18
|
import ChevronLeftLargeIcon from '@atlaskit/icon/core/migration/chevron-left--chevron-left-large';
|
|
19
19
|
import EditorUnlinkIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
|
|
20
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
21
20
|
import { R400 } from '@atlaskit/theme/colors';
|
|
22
21
|
const validationWrapper = css({
|
|
23
22
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -128,7 +127,7 @@ class LinkAddToolbar extends React.PureComponent {
|
|
|
128
127
|
inputMethod: currentInputMethod
|
|
129
128
|
}),
|
|
130
129
|
onKeyDown: event => {
|
|
131
|
-
if (event.key === 'Enter' || event.key === ' '
|
|
130
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
132
131
|
event.preventDefault();
|
|
133
132
|
this.handleOnBack({
|
|
134
133
|
url: value,
|
|
@@ -169,7 +168,7 @@ class LinkAddToolbar extends React.PureComponent {
|
|
|
169
168
|
}),
|
|
170
169
|
onClick: () => this.handleUnlink(),
|
|
171
170
|
onKeyDown: event => {
|
|
172
|
-
if (event.key === 'Enter' || event.key === ' '
|
|
171
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
173
172
|
event.preventDefault();
|
|
174
173
|
this.handleUnlink(true);
|
|
175
174
|
}
|
|
@@ -414,48 +414,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
414
414
|
type: 'separator'
|
|
415
415
|
});
|
|
416
416
|
} else {
|
|
417
|
-
|
|
418
|
-
const inlineTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
419
|
-
const options = [{
|
|
420
|
-
id: 'editor.media.convert.mediainline',
|
|
421
|
-
title: inlineTitle,
|
|
422
|
-
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions),
|
|
423
|
-
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
424
|
-
color: "currentColor",
|
|
425
|
-
spacing: "spacious",
|
|
426
|
-
label: ""
|
|
427
|
-
}),
|
|
428
|
-
tooltip: hasCaption ? inlineSwitcherTitle : undefined
|
|
429
|
-
}, {
|
|
430
|
-
id: 'editor.media.convert.mediasingle',
|
|
431
|
-
title: floatingSwitcherTitle,
|
|
432
|
-
selected: true,
|
|
433
|
-
onClick: () => {
|
|
434
|
-
return true;
|
|
435
|
-
},
|
|
436
|
-
icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
437
|
-
color: "currentColor",
|
|
438
|
-
spacing: "spacious",
|
|
439
|
-
label: ""
|
|
440
|
-
})
|
|
441
|
-
}];
|
|
442
|
-
let switchFromBlockToInline;
|
|
443
|
-
if (fg('platform_editor_controls_patch_11')) {
|
|
444
|
-
switchFromBlockToInline = getMediaSingleAndMediaInlineSwitcherDropdown('block', intl, pluginInjectionApi, hasCaption);
|
|
445
|
-
} else {
|
|
446
|
-
switchFromBlockToInline = {
|
|
447
|
-
id: 'media-block-to-inline-toolbar-item',
|
|
448
|
-
testId: 'media-inline-to-block-dropdown',
|
|
449
|
-
type: 'dropdown',
|
|
450
|
-
options: options,
|
|
451
|
-
title: intl.formatMessage(messages.sizeOptions),
|
|
452
|
-
icon: () => /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
453
|
-
color: "currentColor",
|
|
454
|
-
spacing: "spacious",
|
|
455
|
-
label: intl.formatMessage(messages.sizeOptions)
|
|
456
|
-
})
|
|
457
|
-
};
|
|
458
|
-
}
|
|
417
|
+
const switchFromBlockToInline = getMediaSingleAndMediaInlineSwitcherDropdown('block', intl, pluginInjectionApi, hasCaption);
|
|
459
418
|
toolbarButtons.push(switchFromBlockToInline, {
|
|
460
419
|
type: 'separator',
|
|
461
420
|
fullHeight: true
|
|
@@ -543,14 +502,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
543
502
|
};
|
|
544
503
|
const openLink = () => {
|
|
545
504
|
if (editorView) {
|
|
546
|
-
var _pluginInjectionApi$
|
|
505
|
+
var _pluginInjectionApi$a6;
|
|
547
506
|
const {
|
|
548
507
|
state: {
|
|
549
508
|
tr
|
|
550
509
|
},
|
|
551
510
|
dispatch
|
|
552
511
|
} = editorView;
|
|
553
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
512
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
|
|
554
513
|
eventType: EVENT_TYPE.TRACK,
|
|
555
514
|
action: ACTION.VISITED,
|
|
556
515
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -623,10 +582,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
623
582
|
});
|
|
624
583
|
}
|
|
625
584
|
if (!isEditorControlsEnabled) {
|
|
626
|
-
var _pluginInjectionApi$
|
|
585
|
+
var _pluginInjectionApi$a8;
|
|
627
586
|
if (allowAltTextOnImages) {
|
|
628
|
-
var _pluginInjectionApi$
|
|
629
|
-
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
587
|
+
var _pluginInjectionApi$a7;
|
|
588
|
+
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
|
|
630
589
|
type: 'separator'
|
|
631
590
|
});
|
|
632
591
|
}
|
|
@@ -641,7 +600,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
641
600
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
|
|
642
601
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
|
|
643
602
|
title: intl.formatMessage(commonMessages.remove),
|
|
644
|
-
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
603
|
+
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions),
|
|
645
604
|
testId: 'media-toolbar-remove-button',
|
|
646
605
|
supportsViewMode: false
|
|
647
606
|
};
|
|
@@ -809,7 +768,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
809
768
|
selectedNodeType = state.selection.node.type;
|
|
810
769
|
}
|
|
811
770
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
812
|
-
var _pluginInjectionApi$
|
|
771
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
|
|
813
772
|
const mediaOffset = state.selection.$from.parentOffset + 1;
|
|
814
773
|
baseToolbar.getDomRef = () => {
|
|
815
774
|
var _mediaPluginState$ele2;
|
|
@@ -818,7 +777,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
818
777
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
819
778
|
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
|
|
820
779
|
};
|
|
821
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
780
|
+
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);
|
|
822
781
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
823
782
|
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
824
783
|
} else {
|
|
@@ -832,9 +791,9 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
832
791
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
833
792
|
}
|
|
834
793
|
if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
835
|
-
var _pluginInjectionApi$
|
|
794
|
+
var _pluginInjectionApi$a0, _pluginInjectionApi$a1;
|
|
836
795
|
updateToFullHeightSeparator(items);
|
|
837
|
-
const customOptions = [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), ...getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
796
|
+
const customOptions = [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), ...getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a0 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a0 === void 0 ? void 0 : _pluginInjectionApi$a0.actions), ...getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)];
|
|
838
797
|
if (customOptions.length) {
|
|
839
798
|
customOptions.push({
|
|
840
799
|
type: 'separator'
|
|
@@ -864,7 +823,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
864
823
|
...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
|
|
865
824
|
}, {
|
|
866
825
|
title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(commonMessages.delete),
|
|
867
|
-
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
826
|
+
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions, selectedNodeType),
|
|
868
827
|
icon: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
869
828
|
label: ""
|
|
870
829
|
}),
|
|
@@ -10,7 +10,6 @@ import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
|
10
10
|
import DownloadIcon from '@atlaskit/icon/core/migration/download';
|
|
11
11
|
import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
|
|
12
12
|
import { messages } from '@atlaskit/media-ui';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
14
|
import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
|
|
16
15
|
import { getMediaLinkingState } from '../../pm-plugins/linking';
|
|
@@ -302,46 +301,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
|
|
|
302
301
|
supportsViewMode: true
|
|
303
302
|
});
|
|
304
303
|
} else {
|
|
305
|
-
const
|
|
306
|
-
id: 'editor.media.convert.mediainline',
|
|
307
|
-
title: mediaInlineImageTitle,
|
|
308
|
-
onClick: () => {
|
|
309
|
-
return true;
|
|
310
|
-
},
|
|
311
|
-
selected: true,
|
|
312
|
-
disabled: false,
|
|
313
|
-
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
314
|
-
color: "currentColor",
|
|
315
|
-
spacing: "spacious",
|
|
316
|
-
label: ""
|
|
317
|
-
})
|
|
318
|
-
}, {
|
|
319
|
-
id: 'editor.media.convert.mediasingle',
|
|
320
|
-
title: mediaSingleTitle,
|
|
321
|
-
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
|
|
322
|
-
icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
323
|
-
color: "currentColor",
|
|
324
|
-
spacing: "spacious",
|
|
325
|
-
label: ""
|
|
326
|
-
})
|
|
327
|
-
}];
|
|
328
|
-
let switchFromInlineToBlock;
|
|
329
|
-
if (fg('platform_editor_controls_patch_11')) {
|
|
330
|
-
switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
|
|
331
|
-
} else {
|
|
332
|
-
switchFromInlineToBlock = {
|
|
333
|
-
id: 'media-inline-to-block-toolbar-item',
|
|
334
|
-
testId: 'media-inline-to-block-dropdown',
|
|
335
|
-
type: 'dropdown',
|
|
336
|
-
options: options,
|
|
337
|
-
title: intl.formatMessage(messages.sizeOptions),
|
|
338
|
-
icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
339
|
-
color: "currentColor",
|
|
340
|
-
spacing: "spacious",
|
|
341
|
-
label: mediaInlineImageTitle
|
|
342
|
-
})
|
|
343
|
-
};
|
|
344
|
-
}
|
|
304
|
+
const switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
|
|
345
305
|
inlineImageItems.push(switchFromInlineToBlock, {
|
|
346
306
|
type: 'separator',
|
|
347
307
|
fullHeight: true
|
|
@@ -4,9 +4,7 @@ import { ReactMediaGroupNode } from './mediaGroup';
|
|
|
4
4
|
export var lazyMediaGroupView = function lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory) {
|
|
5
5
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
6
6
|
var api = arguments.length > 4 ? arguments[4] : undefined;
|
|
7
|
-
if (editorExperiment('platform_editor_exp_lazy_node_views', false)
|
|
8
|
-
exposure: true
|
|
9
|
-
})) {
|
|
7
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
|
|
10
8
|
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
11
9
|
}
|
|
12
10
|
return withLazyLoading({
|
|
@@ -2,9 +2,7 @@ import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
|
2
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
import { ReactMediaInlineNode } from './mediaInline';
|
|
4
4
|
export var lazyMediaInlineView = function lazyMediaInlineView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
|
|
5
|
-
if (editorExperiment('platform_editor_exp_lazy_node_views', false)
|
|
6
|
-
exposure: true
|
|
7
|
-
})) {
|
|
5
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
|
|
8
6
|
return ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent);
|
|
9
7
|
}
|
|
10
8
|
return withLazyLoading({
|
|
@@ -19,7 +19,6 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
|
19
19
|
import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
|
|
20
20
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
21
21
|
import { getAttrsFromUrl } from '@atlaskit/media-client';
|
|
22
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
23
22
|
import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
|
|
24
23
|
import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
|
|
25
24
|
// Ignored via go/ees005
|
|
@@ -115,7 +114,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
115
114
|
width: width,
|
|
116
115
|
height: height
|
|
117
116
|
};
|
|
118
|
-
var isSelectedAndInteracted = _this.nodeInsideSelection() &&
|
|
117
|
+
var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
|
|
119
118
|
return /*#__PURE__*/React.createElement(MediaNode, {
|
|
120
119
|
view: _this.view,
|
|
121
120
|
node: _this.node,
|
|
@@ -85,14 +85,13 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref) {
|
|
|
85
85
|
lineLength = _useSharedState.lineLength,
|
|
86
86
|
editorDisabled = _useSharedState.editorDisabled,
|
|
87
87
|
viewMode = _useSharedState.viewMode;
|
|
88
|
-
var hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
|
|
89
88
|
var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
|
|
90
89
|
var mediaProvider = useMemo(function () {
|
|
91
90
|
return mediaProviderPromise ? Promise.resolve(mediaProviderPromise) : undefined;
|
|
92
91
|
}, [mediaProviderPromise]);
|
|
93
92
|
var isSelectedAndInteracted = useCallback(function () {
|
|
94
|
-
return Boolean(selected() &&
|
|
95
|
-
}, [
|
|
93
|
+
return Boolean(selected() && interactionState !== 'hasNotHadInteraction');
|
|
94
|
+
}, [interactionState, selected]);
|
|
96
95
|
return jsx(MediaSingleNodeNext, {
|
|
97
96
|
width: width || 0,
|
|
98
97
|
lineLength: lineLength || 0,
|
|
@@ -13,7 +13,6 @@ import { IconButton } from '@atlaskit/button/new';
|
|
|
13
13
|
import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
|
|
14
14
|
import Form, { Field } from '@atlaskit/form';
|
|
15
15
|
import CloseIcon from '@atlaskit/icon/core/close';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
16
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
|
|
18
17
|
import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
|
|
19
18
|
import Textfield from '@atlaskit/textfield';
|
|
@@ -300,16 +299,6 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
|
|
|
300
299
|
}, shouldSetFocus);
|
|
301
300
|
}
|
|
302
301
|
}, [computedWidth, computedHeight, handleCloseAndSave]);
|
|
303
|
-
var getButtonKeyDownHandler = function getButtonKeyDownHandler() {
|
|
304
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
305
|
-
if (!fg('platform_editor_controls_patch_9')) {
|
|
306
|
-
return handleKeyDown;
|
|
307
|
-
} else if (fg('platform_editor_controls_patch_9')) {
|
|
308
|
-
return handleCloseButtonKeyDown;
|
|
309
|
-
} else {
|
|
310
|
-
return undefined;
|
|
311
|
-
}
|
|
312
|
-
};
|
|
313
302
|
return jsx(Box, {
|
|
314
303
|
xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
|
|
315
304
|
}, jsx(Inline, {
|
|
@@ -377,6 +366,6 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
|
|
|
377
366
|
inputHeight: computedHeight
|
|
378
367
|
});
|
|
379
368
|
},
|
|
380
|
-
onKeyDown:
|
|
369
|
+
onKeyDown: handleCloseButtonKeyDown
|
|
381
370
|
}))));
|
|
382
371
|
};
|
|
@@ -24,7 +24,6 @@ PanelTextInput } from '@atlaskit/editor-common/ui';
|
|
|
24
24
|
import { normalizeUrl } from '@atlaskit/editor-common/utils';
|
|
25
25
|
import ChevronLeftLargeIcon from '@atlaskit/icon/core/migration/chevron-left--chevron-left-large';
|
|
26
26
|
import EditorUnlinkIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
|
|
27
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
28
27
|
import { R400 } from '@atlaskit/theme/colors';
|
|
29
28
|
var validationWrapper = css({
|
|
30
29
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -131,7 +130,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
131
130
|
});
|
|
132
131
|
},
|
|
133
132
|
onKeyDown: function onKeyDown(event) {
|
|
134
|
-
if (event.key === 'Enter' || event.key === ' '
|
|
133
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
135
134
|
event.preventDefault();
|
|
136
135
|
_this.handleOnBack({
|
|
137
136
|
url: value,
|
|
@@ -174,7 +173,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
174
173
|
return _this.handleUnlink();
|
|
175
174
|
},
|
|
176
175
|
onKeyDown: function onKeyDown(event) {
|
|
177
|
-
if (event.key === 'Enter' || event.key === ' '
|
|
176
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
178
177
|
event.preventDefault();
|
|
179
178
|
_this.handleUnlink(true);
|
|
180
179
|
}
|
|
@@ -417,50 +417,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
417
417
|
type: 'separator'
|
|
418
418
|
});
|
|
419
419
|
} else {
|
|
420
|
-
var
|
|
421
|
-
var inlineTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
|
|
422
|
-
var _options2 = [{
|
|
423
|
-
id: 'editor.media.convert.mediainline',
|
|
424
|
-
title: inlineTitle,
|
|
425
|
-
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions),
|
|
426
|
-
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
427
|
-
color: "currentColor",
|
|
428
|
-
spacing: "spacious",
|
|
429
|
-
label: ""
|
|
430
|
-
}),
|
|
431
|
-
tooltip: hasCaption ? inlineSwitcherTitle : undefined
|
|
432
|
-
}, {
|
|
433
|
-
id: 'editor.media.convert.mediasingle',
|
|
434
|
-
title: floatingSwitcherTitle,
|
|
435
|
-
selected: true,
|
|
436
|
-
onClick: function onClick() {
|
|
437
|
-
return true;
|
|
438
|
-
},
|
|
439
|
-
icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
440
|
-
color: "currentColor",
|
|
441
|
-
spacing: "spacious",
|
|
442
|
-
label: ""
|
|
443
|
-
})
|
|
444
|
-
}];
|
|
445
|
-
var switchFromBlockToInline;
|
|
446
|
-
if (fg('platform_editor_controls_patch_11')) {
|
|
447
|
-
switchFromBlockToInline = getMediaSingleAndMediaInlineSwitcherDropdown('block', intl, pluginInjectionApi, hasCaption);
|
|
448
|
-
} else {
|
|
449
|
-
switchFromBlockToInline = {
|
|
450
|
-
id: 'media-block-to-inline-toolbar-item',
|
|
451
|
-
testId: 'media-inline-to-block-dropdown',
|
|
452
|
-
type: 'dropdown',
|
|
453
|
-
options: _options2,
|
|
454
|
-
title: intl.formatMessage(messages.sizeOptions),
|
|
455
|
-
icon: function icon() {
|
|
456
|
-
return /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
457
|
-
color: "currentColor",
|
|
458
|
-
spacing: "spacious",
|
|
459
|
-
label: intl.formatMessage(messages.sizeOptions)
|
|
460
|
-
});
|
|
461
|
-
}
|
|
462
|
-
};
|
|
463
|
-
}
|
|
420
|
+
var switchFromBlockToInline = getMediaSingleAndMediaInlineSwitcherDropdown('block', intl, pluginInjectionApi, hasCaption);
|
|
464
421
|
toolbarButtons.push(switchFromBlockToInline, {
|
|
465
422
|
type: 'separator',
|
|
466
423
|
fullHeight: true
|
|
@@ -542,10 +499,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
542
499
|
};
|
|
543
500
|
var openLink = function openLink() {
|
|
544
501
|
if (editorView) {
|
|
545
|
-
var _pluginInjectionApi$
|
|
502
|
+
var _pluginInjectionApi$a6;
|
|
546
503
|
var tr = editorView.state.tr,
|
|
547
504
|
dispatch = editorView.dispatch;
|
|
548
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
505
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
|
|
549
506
|
eventType: EVENT_TYPE.TRACK,
|
|
550
507
|
action: ACTION.VISITED,
|
|
551
508
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -618,10 +575,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
618
575
|
});
|
|
619
576
|
}
|
|
620
577
|
if (!isEditorControlsEnabled) {
|
|
621
|
-
var _pluginInjectionApi$
|
|
578
|
+
var _pluginInjectionApi$a8;
|
|
622
579
|
if (allowAltTextOnImages) {
|
|
623
|
-
var _pluginInjectionApi$
|
|
624
|
-
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
580
|
+
var _pluginInjectionApi$a7;
|
|
581
|
+
toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
|
|
625
582
|
type: 'separator'
|
|
626
583
|
});
|
|
627
584
|
}
|
|
@@ -636,7 +593,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
636
593
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
|
|
637
594
|
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
|
|
638
595
|
title: intl.formatMessage(commonMessages.remove),
|
|
639
|
-
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
596
|
+
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions),
|
|
640
597
|
testId: 'media-toolbar-remove-button',
|
|
641
598
|
supportsViewMode: false
|
|
642
599
|
};
|
|
@@ -800,7 +757,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
800
757
|
selectedNodeType = state.selection.node.type;
|
|
801
758
|
}
|
|
802
759
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
803
|
-
var _pluginInjectionApi$
|
|
760
|
+
var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
|
|
804
761
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
805
762
|
baseToolbar.getDomRef = function () {
|
|
806
763
|
var _mediaPluginState$ele2;
|
|
@@ -809,7 +766,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
809
766
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
810
767
|
return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
|
|
811
768
|
};
|
|
812
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
769
|
+
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);
|
|
813
770
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
814
771
|
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
|
|
815
772
|
} else {
|
|
@@ -823,9 +780,9 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
823
780
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
|
|
824
781
|
}
|
|
825
782
|
if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
826
|
-
var _pluginInjectionApi$
|
|
783
|
+
var _pluginInjectionApi$a0, _pluginInjectionApi$a1;
|
|
827
784
|
updateToFullHeightSeparator(items);
|
|
828
|
-
var customOptions = [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), _toConsumableArray(getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
785
|
+
var customOptions = [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), _toConsumableArray(getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a0 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a0 === void 0 ? void 0 : _pluginInjectionApi$a0.actions)), _toConsumableArray(getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)));
|
|
829
786
|
if (customOptions.length) {
|
|
830
787
|
customOptions.push({
|
|
831
788
|
type: 'separator'
|
|
@@ -856,7 +813,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
856
813
|
})
|
|
857
814
|
}, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)), _objectSpread({
|
|
858
815
|
title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(commonMessages.delete),
|
|
859
|
-
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$
|
|
816
|
+
onClick: removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions, selectedNodeType),
|
|
860
817
|
icon: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
861
818
|
label: ""
|
|
862
819
|
})
|
|
@@ -13,7 +13,6 @@ import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
|
13
13
|
import DownloadIcon from '@atlaskit/icon/core/migration/download';
|
|
14
14
|
import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
|
|
15
15
|
import { messages } from '@atlaskit/media-ui';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
18
17
|
import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
|
|
19
18
|
import { getMediaLinkingState } from '../../pm-plugins/linking';
|
|
@@ -301,48 +300,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
|
|
|
301
300
|
supportsViewMode: true
|
|
302
301
|
});
|
|
303
302
|
} else {
|
|
304
|
-
var
|
|
305
|
-
id: 'editor.media.convert.mediainline',
|
|
306
|
-
title: mediaInlineImageTitle,
|
|
307
|
-
onClick: function onClick() {
|
|
308
|
-
return true;
|
|
309
|
-
},
|
|
310
|
-
selected: true,
|
|
311
|
-
disabled: false,
|
|
312
|
-
icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
313
|
-
color: "currentColor",
|
|
314
|
-
spacing: "spacious",
|
|
315
|
-
label: ""
|
|
316
|
-
})
|
|
317
|
-
}, {
|
|
318
|
-
id: 'editor.media.convert.mediasingle',
|
|
319
|
-
title: mediaSingleTitle,
|
|
320
|
-
onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
|
|
321
|
-
icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
322
|
-
color: "currentColor",
|
|
323
|
-
spacing: "spacious",
|
|
324
|
-
label: ""
|
|
325
|
-
})
|
|
326
|
-
}];
|
|
327
|
-
var switchFromInlineToBlock;
|
|
328
|
-
if (fg('platform_editor_controls_patch_11')) {
|
|
329
|
-
switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
|
|
330
|
-
} else {
|
|
331
|
-
switchFromInlineToBlock = {
|
|
332
|
-
id: 'media-inline-to-block-toolbar-item',
|
|
333
|
-
testId: 'media-inline-to-block-dropdown',
|
|
334
|
-
type: 'dropdown',
|
|
335
|
-
options: _options2,
|
|
336
|
-
title: intl.formatMessage(messages.sizeOptions),
|
|
337
|
-
icon: function icon() {
|
|
338
|
-
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
339
|
-
color: "currentColor",
|
|
340
|
-
spacing: "spacious",
|
|
341
|
-
label: mediaInlineImageTitle
|
|
342
|
-
});
|
|
343
|
-
}
|
|
344
|
-
};
|
|
345
|
-
}
|
|
303
|
+
var switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
|
|
346
304
|
inlineImageItems.push(switchFromInlineToBlock, {
|
|
347
305
|
type: 'separator',
|
|
348
306
|
fullHeight: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.2",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@atlaskit/analytics-namespaced-context": "^7.0.0",
|
|
39
39
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
40
40
|
"@atlaskit/button": "^23.2.0",
|
|
41
|
-
"@atlaskit/editor-common": "^107.
|
|
41
|
+
"@atlaskit/editor-common": "^107.1.0",
|
|
42
42
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
43
43
|
"@atlaskit/editor-plugin-analytics": "^2.3.0",
|
|
44
44
|
"@atlaskit/editor-plugin-annotation": "^2.9.0",
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
"@atlaskit/editor-plugin-focus": "^1.5.0",
|
|
51
51
|
"@atlaskit/editor-plugin-grid": "^2.0.0",
|
|
52
52
|
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
53
|
-
"@atlaskit/editor-plugin-interaction": "^
|
|
53
|
+
"@atlaskit/editor-plugin-interaction": "^3.0.0",
|
|
54
54
|
"@atlaskit/editor-plugin-selection": "^2.2.0",
|
|
55
55
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
56
56
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
57
57
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
58
58
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
59
59
|
"@atlaskit/form": "^12.0.0",
|
|
60
|
-
"@atlaskit/icon": "^27.
|
|
60
|
+
"@atlaskit/icon": "^27.1.0",
|
|
61
61
|
"@atlaskit/media-card": "^79.3.0",
|
|
62
62
|
"@atlaskit/media-client": "^34.0.0",
|
|
63
63
|
"@atlaskit/media-client-react": "^4.1.0",
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
"@atlaskit/primitives": "^14.9.0",
|
|
71
71
|
"@atlaskit/textfield": "^8.0.0",
|
|
72
72
|
"@atlaskit/theme": "^18.0.0",
|
|
73
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
74
|
-
"@atlaskit/tokens": "^5.
|
|
73
|
+
"@atlaskit/tmp-editor-statsig": "^8.0.0",
|
|
74
|
+
"@atlaskit/tokens": "^5.4.0",
|
|
75
75
|
"@atlaskit/tooltip": "^20.3.0",
|
|
76
76
|
"@babel/runtime": "^7.0.0",
|
|
77
77
|
"@emotion/react": "^11.7.1",
|
|
@@ -184,15 +184,6 @@
|
|
|
184
184
|
"confluence_frontend_preload_inline_comment_editor": {
|
|
185
185
|
"type": "boolean"
|
|
186
186
|
},
|
|
187
|
-
"platform_editor_controls_patch_9": {
|
|
188
|
-
"type": "boolean"
|
|
189
|
-
},
|
|
190
|
-
"platform_editor_interaction_api_refactor": {
|
|
191
|
-
"type": "boolean"
|
|
192
|
-
},
|
|
193
|
-
"platform_editor_controls_patch_11": {
|
|
194
|
-
"type": "boolean"
|
|
195
|
-
},
|
|
196
187
|
"platform_media_video_captions": {
|
|
197
188
|
"type": "boolean"
|
|
198
189
|
}
|