@atlaskit/editor-core 187.14.7 → 187.14.9
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 +14 -0
- package/dist/cjs/commands/index.js +35 -120
- package/dist/cjs/plugins/media/nodeviews/mediaSingle.js +17 -5
- package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +11 -7
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/commands/index.js +1 -115
- package/dist/es2019/plugins/media/nodeviews/mediaSingle.js +17 -5
- package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +12 -8
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/commands/index.js +1 -113
- package/dist/esm/plugins/media/nodeviews/mediaSingle.js +17 -5
- package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +12 -8
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/commands/index.d.ts +1 -17
- package/dist/types/plugins/media/nodeviews/mediaSingle.d.ts +6 -0
- package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -0
- package/dist/types-ts4.5/commands/index.d.ts +1 -17
- package/dist/types-ts4.5/plugins/media/nodeviews/mediaSingle.d.ts +6 -0
- package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -0
- package/package.json +2 -2
- package/report.api.md +2 -2
- package/tmp/api-report-tmp.d.ts +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 187.14.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`021d5f488ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/021d5f488ec) - [ED-16733] Media Plugin Extractation - Move core commands to common entrypoint
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
10
|
+
## 187.14.8
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`8fe864e4f7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fe864e4f7a) - [ux] ED-19336: Fixed insert column button not visible when sticky header is enabled."
|
|
15
|
+
- [`4cbae03c15c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4cbae03c15c) - Set maxWidth for ResizerNext to stop lable updating when reaching max width
|
|
16
|
+
|
|
3
17
|
## 187.14.7
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -1,127 +1,42 @@
|
|
|
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
|
-
exports
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
13
|
-
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
-
function addParagraphAtEnd(tr) {
|
|
17
|
-
var paragraph = tr.doc.type.schema.nodes.paragraph,
|
|
18
|
-
doc = tr.doc;
|
|
19
|
-
if (doc.lastChild && !(doc.lastChild.type === paragraph && doc.lastChild.content.size === 0)) {
|
|
20
|
-
if (paragraph) {
|
|
21
|
-
tr.insert(doc.content.size, paragraph.createAndFill());
|
|
22
|
-
}
|
|
6
|
+
Object.defineProperty(exports, "addParagraphAtEnd", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _commands.addParagraphAtEnd;
|
|
23
10
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
function
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
to = _state$selection.to;
|
|
42
|
-
var tr = state.tr;
|
|
43
|
-
state.doc.nodesBetween(from, to, function (node, pos) {
|
|
44
|
-
if (node.type === state.schema.nodes.mediaSingle) {
|
|
45
|
-
tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
46
|
-
layout: align === 'center' ? 'center' : "align-".concat(align)
|
|
47
|
-
}));
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
if (tr.docChanged && dispatch) {
|
|
51
|
-
dispatch(tr.scrollIntoView());
|
|
52
|
-
return true;
|
|
53
|
-
}
|
|
54
|
-
return false;
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
exports.changeImageAlignment = changeImageAlignment;
|
|
58
|
-
var createToggleBlockMarkOnRange = function createToggleBlockMarkOnRange(markType, getAttrs, allowedBlocks) {
|
|
59
|
-
return function (from, to, tr, state) {
|
|
60
|
-
var markApplied = false;
|
|
61
|
-
state.doc.nodesBetween(from, to, function (node, pos, parent) {
|
|
62
|
-
if (!node.type.isBlock) {
|
|
63
|
-
return false;
|
|
64
|
-
}
|
|
65
|
-
if ((!allowedBlocks || (Array.isArray(allowedBlocks) ? allowedBlocks.indexOf(node.type) > -1 : allowedBlocks(state.schema, node, parent))) && parent !== null && parent !== void 0 && parent.type.allowsMarkType(markType)) {
|
|
66
|
-
var oldMarks = node.marks.filter(function (mark) {
|
|
67
|
-
return mark.type === markType;
|
|
68
|
-
});
|
|
69
|
-
var _prevAttrs = oldMarks.length ? oldMarks[0].attrs : undefined;
|
|
70
|
-
var newAttrs = getAttrs(_prevAttrs, node);
|
|
71
|
-
if (newAttrs !== undefined) {
|
|
72
|
-
tr.setNodeMarkup(pos, node.type, node.attrs, node.marks.filter(function (mark) {
|
|
73
|
-
return !markType.excludes(mark.type);
|
|
74
|
-
}).concat(newAttrs === false ? [] : markType.create(newAttrs)));
|
|
75
|
-
markApplied = true;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
return;
|
|
79
|
-
});
|
|
80
|
-
return markApplied;
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Toggles block mark based on the return type of `getAttrs`.
|
|
86
|
-
* This is similar to ProseMirror's `getAttrs` from `AttributeSpec`
|
|
87
|
-
* return `false` to remove the mark.
|
|
88
|
-
* return `undefined for no-op.
|
|
89
|
-
* return an `object` to update the mark.
|
|
90
|
-
*/
|
|
91
|
-
exports.createToggleBlockMarkOnRange = createToggleBlockMarkOnRange;
|
|
92
|
-
var toggleBlockMark = function toggleBlockMark(markType, getAttrs, allowedBlocks) {
|
|
93
|
-
return function (state, dispatch) {
|
|
94
|
-
var markApplied = false;
|
|
95
|
-
var tr = state.tr;
|
|
96
|
-
var toggleBlockMarkOnRange = createToggleBlockMarkOnRange(markType, getAttrs, allowedBlocks);
|
|
97
|
-
if (state.selection instanceof _cellSelection.CellSelection) {
|
|
98
|
-
state.selection.forEachCell(function (cell, pos) {
|
|
99
|
-
markApplied = toggleBlockMarkOnRange(pos, pos + cell.nodeSize, tr, state);
|
|
100
|
-
});
|
|
101
|
-
} else {
|
|
102
|
-
var _state$selection2 = state.selection,
|
|
103
|
-
from = _state$selection2.from,
|
|
104
|
-
to = _state$selection2.to;
|
|
105
|
-
markApplied = toggleBlockMarkOnRange(from, to, tr, state);
|
|
106
|
-
}
|
|
107
|
-
if (markApplied && tr.docChanged) {
|
|
108
|
-
if (dispatch) {
|
|
109
|
-
dispatch(tr.scrollIntoView());
|
|
110
|
-
}
|
|
111
|
-
return true;
|
|
112
|
-
}
|
|
113
|
-
return false;
|
|
114
|
-
};
|
|
115
|
-
};
|
|
116
|
-
exports.toggleBlockMark = toggleBlockMark;
|
|
117
|
-
var clearEditorContent = function clearEditorContent(state, dispatch) {
|
|
118
|
-
var tr = state.tr;
|
|
119
|
-
tr.replace(0, state.doc.nodeSize - 2);
|
|
120
|
-
tr.setSelection(_state.Selection.atStart(tr.doc));
|
|
121
|
-
if (dispatch) {
|
|
122
|
-
dispatch(tr);
|
|
123
|
-
return true;
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "changeImageAlignment", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _commands.changeImageAlignment;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "clearEditorContent", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _commands.clearEditorContent;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "createParagraphAtEnd", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _commands.createParagraphAtEnd;
|
|
124
28
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "createToggleBlockMarkOnRange", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function get() {
|
|
33
|
+
return _commands.createToggleBlockMarkOnRange;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "toggleBlockMark", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function get() {
|
|
39
|
+
return _commands.toggleBlockMark;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
var _commands = require("@atlaskit/editor-common/commands");
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = exports.ReactMediaSingleNode = void 0;
|
|
9
9
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
10
|
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
|
|
11
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
12
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
12
13
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
14
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
@@ -247,11 +248,17 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
247
248
|
}
|
|
248
249
|
(0, _captions.insertAndSelectCaptionFromMediaSinglePos)(getPos(), node)(view.state, view.dispatch);
|
|
249
250
|
});
|
|
250
|
-
|
|
251
|
+
/**
|
|
252
|
+
* Get parent width for a nested media single node
|
|
253
|
+
* @param view Editor view
|
|
254
|
+
* @param pos node position
|
|
255
|
+
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
256
|
+
*/
|
|
257
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
|
|
251
258
|
if (typeof pos !== 'number') {
|
|
252
259
|
return null;
|
|
253
260
|
}
|
|
254
|
-
if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
|
|
261
|
+
if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos, includeMoreParentNodeTypes)) {
|
|
255
262
|
var $pos = view.state.doc.resolve(pos);
|
|
256
263
|
var domNode = view.nodeDOM($pos.pos);
|
|
257
264
|
if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
|
|
@@ -363,7 +370,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
363
370
|
height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
|
|
364
371
|
}
|
|
365
372
|
var isSelected = selected();
|
|
366
|
-
var
|
|
373
|
+
var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
|
|
374
|
+
var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
|
|
367
375
|
var mediaSingleProps = {
|
|
368
376
|
layout: layout,
|
|
369
377
|
width: width,
|
|
@@ -378,7 +386,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
378
386
|
widthType: widthType,
|
|
379
387
|
origWidth: width,
|
|
380
388
|
layout: layout,
|
|
381
|
-
|
|
389
|
+
// This will only be used when calculating legacy media single width
|
|
390
|
+
// thus we use the legecy value (exclude table as container node)
|
|
391
|
+
contentWidth: contentWidthForLegacyExperience,
|
|
382
392
|
containerWidth: containerWidth,
|
|
383
393
|
gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
|
|
384
394
|
})
|
|
@@ -417,7 +427,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
417
427
|
ref: this.captionPlaceHolderRef,
|
|
418
428
|
onClick: this.clickPlaceholder
|
|
419
429
|
}));
|
|
420
|
-
return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default,
|
|
430
|
+
return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, ResizableMediaSingleProps, {
|
|
431
|
+
lineLength: contentWidthForLegacyExperience
|
|
432
|
+
}), MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
|
|
421
433
|
}
|
|
422
434
|
}]);
|
|
423
435
|
return MediaSingleNode;
|
|
@@ -32,6 +32,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
32
32
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
33
33
|
var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
34
34
|
var _guideline = require("@atlaskit/editor-common/guideline");
|
|
35
|
+
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
35
36
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
36
37
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
37
38
|
var resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
@@ -142,6 +143,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
142
143
|
tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
|
|
143
144
|
return dispatch(tr);
|
|
144
145
|
});
|
|
146
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
|
|
147
|
+
if (_this.isNestedNode() || fullWidthMode) {
|
|
148
|
+
return contentWidth;
|
|
149
|
+
}
|
|
150
|
+
return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
|
|
151
|
+
}));
|
|
145
152
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateActiveGuidelines", function () {
|
|
146
153
|
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
147
154
|
var guidelines = arguments.length > 1 ? arguments[1] : undefined;
|
|
@@ -214,9 +221,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
214
221
|
if (calculatedWidthWithLayout.layout !== layout) {
|
|
215
222
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
216
223
|
}
|
|
217
|
-
|
|
218
|
-
// TODO: Update once type updated from editor common resizer
|
|
219
|
-
return 0;
|
|
220
224
|
});
|
|
221
225
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
|
|
222
226
|
var _this$props5 = _this.props,
|
|
@@ -243,9 +247,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
243
247
|
}, function () {
|
|
244
248
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
245
249
|
});
|
|
246
|
-
|
|
247
|
-
// TODO: Update once type updated from editor common resizer
|
|
248
|
-
return 0;
|
|
249
250
|
});
|
|
250
251
|
var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
|
|
251
252
|
_this.state = {
|
|
@@ -473,7 +474,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
473
474
|
fullWidthMode = _this$props8.fullWidthMode,
|
|
474
475
|
selected = _this$props8.selected,
|
|
475
476
|
children = _this$props8.children,
|
|
476
|
-
intl = _this$props8.intl
|
|
477
|
+
intl = _this$props8.intl,
|
|
478
|
+
lineLength = _this$props8.lineLength;
|
|
477
479
|
var _this$state = this.state,
|
|
478
480
|
isResizing = _this$state.isResizing,
|
|
479
481
|
size = _this$state.size;
|
|
@@ -495,6 +497,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
495
497
|
var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
|
|
496
498
|
var showSizeGuide = selected || isResizing;
|
|
497
499
|
var label = layout === 'full-width' ? intl.formatMessage(_resizableMediaSingleMessages.messages.fullWidthImage) : "".concat(this.state.size.width, " x ").concat(this.state.size.height);
|
|
500
|
+
var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
|
|
498
501
|
return (0, _react2.jsx)("div", {
|
|
499
502
|
ref: this.saveWrapper,
|
|
500
503
|
css: (0, _styled.wrapperStyle)({
|
|
@@ -508,6 +511,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
508
511
|
})
|
|
509
512
|
}, (0, _react2.jsx)(_resizer.ResizerNext, {
|
|
510
513
|
minWidth: _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH,
|
|
514
|
+
maxWidth: maxWidth,
|
|
511
515
|
className: resizerNextClassName,
|
|
512
516
|
snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
|
|
513
517
|
enable: enable,
|
|
@@ -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.14.
|
|
9
|
+
var version = "187.14.9";
|
|
10
10
|
exports.version = version;
|
|
11
11
|
var nextMajorVersion = function nextMajorVersion() {
|
|
12
12
|
return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
|
package/dist/cjs/version.json
CHANGED
|
@@ -1,115 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
3
|
-
export function addParagraphAtEnd(tr) {
|
|
4
|
-
const {
|
|
5
|
-
doc: {
|
|
6
|
-
type: {
|
|
7
|
-
schema: {
|
|
8
|
-
nodes: {
|
|
9
|
-
paragraph
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
doc
|
|
15
|
-
} = tr;
|
|
16
|
-
if (doc.lastChild && !(doc.lastChild.type === paragraph && doc.lastChild.content.size === 0)) {
|
|
17
|
-
if (paragraph) {
|
|
18
|
-
tr.insert(doc.content.size, paragraph.createAndFill());
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size - 1));
|
|
22
|
-
tr.scrollIntoView();
|
|
23
|
-
}
|
|
24
|
-
export function createParagraphAtEnd() {
|
|
25
|
-
return function (state, dispatch) {
|
|
26
|
-
const {
|
|
27
|
-
tr
|
|
28
|
-
} = state;
|
|
29
|
-
addParagraphAtEnd(tr);
|
|
30
|
-
if (dispatch) {
|
|
31
|
-
dispatch(tr);
|
|
32
|
-
}
|
|
33
|
-
return true;
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
export const changeImageAlignment = align => (state, dispatch) => {
|
|
37
|
-
const {
|
|
38
|
-
from,
|
|
39
|
-
to
|
|
40
|
-
} = state.selection;
|
|
41
|
-
const tr = state.tr;
|
|
42
|
-
state.doc.nodesBetween(from, to, (node, pos) => {
|
|
43
|
-
if (node.type === state.schema.nodes.mediaSingle) {
|
|
44
|
-
tr.setNodeMarkup(pos, undefined, {
|
|
45
|
-
...node.attrs,
|
|
46
|
-
layout: align === 'center' ? 'center' : `align-${align}`
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
if (tr.docChanged && dispatch) {
|
|
51
|
-
dispatch(tr.scrollIntoView());
|
|
52
|
-
return true;
|
|
53
|
-
}
|
|
54
|
-
return false;
|
|
55
|
-
};
|
|
56
|
-
export const createToggleBlockMarkOnRange = (markType, getAttrs, allowedBlocks) => (from, to, tr, state) => {
|
|
57
|
-
let markApplied = false;
|
|
58
|
-
state.doc.nodesBetween(from, to, (node, pos, parent) => {
|
|
59
|
-
if (!node.type.isBlock) {
|
|
60
|
-
return false;
|
|
61
|
-
}
|
|
62
|
-
if ((!allowedBlocks || (Array.isArray(allowedBlocks) ? allowedBlocks.indexOf(node.type) > -1 : allowedBlocks(state.schema, node, parent))) && parent !== null && parent !== void 0 && parent.type.allowsMarkType(markType)) {
|
|
63
|
-
const oldMarks = node.marks.filter(mark => mark.type === markType);
|
|
64
|
-
const prevAttrs = oldMarks.length ? oldMarks[0].attrs : undefined;
|
|
65
|
-
const newAttrs = getAttrs(prevAttrs, node);
|
|
66
|
-
if (newAttrs !== undefined) {
|
|
67
|
-
tr.setNodeMarkup(pos, node.type, node.attrs, node.marks.filter(mark => !markType.excludes(mark.type)).concat(newAttrs === false ? [] : markType.create(newAttrs)));
|
|
68
|
-
markApplied = true;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return;
|
|
72
|
-
});
|
|
73
|
-
return markApplied;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Toggles block mark based on the return type of `getAttrs`.
|
|
78
|
-
* This is similar to ProseMirror's `getAttrs` from `AttributeSpec`
|
|
79
|
-
* return `false` to remove the mark.
|
|
80
|
-
* return `undefined for no-op.
|
|
81
|
-
* return an `object` to update the mark.
|
|
82
|
-
*/
|
|
83
|
-
export const toggleBlockMark = (markType, getAttrs, allowedBlocks) => (state, dispatch) => {
|
|
84
|
-
let markApplied = false;
|
|
85
|
-
const tr = state.tr;
|
|
86
|
-
const toggleBlockMarkOnRange = createToggleBlockMarkOnRange(markType, getAttrs, allowedBlocks);
|
|
87
|
-
if (state.selection instanceof CellSelection) {
|
|
88
|
-
state.selection.forEachCell((cell, pos) => {
|
|
89
|
-
markApplied = toggleBlockMarkOnRange(pos, pos + cell.nodeSize, tr, state);
|
|
90
|
-
});
|
|
91
|
-
} else {
|
|
92
|
-
const {
|
|
93
|
-
from,
|
|
94
|
-
to
|
|
95
|
-
} = state.selection;
|
|
96
|
-
markApplied = toggleBlockMarkOnRange(from, to, tr, state);
|
|
97
|
-
}
|
|
98
|
-
if (markApplied && tr.docChanged) {
|
|
99
|
-
if (dispatch) {
|
|
100
|
-
dispatch(tr.scrollIntoView());
|
|
101
|
-
}
|
|
102
|
-
return true;
|
|
103
|
-
}
|
|
104
|
-
return false;
|
|
105
|
-
};
|
|
106
|
-
export const clearEditorContent = (state, dispatch) => {
|
|
107
|
-
const tr = state.tr;
|
|
108
|
-
tr.replace(0, state.doc.nodeSize - 2);
|
|
109
|
-
tr.setSelection(Selection.atStart(tr.doc));
|
|
110
|
-
if (dispatch) {
|
|
111
|
-
dispatch(tr);
|
|
112
|
-
return true;
|
|
113
|
-
}
|
|
114
|
-
return false;
|
|
115
|
-
};
|
|
1
|
+
export { addParagraphAtEnd, createParagraphAtEnd, changeImageAlignment, createToggleBlockMarkOnRange, toggleBlockMark, clearEditorContent } from '@atlaskit/editor-common/commands';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
3
|
/** @jsx jsx */
|
|
3
4
|
import { jsx } from '@emotion/react';
|
|
@@ -173,11 +174,17 @@ export default class MediaSingleNode extends Component {
|
|
|
173
174
|
}
|
|
174
175
|
insertAndSelectCaptionFromMediaSinglePos(getPos(), node)(view.state, view.dispatch);
|
|
175
176
|
});
|
|
176
|
-
|
|
177
|
+
/**
|
|
178
|
+
* Get parent width for a nested media single node
|
|
179
|
+
* @param view Editor view
|
|
180
|
+
* @param pos node position
|
|
181
|
+
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
182
|
+
*/
|
|
183
|
+
_defineProperty(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
|
|
177
184
|
if (typeof pos !== 'number') {
|
|
178
185
|
return null;
|
|
179
186
|
}
|
|
180
|
-
if (isRichMediaInsideOfBlockNode(view, pos)) {
|
|
187
|
+
if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
|
|
181
188
|
const $pos = view.state.doc.resolve(pos);
|
|
182
189
|
const domNode = view.nodeDOM($pos.pos);
|
|
183
190
|
if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
|
|
@@ -270,7 +277,8 @@ export default class MediaSingleNode extends Component {
|
|
|
270
277
|
height = DEFAULT_IMAGE_HEIGHT;
|
|
271
278
|
}
|
|
272
279
|
const isSelected = selected();
|
|
273
|
-
const
|
|
280
|
+
const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
|
|
281
|
+
const contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
|
|
274
282
|
const mediaSingleProps = {
|
|
275
283
|
layout,
|
|
276
284
|
width,
|
|
@@ -285,7 +293,9 @@ export default class MediaSingleNode extends Component {
|
|
|
285
293
|
widthType,
|
|
286
294
|
origWidth: width,
|
|
287
295
|
layout,
|
|
288
|
-
|
|
296
|
+
// This will only be used when calculating legacy media single width
|
|
297
|
+
// thus we use the legecy value (exclude table as container node)
|
|
298
|
+
contentWidth: contentWidthForLegacyExperience,
|
|
289
299
|
containerWidth,
|
|
290
300
|
gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
|
|
291
301
|
})
|
|
@@ -327,7 +337,9 @@ export default class MediaSingleNode extends Component {
|
|
|
327
337
|
ref: this.captionPlaceHolderRef,
|
|
328
338
|
onClick: this.clickPlaceholder
|
|
329
339
|
}));
|
|
330
|
-
return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle,
|
|
340
|
+
return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, _extends({}, ResizableMediaSingleProps, {
|
|
341
|
+
lineLength: contentWidthForLegacyExperience
|
|
342
|
+
}), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
|
|
331
343
|
}
|
|
332
344
|
}
|
|
333
345
|
_defineProperty(MediaSingleNode, "defaultProps", {
|
|
@@ -15,8 +15,9 @@ import { messages } from './resizable-media-single-messages';
|
|
|
15
15
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
16
16
|
import classnames from 'classnames';
|
|
17
17
|
import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
|
|
18
|
-
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
18
|
+
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
|
|
19
19
|
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
|
|
20
|
+
import memoizeOne from 'memoize-one';
|
|
20
21
|
export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
21
22
|
|
|
22
23
|
// TODO: Create new fixed image size event
|
|
@@ -127,6 +128,12 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
127
128
|
tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
|
|
128
129
|
return dispatch(tr);
|
|
129
130
|
});
|
|
131
|
+
_defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
|
|
132
|
+
if (this.isNestedNode() || fullWidthMode) {
|
|
133
|
+
return contentWidth;
|
|
134
|
+
}
|
|
135
|
+
return calcMediaSingleMaxWidth(containerWidth);
|
|
136
|
+
}));
|
|
130
137
|
_defineProperty(this, "updateActiveGuidelines", (width = 0, guidelines, guidelineSnapsReference) => {
|
|
131
138
|
if (guidelineSnapsReference.snaps.x) {
|
|
132
139
|
const {
|
|
@@ -192,9 +199,6 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
192
199
|
if (calculatedWidthWithLayout.layout !== layout) {
|
|
193
200
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
194
201
|
}
|
|
195
|
-
|
|
196
|
-
// TODO: Update once type updated from editor common resizer
|
|
197
|
-
return 0;
|
|
198
202
|
});
|
|
199
203
|
_defineProperty(this, "handleResizeStop", (size, delta) => {
|
|
200
204
|
const {
|
|
@@ -223,9 +227,6 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
223
227
|
}, () => {
|
|
224
228
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
225
229
|
});
|
|
226
|
-
|
|
227
|
-
// TODO: Update once type updated from editor common resizer
|
|
228
|
-
return 0;
|
|
229
230
|
});
|
|
230
231
|
const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
|
|
231
232
|
this.state = {
|
|
@@ -390,7 +391,8 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
390
391
|
fullWidthMode,
|
|
391
392
|
selected,
|
|
392
393
|
children,
|
|
393
|
-
intl
|
|
394
|
+
intl,
|
|
395
|
+
lineLength
|
|
394
396
|
} = this.props;
|
|
395
397
|
const {
|
|
396
398
|
isResizing,
|
|
@@ -414,6 +416,7 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
414
416
|
const resizerNextClassName = classnames(className, resizerStyles);
|
|
415
417
|
const showSizeGuide = selected || isResizing;
|
|
416
418
|
const label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : `${this.state.size.width} x ${this.state.size.height}`;
|
|
419
|
+
const maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
|
|
417
420
|
return jsx("div", {
|
|
418
421
|
ref: this.saveWrapper,
|
|
419
422
|
css: wrapperStyle({
|
|
@@ -427,6 +430,7 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
427
430
|
})
|
|
428
431
|
}, jsx(ResizerNext, {
|
|
429
432
|
minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
|
|
433
|
+
maxWidth: maxWidth,
|
|
430
434
|
className: resizerNextClassName,
|
|
431
435
|
snapGap: MEDIA_SINGLE_SNAP_GAP,
|
|
432
436
|
enable: enable,
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,113 +1 @@
|
|
|
1
|
-
|
|
2
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
6
|
-
export function addParagraphAtEnd(tr) {
|
|
7
|
-
var paragraph = tr.doc.type.schema.nodes.paragraph,
|
|
8
|
-
doc = tr.doc;
|
|
9
|
-
if (doc.lastChild && !(doc.lastChild.type === paragraph && doc.lastChild.content.size === 0)) {
|
|
10
|
-
if (paragraph) {
|
|
11
|
-
tr.insert(doc.content.size, paragraph.createAndFill());
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size - 1));
|
|
15
|
-
tr.scrollIntoView();
|
|
16
|
-
}
|
|
17
|
-
export function createParagraphAtEnd() {
|
|
18
|
-
return function (state, dispatch) {
|
|
19
|
-
var tr = state.tr;
|
|
20
|
-
addParagraphAtEnd(tr);
|
|
21
|
-
if (dispatch) {
|
|
22
|
-
dispatch(tr);
|
|
23
|
-
}
|
|
24
|
-
return true;
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
export var changeImageAlignment = function changeImageAlignment(align) {
|
|
28
|
-
return function (state, dispatch) {
|
|
29
|
-
var _state$selection = state.selection,
|
|
30
|
-
from = _state$selection.from,
|
|
31
|
-
to = _state$selection.to;
|
|
32
|
-
var tr = state.tr;
|
|
33
|
-
state.doc.nodesBetween(from, to, function (node, pos) {
|
|
34
|
-
if (node.type === state.schema.nodes.mediaSingle) {
|
|
35
|
-
tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
36
|
-
layout: align === 'center' ? 'center' : "align-".concat(align)
|
|
37
|
-
}));
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
if (tr.docChanged && dispatch) {
|
|
41
|
-
dispatch(tr.scrollIntoView());
|
|
42
|
-
return true;
|
|
43
|
-
}
|
|
44
|
-
return false;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
export var createToggleBlockMarkOnRange = function createToggleBlockMarkOnRange(markType, getAttrs, allowedBlocks) {
|
|
48
|
-
return function (from, to, tr, state) {
|
|
49
|
-
var markApplied = false;
|
|
50
|
-
state.doc.nodesBetween(from, to, function (node, pos, parent) {
|
|
51
|
-
if (!node.type.isBlock) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
54
|
-
if ((!allowedBlocks || (Array.isArray(allowedBlocks) ? allowedBlocks.indexOf(node.type) > -1 : allowedBlocks(state.schema, node, parent))) && parent !== null && parent !== void 0 && parent.type.allowsMarkType(markType)) {
|
|
55
|
-
var oldMarks = node.marks.filter(function (mark) {
|
|
56
|
-
return mark.type === markType;
|
|
57
|
-
});
|
|
58
|
-
var _prevAttrs = oldMarks.length ? oldMarks[0].attrs : undefined;
|
|
59
|
-
var newAttrs = getAttrs(_prevAttrs, node);
|
|
60
|
-
if (newAttrs !== undefined) {
|
|
61
|
-
tr.setNodeMarkup(pos, node.type, node.attrs, node.marks.filter(function (mark) {
|
|
62
|
-
return !markType.excludes(mark.type);
|
|
63
|
-
}).concat(newAttrs === false ? [] : markType.create(newAttrs)));
|
|
64
|
-
markApplied = true;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
return;
|
|
68
|
-
});
|
|
69
|
-
return markApplied;
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Toggles block mark based on the return type of `getAttrs`.
|
|
75
|
-
* This is similar to ProseMirror's `getAttrs` from `AttributeSpec`
|
|
76
|
-
* return `false` to remove the mark.
|
|
77
|
-
* return `undefined for no-op.
|
|
78
|
-
* return an `object` to update the mark.
|
|
79
|
-
*/
|
|
80
|
-
export var toggleBlockMark = function toggleBlockMark(markType, getAttrs, allowedBlocks) {
|
|
81
|
-
return function (state, dispatch) {
|
|
82
|
-
var markApplied = false;
|
|
83
|
-
var tr = state.tr;
|
|
84
|
-
var toggleBlockMarkOnRange = createToggleBlockMarkOnRange(markType, getAttrs, allowedBlocks);
|
|
85
|
-
if (state.selection instanceof CellSelection) {
|
|
86
|
-
state.selection.forEachCell(function (cell, pos) {
|
|
87
|
-
markApplied = toggleBlockMarkOnRange(pos, pos + cell.nodeSize, tr, state);
|
|
88
|
-
});
|
|
89
|
-
} else {
|
|
90
|
-
var _state$selection2 = state.selection,
|
|
91
|
-
from = _state$selection2.from,
|
|
92
|
-
to = _state$selection2.to;
|
|
93
|
-
markApplied = toggleBlockMarkOnRange(from, to, tr, state);
|
|
94
|
-
}
|
|
95
|
-
if (markApplied && tr.docChanged) {
|
|
96
|
-
if (dispatch) {
|
|
97
|
-
dispatch(tr.scrollIntoView());
|
|
98
|
-
}
|
|
99
|
-
return true;
|
|
100
|
-
}
|
|
101
|
-
return false;
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
export var clearEditorContent = function clearEditorContent(state, dispatch) {
|
|
105
|
-
var tr = state.tr;
|
|
106
|
-
tr.replace(0, state.doc.nodeSize - 2);
|
|
107
|
-
tr.setSelection(Selection.atStart(tr.doc));
|
|
108
|
-
if (dispatch) {
|
|
109
|
-
dispatch(tr);
|
|
110
|
-
return true;
|
|
111
|
-
}
|
|
112
|
-
return false;
|
|
113
|
-
};
|
|
1
|
+
export { addParagraphAtEnd, createParagraphAtEnd, changeImageAlignment, createToggleBlockMarkOnRange, toggleBlockMark, clearEditorContent } from '@atlaskit/editor-common/commands';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _get from "@babel/runtime/helpers/get";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
3
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
4
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
5
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
@@ -238,11 +239,17 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
238
239
|
}
|
|
239
240
|
insertAndSelectCaptionFromMediaSinglePos(getPos(), node)(view.state, view.dispatch);
|
|
240
241
|
});
|
|
241
|
-
|
|
242
|
+
/**
|
|
243
|
+
* Get parent width for a nested media single node
|
|
244
|
+
* @param view Editor view
|
|
245
|
+
* @param pos node position
|
|
246
|
+
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
247
|
+
*/
|
|
248
|
+
_defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
|
|
242
249
|
if (typeof pos !== 'number') {
|
|
243
250
|
return null;
|
|
244
251
|
}
|
|
245
|
-
if (isRichMediaInsideOfBlockNode(view, pos)) {
|
|
252
|
+
if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
|
|
246
253
|
var $pos = view.state.doc.resolve(pos);
|
|
247
254
|
var domNode = view.nodeDOM($pos.pos);
|
|
248
255
|
if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
|
|
@@ -354,7 +361,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
354
361
|
height = DEFAULT_IMAGE_HEIGHT;
|
|
355
362
|
}
|
|
356
363
|
var isSelected = selected();
|
|
357
|
-
var
|
|
364
|
+
var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
|
|
365
|
+
var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
|
|
358
366
|
var mediaSingleProps = {
|
|
359
367
|
layout: layout,
|
|
360
368
|
width: width,
|
|
@@ -369,7 +377,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
369
377
|
widthType: widthType,
|
|
370
378
|
origWidth: width,
|
|
371
379
|
layout: layout,
|
|
372
|
-
|
|
380
|
+
// This will only be used when calculating legacy media single width
|
|
381
|
+
// thus we use the legecy value (exclude table as container node)
|
|
382
|
+
contentWidth: contentWidthForLegacyExperience,
|
|
373
383
|
containerWidth: containerWidth,
|
|
374
384
|
gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
|
|
375
385
|
})
|
|
@@ -408,7 +418,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
408
418
|
ref: this.captionPlaceHolderRef,
|
|
409
419
|
onClick: this.clickPlaceholder
|
|
410
420
|
}));
|
|
411
|
-
return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle,
|
|
421
|
+
return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, _extends({}, ResizableMediaSingleProps, {
|
|
422
|
+
lineLength: contentWidthForLegacyExperience
|
|
423
|
+
}), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
|
|
412
424
|
}
|
|
413
425
|
}]);
|
|
414
426
|
return MediaSingleNode;
|
|
@@ -26,8 +26,9 @@ 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, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
29
|
+
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
|
|
30
30
|
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
|
|
31
|
+
import memoizeOne from 'memoize-one';
|
|
31
32
|
export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
32
33
|
|
|
33
34
|
// TODO: Create new fixed image size event
|
|
@@ -135,6 +136,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
135
136
|
tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
|
|
136
137
|
return dispatch(tr);
|
|
137
138
|
});
|
|
139
|
+
_defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
|
|
140
|
+
if (_this.isNestedNode() || fullWidthMode) {
|
|
141
|
+
return contentWidth;
|
|
142
|
+
}
|
|
143
|
+
return calcMediaSingleMaxWidth(containerWidth);
|
|
144
|
+
}));
|
|
138
145
|
_defineProperty(_assertThisInitialized(_this), "updateActiveGuidelines", function () {
|
|
139
146
|
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
140
147
|
var guidelines = arguments.length > 1 ? arguments[1] : undefined;
|
|
@@ -207,9 +214,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
207
214
|
if (calculatedWidthWithLayout.layout !== layout) {
|
|
208
215
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
209
216
|
}
|
|
210
|
-
|
|
211
|
-
// TODO: Update once type updated from editor common resizer
|
|
212
|
-
return 0;
|
|
213
217
|
});
|
|
214
218
|
_defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
|
|
215
219
|
var _this$props5 = _this.props,
|
|
@@ -236,9 +240,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
236
240
|
}, function () {
|
|
237
241
|
updateSize(width, calculatedWidthWithLayout.layout);
|
|
238
242
|
});
|
|
239
|
-
|
|
240
|
-
// TODO: Update once type updated from editor common resizer
|
|
241
|
-
return 0;
|
|
242
243
|
});
|
|
243
244
|
var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
|
|
244
245
|
_this.state = {
|
|
@@ -466,7 +467,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
466
467
|
fullWidthMode = _this$props8.fullWidthMode,
|
|
467
468
|
selected = _this$props8.selected,
|
|
468
469
|
children = _this$props8.children,
|
|
469
|
-
intl = _this$props8.intl
|
|
470
|
+
intl = _this$props8.intl,
|
|
471
|
+
lineLength = _this$props8.lineLength;
|
|
470
472
|
var _this$state = this.state,
|
|
471
473
|
isResizing = _this$state.isResizing,
|
|
472
474
|
size = _this$state.size;
|
|
@@ -488,6 +490,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
488
490
|
var resizerNextClassName = classnames(className, resizerStyles);
|
|
489
491
|
var showSizeGuide = selected || isResizing;
|
|
490
492
|
var label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : "".concat(this.state.size.width, " x ").concat(this.state.size.height);
|
|
493
|
+
var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
|
|
491
494
|
return jsx("div", {
|
|
492
495
|
ref: this.saveWrapper,
|
|
493
496
|
css: wrapperStyle({
|
|
@@ -501,6 +504,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
501
504
|
})
|
|
502
505
|
}, jsx(ResizerNext, {
|
|
503
506
|
minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
|
|
507
|
+
maxWidth: maxWidth,
|
|
504
508
|
className: resizerNextClassName,
|
|
505
509
|
snapGap: MEDIA_SINGLE_SNAP_GAP,
|
|
506
510
|
enable: enable,
|
package/dist/esm/version.json
CHANGED
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { AlignmentState } from '../plugins/alignment/pm-plugins/types';
|
|
4
|
-
import type { Command } from '../types';
|
|
5
|
-
export declare function addParagraphAtEnd(tr: Transaction): void;
|
|
6
|
-
export declare function createParagraphAtEnd(): Command;
|
|
7
|
-
export declare const changeImageAlignment: (align?: AlignmentState) => Command;
|
|
8
|
-
export declare const createToggleBlockMarkOnRange: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined, allowedBlocks?: NodeType[] | ((schema: Schema, node: PMNode, parent: PMNode | null) => boolean) | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Toggles block mark based on the return type of `getAttrs`.
|
|
11
|
-
* This is similar to ProseMirror's `getAttrs` from `AttributeSpec`
|
|
12
|
-
* return `false` to remove the mark.
|
|
13
|
-
* return `undefined for no-op.
|
|
14
|
-
* return an `object` to update the mark.
|
|
15
|
-
*/
|
|
16
|
-
export declare const toggleBlockMark: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined, allowedBlocks?: NodeType[] | ((schema: Schema, node: PMNode, parent: PMNode | null) => boolean) | undefined) => Command;
|
|
17
|
-
export declare const clearEditorContent: Command;
|
|
1
|
+
export { addParagraphAtEnd, createParagraphAtEnd, changeImageAlignment, createToggleBlockMarkOnRange, toggleBlockMark, clearEditorContent, } from '@atlaskit/editor-common/commands';
|
|
@@ -41,6 +41,12 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
|
|
|
41
41
|
onMediaSingleClicked: (event: MouseEvent) => void;
|
|
42
42
|
render(): jsx.JSX.Element;
|
|
43
43
|
private clickPlaceholder;
|
|
44
|
+
/**
|
|
45
|
+
* Get parent width for a nested media single node
|
|
46
|
+
* @param view Editor view
|
|
47
|
+
* @param pos node position
|
|
48
|
+
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
49
|
+
*/
|
|
44
50
|
private getLineLength;
|
|
45
51
|
}
|
|
46
52
|
declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {
|
|
@@ -54,6 +54,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
54
54
|
private saveWrapper;
|
|
55
55
|
private displayGuideline;
|
|
56
56
|
private setIsResizing;
|
|
57
|
+
private calcMaxWidth;
|
|
57
58
|
updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
|
|
58
59
|
roundPixelValue: (value: number) => number;
|
|
59
60
|
getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { AlignmentState } from '../plugins/alignment/pm-plugins/types';
|
|
4
|
-
import type { Command } from '../types';
|
|
5
|
-
export declare function addParagraphAtEnd(tr: Transaction): void;
|
|
6
|
-
export declare function createParagraphAtEnd(): Command;
|
|
7
|
-
export declare const changeImageAlignment: (align?: AlignmentState) => Command;
|
|
8
|
-
export declare const createToggleBlockMarkOnRange: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined, allowedBlocks?: NodeType[] | ((schema: Schema, node: PMNode, parent: PMNode | null) => boolean) | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Toggles block mark based on the return type of `getAttrs`.
|
|
11
|
-
* This is similar to ProseMirror's `getAttrs` from `AttributeSpec`
|
|
12
|
-
* return `false` to remove the mark.
|
|
13
|
-
* return `undefined for no-op.
|
|
14
|
-
* return an `object` to update the mark.
|
|
15
|
-
*/
|
|
16
|
-
export declare const toggleBlockMark: <T extends {} = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode) => false | T | undefined, allowedBlocks?: NodeType[] | ((schema: Schema, node: PMNode, parent: PMNode | null) => boolean) | undefined) => Command;
|
|
17
|
-
export declare const clearEditorContent: Command;
|
|
1
|
+
export { addParagraphAtEnd, createParagraphAtEnd, changeImageAlignment, createToggleBlockMarkOnRange, toggleBlockMark, clearEditorContent, } from '@atlaskit/editor-common/commands';
|
|
@@ -41,6 +41,12 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
|
|
|
41
41
|
onMediaSingleClicked: (event: MouseEvent) => void;
|
|
42
42
|
render(): jsx.JSX.Element;
|
|
43
43
|
private clickPlaceholder;
|
|
44
|
+
/**
|
|
45
|
+
* Get parent width for a nested media single node
|
|
46
|
+
* @param view Editor view
|
|
47
|
+
* @param pos node position
|
|
48
|
+
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
49
|
+
*/
|
|
44
50
|
private getLineLength;
|
|
45
51
|
}
|
|
46
52
|
declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {
|
package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts
CHANGED
|
@@ -54,6 +54,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
54
54
|
private saveWrapper;
|
|
55
55
|
private displayGuideline;
|
|
56
56
|
private setIsResizing;
|
|
57
|
+
private calcMaxWidth;
|
|
57
58
|
updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
|
|
58
59
|
roundPixelValue: (value: number) => number;
|
|
59
60
|
getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "187.14.
|
|
3
|
+
"version": "187.14.9",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@atlaskit/code": "^14.6.0",
|
|
56
56
|
"@atlaskit/date": "^0.10.0",
|
|
57
57
|
"@atlaskit/datetime-picker": "^12.7.0",
|
|
58
|
-
"@atlaskit/editor-common": "^74.
|
|
58
|
+
"@atlaskit/editor-common": "^74.39.0",
|
|
59
59
|
"@atlaskit/editor-json-transformer": "^8.10.0",
|
|
60
60
|
"@atlaskit/editor-markdown-transformer": "^5.2.5",
|
|
61
61
|
"@atlaskit/editor-palette": "1.5.1",
|
package/report.api.md
CHANGED
|
@@ -32,6 +32,7 @@ import { AnnotationTypes } from '@atlaskit/adf-schema';
|
|
|
32
32
|
import { BrowserFreezetracking } from '@atlaskit/editor-common/types';
|
|
33
33
|
import { CardOptions } from '@atlaskit/editor-common/card';
|
|
34
34
|
import { CardProvider } from '@atlaskit/editor-common/provider-factory';
|
|
35
|
+
import { clearEditorContent } from '@atlaskit/editor-common/commands';
|
|
35
36
|
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
36
37
|
import { Color } from '@atlaskit/status/element';
|
|
37
38
|
import { Command as Command_2 } from '@atlaskit/editor-common/types';
|
|
@@ -340,8 +341,7 @@ interface CellSelectionData {
|
|
|
340
341
|
// @public (undocumented)
|
|
341
342
|
export const changeColor: (color: string) => Command;
|
|
342
343
|
|
|
343
|
-
|
|
344
|
-
export const clearEditorContent: Command;
|
|
344
|
+
export { clearEditorContent };
|
|
345
345
|
|
|
346
346
|
// @public (undocumented)
|
|
347
347
|
type CloseOptions = {
|
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ import { AnnotationTypes } from '@atlaskit/adf-schema';
|
|
|
21
21
|
import { BrowserFreezetracking } from '@atlaskit/editor-common/types';
|
|
22
22
|
import { CardOptions } from '@atlaskit/editor-common/card';
|
|
23
23
|
import { CardProvider } from '@atlaskit/editor-common/provider-factory';
|
|
24
|
+
import { clearEditorContent } from '@atlaskit/editor-common/commands';
|
|
24
25
|
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
25
26
|
import { Color } from '@atlaskit/status/element';
|
|
26
27
|
import { Command as Command_2 } from '@atlaskit/editor-common/types';
|
|
@@ -323,8 +324,7 @@ interface CellSelectionData {
|
|
|
323
324
|
// @public (undocumented)
|
|
324
325
|
export const changeColor: (color: string) => Command;
|
|
325
326
|
|
|
326
|
-
|
|
327
|
-
export const clearEditorContent: Command;
|
|
327
|
+
export { clearEditorContent }
|
|
328
328
|
|
|
329
329
|
// @public (undocumented)
|
|
330
330
|
type CloseOptions = {
|