@atlaskit/editor-plugin-media 12.3.0 → 12.4.0
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 +11 -0
- package/dist/cjs/nodeviews/lazy-media-group.js +1 -24
- package/dist/cjs/nodeviews/mediaGroup.js +0 -4
- package/dist/cjs/nodeviews/mediaNodeView/index.js +31 -39
- package/dist/cjs/nodeviews/mediaNodeView/media.js +7 -22
- package/dist/cjs/nodeviews/mediaSingle.js +1 -2
- package/dist/cjs/nodeviews/mediaSingleNext.js +2 -2
- package/dist/cjs/nodeviews/toDOM-fixes/mediaSingle.js +2 -11
- package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +6 -11
- package/dist/cjs/ui/ResizableMediaSingle/index.js +4 -7
- package/dist/es2019/nodeviews/lazy-media-group.js +1 -20
- package/dist/es2019/nodeviews/mediaGroup.js +0 -4
- package/dist/es2019/nodeviews/mediaNodeView/index.js +31 -39
- package/dist/es2019/nodeviews/mediaNodeView/media.js +7 -21
- package/dist/es2019/nodeviews/mediaSingle.js +1 -2
- package/dist/es2019/nodeviews/mediaSingleNext.js +2 -2
- package/dist/es2019/nodeviews/toDOM-fixes/mediaSingle.js +2 -11
- package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +6 -9
- package/dist/es2019/ui/ResizableMediaSingle/index.js +4 -7
- package/dist/esm/nodeviews/lazy-media-group.js +1 -19
- package/dist/esm/nodeviews/mediaGroup.js +0 -4
- package/dist/esm/nodeviews/mediaNodeView/index.js +31 -39
- package/dist/esm/nodeviews/mediaNodeView/media.js +7 -22
- package/dist/esm/nodeviews/mediaSingle.js +1 -2
- package/dist/esm/nodeviews/mediaSingleNext.js +2 -2
- package/dist/esm/nodeviews/toDOM-fixes/mediaSingle.js +2 -11
- package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +6 -11
- package/dist/esm/ui/ResizableMediaSingle/index.js +4 -7
- package/dist/types/nodeviews/lazy-media-group.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/lazy-media-group.d.ts +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 12.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`a759f33417d9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a759f33417d9b) -
|
|
8
|
+
[PIRA-1311](https://opsj.atlassian.net/browse/PIRA-1311) - clean up platform_editor_media_vc_fixes
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 12.3.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.lazyMediaGroupView = void 0;
|
|
8
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
-
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
10
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
11
7
|
var _mediaGroup = require("./mediaGroup");
|
|
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
8
|
var lazyMediaGroupView = exports.lazyMediaGroupView = function lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory) {
|
|
14
9
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
15
10
|
var api = arguments.length > 4 ? arguments[4] : undefined;
|
|
16
|
-
|
|
17
|
-
return (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
18
|
-
}
|
|
19
|
-
return (0, _lazyNodeView.withLazyLoading)({
|
|
20
|
-
nodeName: 'mediaGroup',
|
|
21
|
-
getNodeViewOptions: function getNodeViewOptions() {},
|
|
22
|
-
loader: function loader() {
|
|
23
|
-
var result = Promise.resolve().then(function () {
|
|
24
|
-
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
|
|
25
|
-
'./mediaGroup'));
|
|
26
|
-
}).then(function (_ref) {
|
|
27
|
-
var ReactMediaGroupNode = _ref.ReactMediaGroupNode;
|
|
28
|
-
return function (node, view, getPos) {
|
|
29
|
-
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
|
|
30
|
-
};
|
|
31
|
-
});
|
|
32
|
-
return result;
|
|
33
|
-
}
|
|
34
|
-
});
|
|
11
|
+
return (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
35
12
|
};
|
|
@@ -14,7 +14,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
14
14
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
15
15
|
var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
16
16
|
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
|
|
17
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
18
17
|
var _useMediaProvider = require("../ui/hooks/useMediaProvider");
|
|
19
18
|
var _mediaGroupNext = require("./mediaGroupNext");
|
|
20
19
|
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)); }
|
|
@@ -67,9 +66,6 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
67
66
|
editorDisabled = _ref3.editorDisabled,
|
|
68
67
|
editorViewMode = _ref3.editorViewMode;
|
|
69
68
|
var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
|
|
70
|
-
if (!mediaProvider && !(0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
|
|
71
|
-
return null;
|
|
72
|
-
}
|
|
73
69
|
return /*#__PURE__*/_react.default.createElement(_mediaGroupNext.MediaGroupNext, {
|
|
74
70
|
node: _this.node,
|
|
75
71
|
getPos: getPos,
|
|
@@ -92,47 +92,41 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
92
92
|
width: '100%',
|
|
93
93
|
height: '100%'
|
|
94
94
|
};
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
|
|
95
|
+
var pos = _this.getPos();
|
|
96
|
+
if (typeof pos !== 'number') {
|
|
97
|
+
return flexibleDimensions;
|
|
98
|
+
}
|
|
99
|
+
if (_this.hasBeenResized) {
|
|
100
|
+
return flexibleDimensions;
|
|
101
|
+
}
|
|
102
|
+
var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
|
|
104
103
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
return flexibleDimensions;
|
|
104
|
+
// If media parent not found, return default
|
|
105
|
+
if (!mediaSingleNodeParent) {
|
|
106
|
+
return flexibleDimensions;
|
|
107
|
+
}
|
|
108
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
|
|
109
|
+
if (_this.hasPxWidthType(mediaSingleNodeParent)) {
|
|
110
|
+
return {
|
|
111
|
+
width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
|
|
112
|
+
height: '100%'
|
|
113
|
+
};
|
|
117
114
|
}
|
|
118
|
-
|
|
119
|
-
// Compute normal dimensions
|
|
120
|
-
var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
|
|
121
|
-
return {
|
|
122
|
-
width: "".concat(maxWidth, "px"),
|
|
123
|
-
height: '100%'
|
|
124
|
-
};
|
|
115
|
+
return flexibleDimensions;
|
|
125
116
|
}
|
|
126
|
-
|
|
117
|
+
|
|
118
|
+
// Compute normal dimensions
|
|
119
|
+
var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
|
|
120
|
+
return {
|
|
121
|
+
width: "".concat(maxWidth, "px"),
|
|
122
|
+
height: '100%'
|
|
123
|
+
};
|
|
127
124
|
});
|
|
128
125
|
(0, _defineProperty2.default)(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
|
|
129
126
|
if (mediaProvider) {
|
|
130
127
|
return mediaProvider;
|
|
131
128
|
}
|
|
132
|
-
|
|
133
|
-
return mediaOptions.provider;
|
|
134
|
-
}
|
|
135
|
-
return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
|
|
129
|
+
return mediaOptions.provider;
|
|
136
130
|
});
|
|
137
131
|
(0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
|
|
138
132
|
return function (_ref2) {
|
|
@@ -253,12 +247,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
253
247
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
254
248
|
domRef.contentEditable = 'true';
|
|
255
249
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
});
|
|
261
|
-
}
|
|
250
|
+
this.resizeListenerBinding = (0, _bindEventListener.bind)(domRef, {
|
|
251
|
+
type: 'resized',
|
|
252
|
+
listener: this.hasResizedListener
|
|
253
|
+
});
|
|
262
254
|
return domRef;
|
|
263
255
|
}
|
|
264
256
|
}, {
|
|
@@ -55,16 +55,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
55
55
|
mediaProvider = _context.sent;
|
|
56
56
|
if (mediaProvider) {
|
|
57
57
|
viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
|
|
58
|
-
viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
|
|
59
|
-
if (
|
|
60
|
-
// Only update state if new configs are available and different from current state
|
|
61
|
-
if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
|
|
62
|
-
_this.setState({
|
|
63
|
-
viewMediaClientConfig: viewMediaClientConfig,
|
|
64
|
-
viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
} else {
|
|
58
|
+
viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig; // Only update state if new configs are available and different from current state
|
|
59
|
+
if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
|
|
68
60
|
_this.setState({
|
|
69
61
|
viewMediaClientConfig: viewMediaClientConfig,
|
|
70
62
|
viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
|
|
@@ -167,7 +159,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
167
159
|
_this.mediaPluginState = _pluginKey.stateKey.getState(view.state);
|
|
168
160
|
|
|
169
161
|
// Initialize state from syncProvider (available on both server and client for SSR)
|
|
170
|
-
if (
|
|
162
|
+
if (syncProvider) {
|
|
171
163
|
_this.state = {
|
|
172
164
|
viewMediaClientConfig: syncProvider.viewMediaClientConfig,
|
|
173
165
|
viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
|
|
@@ -181,7 +173,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
181
173
|
value: function shouldComponentUpdate(nextProps, nextState) {
|
|
182
174
|
var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
|
|
183
175
|
var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
|
|
184
|
-
if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider ||
|
|
176
|
+
if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
|
|
185
177
|
return true;
|
|
186
178
|
}
|
|
187
179
|
return false;
|
|
@@ -319,17 +311,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
319
311
|
// Check if we have any media client config available (syncProvider, state, or upload config)
|
|
320
312
|
var hasNoMediaClientConfig = !viewMediaClientConfig && ((0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
|
|
321
313
|
if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
|
|
322
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
|
|
323
|
-
return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
|
|
324
|
-
dimensions: originalDimensions,
|
|
325
|
-
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
326
|
-
selected: selected
|
|
327
|
-
}, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
|
|
328
|
-
interactionName: "editor-media-card-loading"
|
|
329
|
-
}));
|
|
330
|
-
}
|
|
331
314
|
return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
|
|
332
|
-
dimensions: originalDimensions
|
|
315
|
+
dimensions: originalDimensions,
|
|
316
|
+
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
317
|
+
selected: selected
|
|
333
318
|
}, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
|
|
334
319
|
interactionName: "editor-media-card-loading"
|
|
335
320
|
}));
|
|
@@ -19,7 +19,6 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
|
19
19
|
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
|
|
20
20
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
21
21
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
22
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
23
22
|
var _main = require("../pm-plugins/main");
|
|
24
23
|
var _mediaSingleNext = require("./mediaSingleNext");
|
|
25
24
|
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)); }
|
|
@@ -232,7 +231,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
232
231
|
};
|
|
233
232
|
}
|
|
234
233
|
// Detect mediaSingle width attribute changes and signal child media node to update
|
|
235
|
-
if (!this.hasResized && this.node.attrs.width !== node.attrs.width
|
|
234
|
+
if (!this.hasResized && this.node.attrs.width !== node.attrs.width) {
|
|
236
235
|
var target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
|
|
237
236
|
target === null || target === void 0 || target.dispatchEvent(new CustomEvent('resized'));
|
|
238
237
|
}
|
|
@@ -509,7 +509,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
|
|
|
509
509
|
onClick: clickPlaceholder,
|
|
510
510
|
placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
|
|
511
511
|
})));
|
|
512
|
-
if (
|
|
512
|
+
if (widthType !== 'pixel' && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
|
|
513
513
|
return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
|
|
514
514
|
view: view,
|
|
515
515
|
getPos: getPos,
|
|
@@ -529,7 +529,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
|
|
|
529
529
|
hasFallbackContainer: false,
|
|
530
530
|
mediaSingleWidth: mediaSingleWidth,
|
|
531
531
|
editorAppearance: editorAppearance,
|
|
532
|
-
showLegacyNotification:
|
|
532
|
+
showLegacyNotification: true,
|
|
533
533
|
forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
|
|
534
534
|
}, MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
|
|
535
535
|
view: view,
|
|
@@ -8,7 +8,6 @@ exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSing
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
10
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
11
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
12
11
|
var _toDOMAttrs = require("./toDOMAttrs");
|
|
13
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -54,17 +53,9 @@ var mediaWidthCSSCalc = exports.mediaWidthCSSCalc = function mediaWidthCSSCalc(_
|
|
|
54
53
|
} else if (shouldHardCodePixelWidth) {
|
|
55
54
|
cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
|
|
56
55
|
} else if (shouldUseBreakoutWideLogic) {
|
|
57
|
-
|
|
58
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
|
|
59
|
-
} else {
|
|
60
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
|
|
61
|
-
}
|
|
56
|
+
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
|
|
62
57
|
} else if (shouldUseBreakoutFullWidthLogic) {
|
|
63
|
-
|
|
64
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
|
|
65
|
-
} else {
|
|
66
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
|
|
67
|
-
}
|
|
58
|
+
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
|
|
68
59
|
} else {
|
|
69
60
|
cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
|
|
70
61
|
}
|
|
@@ -21,7 +21,6 @@ var _utils = require("@atlaskit/editor-common/utils");
|
|
|
21
21
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
22
22
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
23
23
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
24
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
25
24
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
26
25
|
var _main = require("../../pm-plugins/main");
|
|
27
26
|
var _analytics = require("../../pm-plugins/utils/analytics");
|
|
@@ -213,11 +212,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
|
|
|
213
212
|
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
214
213
|
hasResized = _useState0[0],
|
|
215
214
|
setHasResized = _useState0[1];
|
|
216
|
-
var nodePosition =
|
|
217
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
218
|
-
(0, _react.useMemo)(function () {
|
|
219
|
-
return getNodePosition(getPos);
|
|
220
|
-
}, [getPos]);
|
|
215
|
+
var nodePosition = getNodePosition(getPos);
|
|
221
216
|
var isNestedNode = (0, _react.useMemo)(function () {
|
|
222
217
|
if (nodePosition === null) {
|
|
223
218
|
return false;
|
|
@@ -252,7 +247,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
|
|
|
252
247
|
if (isAdjacentMode || fullWidthMode) {
|
|
253
248
|
return lineLength;
|
|
254
249
|
}
|
|
255
|
-
if (!isResizing
|
|
250
|
+
if (!isResizing) {
|
|
256
251
|
return "var(--ak-editor-max-container-width)";
|
|
257
252
|
}
|
|
258
253
|
return calcMaxWidth({
|
|
@@ -269,7 +264,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
|
|
|
269
264
|
var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
|
|
270
265
|
var resizerNextClassName = (0, _react.useMemo)(function () {
|
|
271
266
|
var classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, _styles.resizerItemClassName, {
|
|
272
|
-
'display-handle':
|
|
267
|
+
'display-handle': selected && !disableHandles,
|
|
273
268
|
'richMedia-selected': selected,
|
|
274
269
|
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
|
|
275
270
|
});
|
|
@@ -284,7 +279,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
|
|
|
284
279
|
return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
|
|
285
280
|
}, [nodePosition, view]);
|
|
286
281
|
var enable = (0, _react.useMemo)(function () {
|
|
287
|
-
if (disableHandles
|
|
282
|
+
if (disableHandles) {
|
|
288
283
|
return {
|
|
289
284
|
left: false,
|
|
290
285
|
right: false
|
|
@@ -391,7 +386,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
|
|
|
391
386
|
height = _calculateSizeState.height,
|
|
392
387
|
newLayout = _calculateSizeState.layout;
|
|
393
388
|
var resizerDomEl = resizerContainerRef.current;
|
|
394
|
-
if (resizerDomEl && !hasResized
|
|
389
|
+
if (resizerDomEl && !hasResized) {
|
|
395
390
|
// dispatch resize event to media node DOM element inside resizerDom
|
|
396
391
|
var mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
|
|
397
392
|
var event = new CustomEvent('resized');
|
|
@@ -526,7 +521,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
|
|
|
526
521
|
snap: snaps,
|
|
527
522
|
resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
|
|
528
523
|
"data-testid": resizerNextTestId,
|
|
529
|
-
isHandleVisible:
|
|
524
|
+
isHandleVisible: selected && !disableHandles,
|
|
530
525
|
handlePositioning: handlePositioning,
|
|
531
526
|
handleHighlight: "full-height"
|
|
532
527
|
}, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
|
|
@@ -21,7 +21,6 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
21
21
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
22
22
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
23
23
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
24
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
25
24
|
var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
|
|
26
25
|
var _styled = require("./styled");
|
|
27
26
|
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)); }
|
|
@@ -58,7 +57,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
|
|
|
58
57
|
var _this$props2 = _this.props,
|
|
59
58
|
layout = _this$props2.layout,
|
|
60
59
|
state = _this$props2.view.state;
|
|
61
|
-
if (!_this.hasResized
|
|
60
|
+
if (!_this.hasResized) {
|
|
62
61
|
var _this$wrapper;
|
|
63
62
|
var mediaDomEl = (_this$wrapper = _this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
|
|
64
63
|
if (mediaDomEl) {
|
|
@@ -365,11 +364,9 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
|
|
|
365
364
|
var enable = {};
|
|
366
365
|
_ui.handleSides.forEach(function (side) {
|
|
367
366
|
var oppositeSide = side === 'left' ? 'right' : 'left';
|
|
368
|
-
if (
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
return;
|
|
372
|
-
}
|
|
367
|
+
if (_this2.props.disableHandles) {
|
|
368
|
+
enable[side] = false;
|
|
369
|
+
return;
|
|
373
370
|
}
|
|
374
371
|
enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
|
|
375
372
|
if (side === 'left' && _this2.insideInlineLike) {
|
|
@@ -1,23 +1,4 @@
|
|
|
1
|
-
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
1
|
import { ReactMediaGroupNode } from './mediaGroup';
|
|
4
2
|
export const lazyMediaGroupView = (portalProviderAPI, eventDispatcher, providerFactory, options = {}, api) => {
|
|
5
|
-
|
|
6
|
-
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
7
|
-
}
|
|
8
|
-
return withLazyLoading({
|
|
9
|
-
nodeName: 'mediaGroup',
|
|
10
|
-
getNodeViewOptions: () => {},
|
|
11
|
-
loader: () => {
|
|
12
|
-
const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
|
|
13
|
-
'./mediaGroup').then(({
|
|
14
|
-
ReactMediaGroupNode
|
|
15
|
-
}) => {
|
|
16
|
-
return (node, view, getPos) => {
|
|
17
|
-
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
|
|
18
|
-
};
|
|
19
|
-
});
|
|
20
|
-
return result;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
3
|
+
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
23
4
|
};
|
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
3
3
|
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
4
4
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
5
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
5
|
import { useMediaProvider } from '../ui/hooks/useMediaProvider';
|
|
7
6
|
import { MediaGroupNext } from './mediaGroupNext';
|
|
8
7
|
const selector = states => {
|
|
@@ -51,9 +50,6 @@ class MediaGroupNodeView extends ReactNodeView {
|
|
|
51
50
|
editorViewMode
|
|
52
51
|
}) => {
|
|
53
52
|
const mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
|
|
54
|
-
if (!mediaProvider && !expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
|
|
55
|
-
return null;
|
|
56
|
-
}
|
|
57
53
|
return /*#__PURE__*/React.createElement(MediaGroupNext, {
|
|
58
54
|
node: this.node,
|
|
59
55
|
getPos: getPos,
|
|
@@ -72,47 +72,41 @@ class MediaNodeView extends SelectionBasedNodeView {
|
|
|
72
72
|
width: '100%',
|
|
73
73
|
height: '100%'
|
|
74
74
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
|
|
75
|
+
const pos = this.getPos();
|
|
76
|
+
if (typeof pos !== 'number') {
|
|
77
|
+
return flexibleDimensions;
|
|
78
|
+
}
|
|
79
|
+
if (this.hasBeenResized) {
|
|
80
|
+
return flexibleDimensions;
|
|
81
|
+
}
|
|
82
|
+
const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
|
|
84
83
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
return flexibleDimensions;
|
|
84
|
+
// If media parent not found, return default
|
|
85
|
+
if (!mediaSingleNodeParent) {
|
|
86
|
+
return flexibleDimensions;
|
|
87
|
+
}
|
|
88
|
+
if (expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
|
|
89
|
+
if (this.hasPxWidthType(mediaSingleNodeParent)) {
|
|
90
|
+
return {
|
|
91
|
+
width: `${mediaSingleNodeParent.attrs.width}px`,
|
|
92
|
+
height: '100%'
|
|
93
|
+
};
|
|
97
94
|
}
|
|
98
|
-
|
|
99
|
-
// Compute normal dimensions
|
|
100
|
-
const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
|
|
101
|
-
return {
|
|
102
|
-
width: `${maxWidth}px`,
|
|
103
|
-
height: '100%'
|
|
104
|
-
};
|
|
95
|
+
return flexibleDimensions;
|
|
105
96
|
}
|
|
106
|
-
|
|
97
|
+
|
|
98
|
+
// Compute normal dimensions
|
|
99
|
+
const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
|
|
100
|
+
return {
|
|
101
|
+
width: `${maxWidth}px`,
|
|
102
|
+
height: '100%'
|
|
103
|
+
};
|
|
107
104
|
});
|
|
108
105
|
_defineProperty(this, "getMediaProviderToUse", (mediaOptions, mediaProvider) => {
|
|
109
106
|
if (mediaProvider) {
|
|
110
107
|
return mediaProvider;
|
|
111
108
|
}
|
|
112
|
-
|
|
113
|
-
return mediaOptions.provider;
|
|
114
|
-
}
|
|
115
|
-
return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
|
|
109
|
+
return mediaOptions.provider;
|
|
116
110
|
});
|
|
117
111
|
_defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
|
|
118
112
|
return ({
|
|
@@ -237,12 +231,10 @@ class MediaNodeView extends SelectionBasedNodeView {
|
|
|
237
231
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
238
232
|
domRef.contentEditable = 'true';
|
|
239
233
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
});
|
|
245
|
-
}
|
|
234
|
+
this.resizeListenerBinding = bind(domRef, {
|
|
235
|
+
type: 'resized',
|
|
236
|
+
listener: this.hasResizedListener
|
|
237
|
+
});
|
|
246
238
|
return domRef;
|
|
247
239
|
}
|
|
248
240
|
viewShouldUpdate(nextNode, decorations) {
|
|
@@ -31,15 +31,8 @@ export class MediaNode extends Component {
|
|
|
31
31
|
if (mediaProvider) {
|
|
32
32
|
const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
|
|
33
33
|
const viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
|
|
34
|
-
if
|
|
35
|
-
|
|
36
|
-
if (viewMediaClientConfig && this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
|
|
37
|
-
this.setState({
|
|
38
|
-
viewMediaClientConfig,
|
|
39
|
-
viewAndUploadMediaClientConfig
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
} else {
|
|
34
|
+
// Only update state if new configs are available and different from current state
|
|
35
|
+
if (viewMediaClientConfig && this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
|
|
43
36
|
this.setState({
|
|
44
37
|
viewMediaClientConfig,
|
|
45
38
|
viewAndUploadMediaClientConfig
|
|
@@ -140,7 +133,7 @@ export class MediaNode extends Component {
|
|
|
140
133
|
this.mediaPluginState = mediaStateKey.getState(view.state);
|
|
141
134
|
|
|
142
135
|
// Initialize state from syncProvider (available on both server and client for SSR)
|
|
143
|
-
if (
|
|
136
|
+
if (syncProvider) {
|
|
144
137
|
this.state = {
|
|
145
138
|
viewMediaClientConfig: syncProvider.viewMediaClientConfig,
|
|
146
139
|
viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
|
|
@@ -150,7 +143,7 @@ export class MediaNode extends Component {
|
|
|
150
143
|
shouldComponentUpdate(nextProps, nextState) {
|
|
151
144
|
const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
|
|
152
145
|
const hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
|
|
153
|
-
if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider ||
|
|
146
|
+
if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
|
|
154
147
|
return true;
|
|
155
148
|
}
|
|
156
149
|
return false;
|
|
@@ -260,17 +253,10 @@ export class MediaNode extends Component {
|
|
|
260
253
|
// Check if we have any media client config available (syncProvider, state, or upload config)
|
|
261
254
|
const hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
|
|
262
255
|
if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
|
|
263
|
-
if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
|
|
264
|
-
return /*#__PURE__*/React.createElement(MediaCardWrapper, {
|
|
265
|
-
dimensions: originalDimensions,
|
|
266
|
-
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
267
|
-
selected: selected
|
|
268
|
-
}, /*#__PURE__*/React.createElement(CardLoading, {
|
|
269
|
-
interactionName: "editor-media-card-loading"
|
|
270
|
-
}));
|
|
271
|
-
}
|
|
272
256
|
return /*#__PURE__*/React.createElement(MediaCardWrapper, {
|
|
273
|
-
dimensions: originalDimensions
|
|
257
|
+
dimensions: originalDimensions,
|
|
258
|
+
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
259
|
+
selected: selected
|
|
274
260
|
}, /*#__PURE__*/React.createElement(CardLoading, {
|
|
275
261
|
interactionName: "editor-media-card-loading"
|
|
276
262
|
}));
|
|
@@ -14,7 +14,6 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
14
14
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
15
15
|
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
|
|
16
16
|
import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
|
|
17
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
18
17
|
import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
|
|
19
18
|
import { MediaSingleNodeNext } from './mediaSingleNext';
|
|
20
19
|
const selector = states => {
|
|
@@ -192,7 +191,7 @@ class MediaSingleNodeView extends ReactNodeView {
|
|
|
192
191
|
isValidUpdate = (currentNode, newNode) => this.getNodeMediaId(currentNode) === this.getNodeMediaId(newNode);
|
|
193
192
|
}
|
|
194
193
|
// Detect mediaSingle width attribute changes and signal child media node to update
|
|
195
|
-
if (!this.hasResized && this.node.attrs.width !== node.attrs.width
|
|
194
|
+
if (!this.hasResized && this.node.attrs.width !== node.attrs.width) {
|
|
196
195
|
const target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
|
|
197
196
|
target === null || target === void 0 ? void 0 : target.dispatchEvent(new CustomEvent('resized'));
|
|
198
197
|
}
|
|
@@ -468,7 +468,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
|
|
|
468
468
|
onClick: clickPlaceholder,
|
|
469
469
|
placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
|
|
470
470
|
})));
|
|
471
|
-
if (
|
|
471
|
+
if (widthType !== 'pixel' && expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
|
|
472
472
|
return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
|
|
473
473
|
view: view,
|
|
474
474
|
getPos: getPos,
|
|
@@ -488,7 +488,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
|
|
|
488
488
|
hasFallbackContainer: false,
|
|
489
489
|
mediaSingleWidth: mediaSingleWidth,
|
|
490
490
|
editorAppearance: editorAppearance,
|
|
491
|
-
showLegacyNotification:
|
|
491
|
+
showLegacyNotification: true,
|
|
492
492
|
forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
|
|
493
493
|
}, MediaChildren) : jsx(ResizableMediaSingle, {
|
|
494
494
|
view: view,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { mediaSingleSpec } from '@atlaskit/adf-schema';
|
|
2
2
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
3
|
import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
|
|
5
4
|
const WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
|
|
6
5
|
const ALIGNED_LAYOUTS = ['align-end', 'align-start'];
|
|
@@ -45,17 +44,9 @@ export const mediaWidthCSSCalc = ({
|
|
|
45
44
|
} else if (shouldHardCodePixelWidth) {
|
|
46
45
|
cssCalc = `min(${mediaSingleDimensionWidth}px, ${fullContainerWidth})`;
|
|
47
46
|
} else if (shouldUseBreakoutWideLogic) {
|
|
48
|
-
|
|
49
|
-
cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))`;
|
|
50
|
-
} else {
|
|
51
|
-
cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
|
|
52
|
-
}
|
|
47
|
+
cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))`;
|
|
53
48
|
} else if (shouldUseBreakoutFullWidthLogic) {
|
|
54
|
-
|
|
55
|
-
cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))`;
|
|
56
|
-
} else {
|
|
57
|
-
cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
|
|
58
|
-
}
|
|
49
|
+
cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))`;
|
|
59
50
|
} else {
|
|
60
51
|
cssCalc = `max(min(${baseWidth}px, min(100cqw, 100%)), ${GUTTER_SIZE})`;
|
|
61
52
|
}
|
|
@@ -17,7 +17,6 @@ import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
|
|
|
17
17
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
18
18
|
import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
19
19
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
20
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
21
20
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
22
21
|
import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
|
|
23
22
|
import { getMediaResizeAnalyticsEvent } from '../../pm-plugins/utils/analytics';
|
|
@@ -190,9 +189,7 @@ export const ResizableMediaSingleNextFunctional = props => {
|
|
|
190
189
|
const [isResizing, setIsResizing] = useState(false);
|
|
191
190
|
const [isVideoFile, setIsVideoFile] = useState(false);
|
|
192
191
|
const [hasResized, setHasResized] = useState(false);
|
|
193
|
-
const nodePosition =
|
|
194
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
195
|
-
useMemo(() => getNodePosition(getPos), [getPos]);
|
|
192
|
+
const nodePosition = getNodePosition(getPos);
|
|
196
193
|
const isNestedNode = useMemo(() => {
|
|
197
194
|
if (nodePosition === null) {
|
|
198
195
|
return false;
|
|
@@ -227,7 +224,7 @@ export const ResizableMediaSingleNextFunctional = props => {
|
|
|
227
224
|
if (isAdjacentMode || fullWidthMode) {
|
|
228
225
|
return lineLength;
|
|
229
226
|
}
|
|
230
|
-
if (!isResizing
|
|
227
|
+
if (!isResizing) {
|
|
231
228
|
return `var(--ak-editor-max-container-width)`;
|
|
232
229
|
}
|
|
233
230
|
return calcMaxWidth({
|
|
@@ -244,7 +241,7 @@ export const ResizableMediaSingleNextFunctional = props => {
|
|
|
244
241
|
const minViewWidth = isResizing ? minWidth : `min(${minWidth}px, 100%)`;
|
|
245
242
|
const resizerNextClassName = useMemo(() => {
|
|
246
243
|
const classNameNext = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
|
|
247
|
-
'display-handle':
|
|
244
|
+
'display-handle': selected && !disableHandles,
|
|
248
245
|
'richMedia-selected': selected,
|
|
249
246
|
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
|
|
250
247
|
});
|
|
@@ -261,7 +258,7 @@ export const ResizableMediaSingleNextFunctional = props => {
|
|
|
261
258
|
return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
|
|
262
259
|
}, [nodePosition, view]);
|
|
263
260
|
const enable = useMemo(() => {
|
|
264
|
-
if (disableHandles
|
|
261
|
+
if (disableHandles) {
|
|
265
262
|
return {
|
|
266
263
|
left: false,
|
|
267
264
|
right: false
|
|
@@ -367,7 +364,7 @@ export const ResizableMediaSingleNextFunctional = props => {
|
|
|
367
364
|
isNestedNode: isAdjacentMode
|
|
368
365
|
})(size, delta, false, aspectRatioRef.current);
|
|
369
366
|
const resizerDomEl = resizerContainerRef.current;
|
|
370
|
-
if (resizerDomEl && !hasResized
|
|
367
|
+
if (resizerDomEl && !hasResized) {
|
|
371
368
|
// dispatch resize event to media node DOM element inside resizerDom
|
|
372
369
|
const mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
|
|
373
370
|
const event = new CustomEvent('resized');
|
|
@@ -503,7 +500,7 @@ export const ResizableMediaSingleNextFunctional = props => {
|
|
|
503
500
|
snap: snaps,
|
|
504
501
|
resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
|
|
505
502
|
"data-testid": resizerNextTestId,
|
|
506
|
-
isHandleVisible:
|
|
503
|
+
isHandleVisible: selected && !disableHandles,
|
|
507
504
|
handlePositioning: handlePositioning,
|
|
508
505
|
handleHighlight: "full-height"
|
|
509
506
|
}, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
|
|
@@ -13,7 +13,6 @@ import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, handleSides, imageA
|
|
|
13
13
|
import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
|
|
14
14
|
import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
15
15
|
import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
16
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
17
16
|
import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
|
|
18
17
|
import { wrapperStyle } from './styled';
|
|
19
18
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
@@ -44,7 +43,7 @@ export default class ResizableMediaSingle extends React.Component {
|
|
|
44
43
|
state
|
|
45
44
|
}
|
|
46
45
|
} = this.props;
|
|
47
|
-
if (!this.hasResized
|
|
46
|
+
if (!this.hasResized) {
|
|
48
47
|
var _this$wrapper;
|
|
49
48
|
const mediaDomEl = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
|
|
50
49
|
if (mediaDomEl) {
|
|
@@ -295,11 +294,9 @@ export default class ResizableMediaSingle extends React.Component {
|
|
|
295
294
|
const enable = {};
|
|
296
295
|
handleSides.forEach(side => {
|
|
297
296
|
const oppositeSide = side === 'left' ? 'right' : 'left';
|
|
298
|
-
if (
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
return;
|
|
302
|
-
}
|
|
297
|
+
if (this.props.disableHandles) {
|
|
298
|
+
enable[side] = false;
|
|
299
|
+
return;
|
|
303
300
|
}
|
|
304
301
|
enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
|
|
305
302
|
if (side === 'left' && this.insideInlineLike) {
|
|
@@ -1,24 +1,6 @@
|
|
|
1
|
-
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
3
1
|
import { ReactMediaGroupNode } from './mediaGroup';
|
|
4
2
|
export var lazyMediaGroupView = function lazyMediaGroupView(portalProviderAPI, eventDispatcher, providerFactory) {
|
|
5
3
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
6
4
|
var api = arguments.length > 4 ? arguments[4] : undefined;
|
|
7
|
-
|
|
8
|
-
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
9
|
-
}
|
|
10
|
-
return withLazyLoading({
|
|
11
|
-
nodeName: 'mediaGroup',
|
|
12
|
-
getNodeViewOptions: function getNodeViewOptions() {},
|
|
13
|
-
loader: function loader() {
|
|
14
|
-
var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-media-group-lazy-node-view" */
|
|
15
|
-
'./mediaGroup').then(function (_ref) {
|
|
16
|
-
var ReactMediaGroupNode = _ref.ReactMediaGroupNode;
|
|
17
|
-
return function (node, view, getPos) {
|
|
18
|
-
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api)(node, view, getPos);
|
|
19
|
-
};
|
|
20
|
-
});
|
|
21
|
-
return result;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
5
|
+
return ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
|
|
24
6
|
};
|
|
@@ -9,7 +9,6 @@ import React from 'react';
|
|
|
9
9
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
10
10
|
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
11
11
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
12
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
12
|
import { useMediaProvider } from '../ui/hooks/useMediaProvider';
|
|
14
13
|
import { MediaGroupNext } from './mediaGroupNext';
|
|
15
14
|
var selector = function selector(states) {
|
|
@@ -60,9 +59,6 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
60
59
|
editorDisabled = _ref3.editorDisabled,
|
|
61
60
|
editorViewMode = _ref3.editorViewMode;
|
|
62
61
|
var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
|
|
63
|
-
if (!mediaProvider && !expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
|
|
64
|
-
return null;
|
|
65
|
-
}
|
|
66
62
|
return /*#__PURE__*/React.createElement(MediaGroupNext, {
|
|
67
63
|
node: _this.node,
|
|
68
64
|
getPos: getPos,
|
|
@@ -86,47 +86,41 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
86
86
|
width: '100%',
|
|
87
87
|
height: '100%'
|
|
88
88
|
};
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
|
|
89
|
+
var pos = _this.getPos();
|
|
90
|
+
if (typeof pos !== 'number') {
|
|
91
|
+
return flexibleDimensions;
|
|
92
|
+
}
|
|
93
|
+
if (_this.hasBeenResized) {
|
|
94
|
+
return flexibleDimensions;
|
|
95
|
+
}
|
|
96
|
+
var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
|
|
98
97
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
return flexibleDimensions;
|
|
98
|
+
// If media parent not found, return default
|
|
99
|
+
if (!mediaSingleNodeParent) {
|
|
100
|
+
return flexibleDimensions;
|
|
101
|
+
}
|
|
102
|
+
if (expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
|
|
103
|
+
if (_this.hasPxWidthType(mediaSingleNodeParent)) {
|
|
104
|
+
return {
|
|
105
|
+
width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
|
|
106
|
+
height: '100%'
|
|
107
|
+
};
|
|
111
108
|
}
|
|
112
|
-
|
|
113
|
-
// Compute normal dimensions
|
|
114
|
-
var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
|
|
115
|
-
return {
|
|
116
|
-
width: "".concat(maxWidth, "px"),
|
|
117
|
-
height: '100%'
|
|
118
|
-
};
|
|
109
|
+
return flexibleDimensions;
|
|
119
110
|
}
|
|
120
|
-
|
|
111
|
+
|
|
112
|
+
// Compute normal dimensions
|
|
113
|
+
var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
|
|
114
|
+
return {
|
|
115
|
+
width: "".concat(maxWidth, "px"),
|
|
116
|
+
height: '100%'
|
|
117
|
+
};
|
|
121
118
|
});
|
|
122
119
|
_defineProperty(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
|
|
123
120
|
if (mediaProvider) {
|
|
124
121
|
return mediaProvider;
|
|
125
122
|
}
|
|
126
|
-
|
|
127
|
-
return mediaOptions.provider;
|
|
128
|
-
}
|
|
129
|
-
return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
|
|
123
|
+
return mediaOptions.provider;
|
|
130
124
|
});
|
|
131
125
|
_defineProperty(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
|
|
132
126
|
return function (_ref2) {
|
|
@@ -247,12 +241,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
247
241
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
248
242
|
domRef.contentEditable = 'true';
|
|
249
243
|
}
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
});
|
|
255
|
-
}
|
|
244
|
+
this.resizeListenerBinding = bind(domRef, {
|
|
245
|
+
type: 'resized',
|
|
246
|
+
listener: this.hasResizedListener
|
|
247
|
+
});
|
|
256
248
|
return domRef;
|
|
257
249
|
}
|
|
258
250
|
}, {
|
|
@@ -47,16 +47,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
47
47
|
mediaProvider = _context.sent;
|
|
48
48
|
if (mediaProvider) {
|
|
49
49
|
viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
|
|
50
|
-
viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
|
|
51
|
-
if (
|
|
52
|
-
// Only update state if new configs are available and different from current state
|
|
53
|
-
if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
|
|
54
|
-
_this.setState({
|
|
55
|
-
viewMediaClientConfig: viewMediaClientConfig,
|
|
56
|
-
viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
} else {
|
|
50
|
+
viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig; // Only update state if new configs are available and different from current state
|
|
51
|
+
if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
|
|
60
52
|
_this.setState({
|
|
61
53
|
viewMediaClientConfig: viewMediaClientConfig,
|
|
62
54
|
viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
|
|
@@ -159,7 +151,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
159
151
|
_this.mediaPluginState = mediaStateKey.getState(view.state);
|
|
160
152
|
|
|
161
153
|
// Initialize state from syncProvider (available on both server and client for SSR)
|
|
162
|
-
if (
|
|
154
|
+
if (syncProvider) {
|
|
163
155
|
_this.state = {
|
|
164
156
|
viewMediaClientConfig: syncProvider.viewMediaClientConfig,
|
|
165
157
|
viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
|
|
@@ -173,7 +165,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
173
165
|
value: function shouldComponentUpdate(nextProps, nextState) {
|
|
174
166
|
var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
|
|
175
167
|
var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
|
|
176
|
-
if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider ||
|
|
168
|
+
if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
|
|
177
169
|
return true;
|
|
178
170
|
}
|
|
179
171
|
return false;
|
|
@@ -311,17 +303,10 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
311
303
|
// Check if we have any media client config available (syncProvider, state, or upload config)
|
|
312
304
|
var hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
|
|
313
305
|
if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
|
|
314
|
-
if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
|
|
315
|
-
return /*#__PURE__*/React.createElement(MediaCardWrapper, {
|
|
316
|
-
dimensions: originalDimensions,
|
|
317
|
-
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
318
|
-
selected: selected
|
|
319
|
-
}, /*#__PURE__*/React.createElement(CardLoading, {
|
|
320
|
-
interactionName: "editor-media-card-loading"
|
|
321
|
-
}));
|
|
322
|
-
}
|
|
323
306
|
return /*#__PURE__*/React.createElement(MediaCardWrapper, {
|
|
324
|
-
dimensions: originalDimensions
|
|
307
|
+
dimensions: originalDimensions,
|
|
308
|
+
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
309
|
+
selected: selected
|
|
325
310
|
}, /*#__PURE__*/React.createElement(CardLoading, {
|
|
326
311
|
interactionName: "editor-media-card-loading"
|
|
327
312
|
}));
|
|
@@ -23,7 +23,6 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
23
23
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
24
24
|
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
|
|
25
25
|
import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
|
|
26
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
27
26
|
import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
|
|
28
27
|
import { MediaSingleNodeNext } from './mediaSingleNext';
|
|
29
28
|
var selector = function selector(states) {
|
|
@@ -228,7 +227,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
228
227
|
};
|
|
229
228
|
}
|
|
230
229
|
// Detect mediaSingle width attribute changes and signal child media node to update
|
|
231
|
-
if (!this.hasResized && this.node.attrs.width !== node.attrs.width
|
|
230
|
+
if (!this.hasResized && this.node.attrs.width !== node.attrs.width) {
|
|
232
231
|
var target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
|
|
233
232
|
target === null || target === void 0 || target.dispatchEvent(new CustomEvent('resized'));
|
|
234
233
|
}
|
|
@@ -503,7 +503,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
|
|
|
503
503
|
onClick: clickPlaceholder,
|
|
504
504
|
placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
|
|
505
505
|
})));
|
|
506
|
-
if (
|
|
506
|
+
if (widthType !== 'pixel' && expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
|
|
507
507
|
return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
|
|
508
508
|
view: view,
|
|
509
509
|
getPos: getPos,
|
|
@@ -523,7 +523,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
|
|
|
523
523
|
hasFallbackContainer: false,
|
|
524
524
|
mediaSingleWidth: mediaSingleWidth,
|
|
525
525
|
editorAppearance: editorAppearance,
|
|
526
|
-
showLegacyNotification:
|
|
526
|
+
showLegacyNotification: true,
|
|
527
527
|
forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
|
|
528
528
|
}, MediaChildren) : jsx(ResizableMediaSingle, {
|
|
529
529
|
view: view,
|
|
@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
import { mediaSingleSpec } from '@atlaskit/adf-schema';
|
|
5
5
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
6
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
6
|
import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
|
|
8
7
|
var WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
|
|
9
8
|
var ALIGNED_LAYOUTS = ['align-end', 'align-start'];
|
|
@@ -47,17 +46,9 @@ export var mediaWidthCSSCalc = function mediaWidthCSSCalc(_ref) {
|
|
|
47
46
|
} else if (shouldHardCodePixelWidth) {
|
|
48
47
|
cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
|
|
49
48
|
} else if (shouldUseBreakoutWideLogic) {
|
|
50
|
-
|
|
51
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
|
|
52
|
-
} else {
|
|
53
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
|
|
54
|
-
}
|
|
49
|
+
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
|
|
55
50
|
} else if (shouldUseBreakoutFullWidthLogic) {
|
|
56
|
-
|
|
57
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
|
|
58
|
-
} else {
|
|
59
|
-
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
|
|
60
|
-
}
|
|
51
|
+
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
|
|
61
52
|
} else {
|
|
62
53
|
cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
|
|
63
54
|
}
|
|
@@ -19,7 +19,6 @@ import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
|
|
|
19
19
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
20
20
|
import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
21
21
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
22
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
23
22
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
24
23
|
import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
|
|
25
24
|
import { getMediaResizeAnalyticsEvent } from '../../pm-plugins/utils/analytics';
|
|
@@ -203,11 +202,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
|
|
|
203
202
|
_useState0 = _slicedToArray(_useState9, 2),
|
|
204
203
|
hasResized = _useState0[0],
|
|
205
204
|
setHasResized = _useState0[1];
|
|
206
|
-
var nodePosition =
|
|
207
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
208
|
-
useMemo(function () {
|
|
209
|
-
return getNodePosition(getPos);
|
|
210
|
-
}, [getPos]);
|
|
205
|
+
var nodePosition = getNodePosition(getPos);
|
|
211
206
|
var isNestedNode = useMemo(function () {
|
|
212
207
|
if (nodePosition === null) {
|
|
213
208
|
return false;
|
|
@@ -242,7 +237,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
|
|
|
242
237
|
if (isAdjacentMode || fullWidthMode) {
|
|
243
238
|
return lineLength;
|
|
244
239
|
}
|
|
245
|
-
if (!isResizing
|
|
240
|
+
if (!isResizing) {
|
|
246
241
|
return "var(--ak-editor-max-container-width)";
|
|
247
242
|
}
|
|
248
243
|
return calcMaxWidth({
|
|
@@ -259,7 +254,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
|
|
|
259
254
|
var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
|
|
260
255
|
var resizerNextClassName = useMemo(function () {
|
|
261
256
|
var classNameNext = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
|
|
262
|
-
'display-handle':
|
|
257
|
+
'display-handle': selected && !disableHandles,
|
|
263
258
|
'richMedia-selected': selected,
|
|
264
259
|
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
|
|
265
260
|
});
|
|
@@ -274,7 +269,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
|
|
|
274
269
|
return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
|
|
275
270
|
}, [nodePosition, view]);
|
|
276
271
|
var enable = useMemo(function () {
|
|
277
|
-
if (disableHandles
|
|
272
|
+
if (disableHandles) {
|
|
278
273
|
return {
|
|
279
274
|
left: false,
|
|
280
275
|
right: false
|
|
@@ -381,7 +376,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
|
|
|
381
376
|
height = _calculateSizeState.height,
|
|
382
377
|
newLayout = _calculateSizeState.layout;
|
|
383
378
|
var resizerDomEl = resizerContainerRef.current;
|
|
384
|
-
if (resizerDomEl && !hasResized
|
|
379
|
+
if (resizerDomEl && !hasResized) {
|
|
385
380
|
// dispatch resize event to media node DOM element inside resizerDom
|
|
386
381
|
var mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
|
|
387
382
|
var event = new CustomEvent('resized');
|
|
@@ -516,7 +511,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
|
|
|
516
511
|
snap: snaps,
|
|
517
512
|
resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
|
|
518
513
|
"data-testid": resizerNextTestId,
|
|
519
|
-
isHandleVisible:
|
|
514
|
+
isHandleVisible: selected && !disableHandles,
|
|
520
515
|
handlePositioning: handlePositioning,
|
|
521
516
|
handleHighlight: "full-height"
|
|
522
517
|
}, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
|
|
@@ -22,7 +22,6 @@ import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, handleSides, imageA
|
|
|
22
22
|
import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
|
|
23
23
|
import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
24
24
|
import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
25
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
26
25
|
import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
|
|
27
26
|
import { wrapperStyle } from './styled';
|
|
28
27
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
@@ -54,7 +53,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
|
|
|
54
53
|
var _this$props2 = _this.props,
|
|
55
54
|
layout = _this$props2.layout,
|
|
56
55
|
state = _this$props2.view.state;
|
|
57
|
-
if (!_this.hasResized
|
|
56
|
+
if (!_this.hasResized) {
|
|
58
57
|
var _this$wrapper;
|
|
59
58
|
var mediaDomEl = (_this$wrapper = _this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
|
|
60
59
|
if (mediaDomEl) {
|
|
@@ -361,11 +360,9 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
|
|
|
361
360
|
var enable = {};
|
|
362
361
|
handleSides.forEach(function (side) {
|
|
363
362
|
var oppositeSide = side === 'left' ? 'right' : 'left';
|
|
364
|
-
if (
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
return;
|
|
368
|
-
}
|
|
363
|
+
if (_this2.props.disableHandles) {
|
|
364
|
+
enable[side] = false;
|
|
365
|
+
return;
|
|
369
366
|
}
|
|
370
367
|
enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
|
|
371
368
|
if (side === 'left' && _this2.insideInlineLike) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
-
import {
|
|
2
|
+
import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
3
|
import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
|
|
4
4
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
5
5
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
-
import {
|
|
2
|
+
import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
3
|
import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
|
|
4
4
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
5
5
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.4.0",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
67
67
|
"@atlaskit/primitives": "^19.0.0",
|
|
68
68
|
"@atlaskit/textfield": "^8.3.0",
|
|
69
|
-
"@atlaskit/tmp-editor-statsig": "^74.
|
|
69
|
+
"@atlaskit/tmp-editor-statsig": "^74.1.0",
|
|
70
70
|
"@atlaskit/tokens": "^13.0.0",
|
|
71
71
|
"@atlaskit/tooltip": "^21.2.0",
|
|
72
72
|
"@babel/runtime": "^7.0.0",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"uuid": "^3.1.0"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
81
|
-
"@atlaskit/editor-common": "^114.
|
|
81
|
+
"@atlaskit/editor-common": "^114.18.0",
|
|
82
82
|
"@atlaskit/media-core": "^37.0.0",
|
|
83
83
|
"react": "^18.2.0",
|
|
84
84
|
"react-dom": "^18.2.0",
|