@atlaskit/editor-core 187.20.0 → 187.20.1
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/plugins/media/nodeviews/mediaSingle.js +28 -10
- package/dist/cjs/plugins/media/styles.js +1 -1
- package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +25 -5
- package/dist/cjs/plugins/media/utils/media-single.js +21 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/media/nodeviews/mediaSingle.js +21 -3
- package/dist/es2019/plugins/media/styles.js +8 -2
- package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +22 -3
- package/dist/es2019/plugins/media/utils/media-single.js +21 -2
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/media/nodeviews/mediaSingle.js +21 -3
- package/dist/esm/plugins/media/styles.js +1 -1
- package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +25 -5
- package/dist/esm/plugins/media/utils/media-single.js +20 -2
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/actions/index.d.ts +2 -3
- package/dist/types/plugins/collab-edit/actions.d.ts +1 -1
- package/dist/types/plugins/collab-edit/events/handlers.d.ts +2 -2
- package/dist/types/plugins/collab-edit/events/initialize.d.ts +1 -1
- package/dist/types/plugins/collab-edit/events/send-transaction.d.ts +1 -1
- package/dist/types/plugins/collab-edit/index.d.ts +1 -1
- package/dist/types/plugins/collab-edit/native-collab-provider-plugin.d.ts +2 -2
- package/dist/types/plugins/collab-edit/participants.d.ts +1 -1
- package/dist/types/plugins/collab-edit/plugin.d.ts +5 -6
- package/dist/types/plugins/collab-edit/types.d.ts +1 -2
- package/dist/types/plugins/collab-edit/ui/to-avatar.d.ts +2 -2
- package/dist/types/plugins/collab-edit/utils.d.ts +1 -2
- package/dist/types/plugins/media/nodeviews/mediaSingle.d.ts +6 -1
- package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -1
- package/dist/types/plugins/media/utils/media-single.d.ts +2 -1
- package/dist/types-ts4.5/actions/index.d.ts +2 -3
- package/dist/types-ts4.5/plugins/collab-edit/actions.d.ts +1 -1
- package/dist/types-ts4.5/plugins/collab-edit/events/handlers.d.ts +2 -2
- package/dist/types-ts4.5/plugins/collab-edit/events/initialize.d.ts +1 -1
- package/dist/types-ts4.5/plugins/collab-edit/events/send-transaction.d.ts +1 -1
- package/dist/types-ts4.5/plugins/collab-edit/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/collab-edit/native-collab-provider-plugin.d.ts +2 -2
- package/dist/types-ts4.5/plugins/collab-edit/participants.d.ts +1 -1
- package/dist/types-ts4.5/plugins/collab-edit/plugin.d.ts +5 -6
- package/dist/types-ts4.5/plugins/collab-edit/types.d.ts +1 -2
- package/dist/types-ts4.5/plugins/collab-edit/ui/to-avatar.d.ts +2 -2
- package/dist/types-ts4.5/plugins/collab-edit/utils.d.ts +1 -2
- package/dist/types-ts4.5/plugins/media/nodeviews/mediaSingle.d.ts +6 -1
- package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -1
- package/dist/types-ts4.5/plugins/media/utils/media-single.d.ts +2 -1
- package/package.json +2 -2
- package/report.api.md +1 -1
- package/tmp/api-report-tmp.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 187.20.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`24f092238be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24f092238be) - NO-ISSUE Switch collab type imports in editor-core to editor-common
|
|
8
|
+
- [`469b5c12303`](https://bitbucket.org/atlassian/atlassian-frontend/commits/469b5c12303) - NO-ISSUE Move CollabEventLocalStepData to editor-common
|
|
9
|
+
- [`c2cd174b721`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2cd174b721) - - Add layout calculation in full width editor
|
|
10
|
+
- Prevent scroll bar for wrapped layout in small viewport
|
|
11
|
+
- Limit resizing for nested node with wrapped layout
|
|
12
|
+
- Update size state for full-width layout to avoid flicker when first resizing
|
|
13
|
+
- [`da58165fe10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da58165fe10) - [ux] ED-19440 - Adds dark mode icons for bullet list, numbered list, quote, status and table
|
|
14
|
+
|
|
3
15
|
## 187.20.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -24,6 +24,7 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
24
24
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
25
25
|
var _nodes = require("../../../utils/nodes");
|
|
26
26
|
var _utils2 = require("../../../utils");
|
|
27
|
+
var _mediaSingle = require("../utils/media-single");
|
|
27
28
|
var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
|
|
28
29
|
var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
|
|
29
30
|
var _main = require("../pm-plugins/main");
|
|
@@ -39,7 +40,7 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
|
|
|
39
40
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
40
41
|
var _captions = require("../commands/captions");
|
|
41
42
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
42
|
-
var
|
|
43
|
+
var _mediaSingle2 = require("@atlaskit/editor-common/media-single");
|
|
43
44
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
44
45
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
45
46
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -254,13 +255,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
254
255
|
* Get parent width for a nested media single node
|
|
255
256
|
* @param view Editor view
|
|
256
257
|
* @param pos node position
|
|
257
|
-
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
258
258
|
*/
|
|
259
259
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
|
|
260
260
|
if (typeof pos !== 'number') {
|
|
261
261
|
return null;
|
|
262
262
|
}
|
|
263
|
-
if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos
|
|
263
|
+
if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
|
|
264
264
|
var $pos = view.state.doc.resolve(pos);
|
|
265
265
|
var domNode = view.nodeDOM($pos.pos);
|
|
266
266
|
if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
|
|
@@ -272,6 +272,21 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
272
272
|
}
|
|
273
273
|
return null;
|
|
274
274
|
});
|
|
275
|
+
/**
|
|
276
|
+
* Get parent width for a nested media single node for new experience
|
|
277
|
+
* @param view Editor view
|
|
278
|
+
* @param pos node position
|
|
279
|
+
*/
|
|
280
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLengthNext", function (view, pos) {
|
|
281
|
+
if (typeof pos !== 'number') {
|
|
282
|
+
return null;
|
|
283
|
+
}
|
|
284
|
+
var $pos = view.state.doc.resolve(pos);
|
|
285
|
+
if ($pos && $pos.parent.type.name !== 'doc') {
|
|
286
|
+
return (0, _mediaSingle.getParentWidthForNestedMediaSingleNode)($pos, view);
|
|
287
|
+
}
|
|
288
|
+
return null;
|
|
289
|
+
});
|
|
275
290
|
return _this;
|
|
276
291
|
}
|
|
277
292
|
(0, _createClass2.default)(MediaSingleNode, [{
|
|
@@ -361,19 +376,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
361
376
|
stateWidth = _this$state.width,
|
|
362
377
|
stateHeight = _this$state.height;
|
|
363
378
|
if (width === null) {
|
|
364
|
-
width = stateWidth ||
|
|
379
|
+
width = stateWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH;
|
|
365
380
|
}
|
|
366
381
|
if (height === null) {
|
|
367
|
-
height = stateHeight ||
|
|
382
|
+
height = stateHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
|
|
368
383
|
}
|
|
369
384
|
}
|
|
370
385
|
if (!width || !height) {
|
|
371
|
-
width =
|
|
372
|
-
height =
|
|
386
|
+
width = _mediaSingle2.DEFAULT_IMAGE_WIDTH;
|
|
387
|
+
height = _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
|
|
373
388
|
}
|
|
374
389
|
var isSelected = selected();
|
|
375
390
|
var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
|
|
376
|
-
var contentWidth = this.
|
|
391
|
+
var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
|
|
377
392
|
var mediaSingleProps = {
|
|
378
393
|
layout: layout,
|
|
379
394
|
width: width,
|
|
@@ -383,7 +398,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
383
398
|
pctWidth: mediaSingleWidthAttribute,
|
|
384
399
|
fullWidthMode: fullWidthMode,
|
|
385
400
|
hasFallbackContainer: false,
|
|
386
|
-
mediaSingleWidth: (0,
|
|
401
|
+
mediaSingleWidth: (0, _mediaSingle2.calcMediaSinglePixelWidth)({
|
|
387
402
|
width: mediaSingleWidthAttribute,
|
|
388
403
|
widthType: widthType,
|
|
389
404
|
origWidth: width,
|
|
@@ -392,7 +407,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
392
407
|
// thus we use the legecy value (exclude table as container node)
|
|
393
408
|
contentWidth: contentWidthForLegacyExperience,
|
|
394
409
|
containerWidth: containerWidth,
|
|
395
|
-
gutterOffset:
|
|
410
|
+
gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
|
|
396
411
|
})
|
|
397
412
|
};
|
|
398
413
|
var resizableMediaSingleProps = _objectSpread({
|
|
@@ -510,6 +525,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
510
525
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
511
526
|
domRef.contentEditable = 'true';
|
|
512
527
|
}
|
|
528
|
+
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
|
|
529
|
+
domRef.classList.add('media-extended-resize-experience');
|
|
530
|
+
}
|
|
513
531
|
return domRef;
|
|
514
532
|
}
|
|
515
533
|
}, {
|
|
@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
|
12
12
|
var _colors = require("@atlaskit/theme/colors");
|
|
13
13
|
var _mediaCard = require("@atlaskit/media-card");
|
|
14
14
|
var _templateObject;
|
|
15
|
-
var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right:
|
|
15
|
+
var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .media-extended-resize-experience[layout^='wrap-'] {\n // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n // to prevent scroll bar\n overflow: visible !important;\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right: ", ";\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: ", ";\n margin-left: -", "px;\n }\n\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n\n border-radius: 6px;\n }\n\n .", ":hover .richMedia-resize-handle-left::after,\n .", ":hover .richMedia-resize-handle-right::after {\n background: ", ";\n }\n\n .", " .richMedia-resize-handle-right::after,\n .", " .richMedia-resize-handle-left::after,\n .", " .richMedia-resize-handle-right:hover::after,\n .", " .richMedia-resize-handle-left:hover::after,\n .", ".is-resizing .richMedia-resize-handle-right::after,\n .", ".is-resizing .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n .__resizable_base__ {\n left: unset !important;\n width: auto !important;\n height: auto !important;\n }\n\n /* Danger when top level node for smart cards / inline links */\n .danger > div > div > .media-card-frame,\n .danger > span > a {\n background-color: ", ";\n box-shadow: 0px 0px 0px ", "px\n ", ";\n transition: background-color 0s, box-shadow 0s;\n }\n /* Danger when nested node or common */\n .danger {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* Media single video player */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* New file experience */\n .", " .", " {\n box-shadow: 0 0 0 1px\n ", " !important;\n }\n /* Media resize handlers */\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n /* Smart cards */\n div div .media-card-frame,\n .inlineCardView-content-wrap > span > a {\n background-color: ", "; /* R75 with 50% opactiy */\n transition: background-color 0s;\n }\n\n div div .media-card-frame::after {\n box-shadow: none;\n }\n }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
|
|
16
16
|
|
|
17
17
|
/* `left: unset` above is to work around Chrome bug where rendering a div with
|
|
18
18
|
* that style applied inside a container that has a scroll, causes any svgs on
|
|
@@ -79,12 +79,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
79
79
|
layout = _this$props2.layout,
|
|
80
80
|
state = _this$props2.view.state,
|
|
81
81
|
containerWidth = _this$props2.containerWidth,
|
|
82
|
-
lineLength = _this$props2.lineLength
|
|
82
|
+
lineLength = _this$props2.lineLength,
|
|
83
|
+
fullWidthMode = _this$props2.fullWidthMode;
|
|
83
84
|
var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
|
|
84
85
|
_this.setState({
|
|
85
86
|
resizedPctWidth: newPct
|
|
86
87
|
});
|
|
87
|
-
var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
|
|
88
|
+
var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
|
|
88
89
|
if (newPct <= 100) {
|
|
89
90
|
if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
|
|
90
91
|
newLayout = layout;
|
|
@@ -100,7 +101,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
100
101
|
};
|
|
101
102
|
}
|
|
102
103
|
});
|
|
103
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
|
|
104
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
|
|
105
|
+
if (fullWidthMode) {
|
|
106
|
+
if (width < contentWidth) {
|
|
107
|
+
return 'center';
|
|
108
|
+
}
|
|
109
|
+
return 'full-width';
|
|
110
|
+
}
|
|
104
111
|
if (width <= contentWidth) {
|
|
105
112
|
return 'center';
|
|
106
113
|
}
|
|
@@ -290,6 +297,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
290
297
|
}, {
|
|
291
298
|
key: "componentDidUpdate",
|
|
292
299
|
value: function componentDidUpdate(prevProps) {
|
|
300
|
+
var _this2 = this;
|
|
293
301
|
var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
|
|
294
302
|
if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
|
|
295
303
|
this.setState({
|
|
@@ -315,6 +323,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
315
323
|
}
|
|
316
324
|
});
|
|
317
325
|
}
|
|
326
|
+
if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
|
|
327
|
+
// To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
|
|
328
|
+
// Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
|
|
329
|
+
this.setState(function (prevState) {
|
|
330
|
+
return {
|
|
331
|
+
size: {
|
|
332
|
+
width: (0, _mediaSingle.calcMediaSingleMaxWidth)(_this2.props.containerWidth),
|
|
333
|
+
height: prevState.size.height
|
|
334
|
+
}
|
|
335
|
+
};
|
|
336
|
+
});
|
|
337
|
+
}
|
|
318
338
|
return true;
|
|
319
339
|
}
|
|
320
340
|
|
|
@@ -474,7 +494,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
474
494
|
}, {
|
|
475
495
|
key: "render",
|
|
476
496
|
value: function render() {
|
|
477
|
-
var
|
|
497
|
+
var _this3 = this;
|
|
478
498
|
var _this$props8 = this.props,
|
|
479
499
|
origWidth = _this$props8.width,
|
|
480
500
|
layout = _this$props8.layout,
|
|
@@ -491,7 +511,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
491
511
|
_ui.handleSides.forEach(function (side) {
|
|
492
512
|
var oppositeSide = side === 'left' ? 'right' : 'left';
|
|
493
513
|
enable[side] = _utils2.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
|
|
494
|
-
if (side === 'left' &&
|
|
514
|
+
if (side === 'left' && _this3.insideInlineLike) {
|
|
495
515
|
enable[side] = false;
|
|
496
516
|
}
|
|
497
517
|
});
|
|
@@ -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.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
|
|
7
|
+
exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.getParentWidthForNestedMediaSingleNode = exports.createMediaSingleNode = void 0;
|
|
8
8
|
exports.isCaptionNode = isCaptionNode;
|
|
9
9
|
exports.isMediaSingle = void 0;
|
|
10
10
|
exports.transformSliceForMedia = transformSliceForMedia;
|
|
@@ -223,4 +223,23 @@ function isCaptionNode(editorView) {
|
|
|
223
223
|
return true;
|
|
224
224
|
}
|
|
225
225
|
return false;
|
|
226
|
-
}
|
|
226
|
+
}
|
|
227
|
+
var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
|
|
228
|
+
var domNode = view.nodeDOM(resolvedPos.pos);
|
|
229
|
+
if (resolvedPos.nodeAfter && _utils3.floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
|
|
230
|
+
var _view$state$schema$no = view.state.schema.nodes,
|
|
231
|
+
tableCell = _view$state$schema$no.tableCell,
|
|
232
|
+
tableHeader = _view$state$schema$no.tableHeader;
|
|
233
|
+
if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
|
|
234
|
+
// since table has constant padding, use hardcoded constant instead of query the dom
|
|
235
|
+
var tablePadding = 8;
|
|
236
|
+
return domNode.parentElement.offsetWidth - tablePadding * 2;
|
|
237
|
+
}
|
|
238
|
+
return domNode.parentElement.offsetWidth;
|
|
239
|
+
}
|
|
240
|
+
if (domNode instanceof HTMLElement) {
|
|
241
|
+
return domNode.offsetWidth;
|
|
242
|
+
}
|
|
243
|
+
return null;
|
|
244
|
+
};
|
|
245
|
+
exports.getParentWidthForNestedMediaSingleNode = getParentWidthForNestedMediaSingleNode;
|
|
@@ -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.20.
|
|
9
|
+
var version = "187.20.1";
|
|
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
|
@@ -8,6 +8,7 @@ import { MediaSingle } from '@atlaskit/editor-common/ui';
|
|
|
8
8
|
import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
|
|
9
9
|
import { isNodeSelectedOrInRange } from '../../../utils/nodes';
|
|
10
10
|
import { setNodeSelection, setTextSelection } from '../../../utils';
|
|
11
|
+
import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
|
|
11
12
|
import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
|
|
12
13
|
import ResizableMediaSingle from '../ui/ResizableMediaSingle';
|
|
13
14
|
import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
|
|
@@ -180,13 +181,12 @@ export default class MediaSingleNode extends Component {
|
|
|
180
181
|
* Get parent width for a nested media single node
|
|
181
182
|
* @param view Editor view
|
|
182
183
|
* @param pos node position
|
|
183
|
-
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
184
184
|
*/
|
|
185
185
|
_defineProperty(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
|
|
186
186
|
if (typeof pos !== 'number') {
|
|
187
187
|
return null;
|
|
188
188
|
}
|
|
189
|
-
if (isRichMediaInsideOfBlockNode(view, pos
|
|
189
|
+
if (isRichMediaInsideOfBlockNode(view, pos)) {
|
|
190
190
|
const $pos = view.state.doc.resolve(pos);
|
|
191
191
|
const domNode = view.nodeDOM($pos.pos);
|
|
192
192
|
if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
|
|
@@ -198,6 +198,21 @@ export default class MediaSingleNode extends Component {
|
|
|
198
198
|
}
|
|
199
199
|
return null;
|
|
200
200
|
});
|
|
201
|
+
/**
|
|
202
|
+
* Get parent width for a nested media single node for new experience
|
|
203
|
+
* @param view Editor view
|
|
204
|
+
* @param pos node position
|
|
205
|
+
*/
|
|
206
|
+
_defineProperty(this, "getLineLengthNext", (view, pos) => {
|
|
207
|
+
if (typeof pos !== 'number') {
|
|
208
|
+
return null;
|
|
209
|
+
}
|
|
210
|
+
const $pos = view.state.doc.resolve(pos);
|
|
211
|
+
if ($pos && $pos.parent.type.name !== 'doc') {
|
|
212
|
+
return getParentWidthForNestedMediaSingleNode($pos, view);
|
|
213
|
+
}
|
|
214
|
+
return null;
|
|
215
|
+
});
|
|
201
216
|
}
|
|
202
217
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
203
218
|
if (nextProps.mediaProvider !== this.props.mediaProvider) {
|
|
@@ -280,7 +295,7 @@ export default class MediaSingleNode extends Component {
|
|
|
280
295
|
}
|
|
281
296
|
const isSelected = selected();
|
|
282
297
|
const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
|
|
283
|
-
const contentWidth = this.
|
|
298
|
+
const contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
|
|
284
299
|
const mediaSingleProps = {
|
|
285
300
|
layout,
|
|
286
301
|
width,
|
|
@@ -411,6 +426,9 @@ class MediaSingleNodeView extends ReactNodeView {
|
|
|
411
426
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
412
427
|
domRef.contentEditable = 'true';
|
|
413
428
|
}
|
|
429
|
+
if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
|
|
430
|
+
domRef.classList.add('media-extended-resize-experience');
|
|
431
|
+
}
|
|
414
432
|
return domRef;
|
|
415
433
|
}
|
|
416
434
|
getContentDOM() {
|
|
@@ -11,6 +11,12 @@ export const mediaStyles = css`
|
|
|
11
11
|
transform: translateX(-50%);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.media-extended-resize-experience[layout^='wrap-'] {
|
|
15
|
+
// override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
|
|
16
|
+
// to prevent scroll bar
|
|
17
|
+
overflow: visible !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
& [layout^='wrap-'] + [layout^='wrap-'] {
|
|
15
21
|
clear: none;
|
|
16
22
|
& + p,
|
|
@@ -72,13 +78,13 @@ export const mediaStyles = css`
|
|
|
72
78
|
|
|
73
79
|
.richMedia-resize-handle-right {
|
|
74
80
|
align-items: flex-end;
|
|
75
|
-
padding-right: 12px;
|
|
81
|
+
padding-right: ${"var(--ds-space-150, 12px)"};
|
|
76
82
|
margin-right: -${akEditorMediaResizeHandlerPadding}px;
|
|
77
83
|
}
|
|
78
84
|
|
|
79
85
|
.richMedia-resize-handle-left {
|
|
80
86
|
align-items: flex-start;
|
|
81
|
-
padding-left: 12px;
|
|
87
|
+
padding-left: ${"var(--ds-space-150, 12px)"};
|
|
82
88
|
margin-left: -${akEditorMediaResizeHandlerPadding}px;
|
|
83
89
|
}
|
|
84
90
|
|
|
@@ -60,13 +60,14 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
60
60
|
state
|
|
61
61
|
},
|
|
62
62
|
containerWidth,
|
|
63
|
-
lineLength
|
|
63
|
+
lineLength,
|
|
64
|
+
fullWidthMode
|
|
64
65
|
} = this.props;
|
|
65
66
|
const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
|
|
66
67
|
this.setState({
|
|
67
68
|
resizedPctWidth: newPct
|
|
68
69
|
});
|
|
69
|
-
let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
|
|
70
|
+
let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
|
|
70
71
|
if (newPct <= 100) {
|
|
71
72
|
if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
|
|
72
73
|
newLayout = layout;
|
|
@@ -82,7 +83,13 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
82
83
|
};
|
|
83
84
|
}
|
|
84
85
|
});
|
|
85
|
-
_defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth) => {
|
|
86
|
+
_defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode) => {
|
|
87
|
+
if (fullWidthMode) {
|
|
88
|
+
if (width < contentWidth) {
|
|
89
|
+
return 'center';
|
|
90
|
+
}
|
|
91
|
+
return 'full-width';
|
|
92
|
+
}
|
|
86
93
|
if (width <= contentWidth) {
|
|
87
94
|
return 'center';
|
|
88
95
|
}
|
|
@@ -292,6 +299,18 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
292
299
|
}
|
|
293
300
|
});
|
|
294
301
|
}
|
|
302
|
+
if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
|
|
303
|
+
// To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
|
|
304
|
+
// Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
|
|
305
|
+
this.setState(prevState => {
|
|
306
|
+
return {
|
|
307
|
+
size: {
|
|
308
|
+
width: calcMediaSingleMaxWidth(this.props.containerWidth),
|
|
309
|
+
height: prevState.size.height
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
});
|
|
313
|
+
}
|
|
295
314
|
return true;
|
|
296
315
|
}
|
|
297
316
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
3
|
import { checkNodeDown } from '../../../utils';
|
|
4
|
-
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
4
|
+
import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
|
|
5
5
|
import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
|
|
6
6
|
import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
|
|
7
7
|
import { mapSlice } from '../../../utils/slice';
|
|
@@ -218,4 +218,23 @@ export function isCaptionNode(editorView) {
|
|
|
218
218
|
return true;
|
|
219
219
|
}
|
|
220
220
|
return false;
|
|
221
|
-
}
|
|
221
|
+
}
|
|
222
|
+
export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
|
|
223
|
+
const domNode = view.nodeDOM(resolvedPos.pos);
|
|
224
|
+
if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
|
|
225
|
+
const {
|
|
226
|
+
tableCell,
|
|
227
|
+
tableHeader
|
|
228
|
+
} = view.state.schema.nodes;
|
|
229
|
+
if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
|
|
230
|
+
// since table has constant padding, use hardcoded constant instead of query the dom
|
|
231
|
+
const tablePadding = 8;
|
|
232
|
+
return domNode.parentElement.offsetWidth - tablePadding * 2;
|
|
233
|
+
}
|
|
234
|
+
return domNode.parentElement.offsetWidth;
|
|
235
|
+
}
|
|
236
|
+
if (domNode instanceof HTMLElement) {
|
|
237
|
+
return domNode.offsetWidth;
|
|
238
|
+
}
|
|
239
|
+
return null;
|
|
240
|
+
};
|
package/dist/es2019/version.json
CHANGED
|
@@ -21,6 +21,7 @@ import { MediaSingle } from '@atlaskit/editor-common/ui';
|
|
|
21
21
|
import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
|
|
22
22
|
import { isNodeSelectedOrInRange } from '../../../utils/nodes';
|
|
23
23
|
import { setNodeSelection, setTextSelection } from '../../../utils';
|
|
24
|
+
import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
|
|
24
25
|
import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
|
|
25
26
|
import ResizableMediaSingle from '../ui/ResizableMediaSingle';
|
|
26
27
|
import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
|
|
@@ -245,13 +246,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
245
246
|
* Get parent width for a nested media single node
|
|
246
247
|
* @param view Editor view
|
|
247
248
|
* @param pos node position
|
|
248
|
-
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
249
249
|
*/
|
|
250
250
|
_defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
|
|
251
251
|
if (typeof pos !== 'number') {
|
|
252
252
|
return null;
|
|
253
253
|
}
|
|
254
|
-
if (isRichMediaInsideOfBlockNode(view, pos
|
|
254
|
+
if (isRichMediaInsideOfBlockNode(view, pos)) {
|
|
255
255
|
var $pos = view.state.doc.resolve(pos);
|
|
256
256
|
var domNode = view.nodeDOM($pos.pos);
|
|
257
257
|
if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
|
|
@@ -263,6 +263,21 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
263
263
|
}
|
|
264
264
|
return null;
|
|
265
265
|
});
|
|
266
|
+
/**
|
|
267
|
+
* Get parent width for a nested media single node for new experience
|
|
268
|
+
* @param view Editor view
|
|
269
|
+
* @param pos node position
|
|
270
|
+
*/
|
|
271
|
+
_defineProperty(_assertThisInitialized(_this), "getLineLengthNext", function (view, pos) {
|
|
272
|
+
if (typeof pos !== 'number') {
|
|
273
|
+
return null;
|
|
274
|
+
}
|
|
275
|
+
var $pos = view.state.doc.resolve(pos);
|
|
276
|
+
if ($pos && $pos.parent.type.name !== 'doc') {
|
|
277
|
+
return getParentWidthForNestedMediaSingleNode($pos, view);
|
|
278
|
+
}
|
|
279
|
+
return null;
|
|
280
|
+
});
|
|
266
281
|
return _this;
|
|
267
282
|
}
|
|
268
283
|
_createClass(MediaSingleNode, [{
|
|
@@ -364,7 +379,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
|
|
|
364
379
|
}
|
|
365
380
|
var isSelected = selected();
|
|
366
381
|
var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
|
|
367
|
-
var contentWidth = this.
|
|
382
|
+
var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
|
|
368
383
|
var mediaSingleProps = {
|
|
369
384
|
layout: layout,
|
|
370
385
|
width: width,
|
|
@@ -501,6 +516,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
501
516
|
// see also: https://github.com/ProseMirror/prosemirror/issues/884
|
|
502
517
|
domRef.contentEditable = 'true';
|
|
503
518
|
}
|
|
519
|
+
if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
|
|
520
|
+
domRef.classList.add('media-extended-resize-experience');
|
|
521
|
+
}
|
|
504
522
|
return domRef;
|
|
505
523
|
}
|
|
506
524
|
}, {
|
|
@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
|
|
|
5
5
|
import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
|
|
6
6
|
import { N60, B200 } from '@atlaskit/theme/colors';
|
|
7
7
|
import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
|
|
8
|
-
export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right:
|
|
8
|
+
export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .media-extended-resize-experience[layout^='wrap-'] {\n // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n // to prevent scroll bar\n overflow: visible !important;\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right: ", ";\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: ", ";\n margin-left: -", "px;\n }\n\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n\n border-radius: 6px;\n }\n\n .", ":hover .richMedia-resize-handle-left::after,\n .", ":hover .richMedia-resize-handle-right::after {\n background: ", ";\n }\n\n .", " .richMedia-resize-handle-right::after,\n .", " .richMedia-resize-handle-left::after,\n .", " .richMedia-resize-handle-right:hover::after,\n .", " .richMedia-resize-handle-left:hover::after,\n .", ".is-resizing .richMedia-resize-handle-right::after,\n .", ".is-resizing .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n .__resizable_base__ {\n left: unset !important;\n width: auto !important;\n height: auto !important;\n }\n\n /* Danger when top level node for smart cards / inline links */\n .danger > div > div > .media-card-frame,\n .danger > span > a {\n background-color: ", ";\n box-shadow: 0px 0px 0px ", "px\n ", ";\n transition: background-color 0s, box-shadow 0s;\n }\n /* Danger when nested node or common */\n .danger {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* Media single video player */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* New file experience */\n .", " .", " {\n box-shadow: 0 0 0 1px\n ", " !important;\n }\n /* Media resize handlers */\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n /* Smart cards */\n div div .media-card-frame,\n .inlineCardView-content-wrap > span > a {\n background-color: ", "; /* R75 with 50% opactiy */\n transition: background-color 0s;\n }\n\n div div .media-card-frame::after {\n box-shadow: none;\n }\n }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
|
|
9
9
|
|
|
10
10
|
/* `left: unset` above is to work around Chrome bug where rendering a div with
|
|
11
11
|
* that style applied inside a container that has a scroll, causes any svgs on
|
|
@@ -72,12 +72,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
72
72
|
layout = _this$props2.layout,
|
|
73
73
|
state = _this$props2.view.state,
|
|
74
74
|
containerWidth = _this$props2.containerWidth,
|
|
75
|
-
lineLength = _this$props2.lineLength
|
|
75
|
+
lineLength = _this$props2.lineLength,
|
|
76
|
+
fullWidthMode = _this$props2.fullWidthMode;
|
|
76
77
|
var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
|
|
77
78
|
_this.setState({
|
|
78
79
|
resizedPctWidth: newPct
|
|
79
80
|
});
|
|
80
|
-
var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
|
|
81
|
+
var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
|
|
81
82
|
if (newPct <= 100) {
|
|
82
83
|
if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
|
|
83
84
|
newLayout = layout;
|
|
@@ -93,7 +94,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
93
94
|
};
|
|
94
95
|
}
|
|
95
96
|
});
|
|
96
|
-
_defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
|
|
97
|
+
_defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
|
|
98
|
+
if (fullWidthMode) {
|
|
99
|
+
if (width < contentWidth) {
|
|
100
|
+
return 'center';
|
|
101
|
+
}
|
|
102
|
+
return 'full-width';
|
|
103
|
+
}
|
|
97
104
|
if (width <= contentWidth) {
|
|
98
105
|
return 'center';
|
|
99
106
|
}
|
|
@@ -283,6 +290,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
283
290
|
}, {
|
|
284
291
|
key: "componentDidUpdate",
|
|
285
292
|
value: function componentDidUpdate(prevProps) {
|
|
293
|
+
var _this2 = this;
|
|
286
294
|
var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
|
|
287
295
|
if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
|
|
288
296
|
this.setState({
|
|
@@ -308,6 +316,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
308
316
|
}
|
|
309
317
|
});
|
|
310
318
|
}
|
|
319
|
+
if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
|
|
320
|
+
// To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
|
|
321
|
+
// Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
|
|
322
|
+
this.setState(function (prevState) {
|
|
323
|
+
return {
|
|
324
|
+
size: {
|
|
325
|
+
width: calcMediaSingleMaxWidth(_this2.props.containerWidth),
|
|
326
|
+
height: prevState.size.height
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
});
|
|
330
|
+
}
|
|
311
331
|
return true;
|
|
312
332
|
}
|
|
313
333
|
|
|
@@ -467,7 +487,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
467
487
|
}, {
|
|
468
488
|
key: "render",
|
|
469
489
|
value: function render() {
|
|
470
|
-
var
|
|
490
|
+
var _this3 = this;
|
|
471
491
|
var _this$props8 = this.props,
|
|
472
492
|
origWidth = _this$props8.width,
|
|
473
493
|
layout = _this$props8.layout,
|
|
@@ -484,7 +504,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
484
504
|
handleSides.forEach(function (side) {
|
|
485
505
|
var oppositeSide = side === 'left' ? 'right' : 'left';
|
|
486
506
|
enable[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
|
|
487
|
-
if (side === 'left' &&
|
|
507
|
+
if (side === 'left' && _this3.insideInlineLike) {
|
|
488
508
|
enable[side] = false;
|
|
489
509
|
}
|
|
490
510
|
});
|
|
@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
4
4
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
5
5
|
import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
6
6
|
import { checkNodeDown } from '../../../utils';
|
|
7
|
-
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
7
|
+
import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
|
|
8
8
|
import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
|
|
9
9
|
import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
|
|
10
10
|
import { mapSlice } from '../../../utils/slice';
|
|
@@ -209,4 +209,22 @@ export function isCaptionNode(editorView) {
|
|
|
209
209
|
return true;
|
|
210
210
|
}
|
|
211
211
|
return false;
|
|
212
|
-
}
|
|
212
|
+
}
|
|
213
|
+
export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
|
|
214
|
+
var domNode = view.nodeDOM(resolvedPos.pos);
|
|
215
|
+
if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
|
|
216
|
+
var _view$state$schema$no = view.state.schema.nodes,
|
|
217
|
+
tableCell = _view$state$schema$no.tableCell,
|
|
218
|
+
tableHeader = _view$state$schema$no.tableHeader;
|
|
219
|
+
if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
|
|
220
|
+
// since table has constant padding, use hardcoded constant instead of query the dom
|
|
221
|
+
var tablePadding = 8;
|
|
222
|
+
return domNode.parentElement.offsetWidth - tablePadding * 2;
|
|
223
|
+
}
|
|
224
|
+
return domNode.parentElement.offsetWidth;
|
|
225
|
+
}
|
|
226
|
+
if (domNode instanceof HTMLElement) {
|
|
227
|
+
return domNode.offsetWidth;
|
|
228
|
+
}
|
|
229
|
+
return null;
|
|
230
|
+
};
|
package/dist/esm/version.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { Node } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import type { AnalyticsEventPayload } from '@atlaskit/analytics-next/AnalyticsEvent';
|
|
4
|
-
import type { ResolvedEditorState } from '@atlaskit/collab
|
|
5
|
-
import type { ContextUpdateHandler, EditorActionsOptions, ReplaceRawValue } from '@atlaskit/editor-common/types';
|
|
6
|
-
import type { FeatureFlags, Transformer } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { ResolvedEditorState } from '@atlaskit/editor-common/collab';
|
|
5
|
+
import type { ContextUpdateHandler, EditorActionsOptions, ReplaceRawValue, FeatureFlags, Transformer } from '@atlaskit/editor-common/types';
|
|
7
6
|
import type { EventDispatcher } from '../event-dispatcher';
|
|
8
7
|
export default class EditorActions<T = any> implements EditorActionsOptions<T> {
|
|
9
8
|
private editorView?;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
import type { CollabEventInitData, CollabEventRemoteData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabSendableSelection } from '@atlaskit/collab
|
|
3
|
+
import type { CollabEventInitData, CollabEventRemoteData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabSendableSelection } from '@atlaskit/editor-common/collab';
|
|
4
4
|
import type { PrivateCollabEditOptions } from './types';
|
|
5
5
|
export declare const handleInit: (initData: CollabEventInitData, view: EditorView, options?: PrivateCollabEditOptions) => void;
|
|
6
6
|
export declare const handleConnection: (connectionData: CollabEventConnectionData, view: EditorView) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
import type { CollabEventInitData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabEventRemoteData, CollabEventLocalStepData, CollabEditProvider } from '@atlaskit/collab
|
|
2
|
+
import type { CollabEventInitData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabEventRemoteData, CollabEventLocalStepData, CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
3
3
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
4
4
|
import type { PrivateCollabEditOptions } from '../types';
|
|
5
5
|
import type { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
@@ -21,4 +21,4 @@ export interface CollabHandlers {
|
|
|
21
21
|
}) => void;
|
|
22
22
|
}
|
|
23
23
|
export type Cleanup = () => void;
|
|
24
|
-
export declare const subscribe: (currentDeps_0: EditorView, currentDeps_1: CollabEditProvider<import("@atlaskit/collab
|
|
24
|
+
export declare const subscribe: (currentDeps_0: EditorView, currentDeps_1: CollabEditProvider<import("@atlaskit/editor-common/collab").CollabEvents>, currentDeps_2: PrivateCollabEditOptions, currentDeps_3: FeatureFlags, currentDeps_4?: ProviderFactory | undefined, currentDeps_5?: EditorAnalyticsAPI | undefined) => Cleanup;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
2
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
-
import type { CollabEditProvider } from '@atlaskit/collab
|
|
3
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
4
4
|
import type { PrivateCollabEditOptions } from '../types';
|
|
5
5
|
import type { Cleanup } from './handlers';
|
|
6
6
|
import type { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CollabEditProvider } from '@atlaskit/collab
|
|
1
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
2
2
|
import type { Transaction, EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
type Props = {
|
|
4
4
|
originalTransaction: Readonly<Transaction>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import { pluginKey } from './plugin';
|
|
3
|
-
import { PrivateCollabEditOptions } from './types';
|
|
3
|
+
import type { 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 };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { CollabEditProvider } from '@atlaskit/collab
|
|
3
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
4
4
|
export declare const nativeCollabProviderPlugin: ({ providerPromise, }: {
|
|
5
5
|
providerPromise: Promise<CollabEditProvider>;
|
|
6
|
-
}) => SafePlugin<CollabEditProvider<import("@atlaskit/collab
|
|
6
|
+
}) => SafePlugin<CollabEditProvider<import("@atlaskit/editor-common/collab").CollabEvents> | null>;
|
|
7
7
|
export declare const getCollabProvider: (editorState: EditorState) => CollabEditProvider | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CollabParticipant } from '@atlaskit/collab
|
|
1
|
+
import type { CollabParticipant } from '@atlaskit/editor-common/collab';
|
|
2
2
|
export interface ReadOnlyParticipants {
|
|
3
3
|
get(sessionId: string): CollabParticipant | undefined;
|
|
4
4
|
toArray(): ReadonlyArray<CollabParticipant>;
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
-
import { Dispatch } from '../../event-dispatcher';
|
|
4
|
-
import { PrivateCollabEditOptions, ProviderCallback } from './types';
|
|
2
|
+
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
+
import type { Dispatch } from '../../event-dispatcher';
|
|
4
|
+
import type { PrivateCollabEditOptions, ProviderCallback } from './types';
|
|
5
5
|
import { PluginState } from './plugin-state';
|
|
6
6
|
import { pluginKey } from './plugin-key';
|
|
7
|
-
import { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
8
|
-
import type { CollabEditProvider } from '@atlaskit/
|
|
9
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
7
|
+
import type { FeatureFlags, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
8
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
10
9
|
import type collabEditPlugin from './index';
|
|
11
10
|
export { PluginState, pluginKey };
|
|
12
11
|
export declare const createPlugin: (dispatch: Dispatch, providerFactory: ProviderFactory, providerResolver: (value: CollabEditProvider) => void, collabProviderCallback: ProviderCallback, options: PrivateCollabEditOptions, featureFlags: FeatureFlags, pluginInjectionApi: ExtractInjectionAPI<typeof collabEditPlugin> | undefined) => SafePlugin<PluginState>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import type { CollabEditProvider, SyncUpErrorFunction } from '@atlaskit/collab
|
|
2
|
-
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
1
|
+
import type { CollabEditProvider, SyncUpErrorFunction, CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
3
2
|
export type { InviteToEditComponentProps, InviteToEditButtonProps, CollabInviteToEditProps, CollabAnalyticsProps, } from '@atlaskit/editor-common/collab';
|
|
4
3
|
export type PrivateCollabEditOptions = CollabEditOptions & {
|
|
5
4
|
sanitizePrivateContent?: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarProps } from '@atlaskit/avatar-group';
|
|
2
|
-
import type { CollabParticipant } from '@atlaskit/collab
|
|
1
|
+
import type { AvatarProps } from '@atlaskit/avatar-group';
|
|
2
|
+
import type { CollabParticipant } from '@atlaskit/editor-common/collab';
|
|
3
3
|
declare const _default: import("memoize-one").MemoizedFn<(participant: CollabParticipant) => AvatarProps>;
|
|
4
4
|
export default _default;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import type { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
import type { CollabParticipant } from '@atlaskit/collab
|
|
5
|
-
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
4
|
+
import type { CollabParticipant, CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
6
5
|
export interface Color {
|
|
7
6
|
solid: string;
|
|
8
7
|
selection: string;
|
|
@@ -45,9 +45,14 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
|
|
|
45
45
|
* Get parent width for a nested media single node
|
|
46
46
|
* @param view Editor view
|
|
47
47
|
* @param pos node position
|
|
48
|
-
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
49
48
|
*/
|
|
50
49
|
private getLineLength;
|
|
50
|
+
/**
|
|
51
|
+
* Get parent width for a nested media single node for new experience
|
|
52
|
+
* @param view Editor view
|
|
53
|
+
* @param pos node position
|
|
54
|
+
*/
|
|
55
|
+
private getLineLengthNext;
|
|
51
56
|
}
|
|
52
57
|
declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {
|
|
53
58
|
lastOffsetLeft: number;
|
|
@@ -38,7 +38,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
38
38
|
width: number | null;
|
|
39
39
|
layout: MediaSingleLayout;
|
|
40
40
|
};
|
|
41
|
-
calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number) => 'center' | 'wide' | 'full-width';
|
|
41
|
+
calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean) => 'center' | 'wide' | 'full-width';
|
|
42
42
|
get $pos(): import("prosemirror-model").ResolvedPos | null;
|
|
43
43
|
/**
|
|
44
44
|
* The maxmimum number of grid columns this node can resize to.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
|
|
1
|
+
import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -19,3 +19,4 @@ export declare const insertMediaSingleNode: (view: EditorView, mediaState: Media
|
|
|
19
19
|
export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
|
|
20
20
|
export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
|
|
21
21
|
export declare function isCaptionNode(editorView: EditorView): boolean;
|
|
22
|
+
export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { Node } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import type { AnalyticsEventPayload } from '@atlaskit/analytics-next/AnalyticsEvent';
|
|
4
|
-
import type { ResolvedEditorState } from '@atlaskit/collab
|
|
5
|
-
import type { ContextUpdateHandler, EditorActionsOptions, ReplaceRawValue } from '@atlaskit/editor-common/types';
|
|
6
|
-
import type { FeatureFlags, Transformer } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { ResolvedEditorState } from '@atlaskit/editor-common/collab';
|
|
5
|
+
import type { ContextUpdateHandler, EditorActionsOptions, ReplaceRawValue, FeatureFlags, Transformer } from '@atlaskit/editor-common/types';
|
|
7
6
|
import type { EventDispatcher } from '../event-dispatcher';
|
|
8
7
|
export default class EditorActions<T = any> implements EditorActionsOptions<T> {
|
|
9
8
|
private editorView?;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
-
import type { CollabEventInitData, CollabEventRemoteData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabSendableSelection } from '@atlaskit/collab
|
|
3
|
+
import type { CollabEventInitData, CollabEventRemoteData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabSendableSelection } from '@atlaskit/editor-common/collab';
|
|
4
4
|
import type { PrivateCollabEditOptions } from './types';
|
|
5
5
|
export declare const handleInit: (initData: CollabEventInitData, view: EditorView, options?: PrivateCollabEditOptions) => void;
|
|
6
6
|
export declare const handleConnection: (connectionData: CollabEventConnectionData, view: EditorView) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
|
-
import type { CollabEventInitData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabEventRemoteData, CollabEventLocalStepData, CollabEditProvider } from '@atlaskit/collab
|
|
2
|
+
import type { CollabEventInitData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabEventRemoteData, CollabEventLocalStepData, CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
3
3
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
4
4
|
import type { PrivateCollabEditOptions } from '../types';
|
|
5
5
|
import type { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
@@ -21,4 +21,4 @@ export interface CollabHandlers {
|
|
|
21
21
|
}) => void;
|
|
22
22
|
}
|
|
23
23
|
export type Cleanup = () => void;
|
|
24
|
-
export declare const subscribe: (currentDeps_0: EditorView, currentDeps_1: CollabEditProvider<import("@atlaskit/collab
|
|
24
|
+
export declare const subscribe: (currentDeps_0: EditorView, currentDeps_1: CollabEditProvider<import("@atlaskit/editor-common/collab").CollabEvents>, currentDeps_2: PrivateCollabEditOptions, currentDeps_3: FeatureFlags, currentDeps_4?: ProviderFactory | undefined, currentDeps_5?: EditorAnalyticsAPI | undefined) => Cleanup;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
2
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
-
import type { CollabEditProvider } from '@atlaskit/collab
|
|
3
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
4
4
|
import type { PrivateCollabEditOptions } from '../types';
|
|
5
5
|
import type { Cleanup } from './handlers';
|
|
6
6
|
import type { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CollabEditProvider } from '@atlaskit/collab
|
|
1
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
2
2
|
import type { Transaction, EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
type Props = {
|
|
4
4
|
originalTransaction: Readonly<Transaction>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
2
|
import { pluginKey } from './plugin';
|
|
3
|
-
import { PrivateCollabEditOptions } from './types';
|
|
3
|
+
import type { 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 };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { CollabEditProvider } from '@atlaskit/collab
|
|
3
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
4
4
|
export declare const nativeCollabProviderPlugin: ({ providerPromise, }: {
|
|
5
5
|
providerPromise: Promise<CollabEditProvider>;
|
|
6
|
-
}) => SafePlugin<CollabEditProvider<import("@atlaskit/collab
|
|
6
|
+
}) => SafePlugin<CollabEditProvider<import("@atlaskit/editor-common/collab").CollabEvents> | null>;
|
|
7
7
|
export declare const getCollabProvider: (editorState: EditorState) => CollabEditProvider | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CollabParticipant } from '@atlaskit/collab
|
|
1
|
+
import type { CollabParticipant } from '@atlaskit/editor-common/collab';
|
|
2
2
|
export interface ReadOnlyParticipants {
|
|
3
3
|
get(sessionId: string): CollabParticipant | undefined;
|
|
4
4
|
toArray(): ReadonlyArray<CollabParticipant>;
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
-
import { Dispatch } from '../../event-dispatcher';
|
|
4
|
-
import { PrivateCollabEditOptions, ProviderCallback } from './types';
|
|
2
|
+
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
+
import type { Dispatch } from '../../event-dispatcher';
|
|
4
|
+
import type { PrivateCollabEditOptions, ProviderCallback } from './types';
|
|
5
5
|
import { PluginState } from './plugin-state';
|
|
6
6
|
import { pluginKey } from './plugin-key';
|
|
7
|
-
import { FeatureFlags } from '@atlaskit/editor-common/types';
|
|
8
|
-
import type { CollabEditProvider } from '@atlaskit/
|
|
9
|
-
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
7
|
+
import type { FeatureFlags, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
8
|
+
import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
|
|
10
9
|
import type collabEditPlugin from './index';
|
|
11
10
|
export { PluginState, pluginKey };
|
|
12
11
|
export declare const createPlugin: (dispatch: Dispatch, providerFactory: ProviderFactory, providerResolver: (value: CollabEditProvider) => void, collabProviderCallback: ProviderCallback, options: PrivateCollabEditOptions, featureFlags: FeatureFlags, pluginInjectionApi: ExtractInjectionAPI<typeof collabEditPlugin> | undefined) => SafePlugin<PluginState>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import type { CollabEditProvider, SyncUpErrorFunction } from '@atlaskit/collab
|
|
2
|
-
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
1
|
+
import type { CollabEditProvider, SyncUpErrorFunction, CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
3
2
|
export type { InviteToEditComponentProps, InviteToEditButtonProps, CollabInviteToEditProps, CollabAnalyticsProps, } from '@atlaskit/editor-common/collab';
|
|
4
3
|
export type PrivateCollabEditOptions = CollabEditOptions & {
|
|
5
4
|
sanitizePrivateContent?: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarProps } from '@atlaskit/avatar-group';
|
|
2
|
-
import type { CollabParticipant } from '@atlaskit/collab
|
|
1
|
+
import type { AvatarProps } from '@atlaskit/avatar-group';
|
|
2
|
+
import type { CollabParticipant } from '@atlaskit/editor-common/collab';
|
|
3
3
|
declare const _default: import("memoize-one").MemoizedFn<(participant: CollabParticipant) => AvatarProps>;
|
|
4
4
|
export default _default;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import type { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
import type { CollabParticipant } from '@atlaskit/collab
|
|
5
|
-
import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
4
|
+
import type { CollabParticipant, CollabEditOptions } from '@atlaskit/editor-common/collab';
|
|
6
5
|
export interface Color {
|
|
7
6
|
solid: string;
|
|
8
7
|
selection: string;
|
|
@@ -45,9 +45,14 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
|
|
|
45
45
|
* Get parent width for a nested media single node
|
|
46
46
|
* @param view Editor view
|
|
47
47
|
* @param pos node position
|
|
48
|
-
* @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
|
|
49
48
|
*/
|
|
50
49
|
private getLineLength;
|
|
50
|
+
/**
|
|
51
|
+
* Get parent width for a nested media single node for new experience
|
|
52
|
+
* @param view Editor view
|
|
53
|
+
* @param pos node position
|
|
54
|
+
*/
|
|
55
|
+
private getLineLengthNext;
|
|
51
56
|
}
|
|
52
57
|
declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {
|
|
53
58
|
lastOffsetLeft: number;
|
package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts
CHANGED
|
@@ -38,7 +38,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
38
38
|
width: number | null;
|
|
39
39
|
layout: MediaSingleLayout;
|
|
40
40
|
};
|
|
41
|
-
calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number) => 'center' | 'wide' | 'full-width';
|
|
41
|
+
calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean) => 'center' | 'wide' | 'full-width';
|
|
42
42
|
get $pos(): import("prosemirror-model").ResolvedPos | null;
|
|
43
43
|
/**
|
|
44
44
|
* The maxmimum number of grid columns this node can resize to.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
|
|
1
|
+
import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -19,3 +19,4 @@ export declare const insertMediaSingleNode: (view: EditorView, mediaState: Media
|
|
|
19
19
|
export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
|
|
20
20
|
export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
|
|
21
21
|
export declare function isCaptionNode(editorView: EditorView): boolean;
|
|
22
|
+
export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "187.20.
|
|
3
|
+
"version": "187.20.1",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
"@af/editor-libra": "*",
|
|
144
144
|
"@af/integration-testing": "*",
|
|
145
145
|
"@atlaskit/code": "^14.6.0",
|
|
146
|
-
"@atlaskit/collab-provider": "9.10.
|
|
146
|
+
"@atlaskit/collab-provider": "9.10.1",
|
|
147
147
|
"@atlaskit/dropdown-menu": "^11.11.0",
|
|
148
148
|
"@atlaskit/editor-extension-dropbox": "^0.4.0",
|
|
149
149
|
"@atlaskit/editor-plugin-table": "^2.8.0",
|
package/report.api.md
CHANGED
|
@@ -139,7 +139,7 @@ import { default as React_2 } from 'react';
|
|
|
139
139
|
import type { ReactElement } from 'react';
|
|
140
140
|
import type { ReactHookFactory } from '@atlaskit/editor-common/types';
|
|
141
141
|
import type { ReplaceRawValue } from '@atlaskit/editor-common/types';
|
|
142
|
-
import type { ResolvedEditorState } from '@atlaskit/collab
|
|
142
|
+
import type { ResolvedEditorState } from '@atlaskit/editor-common/collab';
|
|
143
143
|
import type { RichMediaLayout } from '@atlaskit/adf-schema';
|
|
144
144
|
import type { Schema } from '@atlaskit/editor-prosemirror/model';
|
|
145
145
|
import type { SearchProvider } from '@atlaskit/editor-common/provider-factory';
|
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -128,7 +128,7 @@ import { default as React_2 } from 'react';
|
|
|
128
128
|
import type { ReactElement } from 'react';
|
|
129
129
|
import type { ReactHookFactory } from '@atlaskit/editor-common/types';
|
|
130
130
|
import type { ReplaceRawValue } from '@atlaskit/editor-common/types';
|
|
131
|
-
import type { ResolvedEditorState } from '@atlaskit/collab
|
|
131
|
+
import type { ResolvedEditorState } from '@atlaskit/editor-common/collab';
|
|
132
132
|
import type { RichMediaLayout } from '@atlaskit/adf-schema';
|
|
133
133
|
import type { Schema } from '@atlaskit/editor-prosemirror/model';
|
|
134
134
|
import type { SearchProvider } from '@atlaskit/editor-common/provider-factory';
|