@atlaskit/editor-core 189.5.11 → 189.6.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 189.6.1
+
+### Patch Changes
+
+- [#60029](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60029) [`b9826ea49c47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9826ea49c47) - Update dependencies that were impacted by HOT-106483 to latest.
+- [#60013](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60013) [`7d36e05bf828`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d36e05bf828) - [No Issue] Cleaning up feature flag to reduce the amount of Re-renderings Editor suffers
+
+## 189.6.0
+
+### Minor Changes
+
+- [#59378](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59378) [`cd8ba004f7ed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd8ba004f7ed) - Migrate config-panel tests to RTL, and add testids where necessary
+
 ## 189.5.11
 
 ### Patch Changes

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ComposableEditor = ComposableEditor;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _v = _interopRequireDefault(require("uuid/v4"));
@@ -14,7 +13,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _ufo = require("@atlaskit/editor-common/ufo");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorPluginBase = require("@atlaskit/editor-plugin-base");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = _interopRequireDefault(require("../actions"));
 var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
 var _versionWrapper = require("../version-wrapper");
@@ -27,197 +25,26 @@ var _sendDurationAnalytics = _interopRequireDefault(require("./utils/sendDuratio
 var _trackEditorActions = _interopRequireDefault(require("./utils/trackEditorActions"));
 var _useMeasureEditorMountTime = _interopRequireDefault(require("./hooks/useMeasureEditorMountTime"));
 var _useProviderFactory = _interopRequireDefault(require("./hooks/useProviderFactory"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var _useMemoEditorProps = _interopRequireDefault(require("./hooks/useMemoEditorProps"));
+/** @jsx jsx */
+
 /**
  * Editor wrapper that deals with the lifecycle logic of the editor
  */
 function Editor(passedProps) {
-  var _editorContext$editor;
-  var defaultProps = {
-    appearance: 'comment',
-    disabled: false,
-    quickInsert: true
-  };
-  var props = _objectSpread(_objectSpread({}, defaultProps), passedProps);
-  var editorContext = (0, _EditorContext.useEditorContext)();
-  var editorActions = (0, _react.useRef)((_editorContext$editor = editorContext === null || editorContext === void 0 ? void 0 : editorContext.editorActions) !== null && _editorContext$editor !== void 0 ? _editorContext$editor : new _actions.default());
-  var startTime = (0, _react.useRef)(performance.now());
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var experienceStore = (0, _react.useRef)();
-  var handleAnalyticsEvent = function handleAnalyticsEvent(data) {
-    return (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)(data);
-  };
-  (0, _hooks.useConstructor)(function () {
-    (0, _trackEditorActions.default)(editorActions.current, props.performanceTracking, function (value) {
-      return handleAnalyticsEvent(value);
-    });
-  });
-  var getExperienceStore = function getExperienceStore() {
-    return experienceStore.current;
-  };
-  var onEditorCreated = function onEditorCreated(instance) {
-    var _props$featureFlags;
-    editorActions.current._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, function () {
-      return (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props);
-    });
-    if ((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.ufo) {
-      var _experienceStore$curr;
-      experienceStore.current = _ufo.ExperienceStore.getInstance(instance.view);
-      (_experienceStore$curr = experienceStore.current) === null || _experienceStore$curr === void 0 || _experienceStore$curr.start(_ufo.EditorExperience.loadEditor, startTime.current);
-    }
-    if (props.onEditorReady) {
-      var _props$performanceTra, _props$featureFlags2;
-      var measureEditorReady = (props === null || props === void 0 || (_props$performanceTra = props.performanceTracking) === null || _props$performanceTra === void 0 || (_props$performanceTra = _props$performanceTra.onEditorReadyCallbackTracking) === null || _props$performanceTra === void 0 ? void 0 : _props$performanceTra.enabled) || ((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.ufo);
-      measureEditorReady && (0, _utils.startMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK);
-      props.onEditorReady(editorActions.current);
-      measureEditorReady && (0, _utils.stopMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK, (0, _sendDurationAnalytics.default)(_analytics.ACTION.ON_EDITOR_READY_CALLBACK, props, getExperienceStore, createAnalyticsEvent));
-    }
-  };
-  var onEditorDestroyed = function onEditorDestroyed(_instance) {
-    var _props$onDestroy;
-    editorActions.current._privateUnregisterEditor();
-    (_props$onDestroy = props.onDestroy) === null || _props$onDestroy === void 0 || _props$onDestroy.call(props);
-  };
-  (0, _useMeasureEditorMountTime.default)(props, getExperienceStore, createAnalyticsEvent);
-  var providerFactory = (0, _useProviderFactory.default)(props, editorActions.current, createAnalyticsEvent);
-  return (0, _react2.jsx)(_editorInternal.EditorInternal, {
-    props: props,
-    handleAnalyticsEvent: handleAnalyticsEvent,
-    createAnalyticsEvent: createAnalyticsEvent,
-    preset: props.preset,
-    handleSave: function handleSave(view) {
-      var _props$onSave;
-      return (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, view);
-    },
-    editorActions: editorActions.current,
-    onEditorCreated: onEditorCreated,
-    onEditorDestroyed: onEditorDestroyed,
-    providerFactory: providerFactory
-  });
-}
-/**
- * Improved memonization for  Editor wrapper that deals with the lifecycle logic of the editor
- */
-function EditorButBetter(passedProps) {
   var propsRef = (0, _react.useRef)(passedProps);
-  var props = (0, _react.useMemo)(function () {
-    // That sounds awful but this is the only way to make sure we didn't missed any EditorProps
-    var allProps = {
-      preset: passedProps.preset,
-      appearance: passedProps.appearance,
-      contentComponents: passedProps.contentComponents,
-      primaryToolbarIconBefore: passedProps.primaryToolbarIconBefore,
-      secondaryToolbarComponents: passedProps.secondaryToolbarComponents,
-      persistScrollGutter: passedProps.persistScrollGutter,
-      quickInsert: passedProps.quickInsert,
-      shouldFocus: passedProps.shouldFocus,
-      disabled: passedProps.disabled,
-      contextPanel: passedProps.contextPanel,
-      errorReporterHandler: passedProps.errorReporterHandler,
-      contentTransformerProvider: passedProps.contentTransformerProvider,
-      maxHeight: passedProps.maxHeight,
-      minHeight: passedProps.minHeight,
-      placeholder: passedProps.placeholder,
-      placeholderBracketHint: passedProps.placeholderBracketHint,
-      defaultValue: passedProps.defaultValue,
-      assistiveLabel: passedProps.assistiveLabel,
-      popupsMountPoint: passedProps.popupsMountPoint,
-      popupsBoundariesElement: passedProps.popupsBoundariesElement,
-      popupsScrollableElement: passedProps.popupsScrollableElement,
-      editorActions: passedProps.editorActions,
-      onEditorReady: passedProps.onEditorReady,
-      onDestroy: passedProps.onDestroy,
-      onChange: passedProps.onChange,
-      onCancel: passedProps.onCancel,
-      inputSamplingLimit: passedProps.inputSamplingLimit,
-      extensionProviders: passedProps.extensionProviders,
-      UNSAFE_useAnalyticsContext: passedProps.UNSAFE_useAnalyticsContext,
-      trackValidTransactions: passedProps.trackValidTransactions,
-      useStickyToolbar: passedProps.useStickyToolbar,
-      featureFlags: passedProps.featureFlags,
-      onSave: passedProps.onSave,
-      performanceTracking: passedProps.performanceTracking,
-      sanitizePrivateContent: passedProps.sanitizePrivateContent,
-      media: passedProps.media,
-      collabEdit: passedProps.collabEdit,
-      primaryToolbarComponents: passedProps.primaryToolbarComponents,
-      allowUndoRedoButtons: passedProps.allowUndoRedoButtons,
-      linking: passedProps.linking,
-      hideAvatarGroup: passedProps.hideAvatarGroup,
-      activityProvider: passedProps.activityProvider,
-      searchProvider: passedProps.searchProvider,
-      annotationProviders: passedProps.annotationProviders,
-      collabEditProvider: passedProps.collabEditProvider,
-      presenceProvider: passedProps.presenceProvider,
-      emojiProvider: passedProps.emojiProvider,
-      taskDecisionProvider: passedProps.taskDecisionProvider,
-      legacyImageUploadProvider: passedProps.legacyImageUploadProvider,
-      mentionProvider: passedProps.mentionProvider,
-      autoformattingProvider: passedProps.autoformattingProvider,
-      macroProvider: passedProps.macroProvider,
-      contextIdentifierProvider: passedProps.contextIdentifierProvider,
-      allowExpand: passedProps.allowExpand,
-      allowNestedTasks: passedProps.allowNestedTasks,
-      allowBlockType: passedProps.allowBlockType,
-      allowTasksAndDecisions: passedProps.allowTasksAndDecisions,
-      allowBreakout: passedProps.allowBreakout,
-      allowRule: passedProps.allowRule,
-      allowHelpDialog: passedProps.allowHelpDialog,
-      allowJiraIssue: passedProps.allowJiraIssue,
-      allowPanel: passedProps.allowPanel,
-      allowExtension: passedProps.allowExtension,
-      allowConfluenceInlineComment: passedProps.allowConfluenceInlineComment,
-      allowTemplatePlaceholders: passedProps.allowTemplatePlaceholders,
-      allowDate: passedProps.allowDate,
-      allowLayouts: passedProps.allowLayouts,
-      allowStatus: passedProps.allowStatus,
-      allowTextAlignment: passedProps.allowTextAlignment,
-      allowIndentation: passedProps.allowIndentation,
-      showIndentationButtons: passedProps.showIndentationButtons,
-      allowNewInsertionBehaviour: passedProps.allowNewInsertionBehaviour,
-      allowFindReplace: passedProps.allowFindReplace,
-      UNSAFE_allowBorderMark: passedProps.UNSAFE_allowBorderMark,
-      allowBorderMark: passedProps.allowBorderMark,
-      allowFragmentMark: passedProps.allowFragmentMark,
-      autoScrollIntoView: passedProps.autoScrollIntoView,
-      elementBrowser: passedProps.elementBrowser,
-      maxContentSize: passedProps.maxContentSize,
-      saveOnEnter: passedProps.saveOnEnter,
-      feedbackInfo: passedProps.feedbackInfo,
-      mention: passedProps.mention,
-      mentionInsertDisplayName: passedProps.mentionInsertDisplayName,
-      uploadErrorHandler: passedProps.uploadErrorHandler,
-      waitForMediaUpload: passedProps.waitForMediaUpload,
-      extensionHandlers: passedProps.extensionHandlers,
-      allowTextColor: passedProps.allowTextColor,
-      allowTables: passedProps.allowTables,
-      insertMenuItems: passedProps.insertMenuItems,
-      UNSAFE_cards: passedProps.UNSAFE_cards,
-      smartLinks: passedProps.smartLinks,
-      allowAnalyticsGASV3: passedProps.allowAnalyticsGASV3,
-      codeBlock: passedProps.codeBlock,
-      textFormatting: passedProps.textFormatting,
-      dangerouslyAppendPlugins: passedProps.dangerouslyAppendPlugins
-    };
-    var defaultProps = {
-      appearance: 'comment',
-      disabled: false,
-      quickInsert: true
-    };
-    var nextProps = _objectSpread(_objectSpread({}, defaultProps), allProps);
-    propsRef.current = nextProps;
-    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]);
+  var props = (0, _useMemoEditorProps.default)(passedProps);
+  (0, _react.useMemo)(function () {
+    propsRef.current = props;
+  }, [props]);
   var editorContext = (0, _EditorContext.useEditorContext)();
   var editorActionsPlaceholderInstance = (0, _react.useMemo)(function () {
     return new _actions.default();
   }, []);
   var editorActions = editorContext.editorActions || editorActionsPlaceholderInstance;
   var startTime = (0, _react.useRef)(performance.now());
-  var _useAnalyticsEvents2 = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var experienceStore = (0, _react.useRef)();
   var handleAnalyticsEvent = (0, _react.useCallback)(function (data) {
     (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)(data);
@@ -241,9 +68,9 @@ function EditorButBetter(passedProps) {
       featureFlags = _propsRef$current.featureFlags;
     editorActions._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, getFeatureFlagsFromRef);
     if (featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
-      var _experienceStore$curr2;
+      var _experienceStore$curr;
       experienceStore.current = _ufo.ExperienceStore.getInstance(instance.view);
-      (_experienceStore$curr2 = experienceStore.current) === null || _experienceStore$curr2 === void 0 || _experienceStore$curr2.start(_ufo.EditorExperience.loadEditor, startTime.current);
+      (_experienceStore$curr = experienceStore.current) === null || _experienceStore$curr === void 0 || _experienceStore$curr.start(_ufo.EditorExperience.loadEditor, startTime.current);
     }
     if (onEditorReady) {
       var _performanceTracking$;
@@ -294,13 +121,6 @@ function ComposableEditor(props) {
       editorSessionId: editorSessionId.current
     };
   }, [props.appearance]);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.less-editor-props-rerendering')) {
-    return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext
-    // @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
-    , {
-      data: data
-    }, (0, _react2.jsx)(EditorButBetter, props));
-  }
   return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext
   // @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
   , {

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMemoEditorProps = exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useMemoEditorProps = exports.useMemoEditorProps = function useMemoEditorProps(passedProps) {
+  var memodProps = (0, _react.useMemo)(function () {
+    // That sounds awful but this is the only way to make sure we didn't missed any EditorProps
+    var allProps = {
+      preset: passedProps.preset,
+      appearance: passedProps.appearance,
+      contentComponents: passedProps.contentComponents,
+      primaryToolbarIconBefore: passedProps.primaryToolbarIconBefore,
+      secondaryToolbarComponents: passedProps.secondaryToolbarComponents,
+      persistScrollGutter: passedProps.persistScrollGutter,
+      quickInsert: passedProps.quickInsert,
+      shouldFocus: passedProps.shouldFocus,
+      disabled: passedProps.disabled,
+      contextPanel: passedProps.contextPanel,
+      errorReporterHandler: passedProps.errorReporterHandler,
+      contentTransformerProvider: passedProps.contentTransformerProvider,
+      maxHeight: passedProps.maxHeight,
+      minHeight: passedProps.minHeight,
+      placeholder: passedProps.placeholder,
+      placeholderBracketHint: passedProps.placeholderBracketHint,
+      defaultValue: passedProps.defaultValue,
+      assistiveLabel: passedProps.assistiveLabel,
+      popupsMountPoint: passedProps.popupsMountPoint,
+      popupsBoundariesElement: passedProps.popupsBoundariesElement,
+      popupsScrollableElement: passedProps.popupsScrollableElement,
+      editorActions: passedProps.editorActions,
+      onEditorReady: passedProps.onEditorReady,
+      onDestroy: passedProps.onDestroy,
+      onChange: passedProps.onChange,
+      onCancel: passedProps.onCancel,
+      inputSamplingLimit: passedProps.inputSamplingLimit,
+      extensionProviders: passedProps.extensionProviders,
+      UNSAFE_useAnalyticsContext: passedProps.UNSAFE_useAnalyticsContext,
+      trackValidTransactions: passedProps.trackValidTransactions,
+      useStickyToolbar: passedProps.useStickyToolbar,
+      featureFlags: passedProps.featureFlags,
+      onSave: passedProps.onSave,
+      performanceTracking: passedProps.performanceTracking,
+      sanitizePrivateContent: passedProps.sanitizePrivateContent,
+      media: passedProps.media,
+      collabEdit: passedProps.collabEdit,
+      primaryToolbarComponents: passedProps.primaryToolbarComponents,
+      allowUndoRedoButtons: passedProps.allowUndoRedoButtons,
+      linking: passedProps.linking,
+      hideAvatarGroup: passedProps.hideAvatarGroup,
+      activityProvider: passedProps.activityProvider,
+      searchProvider: passedProps.searchProvider,
+      annotationProviders: passedProps.annotationProviders,
+      collabEditProvider: passedProps.collabEditProvider,
+      presenceProvider: passedProps.presenceProvider,
+      emojiProvider: passedProps.emojiProvider,
+      taskDecisionProvider: passedProps.taskDecisionProvider,
+      legacyImageUploadProvider: passedProps.legacyImageUploadProvider,
+      mentionProvider: passedProps.mentionProvider,
+      autoformattingProvider: passedProps.autoformattingProvider,
+      macroProvider: passedProps.macroProvider,
+      contextIdentifierProvider: passedProps.contextIdentifierProvider,
+      allowExpand: passedProps.allowExpand,
+      allowNestedTasks: passedProps.allowNestedTasks,
+      allowBlockType: passedProps.allowBlockType,
+      allowTasksAndDecisions: passedProps.allowTasksAndDecisions,
+      allowBreakout: passedProps.allowBreakout,
+      allowRule: passedProps.allowRule,
+      allowHelpDialog: passedProps.allowHelpDialog,
+      allowJiraIssue: passedProps.allowJiraIssue,
+      allowPanel: passedProps.allowPanel,
+      allowExtension: passedProps.allowExtension,
+      allowConfluenceInlineComment: passedProps.allowConfluenceInlineComment,
+      allowTemplatePlaceholders: passedProps.allowTemplatePlaceholders,
+      allowDate: passedProps.allowDate,
+      allowLayouts: passedProps.allowLayouts,
+      allowStatus: passedProps.allowStatus,
+      allowTextAlignment: passedProps.allowTextAlignment,
+      allowIndentation: passedProps.allowIndentation,
+      showIndentationButtons: passedProps.showIndentationButtons,
+      allowNewInsertionBehaviour: passedProps.allowNewInsertionBehaviour,
+      allowFindReplace: passedProps.allowFindReplace,
+      UNSAFE_allowBorderMark: passedProps.UNSAFE_allowBorderMark,
+      allowBorderMark: passedProps.allowBorderMark,
+      allowFragmentMark: passedProps.allowFragmentMark,
+      autoScrollIntoView: passedProps.autoScrollIntoView,
+      elementBrowser: passedProps.elementBrowser,
+      maxContentSize: passedProps.maxContentSize,
+      saveOnEnter: passedProps.saveOnEnter,
+      feedbackInfo: passedProps.feedbackInfo,
+      mention: passedProps.mention,
+      mentionInsertDisplayName: passedProps.mentionInsertDisplayName,
+      uploadErrorHandler: passedProps.uploadErrorHandler,
+      waitForMediaUpload: passedProps.waitForMediaUpload,
+      extensionHandlers: passedProps.extensionHandlers,
+      allowTextColor: passedProps.allowTextColor,
+      allowTables: passedProps.allowTables,
+      insertMenuItems: passedProps.insertMenuItems,
+      UNSAFE_cards: passedProps.UNSAFE_cards,
+      smartLinks: passedProps.smartLinks,
+      allowAnalyticsGASV3: passedProps.allowAnalyticsGASV3,
+      codeBlock: passedProps.codeBlock,
+      textFormatting: passedProps.textFormatting,
+      dangerouslyAppendPlugins: passedProps.dangerouslyAppendPlugins
+    };
+    var defaultProps = {
+      appearance: 'comment',
+      disabled: false,
+      quickInsert: true
+    };
+    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]);
+  return memodProps;
+};
+var _default = exports.default = useMemoEditorProps;

package/dist/cjs/ui/ConfigPanel/ErrorMessage/index.js

@@ -26,7 +26,8 @@ var ConfigPanelErrorMessage = function ConfigPanelErrorMessage(_ref) {
       return /*#__PURE__*/_react.default.createElement(_ErrorImage.default, null);
     },
     size: "narrow",
-    imageHeight: 80
+    imageHeight: 80,
+    testId: "config-panel-error-message"
   });
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(ConfigPanelErrorMessage);

package/dist/cjs/ui/ConfigPanel/FieldMessages.js

@@ -85,11 +85,17 @@ var FieldMessages = function FieldMessages(_ref2) {
   }
   switch (error) {
     case _types.ValidationError.Required:
-      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, intl.formatMessage(_messages.messages.required));
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.required));
     case _types.ValidationError.Invalid:
-      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, intl.formatMessage(_messages.messages.invalid));
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.invalid));
     case _types.FieldTypeError.isMultipleAndRadio:
-      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, intl.formatMessage(_messages.messages.isMultipleAndRadio));
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.isMultipleAndRadio));
     default:
       return null;
   }

package/dist/cjs/ui/ConfigPanel/Fields/Boolean.js

@@ -97,7 +97,8 @@ function Toggle(_ref3) {
     validate: function validate(value) {
       return _validate(value, isRequired);
     },
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    testId: "config-panel-toggle-".concat(name)
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps,
       error = _ref4.error;

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -368,6 +368,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
+    testId: "config-panel-color-picker-".concat(name),
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
     }

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -150,7 +150,8 @@ function CustomSelect(_ref2) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-custom-select-".concat(name)
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;

package/dist/cjs/ui/ConfigPanel/Fields/Date.js

@@ -30,7 +30,8 @@ function Date(_ref) {
     isRequired: isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-date-picker-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

package/dist/cjs/ui/ConfigPanel/Fields/DateRange.js

@@ -107,7 +107,8 @@ var DateRange = function DateRange(_ref3) {
     isRequired: field.isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
-    }
+    },
+    testId: "config-panel-date-range-".concat(name)
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
       error = _ref5.error;

package/dist/cjs/ui/ConfigPanel/Fields/Number.js

@@ -41,7 +41,8 @@ function Number(_ref) {
     label: label,
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
-    validate: validateNumber
+    validate: validateNumber,
+    testId: "config-panel-number-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,

package/dist/cjs/ui/ConfigPanel/Fields/RadioGroup.js

@@ -34,7 +34,8 @@ function RadioField(_ref) {
     isRequired: field.isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-radio-group-".concat(field.name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

package/dist/cjs/ui/ConfigPanel/Fields/Select.js

@@ -29,6 +29,7 @@ function SelectField(_ref) {
     name: name,
     label: field.label,
     defaultValue: (0, _utils.getOptionFromValue)(field.items, field.defaultValue),
+    testId: "config-panel-select-".concat(name),
     isRequired: field.isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);

package/dist/cjs/ui/ConfigPanel/Fields/String.js

@@ -34,7 +34,8 @@ function String(_ref) {
     isRequired: isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
-    }
+    },
+    testId: "config-panel-string-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,
@@ -51,7 +52,8 @@ function String(_ref) {
           fieldProps.onBlur();
           onFieldChange(name, meta.dirty);
         },
-        placeholder: placeholder
+        placeholder: placeholder,
+        "data-testid": "config-panel-textarea-".concat(name)
       })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
         error: error,
         description: description

package/dist/cjs/ui/ConfigPanel/Fields/UserSelect.js

@@ -234,7 +234,8 @@ function UserSelect(_ref2) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-user-select-".concat(name)
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -22,12 +22,12 @@ var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
 var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
-var item = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
+var item = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
 var itemIcon = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), iconWidth, iconWidth);
-var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
+var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 ", ";\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), "var(--ds-space-200, 16px)", gapSizeForEllipsis);
 var centeredItemTitle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
-var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 24px;\n"])));
+var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: ", ";\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
+var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
 var closeButtonWrapper = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 var Header = function Header(_ref) {
   var icon = _ref.icon,
@@ -55,12 +55,14 @@ var Header = function Header(_ref) {
     css: itemText
   }, (0, _react2.jsx)("div", {
     className: "item-title",
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title), (0, _react2.jsx)("div", {
     className: "item-summary"
   }, summary)) : (0, _react2.jsx)("div", {
     css: centeredItemTitle,
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title)), (0, _react2.jsx)("div", {
     css: closeButtonWrapper
   }, (0, _react2.jsx)(_customThemeButton.default, {
@@ -70,11 +72,13 @@ var Header = function Header(_ref) {
     }),
     onClick: onClose
   }))), (description || documentationUrl) && (0, _react2.jsx)("p", {
-    css: descriptionStyle
+    css: descriptionStyle,
+    "data-testid": "config-panel-header-description"
   }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (0, _react2.jsx)("a", {
     target: "_blank",
     rel: "noopener noreferrer",
-    href: documentationUrl
+    href: documentationUrl,
+    "data-testid": "config-panel-header-documentation-link"
   }, intl.formatMessage(_messages.messages.documentation))));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);

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