@atlaskit/editor-core 189.5.11 → 189.6.1

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

@@ -7,7 +7,6 @@ import { ACTION, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { getAnalyticsAppearance, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
 import { basePlugin } from '@atlaskit/editor-plugin-base';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import EditorActions from '../actions';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import { name, version } from '../version-wrapper';
@@ -20,187 +19,17 @@ import sendDurationAnalytics from './utils/sendDurationAnalytics';
 import trackEditorActions from './utils/trackEditorActions';
 import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
 import useProviderFactory from './hooks/useProviderFactory';
+import useMemoEditorProps from './hooks/useMemoEditorProps';
 
 /**
  * Editor wrapper that deals with the lifecycle logic of the editor
  */
 function Editor(passedProps) {
-  var _editorContext$editor;
-  const defaultProps = {
-    appearance: 'comment',
-    disabled: false,
-    quickInsert: true
-  };
-  const props = {
-    ...defaultProps,
-    ...passedProps
-  };
-  const editorContext = useEditorContext();
-  const editorActions = useRef((_editorContext$editor = editorContext === null || editorContext === void 0 ? void 0 : editorContext.editorActions) !== null && _editorContext$editor !== void 0 ? _editorContext$editor : new EditorActions());
-  const startTime = useRef(performance.now());
-  const {
-    createAnalyticsEvent
-  } = useAnalyticsEvents();
-  const experienceStore = useRef();
-  const handleAnalyticsEvent = data => fireAnalyticsEvent(createAnalyticsEvent)(data);
-  useConstructor(() => {
-    trackEditorActions(editorActions.current, props.performanceTracking, value => handleAnalyticsEvent(value));
-  });
-  const getExperienceStore = () => experienceStore.current;
-  const onEditorCreated = instance => {
-    var _props$featureFlags;
-    editorActions.current._privateRegisterEditor(instance.view, instance.eventDispatcher, instance.transformer, () => createFeatureFlagsFromProps(props));
-    if ((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.ufo) {
-      var _experienceStore$curr;
-      experienceStore.current = ExperienceStore.getInstance(instance.view);
-      (_experienceStore$curr = experienceStore.current) === null || _experienceStore$curr === void 0 ? void 0 : _experienceStore$curr.start(EditorExperience.loadEditor, startTime.current);
-    }
-    if (props.onEditorReady) {
-      var _props$performanceTra, _props$performanceTra2, _props$featureFlags2;
-      const measureEditorReady = (props === null || props === void 0 ? void 0 : (_props$performanceTra = props.performanceTracking) === null || _props$performanceTra === void 0 ? void 0 : (_props$performanceTra2 = _props$performanceTra.onEditorReadyCallbackTracking) === null || _props$performanceTra2 === void 0 ? void 0 : _props$performanceTra2.enabled) || ((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.ufo);
-      measureEditorReady && startMeasure(measurements.ON_EDITOR_READY_CALLBACK);
-      props.onEditorReady(editorActions.current);
-      measureEditorReady && stopMeasure(measurements.ON_EDITOR_READY_CALLBACK, sendDurationAnalytics(ACTION.ON_EDITOR_READY_CALLBACK, props, getExperienceStore, createAnalyticsEvent));
-    }
-  };
-  const onEditorDestroyed = _instance => {
-    var _props$onDestroy;
-    editorActions.current._privateUnregisterEditor();
-    (_props$onDestroy = props.onDestroy) === null || _props$onDestroy === void 0 ? void 0 : _props$onDestroy.call(props);
-  };
-  useMeasureEditorMountTime(props, getExperienceStore, createAnalyticsEvent);
-  const providerFactory = useProviderFactory(props, editorActions.current, createAnalyticsEvent);
-  return jsx(EditorInternal, {
-    props: props,
-    handleAnalyticsEvent: handleAnalyticsEvent,
-    createAnalyticsEvent: createAnalyticsEvent,
-    preset: props.preset,
-    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) {
   const propsRef = useRef(passedProps);
-  const props = useMemo(() => {
-    // That sounds awful but this is the only way to make sure we didn't missed any EditorProps
-    const 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
-    };
-    const defaultProps = {
-      appearance: 'comment',
-      disabled: false,
-      quickInsert: true
-    };
-    const nextProps = {
-      ...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]);
+  const props = useMemoEditorProps(passedProps);
+  useMemo(() => {
+    propsRef.current = props;
+  }, [props]);
   const editorContext = useEditorContext();
   const editorActionsPlaceholderInstance = useMemo(() => new EditorActions(), []);
   const editorActions = editorContext.editorActions || editorActionsPlaceholderInstance;
@@ -230,9 +59,9 @@ function EditorButBetter(passedProps) {
     } = propsRef.current;
     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 = ExperienceStore.getInstance(instance.view);
-      (_experienceStore$curr2 = experienceStore.current) === null || _experienceStore$curr2 === void 0 ? void 0 : _experienceStore$curr2.start(EditorExperience.loadEditor, startTime.current);
+      (_experienceStore$curr = experienceStore.current) === null || _experienceStore$curr === void 0 ? void 0 : _experienceStore$curr.start(EditorExperience.loadEditor, startTime.current);
     }
     if (onEditorReady) {
       var _performanceTracking$;
@@ -287,13 +116,6 @@ export function ComposableEditor(props) {
       editorSessionId: editorSessionId.current
     };
   }, [props.appearance]);
-  if (getBooleanFF('platform.editor.less-editor-props-rerendering')) {
-    return jsx(FabricEditorAnalyticsContext
-    // @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
-    , {
-      data: data
-    }, jsx(EditorButBetter, props));
-  }
   return jsx(FabricEditorAnalyticsContext
   // @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
   , {

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

@@ -0,0 +1,115 @@
+import { useMemo } from 'react';
+export const useMemoEditorProps = passedProps => {
+  const memodProps = useMemo(() => {
+    // That sounds awful but this is the only way to make sure we didn't missed any EditorProps
+    const 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
+    };
+    const defaultProps = {
+      appearance: 'comment',
+      disabled: false,
+      quickInsert: true
+    };
+    const nextProps = {
+      ...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;
+};
+export default useMemoEditorProps;

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

@@ -18,7 +18,8 @@ const ConfigPanelErrorMessage = ({
     description: errorMessage,
     renderImage: () => /*#__PURE__*/React.createElement(ErrorImage, null),
     size: "narrow",
-    imageHeight: 80
+    imageHeight: 80,
+    testId: "config-panel-error-message"
   });
 };
 export default injectIntl(ConfigPanelErrorMessage);

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

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

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

@@ -87,7 +87,8 @@ function Toggle({
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    testId: `config-panel-toggle-${name}`
   }, ({
     fieldProps,
     error

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

@@ -370,6 +370,7 @@ const ColorPickerField = ({
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
+    testId: `config-panel-color-picker-${name}`,
     validate: value => validate(field, value || '')
   }, ({
     fieldProps,

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

@@ -95,7 +95,8 @@ function CustomSelect({
     label: label,
     isRequired: isRequired,
     defaultValue: defaultValue,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-custom-select-${name}`
   }, ({
     fieldProps,
     error

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

@@ -24,7 +24,8 @@ function Date({
     label: label,
     defaultValue: defaultValue,
     isRequired: isRequired,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-date-picker-${name}`
   }, ({
     fieldProps,
     error

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

@@ -93,7 +93,8 @@ const DateRange = function ({
     label: field.label,
     defaultValue: currentValue,
     isRequired: field.isRequired,
-    validate: value => validate(field, value || '')
+    validate: value => validate(field, value || ''),
+    testId: `config-panel-date-range-${name}`
   }, ({
     fieldProps,
     error

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

@@ -37,7 +37,8 @@ export default function Number({
     label: label,
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
-    validate: validateNumber
+    validate: validateNumber,
+    testId: `config-panel-number-${name}`
   }, ({
     fieldProps,
     error,

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

@@ -20,7 +20,8 @@ export default function RadioField({
     label: field.label,
     defaultValue: field.defaultValue,
     isRequired: field.isRequired,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-radio-group-${field.name}`
   }, ({
     fieldProps,
     error

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

@@ -20,6 +20,7 @@ export default function SelectField({
     name: name,
     label: field.label,
     defaultValue: getOptionFromValue(field.items, field.defaultValue),
+    testId: `config-panel-select-${name}`,
     isRequired: field.isRequired,
     validate: value => {
       return validate(field, value);

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

@@ -23,7 +23,8 @@ export default function String({
     label: label,
     defaultValue: defaultValue || '',
     isRequired: isRequired,
-    validate: value => validate(field, value || '')
+    validate: value => validate(field, value || ''),
+    testId: `config-panel-string-${name}`
   }, ({
     fieldProps,
     error,
@@ -43,7 +44,8 @@ export default function String({
           fieldProps.onBlur();
           onFieldChange(name, meta.dirty);
         },
-        placeholder: placeholder
+        placeholder: placeholder,
+        "data-testid": `config-panel-textarea-${name}`
       })), /*#__PURE__*/React.createElement(FieldMessages, {
         error: error,
         description: description

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

@@ -161,7 +161,8 @@ export default function UserSelect({
     label: label,
     isRequired: isRequired,
     defaultValue: defaultValue,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-user-select-${name}`
   }, ({
     fieldProps,
     error

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

@@ -15,7 +15,7 @@ const margin = 16;
 const gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
 const item = css`
   display: flex;
-  margin-bottom: 24px;
+  margin-bottom: ${"var(--ds-space-300, 24px)"};
 `;
 const itemIcon = css`
   width: ${iconWidth}px;
@@ -40,7 +40,7 @@ const itemBody = css`
   flex-wrap: nowrap;
   justify-content: space-between;
   line-height: 1.4;
-  margin: 0 16px;
+  margin: 0 ${"var(--ds-space-200, 16px)"};
   flex-grow: 3;
   max-width: calc(100% - ${gapSizeForEllipsis}px);
 `;
@@ -55,7 +55,7 @@ const itemText = css`
   .item-summary {
     font-size: ${relativeFontSizeToBase16(11.67)};
     color: ${`var(--ds-text-subtlest, ${N200})`};
-    margin-top: 4px;
+    margin-top: ${"var(--ds-space-050, 4px)"};
 
     white-space: nowrap;
     overflow: hidden;
@@ -63,7 +63,7 @@ const itemText = css`
   }
 `;
 const descriptionStyle = css`
-  margin-bottom: 24px;
+  margin-bottom: ${"var(--ds-space-300, 24px)"};
 `;
 const closeButtonWrapper = css`
   width: ${buttonWidth}px;
@@ -94,12 +94,14 @@ const Header = ({
     css: itemText
   }, jsx("div", {
     className: "item-title",
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title), jsx("div", {
     className: "item-summary"
   }, summary)) : jsx("div", {
     css: centeredItemTitle,
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title)), jsx("div", {
     css: closeButtonWrapper
   }, jsx(Button, {
@@ -109,11 +111,13 @@ const Header = ({
     }),
     onClick: onClose
   }))), (description || documentationUrl) && jsx("p", {
-    css: descriptionStyle
+    css: descriptionStyle,
+    "data-testid": "config-panel-header-description"
   }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
-    href: documentationUrl
+    href: documentationUrl,
+    "data-testid": "config-panel-header-documentation-link"
   }, intl.formatMessage(messages.documentation))));
 };
 export default injectIntl(Header);

package/dist/es2019/version-wrapper.js

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