@atlaskit/editor-core 192.6.0 → 193.0.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/version-wrapper.js

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

package/dist/esm/create-editor/create-plugins-list.js

@@ -68,7 +68,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     textFormatting: _objectSpread(_objectSpread({}, props.textFormatting || {}), {}, {
       responsiveToolbarMenu: ((_props$textFormatting = props.textFormatting) === null || _props$textFormatting === void 0 ? void 0 : _props$textFormatting.responsiveToolbarMenu) != null ? props.textFormatting.responsiveToolbarMenu : props.allowUndoRedoButtons
     }),
-    annotationProviders: props.annotationProviders,
     submitEditor: props.onSave,
     quickInsert: {
       enableElementBrowser: props.elementBrowser && props.elementBrowser.showModal,

package/dist/esm/preset-universal.js

@@ -1 +1,2 @@
-export { default as useUniversalPreset } from './presets/useUniversalPreset';
+export { default as useUniversalPreset } from './presets/useUniversalPreset';
+export { default as createUniversalPreset } from './presets/universal';

package/dist/esm/presets/default.js

@@ -5,7 +5,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';
-import { annotationPlugin } from '@atlaskit/editor-plugins/annotation';
 import { basePlugin } from '@atlaskit/editor-plugins/base';
 import { betterTypeHistoryPlugin } from '@atlaskit/editor-plugins/better-type-history';
 import { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';
@@ -51,7 +50,7 @@ export function createDefaultPreset(options) {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
-  }]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([annotationPlugin, options.annotationProviders], Boolean(options.annotationProviders)).maybeAdd([selectionToolbarPlugin, {
+  }]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], function () {
     if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/esm/presets/universal.js

@@ -96,7 +96,7 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     __livePage: props.__livePage
   }], Boolean(props.allowExpand)).maybeAdd(guidelinePlugin, Boolean(!isMobile && !isComment && !isChromeless && (props.media || props.allowTables))).maybeAdd([gridPlugin, {
     shouldCalcBreakoutGridLines: isFullPage
-  }], Boolean(props.media)).maybeAdd([mediaPlugin, _objectSpread(_objectSpread({}, props.media), {}, {
+  }], Boolean(props.media)).maybeAdd([annotationPlugin, props.annotationProviders], Boolean(props.annotationProviders)).maybeAdd([mediaPlugin, _objectSpread(_objectSpread({}, props.media), {}, {
     allowLazyLoading: !isMobile,
     allowBreakoutSnapPoints: isFullPage,
     allowAdvancedToolBarOptions: typeof ((_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.allowAdvancedToolBarOptions) !== 'undefined' ? (_props$media2 = props.media) === null || _props$media2 === void 0 ? void 0 : _props$media2.allowAdvancedToolBarOptions : isFullPage || isComment,

package/dist/esm/ui/Addon/ClickAreaBlock/index.js

@@ -1,10 +1,11 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
-var clickWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n"])));
+var clickWrapper = css({
+  flexGrow: 1,
+  height: '100%'
+});
 export var ClickAreaBlock = function ClickAreaBlock(_ref) {
   var editorView = _ref.editorView,
     editorDisabled = _ref.editorDisabled,

package/dist/esm/ui/Addon/ClickAreaInline/index.js

@@ -1,10 +1,10 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { createParagraphAtEnd } from '@atlaskit/editor-common/commands';
-var clickArea = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
+var clickArea = css({
+  flexGrow: 1
+});
 export var ClickAreaInline = function ClickAreaInline(_ref) {
   var editorView = _ref.editorView,
     children = _ref.children;

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -5,12 +6,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/* 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';
@@ -34,10 +34,44 @@ import Toolbar from '../../Toolbar';
 import WithFlash from '../../WithFlash';
 import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
 var CommentEditorMargin = 14;
-var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N40, ")"), borderRadius());
-var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), getBooleanFF('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden', "var(--ds-space-150, 12px)", CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, "var(--ds-space-250, 20px)", tableCommentEditorStyles));
+var commentEditorStyle = 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(N40, ")")),
+  boxSizing: 'border-box',
+  borderRadius: "".concat(borderRadius(), "px"),
+  maxWidth: 'inherit',
+  wordWrap: 'break-word'
+});
+var 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: "".concat(CommentEditorMargin - GRID_GUTTER, "px"),
+    marginRight: "".concat(CommentEditorMargin - GRID_GUTTER, "px"),
+    width: "calc(100% + ".concat(CommentEditorMargin - GRID_GUTTER, "px)")
+  },
+  padding: "var(--ds-space-250, 20px)"
+}, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = 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) {
   _inherits(Editor, _React$Component);
   var _super = _createSuper(Editor);
@@ -104,7 +138,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
-        css: [commentEditorStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              min-height: ", "px;\n            "])), minHeight)],
+        css: [commentEditorStyle, css({
+          minHeight: "".concat(minHeight, "px")
+        })],
         className: "akEditor",
         ref: _this.wrapperElementRef
       }, jsx(MainToolbar, {
@@ -143,7 +179,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           ref: function ref(_ref3) {
             return _this.containerElement = _ref3;
           },
-          css: maxHeight ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                            max-height: ", "px;\n                          "])), maxHeight) : null,
+          css: maxHeight ? css({
+            maxHeight: "".concat(maxHeight, "px")
+          }) : null,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
           }),
@@ -209,4 +247,165 @@ function RenderWithPluginState(_ref4) {
     mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
   }));
 }
-export var CommentEditorWithIntl = injectIntl(Editor);
+var EditorNext = function EditorNext(props) {
+  var api = usePresetContext();
+  var _useSharedPluginState2 = 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 = useMemo(function () {
+    return innerRef || /*#__PURE__*/React.createRef();
+  }, [innerRef]);
+  var _useState = useState(disabled),
+    _useState2 = _slicedToArray(_useState, 2),
+    saveButtonDisabled = _useState2[0],
+    setSaveButtonDisabled = _useState2[1];
+  useEffect(function () {
+    if (mediaState) {
+      mediaState.subscribeToUploadInProgressState(setSaveButtonDisabled);
+    }
+    return function () {
+      return mediaState === null || mediaState === void 0 ? void 0 : mediaState.unsubscribeFromUploadInProgressState(setSaveButtonDisabled);
+    };
+  }, [mediaState]);
+  var handleSave = useCallback(function () {
+    if (editorView && onSave) {
+      onSave(editorView);
+    }
+  }, [editorView, onSave]);
+  var handleCancel = useCallback(function () {
+    if (editorView && onCancel) {
+      onCancel(editorView);
+    }
+  }, [editorView, onCancel]);
+  var isShortcutToFocusToolbar = 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 = useCallback(function (event) {
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 || editorView.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }, [editorView]);
+  return jsx(WithFlash, {
+    animate: maxContentSizeReached
+  }, jsx("div", {
+    css: [commentEditorStyle, css({
+      minHeight: "".concat(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, function (_ref5) {
+    var width = _ref5.width;
+    return jsx(ContentArea, {
+      ref: function ref(_ref6) {
+        return containerElement = _ref6;
+      },
+      css: maxHeight ? css({
+        maxHeight: "".concat(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';
+var CommentEditorNextWithIntl = injectIntl(EditorNext);
+var CommentEditorOldWithIntl = injectIntl(Editor);
+var ExportComp = getBooleanFF('platform.editor.media.alluploadsfinished-dispatch-update_ivtow') ? CommentEditorNextWithIntl : CommentEditorOldWithIntl;
+export var CommentEditorWithIntl = ExportComp;

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "192.6.0";
+export var version = "193.0.0";