@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N400, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 
-export const Input = styled.input`
+export const panelTextInput = css`
   input& {
     background: transparent;
     border: 0;
@@ -13,7 +13,6 @@ export const Input = styled.input`
     font-size: ${relativeFontSizeToBase16(13)};
     line-height: 20px;
     padding: 0;
-    ${props => props.width ? `width: ${props.width}px` : ''};
     min-width: 145px;
 
     /* Hides IE10+ built-in [x] clear input button */
@@ -30,4 +29,9 @@ export const Input = styled.input`
       opacity: 0.5;
     }
   }
+`;
+export const panelTextInputWithCustomWidth = width => css`
+  input& {
+    width: ${width}px;
+  }
 `;

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

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ACTION_SUBJECT } from '../../plugins/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
-const PluginsComponentsWrapper = styled.div`
+const pluginsComponentsWrapper = css`
   display: flex;
 `;
 export default class PluginSlot extends React.Component {
@@ -89,10 +91,12 @@ export default class PluginSlot extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.PLUGIN_SLOT,
       fallbackComponent: null
-    }, /*#__PURE__*/React.createElement(PluginsComponentsWrapper, null, items.map((component, key) => {
+    }, jsx("div", {
+      css: pluginsComponentsWrapper
+    }, items.map((component, key) => {
       const props = {
         key
       };

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/Toolbar/ToolbarWithSizeDetector.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import { useElementWidth } from './hooks';
 import { widthToToolbarSize, toolbarSizeToWidth } from './toolbar-size';
 import { Toolbar } from './Toolbar';
 import { ToolbarSize } from './types';
-const StyledToolBar = styled.div`
+const toolbar = css`
   width: 100%;
-  min-width: ${({
-  minWidth
-}) => minWidth};
   position: relative;
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     grid-column: 1 / 2;
@@ -27,14 +26,18 @@ export const ToolbarWithSizeDetector = props => {
     skip: typeof width !== 'undefined'
   });
   const toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : widthToToolbarSize(width || elementWidth, props.appearance);
-  const toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
-  return /*#__PURE__*/React.createElement(StyledToolBar, {
-    minWidth: props.hasMinWidth ? `${toolbarMinWidth}px` : '254px'
-  }, /*#__PURE__*/React.createElement(WidthObserver, {
+  const toolbarStyle = useMemo(() => {
+    const toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
+    const minWidth = `min-width: ${props.hasMinWidth ? toolbarMinWidth : '254'}px`;
+    return [toolbar, minWidth];
+  }, [props.appearance, props.hasMinWidth]);
+  return jsx("div", {
+    css: toolbarStyle
+  }, jsx(WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? /*#__PURE__*/React.createElement(Toolbar, _extends({}, props, {
+  }), props.editorView && toolbarSize ? jsx(Toolbar, _extends({}, props, {
     toolbarSize: toolbarSize
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : jsx("div", {
     ref: ref
   }));
 };

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

@@ -1,12 +1,13 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import styled from 'styled-components';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import Button from './styles';
 import { ACTION_SUBJECT, EVENT_TYPE, ACTION } from '../../plugins/analytics/types/enums';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../plugins/analytics/types/toolbar-button';
 export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-const ButtonWrapper = styled.div`
+const buttonWrapper = css`
   display: flex;
   height: 100%;
 `;
@@ -57,7 +58,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
-  const button = /*#__PURE__*/React.createElement(Button, {
+  const button = jsx(Button, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -83,10 +84,12 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
 
   const tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/React.createElement(ButtonWrapper, null, button));
+  }, jsx("div", {
+    css: buttonWrapper
+  }, button));
 });
 export default ToolbarButton;

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -9,7 +11,7 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import ToolbarButton from '../ToolbarButton';
 import withOuterListeners from '../with-outer-listeners';
-import { Wrapper, ButtonContent, ConfirmationPopup, ConfirmationText, ConfirmationHeader, ConfirmationImg } from './styles';
+import { wrapper, buttonContent, confirmationPopup, confirmationText, confirmationHeader, confirmationImg } from './styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../plugins/analytics';
 import { createDispatch } from '../../event-dispatcher';
 import { openFeedbackDialog } from '../../plugins/feedback-dialog';
@@ -131,15 +133,19 @@ export default class ToolbarFeedback extends PureComponent {
       popupsBoundariesElement,
       popupsScrollableElement
     } = this.props;
-    const iconBefore = this.state.jiraIssueCollectorScriptLoading ? /*#__PURE__*/React.createElement(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
+    const iconBefore = this.state.jiraIssueCollectorScriptLoading ? jsx(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
 
-    return this.hasJquery() ? /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return this.hasJquery() ? jsx("div", {
+      css: wrapper
+    }, jsx(ToolbarButton, {
       ref: this.handleRef,
       iconBefore: iconBefore,
       onClick: this.collectFeedback,
       selected: false,
       spacing: "compact"
-    }, /*#__PURE__*/React.createElement(ButtonContent, null, "Feedback")), this.state.showOptOutOption && /*#__PURE__*/React.createElement(PopupWithOutsideListeners, {
+    }, jsx("span", {
+      css: buttonContent
+    }, "Feedback")), this.state.showOptOutOption && jsx(PopupWithOutsideListeners, {
       target: this.state.target,
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
@@ -148,12 +154,19 @@ export default class ToolbarFeedback extends PureComponent {
       fitWidth: POPUP_WIDTH,
       handleClickOutside: this.toggleShowOptOutOption,
       handleEscapeKeydown: this.toggleShowOptOutOption
-    }, /*#__PURE__*/React.createElement(ConfirmationPopup, null, /*#__PURE__*/React.createElement(ConfirmationHeader, null, /*#__PURE__*/React.createElement(ConfirmationImg, {
+    }, jsx("div", {
+      css: confirmationPopup
+    }, jsx("div", {
+      css: confirmationHeader
+    }, jsx("img", {
+      css: confirmationImg,
       src: EDITOR_IMAGE_URL
-    })), /*#__PURE__*/React.createElement(ConfirmationText, null, /*#__PURE__*/React.createElement("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), /*#__PURE__*/React.createElement("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    })), jsx("div", {
+      css: confirmationText
+    }, jsx("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), jsx("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), jsx(ButtonGroup, null, jsx(Button, {
       appearance: "primary",
       onClick: this.openFeedbackPopup
-    }, "Give feedback"), /*#__PURE__*/React.createElement(Button, {
+    }, "Give feedback"), jsx(Button, {
       appearance: "default",
       onClick: this.openLearnMorePage
     }, "Learn more")))))) : null;

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

@@ -1,20 +1,18 @@
-import styled from 'styled-components';
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export const ButtonContent = styled.span`
+export const buttonContent = css`
   display: flex;
   height: 24px;
   line-height: 24px;
   min-width: 70px;
 `;
-export const Wrapper = styled.span`
+export const wrapper = css`
   display: flex;
-  margin-right: ${({
-  width
-}) => !width || width === 'large' ? 0 : gridSize()}px;
+  margin-right: 0;
 `;
-export const ConfirmationPopup = styled.div`
+export const confirmationPopup = css`
   background: #fff;
   border-radius: ${borderRadius()}px;
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
@@ -26,7 +24,7 @@ export const ConfirmationPopup = styled.div`
   height: 410px;
   width: 280px;
 `;
-export const ConfirmationText = styled.div`
+export const confirmationText = css`
   font-size: ${relativeFontSizeToBase16(14)};
   word-spacing: 4px;
   line-height: 22px;
@@ -43,13 +41,13 @@ export const ConfirmationText = styled.div`
     margin-bottom: 20px;
   }
 `;
-export const ConfirmationHeader = styled.div`
+export const confirmationHeader = css`
   background-color: ${P400};
   height: 100px;
   width: 100%;
   display: inline-block;
 `;
-export const ConfirmationImg = styled.img`
+export const confirmationImg = css`
   width: 100px;
   display: block;
   margin: 25px auto 0 auto;

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/ui/styles.js

@@ -1,9 +1,9 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize, borderRadius } from '@atlaskit/theme/constants';
 import { N30, N100 } from '@atlaskit/theme/colors';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 const akGridSize = gridSize() + 'px';
-export const ButtonGroup = styled.span`
+export const buttonGroupStyle = css`
   display: inline-flex;
   align-items: center;
 
@@ -11,14 +11,14 @@ export const ButtonGroup = styled.span`
     display: flex;
   }
 `;
-export const Separator = styled.span`
+export const separatorStyles = css`
   background: ${N30};
   width: 1px;
   height: 24px;
   display: inline-block;
   margin: 0 8px;
 `;
-export const Wrapper = styled.span`
+export const wrapperStyle = css`
   display: flex;
   align-items: center;
 
@@ -30,34 +30,38 @@ export const Wrapper = styled.span`
   > div > div {
     display: flex;
   }
-  margin-left: ${({
-  isSmall
-}) => isSmall ? 4 : 0}px;
-  min-width: ${({
-  isSmall
-}) => isSmall ? '40px' : 'auto'};
+
+  margin-left: 0;
+  min-width: auto;
+`;
+export const wrapperSmallStyle = css`
+  margin-left: 4px;
+  min-width: 40px;
 `;
-export const ExpandIconWrapper = styled.span`
+export const expandIconWrapperStyle = css`
   margin-left: -8px;
 `;
-export const TriggerWrapper = styled.div`
+export const triggerWrapperStyles = css`
   display: flex;
 `;
-export const MenuWrapper = Wrapper;
-export const ButtonContent = styled.span`
+export const buttonContentStyle = css`
   display: flex;
   min-width: 80px;
   align-items: center;
   overflow: hidden;
   justify-content: center;
   flex-direction: column;
-  padding: 0 ${props => props.spacing === 'none' ? '8px' : '6px'};
+  padding: 6px;
+`;
+export const buttonContentReducedSpacingStyle = css`
+  padding: 8px;
 `; // Taken from the style of inline dialog components
 
 export const dropShadow = css`
   box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),
     0 4px 8px -2px rgba(9, 30, 66, 0.25);
-`;
+`; // TODO change to use emotion css
+
 export const scrollbarStyles = `
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
@@ -83,7 +87,7 @@ export const scrollbarStyles = `
     background-color: rgba(0, 0, 0, 0.4);
   }
 `;
-export const Shortcut = styled.div`
+export const shortcutStyle = css`
   background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */
   color: ${N100};
   border-radius: ${borderRadius()}px;
@@ -95,11 +99,11 @@ export const Shortcut = styled.div`
     display: none;
   }
 `;
-export const ClickSelectWrapper = styled.span`
+export const clickSelectWrapperStyle = css`
   user-select: all;
 `;
-export const CellColourPreview = styled.div`
+export const cellColourPreviewStyles = selectedColor => css`
   &::before {
-    background: ${props => props.selectedColor};
+    background: ${selectedColor};
   }
 `;

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/utils/prosemirror/autojoin.js

@@ -0,0 +1,70 @@
+import { canJoin } from 'prosemirror-transform';
+/**
+ * Checks whether two adjacent nodes can be joined. If so, the document
+ * will be updated to join those nodes. If not, the original transaction
+ * remains untouched.
+ *
+ * Nodes are considered joinable if the `isJoinable` predicate returns true or,
+ * if an array of strings was passed, if their node type name is in that array.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+export function autoJoinTr(tr, isJoinable) {
+  if (Array.isArray(isJoinable)) {
+    let types = isJoinable;
+
+    isJoinable = node => types.indexOf(node.type.name) > -1;
+  }
+
+  const ranges = [];
+
+  for (let i = 0; i < tr.mapping.maps.length; i++) {
+    const map = tr.mapping.maps[i];
+
+    for (let j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach((_s, _e, from, to) => ranges.push(from, to));
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  const joinable = [];
+
+  for (let i = 0; i < ranges.length; i += 2) {
+    const from = ranges[i];
+    const to = ranges[i + 1];
+    const $from = tr.doc.resolve(from);
+    const depth = $from.sharedDepth(to);
+    const parent = $from.node(depth);
+
+    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      const after = parent.maybeChild(index);
+
+      if (!after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        const before = parent.child(index - 1);
+
+        if (before.type === after.type && isJoinable(before, after)) {
+          joinable.push(pos);
+        }
+      }
+
+      pos += after.nodeSize;
+    }
+  } // Join the joinable points
+
+
+  joinable.sort((a, b) => a - b);
+
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(tr.doc, joinable[i])) {
+      tr.join(joinable[i]);
+    }
+  }
+}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "162.0.2";
+export const version = "164.0.1";
 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.2",
+	"version": "164.0.1",
 	"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';