@atlaskit/editor-core 187.35.2 → 187.35.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/labs/next/presets/universal.js +4 -0
- package/dist/cjs/plugins/media/toolbar/index.js +8 -1
- package/dist/cjs/plugins/media/toolbar/utils.js +15 -2
- package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +30 -13
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/labs/next/presets/universal.js +4 -0
- package/dist/es2019/plugins/media/toolbar/index.js +10 -2
- package/dist/es2019/plugins/media/toolbar/utils.js +12 -0
- package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +28 -13
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/labs/next/presets/universal.js +4 -0
- package/dist/esm/plugins/media/toolbar/index.js +9 -2
- package/dist/esm/plugins/media/toolbar/utils.js +12 -0
- package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +30 -13
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/media/toolbar/utils.d.ts +1 -0
- package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -0
- package/dist/types-ts4.5/plugins/media/toolbar/utils.d.ts +1 -0
- package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 187.35.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`10a82c0490c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10a82c0490c) - ED-19792 disable guideline plugin for comment and mobile.
|
|
8
|
+
|
|
9
|
+
## 187.35.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`1a4a64498ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a4a64498ae) - fix media floating toolbar cut off issue on align right and wrap right
|
|
14
|
+
|
|
3
15
|
## 187.35.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -39,6 +39,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
39
39
|
function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
|
|
40
40
|
var isMobile = appearance === 'mobile';
|
|
41
41
|
var isComment = appearance === 'comment';
|
|
42
|
+
var isChromeless = appearance === 'chromeless';
|
|
42
43
|
var isFullPage = (0, _isFullPage.isFullPage)(appearance);
|
|
43
44
|
var getEditorFeatureFlags = function getEditorFeatureFlags() {
|
|
44
45
|
return featureFlags;
|
|
@@ -88,6 +89,9 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
|
|
|
88
89
|
}
|
|
89
90
|
return builder;
|
|
90
91
|
}).maybeAdd(_editorPluginGuideline.guidelinePlugin, function (plugin, builder) {
|
|
92
|
+
if (isMobile || isComment || isChromeless) {
|
|
93
|
+
return builder;
|
|
94
|
+
}
|
|
91
95
|
if (props.media || props.allowTables) {
|
|
92
96
|
return builder.add(plugin);
|
|
93
97
|
}
|
|
@@ -449,6 +449,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
449
449
|
allowAltTextOnImages = options.allowAltTextOnImages,
|
|
450
450
|
providerFactory = options.providerFactory,
|
|
451
451
|
allowMediaInline = options.allowMediaInline,
|
|
452
|
+
allowResizing = options.allowResizing,
|
|
452
453
|
getEditorFeatureFlags = options.getEditorFeatureFlags;
|
|
453
454
|
var mediaPluginState = _pluginKey.stateKey.getState(state);
|
|
454
455
|
var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
|
|
@@ -512,9 +513,15 @@ var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
512
513
|
};
|
|
513
514
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
|
|
514
515
|
}
|
|
515
|
-
|
|
516
|
+
var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
|
|
516
517
|
items: items,
|
|
517
518
|
scrollable: true
|
|
518
519
|
});
|
|
520
|
+
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
|
|
521
|
+
return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
|
|
522
|
+
width: mediaPluginState.isResizing ? undefined : (0, _utils2.getMaxToolbarWidth)()
|
|
523
|
+
});
|
|
524
|
+
}
|
|
525
|
+
return toolbarConfig;
|
|
519
526
|
};
|
|
520
527
|
exports.floatingToolbar = floatingToolbar;
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.downloadMedia = exports.calcNewLayout = void 0;
|
|
7
|
+
exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.calcNewLayout = void 0;
|
|
8
8
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
10
|
var _mediaClient = require("@atlaskit/media-client");
|
|
@@ -101,4 +101,17 @@ var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
|
|
|
101
101
|
}
|
|
102
102
|
return isWrappedLayout && width !== contentWidth ? layout : 'center';
|
|
103
103
|
};
|
|
104
|
-
exports.calcNewLayout = calcNewLayout;
|
|
104
|
+
exports.calcNewLayout = calcNewLayout;
|
|
105
|
+
var maxToolbarFitWidth = 0;
|
|
106
|
+
var getMaxToolbarWidth = function getMaxToolbarWidth() {
|
|
107
|
+
var toolbar = document.querySelector("div[aria-label=\"Media floating controls\"]");
|
|
108
|
+
var toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
|
|
109
|
+
if (!toolbar) {
|
|
110
|
+
maxToolbarFitWidth = 0;
|
|
111
|
+
}
|
|
112
|
+
if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
|
|
113
|
+
maxToolbarFitWidth = toolbarWidth;
|
|
114
|
+
}
|
|
115
|
+
return maxToolbarFitWidth;
|
|
116
|
+
};
|
|
117
|
+
exports.getMaxToolbarWidth = getMaxToolbarWidth;
|
|
@@ -219,7 +219,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
219
219
|
_this.setIsResizing(true);
|
|
220
220
|
_this.updateSizeInPluginState(_this.state.size.width);
|
|
221
221
|
// re-calculate guidelines
|
|
222
|
-
_this.
|
|
222
|
+
if (_this.isGuidelineEnabled) {
|
|
223
|
+
_this.updateGuidelines();
|
|
224
|
+
}
|
|
223
225
|
});
|
|
224
226
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
|
|
225
227
|
var _this$props4 = _this.props,
|
|
@@ -230,18 +232,27 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
230
232
|
width = _this$calculateSizeSt.width,
|
|
231
233
|
height = _this$calculateSizeSt.height,
|
|
232
234
|
calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
235
|
+
if (_this.isGuidelineEnabled) {
|
|
236
|
+
var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.state.guidelines, lineLength, layout);
|
|
237
|
+
_this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
|
|
238
|
+
var relativeSnaps = (0, _guideline.getRelativeGuideSnaps)(_this.state.relativeGuides, _this.aspectRatio);
|
|
239
|
+
_this.setState({
|
|
240
|
+
size: {
|
|
241
|
+
width: width,
|
|
242
|
+
height: height
|
|
243
|
+
},
|
|
244
|
+
snaps: {
|
|
245
|
+
x: [].concat((0, _toConsumableArray2.default)(guidelineSnaps.snaps.x || []), (0, _toConsumableArray2.default)(relativeSnaps))
|
|
246
|
+
}
|
|
247
|
+
});
|
|
248
|
+
} else {
|
|
249
|
+
_this.setState({
|
|
250
|
+
size: {
|
|
251
|
+
width: width,
|
|
252
|
+
height: height
|
|
253
|
+
}
|
|
254
|
+
});
|
|
255
|
+
}
|
|
245
256
|
_this.updateSizeInPluginState(width);
|
|
246
257
|
if (calculatedWidthWithLayout.layout !== layout) {
|
|
247
258
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
@@ -423,6 +434,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
423
434
|
var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
|
|
424
435
|
return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [layoutColumn]);
|
|
425
436
|
}
|
|
437
|
+
}, {
|
|
438
|
+
key: "isGuidelineEnabled",
|
|
439
|
+
get: function get() {
|
|
440
|
+
var _this$props$pluginInj7;
|
|
441
|
+
return !!((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.guideline);
|
|
442
|
+
}
|
|
426
443
|
|
|
427
444
|
// check if is inside of layout, table, expand, nestedExpand and list item
|
|
428
445
|
}, {
|
|
@@ -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.35.
|
|
9
|
+
var version = "187.35.4";
|
|
10
10
|
exports.version = version;
|
|
11
11
|
var nextMajorVersion = function nextMajorVersion() {
|
|
12
12
|
return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
|
|
@@ -28,6 +28,7 @@ import { shouldForceTracking } from '@atlaskit/editor-common/utils';
|
|
|
28
28
|
export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
|
|
29
29
|
const isMobile = appearance === 'mobile';
|
|
30
30
|
const isComment = appearance === 'comment';
|
|
31
|
+
const isChromeless = appearance === 'chromeless';
|
|
31
32
|
const isFullPage = fullPageCheck(appearance);
|
|
32
33
|
const getEditorFeatureFlags = () => featureFlags;
|
|
33
34
|
const editorSelectionAPI = createEditorSelectionAPI();
|
|
@@ -76,6 +77,9 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
|
|
|
76
77
|
}
|
|
77
78
|
return builder;
|
|
78
79
|
}).maybeAdd(guidelinePlugin, (plugin, builder) => {
|
|
80
|
+
if (isMobile || isComment || isChromeless) {
|
|
81
|
+
return builder;
|
|
82
|
+
}
|
|
79
83
|
if (props.media || props.allowTables) {
|
|
80
84
|
return builder.add(plugin);
|
|
81
85
|
}
|
|
@@ -18,7 +18,7 @@ import { messages } from '@atlaskit/media-ui';
|
|
|
18
18
|
import { cardMessages } from '@atlaskit/editor-common/messages';
|
|
19
19
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
20
20
|
import { FilePreviewItem } from './filePreviewItem';
|
|
21
|
-
import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout } from './utils';
|
|
21
|
+
import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
|
|
22
22
|
import { isVideo } from '../utils/media-single';
|
|
23
23
|
import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
|
|
24
24
|
import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
|
|
@@ -466,6 +466,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
466
466
|
allowAltTextOnImages,
|
|
467
467
|
providerFactory,
|
|
468
468
|
allowMediaInline,
|
|
469
|
+
allowResizing,
|
|
469
470
|
getEditorFeatureFlags
|
|
470
471
|
} = options;
|
|
471
472
|
const mediaPluginState = stateKey.getState(state);
|
|
@@ -529,9 +530,16 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
|
|
|
529
530
|
};
|
|
530
531
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
|
|
531
532
|
}
|
|
532
|
-
|
|
533
|
+
const toolbarConfig = {
|
|
533
534
|
...baseToolbar,
|
|
534
535
|
items,
|
|
535
536
|
scrollable: true
|
|
536
537
|
};
|
|
538
|
+
if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
|
|
539
|
+
return {
|
|
540
|
+
...toolbarConfig,
|
|
541
|
+
width: mediaPluginState.isResizing ? undefined : getMaxToolbarWidth()
|
|
542
|
+
};
|
|
543
|
+
}
|
|
544
|
+
return toolbarConfig;
|
|
537
545
|
};
|
|
@@ -71,4 +71,16 @@ export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false
|
|
|
71
71
|
return 'wide';
|
|
72
72
|
}
|
|
73
73
|
return isWrappedLayout && width !== contentWidth ? layout : 'center';
|
|
74
|
+
};
|
|
75
|
+
let maxToolbarFitWidth = 0;
|
|
76
|
+
export const getMaxToolbarWidth = () => {
|
|
77
|
+
const toolbar = document.querySelector(`div[aria-label="Media floating controls"]`);
|
|
78
|
+
const toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
|
|
79
|
+
if (!toolbar) {
|
|
80
|
+
maxToolbarFitWidth = 0;
|
|
81
|
+
}
|
|
82
|
+
if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
|
|
83
|
+
maxToolbarFitWidth = toolbarWidth;
|
|
84
|
+
}
|
|
85
|
+
return maxToolbarFitWidth;
|
|
74
86
|
};
|
|
@@ -196,7 +196,9 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
196
196
|
this.setIsResizing(true);
|
|
197
197
|
this.updateSizeInPluginState(this.state.size.width);
|
|
198
198
|
// re-calculate guidelines
|
|
199
|
-
this.
|
|
199
|
+
if (this.isGuidelineEnabled) {
|
|
200
|
+
this.updateGuidelines();
|
|
201
|
+
}
|
|
200
202
|
});
|
|
201
203
|
_defineProperty(this, "handleResize", (size, delta) => {
|
|
202
204
|
const {
|
|
@@ -209,18 +211,27 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
209
211
|
height,
|
|
210
212
|
calculatedWidthWithLayout
|
|
211
213
|
} = this.calculateSizeState(size, delta);
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
214
|
+
if (this.isGuidelineEnabled) {
|
|
215
|
+
const guidelineSnaps = getGuidelineSnaps(this.state.guidelines, lineLength, layout);
|
|
216
|
+
this.updateActiveGuidelines(width, this.state.guidelines, guidelineSnaps);
|
|
217
|
+
const relativeSnaps = getRelativeGuideSnaps(this.state.relativeGuides, this.aspectRatio);
|
|
218
|
+
this.setState({
|
|
219
|
+
size: {
|
|
220
|
+
width,
|
|
221
|
+
height
|
|
222
|
+
},
|
|
223
|
+
snaps: {
|
|
224
|
+
x: [...(guidelineSnaps.snaps.x || []), ...relativeSnaps]
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
} else {
|
|
228
|
+
this.setState({
|
|
229
|
+
size: {
|
|
230
|
+
width,
|
|
231
|
+
height
|
|
232
|
+
}
|
|
233
|
+
});
|
|
234
|
+
}
|
|
224
235
|
this.updateSizeInPluginState(width);
|
|
225
236
|
if (calculatedWidthWithLayout.layout !== layout) {
|
|
226
237
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
@@ -374,6 +385,10 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
374
385
|
} = this.props.view.state.schema.nodes;
|
|
375
386
|
return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
|
|
376
387
|
}
|
|
388
|
+
get isGuidelineEnabled() {
|
|
389
|
+
var _this$props$pluginInj7;
|
|
390
|
+
return !!((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.guideline);
|
|
391
|
+
}
|
|
377
392
|
|
|
378
393
|
// check if is inside of layout, table, expand, nestedExpand and list item
|
|
379
394
|
isNestedNode() {
|
|
@@ -32,6 +32,7 @@ import { shouldForceTracking } from '@atlaskit/editor-common/utils';
|
|
|
32
32
|
export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
|
|
33
33
|
var isMobile = appearance === 'mobile';
|
|
34
34
|
var isComment = appearance === 'comment';
|
|
35
|
+
var isChromeless = appearance === 'chromeless';
|
|
35
36
|
var isFullPage = fullPageCheck(appearance);
|
|
36
37
|
var getEditorFeatureFlags = function getEditorFeatureFlags() {
|
|
37
38
|
return featureFlags;
|
|
@@ -81,6 +82,9 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
|
|
|
81
82
|
}
|
|
82
83
|
return builder;
|
|
83
84
|
}).maybeAdd(guidelinePlugin, function (plugin, builder) {
|
|
85
|
+
if (isMobile || isComment || isChromeless) {
|
|
86
|
+
return builder;
|
|
87
|
+
}
|
|
84
88
|
if (props.media || props.allowTables) {
|
|
85
89
|
return builder.add(plugin);
|
|
86
90
|
}
|
|
@@ -22,7 +22,7 @@ import { messages } from '@atlaskit/media-ui';
|
|
|
22
22
|
import { cardMessages } from '@atlaskit/editor-common/messages';
|
|
23
23
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
24
24
|
import { FilePreviewItem } from './filePreviewItem';
|
|
25
|
-
import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout } from './utils';
|
|
25
|
+
import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
|
|
26
26
|
import { isVideo } from '../utils/media-single';
|
|
27
27
|
import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
|
|
28
28
|
import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
|
|
@@ -442,6 +442,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
442
442
|
allowAltTextOnImages = options.allowAltTextOnImages,
|
|
443
443
|
providerFactory = options.providerFactory,
|
|
444
444
|
allowMediaInline = options.allowMediaInline,
|
|
445
|
+
allowResizing = options.allowResizing,
|
|
445
446
|
getEditorFeatureFlags = options.getEditorFeatureFlags;
|
|
446
447
|
var mediaPluginState = stateKey.getState(state);
|
|
447
448
|
var mediaLinkingState = getMediaLinkingState(state);
|
|
@@ -505,8 +506,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
505
506
|
};
|
|
506
507
|
items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
|
|
507
508
|
}
|
|
508
|
-
|
|
509
|
+
var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
|
|
509
510
|
items: items,
|
|
510
511
|
scrollable: true
|
|
511
512
|
});
|
|
513
|
+
if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
|
|
514
|
+
return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
|
|
515
|
+
width: mediaPluginState.isResizing ? undefined : getMaxToolbarWidth()
|
|
516
|
+
});
|
|
517
|
+
}
|
|
518
|
+
return toolbarConfig;
|
|
512
519
|
};
|
|
@@ -88,4 +88,16 @@ export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
|
|
|
88
88
|
return 'wide';
|
|
89
89
|
}
|
|
90
90
|
return isWrappedLayout && width !== contentWidth ? layout : 'center';
|
|
91
|
+
};
|
|
92
|
+
var maxToolbarFitWidth = 0;
|
|
93
|
+
export var getMaxToolbarWidth = function getMaxToolbarWidth() {
|
|
94
|
+
var toolbar = document.querySelector("div[aria-label=\"Media floating controls\"]");
|
|
95
|
+
var toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
|
|
96
|
+
if (!toolbar) {
|
|
97
|
+
maxToolbarFitWidth = 0;
|
|
98
|
+
}
|
|
99
|
+
if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
|
|
100
|
+
maxToolbarFitWidth = toolbarWidth;
|
|
101
|
+
}
|
|
102
|
+
return maxToolbarFitWidth;
|
|
91
103
|
};
|
|
@@ -212,7 +212,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
212
212
|
_this.setIsResizing(true);
|
|
213
213
|
_this.updateSizeInPluginState(_this.state.size.width);
|
|
214
214
|
// re-calculate guidelines
|
|
215
|
-
_this.
|
|
215
|
+
if (_this.isGuidelineEnabled) {
|
|
216
|
+
_this.updateGuidelines();
|
|
217
|
+
}
|
|
216
218
|
});
|
|
217
219
|
_defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
|
|
218
220
|
var _this$props4 = _this.props,
|
|
@@ -223,18 +225,27 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
223
225
|
width = _this$calculateSizeSt.width,
|
|
224
226
|
height = _this$calculateSizeSt.height,
|
|
225
227
|
calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
228
|
+
if (_this.isGuidelineEnabled) {
|
|
229
|
+
var guidelineSnaps = getGuidelineSnaps(_this.state.guidelines, lineLength, layout);
|
|
230
|
+
_this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
|
|
231
|
+
var relativeSnaps = getRelativeGuideSnaps(_this.state.relativeGuides, _this.aspectRatio);
|
|
232
|
+
_this.setState({
|
|
233
|
+
size: {
|
|
234
|
+
width: width,
|
|
235
|
+
height: height
|
|
236
|
+
},
|
|
237
|
+
snaps: {
|
|
238
|
+
x: [].concat(_toConsumableArray(guidelineSnaps.snaps.x || []), _toConsumableArray(relativeSnaps))
|
|
239
|
+
}
|
|
240
|
+
});
|
|
241
|
+
} else {
|
|
242
|
+
_this.setState({
|
|
243
|
+
size: {
|
|
244
|
+
width: width,
|
|
245
|
+
height: height
|
|
246
|
+
}
|
|
247
|
+
});
|
|
248
|
+
}
|
|
238
249
|
_this.updateSizeInPluginState(width);
|
|
239
250
|
if (calculatedWidthWithLayout.layout !== layout) {
|
|
240
251
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
@@ -416,6 +427,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
416
427
|
var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
|
|
417
428
|
return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
|
|
418
429
|
}
|
|
430
|
+
}, {
|
|
431
|
+
key: "isGuidelineEnabled",
|
|
432
|
+
get: function get() {
|
|
433
|
+
var _this$props$pluginInj7;
|
|
434
|
+
return !!((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.guideline);
|
|
435
|
+
}
|
|
419
436
|
|
|
420
437
|
// check if is inside of layout, table, expand, nestedExpand and list item
|
|
421
438
|
}, {
|
|
@@ -8,3 +8,4 @@ export declare const removeMediaGroupNode: (state: EditorState) => import("prose
|
|
|
8
8
|
export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
|
|
9
9
|
export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;
|
|
10
10
|
export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean) => RichMediaLayout;
|
|
11
|
+
export declare const getMaxToolbarWidth: () => number;
|
|
@@ -31,6 +31,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
31
31
|
get aspectRatio(): number;
|
|
32
32
|
get insideInlineLike(): boolean;
|
|
33
33
|
get insideLayout(): boolean;
|
|
34
|
+
get isGuidelineEnabled(): boolean;
|
|
34
35
|
isNestedNode(): boolean;
|
|
35
36
|
private getDefaultGuidelines;
|
|
36
37
|
private updateGuidelines;
|
|
@@ -8,3 +8,4 @@ export declare const removeMediaGroupNode: (state: EditorState) => import("prose
|
|
|
8
8
|
export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils/dist/types").FindResult;
|
|
9
9
|
export declare const getPixelWidthOfElement: (editorView: EditorView, pos: number, mediaWidth: number) => number;
|
|
10
10
|
export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean) => RichMediaLayout;
|
|
11
|
+
export declare const getMaxToolbarWidth: () => number;
|
package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
31
31
|
get aspectRatio(): number;
|
|
32
32
|
get insideInlineLike(): boolean;
|
|
33
33
|
get insideLayout(): boolean;
|
|
34
|
+
get isGuidelineEnabled(): boolean;
|
|
34
35
|
isNestedNode(): boolean;
|
|
35
36
|
private getDefaultGuidelines;
|
|
36
37
|
private updateGuidelines;
|