@atlaskit/editor-core 195.8.2 → 195.9.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-core
 
+## 195.9.1
+
+### Patch Changes
+
+- [#134167](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134167)
+  [`1bad7a54ecf5b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1bad7a54ecf5b) -
+  Refactoring editor internals to allow for specific component based appearances.
+
+## 195.9.0
+
+### Minor Changes
+
+- [#134135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134135)
+  [`aff992988cf17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aff992988cf17) -
+  Deprecated hideAvatarGroup prop
+
+### Patch Changes
+
+- [#134213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134213)
+  [`93bd7032842ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93bd7032842ec) -
+  [ux] [ED-24636] Bump ADF Schema package
+
 ## 195.8.2
 
 ### Patch Changes

package/dist/cjs/composable-editor/composable-editor.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComposableEditor = ComposableEditor;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _createEditor = require("../create-editor");
+var _coreEditor = require("./core-editor");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ComposableEditor(props) {
+  var AppearanceComponent = (0, _react.useMemo)(function () {
+    return (0, _createEditor.getUiComponent)(props.appearance);
+  }, [props.appearance]);
+  return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {
+    AppearanceComponent: AppearanceComponent
+  }));
+}

package/dist/cjs/composable-editor/{editor.js → core-editor.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComposableEditor = ComposableEditor;
+exports.CoreEditor = CoreEditor;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
@@ -115,7 +115,8 @@ function Editor(passedProps) {
     editorActions: editorActions,
     onEditorCreated: onEditorCreated,
     onEditorDestroyed: onEditorDestroyed,
-    providerFactory: providerFactory
+    providerFactory: providerFactory,
+    AppearanceComponent: props.AppearanceComponent
   });
 }
 var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
@@ -125,7 +126,7 @@ var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags)
   }
   return ffRef.current;
 };
-function ComposableEditor(props) {
+function CoreEditor(props) {
   var editorSessionId = (0, _react.useRef)((0, _v.default)());
   var data = (0, _react.useMemo)(function () {
     return {
@@ -145,7 +146,7 @@ function ComposableEditor(props) {
     featureFlags: memodEditorFeatureFlags
   })));
 }
-ComposableEditor.propTypes = {
+CoreEditor.propTypes = {
   minHeight: function minHeight(_ref) {
     var appearance = _ref.appearance,
       _minHeight = _ref.minHeight;
@@ -155,4 +156,4 @@ ComposableEditor.propTypes = {
     return null;
   }
 };
-var _default = exports.default = ComposableEditor;
+var _default = exports.default = CoreEditor;

package/dist/cjs/composable-editor/editor-internal.js

@@ -13,7 +13,7 @@ var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _portal = require("@atlaskit/editor-common/portal");
 var _ui = require("@atlaskit/editor-common/ui");
-var _createEditor = require("../create-editor");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ErrorBoundary = _interopRequireDefault(require("../create-editor/ErrorBoundary"));
 var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
 var _ReactEditorView = _interopRequireDefault(require("../create-editor/ReactEditorView"));
@@ -42,8 +42,8 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     providerFactory = _ref.providerFactory,
     onEditorCreated = _ref.onEditorCreated,
     onEditorDestroyed = _ref.onEditorDestroyed,
-    preset = _ref.preset;
-  var Component = (0, _createEditor.getUiComponent)(props.appearance);
+    preset = _ref.preset,
+    AppearanceComponent = _ref.AppearanceComponent;
   var setEditorApi = (0, _react.useCallback)(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
@@ -109,7 +109,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         editorAPI = _ref2.editorAPI;
       return (0, _react2.jsx)(_ui.BaseTheme, {
         baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(props.appearance)
-      }, (0, _react2.jsx)(Component, {
+      }, (0, _react2.jsx)(AppearanceComponent, {
         innerRef: editorRef,
         editorAPI: editorAPI,
         appearance: props.appearance,
@@ -141,7 +141,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         useStickyToolbar: props.useStickyToolbar,
         featureFlags: featureFlags,
         pluginHooks: config.pluginHooks,
-        hideAvatarGroup: props.hideAvatarGroup
+        hideAvatarGroup: (0, _platformFeatureFlags.fg)('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
       }));
     }
   }), (0, _react2.jsx)(PortalRenderer, null))))))));

package/dist/cjs/composable-editor/hooks/useMemoEditorProps.js

@@ -108,7 +108,8 @@ var useMemoEditorProps = exports.useMemoEditorProps = function useMemoEditorProp
       codeBlock: passedProps.codeBlock,
       textFormatting: passedProps.textFormatting,
       dangerouslyAppendPlugins: passedProps.dangerouslyAppendPlugins,
-      __livePage: passedProps.__livePage
+      __livePage: passedProps.__livePage,
+      AppearanceComponent: passedProps.AppearanceComponent
     };
     var defaultProps = {
       appearance: 'comment',
@@ -117,7 +118,7 @@ var useMemoEditorProps = exports.useMemoEditorProps = function useMemoEditorProp
     };
     var nextProps = _objectSpread(_objectSpread({}, defaultProps), allProps);
     return nextProps;
-  }, [passedProps.preset, passedProps.appearance, passedProps.contentComponents, passedProps.primaryToolbarIconBefore, passedProps.secondaryToolbarComponents, passedProps.persistScrollGutter, passedProps.quickInsert, passedProps.shouldFocus, passedProps.disabled, passedProps.contextPanel, passedProps.errorReporterHandler, passedProps.contentTransformerProvider, passedProps.maxHeight, passedProps.minHeight, passedProps.placeholder, passedProps.placeholderBracketHint, passedProps.defaultValue, passedProps.assistiveLabel, passedProps.popupsMountPoint, passedProps.popupsBoundariesElement, passedProps.popupsScrollableElement, passedProps.editorActions, passedProps.onEditorReady, passedProps.onDestroy, passedProps.onChange, passedProps.onCancel, passedProps.inputSamplingLimit, passedProps.extensionProviders, passedProps.UNSAFE_useAnalyticsContext, passedProps.trackValidTransactions, passedProps.useStickyToolbar, passedProps.featureFlags, passedProps.onSave, passedProps.performanceTracking, passedProps.sanitizePrivateContent, passedProps.media, passedProps.collabEdit, passedProps.primaryToolbarComponents, passedProps.allowUndoRedoButtons, passedProps.linking, passedProps.hideAvatarGroup, passedProps.activityProvider, passedProps.searchProvider, passedProps.annotationProviders, passedProps.collabEditProvider, passedProps.presenceProvider, passedProps.emojiProvider, passedProps.taskDecisionProvider, passedProps.legacyImageUploadProvider, passedProps.mentionProvider, passedProps.autoformattingProvider, passedProps.macroProvider, passedProps.contextIdentifierProvider, passedProps.allowExpand, passedProps.allowNestedTasks, passedProps.allowBlockType, passedProps.allowTasksAndDecisions, passedProps.allowBreakout, passedProps.allowRule, passedProps.allowHelpDialog, passedProps.allowJiraIssue, passedProps.allowPanel, passedProps.allowExtension, passedProps.allowConfluenceInlineComment, passedProps.allowTemplatePlaceholders, passedProps.allowDate, passedProps.allowLayouts, passedProps.allowStatus, passedProps.allowTextAlignment, passedProps.allowIndentation, passedProps.showIndentationButtons, passedProps.allowNewInsertionBehaviour, passedProps.allowFindReplace, passedProps.UNSAFE_allowBorderMark, passedProps.allowBorderMark, passedProps.allowFragmentMark, passedProps.autoScrollIntoView, passedProps.elementBrowser, passedProps.maxContentSize, passedProps.saveOnEnter, passedProps.feedbackInfo, passedProps.mention, passedProps.mentionInsertDisplayName, passedProps.uploadErrorHandler, passedProps.waitForMediaUpload, passedProps.extensionHandlers, passedProps.allowTextColor, passedProps.allowTables, passedProps.insertMenuItems, passedProps.UNSAFE_cards, passedProps.smartLinks, passedProps.allowAnalyticsGASV3, passedProps.codeBlock, passedProps.textFormatting, passedProps.dangerouslyAppendPlugins, passedProps.__livePage]);
+  }, [passedProps.preset, passedProps.appearance, passedProps.contentComponents, passedProps.primaryToolbarIconBefore, passedProps.secondaryToolbarComponents, passedProps.persistScrollGutter, passedProps.quickInsert, passedProps.shouldFocus, passedProps.disabled, passedProps.contextPanel, passedProps.errorReporterHandler, passedProps.contentTransformerProvider, passedProps.maxHeight, passedProps.minHeight, passedProps.placeholder, passedProps.placeholderBracketHint, passedProps.defaultValue, passedProps.assistiveLabel, passedProps.popupsMountPoint, passedProps.popupsBoundariesElement, passedProps.popupsScrollableElement, passedProps.editorActions, passedProps.onEditorReady, passedProps.onDestroy, passedProps.onChange, passedProps.onCancel, passedProps.inputSamplingLimit, passedProps.extensionProviders, passedProps.UNSAFE_useAnalyticsContext, passedProps.trackValidTransactions, passedProps.useStickyToolbar, passedProps.featureFlags, passedProps.onSave, passedProps.performanceTracking, passedProps.sanitizePrivateContent, passedProps.media, passedProps.collabEdit, passedProps.primaryToolbarComponents, passedProps.allowUndoRedoButtons, passedProps.linking, passedProps.hideAvatarGroup, passedProps.activityProvider, passedProps.searchProvider, passedProps.annotationProviders, passedProps.collabEditProvider, passedProps.presenceProvider, passedProps.emojiProvider, passedProps.taskDecisionProvider, passedProps.legacyImageUploadProvider, passedProps.mentionProvider, passedProps.autoformattingProvider, passedProps.macroProvider, passedProps.contextIdentifierProvider, passedProps.allowExpand, passedProps.allowNestedTasks, passedProps.allowBlockType, passedProps.allowTasksAndDecisions, passedProps.allowBreakout, passedProps.allowRule, passedProps.allowHelpDialog, passedProps.allowJiraIssue, passedProps.allowPanel, passedProps.allowExtension, passedProps.allowConfluenceInlineComment, passedProps.allowTemplatePlaceholders, passedProps.allowDate, passedProps.allowLayouts, passedProps.allowStatus, passedProps.allowTextAlignment, passedProps.allowIndentation, passedProps.showIndentationButtons, passedProps.allowNewInsertionBehaviour, passedProps.allowFindReplace, passedProps.UNSAFE_allowBorderMark, passedProps.allowBorderMark, passedProps.allowFragmentMark, passedProps.autoScrollIntoView, passedProps.elementBrowser, passedProps.maxContentSize, passedProps.saveOnEnter, passedProps.feedbackInfo, passedProps.mention, passedProps.mentionInsertDisplayName, passedProps.uploadErrorHandler, passedProps.waitForMediaUpload, passedProps.extensionHandlers, passedProps.allowTextColor, passedProps.allowTables, passedProps.insertMenuItems, passedProps.UNSAFE_cards, passedProps.smartLinks, passedProps.allowAnalyticsGASV3, passedProps.codeBlock, passedProps.textFormatting, passedProps.dangerouslyAppendPlugins, passedProps.__livePage, passedProps.AppearanceComponent]);
   return memodProps;
 };
 var _default = exports.default = useMemoEditorProps;

package/dist/cjs/composable-editor.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ComposableEditor", {
   enumerable: true,
   get: function get() {
-    return _editor.ComposableEditor;
+    return _composableEditor.ComposableEditor;
   }
 });
-var _editor = require("./composable-editor/editor");
+var _composableEditor = require("./composable-editor/composable-editor");

package/dist/cjs/editor-appearances/FullPageEditor.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPageEditor = FullPageEditor;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _coreEditor = require("../composable-editor/core-editor");
+var _FullPage = _interopRequireDefault(require("../ui/Appearance/FullPage"));
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "full-page".
+ *
+ * This has a performance benefit as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props FullPageEditorProps
+ * @returns Editor component
+ */
+function FullPageEditor(props) {
+  return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {
+    appearance: "full-page",
+    AppearanceComponent: _FullPage.default
+  }));
+}

package/dist/cjs/editor-appearances/FullWidthEditor.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullWidthEditor = FullWidthEditor;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _coreEditor = require("../composable-editor/core-editor");
+var _FullPage = _interopRequireDefault(require("../ui/Appearance/FullPage"));
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "full-width".
+ *
+ * This has a performance benefit as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props FullWidthEditorProps
+ * @returns Editor component
+ */
+function FullWidthEditor(props) {
+  return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {
+    appearance: "full-width",
+    AppearanceComponent: _FullPage.default
+  }));
+}

package/dist/cjs/presets/universal.js

@@ -225,9 +225,15 @@ function createUniversalPresetInternal(_ref) {
     // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
     collabEdit: props.collabEdit,
     takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
-    showAvatarGroup: !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
+    showAvatarGroup:
+    // Cleanup: `platform_editor_remove_hide_avatar_group_prop`
+    // Remove `!props.hideAvatarGroup`
+    !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
   }]).maybeAdd([_findReplace.findReplacePlugin, {
-    takeFullWidth: !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+    takeFullWidth:
+    // Cleanup: `platform_editor_remove_hide_avatar_group_prop`
+    // Remove `!props.hideAvatarGroup`
+    !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
     twoLineEditorToolbar: !!props.primaryToolbarComponents && !!featureFlags.twoLineEditorToolbar
   }], Boolean(props.allowFindReplace)).maybeAdd(_border.borderPlugin, Boolean(props.allowBorderMark || props.UNSAFE_allowBorderMark)).maybeAdd(_fragment.fragmentPlugin, Boolean(props.allowFragmentMark)).add(_pasteOptionsToolbar.pasteOptionsToolbarPlugin).add([_codeBidiWarning.codeBidiWarningPlugin, {
     appearance: appearance

package/dist/cjs/types/with-appearance-component.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -14,7 +14,6 @@ var _react = require("@emotion/react");
 
 var beforePrimaryToolbarPluginWrapperStyles = (0, _react.css)({
   display: 'flex',
-  marginRight: "var(--ds-space-100, 8px)",
   flexGrow: 1,
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -106,7 +106,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags,
-    hideAvatarGroup: props.hideAvatarGroup
+    hideAvatarGroup: (0, _platformFeatureFlags.fg)('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
   }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,

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

@@ -64,16 +64,15 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     css: _MainToolbar.customToolbarWrapperStyle
   }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? (0, _react2.jsx)(_BeforeWrapper.BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, props.hideAvatarGroup || (props === null || props === void 0 || (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
+  }) : null, !(0, _platformFeatureFlags.fg)('platform_editor_remove_hide_avatar_group_prop') ? props.hideAvatarGroup || (props === null || props === void 0 || (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
   // When Edit in Context is enabled customPrimaryToolbarComponents is undefined
   // For more details please check
   // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
   editorAPI === null || editorAPI === void 0 || (_editorAPI$avatarGrou = editorAPI.avatarGroup) === null || _editorAPI$avatarGrou === void 0 ? void 0 : _editorAPI$avatarGrou.actions.getToolbarItem({
-    editorView: props.editorView,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
-  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
+  }) : null, editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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 = "195.8.2";
+var version = exports.version = "195.9.1";

package/dist/es2019/composable-editor/composable-editor.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { getUiComponent } from '../create-editor';
+import { CoreEditor } from './core-editor';
+export function ComposableEditor(props) {
+  const AppearanceComponent = useMemo(() => getUiComponent(props.appearance), [props.appearance]);
+  return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
+    AppearanceComponent: AppearanceComponent
+  }));
+}

package/dist/es2019/composable-editor/{editor.js → core-editor.js}

@@ -109,7 +109,8 @@ function Editor(passedProps) {
     editorActions: editorActions,
     onEditorCreated: onEditorCreated,
     onEditorDestroyed: onEditorDestroyed,
-    providerFactory: providerFactory
+    providerFactory: providerFactory,
+    AppearanceComponent: props.AppearanceComponent
   });
 }
 const useMemoEditorFeatureFlags = featureFlags => {
@@ -119,7 +120,7 @@ const useMemoEditorFeatureFlags = featureFlags => {
   }
   return ffRef.current;
 };
-export function ComposableEditor(props) {
+export function CoreEditor(props) {
   const editorSessionId = useRef(uuid());
   const data = useMemo(() => {
     return {
@@ -139,7 +140,7 @@ export function ComposableEditor(props) {
     featureFlags: memodEditorFeatureFlags
   })));
 }
-ComposableEditor.propTypes = {
+CoreEditor.propTypes = {
   minHeight: ({
     appearance,
     minHeight
@@ -150,4 +151,4 @@ ComposableEditor.propTypes = {
     return null;
   }
 };
-export default ComposableEditor;
+export default CoreEditor;

package/dist/es2019/composable-editor/editor-internal.js

@@ -10,7 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
 import { BaseTheme, IntlProviderIfMissingWrapper, WidthProvider } from '@atlaskit/editor-common/ui';
-import { getUiComponent } from '../create-editor';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import ReactEditorView from '../create-editor/ReactEditorView';
@@ -33,10 +33,10 @@ export const EditorInternal = /*#__PURE__*/memo(({
   providerFactory,
   onEditorCreated,
   onEditorDestroyed,
-  preset
+  preset,
+  AppearanceComponent
 }) => {
   var _props$performanceTra, _props$performanceTra2, _props$performanceTra3, _props$performanceTra4;
-  const Component = getUiComponent(props.appearance);
   const setEditorApi = useCallback(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   api => {
@@ -101,7 +101,7 @@ export const EditorInternal = /*#__PURE__*/memo(({
       var _props$featureFlags, _props$featureFlags2;
       return jsx(BaseTheme, {
         baseFontSize: getBaseFontSize(props.appearance)
-      }, jsx(Component, {
+      }, jsx(AppearanceComponent, {
         innerRef: editorRef,
         editorAPI: editorAPI,
         appearance: props.appearance,
@@ -133,7 +133,7 @@ export const EditorInternal = /*#__PURE__*/memo(({
         useStickyToolbar: props.useStickyToolbar,
         featureFlags: featureFlags,
         pluginHooks: config.pluginHooks,
-        hideAvatarGroup: props.hideAvatarGroup
+        hideAvatarGroup: fg('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
       }));
     }
   }), jsx(PortalRenderer, null))))))));

package/dist/es2019/composable-editor/hooks/useMemoEditorProps.js

@@ -98,7 +98,8 @@ export const useMemoEditorProps = passedProps => {
       codeBlock: passedProps.codeBlock,
       textFormatting: passedProps.textFormatting,
       dangerouslyAppendPlugins: passedProps.dangerouslyAppendPlugins,
-      __livePage: passedProps.__livePage
+      __livePage: passedProps.__livePage,
+      AppearanceComponent: passedProps.AppearanceComponent
     };
     const defaultProps = {
       appearance: 'comment',
@@ -110,7 +111,7 @@ export const useMemoEditorProps = passedProps => {
       ...allProps
     };
     return nextProps;
-  }, [passedProps.preset, passedProps.appearance, passedProps.contentComponents, passedProps.primaryToolbarIconBefore, passedProps.secondaryToolbarComponents, passedProps.persistScrollGutter, passedProps.quickInsert, passedProps.shouldFocus, passedProps.disabled, passedProps.contextPanel, passedProps.errorReporterHandler, passedProps.contentTransformerProvider, passedProps.maxHeight, passedProps.minHeight, passedProps.placeholder, passedProps.placeholderBracketHint, passedProps.defaultValue, passedProps.assistiveLabel, passedProps.popupsMountPoint, passedProps.popupsBoundariesElement, passedProps.popupsScrollableElement, passedProps.editorActions, passedProps.onEditorReady, passedProps.onDestroy, passedProps.onChange, passedProps.onCancel, passedProps.inputSamplingLimit, passedProps.extensionProviders, passedProps.UNSAFE_useAnalyticsContext, passedProps.trackValidTransactions, passedProps.useStickyToolbar, passedProps.featureFlags, passedProps.onSave, passedProps.performanceTracking, passedProps.sanitizePrivateContent, passedProps.media, passedProps.collabEdit, passedProps.primaryToolbarComponents, passedProps.allowUndoRedoButtons, passedProps.linking, passedProps.hideAvatarGroup, passedProps.activityProvider, passedProps.searchProvider, passedProps.annotationProviders, passedProps.collabEditProvider, passedProps.presenceProvider, passedProps.emojiProvider, passedProps.taskDecisionProvider, passedProps.legacyImageUploadProvider, passedProps.mentionProvider, passedProps.autoformattingProvider, passedProps.macroProvider, passedProps.contextIdentifierProvider, passedProps.allowExpand, passedProps.allowNestedTasks, passedProps.allowBlockType, passedProps.allowTasksAndDecisions, passedProps.allowBreakout, passedProps.allowRule, passedProps.allowHelpDialog, passedProps.allowJiraIssue, passedProps.allowPanel, passedProps.allowExtension, passedProps.allowConfluenceInlineComment, passedProps.allowTemplatePlaceholders, passedProps.allowDate, passedProps.allowLayouts, passedProps.allowStatus, passedProps.allowTextAlignment, passedProps.allowIndentation, passedProps.showIndentationButtons, passedProps.allowNewInsertionBehaviour, passedProps.allowFindReplace, passedProps.UNSAFE_allowBorderMark, passedProps.allowBorderMark, passedProps.allowFragmentMark, passedProps.autoScrollIntoView, passedProps.elementBrowser, passedProps.maxContentSize, passedProps.saveOnEnter, passedProps.feedbackInfo, passedProps.mention, passedProps.mentionInsertDisplayName, passedProps.uploadErrorHandler, passedProps.waitForMediaUpload, passedProps.extensionHandlers, passedProps.allowTextColor, passedProps.allowTables, passedProps.insertMenuItems, passedProps.UNSAFE_cards, passedProps.smartLinks, passedProps.allowAnalyticsGASV3, passedProps.codeBlock, passedProps.textFormatting, passedProps.dangerouslyAppendPlugins, passedProps.__livePage]);
+  }, [passedProps.preset, passedProps.appearance, passedProps.contentComponents, passedProps.primaryToolbarIconBefore, passedProps.secondaryToolbarComponents, passedProps.persistScrollGutter, passedProps.quickInsert, passedProps.shouldFocus, passedProps.disabled, passedProps.contextPanel, passedProps.errorReporterHandler, passedProps.contentTransformerProvider, passedProps.maxHeight, passedProps.minHeight, passedProps.placeholder, passedProps.placeholderBracketHint, passedProps.defaultValue, passedProps.assistiveLabel, passedProps.popupsMountPoint, passedProps.popupsBoundariesElement, passedProps.popupsScrollableElement, passedProps.editorActions, passedProps.onEditorReady, passedProps.onDestroy, passedProps.onChange, passedProps.onCancel, passedProps.inputSamplingLimit, passedProps.extensionProviders, passedProps.UNSAFE_useAnalyticsContext, passedProps.trackValidTransactions, passedProps.useStickyToolbar, passedProps.featureFlags, passedProps.onSave, passedProps.performanceTracking, passedProps.sanitizePrivateContent, passedProps.media, passedProps.collabEdit, passedProps.primaryToolbarComponents, passedProps.allowUndoRedoButtons, passedProps.linking, passedProps.hideAvatarGroup, passedProps.activityProvider, passedProps.searchProvider, passedProps.annotationProviders, passedProps.collabEditProvider, passedProps.presenceProvider, passedProps.emojiProvider, passedProps.taskDecisionProvider, passedProps.legacyImageUploadProvider, passedProps.mentionProvider, passedProps.autoformattingProvider, passedProps.macroProvider, passedProps.contextIdentifierProvider, passedProps.allowExpand, passedProps.allowNestedTasks, passedProps.allowBlockType, passedProps.allowTasksAndDecisions, passedProps.allowBreakout, passedProps.allowRule, passedProps.allowHelpDialog, passedProps.allowJiraIssue, passedProps.allowPanel, passedProps.allowExtension, passedProps.allowConfluenceInlineComment, passedProps.allowTemplatePlaceholders, passedProps.allowDate, passedProps.allowLayouts, passedProps.allowStatus, passedProps.allowTextAlignment, passedProps.allowIndentation, passedProps.showIndentationButtons, passedProps.allowNewInsertionBehaviour, passedProps.allowFindReplace, passedProps.UNSAFE_allowBorderMark, passedProps.allowBorderMark, passedProps.allowFragmentMark, passedProps.autoScrollIntoView, passedProps.elementBrowser, passedProps.maxContentSize, passedProps.saveOnEnter, passedProps.feedbackInfo, passedProps.mention, passedProps.mentionInsertDisplayName, passedProps.uploadErrorHandler, passedProps.waitForMediaUpload, passedProps.extensionHandlers, passedProps.allowTextColor, passedProps.allowTables, passedProps.insertMenuItems, passedProps.UNSAFE_cards, passedProps.smartLinks, passedProps.allowAnalyticsGASV3, passedProps.codeBlock, passedProps.textFormatting, passedProps.dangerouslyAppendPlugins, passedProps.__livePage, passedProps.AppearanceComponent]);
   return memodProps;
 };
 export default useMemoEditorProps;

package/dist/es2019/composable-editor.js

@@ -1 +1 @@
-export { ComposableEditor } from './composable-editor/editor';
+export { ComposableEditor } from './composable-editor/composable-editor';

package/dist/es2019/editor-appearances/FullPageEditor.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CoreEditor } from '../composable-editor/core-editor';
+import FullPage from '../ui/Appearance/FullPage';
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "full-page".
+ *
+ * This has a performance benefit as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props FullPageEditorProps
+ * @returns Editor component
+ */
+export function FullPageEditor(props) {
+  return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
+    appearance: "full-page",
+    AppearanceComponent: FullPage
+  }));
+}

package/dist/es2019/editor-appearances/FullWidthEditor.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CoreEditor } from '../composable-editor/core-editor';
+import FullPage from '../ui/Appearance/FullPage';
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "full-width".
+ *
+ * This has a performance benefit as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props FullWidthEditorProps
+ * @returns Editor component
+ */
+export function FullWidthEditor(props) {
+  return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
+    appearance: "full-width",
+    AppearanceComponent: FullPage
+  }));
+}

package/dist/es2019/presets/universal.js

@@ -224,9 +224,15 @@ export default function createUniversalPresetInternal({
     // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
     collabEdit: props.collabEdit,
     takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
-    showAvatarGroup: !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
+    showAvatarGroup:
+    // Cleanup: `platform_editor_remove_hide_avatar_group_prop`
+    // Remove `!props.hideAvatarGroup`
+    !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
   }]).maybeAdd([findReplacePlugin, {
-    takeFullWidth: !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+    takeFullWidth:
+    // Cleanup: `platform_editor_remove_hide_avatar_group_prop`
+    // Remove `!props.hideAvatarGroup`
+    !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
     twoLineEditorToolbar: !!props.primaryToolbarComponents && !!featureFlags.twoLineEditorToolbar
   }], Boolean(props.allowFindReplace)).maybeAdd(borderPlugin, Boolean(props.allowBorderMark || props.UNSAFE_allowBorderMark)).maybeAdd(fragmentPlugin, Boolean(props.allowFragmentMark)).add(pasteOptionsToolbarPlugin).add([codeBidiWarningPlugin, {
     appearance

package/dist/es2019/types/with-appearance-component.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,7 +7,6 @@
 import { css, jsx } from '@emotion/react';
 const beforePrimaryToolbarPluginWrapperStyles = css({
   display: 'flex',
-  marginRight: "var(--ds-space-100, 8px)",
   flexGrow: 1,
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -88,7 +88,7 @@ export const FullPageEditor = props => {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags,
-    hideAvatarGroup: props.hideAvatarGroup
+    hideAvatarGroup: fg('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
   }), jsx(FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,

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

@@ -52,16 +52,15 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     css: customToolbarWrapperStyle
   }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, props.hideAvatarGroup || (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
+  }) : null, !fg('platform_editor_remove_hide_avatar_group_prop') ? props.hideAvatarGroup || (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
   // When Edit in Context is enabled customPrimaryToolbarComponents is undefined
   // For more details please check
   // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
   editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$avatarGrou = editorAPI.avatarGroup) === null || _editorAPI$avatarGrou === void 0 ? void 0 : _editorAPI$avatarGrou.actions.getToolbarItem({
-    editorView: props.editorView,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
-  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
+  }) : null, editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

package/dist/es2019/version-wrapper.js

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

package/dist/esm/composable-editor/composable-editor.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { getUiComponent } from '../create-editor';
+import { CoreEditor } from './core-editor';
+export function ComposableEditor(props) {
+  var AppearanceComponent = useMemo(function () {
+    return getUiComponent(props.appearance);
+  }, [props.appearance]);
+  return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
+    AppearanceComponent: AppearanceComponent
+  }));
+}

package/dist/esm/composable-editor/{editor.js → core-editor.js}

@@ -107,7 +107,8 @@ function Editor(passedProps) {
     editorActions: editorActions,
     onEditorCreated: onEditorCreated,
     onEditorDestroyed: onEditorDestroyed,
-    providerFactory: providerFactory
+    providerFactory: providerFactory,
+    AppearanceComponent: props.AppearanceComponent
   });
 }
 var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags) {
@@ -117,7 +118,7 @@ var useMemoEditorFeatureFlags = function useMemoEditorFeatureFlags(featureFlags)
   }
   return ffRef.current;
 };
-export function ComposableEditor(props) {
+export function CoreEditor(props) {
   var editorSessionId = useRef(uuid());
   var data = useMemo(function () {
     return {
@@ -137,7 +138,7 @@ export function ComposableEditor(props) {
     featureFlags: memodEditorFeatureFlags
   })));
 }
-ComposableEditor.propTypes = {
+CoreEditor.propTypes = {
   minHeight: function minHeight(_ref) {
     var appearance = _ref.appearance,
       _minHeight = _ref.minHeight;
@@ -147,4 +148,4 @@ ComposableEditor.propTypes = {
     return null;
   }
 };
-export default ComposableEditor;
+export default CoreEditor;

package/dist/esm/composable-editor/editor-internal.js

@@ -14,7 +14,7 @@ import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
 import { BaseTheme, IntlProviderIfMissingWrapper, WidthProvider } from '@atlaskit/editor-common/ui';
-import { getUiComponent } from '../create-editor';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import ReactEditorView from '../create-editor/ReactEditorView';
@@ -38,8 +38,8 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     providerFactory = _ref.providerFactory,
     onEditorCreated = _ref.onEditorCreated,
     onEditorDestroyed = _ref.onEditorDestroyed,
-    preset = _ref.preset;
-  var Component = getUiComponent(props.appearance);
+    preset = _ref.preset,
+    AppearanceComponent = _ref.AppearanceComponent;
   var setEditorApi = useCallback(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
@@ -105,7 +105,7 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         editorAPI = _ref2.editorAPI;
       return jsx(BaseTheme, {
         baseFontSize: getBaseFontSize(props.appearance)
-      }, jsx(Component, {
+      }, jsx(AppearanceComponent, {
         innerRef: editorRef,
         editorAPI: editorAPI,
         appearance: props.appearance,
@@ -137,7 +137,7 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         useStickyToolbar: props.useStickyToolbar,
         featureFlags: featureFlags,
         pluginHooks: config.pluginHooks,
-        hideAvatarGroup: props.hideAvatarGroup
+        hideAvatarGroup: fg('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
       }));
     }
   }), jsx(PortalRenderer, null))))))));