@atlaskit/editor-core 187.14.3 → 187.14.7
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 +22 -0
- package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js +4 -1
- package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +153 -192
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js +4 -1
- package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +126 -167
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js +4 -1
- package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +155 -194
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/labs/next/presets/default.d.ts +12 -4
- package/dist/types/plugins/avatar-group/index.d.ts +1 -1
- package/dist/types/plugins/avatar-group/ui/AvatarGroupPluginWrapper.d.ts +1 -1
- package/dist/types/plugins/code-block/types.d.ts +1 -1
- package/dist/types/plugins/collab-edit/index.d.ts +1 -2
- package/dist/types/plugins/collab-edit/types.d.ts +2 -25
- package/dist/types/plugins/collab-edit/utils.d.ts +1 -1
- package/dist/types/plugins/expand/index.d.ts +1 -1
- package/dist/types/plugins/extension/index.d.ts +3 -3
- package/dist/types/plugins/layout/types.d.ts +1 -1
- package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +21 -3
- package/dist/types/plugins/panel/types.d.ts +1 -1
- package/dist/types/plugins/selection/types.d.ts +1 -3
- package/dist/types/plugins/tasks-and-decisions/types.d.ts +2 -2
- package/dist/types/types/editor-appearance-component.d.ts +1 -1
- package/dist/types/types/editor-props.d.ts +1 -1
- package/dist/types/ui/Appearance/FullPage/FullPageToolbar.d.ts +1 -1
- package/dist/types-ts4.5/labs/next/presets/default.d.ts +12 -4
- package/dist/types-ts4.5/plugins/avatar-group/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/avatar-group/ui/AvatarGroupPluginWrapper.d.ts +1 -1
- package/dist/types-ts4.5/plugins/code-block/types.d.ts +1 -1
- package/dist/types-ts4.5/plugins/collab-edit/index.d.ts +1 -2
- package/dist/types-ts4.5/plugins/collab-edit/types.d.ts +2 -25
- package/dist/types-ts4.5/plugins/collab-edit/utils.d.ts +1 -1
- package/dist/types-ts4.5/plugins/expand/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/extension/index.d.ts +3 -3
- package/dist/types-ts4.5/plugins/layout/types.d.ts +1 -1
- package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +21 -3
- package/dist/types-ts4.5/plugins/panel/types.d.ts +1 -1
- package/dist/types-ts4.5/plugins/selection/types.d.ts +1 -3
- package/dist/types-ts4.5/plugins/tasks-and-decisions/types.d.ts +2 -2
- package/dist/types-ts4.5/types/editor-appearance-component.d.ts +1 -1
- package/dist/types-ts4.5/types/editor-props.d.ts +1 -1
- package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageToolbar.d.ts +1 -1
- package/package.json +4 -4
- package/report.api.md +4 -42
- package/tmp/api-report-tmp.d.ts +4 -41
|
@@ -26,8 +26,8 @@ import { messages } from './resizable-media-single-messages';
|
|
|
26
26
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
27
27
|
import classnames from 'classnames';
|
|
28
28
|
import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
|
|
29
|
-
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP,
|
|
30
|
-
import { findClosestSnap,
|
|
29
|
+
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
30
|
+
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
|
|
31
31
|
export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
32
32
|
|
|
33
33
|
// TODO: Create new fixed image size event
|
|
@@ -51,12 +51,28 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
51
51
|
var _this;
|
|
52
52
|
_classCallCheck(this, ResizableMediaSingleNext);
|
|
53
53
|
_this = _super.call(this, props);
|
|
54
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
54
|
+
_defineProperty(_assertThisInitialized(_this), "guidelines", []);
|
|
55
|
+
_defineProperty(_assertThisInitialized(_this), "getAllGuidelines", function () {
|
|
55
56
|
var _this$props = _this.props,
|
|
56
|
-
|
|
57
|
-
state = _this$props.view.state,
|
|
58
|
-
containerWidth = _this$props.containerWidth,
|
|
57
|
+
view = _this$props.view,
|
|
59
58
|
lineLength = _this$props.lineLength;
|
|
59
|
+
var defaultGuidelines = _this.getDefaultGuidelines();
|
|
60
|
+
// disable guidelines for nested media single node
|
|
61
|
+
var dynamicGuidelines = _this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
|
|
62
|
+
styles: {
|
|
63
|
+
lineStyle: 'dashed'
|
|
64
|
+
},
|
|
65
|
+
show: false
|
|
66
|
+
});
|
|
67
|
+
var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
|
|
68
|
+
return guidelines;
|
|
69
|
+
});
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
|
|
71
|
+
var _this$props2 = _this.props,
|
|
72
|
+
layout = _this$props2.layout,
|
|
73
|
+
state = _this$props2.view.state,
|
|
74
|
+
containerWidth = _this$props2.containerWidth,
|
|
75
|
+
lineLength = _this$props2.lineLength;
|
|
60
76
|
var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
|
|
61
77
|
_this.setState({
|
|
62
78
|
resizedPctWidth: newPct
|
|
@@ -95,10 +111,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
95
111
|
return _this.insideInlineLike ? calcColumnsFromPx(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
|
|
96
112
|
});
|
|
97
113
|
_defineProperty(_assertThisInitialized(_this), "calcPxHeight", function (newWidth) {
|
|
98
|
-
var _this$
|
|
99
|
-
_this$
|
|
100
|
-
width = _this$
|
|
101
|
-
height = _this$
|
|
114
|
+
var _this$props3 = _this.props,
|
|
115
|
+
_this$props3$width = _this$props3.width,
|
|
116
|
+
width = _this$props3$width === void 0 ? newWidth : _this$props3$width,
|
|
117
|
+
height = _this$props3.height;
|
|
102
118
|
return Math.round(height / width * newWidth);
|
|
103
119
|
});
|
|
104
120
|
_defineProperty(_assertThisInitialized(_this), "saveWrapper", function (wrapper) {
|
|
@@ -119,6 +135,111 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
119
135
|
tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
|
|
120
136
|
return dispatch(tr);
|
|
121
137
|
});
|
|
138
|
+
_defineProperty(_assertThisInitialized(_this), "updateActiveGuidelines", function () {
|
|
139
|
+
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
140
|
+
var guidelines = arguments.length > 1 ? arguments[1] : undefined;
|
|
141
|
+
var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
|
|
142
|
+
if (guidelineSnapsReference.snaps.x) {
|
|
143
|
+
var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
|
|
144
|
+
gap = _findClosestSnap.gap,
|
|
145
|
+
activeGuidelineKeys = _findClosestSnap.keys;
|
|
146
|
+
_this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
_defineProperty(_assertThisInitialized(_this), "roundPixelValue", function (value) {
|
|
150
|
+
return Math.round(value);
|
|
151
|
+
});
|
|
152
|
+
_defineProperty(_assertThisInitialized(_this), "getHeightFromNewWidth", function (originalWidth, originalHeight, newWidth) {
|
|
153
|
+
return _this.roundPixelValue(originalHeight / originalWidth * newWidth);
|
|
154
|
+
});
|
|
155
|
+
_defineProperty(_assertThisInitialized(_this), "calculateSizeState", function (size, delta) {
|
|
156
|
+
var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
157
|
+
var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
|
|
158
|
+
var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
159
|
+
var calculatedWidth = _this.roundPixelValue(size.width + delta.width);
|
|
160
|
+
var calculatedWidthWithLayout = _this.calcNewSize(calculatedWidth, onResizeStop);
|
|
161
|
+
var calculatedHeightWithLayout = _this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
|
|
162
|
+
return {
|
|
163
|
+
width: calculatedWidth,
|
|
164
|
+
height: calculatedHeightWithLayout,
|
|
165
|
+
calculatedWidthWithLayout: calculatedWidthWithLayout
|
|
166
|
+
};
|
|
167
|
+
});
|
|
168
|
+
_defineProperty(_assertThisInitialized(_this), "selectCurrentMediaNode", function () {
|
|
169
|
+
// TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
|
|
170
|
+
if (typeof _this.props.getPos === 'function') {
|
|
171
|
+
var propPos = _this.props.getPos();
|
|
172
|
+
if (propPos !== undefined) {
|
|
173
|
+
setNodeSelection(_this.props.view, propPos);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
_defineProperty(_assertThisInitialized(_this), "handleResizeStart", function () {
|
|
178
|
+
_this.setState({
|
|
179
|
+
isResizing: true
|
|
180
|
+
});
|
|
181
|
+
_this.selectCurrentMediaNode();
|
|
182
|
+
_this.setIsResizing(true);
|
|
183
|
+
// re-calucate guidelines
|
|
184
|
+
_this.guidelines = _this.getAllGuidelines();
|
|
185
|
+
return 0;
|
|
186
|
+
});
|
|
187
|
+
_defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
|
|
188
|
+
var _this$props4 = _this.props,
|
|
189
|
+
originalWidth = _this$props4.width,
|
|
190
|
+
originalHeight = _this$props4.height,
|
|
191
|
+
layout = _this$props4.layout,
|
|
192
|
+
updateSize = _this$props4.updateSize,
|
|
193
|
+
lineLength = _this$props4.lineLength;
|
|
194
|
+
var _this$calculateSizeSt = _this.calculateSizeState(size, delta, originalWidth, originalHeight),
|
|
195
|
+
width = _this$calculateSizeSt.width,
|
|
196
|
+
height = _this$calculateSizeSt.height,
|
|
197
|
+
calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
|
|
198
|
+
var guidelineSnaps = getGuidelineSnaps(_this.guidelines, lineLength, layout);
|
|
199
|
+
_this.updateActiveGuidelines(width, _this.guidelines, guidelineSnaps);
|
|
200
|
+
_this.setState({
|
|
201
|
+
size: {
|
|
202
|
+
width: width,
|
|
203
|
+
height: height
|
|
204
|
+
},
|
|
205
|
+
snaps: guidelineSnaps.snaps
|
|
206
|
+
});
|
|
207
|
+
if (calculatedWidthWithLayout.layout !== layout) {
|
|
208
|
+
updateSize(width, calculatedWidthWithLayout.layout);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
// TODO: Update once type updated from editor common resizer
|
|
212
|
+
return 0;
|
|
213
|
+
});
|
|
214
|
+
_defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
|
|
215
|
+
var _this$props5 = _this.props,
|
|
216
|
+
originalWidth = _this$props5.width,
|
|
217
|
+
originalHeight = _this$props5.height,
|
|
218
|
+
updateSize = _this$props5.updateSize,
|
|
219
|
+
dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
|
|
220
|
+
nodeType = _this$props5.nodeType;
|
|
221
|
+
var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, originalWidth, originalHeight, true),
|
|
222
|
+
width = _this$calculateSizeSt2.width,
|
|
223
|
+
height = _this$calculateSizeSt2.height,
|
|
224
|
+
calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
|
|
225
|
+
_this.setIsResizing(false);
|
|
226
|
+
_this.displayGuideline([]);
|
|
227
|
+
if (dispatchAnalyticsEvent) {
|
|
228
|
+
dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
|
|
229
|
+
}
|
|
230
|
+
_this.setState({
|
|
231
|
+
isResizing: false,
|
|
232
|
+
size: {
|
|
233
|
+
width: width,
|
|
234
|
+
height: height
|
|
235
|
+
}
|
|
236
|
+
}, function () {
|
|
237
|
+
updateSize(width, calculatedWidthWithLayout.layout);
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
// TODO: Update once type updated from editor common resizer
|
|
241
|
+
return 0;
|
|
242
|
+
});
|
|
122
243
|
var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
|
|
123
244
|
_this.state = {
|
|
124
245
|
offsetLeft: calculateOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
|
|
@@ -128,7 +249,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
128
249
|
size: {
|
|
129
250
|
width: initialWidth,
|
|
130
251
|
height: _this.calcPxHeight(initialWidth)
|
|
131
|
-
}
|
|
252
|
+
},
|
|
253
|
+
snaps: {}
|
|
132
254
|
};
|
|
133
255
|
return _this;
|
|
134
256
|
}
|
|
@@ -142,15 +264,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
142
264
|
_createClass(ResizableMediaSingleNext, [{
|
|
143
265
|
key: "calcInitialWidth",
|
|
144
266
|
value: function calcInitialWidth() {
|
|
145
|
-
var _this$
|
|
146
|
-
origWidth = _this$
|
|
147
|
-
contentWidth = _this$
|
|
148
|
-
containerWidth = _this$
|
|
267
|
+
var _this$props6 = this.props,
|
|
268
|
+
origWidth = _this$props6.width,
|
|
269
|
+
contentWidth = _this$props6.lineLength,
|
|
270
|
+
containerWidth = _this$props6.containerWidth;
|
|
149
271
|
return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
|
|
150
272
|
}
|
|
151
273
|
}, {
|
|
152
274
|
key: "componentDidUpdate",
|
|
153
|
-
value: function componentDidUpdate(prevProps
|
|
275
|
+
value: function componentDidUpdate(prevProps) {
|
|
154
276
|
var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
|
|
155
277
|
if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
|
|
156
278
|
this.setState({
|
|
@@ -165,10 +287,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
165
287
|
resizedPctWidth: this.props.pctWidth
|
|
166
288
|
});
|
|
167
289
|
}
|
|
168
|
-
if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
|
|
169
|
-
var guidelines = this.getDefaultGuidelines();
|
|
170
|
-
this.displayGuideline(guidelines);
|
|
171
|
-
}
|
|
172
290
|
if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
|
|
173
291
|
// update size when lineLength becomes defined later
|
|
174
292
|
// ensures extended experience renders legacy image with the same size as the legacy experience
|
|
@@ -192,78 +310,14 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
192
310
|
}, {
|
|
193
311
|
key: "getDefaultGuidelines",
|
|
194
312
|
value: function getDefaultGuidelines() {
|
|
195
|
-
var _this$
|
|
196
|
-
lineLength = _this$
|
|
197
|
-
containerWidth = _this$
|
|
198
|
-
fullWidthMode = _this$
|
|
313
|
+
var _this$props7 = this.props,
|
|
314
|
+
lineLength = _this$props7.lineLength,
|
|
315
|
+
containerWidth = _this$props7.containerWidth,
|
|
316
|
+
fullWidthMode = _this$props7.fullWidthMode;
|
|
199
317
|
|
|
200
318
|
// disable guidelines for nested media single node
|
|
201
319
|
return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
|
|
202
320
|
}
|
|
203
|
-
|
|
204
|
-
// Calculate width of media nodes for snaps based on dynamic guidelines
|
|
205
|
-
// TODO: refactor this later, maybe use state to hold snaps array
|
|
206
|
-
}, {
|
|
207
|
-
key: "getSnaps",
|
|
208
|
-
value: function getSnaps() {
|
|
209
|
-
var _this$props5 = this.props,
|
|
210
|
-
view = _this$props5.view,
|
|
211
|
-
lineLength = _this$props5.lineLength;
|
|
212
|
-
var dom = view.dom;
|
|
213
|
-
var defaultGuidelines = this.getDefaultGuidelines();
|
|
214
|
-
// disable guidelines for nested media single node
|
|
215
|
-
var dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
|
|
216
|
-
styles: {
|
|
217
|
-
lineStyle: 'dashed'
|
|
218
|
-
},
|
|
219
|
-
show: false
|
|
220
|
-
});
|
|
221
|
-
var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
|
|
222
|
-
var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
|
|
223
|
-
var _dom$getBoundingClien = dom.getBoundingClientRect(),
|
|
224
|
-
width = _dom$getBoundingClien.width;
|
|
225
|
-
var halfWidth = width / 2;
|
|
226
|
-
var selectedMedia = dom.querySelector(mediaSingleSelector);
|
|
227
|
-
if (selectedMedia) {
|
|
228
|
-
var pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
|
|
229
|
-
var layout = selectedMedia.getAttribute('layout');
|
|
230
|
-
var snap = 0;
|
|
231
|
-
switch (layout) {
|
|
232
|
-
case 'align-start':
|
|
233
|
-
case 'wrap-left':
|
|
234
|
-
snap = pixelWidth - halfWidth;
|
|
235
|
-
break;
|
|
236
|
-
case 'align-end':
|
|
237
|
-
case 'wrap-right':
|
|
238
|
-
snap = width - pixelWidth - halfWidth;
|
|
239
|
-
break;
|
|
240
|
-
case 'center':
|
|
241
|
-
case 'wide':
|
|
242
|
-
case 'full-width':
|
|
243
|
-
snap = -pixelWidth / 2;
|
|
244
|
-
break;
|
|
245
|
-
// we ingnore full-width and wide
|
|
246
|
-
default:
|
|
247
|
-
snap = 0;
|
|
248
|
-
}
|
|
249
|
-
var snapWidths = getSnapWidth(guidelines, pixelWidth, snap, layout);
|
|
250
|
-
var snapToWidths = snapWidths.map(function (s) {
|
|
251
|
-
return s && s.width;
|
|
252
|
-
});
|
|
253
|
-
|
|
254
|
-
// update guidelines
|
|
255
|
-
if (this.state.isResizing) {
|
|
256
|
-
var _findClosestSnap = findClosestSnap(this.state.size.width, snapToWidths, snapWidths, MEDIA_SINGLE_HIGHLIGHT_GAP),
|
|
257
|
-
gap = _findClosestSnap.gap,
|
|
258
|
-
activeGuidelineKeys = _findClosestSnap.keys;
|
|
259
|
-
this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
|
|
260
|
-
}
|
|
261
|
-
return snapToWidths.length > 0 ? {
|
|
262
|
-
x: snapToWidths
|
|
263
|
-
} : {};
|
|
264
|
-
}
|
|
265
|
-
return {};
|
|
266
|
-
}
|
|
267
321
|
}, {
|
|
268
322
|
key: "wrappedLayout",
|
|
269
323
|
get: function get() {
|
|
@@ -404,15 +458,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
404
458
|
key: "render",
|
|
405
459
|
value: function render() {
|
|
406
460
|
var _this2 = this;
|
|
407
|
-
var _this$
|
|
408
|
-
origWidth = _this$
|
|
409
|
-
layout = _this$
|
|
410
|
-
pctWidth = _this$
|
|
411
|
-
containerWidth = _this$
|
|
412
|
-
fullWidthMode = _this$
|
|
413
|
-
selected = _this$
|
|
414
|
-
children = _this$
|
|
415
|
-
intl = _this$
|
|
461
|
+
var _this$props8 = this.props,
|
|
462
|
+
origWidth = _this$props8.width,
|
|
463
|
+
layout = _this$props8.layout,
|
|
464
|
+
pctWidth = _this$props8.pctWidth,
|
|
465
|
+
containerWidth = _this$props8.containerWidth,
|
|
466
|
+
fullWidthMode = _this$props8.fullWidthMode,
|
|
467
|
+
selected = _this$props8.selected,
|
|
468
|
+
children = _this$props8.children,
|
|
469
|
+
intl = _this$props8.intl;
|
|
416
470
|
var _this$state = this.state,
|
|
417
471
|
isResizing = _this$state.isResizing,
|
|
418
472
|
size = _this$state.size;
|
|
@@ -425,99 +479,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
425
479
|
}
|
|
426
480
|
});
|
|
427
481
|
|
|
428
|
-
/**
|
|
429
|
-
* NEW REFACTOR
|
|
430
|
-
*/
|
|
431
|
-
var roundPixelValue = function roundPixelValue(value) {
|
|
432
|
-
return Math.round(value);
|
|
433
|
-
};
|
|
434
|
-
var getHeightFromNewWidth = function getHeightFromNewWidth(originalWidth, originalHeight, newWidth) {
|
|
435
|
-
return roundPixelValue(originalHeight / originalWidth * newWidth);
|
|
436
|
-
};
|
|
437
|
-
var calculateSizeState = function calculateSizeState(size, delta) {
|
|
438
|
-
var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
439
|
-
var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
|
|
440
|
-
var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
441
|
-
var calculatedWidth = roundPixelValue(size.width + delta.width);
|
|
442
|
-
var calculatedWidthWithLayout = _this2.calcNewSize(calculatedWidth, onResizeStop);
|
|
443
|
-
var calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
|
|
444
|
-
return {
|
|
445
|
-
width: calculatedWidth,
|
|
446
|
-
height: calculatedHeightWithLayout,
|
|
447
|
-
calculatedWidthWithLayout: calculatedWidthWithLayout
|
|
448
|
-
};
|
|
449
|
-
};
|
|
450
|
-
var selectCurrentMediaNode = function selectCurrentMediaNode() {
|
|
451
|
-
if (!_this2.props.selected && typeof _this2.props.getPos === 'function') {
|
|
452
|
-
var propPos = _this2.props.getPos();
|
|
453
|
-
if (propPos !== undefined) {
|
|
454
|
-
setNodeSelection(_this2.props.view, propPos);
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
};
|
|
458
|
-
var handleResizeStart = function handleResizeStart() {
|
|
459
|
-
_this2.setState({
|
|
460
|
-
isResizing: true
|
|
461
|
-
});
|
|
462
|
-
selectCurrentMediaNode();
|
|
463
|
-
_this2.setIsResizing(true);
|
|
464
|
-
|
|
465
|
-
// TODO: Update once type updated from editor common resizer
|
|
466
|
-
return 0;
|
|
467
|
-
};
|
|
468
|
-
var handleResize = function handleResize(size, delta) {
|
|
469
|
-
var _this2$props = _this2.props,
|
|
470
|
-
originalWidth = _this2$props.width,
|
|
471
|
-
originalHeight = _this2$props.height,
|
|
472
|
-
layout = _this2$props.layout,
|
|
473
|
-
updateSize = _this2$props.updateSize;
|
|
474
|
-
var _calculateSizeState = calculateSizeState(size, delta, originalWidth, originalHeight),
|
|
475
|
-
width = _calculateSizeState.width,
|
|
476
|
-
height = _calculateSizeState.height,
|
|
477
|
-
calculatedWidthWithLayout = _calculateSizeState.calculatedWidthWithLayout;
|
|
478
|
-
_this2.setState({
|
|
479
|
-
size: {
|
|
480
|
-
width: width,
|
|
481
|
-
height: height
|
|
482
|
-
}
|
|
483
|
-
});
|
|
484
|
-
if (calculatedWidthWithLayout.layout !== layout) {
|
|
485
|
-
updateSize(width, calculatedWidthWithLayout.layout);
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
// TODO: Update once type updated from editor common resizer
|
|
489
|
-
return 0;
|
|
490
|
-
};
|
|
491
|
-
var handleResizeStop = function handleResizeStop(size, delta) {
|
|
492
|
-
var _this2$props2 = _this2.props,
|
|
493
|
-
originalWidth = _this2$props2.width,
|
|
494
|
-
originalHeight = _this2$props2.height,
|
|
495
|
-
updateSize = _this2$props2.updateSize,
|
|
496
|
-
dispatchAnalyticsEvent = _this2$props2.dispatchAnalyticsEvent,
|
|
497
|
-
nodeType = _this2$props2.nodeType;
|
|
498
|
-
var _calculateSizeState2 = calculateSizeState(size, delta, originalWidth, originalHeight, true),
|
|
499
|
-
width = _calculateSizeState2.width,
|
|
500
|
-
height = _calculateSizeState2.height,
|
|
501
|
-
calculatedWidthWithLayout = _calculateSizeState2.calculatedWidthWithLayout;
|
|
502
|
-
_this2.setIsResizing(false);
|
|
503
|
-
_this2.displayGuideline([]);
|
|
504
|
-
if (dispatchAnalyticsEvent) {
|
|
505
|
-
dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
|
|
506
|
-
}
|
|
507
|
-
_this2.setState({
|
|
508
|
-
isResizing: false,
|
|
509
|
-
size: {
|
|
510
|
-
width: width,
|
|
511
|
-
height: height
|
|
512
|
-
}
|
|
513
|
-
}, function () {
|
|
514
|
-
updateSize(width, calculatedWidthWithLayout.layout);
|
|
515
|
-
});
|
|
516
|
-
|
|
517
|
-
// TODO: Update once type updated from editor common resizer
|
|
518
|
-
return 0;
|
|
519
|
-
};
|
|
520
|
-
|
|
521
482
|
// TODO: Clean up where this lives and how it gets generated
|
|
522
483
|
var className = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
|
|
523
484
|
'not-resized': !pctWidth,
|
|
@@ -544,10 +505,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
544
505
|
snapGap: MEDIA_SINGLE_SNAP_GAP,
|
|
545
506
|
enable: enable,
|
|
546
507
|
width: size.width,
|
|
547
|
-
handleResizeStart: handleResizeStart,
|
|
548
|
-
handleResize: handleResize,
|
|
549
|
-
handleResizeStop: handleResizeStop,
|
|
550
|
-
snap: this.
|
|
508
|
+
handleResizeStart: this.handleResizeStart,
|
|
509
|
+
handleResize: this.handleResize,
|
|
510
|
+
handleResizeStop: this.handleResizeStop,
|
|
511
|
+
snap: this.state.snaps,
|
|
551
512
|
resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
|
|
552
513
|
"data-testid": resizerNextTestId
|
|
553
514
|
}, showSizeGuide && jsx(ResizeLabel, {
|
package/dist/esm/version.json
CHANGED
|
@@ -344,11 +344,13 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
|
|
|
344
344
|
}>>];
|
|
345
345
|
actions: {
|
|
346
346
|
prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
|
|
347
|
-
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
348
347
|
hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
|
|
349
348
|
insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
|
|
350
349
|
updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
|
|
351
350
|
};
|
|
351
|
+
commands: {
|
|
352
|
+
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
353
|
+
};
|
|
352
354
|
sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
|
|
353
355
|
}> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"hyperlink", {
|
|
354
356
|
pluginConfiguration: HyperlinkPluginOptions | undefined;
|
|
@@ -389,11 +391,13 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
|
|
|
389
391
|
}>>];
|
|
390
392
|
actions: {
|
|
391
393
|
prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
|
|
392
|
-
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
393
394
|
hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
|
|
394
395
|
insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
|
|
395
396
|
updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
|
|
396
397
|
};
|
|
398
|
+
commands: {
|
|
399
|
+
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
400
|
+
};
|
|
397
401
|
sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
|
|
398
402
|
}>, ...import("@atlaskit/editor-common/types").AllEditorPresetPluginTypes[]]>;
|
|
399
403
|
export declare function useDefaultPreset(props: EditorPresetProps & DefaultPresetPluginOptions): EditorPresetBuilder<[...string[], "hyperlink", "textFormatting", "width", "quickInsert", "typeAhead", "unsupportedContent", "editorDisabled", "submitEditor", "fakeTextCursor", "floatingToolbar", "selection", "codeBlock"], [(config: CodeBlockOptions, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"codeBlock", {
|
|
@@ -703,11 +707,13 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
|
|
|
703
707
|
}>>];
|
|
704
708
|
actions: {
|
|
705
709
|
prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
|
|
706
|
-
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
707
710
|
hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
|
|
708
711
|
insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
|
|
709
712
|
updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
|
|
710
713
|
};
|
|
714
|
+
commands: {
|
|
715
|
+
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
716
|
+
};
|
|
711
717
|
sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
|
|
712
718
|
}> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"hyperlink", {
|
|
713
719
|
pluginConfiguration: HyperlinkPluginOptions | undefined;
|
|
@@ -748,10 +754,12 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
|
|
|
748
754
|
}>>];
|
|
749
755
|
actions: {
|
|
750
756
|
prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
|
|
751
|
-
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
752
757
|
hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
|
|
753
758
|
insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
|
|
754
759
|
updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
|
|
755
760
|
};
|
|
761
|
+
commands: {
|
|
762
|
+
showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
|
|
763
|
+
};
|
|
756
764
|
sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
|
|
757
765
|
}>, ...import("@atlaskit/editor-common/types").AllEditorPresetPluginTypes[]]>[];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
-
import { CollabEditOptions } from '
|
|
2
|
+
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
3
3
|
import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
|
|
4
4
|
type Config = {
|
|
5
5
|
collabEdit?: CollabEditOptions;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from '@emotion/react';
|
|
2
2
|
import type { EventDispatcher } from '../../../event-dispatcher';
|
|
3
3
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
import type { CollabEditOptions } from '
|
|
4
|
+
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
5
5
|
import type { DispatchAnalyticsEvent } from '../../analytics';
|
|
6
6
|
import type { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
7
7
|
declare const AvatarGroupPluginWrapper: (props: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { EditorAppearance } from '../../types';
|
|
2
|
-
import { LongPressSelectionPluginOptions } from '
|
|
2
|
+
import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
|
|
3
3
|
export interface CodeBlockOptions extends LongPressSelectionPluginOptions {
|
|
4
4
|
allowCopyToClipboard?: boolean;
|
|
5
5
|
allowCompositionInputOverride?: boolean;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import { pluginKey } from './plugin';
|
|
3
|
-
import {
|
|
3
|
+
import { PrivateCollabEditOptions } from './types';
|
|
4
4
|
import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
|
|
5
5
|
import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
6
6
|
export { pluginKey };
|
|
7
|
-
export type { CollabEditOptions };
|
|
8
7
|
declare const collabEditPlugin: NextEditorPlugin<'collabEdit', {
|
|
9
8
|
pluginConfiguration: PrivateCollabEditOptions;
|
|
10
9
|
dependencies: [
|
|
@@ -1,29 +1,6 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
import { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
3
1
|
import type { CollabEditProvider, SyncUpErrorFunction } from '@atlaskit/collab-provider';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
};
|
|
7
|
-
export type InviteToEditButtonProps = {
|
|
8
|
-
onClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
|
-
selected: boolean;
|
|
10
|
-
};
|
|
11
|
-
export interface CollabInviteToEditProps {
|
|
12
|
-
inviteToEditHandler?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
13
|
-
isInviteToEditButtonSelected?: boolean;
|
|
14
|
-
inviteToEditComponent?: React.ComponentType<InviteToEditComponentProps>;
|
|
15
|
-
}
|
|
16
|
-
export interface CollabAnalyticsProps {
|
|
17
|
-
/**
|
|
18
|
-
* @description Control wether Synchrony entity error events are tracked
|
|
19
|
-
*/
|
|
20
|
-
EXPERIMENTAL_allowInternalErrorAnalytics?: boolean;
|
|
21
|
-
}
|
|
22
|
-
export type CollabEditOptions = {
|
|
23
|
-
provider?: Providers['collabEditProvider'];
|
|
24
|
-
userId?: string;
|
|
25
|
-
useNativePlugin?: boolean;
|
|
26
|
-
} & CollabInviteToEditProps & CollabAnalyticsProps;
|
|
2
|
+
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
3
|
+
export type { InviteToEditComponentProps, InviteToEditButtonProps, CollabInviteToEditProps, CollabAnalyticsProps, } from '@atlaskit/editor-common/collab';
|
|
27
4
|
export type PrivateCollabEditOptions = CollabEditOptions & {
|
|
28
5
|
sanitizePrivateContent?: boolean;
|
|
29
6
|
onSyncUpError?: SyncUpErrorFunction;
|
|
@@ -4,7 +4,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
|
4
4
|
import type { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
import type { CollabParticipant } from '@atlaskit/collab-provider';
|
|
7
|
-
import type { CollabEditOptions } from '
|
|
7
|
+
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
8
8
|
export interface Color {
|
|
9
9
|
solid: string;
|
|
10
10
|
selection: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { NextEditorPlugin, EditorProps } from '../../types';
|
|
2
|
-
import type { LongPressSelectionPluginOptions } from '
|
|
2
|
+
import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
|
|
4
4
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
5
5
|
interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
|
|
1
|
+
import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
|
|
2
2
|
import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
|
|
3
|
-
import { NextEditorPlugin, EditorAppearance, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
4
|
-
import { LongPressSelectionPluginOptions } from '
|
|
3
|
+
import type { NextEditorPlugin, EditorAppearance, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { widthPlugin } from '@atlaskit/editor-plugin-width';
|
|
6
6
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
7
7
|
import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
-
import type { LongPressSelectionPluginOptions } from '
|
|
2
|
+
import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
|
|
3
3
|
export interface LayoutPluginOptions extends LongPressSelectionPluginOptions {
|
|
4
4
|
allowBreakout?: boolean;
|
|
5
5
|
UNSAFE_addSidebarLayouts?: boolean;
|