@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.
Files changed (52) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/plugins/media/nodeviews/mediaSingle.js +28 -10
  3. package/dist/cjs/plugins/media/styles.js +1 -1
  4. package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +25 -5
  5. package/dist/cjs/plugins/media/utils/media-single.js +21 -2
  6. package/dist/cjs/version-wrapper.js +1 -1
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/plugins/media/nodeviews/mediaSingle.js +21 -3
  9. package/dist/es2019/plugins/media/styles.js +8 -2
  10. package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +22 -3
  11. package/dist/es2019/plugins/media/utils/media-single.js +21 -2
  12. package/dist/es2019/version-wrapper.js +1 -1
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/plugins/media/nodeviews/mediaSingle.js +21 -3
  15. package/dist/esm/plugins/media/styles.js +1 -1
  16. package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +25 -5
  17. package/dist/esm/plugins/media/utils/media-single.js +20 -2
  18. package/dist/esm/version-wrapper.js +1 -1
  19. package/dist/esm/version.json +1 -1
  20. package/dist/types/actions/index.d.ts +2 -3
  21. package/dist/types/plugins/collab-edit/actions.d.ts +1 -1
  22. package/dist/types/plugins/collab-edit/events/handlers.d.ts +2 -2
  23. package/dist/types/plugins/collab-edit/events/initialize.d.ts +1 -1
  24. package/dist/types/plugins/collab-edit/events/send-transaction.d.ts +1 -1
  25. package/dist/types/plugins/collab-edit/index.d.ts +1 -1
  26. package/dist/types/plugins/collab-edit/native-collab-provider-plugin.d.ts +2 -2
  27. package/dist/types/plugins/collab-edit/participants.d.ts +1 -1
  28. package/dist/types/plugins/collab-edit/plugin.d.ts +5 -6
  29. package/dist/types/plugins/collab-edit/types.d.ts +1 -2
  30. package/dist/types/plugins/collab-edit/ui/to-avatar.d.ts +2 -2
  31. package/dist/types/plugins/collab-edit/utils.d.ts +1 -2
  32. package/dist/types/plugins/media/nodeviews/mediaSingle.d.ts +6 -1
  33. package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -1
  34. package/dist/types/plugins/media/utils/media-single.d.ts +2 -1
  35. package/dist/types-ts4.5/actions/index.d.ts +2 -3
  36. package/dist/types-ts4.5/plugins/collab-edit/actions.d.ts +1 -1
  37. package/dist/types-ts4.5/plugins/collab-edit/events/handlers.d.ts +2 -2
  38. package/dist/types-ts4.5/plugins/collab-edit/events/initialize.d.ts +1 -1
  39. package/dist/types-ts4.5/plugins/collab-edit/events/send-transaction.d.ts +1 -1
  40. package/dist/types-ts4.5/plugins/collab-edit/index.d.ts +1 -1
  41. package/dist/types-ts4.5/plugins/collab-edit/native-collab-provider-plugin.d.ts +2 -2
  42. package/dist/types-ts4.5/plugins/collab-edit/participants.d.ts +1 -1
  43. package/dist/types-ts4.5/plugins/collab-edit/plugin.d.ts +5 -6
  44. package/dist/types-ts4.5/plugins/collab-edit/types.d.ts +1 -2
  45. package/dist/types-ts4.5/plugins/collab-edit/ui/to-avatar.d.ts +2 -2
  46. package/dist/types-ts4.5/plugins/collab-edit/utils.d.ts +1 -2
  47. package/dist/types-ts4.5/plugins/media/nodeviews/mediaSingle.d.ts +6 -1
  48. package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +1 -1
  49. package/dist/types-ts4.5/plugins/media/utils/media-single.d.ts +2 -1
  50. package/package.json +2 -2
  51. package/report.api.md +1 -1
  52. 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 _mediaSingle = require("@atlaskit/editor-common/media-single");
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, includeMoreParentNodeTypes)) {
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 || _mediaSingle.DEFAULT_IMAGE_WIDTH;
379
+ width = stateWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH;
365
380
  }
366
381
  if (height === null) {
367
- height = stateHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
382
+ height = stateHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
368
383
  }
369
384
  }
370
385
  if (!width || !height) {
371
- width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
372
- height = _mediaSingle.DEFAULT_IMAGE_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.getLineLength(view, getPos(), true) || lineLength;
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, _mediaSingle.calcMediaSinglePixelWidth)({
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: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
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: 12px;\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: 12px;\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, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _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))");
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 _this2 = this;
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' && _this2.insideInlineLike) {
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.0";
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('.');
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.20.0",
3
+ "version": "187.20.1",
4
4
  "sideEffects": false
5
5
  }
@@ -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, includeMoreParentNodeTypes)) {
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.getLineLength(view, getPos(), true) || lineLength;
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
+ };
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "187.20.0";
2
+ export const version = "187.20.1";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.20.0",
3
+ "version": "187.20.1",
4
4
  "sideEffects": false
5
5
  }
@@ -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, includeMoreParentNodeTypes)) {
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.getLineLength(view, getPos(), true) || lineLength;
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: 12px;\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: 12px;\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, akEditorMediaResizeHandlerPadding, 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))");
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 _this2 = this;
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' && _this2.insideInlineLike) {
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
+ };
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "187.20.0";
2
+ export var version = "187.20.1";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.20.0",
3
+ "version": "187.20.1",
4
4
  "sideEffects": false
5
5
  }
@@ -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-provider';
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-provider';
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-provider';
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-provider").CollabEvents>, currentDeps_2: PrivateCollabEditOptions, currentDeps_3: FeatureFlags, currentDeps_4?: ProviderFactory | undefined, currentDeps_5?: EditorAnalyticsAPI | undefined) => Cleanup;
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-provider';
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-provider';
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-provider';
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-provider").CollabEvents> | null>;
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-provider';
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/collab-provider/types';
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-provider';
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-provider';
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-provider';
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-provider';
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-provider';
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-provider';
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-provider").CollabEvents>, currentDeps_2: PrivateCollabEditOptions, currentDeps_3: FeatureFlags, currentDeps_4?: ProviderFactory | undefined, currentDeps_5?: EditorAnalyticsAPI | undefined) => Cleanup;
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-provider';
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-provider';
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-provider';
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-provider").CollabEvents> | null>;
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-provider';
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/collab-provider/types';
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-provider';
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-provider';
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-provider';
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.20.0",
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.0",
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-provider';
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';
@@ -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-provider';
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';