@atlaskit/editor-common 72.5.0 → 72.6.0

package/dist/es2019/preset/plugin-injection-api.js

@@ -0,0 +1,176 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import isEqual from 'lodash/isEqual';
+import throttle from 'lodash/throttle';
+function hasGetSharedState(plugin) {
+  return typeof plugin.getSharedState === 'function';
+}
+function hasActions(plugin) {
+  return typeof plugin.actions === 'object';
+}
+const DREAM_TARGET_60_FPS = 16;
+/*
+ *
+ * After some investigations, we discovered this is the best ratio for our current Editor: 80ms. That means is five times bigger than the 60fps dream target.
+ *
+ * In the future, once we remove the entire WithPluginState, We may decide to reduce this value.
+ *
+ */
+const THROTTLE_CALLS_FOR_MILLISECONDS = DREAM_TARGET_60_FPS * 5;
+const notifyListenersThrottled = throttle(({
+  newEditorState,
+  oldEditorState,
+  listeners,
+  plugins
+}) => {
+  const isInitialization = !oldEditorState && newEditorState;
+  const callbacks = [];
+  for (let pluginName of listeners.keys()) {
+    const plugin = plugins.get(pluginName);
+    if (!plugin || !hasGetSharedState(plugin)) {
+      continue;
+    }
+    const nextSharedState = plugin.getSharedState(newEditorState);
+    const prevSharedState = !isInitialization && oldEditorState ? plugin.getSharedState(oldEditorState) : undefined;
+    const isSamePluginState = isEqual(prevSharedState, nextSharedState);
+    if (isInitialization || !isSamePluginState) {
+      (listeners.get(pluginName) || new Set()).forEach(callback => {
+        callbacks.push(callback.bind(callback, {
+          nextSharedState,
+          prevSharedState
+        }));
+      });
+    }
+  }
+  if (callbacks.length === 0) {
+    return;
+  }
+  callbacks.forEach(cb => {
+    cb();
+  });
+}, THROTTLE_CALLS_FOR_MILLISECONDS);
+export class PluginsData {}
+class ActionsAPI {
+  createAPI(plugin) {
+    if (!plugin || !hasActions(plugin)) {
+      return {};
+    }
+    return new Proxy(plugin.actions || {}, {
+      get: function (target, prop, receiver) {
+        // We will be able to track perfomance here
+        return Reflect.get(target, prop);
+      }
+    });
+  }
+}
+export class SharedStateAPI {
+  constructor({
+    getEditorState
+  }) {
+    this.getEditorState = getEditorState;
+    this.listeners = new Map();
+  }
+  createAPI(plugin) {
+    if (!plugin) {
+      return {
+        currentState: () => undefined,
+        onChange: sub => {
+          return () => {};
+        }
+      };
+    }
+    const pluginName = plugin.name;
+    return {
+      currentState: () => {
+        const state = this.getEditorState();
+        if (!state || !hasGetSharedState(plugin)) {
+          return undefined;
+        }
+        return plugin.getSharedState(state);
+      },
+      onChange: sub => {
+        const pluginListeners = this.listeners.get(pluginName) || new Set();
+        pluginListeners.add(sub);
+        this.listeners.set(pluginName, pluginListeners);
+        return () => {
+          (this.listeners.get(pluginName) || new Set()).delete(sub);
+        };
+      }
+    };
+  }
+  notifyListeners({
+    newEditorState,
+    oldEditorState,
+    plugins
+  }) {
+    const {
+      listeners
+    } = this;
+    notifyListenersThrottled({
+      newEditorState,
+      oldEditorState,
+      listeners,
+      plugins
+    });
+  }
+  destroy() {
+    this.listeners.clear();
+  }
+}
+export class EditorPluginInjectionAPI {
+  constructor({
+    getEditorState
+  }) {
+    _defineProperty(this, "onEditorViewUpdated", ({
+      newEditorState,
+      oldEditorState
+    }) => {
+      this.sharedStateAPI.notifyListeners({
+        newEditorState,
+        oldEditorState,
+        plugins: this.plugins
+      });
+    });
+    _defineProperty(this, "onEditorPluginInitialized", plugin => {
+      this.addPlugin(plugin);
+    });
+    _defineProperty(this, "addPlugin", plugin => {
+      this.plugins.set(plugin.name, plugin);
+    });
+    _defineProperty(this, "getPluginByName", pluginName => {
+      const plugin = this.plugins.get(pluginName);
+      return plugin;
+    });
+    this.sharedStateAPI = new SharedStateAPI({
+      getEditorState
+    });
+    this.plugins = new Map();
+    this.actionsAPI = new ActionsAPI();
+  }
+  api() {
+    const {
+      sharedStateAPI,
+      actionsAPI,
+      getPluginByName
+    } = this;
+    const externalPlugins = new Proxy({}, {
+      get: function (target, prop, receiver) {
+        const plugin = getPluginByName(prop);
+        if (!plugin) {
+          // eslint-disable-next-line
+          console.error(`Plugin: ${prop} does not exist`);
+          return undefined;
+        }
+        const sharedState = sharedStateAPI.createAPI(plugin);
+        const actions = actionsAPI.createAPI(plugin);
+        const proxyCoreAPI = {
+          sharedState,
+          actions
+        };
+        return proxyCoreAPI;
+      }
+    });
+    return {
+      externalPlugins
+    };
+  }
+}

package/dist/es2019/styles/shared/media-single.js

@@ -32,6 +32,15 @@ const mediaSingleSharedStyle = css`
     margin-top: 12px;
     margin-bottom: 12px;
     clear: both;
+
+    &.image-wrap-left,
+    &.image-wrap-right {
+      clear: none;
+
+      &:first-child {
+        margin-top: 12px;
+      }
+    }
   }
 
   .${richMediaClassName}.image-wrap-right

package/dist/es2019/styles/shared/panel.js

@@ -147,11 +147,11 @@ export const PanelSharedSelectors = {
   removeEmojiIcon: `[aria-label="Remove emoji"]`,
   emojiIcon: `[aria-label="editor-add-emoji"]`,
   selectedEmoji: `[aria-label=":grinning:"]`,
-  addYourOwnEmoji: `[aria-label="Add your own emoji"]`,
+  addYourOwnEmoji: `#add-custom-emoji`,
   emojiNameInCustomEmoji: `[aria-label="Enter a name for the new emoji"]`,
   title: `#editor-title`,
   emojiPopup: `[aria-label="Popup"]`,
-  searchEmoji: `[aria-label="Search emoji"]`,
+  searchEmoji: `[aria-label="Emoji name"]`,
   orangeWarningIcon: `[aria-label=":warning:"]`,
   yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`,
   copyButton: `button[aria-label="Copy"]`

package/dist/es2019/styles/shared/table.js

@@ -8,6 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
+import { tableCellBackgroundStyleOverride } from './tableCell';
 export const tableMarginTop = 24;
 export const tableMarginBottom = 16;
 export const tableMarginTopWithControl = 14;
@@ -33,6 +34,7 @@ export const TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`
 };
 const tableSharedStyle = props => css`
+  ${tableCellBackgroundStyleOverride()}
   .${TableSharedCssClassName.TABLE_CONTAINER} {
     position: relative;
     margin: 0 auto ${tableMarginBottom}px;

package/dist/es2019/styles/shared/tableCell.js

@@ -0,0 +1,27 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { css } from '@emotion/react';
+import { tableBackgroundColorNames } from '@atlaskit/adf-schema';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+// This is used in order to support usage of DS tokens. Table cell background-color
+// is set inline in '@atlaskit/adf-schema' and the color value is stored in ADF so
+// it is not possible to use tokens there without polluting ADF.
+// As table cell backgrounds are set inline, this should not break mobile as
+// hexToEditorBackgroundPaletteColor() outputs a css variable with fallback hex.
+const mapBackgroundColors = () => {
+  let cssString = '';
+  tableBackgroundColorNames.forEach((value, key) => {
+    const paletteColorValue = hexToEditorBackgroundPaletteColor(value);
+    if (paletteColorValue) {
+      cssString += `
+        td[colorname='${key}' i],
+        th[colorname='${key}' i] {
+          background-color: ${paletteColorValue} !important;
+        }
+      `;
+    }
+  });
+  return cssString;
+};
+export const tableCellBackgroundStyleOverride = () => css`
+  ${mapBackgroundColors()}
+`;

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "72.5.0";
+const packageVersion = "72.6.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 class DropList extends Component {
@@ -129,7 +129,8 @@ class DropList extends Component {
       position,
       trigger,
       onPositioned,
-      testId
+      testId,
+      id
     } = this.props;
     let layerContent = isOpen ? jsx("div", {
       css: theme => this.menuWrapper({
@@ -137,7 +138,9 @@ class DropList extends Component {
       }),
       "data-role": "droplistContent",
       "data-testid": testId && `${testId}--content`,
-      ref: this.handleContentRef
+      ref: this.handleContentRef,
+      id: id,
+      role: "menu"
     }, children) : null;
     return jsx("div", {
       css: this.wrapperStyles

package/dist/es2019/ui-color/ColorPalette/Color/styles.js

@@ -25,8 +25,10 @@ export const buttonWrapperStyle = css`
   align-items: center;
   padding: 1px;
   border-radius: 6px;
+  &:focus-within,
+  &:focus,
   &:hover {
-    border-color: ${N50};
+    border-color: ${N50} !important;
   }
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-color/ColorPalette/Palettes/index.js

@@ -1 +1,2 @@
-export { DEFAULT_BORDER_COLOR } from './common';
+export { DEFAULT_BORDER_COLOR } from './common';
+export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages } from './paletteMessagesTokenModeNames';

package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -1,8 +1,7 @@
 import { defineMessages } from 'react-intl-next';
 
-// These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
-// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
-export const newLightPalette = defineMessages({
+// These messages are only to be used when showSomewhatSemanticTooltips is true.
+export const lightTextPaletteTooltipMessages = defineMessages({
   '#FFFFFF': {
     id: 'fabric.theme.white',
     defaultMessage: 'White',
@@ -109,14 +108,145 @@ export const newLightPalette = defineMessages({
     description: 'Name of a color'
   }
 });
-const darkModeWhite = defineMessages({
+const darkModeTextPaletteOverrides = defineMessages({
   '#FFFFFF': {
     id: 'fabric.theme.dark-gray',
     defaultMessage: 'Dark gray',
     description: 'Name of a color'
   }
 });
-export const newDarkPalette = {
-  ...newLightPalette,
-  ...darkModeWhite
+export const darkTextPaletteTooltipMessages = {
+  ...lightTextPaletteTooltipMessages,
+  ...darkModeTextPaletteOverrides
+};
+export const textPaletteTooltipMessages = {
+  light: lightTextPaletteTooltipMessages,
+  dark: darkTextPaletteTooltipMessages
+};
+export const lightBackgroundPaletteTooltipMessages = defineMessages({
+  '#DEEBFF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#E6FCFF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#79E2F2': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#E3FCEF': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#57D9A3': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#FFFAE6': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'Name of a color'
+  },
+  '#FFEBE6': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color.'
+  },
+  '#FF8F73': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#C0B6F2': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#998DD9': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  '#F4F5F7': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#B3BAC5': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  }
+});
+const darkModeBackgroundPaletteOverrides = defineMessages({
+  '#FFFFFF': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'Name of a color'
+  },
+  '#B3BAC5': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  }
+});
+export const darkBackgroundPaletteTooltipMessages = {
+  ...lightBackgroundPaletteTooltipMessages,
+  ...darkModeBackgroundPaletteOverrides
+};
+export const backgroundPaletteTooltipMessages = {
+  light: lightBackgroundPaletteTooltipMessages,
+  dark: darkBackgroundPaletteTooltipMessages
 };

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -7,7 +7,6 @@ import { N0, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
-import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
 import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette } from './utils';
 /**
@@ -32,7 +31,6 @@ function getCheckMarkColor(color, useIconToken) {
 }
 const ColorPalette = props => {
   const {
-    palette,
     cols = DEFAULT_COLOR_PICKER_COLUMNS,
     onClick,
     selectedColor,
@@ -40,10 +38,14 @@ const ColorPalette = props => {
     intl: {
       formatMessage
     },
-    textPalette = false,
-    hexToPaletteColor,
-    useSomewhatSemanticTextColorNames = false
+    paletteOptions
   } = props;
+  const {
+    palette,
+    hexToPaletteColor,
+    showSomewhatSemanticTooltips = false,
+    paletteColorTooltipMessages
+  } = paletteOptions;
   const {
     colorMode: tokenTheme
   } = useThemeObserver();
@@ -62,12 +64,12 @@ const ColorPalette = props => {
     border,
     message
   }, colorIdx) => {
-    if (textPalette === true && useSomewhatSemanticTextColorNames) {
+    if (showSomewhatSemanticTooltips && paletteColorTooltipMessages) {
       if (tokenTheme === 'dark') {
-        message = getColorMessage(newDarkPalette, value.toUpperCase());
+        message = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
       }
       if (tokenTheme === 'light') {
-        message = getColorMessage(newLightPalette, value.toUpperCase());
+        message = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
       }
     }
     return jsx(Color, {

package/dist/es2019/ui-color/index.js

@@ -6,4 +6,5 @@ export { default as colorPaletteMessages } from './ColorPalette/Palettes/palette
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
+export { backgroundPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
 export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -101,20 +101,20 @@ export const MenuArrowKeyNavigationProvider = ({
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
+          handleClose(event);
           if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           }
-          handleClose(event);
           break;
         case 'ArrowRight':
           //Filter out the events from outside the menu
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
+          handleClose(event);
           if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           }
-          handleClose(event);
           break;
         case 'Escape':
           handleClose(event);

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

@@ -24,6 +24,19 @@ export class Dropdown extends PureComponent {
         popupPlacement: placement
       });
     });
+    _defineProperty(this, "handleCloseAndFocus", event => {
+      var _this$state$target, _this$state$target$qu;
+      (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
+      this.handleClose(event);
+    });
+    _defineProperty(this, "handleClose", event => {
+      if (this.props.onOpenChange) {
+        this.props.onOpenChange({
+          isOpen: false,
+          event
+        });
+      }
+    });
     this.state = {
       popupPlacement: ['bottom', 'left']
     };
@@ -42,7 +55,8 @@ export class Dropdown extends PureComponent {
       fitHeight,
       fitWidth,
       zIndex,
-      arrowKeyNavigationProviderOptions
+      arrowKeyNavigationProviderOptions,
+      dropdownListId
     } = this.props;
     return /*#__PURE__*/React.createElement(Popup, {
       target: target,
@@ -55,10 +69,7 @@ export class Dropdown extends PureComponent {
       zIndex: zIndex
     }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, _extends({}, arrowKeyNavigationProviderOptions, {
       closeOnTab: true,
-      handleClose: event => onOpenChange && onOpenChange({
-        isOpen: false,
-        event
-      })
+      handleClose: this.handleCloseAndFocus
     }), /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -68,7 +79,8 @@ export class Dropdown extends PureComponent {
       isOpen: true,
       onOpenChange: onOpenChange,
       position: popupPlacement.join(' '),
-      shouldFitContainer: true
+      shouldFitContainer: true,
+      id: dropdownListId
     }, children))));
   }
   render() {

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

@@ -113,8 +113,8 @@ export default class DropdownMenuWrapper extends PureComponent {
     });
     _defineProperty(this, "handleCloseAndFocus", () => {
       var _this$state$target, _this$state$target$qu;
-      this.handleClose();
       (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
+      this.handleClose();
     });
     _defineProperty(this, "handleClose", () => {
       if (this.props.onOpenChange) {

package/dist/es2019/utils/breakout.js

@@ -1,4 +1,4 @@
-import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 import { mapBreakpointToLayoutMaxWidth } from '../ui/BaseTheme';
 import { getBreakpoint } from '../ui/WidthProvider';
 import { parsePx } from './dom';
@@ -74,11 +74,15 @@ export function calculateBreakoutStyles({
     // it breaks things like sticky headers.
     //
     // It can also cause bluriness for some child content (such as iframes)
+
     return {
       type: 'line-length-unknown',
       width: breakoutWidth,
-      transform: 'translateX(-50%)',
-      marginLeft: '50%'
+      minWidth: breakoutWidthPx,
+      display: 'flex',
+      justifyContent: 'center',
+      transform: 'none',
+      transition: `min-width 0.5s ${akEditorSwoopCubicBezier}`
     };
   }
 
@@ -87,11 +91,15 @@ export function calculateBreakoutStyles({
   // full-page appearance modes. There is a slight delay before
   // the widthState is updated.
   // During this period -- the marginLeftPx will be incorrect.
-  const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+  // const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+
   return {
     type: 'line-length-known',
     width: breakoutWidth,
-    marginLeft: `${marginLeftPx}px`
+    minWidth: breakoutWidthPx,
+    transition: `min-width 0.5s ${akEditorSwoopCubicBezier}`,
+    transform: `translateX(-50%)`,
+    marginLeft: `50%`
   };
 }
 export function calcBreakoutWidthPx(mode, widthStateWidth) {

package/dist/es2019/utils/index.js

@@ -6,7 +6,7 @@ export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskCon
 export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition } from './editor-core-utils';
 export { withImageLoader } from './imageLoader';
 export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts, calculateBreakoutStyles, calcBreakoutWidthPx } from './breakout';
-export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent } from './nodes';
+export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent, isMediaNode, isNodeBeforeMediaNode } from './nodes';
 export { pluginFactory } from './plugin-state-factory';
 export { getFragmentBackingArray, mapFragment, mapSlice, flatmap, mapChildren } from './slice';
 export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, closest, closestElement, parsePx, mapElem, maphElem } from './dom';
@@ -35,5 +35,4 @@ export { useComponentRenderTracking } from './performance/hooks/use-component-re
 export { isOutdatedBrowser } from './outdated-browsers';
 export { isReferencedSource, removeConnectedNodes, getChildrenInfo, getNodeName } from './referentiality';
 export { sendLogs } from './sendLogs';
-export { Builder } from './builder';
 export { getItemCounterDigitsSize, getOrderFromOrderedListNode, resolveOrder } from './list';