@atlaskit/editor-core 151.1.2 → 152.0.0

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

@@ -1,4 +1,4 @@
-import { isFieldset, isDateRange, isTabGroup, isExpand, getFieldSerializer, getFieldDeserializer } from '@atlaskit/editor-common/extensions';
+import { isFieldset, isDateRange, isTabGroup, isTabField, isExpand, getFieldSerializer, getFieldDeserializer } from '@atlaskit/editor-common/extensions';
 import { getNameFromDuplicateField, isDuplicateField } from './utils';
 
 const isOption = option => {
@@ -8,10 +8,9 @@ const isOption = option => {
 const isOptions = options => {
   return Array.isArray(options) && options.every(isOption);
 };
-/** maps the typed-values from the Form values object */
-
 
-function extract(value, field) {
+/** maps the typed-values from the Form values object */
+function extract(value, field, options) {
   if (isOptions(value)) {
     return value.map(item => item.value);
   } else if (isOption(value)) {
@@ -24,79 +23,235 @@ function extract(value, field) {
     }
 
     return Number(value);
+  } // Workaround for https://product-fabric.atlassian.net/browse/DST-2701
+  else if (options !== null && options !== void 0 && options.useDefaultValue && value === undefined && 'defaultValue' in field) {
+    return field.defaultValue;
   }
 
   return value;
 }
 
-export const serialize = async (manifest, data, fields, depth = 0) => {
+export const findDuplicateFields = fields => findDuplicateFieldsInternal(flattenFields(fields));
+
+const findDuplicateFieldsInternal = fields => {
+  const allowDuplicatesMap = {};
+  return fields.find(field => {
+    if (isExpand(field)) {
+      return findDuplicateFieldsInternal(field.fields);
+    } else if (isTabGroup(field)) {
+      return field.fields.find(tabField => findDuplicateFieldsInternal(tabField.fields));
+    } else if (allowDuplicatesMap[field.name] === undefined) {
+      allowDuplicatesMap[field.name] = !!field.allowDuplicates;
+      return;
+    } else if (!field.allowDuplicates || !allowDuplicatesMap[field.name]) {
+      return field;
+    }
+
+    return;
+  });
+};
+
+export const serialize = async (manifest, data, fields, options = {}) => {
   const result = [];
+  const {
+    depth = 0,
+    parentType
+  } = options;
+  const flattenedFields = flattenFields(fields);
+  const fillResults = flattenedFields.map(async field => {
+    if (isTabGroup(field)) {
+      const tabGroupData = await serializeTabGroupField(manifest, field, data);
+      result.push(...tabGroupData);
+    } else if (isTabField(field)) {
+      const tabData = await serializeTabField(manifest, field, data);
+      result.push(...tabData);
+    } else if (isExpand(field)) {
+      const expandData = await serializeExpandField(manifest, field, data);
+      result.push(...expandData);
+    } // WARNING: don't recursively serialize, limit to depth < 1
+    // serializable?
+    else if (isFieldset(field) && depth === 0) {
+      const fieldsetData = await serializeFieldset(manifest, field, data, depth);
 
-  if (data) {
-    for (const name in data) {
-      const field = fields.find(field => field.name === getNameFromDuplicateField(name));
+      if (fieldsetData) {
+        result.push(fieldsetData);
+      }
+    } else {
+      const value = extract(data[field.name], field, {
+        useDefaultValue: true
+      }); // ignore undefined values
+
+      if (value !== undefined) {
+        result.push({
+          [field.name]: value
+        });
+      }
+    }
+  });
+  await Promise.all(fillResults); // Crunch fields down to parameters
 
-      if (field === undefined) {
-        continue;
-      } // ignore undefined values
+  const parameters = result.reduce((obj, current) => {
+    for (const key in current) {
+      obj[key] = current[key];
+    }
 
+    return obj;
+  }, {}); // Fix up duplicate values (currently only for fieldsets)
 
-      let value = extract(data[name], field);
+  const hasDuplicateFields = parentType === 'fieldset' && !!flattenedFields.find(field => field.allowDuplicates);
 
-      if (value === undefined) {
-        continue;
-      }
+  if (hasDuplicateFields) {
+    return serializeMergeDuplicateFieldData(parameters, data, flattenedFields);
+  }
 
-      if (isTabGroup(field)) {
-        const {
-          fields: tabs
-        } = field;
-        value = {};
+  return parameters;
+};
 
-        const resolveTabValues = async (tabField, groupData) => {
-          return await serialize(manifest, groupData[tabField.name] || {}, tabField.fields);
-        };
+const serializeFieldset = async (manifest, field, data, depth) => {
+  let fieldSerializer;
 
-        for (let i = 0; i < tabs.length; i++) {
-          const tabField = tabs[i];
-          value[tabField.name] = await resolveTabValues(tabField, data[field.name] || {});
-        }
-      } else if (isExpand(field)) {
-        value = await serialize(manifest, data[field.name] || {}, field.fields);
-      } // WARNING: don't recursively serialize, limit to depth < 1
-      // serializable?
-      else if (isFieldset(field) && depth === 0) {
-        const fieldSerializer = await getFieldSerializer(manifest, field.options.transformer);
-
-        if (fieldSerializer) {
-          const {
-            fields: fieldsetFields
-          } = field;
-          const extracted = await serialize(manifest, value, fieldsetFields, depth + 1);
-          value = fieldSerializer(extracted);
-        }
+  try {
+    fieldSerializer = await getFieldSerializer(manifest, field.options.transformer);
+  } catch (ex) {
+    // We only throw if there is data that may be lost
+    if (data[field.name] !== undefined) {
+      throw ex;
+    }
+  }
+
+  if (!fieldSerializer) {
+    return;
+  }
+
+  const {
+    fields: fieldsetFields
+  } = field;
+  const fieldParams = extract(data[field.name], field, {
+    useDefaultValue: true
+  }) || {};
+  const extracted = await serialize(manifest, fieldParams, fieldsetFields, {
+    depth: depth + 1,
+    parentType: 'fieldset'
+  });
+  return {
+    [field.name]: fieldSerializer(extracted)
+  };
+};
+
+const serializeExpandField = async (manifest, field, data) => {
+  const expandData = field.hasGroupedValues ? data[field.name] || {} : data;
+  const value = await serialize(manifest, expandData, field.fields, {
+    parentType: 'expand'
+  });
+  const results = [];
+
+  if (!field.hasGroupedValues) {
+    for (const fieldName in value) {
+      results.push({
+        [fieldName]: value[fieldName]
+      });
+    }
+  } else {
+    results.push({
+      [field.name]: value
+    });
+  }
+
+  return results;
+};
+
+const resolveTabValues = async (manifest, tabField, groupData) => {
+  const tabFieldParams = tabField.hasGroupedValues ? groupData[tabField.name] || {} : groupData;
+  return await serialize(manifest, tabFieldParams, tabField.fields, {
+    parentType: 'tab'
+  });
+};
+
+const serializeTabGroupField = async (manifest, field, data) => {
+  const {
+    fields: tabs
+  } = field;
+  const results = [];
+  const value = {};
+
+  for (let i = 0; i < tabs.length; i++) {
+    const tabField = tabs[i];
+    const tabFieldParameters = await resolveTabValues(manifest, tabField, field.hasGroupedValues ? data[field.name] || {} : data);
+
+    if (tabField.hasGroupedValues) {
+      // Keep namespaced by tab
+      value[tabField.name] = tabFieldParameters;
+    } else {
+      // Copy into tabGroup value
+      for (const fieldName in tabFieldParameters) {
+        value[fieldName] = tabFieldParameters[fieldName];
       }
+    }
+  } // Now for tabGroup...
+
 
-      result.push({
-        [field.name]: value
+  if (field.hasGroupedValues) {
+    results.push({
+      [field.name]: value
+    });
+  } else {
+    for (const fieldName in value) {
+      results.push({
+        [fieldName]: value
       });
     }
-  } // when there are duplicate fields we return an array eg. [{ title: 'one' }, { title: 'two' }]
-  // when there aren't we return an object eg. { title: 'one' }
+  }
 
+  return results;
+};
 
-  const hasDuplicateFields = !!Object.keys(data).find(key => isDuplicateField(key));
+const serializeTabField = async (manifest, field, data) => {
+  const results = [];
+  const tabField = field;
+  const tabFieldParameters = await resolveTabValues(manifest, tabField, data);
 
-  if (hasDuplicateFields) {
-    return result;
+  if (tabField.hasGroupedValues) {
+    // Keep namespaced by tab
+    results.push({
+      [tabField.name]: tabFieldParameters
+    });
+  } else {
+    // Copy into tabGroup value
+    for (const fieldName in tabFieldParameters) {
+      results.push({
+        [fieldName]: tabFieldParameters[fieldName]
+      });
+    }
   }
 
-  return result.reduce((obj, current) => {
-    for (const key in current) {
-      obj[key] = current[key];
+  return results;
+};
+
+const serializeMergeDuplicateFieldData = (parameters, formData, flattenedFields) => {
+  // Weed out all the non-duplicate field names
+  const allDuplicateFieldNames = Object.keys(formData).filter(key => isDuplicateField(key));
+  return flattenedFields.reduce((newParams, field) => {
+    const paramValue = parameters[field.name];
+
+    if (!field.allowDuplicates && paramValue !== undefined) {
+      newParams[field.name] = paramValue;
+    } else {
+      // extract the given duplicate values through the field
+      const duplicateValues = allDuplicateFieldNames.filter(name => getNameFromDuplicateField(name) === field.name).map(duplicateFieldName => extract(formData[duplicateFieldName], field, {
+        useDefaultValue: true
+      })); // Merge and ensure that all values are worth serializing
+
+      const mergedValues = [paramValue, // first value
+      ...duplicateValues].filter(value => value !== undefined);
+
+      if (mergedValues.length > 0) {
+        // Replace so the duplicate field values are saved under the
+        // fieldName as an array
+        newParams[field.name] = mergedValues;
+      }
     }
 
-    return obj;
+    return newParams;
   }, {});
 };
 
@@ -137,21 +292,51 @@ function injectDefaultValues(data, fields) {
     }
   }
 
-  if (doParametersContainDuplicateFields(copy)) {
-    return copy;
-  }
-
   return convertToParametersObject(copy);
 }
+/**
+ * Flattens the given FieldDefinition[] so it resembles the expected data
+ * structure in result Parameters.
+ */
+
+
+const flattenFields = fields => {
+  const flattenAccumulator = (accumulator, field) => {
+    if (isTabGroup(field)) {
+      if (field.hasGroupedValues) {
+        accumulator.push(field);
+      } else {
+        const flattenedTabs = field.fields.reduce((tabAccumulator, tab) => {
+          return tabAccumulator.concat(tab.hasGroupedValues ? tab : tab.fields.reduce(flattenAccumulator, []));
+        }, []);
+        accumulator.push(...flattenedTabs);
+      }
+    } else if (isExpand(field)) {
+      if (field.hasGroupedValues) {
+        accumulator.push(field);
+      } else {
+        const flattenedExpand = field.fields.reduce(flattenAccumulator, []);
+        accumulator.push(...flattenedExpand);
+      }
+    } else {
+      accumulator.push(field);
+    }
+
+    return accumulator;
+  };
+
+  return fields.reduce(flattenAccumulator, []);
+};
 
 export const deserialize = async (manifest, data, fields, depth = 0) => {
   const dataArray = convertToParametersArray(data);
   let result = [];
   const errors = [];
+  const flattenedFields = flattenFields(fields);
 
   for (const item of dataArray) {
     const [name, originalValue] = Object.entries(item)[0];
-    const field = fields.find(field => field.name === getNameFromDuplicateField(name));
+    const field = flattenedFields.find(field => field.name === getNameFromDuplicateField(name));
 
     if (field === undefined) {
       continue;
@@ -193,21 +378,7 @@ export const deserialize = async (manifest, data, fields, depth = 0) => {
     result.errors = convertToParametersObject(errors);
   }
 
-  return injectDefaultValues(result, fields);
-};
-
-const doParametersContainDuplicateFields = parameters => {
-  const keyMap = new Set();
-
-  for (const param of parameters) {
-    const key = Object.keys(param)[0];
-
-    if (keyMap.has(key)) {
-      return true;
-    }
-
-    keyMap.add(key);
-  }
+  return injectDefaultValues(result, flattenedFields);
 };
 
 const convertToParametersObject = (parameters = []) => {

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

@@ -8,7 +8,6 @@ export const fromEntries = iterable => {
     return obj;
   }, {});
 };
-export const toEntries = parameters => Array.isArray(parameters) ? parameters.reduce((prev, curr) => [...prev, ...Object.entries(curr)], []) : Object.entries(parameters);
 
 const isEmptyString = value => typeof value === 'string' && value === '';
 
@@ -50,7 +49,7 @@ export const getSafeParentedName = (name, parentName) => {
 const duplicateFieldRegex = /:[0-9]+$/;
 export const isDuplicateField = key => duplicateFieldRegex.test(key);
 export const getNameFromDuplicateField = key => key.replace(duplicateFieldRegex, '');
-/* 
+/*
     ColorPickerButton only accepts 8 digit hex alpha values, for example:
     #123fffaa (8 digits, hex alpha)
     */

package/dist/es2019/ui/Dropdown/index.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { PureComponent } from 'react';
+import { PureComponent } from 'react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import DropdownList from '@atlaskit/droplist';
 import { Popup } from '@atlaskit/editor-common';
 import withOuterListeners from '../with-outer-listeners';

package/dist/es2019/ui/DropdownMenu/index.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import styled from 'styled-components';
-import DropList from '@atlaskit/droplist';
+import styled from 'styled-components'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+import DropList from '@atlaskit/droplist'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item, { ItemGroup } from '@atlaskit/item';
 import Tooltip from '@atlaskit/tooltip';
 import { Popup } from '@atlaskit/editor-common';
@@ -84,6 +86,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       key: item.key || item.content,
       isSelected: item.isActive
     }, /*#__PURE__*/React.createElement(Item, {
+      role: "menuitem",
       elemBefore: item.elemBefore,
       elemAfter: item.elemAfter,
       isDisabled: item.isDisabled,
@@ -154,7 +157,8 @@ export default class DropdownMenuWrapper extends PureComponent {
         minWidth: fitWidth || 0
       }
     }), items.map((group, index) => /*#__PURE__*/React.createElement(ItemGroup, {
-      key: index
+      key: index,
+      role: "menu"
     }, group.items.map(item => this.renderItem(item))))));
   }
 

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 

package/dist/es2019/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -4,6 +4,7 @@ import memoizeOne from 'memoize-one';
 import styled, { ThemeProvider, css } from 'styled-components';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item from '@atlaskit/item';
 import { B100, N20, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/ui/LinkSearch/LinkSearchListItem.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppress
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
-import { N20, N800, N100 } from '@atlaskit/theme/colors';
+import { N20, N300, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import formatDistance from 'date-fns/formatDistance';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
@@ -30,7 +30,7 @@ export const Name = styled.div`
   line-height: 20px;
 `;
 export const ContainerName = styled.div`
-  color: ${N100};
+  color: ${N300};
   line-height: 14px;
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
 `;

package/dist/es2019/ui/Resizer/index.js

@@ -146,6 +146,7 @@ export default class Resizer extends React.Component {
   render() {
     const handleStyles = {};
     const handles = {};
+    const handleComponent = {};
     const {
       innerPadding = 0,
       width,
@@ -154,7 +155,8 @@ export default class Resizer extends React.Component {
       layout,
       enable,
       children,
-      ratio
+      ratio,
+      handleComponentFunc
     } = this.props;
     const {
       isResizing
@@ -167,6 +169,11 @@ export default class Resizer extends React.Component {
         zIndex: akRichMediaResizeZIndex,
         pointerEvents: 'auto'
       };
+      const sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
+
+      if (sideHandleComponent) {
+        handleComponent[side] = sideHandleComponent;
+      }
     });
     const className = classnames(richMediaClassName, `image-${layout}`, this.props.className, {
       'is-resizing': isResizing,
@@ -199,6 +206,7 @@ export default class Resizer extends React.Component {
       handleClasses: handles,
       handleStyles: handleStyles,
       handleWrapperStyle: handleWrapperStyle,
+      handleComponent: handleComponent,
       enable: enable,
       onResize: this.handleResize,
       onResizeStop: this.handleResizeStop,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "151.1.2";
+export const version = "152.0.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "151.1.2",
+	"version": "152.0.0",
 	"sideEffects": false
 }

package/dist/esm/create-editor/ReactEditorView.js

@@ -510,8 +510,30 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           transformer: _this.contentTransformer
         });
 
+        if (_this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
+          _this.focusTimeoutId = handleEditorFocus(view);
+        }
+
         if (_this.featureFlags.ufo) {
+          _this.experienceStore = ExperienceStore.getInstance(view);
+
+          _this.experienceStore.start(EditorExperience.editSession);
+
+          _this.experienceStore.addMetadata(EditorExperience.editSession, {
+            reliabilityInterval: RELIABILITY_INTERVAL
+          });
+
           _this.reliabilityInterval = window.setInterval(function () {
+            var _this$experienceStore11, _this$experienceStore12;
+
+            (_this$experienceStore11 = _this.experienceStore) === null || _this$experienceStore11 === void 0 ? void 0 : (_this$experienceStore12 = _this$experienceStore11.success(EditorExperience.editSession)) === null || _this$experienceStore12 === void 0 ? void 0 : _this$experienceStore12.finally(function () {
+              var _this$experienceStore13, _this$experienceStore14;
+
+              (_this$experienceStore13 = _this.experienceStore) === null || _this$experienceStore13 === void 0 ? void 0 : _this$experienceStore13.start(EditorExperience.editSession);
+              (_this$experienceStore14 = _this.experienceStore) === null || _this$experienceStore14 === void 0 ? void 0 : _this$experienceStore14.addMetadata(EditorExperience.editSession, {
+                reliabilityInterval: RELIABILITY_INTERVAL
+              });
+            });
             var reliabilityEvent = {
               action: ACTION.UFO_SESSION_COMPLETE,
               actionSubject: ACTION_SUBJECT.EDITOR,
@@ -523,14 +545,6 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
             _this.dispatchAnalyticsEvent(reliabilityEvent);
           }, RELIABILITY_INTERVAL);
-        }
-
-        if (_this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
-          _this.focusTimeoutId = handleEditorFocus(view);
-        }
-
-        if (_this.featureFlags.ufo) {
-          _this.experienceStore = ExperienceStore.getInstance(view);
         } // Force React to re-render so consumers get a reference to the editor view
 
 

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

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, codeBidiWarningPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../plugins';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -96,7 +96,8 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     },
     cardOptions: props.smartLinks || props.UNSAFE_cards,
     codeBlock: _objectSpread(_objectSpread({}, props.codeBlock), {}, {
-      useLongPressSelection: false
+      useLongPressSelection: false,
+      appearance: props.appearance
     })
   };
 }
@@ -108,8 +109,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
  */
 
 export default function createPluginsList(props, prevProps, createAnalyticsEvent) {
-  var _props$featureFlags;
-
   var appearance = props.appearance;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
@@ -277,8 +276,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   if (props.allowPanel) {
     preset.add([panelPlugin, {
       useLongPressSelection: false,
-      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel,
-      UNSAFE_allowCustomPanelEdit: props.allowPanel.UNSAFE_allowCustomPanelEdit
+      allowCustomPanel: props.allowPanel.allowCustomPanel,
+      allowCustomPanelEdit: props.allowPanel.allowCustomPanelEdit
     }]);
   }
 
@@ -375,26 +374,46 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false
   }]);
 
-  if (((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true) {
+  var hasBeforePrimaryToolbar = function hasBeforePrimaryToolbar(components) {
+    if (components && 'before' in components) {
+      return !!components.before;
+    }
+
+    return false;
+  };
+
+  if (hasBeforePrimaryToolbar(props.primaryToolbarComponents) && !featureFlags.twoLineEditorToolbar) {
+    preset.add([beforePrimaryToolbarPlugin, {
+      beforePrimaryToolbarComponents: props.primaryToolbarComponents.before
+    }]);
+  }
+
+  if (featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar) {
     preset.add([avatarGroupPlugin, {
-      collabEdit: props.collabEdit
+      collabEdit: props.collabEdit,
+      takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents)
     }]);
   }
 
   if (props.allowFindReplace) {
-    var _props$featureFlags2;
-
     preset.add([findReplacePlugin, {
-      takeFullWidth: !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.showAvatarGroupAsPlugin) === false
+      takeFullWidth: !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+      twoLineEditorToolbar: !!featureFlags.twoLineEditorToolbar
     }]);
   }
 
+  if (props.UNSAFE_allowFragmentMark) {
+    preset.add(fragmentMarkPlugin);
+  }
+
   if (featureFlags.enableViewUpdateSubscription) {
     preset.add([viewUpdateSubscriptionPlugin]);
   }
 
   if (featureFlags.codeBidiWarnings) {
-    preset.add(codeBidiWarningPlugin);
+    preset.add([codeBidiWarningPlugin, {
+      appearance: props.appearance
+    }]);
   }
 
   var excludes = new Set();