@atlaskit/editor-core 162.0.1 → 163.0.0

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { memo, useState, useCallback, useEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled, { css } from 'styled-components';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '../../../plugins/analytics';
 import ElementList from './ElementList/ElementList';
@@ -10,6 +12,101 @@ import ElementSearch from './ElementSearch';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
 import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
+const wrapper = css`
+  width: 100%;
+  max-height: inherit;
+  overflow: hidden;
+`;
+const baseBrowserContainerStyles = css`
+  display: flex;
+  height: 100%;
+  /** Needed for Safari to work with current css.
+  * 100% heights wont work and
+  * will default to auto if one of the containers doesn't have a specified height in pixels.
+  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
+  */
+
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+
+  /* stylelint-disable-next-line */
+  min-height: -webkit-fill-available;
+`;
+const mobileElementBrowserContainer = css`
+  ${baseBrowserContainerStyles};
+  flex-direction: column;
+`;
+const elementBrowserContainer = css`
+  ${baseBrowserContainerStyles};
+  flex-direction: row;
+`;
+const baseSidebarStyles = css`
+  display: flex;
+  flex-direction: column;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+const mobileSideBar = css`
+  ${baseSidebarStyles};
+  flex: 0 0 ${INLINE_SIDEBAR_HEIGHT};
+  padding: 12px 12px 0 12px;
+`;
+const mobileSideBarShowCategories = css`
+  flex: 0 0 auto;
+`;
+const sideBar = css`
+  ${baseSidebarStyles};
+  flex: 0 0 'auto';
+`;
+const sideBarShowCategories = css`
+  ${baseSidebarStyles};
+  flex: 0 0 ${SIDEBAR_WIDTH};
+`;
+const sidebarHeading = css`
+  flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
+  display: inline-flex;
+  align-items: center;
+  padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
+  font-weight: 700;
+`;
+const mobileMainContent = css`
+  flex: 1 1 auto;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+  height: 100%;
+`;
+const mainContent = css`
+  ${mobileMainContent}
+  margin-left: ${GRID_SIZE * 2}px;
+  // Needed for safari
+  height: auto;
+`;
+const searchContainer = css`
+  padding-bottom: ${GRID_SIZE * 2}px;
+`;
+const mobileCategoryListWrapper = css`
+  display: flex;
+  overflow-x: auto;
+
+  padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
+  min-height: ${GRID_SIZE * 4}px;
+
+  overflow: -moz-scrollbars-none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+`;
+const categoryListWrapper = css`
+  ${mobileCategoryListWrapper}
+  padding: 0;
+  margin-top: ${GRID_SIZE * 3}px;
+  flex-direction: column;
+`;
 
 function StatelessElementBrowser(props) {
   const {
@@ -75,9 +172,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return jsx("div", {
+    css: wrapper,
     "data-testid": "element-browser"
-  }, /*#__PURE__*/React.createElement(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? /*#__PURE__*/React.createElement(MobileBrowser, _extends({}, props, {
+  }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -86,7 +184,7 @@ function StatelessElementBrowser(props) {
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterKeyPress,
     onKeyDown: onKeyDown
-  })) : /*#__PURE__*/React.createElement(DesktopBrowser, _extends({}, props, {
+  })) : jsx(DesktopBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -98,13 +196,6 @@ function StatelessElementBrowser(props) {
   })));
 }
 
-const Wrapper = styled.div`
-  width: 100%;
-  max-height: inherit;
-  overflow: hidden;
-`;
-Wrapper.displayName = 'Wrapper';
-
 function MobileBrowser({
   showCategories,
   showSearch,
@@ -127,25 +218,29 @@ function MobileBrowser({
   createAnalyticsEvent,
   emptyStateHandler
 }) {
-  return /*#__PURE__*/React.createElement(MobileElementBrowserContainer, {
+  return jsx("div", {
+    css: mobileElementBrowserContainer,
     onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
-  }, /*#__PURE__*/React.createElement(MobileSideBar, {
-    showCategories: showCategories
-  }, showSearch && /*#__PURE__*/React.createElement(ElementSearch, {
+  }, jsx("div", {
+    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
+  }, showSearch && jsx(ElementSearch, {
     onSearch: onSearch,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  }), showCategories && /*#__PURE__*/React.createElement(MobileCategoryListWrapper, {
+  }), showCategories && jsx("nav", {
+    css: mobileCategoryListWrapper,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(CategoryList, {
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory
-  }))), /*#__PURE__*/React.createElement(MobileMainContent, null, /*#__PURE__*/React.createElement(ElementList, {
+  }))), jsx("div", {
+    css: mobileMainContent
+  }, jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -182,29 +277,39 @@ function DesktopBrowser({
   createAnalyticsEvent,
   emptyStateHandler
 }) {
-  return /*#__PURE__*/React.createElement(ElementBrowserContainer, {
+  return jsx("div", {
+    css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
-  }, showCategories && /*#__PURE__*/React.createElement(SideBar, {
-    showCategories: true
-  }, /*#__PURE__*/React.createElement(SidebarHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, showCategories && jsx("div", {
+    css: showCategories ? sideBarShowCategories : sideBar
+  }, jsx("h2", {
+    css: sidebarHeading,
+    "data-testid": "sidebar-heading"
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
-  })), /*#__PURE__*/React.createElement(CategoryListWrapper, null, /*#__PURE__*/React.createElement(CategoryList, {
+  })), jsx("nav", {
+    css: categoryListWrapper
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
     createAnalyticsEvent: createAnalyticsEvent
-  }))), /*#__PURE__*/React.createElement(MainContent, {
+  }))), jsx("div", {
+    css: mainContent,
     onKeyPress: onKeyPress,
-    onKeyDown: onKeyDown
-  }, showSearch && /*#__PURE__*/React.createElement(SearchContainer, null, /*#__PURE__*/React.createElement(ElementSearch, {
+    onKeyDown: onKeyDown,
+    "data-testid": "main-content"
+  }, showSearch && jsx("div", {
+    css: searchContainer
+  }, jsx(ElementSearch, {
     onSearch: onSearch,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  })), /*#__PURE__*/React.createElement(ElementList, {
+  })), jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -219,98 +324,6 @@ function DesktopBrowser({
   })));
 }
 
-const baseBrowserContainerStyles = css`
-  display: flex;
-  height: 100%;
-  /** Needed for Safari to work with current css.
-  * 100% heights wont work and
-  * will default to auto if one of the containers doesn't have a specified height in pixels.
-  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
-  */
-  min-height: -webkit-fill-available;
-`;
-const MobileElementBrowserContainer = styled.div`
-  ${baseBrowserContainerStyles};
-  flex-direction: column;
-`;
-MobileElementBrowserContainer.displayName = 'MobileElementBrowserContainer';
-const ElementBrowserContainer = styled.div`
-  ${baseBrowserContainerStyles};
-  flex-direction: row;
-`;
-const baseSidebarStyles = css`
-  display: flex;
-  flex-direction: column;
-
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-const MobileSideBar = styled.div`
-  ${baseSidebarStyles};
-  flex: 0 0
-    ${({
-  showCategories
-}) => showCategories ? 'auto' : INLINE_SIDEBAR_HEIGHT};
-  padding: 12px 12px 0 12px;
-`;
-const SideBar = styled.div`
-  ${baseSidebarStyles};
-  flex: 0 0
-    ${({
-  showCategories
-}) => showCategories ? SIDEBAR_WIDTH : 'auto'};
-`;
-const SidebarHeading = styled.h2`
-  flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
-  display: inline-flex;
-  align-items: center;
-  padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
-  font-weight: 700;
-`;
-/**
- *  In enzyme styled components show up as styled.element
- *  and if we don't wanna export SidebarHeading just for testing.
- *  https://github.com/styled-components/styled-components/issues/896
- */
-
-SidebarHeading.displayName = 'SidebarHeading';
-const MobileMainContent = styled.div`
-  flex: 1 1 auto;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-  height: 100%;
-`;
-const MainContent = styled(MobileMainContent)`
-  margin-left: ${GRID_SIZE * 2}px;
-  // Needed for safari
-  height: auto;
-`;
-MainContent.displayName = 'MainContent';
-const SearchContainer = styled.div`
-  padding-bottom: ${GRID_SIZE * 2}px;
-`;
-const MobileCategoryListWrapper = styled.nav`
-  display: flex;
-  overflow-x: auto;
-
-  padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
-  min-height: ${GRID_SIZE * 4}px;
-
-  overflow: -moz-scrollbars-none;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-`;
-const CategoryListWrapper = styled(MobileCategoryListWrapper)`
-  padding: 0;
-  margin-top: ${GRID_SIZE * 3}px;
-  flex-direction: column;
-`;
 const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
   source: 'ElementBrowser'
 })(withAnalyticsEvents()(StatelessElementBrowser)));

package/dist/es2019/ui/ElementBrowser/hooks/use-container-width.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { memo, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 /**
  *
@@ -27,6 +28,9 @@ import { WidthObserver } from '@atlaskit/width-detector';
  *
  */
 
+const widthObserverWrapper = css`
+  position: relative;
+`;
 export default function useContainerWidth() {
   const [containerWidth, setContainerWidth] = useState(0);
   const ref = useRef(null);
@@ -40,10 +44,11 @@ export default function useContainerWidth() {
     }
   }, [ref]);
   const ContainerWidthMonitor = /*#__PURE__*/memo(() => {
-    return /*#__PURE__*/React.createElement(WidthObserverWrapper, {
-      innerRef: ref,
+    return jsx("div", {
+      css: widthObserverWrapper,
+      ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: setContainerWidth
     }));
   });
@@ -51,8 +56,4 @@ export default function useContainerWidth() {
     containerWidth,
     ContainerWidthMonitor
   };
-}
-const WidthObserverWrapper = styled.div`
-  position: relative;
-`;
-WidthObserverWrapper.displayName = 'WidthObserverWrapper';
+}

package/dist/es2019/ui/FloatingToolbar/styles.js

@@ -4,7 +4,8 @@ import { N0 } from '@atlaskit/theme/colors';
 import { dropShadow } from '../styles';
 export const Container = styled.div`
   border-radius: ${borderRadius()}px;
-  ${dropShadow} display: flex;
+  ${dropShadow}
+  display: flex;
   align-items: center;
   box-sizing: border-box;
   padding: 4px 8px;

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

@@ -1,17 +1,17 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
 import LinkSearchListItem from './LinkSearchListItem';
-const ListContainer = styled.div`
+const listContainer = css`
   padding-top: 0;
 `;
-const SpinnerContainer = styled.div`
+const spinnerContainer = css`
   text-align: center;
   min-height: 80px;
   margin-top: 30px;
 `;
-export const List = styled.ul`
+export const linkSearchList = css`
   padding: 0;
   list-style: none;
 `;
@@ -33,11 +33,12 @@ export default class LinkSearchList extends PureComponent {
     let loadingContent;
 
     if (items && items.length > 0) {
-      itemsContent = /*#__PURE__*/React.createElement(List, {
+      itemsContent = jsx("ul", {
+        css: linkSearchList,
         id: id,
         role: role,
         "aria-controls": ariaControls
-      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
         item: item,
@@ -51,12 +52,16 @@ export default class LinkSearchList extends PureComponent {
     }
 
     if (isLoading) {
-      loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+      loadingContent = jsx("div", {
+        css: spinnerContainer
+      }, jsx(Spinner, {
         size: "medium"
       }));
     }
 
-    return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+    return jsx("div", {
+      css: listContainer
+    }, itemsContent, loadingContent);
   }
 
 }

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _class, _temp;
+var _class;
 
 import React from 'react';
 import { createPortal, unstable_renderSubtreeIntoContainer, unmountComponentAtNode } from 'react-dom';
@@ -156,7 +156,7 @@ const dummyAnalyticsContext = {
   getAtlaskitAnalyticsEventHandlers() {}
 
 };
-const AnalyticsContextWrapper = (_temp = _class = class AnalyticsContextWrapper extends React.Component {
+const AnalyticsContextWrapper = (_class = class AnalyticsContextWrapper extends React.Component {
   render() {
     const {
       value
@@ -170,4 +170,4 @@ const AnalyticsContextWrapper = (_temp = _class = class AnalyticsContextWrapper
 
 }, _defineProperty(_class, "contextTypes", {
   contextAdapter: PropTypes.object
-}), _temp);
+}), _class);

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

@@ -1,8 +1,8 @@
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export const Wrapper = styled.div`
+export const wrapperStyle = props => css`
   & > div {
-    ${MediaSingleDimensionHelper};
+    ${MediaSingleDimensionHelper(props)};
     position: relative;
     clear: both;
 

package/dist/es2019/ui/Toolbar/ToolbarInner.js

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-const ToolbarComponentsWrapper = styled.div`
+const toolbarComponentsWrapper = css`
   display: flex;
 
   @media (max-width: ${akEditorMobileMaxWidth}px) {
@@ -35,7 +36,9 @@ export class ToolbarInner extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ToolbarComponentsWrapper, null, items.map((component, key) => {
+    return jsx("div", {
+      css: toolbarComponentsWrapper
+    }, items.map((component, key) => {
       const props = {
         key
       };

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
 const pulseBackground = keyframes`
   50% {
@@ -18,13 +20,20 @@ const pulseBackgroundReverse = keyframes`
     background-color: ${R100};
   }
 `;
-const Wrapper = styled.div`
+const flashWrapper = css`
   &.-flash > div {
     animation: 0.25s ease-in-out ${pulseBackgroundReverse};
   }
 
   & > div {
-    animation: ${props => props.animate ? `.25s ease-in-out ${pulseBackground}` : 'none'};
+    animation: 'none';
+  }
+`;
+const flashWrapperAnimated = css`
+  ${flashWrapper}
+
+  & > div {
+    animation: 0.25s ease-in-out ${pulseBackground};
   }
 `;
 export default class WithFlash extends React.Component {
@@ -40,9 +49,9 @@ export default class WithFlash extends React.Component {
       children
     } = this.props;
     this.toggle = animate && !this.toggle;
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      className: this.toggle ? '-flash' : '',
-      animate: animate
+    return jsx("div", {
+      css: animate ? flashWrapperAnimated : flashWrapper,
+      className: this.toggle ? '-flash' : ''
     }, children);
   }
 

package/dist/es2019/utils/insert.js

@@ -47,6 +47,8 @@ const shouldSplit = (nodeType, schemaNodes) => {
 };
 
 export const safeInsert = (content, position) => tr => {
+  var _tr$selection$$from$n;
+
   const {
     nodes
   } = tr.doc.type.schema;
@@ -85,6 +87,14 @@ export const safeInsert = (content, position) => tr => {
     }
   }
 
+  const grandParentType = (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type;
+  const parentType = tr.selection.$from.parent.type;
+
+  if (!lookDirection && !shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, content)) {
+    // node to be inserted is an invalid child of selection so insert below selected node
+    return pmSafeInsert(content, tr.selection.from)(tr);
+  }
+
   if (!lookDirection) {
     // fallback to consumer for now
     return null;
@@ -177,4 +187,14 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
   }
 
   return tr;
+}; // ED-14584: Util to check if the current node is a paragraph & the content being
+// inserted is a valid child of the grandparent node
+// In this case, the node being inserted to should split
+
+export const shouldSplitSelectedNodeOnNodeInsertion = (parentNodeType, grandParentNodeType, content) => {
+  if (parentNodeType.name === 'paragraph' && grandParentNodeType.validContent(Fragment.from(content))) {
+    return true;
+  }
+
+  return false;
 };

package/dist/es2019/utils/performance/components/RenderTracking.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
+import { EVENT_TYPE } from '../../../plugins/analytics';
+export function RenderTracking(props) {
+  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: ({
+      renderCount,
+      propsDifference
+    }) => {
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        payload: {
+          action: props.action,
+          actionSubject: props.actionSubject,
+          attributes: {
+            count: renderCount,
+            propsDifference: propsDifference
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        }
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "162.0.1";
+export const version = "163.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": "162.0.1",
+	"version": "163.0.0",
 	"sideEffects": false
 }

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

@@ -21,7 +21,7 @@ import uuid from 'uuid';
 import memoizeOne from 'memoize-one';
 import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
-import { IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../plugins/analytics';
 import { editorAnalyticsChannel } from '../plugins/analytics/consts';
 import { getFeatureFlags } from '../plugins/feature-flags-context';
@@ -248,7 +248,7 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(IntlNextErrorBoundary, null, this.props.children);
+      return /*#__PURE__*/React.createElement(IntlErrorBoundary, null, this.props.children);
     }
   }]);
 

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

@@ -26,7 +26,7 @@ import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlask
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { processRawValue } from '../utils';
 import { freezeUnsafeTransactionProperties } from '../utils/performance/safer-transactions';
-import { RenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../utils/nodes';
 import createPluginList from './create-plugins-list';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE, getAnalyticsEventsFromTransaction, PLATFORMS } from '../plugins/analytics';