@atlaskit/editor-core 192.5.0 → 192.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 192.7.0
+
+### Minor Changes
+
+- [#77607](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77607) [`78ab76808037`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/78ab76808037) - Fixed bug where save button state was not updated correctly for when media upload is in progress or finish uploading
+
+## 192.6.0
+
+### Minor Changes
+
+- [#63691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63691) [`02293e70771b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/02293e70771b) - add allowWidthDetector option to be used to skip width detector in renderer, to make media single works in inline extension like excerpt include
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 192.5.0
 
 ### Minor Changes

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CommentEditorWithIntl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -13,7 +14,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,17 +37,49 @@ var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _Toolbar = _interopRequireDefault(require("../../Toolbar"));
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 var _Toolbar2 = require("./Toolbar");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-/** @jsx jsx */
 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); }
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */ /** @jsx jsx */
 var CommentEditorMargin = 14;
-var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: ", " ", "\n      ", ";\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, white)", "var(--ds-border, ".concat(_colors.N40, ")"), (0, _constants.borderRadius)());
-var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: ", ";\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: ", ";\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", ";\n\n  ", ";\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden', "var(--ds-space-150, 12px)", CommentEditorMargin - _styles.GRID_GUTTER, CommentEditorMargin - _styles.GRID_GUTTER, CommentEditorMargin - _styles.GRID_GUTTER, "var(--ds-space-250, 20px)", _commonStyles.tableCommentEditorStyles));
+var commentEditorStyle = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  '.less-margin .ProseMirror': {
+    margin: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)")
+  },
+  minWidth: '272px',
+  height: 'auto',
+  backgroundColor: "var(--ds-background-input, white)",
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  boxSizing: 'border-box',
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  maxWidth: 'inherit',
+  wordWrap: 'break-word'
+});
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)({
+  flexGrow: 1,
+  overflowX: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden',
+  lineHeight: '24px',
+  '.ProseMirror': {
+    margin: "var(--ds-space-150, 12px)"
+  },
+  '.gridParent': {
+    marginLeft: "".concat(CommentEditorMargin - _styles.GRID_GUTTER, "px"),
+    marginRight: "".concat(CommentEditorMargin - _styles.GRID_GUTTER, "px"),
+    width: "calc(100% + ".concat(CommentEditorMargin - _styles.GRID_GUTTER, "px)")
+  },
+  padding: "var(--ds-space-250, 20px)"
+}, _commonStyles.tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-025, 2px)");
+var secondaryToolbarStyle = (0, _react2.css)({
+  boxSizing: 'border-box',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  display: 'flex',
+  padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-025, 2px)")
+});
+var appearance = 'comment';
 var Editor = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Editor, _React$Component);
   var _super = _createSuper(Editor);
@@ -114,7 +146,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
       }, (0, _react2.jsx)("div", {
-        css: [commentEditorStyle, (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              min-height: ", "px;\n            "])), minHeight)],
+        css: [commentEditorStyle, (0, _react2.css)({
+          minHeight: "".concat(minHeight, "px")
+        })],
         className: "akEditor",
         ref: _this.wrapperElementRef
       }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
@@ -153,7 +187,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           ref: function ref(_ref3) {
             return _this.containerElement = _ref3;
           },
-          css: maxHeight ? (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n                            max-height: ", "px;\n                          "])), maxHeight) : null,
+          css: maxHeight ? (0, _react2.css)({
+            maxHeight: "".concat(maxHeight, "px")
+          }) : null,
           className: (0, _classnames.default)('ak-editor-content-area', {
             'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
           }),
@@ -219,4 +255,165 @@ function RenderWithPluginState(_ref4) {
     mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
   }));
 }
-var CommentEditorWithIntl = exports.CommentEditorWithIntl = (0, _reactIntlNext.injectIntl)(Editor);
+var EditorNext = function EditorNext(props) {
+  var api = (0, _context.usePresetContext)();
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media', 'maxContentSize']),
+    mediaState = _useSharedPluginState2.mediaState,
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  var editorDOMElement = props.editorDOMElement,
+    editorView = props.editorView,
+    editorActions = props.editorActions,
+    eventDispatcher = props.eventDispatcher,
+    providerFactory = props.providerFactory,
+    contentComponents = props.contentComponents,
+    customContentComponents = props.customContentComponents,
+    customPrimaryToolbarComponents = props.customPrimaryToolbarComponents,
+    primaryToolbarComponents = props.primaryToolbarComponents,
+    customSecondaryToolbarComponents = props.customSecondaryToolbarComponents,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    maxHeight = props.maxHeight,
+    _props$minHeight = props.minHeight,
+    minHeight = _props$minHeight === void 0 ? 150 : _props$minHeight,
+    onSave = props.onSave,
+    onCancel = props.onCancel,
+    disabled = props.disabled,
+    dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
+    intl = props.intl,
+    useStickyToolbar = props.useStickyToolbar,
+    pluginHooks = props.pluginHooks,
+    featureFlags = props.featureFlags,
+    innerRef = props.innerRef;
+  var maxContentSizeReached = Boolean(maxContentSizeState === null || maxContentSizeState === void 0 ? void 0 : maxContentSizeState.maxContentSizeReached);
+  var showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
+  var containerElement = null;
+
+  // Wrapper container for toolbar and content area
+  var wrapperElementRef = (0, _react.useMemo)(function () {
+    return innerRef || /*#__PURE__*/_react.default.createRef();
+  }, [innerRef]);
+  var _useState = (0, _react.useState)(disabled),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    saveButtonDisabled = _useState2[0],
+    setSaveButtonDisabled = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (mediaState) {
+      mediaState.subscribeToUploadInProgressState(setSaveButtonDisabled);
+    }
+    return function () {
+      return mediaState === null || mediaState === void 0 ? void 0 : mediaState.unsubscribeFromUploadInProgressState(setSaveButtonDisabled);
+    };
+  }, [mediaState]);
+  var handleSave = (0, _react.useCallback)(function () {
+    if (editorView && onSave) {
+      onSave(editorView);
+    }
+  }, [editorView, onSave]);
+  var handleCancel = (0, _react.useCallback)(function () {
+    if (editorView && onCancel) {
+      onCancel(editorView);
+    }
+  }, [editorView, onCancel]);
+  var isShortcutToFocusToolbar = (0, _react.useCallback)(function (event) {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && (event.key === 'F9' || event.keyCode === 120);
+  }, []);
+  var isTwoLineToolbarEnabled = !!customPrimaryToolbarComponents && !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.twoLineEditorToolbar);
+  var handleEscape = (0, _react.useCallback)(function (event) {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [editorView]);
+  return (0, _react2.jsx)(_WithFlash.default, {
+    animate: maxContentSizeReached
+  }, (0, _react2.jsx)("div", {
+    css: [commentEditorStyle, (0, _react2.css)({
+      minHeight: "".concat(minHeight, "px")
+    })],
+    className: "akEditor",
+    ref: wrapperElementRef
+  }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
+    useStickyToolbar: useStickyToolbar,
+    twoLineEditorToolbar: isTwoLineToolbarEnabled
+  }, (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+    editorView: editorView,
+    childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleEscape: handleEscape,
+    editorAppearance: appearance,
+    useStickyToolbar: useStickyToolbar,
+    intl: intl
+  }, (0, _react2.jsx)(_Toolbar.default, {
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    items: primaryToolbarComponents,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    disabled: !!disabled,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    containerElement: containerElement,
+    twoLineEditorToolbar: isTwoLineToolbarEnabled
+  }), (0, _react2.jsx)("div", {
+    css: (0, _Toolbar2.mainToolbarCustomComponentsSlotStyle)(isTwoLineToolbarEnabled)
+  }, customPrimaryToolbarComponents))), (0, _react2.jsx)(_Addon.ClickAreaBlock, {
+    editorView: editorView,
+    editorDisabled: disabled
+  }, (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref5) {
+    var width = _ref5.width;
+    return (0, _react2.jsx)(ContentArea, {
+      ref: function ref(_ref6) {
+        return containerElement = _ref6;
+      },
+      css: maxHeight ? (0, _react2.css)({
+        maxHeight: "".concat(maxHeight, "px")
+      }) : null,
+      className: (0, _classnames.default)('ak-editor-content-area', {
+        'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
+      }),
+      featureFlags: featureFlags
+    }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      providerFactory: providerFactory,
+      appearance: appearance,
+      items: contentComponents,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: !!disabled,
+      wrapperElement: wrapperElementRef.current,
+      pluginHooks: pluginHooks
+    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null);
+  }))), showSecondaryToolbar && (0, _react2.jsx)("div", {
+    css: secondaryToolbarStyle,
+    "data-testid": "ak-editor-secondary-toolbar"
+  }, (0, _react2.jsx)(_buttonGroup.default, null, !!onSave && (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "primary",
+    onClick: handleSave,
+    testId: "comment-save-button",
+    isDisabled: disabled || saveButtonDisabled
+  }, intl.formatMessage(_messages.default.saveButton)), !!onCancel && (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    onClick: handleCancel,
+    isDisabled: disabled
+  }, intl.formatMessage(_messages.default.cancelButton))), (0, _react2.jsx)("span", {
+    style: {
+      flexGrow: 1
+    }
+  }), customSecondaryToolbarComponents));
+};
+EditorNext.displayName = 'CommentEditorAppearance';
+var CommentEditorNextWithIntl = (0, _reactIntlNext.injectIntl)(EditorNext);
+var CommentEditorOldWithIntl = (0, _reactIntlNext.injectIntl)(Editor);
+var ExportComp = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.alluploadsfinished-dispatch-update_ivtow') ? CommentEditorNextWithIntl : CommentEditorOldWithIntl;
+var CommentEditorWithIntl = exports.CommentEditorWithIntl = ExportComp;

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -82,6 +82,12 @@ var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(c
       '.pm-table-container, .code-block, .extension-container': {
         maxWidth: "".concat(containerWidth - TOTAL_PADDING - _consts.tableMarginFullWidthMode * 2, "px")
       },
+      '.extension-container.inline': {
+        maxWidth: '100%'
+      },
+      'td .extension-container.inline': {
+        maxWidth: 'inherit'
+      },
       '.multiBodiedExtension--container': {
         maxWidth: "".concat(containerWidth - TOTAL_PADDING - _consts.tableMarginFullWidthMode * 2, "px")
       },

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "192.5.0";
+var version = exports.version = "192.7.0";

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
@@ -24,57 +25,44 @@ import Toolbar from '../../Toolbar';
 import WithFlash from '../../WithFlash';
 import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
 const CommentEditorMargin = 14;
-const commentEditorStyle = css`
-  display: flex;
-  flex-direction: column;
-
-  .less-margin .ProseMirror {
-    margin: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"}
-      ${"var(--ds-space-100, 8px)"};
-  }
-
-  min-width: 272px;
-  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */
-  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */
-
-  height: auto;
-  background-color: ${"var(--ds-background-input, white)"};
-  border: 1px solid ${`var(--ds-border, ${N40})`};
-  box-sizing: border-box;
-  border-radius: ${borderRadius()}px;
-
-  max-width: inherit;
-  word-wrap: break-word;
-`;
-const ContentArea = createEditorContentStyle(css`
-  flex-grow: 1;
-  overflow-x: ${getBooleanFF('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden'};
-  line-height: 24px;
-
-  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
-  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/
-  .ProseMirror {
-    margin: ${"var(--ds-space-150, 12px)"};
-  }
-
-  .gridParent {
-    margin-left: ${CommentEditorMargin - GRID_GUTTER}px;
-    margin-right: ${CommentEditorMargin - GRID_GUTTER}px;
-    width: calc(100% + ${CommentEditorMargin - GRID_GUTTER}px);
-  }
-
-  padding: ${"var(--ds-space-250, 20px)"};
-
-  ${tableCommentEditorStyles};
-`);
+const commentEditorStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '.less-margin .ProseMirror': {
+    margin: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
+  },
+  minWidth: '272px',
+  height: 'auto',
+  backgroundColor: "var(--ds-background-input, white)",
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  boxSizing: 'border-box',
+  borderRadius: `${borderRadius()}px`,
+  maxWidth: 'inherit',
+  wordWrap: 'break-word'
+});
+const ContentArea = createEditorContentStyle(css({
+  flexGrow: 1,
+  overflowX: getBooleanFF('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden',
+  lineHeight: '24px',
+  '.ProseMirror': {
+    margin: "var(--ds-space-150, 12px)"
+  },
+  '.gridParent': {
+    marginLeft: `${CommentEditorMargin - GRID_GUTTER}px`,
+    marginRight: `${CommentEditorMargin - GRID_GUTTER}px`,
+    width: `calc(100% + ${CommentEditorMargin - GRID_GUTTER}px)`
+  },
+  padding: "var(--ds-space-250, 20px)"
+}, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-const secondaryToolbarStyle = css`
-  box-sizing: border-box;
-  justify-content: flex-end;
-  align-items: center;
-  display: flex;
-  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-025, 2px)"};
-`;
+const secondaryToolbarStyle = css({
+  boxSizing: 'border-box',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  display: 'flex',
+  padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-025, 2px)"}`
+});
+const appearance = 'comment';
 class Editor extends React.Component {
   constructor(props) {
     super(props);
@@ -138,9 +126,9 @@ class Editor extends React.Component {
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
-        css: [commentEditorStyle, css`
-              min-height: ${minHeight}px;
-            `],
+        css: [commentEditorStyle, css({
+          minHeight: `${minHeight}px`
+        })],
         className: "akEditor",
         ref: this.wrapperElementRef
       }, jsx(MainToolbar, {
@@ -178,9 +166,9 @@ class Editor extends React.Component {
       }) => {
         return jsx(ContentArea, {
           ref: ref => this.containerElement = ref,
-          css: maxHeight ? css`
-                            max-height: ${maxHeight}px;
-                          ` : null,
+          css: maxHeight ? css({
+            maxHeight: `${maxHeight}px`
+          }) : null,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
           }),
@@ -243,4 +231,159 @@ function RenderWithPluginState({
     mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
   }));
 }
-export const CommentEditorWithIntl = injectIntl(Editor);
+const EditorNext = props => {
+  const api = usePresetContext();
+  const {
+    mediaState,
+    maxContentSizeState
+  } = useSharedPluginState(api, ['media', 'maxContentSize']);
+  const {
+    editorDOMElement,
+    editorView,
+    editorActions,
+    eventDispatcher,
+    providerFactory,
+    contentComponents,
+    customContentComponents,
+    customPrimaryToolbarComponents,
+    primaryToolbarComponents,
+    customSecondaryToolbarComponents,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    maxHeight,
+    minHeight = 150,
+    onSave,
+    onCancel,
+    disabled,
+    dispatchAnalyticsEvent,
+    intl,
+    useStickyToolbar,
+    pluginHooks,
+    featureFlags,
+    innerRef
+  } = props;
+  const maxContentSizeReached = Boolean(maxContentSizeState === null || maxContentSizeState === void 0 ? void 0 : maxContentSizeState.maxContentSizeReached);
+  const showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
+  let containerElement = null;
+
+  // Wrapper container for toolbar and content area
+  const wrapperElementRef = useMemo(() => innerRef || /*#__PURE__*/React.createRef(), [innerRef]);
+  const [saveButtonDisabled, setSaveButtonDisabled] = useState(disabled);
+  useEffect(() => {
+    if (mediaState) {
+      mediaState.subscribeToUploadInProgressState(setSaveButtonDisabled);
+    }
+    return () => mediaState === null || mediaState === void 0 ? void 0 : mediaState.unsubscribeFromUploadInProgressState(setSaveButtonDisabled);
+  }, [mediaState]);
+  const handleSave = useCallback(() => {
+    if (editorView && onSave) {
+      onSave(editorView);
+    }
+  }, [editorView, onSave]);
+  const handleCancel = useCallback(() => {
+    if (editorView && onCancel) {
+      onCancel(editorView);
+    }
+  }, [editorView, onCancel]);
+  const isShortcutToFocusToolbar = useCallback(event => {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && (event.key === 'F9' || event.keyCode === 120);
+  }, []);
+  const isTwoLineToolbarEnabled = !!customPrimaryToolbarComponents && !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.twoLineEditorToolbar);
+  const handleEscape = useCallback(event => {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [editorView]);
+  return jsx(WithFlash, {
+    animate: maxContentSizeReached
+  }, jsx("div", {
+    css: [commentEditorStyle, css({
+      minHeight: `${minHeight}px`
+    })],
+    className: "akEditor",
+    ref: wrapperElementRef
+  }, jsx(MainToolbar, {
+    useStickyToolbar: useStickyToolbar,
+    twoLineEditorToolbar: isTwoLineToolbarEnabled
+  }, jsx(ToolbarArrowKeyNavigationProvider, {
+    editorView: editorView,
+    childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+    isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+    handleEscape: handleEscape,
+    editorAppearance: appearance,
+    useStickyToolbar: useStickyToolbar,
+    intl: intl
+  }, jsx(Toolbar, {
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    items: primaryToolbarComponents,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    disabled: !!disabled,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    containerElement: containerElement,
+    twoLineEditorToolbar: isTwoLineToolbarEnabled
+  }), jsx("div", {
+    css: mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
+  }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
+    editorView: editorView,
+    editorDisabled: disabled
+  }, jsx(WidthConsumer, null, ({
+    width
+  }) => {
+    return jsx(ContentArea, {
+      ref: ref => containerElement = ref,
+      css: maxHeight ? css({
+        maxHeight: `${maxHeight}px`
+      }) : null,
+      className: classnames('ak-editor-content-area', {
+        'less-margin': width < akEditorMobileBreakoutPoint
+      }),
+      featureFlags: featureFlags
+    }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
+      editorView: editorView,
+      editorActions: editorActions,
+      eventDispatcher: eventDispatcher,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      providerFactory: providerFactory,
+      appearance: appearance,
+      items: contentComponents,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      containerElement: containerElement,
+      disabled: !!disabled,
+      wrapperElement: wrapperElementRef.current,
+      pluginHooks: pluginHooks
+    }), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null);
+  }))), showSecondaryToolbar && jsx("div", {
+    css: secondaryToolbarStyle,
+    "data-testid": "ak-editor-secondary-toolbar"
+  }, jsx(ButtonGroup, null, !!onSave && jsx(Button, {
+    appearance: "primary",
+    onClick: handleSave,
+    testId: "comment-save-button",
+    isDisabled: disabled || saveButtonDisabled
+  }, intl.formatMessage(messages.saveButton)), !!onCancel && jsx(Button, {
+    appearance: "subtle",
+    onClick: handleCancel,
+    isDisabled: disabled
+  }, intl.formatMessage(messages.cancelButton))), jsx("span", {
+    style: {
+      flexGrow: 1
+    }
+  }), customSecondaryToolbarComponents));
+};
+EditorNext.displayName = 'CommentEditorAppearance';
+const CommentEditorNextWithIntl = injectIntl(EditorNext);
+const CommentEditorOldWithIntl = injectIntl(Editor);
+const ExportComp = getBooleanFF('platform.editor.media.alluploadsfinished-dispatch-update_ivtow') ? CommentEditorNextWithIntl : CommentEditorOldWithIntl;
+export const CommentEditorWithIntl = ExportComp;

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -72,6 +72,12 @@ const editorContentAreaContainerStyle = containerWidth => css({
     '.pm-table-container, .code-block, .extension-container': {
       maxWidth: `${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px`
     },
+    '.extension-container.inline': {
+      maxWidth: '100%'
+    },
+    'td .extension-container.inline': {
+      maxWidth: 'inherit'
+    },
     '.multiBodiedExtension--container': {
       maxWidth: `${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px`
     },

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "192.5.0";
+export const version = "192.7.0";