@atlaskit/editor-core 187.28.1 → 187.28.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 +6 -0
- package/dist/cjs/plugins/media/toolbar/index.js +1 -1
- package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +7 -2
- package/dist/cjs/plugins/media/utils/media-single.js +7 -5
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/plugins/media/toolbar/index.js +2 -2
- package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +9 -4
- package/dist/es2019/plugins/media/utils/media-single.js +3 -4
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/plugins/media/toolbar/index.js +2 -2
- package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +9 -4
- package/dist/esm/plugins/media/utils/media-single.js +5 -4
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -0
- package/dist/types/plugins/media/utils/media-single.d.ts +1 -0
- package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -0
- package/dist/types-ts4.5/plugins/media/utils/media-single.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 187.28.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`a3c9fd814c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3c9fd814c5) - Set minimum width for media single node of video type (when first inserted and when resizing)
|
|
8
|
+
|
|
3
9
|
## 187.28.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -303,7 +303,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
303
303
|
mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
|
|
304
304
|
mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
|
|
305
305
|
validate: function validate(value) {
|
|
306
|
-
if (value !== '' && !isNaN(value) && value >= _mediaSingle.
|
|
306
|
+
if (value !== '' && !isNaN(value) && value >= _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
|
|
307
307
|
return true;
|
|
308
308
|
}
|
|
309
309
|
return false;
|
|
@@ -149,6 +149,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
149
149
|
}
|
|
150
150
|
return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
|
|
151
151
|
}));
|
|
152
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMinWidth", (0, _memoizeOne.default)(function (isVideoFile, contentWidth) {
|
|
153
|
+
return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
|
|
154
|
+
}));
|
|
152
155
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
|
|
153
156
|
var $pos = _this.$pos;
|
|
154
157
|
var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
|
|
@@ -492,7 +495,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
492
495
|
lineLength = _this$props8.lineLength;
|
|
493
496
|
var _this$state = this.state,
|
|
494
497
|
isResizing = _this$state.isResizing,
|
|
495
|
-
size = _this$state.size
|
|
498
|
+
size = _this$state.size,
|
|
499
|
+
isVideoFile = _this$state.isVideoFile;
|
|
496
500
|
var enable = {};
|
|
497
501
|
_ui.handleSides.forEach(function (side) {
|
|
498
502
|
var oppositeSide = side === 'left' ? 'right' : 'left';
|
|
@@ -510,6 +514,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
510
514
|
});
|
|
511
515
|
var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
|
|
512
516
|
var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
|
|
517
|
+
var minWidth = this.calcMinWidth(isVideoFile, lineLength);
|
|
513
518
|
return (0, _react2.jsx)("div", {
|
|
514
519
|
ref: this.saveWrapper,
|
|
515
520
|
css: (0, _styled.wrapperStyle)({
|
|
@@ -522,7 +527,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
522
527
|
isExtendedResizeExperienceOn: true
|
|
523
528
|
})
|
|
524
529
|
}, (0, _react2.jsx)(_resizer.ResizerNext, {
|
|
525
|
-
minWidth:
|
|
530
|
+
minWidth: minWidth,
|
|
526
531
|
maxWidth: maxWidth,
|
|
527
532
|
className: resizerNextClassName,
|
|
528
533
|
snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.getParentWidthForNestedMediaSingleNode = exports.createMediaSingleNode = void 0;
|
|
8
8
|
exports.isCaptionNode = isCaptionNode;
|
|
9
|
-
exports.isMediaSingle = void 0;
|
|
9
|
+
exports.isVideo = exports.isMediaSingle = void 0;
|
|
10
10
|
exports.transformSliceForMedia = transformSliceForMedia;
|
|
11
11
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
12
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
13
13
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
14
14
|
var _utils2 = require("../../../utils");
|
|
15
|
-
var _utils3 = require("@atlaskit/editor-common/utils");
|
|
16
15
|
var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
16
|
+
var _utils3 = require("@atlaskit/editor-common/utils");
|
|
17
17
|
var _mediaCommon = require("../utils/media-common");
|
|
18
18
|
var _slice = require("../../../utils/slice");
|
|
19
19
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
@@ -104,9 +104,7 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
|
|
|
104
104
|
// add undefined as fallback as we don't want media single width to have upper limit as 0
|
|
105
105
|
// if widthPluginState.width is 0, default 760 will be used
|
|
106
106
|
var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
|
|
107
|
-
var node = createMediaSingleNode(state.schema, collection, contentWidth,
|
|
108
|
-
// pass undefined to use default min width
|
|
109
|
-
undefined, alignLeftOnInsert)(mediaState);
|
|
107
|
+
var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
|
|
110
108
|
var fileExtension;
|
|
111
109
|
if (mediaState.fileName) {
|
|
112
110
|
var extensionIdx = mediaState.fileName.lastIndexOf('.');
|
|
@@ -224,6 +222,10 @@ function isCaptionNode(editorView) {
|
|
|
224
222
|
}
|
|
225
223
|
return false;
|
|
226
224
|
}
|
|
225
|
+
var isVideo = function isVideo(fileType) {
|
|
226
|
+
return !!fileType && fileType.includes('video');
|
|
227
|
+
};
|
|
228
|
+
exports.isVideo = isVideo;
|
|
227
229
|
var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
|
|
228
230
|
var domNode = view.nodeDOM(resolvedPos.pos);
|
|
229
231
|
if (resolvedPos.nodeAfter && _utils3.floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.version = exports.nextMajorVersion = exports.name = void 0;
|
|
7
7
|
var name = "@atlaskit/editor-core";
|
|
8
8
|
exports.name = name;
|
|
9
|
-
var version = "187.28.
|
|
9
|
+
var version = "187.28.2";
|
|
10
10
|
exports.version = version;
|
|
11
11
|
var nextMajorVersion = function nextMajorVersion() {
|
|
12
12
|
return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
|
|
@@ -25,7 +25,7 @@ import ImageBorderItem from '../ui/ImageBorder';
|
|
|
25
25
|
import { currentMediaNodeBorderMark } from '../utils/current-media-node';
|
|
26
26
|
import { shouldShowImageBorder } from './imageBorder';
|
|
27
27
|
import { PixelEntry } from '../ui/PixelEntry';
|
|
28
|
-
import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT,
|
|
28
|
+
import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
|
|
29
29
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
30
30
|
const remove = (state, dispatch) => {
|
|
31
31
|
if (dispatch) {
|
|
@@ -308,7 +308,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
308
308
|
mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
|
|
309
309
|
mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
|
|
310
310
|
validate: value => {
|
|
311
|
-
if (value !== '' && !isNaN(value) && value >=
|
|
311
|
+
if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
|
|
312
312
|
return true;
|
|
313
313
|
}
|
|
314
314
|
return false;
|
|
@@ -6,12 +6,12 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit
|
|
|
6
6
|
import { getMediaClient } from '@atlaskit/media-client';
|
|
7
7
|
import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
|
|
8
8
|
import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
|
|
9
|
-
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
|
|
9
|
+
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
10
10
|
import { wrapperStyle } from './styled';
|
|
11
11
|
import { ResizerNext } from '@atlaskit/editor-common/resizer';
|
|
12
12
|
import classnames from 'classnames';
|
|
13
13
|
import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
|
|
14
|
-
import {
|
|
14
|
+
import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
|
|
15
15
|
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
|
|
16
16
|
import memoizeOne from 'memoize-one';
|
|
17
17
|
import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
|
|
@@ -132,6 +132,9 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
132
132
|
}
|
|
133
133
|
return calcMediaSingleMaxWidth(containerWidth);
|
|
134
134
|
}));
|
|
135
|
+
_defineProperty(this, "calcMinWidth", memoizeOne((isVideoFile, contentWidth) => {
|
|
136
|
+
return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
|
|
137
|
+
}));
|
|
135
138
|
_defineProperty(this, "getRelativeGuides", () => {
|
|
136
139
|
const $pos = this.$pos;
|
|
137
140
|
const relativeGuides = $pos && $pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
|
|
@@ -411,7 +414,8 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
411
414
|
} = this.props;
|
|
412
415
|
const {
|
|
413
416
|
isResizing,
|
|
414
|
-
size
|
|
417
|
+
size,
|
|
418
|
+
isVideoFile
|
|
415
419
|
} = this.state;
|
|
416
420
|
const enable = {};
|
|
417
421
|
handleSides.forEach(side => {
|
|
@@ -430,6 +434,7 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
430
434
|
});
|
|
431
435
|
const resizerNextClassName = classnames(className, resizerStyles);
|
|
432
436
|
const maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
|
|
437
|
+
const minWidth = this.calcMinWidth(isVideoFile, lineLength);
|
|
433
438
|
return jsx("div", {
|
|
434
439
|
ref: this.saveWrapper,
|
|
435
440
|
css: wrapperStyle({
|
|
@@ -442,7 +447,7 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
442
447
|
isExtendedResizeExperienceOn: true
|
|
443
448
|
})
|
|
444
449
|
}, jsx(ResizerNext, {
|
|
445
|
-
minWidth:
|
|
450
|
+
minWidth: minWidth,
|
|
446
451
|
maxWidth: maxWidth,
|
|
447
452
|
className: resizerNextClassName,
|
|
448
453
|
snapGap: MEDIA_SINGLE_SNAP_GAP,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
3
|
import { checkNodeDown } from '../../../utils';
|
|
4
|
+
import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
4
5
|
import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
|
|
5
|
-
import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
|
|
6
6
|
import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
|
|
7
7
|
import { mapSlice } from '../../../utils/slice';
|
|
8
8
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
|
|
@@ -94,9 +94,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
|
|
|
94
94
|
// add undefined as fallback as we don't want media single width to have upper limit as 0
|
|
95
95
|
// if widthPluginState.width is 0, default 760 will be used
|
|
96
96
|
const contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
|
|
97
|
-
const node = createMediaSingleNode(state.schema, collection, contentWidth,
|
|
98
|
-
// pass undefined to use default min width
|
|
99
|
-
undefined, alignLeftOnInsert)(mediaState);
|
|
97
|
+
const node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
|
|
100
98
|
let fileExtension;
|
|
101
99
|
if (mediaState.fileName) {
|
|
102
100
|
const extensionIdx = mediaState.fileName.lastIndexOf('.');
|
|
@@ -219,6 +217,7 @@ export function isCaptionNode(editorView) {
|
|
|
219
217
|
}
|
|
220
218
|
return false;
|
|
221
219
|
}
|
|
220
|
+
export const isVideo = fileType => !!fileType && fileType.includes('video');
|
|
222
221
|
export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
|
|
223
222
|
const domNode = view.nodeDOM(resolvedPos.pos);
|
|
224
223
|
if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
|
|
@@ -29,7 +29,7 @@ import ImageBorderItem from '../ui/ImageBorder';
|
|
|
29
29
|
import { currentMediaNodeBorderMark } from '../utils/current-media-node';
|
|
30
30
|
import { shouldShowImageBorder } from './imageBorder';
|
|
31
31
|
import { PixelEntry } from '../ui/PixelEntry';
|
|
32
|
-
import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT,
|
|
32
|
+
import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
|
|
33
33
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
34
34
|
var remove = function remove(state, dispatch) {
|
|
35
35
|
if (dispatch) {
|
|
@@ -296,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
296
296
|
mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
|
|
297
297
|
mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
|
|
298
298
|
validate: function validate(value) {
|
|
299
|
-
if (value !== '' && !isNaN(value) && value >=
|
|
299
|
+
if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
|
|
300
300
|
return true;
|
|
301
301
|
}
|
|
302
302
|
return false;
|
|
@@ -17,12 +17,12 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit
|
|
|
17
17
|
import { getMediaClient } from '@atlaskit/media-client';
|
|
18
18
|
import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
|
|
19
19
|
import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
|
|
20
|
-
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
|
|
20
|
+
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
21
21
|
import { wrapperStyle } from './styled';
|
|
22
22
|
import { ResizerNext } from '@atlaskit/editor-common/resizer';
|
|
23
23
|
import classnames from 'classnames';
|
|
24
24
|
import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
|
|
25
|
-
import {
|
|
25
|
+
import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
|
|
26
26
|
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
|
|
27
27
|
import memoizeOne from 'memoize-one';
|
|
28
28
|
import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
|
|
@@ -142,6 +142,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
142
142
|
}
|
|
143
143
|
return calcMediaSingleMaxWidth(containerWidth);
|
|
144
144
|
}));
|
|
145
|
+
_defineProperty(_assertThisInitialized(_this), "calcMinWidth", memoizeOne(function (isVideoFile, contentWidth) {
|
|
146
|
+
return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
|
|
147
|
+
}));
|
|
145
148
|
_defineProperty(_assertThisInitialized(_this), "getRelativeGuides", function () {
|
|
146
149
|
var $pos = _this.$pos;
|
|
147
150
|
var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? getRelativeGuidelines(_this.state.relativeGuides, {
|
|
@@ -485,7 +488,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
485
488
|
lineLength = _this$props8.lineLength;
|
|
486
489
|
var _this$state = this.state,
|
|
487
490
|
isResizing = _this$state.isResizing,
|
|
488
|
-
size = _this$state.size
|
|
491
|
+
size = _this$state.size,
|
|
492
|
+
isVideoFile = _this$state.isVideoFile;
|
|
489
493
|
var enable = {};
|
|
490
494
|
handleSides.forEach(function (side) {
|
|
491
495
|
var oppositeSide = side === 'left' ? 'right' : 'left';
|
|
@@ -503,6 +507,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
503
507
|
});
|
|
504
508
|
var resizerNextClassName = classnames(className, resizerStyles);
|
|
505
509
|
var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
|
|
510
|
+
var minWidth = this.calcMinWidth(isVideoFile, lineLength);
|
|
506
511
|
return jsx("div", {
|
|
507
512
|
ref: this.saveWrapper,
|
|
508
513
|
css: wrapperStyle({
|
|
@@ -515,7 +520,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
515
520
|
isExtendedResizeExperienceOn: true
|
|
516
521
|
})
|
|
517
522
|
}, jsx(ResizerNext, {
|
|
518
|
-
minWidth:
|
|
523
|
+
minWidth: minWidth,
|
|
519
524
|
maxWidth: maxWidth,
|
|
520
525
|
className: resizerNextClassName,
|
|
521
526
|
snapGap: MEDIA_SINGLE_SNAP_GAP,
|
|
@@ -4,8 +4,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
4
4
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
5
5
|
import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
6
6
|
import { checkNodeDown } from '../../../utils';
|
|
7
|
+
import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
7
8
|
import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
|
|
8
|
-
import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
|
|
9
9
|
import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
|
|
10
10
|
import { mapSlice } from '../../../utils/slice';
|
|
11
11
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
|
|
@@ -92,9 +92,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
|
|
|
92
92
|
// add undefined as fallback as we don't want media single width to have upper limit as 0
|
|
93
93
|
// if widthPluginState.width is 0, default 760 will be used
|
|
94
94
|
var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
|
|
95
|
-
var node = createMediaSingleNode(state.schema, collection, contentWidth,
|
|
96
|
-
// pass undefined to use default min width
|
|
97
|
-
undefined, alignLeftOnInsert)(mediaState);
|
|
95
|
+
var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
|
|
98
96
|
var fileExtension;
|
|
99
97
|
if (mediaState.fileName) {
|
|
100
98
|
var extensionIdx = mediaState.fileName.lastIndexOf('.');
|
|
@@ -210,6 +208,9 @@ export function isCaptionNode(editorView) {
|
|
|
210
208
|
}
|
|
211
209
|
return false;
|
|
212
210
|
}
|
|
211
|
+
export var isVideo = function isVideo(fileType) {
|
|
212
|
+
return !!fileType && fileType.includes('video');
|
|
213
|
+
};
|
|
213
214
|
export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
|
|
214
215
|
var domNode = view.nodeDOM(resolvedPos.pos);
|
|
215
216
|
if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
|
|
@@ -46,6 +46,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
46
46
|
private setIsResizing;
|
|
47
47
|
private updateSizeInPluginState;
|
|
48
48
|
private calcMaxWidth;
|
|
49
|
+
private calcMinWidth;
|
|
49
50
|
private getRelativeGuides;
|
|
50
51
|
updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
|
|
51
52
|
calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
|
|
@@ -19,4 +19,5 @@ export declare const insertMediaSingleNode: (view: EditorView, mediaState: Media
|
|
|
19
19
|
export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
|
|
20
20
|
export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
|
|
21
21
|
export declare function isCaptionNode(editorView: EditorView): boolean;
|
|
22
|
+
export declare const isVideo: (fileType?: string) => boolean;
|
|
22
23
|
export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
|
package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts
CHANGED
|
@@ -46,6 +46,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
46
46
|
private setIsResizing;
|
|
47
47
|
private updateSizeInPluginState;
|
|
48
48
|
private calcMaxWidth;
|
|
49
|
+
private calcMinWidth;
|
|
49
50
|
private getRelativeGuides;
|
|
50
51
|
updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
|
|
51
52
|
calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
|
|
@@ -19,4 +19,5 @@ export declare const insertMediaSingleNode: (view: EditorView, mediaState: Media
|
|
|
19
19
|
export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
|
|
20
20
|
export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
|
|
21
21
|
export declare function isCaptionNode(editorView: EditorView): boolean;
|
|
22
|
+
export declare const isVideo: (fileType?: string) => boolean;
|
|
22
23
|
export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
|