@atlaskit/editor-core 162.0.1 → 163.0.0

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

@@ -1,12 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
+/** @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';
@@ -15,6 +16,21 @@ 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';
+var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
+var baseBrowserContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
+var mobileElementBrowserContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
+var elementBrowserContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
+var baseSidebarStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
+var mobileSideBar = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: 12px 12px 0 12px;\n"])), baseSidebarStyles, INLINE_SIDEBAR_HEIGHT);
+var mobileSideBarShowCategories = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+var sideBar = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
+var sideBarShowCategories = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, SIDEBAR_WIDTH);
+var sidebarHeading = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT);
+var mobileMainContent = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
+var mainContent = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, GRID_SIZE * 2);
+var searchContainer = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding-bottom: ", "px;\n"])), GRID_SIZE * 2);
+var mobileCategoryListWrapper = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), GRID_SIZE, GRID_SIZE * 2, GRID_SIZE * 4);
+var categoryListWrapper = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, GRID_SIZE * 3);
 
 function StatelessElementBrowser(props) {
   var items = props.items,
@@ -83,9 +99,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,
@@ -94,7 +111,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,
@@ -106,9 +123,6 @@ function StatelessElementBrowser(props) {
   })));
 }
 
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
-Wrapper.displayName = 'Wrapper';
-
 function MobileBrowser(_ref) {
   var showCategories = _ref.showCategories,
       showSearch = _ref.showSearch,
@@ -130,25 +144,29 @@ function MobileBrowser(_ref) {
       searchTerm = _ref.searchTerm,
       createAnalyticsEvent = _ref.createAnalyticsEvent,
       emptyStateHandler = _ref.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,
@@ -184,29 +202,39 @@ function DesktopBrowser(_ref2) {
       searchTerm = _ref2.searchTerm,
       createAnalyticsEvent = _ref2.createAnalyticsEvent,
       emptyStateHandler = _ref2.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,
@@ -221,33 +249,6 @@ function DesktopBrowser(_ref2) {
   })));
 }
 
-var baseBrowserContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n  min-height: -webkit-fill-available;\n"])));
-var MobileElementBrowserContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
-MobileElementBrowserContainer.displayName = 'MobileElementBrowserContainer';
-var ElementBrowserContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
-var baseSidebarStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var MobileSideBar = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0\n    ", ";\n  padding: 12px 12px 0 12px;\n"])), baseSidebarStyles, function (_ref3) {
-  var showCategories = _ref3.showCategories;
-  return showCategories ? 'auto' : INLINE_SIDEBAR_HEIGHT;
-});
-var SideBar = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0\n    ", ";\n"])), baseSidebarStyles, function (_ref4) {
-  var showCategories = _ref4.showCategories;
-  return showCategories ? SIDEBAR_WIDTH : 'auto';
-});
-var SidebarHeading = styled.h2(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT);
-/**
- *  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';
-var MobileMainContent = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
-var MainContent = styled(MobileMainContent)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), GRID_SIZE * 2);
-MainContent.displayName = 'MainContent';
-var SearchContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding-bottom: ", "px;\n"])), GRID_SIZE * 2);
-var MobileCategoryListWrapper = styled.nav(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), GRID_SIZE, GRID_SIZE * 2, GRID_SIZE * 4);
-var CategoryListWrapper = styled(MobileCategoryListWrapper)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), GRID_SIZE * 3);
 var MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
   source: 'ElementBrowser'
 })(withAnalyticsEvents()(StatelessElementBrowser)));

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

@@ -1,10 +1,11 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
+/** @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';
 /**
  *
@@ -32,6 +33,7 @@ import { WidthObserver } from '@atlaskit/width-detector';
  *
  */
 
+var widthObserverWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export default function useContainerWidth() {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47,10 +49,11 @@ export default function useContainerWidth() {
     }
   }, [ref]);
   var ContainerWidthMonitor = /*#__PURE__*/memo(function () {
-    return /*#__PURE__*/React.createElement(WidthObserverWrapper, {
-      innerRef: ref,
+    return jsx("div", {
+      css: widthObserverWrapper,
+      ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: setContainerWidth
     }));
   });
@@ -58,6 +61,4 @@ export default function useContainerWidth() {
     containerWidth: containerWidth,
     ContainerWidthMonitor: ContainerWidthMonitor
   };
-}
-var WidthObserverWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-WidthObserverWrapper.displayName = 'WidthObserverWrapper';
+}

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

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
 import { dropShadow } from '../styles';
-export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  ", " display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), dropShadow, N0, function (_ref) {
+export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), dropShadow, N0, function (_ref) {
   var height = _ref.height;
   return height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: ", "px;\n        "])), height) : '';
 });

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

@@ -11,14 +11,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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';
-var ListContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
-var SpinnerContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
-export var List = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+var listContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+var spinnerContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+export var linkSearchList = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
 
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
   _inherits(LinkSearchList, _PureComponent);
@@ -49,12 +49,13 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var 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(function (item, index) {
-          return /*#__PURE__*/React.createElement(LinkSearchListItem, {
+          return jsx(LinkSearchListItem, {
             id: "link-search-list-item-".concat(index),
             role: role && 'option',
             item: item,
@@ -69,12 +70,16 @@ var LinkSearchList = /*#__PURE__*/function (_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/esm/ui/PortalProvider/index.js

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _class, _temp;
+var _class;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -216,7 +216,7 @@ var dummyAnalyticsContext = {
   getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
   getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
 };
-var AnalyticsContextWrapper = (_temp = _class = /*#__PURE__*/function (_React$Component3) {
+var AnalyticsContextWrapper = (_class = /*#__PURE__*/function (_React$Component3) {
   _inherits(AnalyticsContextWrapper, _React$Component3);
 
   var _super4 = _createSuper(AnalyticsContextWrapper);
@@ -244,4 +244,4 @@ var AnalyticsContextWrapper = (_temp = _class = /*#__PURE__*/function (_React$Co
   return AnalyticsContextWrapper;
 }(React.Component), _defineProperty(_class, "contextTypes", {
   contextAdapter: PropTypes.object
-}), _temp);
+}), _class);

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

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), MediaSingleDimensionHelper);
+export var wrapperStyle = function wrapperStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), MediaSingleDimensionHelper(props));
+};

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

@@ -11,10 +11,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-var ToolbarComponentsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), akEditorMobileMaxWidth);
+var toolbarComponentsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), akEditorMobileMaxWidth);
 export var ToolbarInner = /*#__PURE__*/function (_React$Component) {
   _inherits(ToolbarInner, _React$Component);
 
@@ -54,7 +55,9 @@ export var ToolbarInner = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ToolbarComponentsWrapper, null, items.map(function (component, key) {
+      return jsx("div", {
+        css: toolbarComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

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

@@ -7,20 +7,20 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @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';
 var pulseBackground = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    background-color: ", ";\n  }\n"])), R100);
 var pulseBackgroundReverse = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), R100, R100);
-var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: ", ";\n  }\n"])), pulseBackgroundReverse, function (props) {
-  return props.animate ? ".25s ease-in-out ".concat(pulseBackground) : 'none';
-});
+var flashWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: 'none';\n  }\n"])), pulseBackgroundReverse);
+var flashWrapperAnimated = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n\n  & > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n"])), flashWrapper, pulseBackground);
 
 var WithFlash = /*#__PURE__*/function (_React$Component) {
   _inherits(WithFlash, _React$Component);
@@ -50,9 +50,9 @@ var WithFlash = /*#__PURE__*/function (_React$Component) {
           animate = _this$props.animate,
           children = _this$props.children;
       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/esm/utils/insert.js

@@ -50,6 +50,8 @@ var shouldSplit = function shouldSplit(nodeType, schemaNodes) {
 
 export var safeInsert = function safeInsert(content, position) {
   return function (tr) {
+    var _tr$selection$$from$n;
+
     var nodes = tr.doc.type.schema.nodes;
     var whitelist = [nodes.rule, nodes.mediaSingle]; // fallback if the node to insert is not in the whitelist, or if the insertion should happen within a list.
 
@@ -84,6 +86,14 @@ export var safeInsert = function safeInsert(content, position) {
       }
     }
 
+    var grandParentType = (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type;
+    var 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;
@@ -180,4 +190,14 @@ export var insertSelectedItem = function insertSelectedItem(maybeNode) {
 
     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 var shouldSplitSelectedNodeOnNodeInsertion = function shouldSplitSelectedNodeOnNodeInsertion(parentNodeType, grandParentNodeType, content) {
+  if (parentNodeType.name === 'paragraph' && grandParentNodeType.validContent(Fragment.from(content))) {
+    return true;
+  }
+
+  return false;
 };

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

@@ -0,0 +1,39 @@
+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) {
+  var debouncedHandleAnalyticsEvent = useMemo(function () {
+    return debounce(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: function onRender(_ref) {
+      var renderCount = _ref.renderCount,
+          propsDifference = _ref.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/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "162.0.1";
+export var version = "163.0.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/editor.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EditorView } from 'prosemirror-view';
-import { IntlShape } from 'react-intl';
+import type { IntlShape } from 'react-intl-next';
 import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import { Transformer } from '@atlaskit/editor-common/types';
 import EditorActions from './actions';

package/dist/types/keymaps/index.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Command } from '../types/command';
 export declare const addAltText: Keymap;
 export declare const toggleBold: Keymap;
@@ -63,13 +65,12 @@ export declare const altPaste: Keymap;
 export declare const find: Keymap;
 export declare const alignLeft: Keymap;
 export declare const alignRight: Keymap;
-export declare const TooltipShortcut: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
 export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
     description?: string | React.ReactNode;
     keymap?: Keymap | undefined;
     shortcutOverride?: string | undefined;
-}) => JSX.Element | null>;
+}) => jsx.JSX.Element | null>;
 export declare function findKeymapByDescription(description: string): Keymap | undefined;
 export declare function findShortcutByDescription(description: string): string | undefined;
 export declare function findShortcutByKeymap(keymap: Keymap): string | undefined;

package/dist/types/labs/next/full-page.d.ts

@@ -5,5 +5,5 @@ import EditorActions from '../../actions';
 export declare type FullPageProps = EditorProps & {
     onMount?: (actions: EditorActions) => void;
 } & WithAnalyticsEventsProps;
-declare const FullPageWithAnalytics: React.ForwardRefExoticComponent<Pick<FullPageProps, "mentionProvider" | "emojiProvider" | "autoformattingProvider" | "taskDecisionProvider" | "contextIdentifierProvider" | "collabEditProvider" | "macroProvider" | "searchProvider" | "activityProvider" | "presenceProvider" | "placeholderBracketHint" | "placeholderHints" | "codeBlock" | "media" | "allowBlockType" | "defaultValue" | "placeholder" | "onChange" | "contextPanel" | "appearance" | "quickInsert" | "disabled" | "waitForMediaUpload" | "maxHeight" | "popupsMountPoint" | "popupsBoundariesElement" | "popupsScrollableElement" | "editorActions" | "mention" | "insertMenuItems" | "primaryToolbarComponents" | "contentComponents" | "onDestroy" | "onMount" | "saveOnEnter" | "textFormatting" | "maxContentSize" | "performanceTracking" | "featureFlags" | "onSave" | "onCancel" | "extensionHandlers" | "collabEdit" | "allowBreakout" | "uploadErrorHandler" | "sanitizePrivateContent" | "mentionInsertDisplayName" | "allowNestedTasks" | "allowExpand" | "shouldFocus" | "persistScrollGutter" | "primaryToolbarIconBefore" | "secondaryToolbarComponents" | "allowAnalyticsGASV3" | "allowTasksAndDecisions" | "allowRule" | "allowTextColor" | "allowTables" | "allowHelpDialog" | "feedbackInfo" | "allowJiraIssue" | "allowPanel" | "allowExtension" | "allowConfluenceInlineComment" | "allowTemplatePlaceholders" | "allowDate" | "allowLayouts" | "allowStatus" | "allowDynamicTextSizing" | "allowTextAlignment" | "allowIndentation" | "allowNewInsertionBehaviour" | "autoScrollIntoView" | "allowFindReplace" | "UNSAFE_cards" | "smartLinks" | "errorReporterHandler" | "annotationProviders" | "legacyImageUploadProvider" | "contentTransformerProvider" | "allowKeyboardAccessibleDatepicker" | "onEditorReady" | "inputSamplingLimit" | "extensionProviders" | "UNSAFE_useAnalyticsContext" | "elementBrowser" | "UNSAFE_allowUndoRedoButtons" | "trackValidTransactions" | "useStickyToolbar" | "allowFragmentMark" | "dangerouslyAppendPlugins"> & React.RefAttributes<any>>;
+declare const FullPageWithAnalytics: React.ForwardRefExoticComponent<Pick<FullPageProps, "mentionProvider" | "emojiProvider" | "autoformattingProvider" | "taskDecisionProvider" | "contextIdentifierProvider" | "collabEditProvider" | "macroProvider" | "searchProvider" | "activityProvider" | "presenceProvider" | "placeholderBracketHint" | "placeholderHints" | "codeBlock" | "media" | "allowBlockType" | "contextPanel" | "defaultValue" | "onChange" | "appearance" | "placeholder" | "quickInsert" | "disabled" | "waitForMediaUpload" | "maxHeight" | "popupsMountPoint" | "popupsBoundariesElement" | "popupsScrollableElement" | "editorActions" | "mention" | "insertMenuItems" | "primaryToolbarComponents" | "contentComponents" | "onDestroy" | "onMount" | "saveOnEnter" | "textFormatting" | "maxContentSize" | "performanceTracking" | "featureFlags" | "onSave" | "onCancel" | "extensionHandlers" | "collabEdit" | "allowBreakout" | "uploadErrorHandler" | "sanitizePrivateContent" | "mentionInsertDisplayName" | "allowNestedTasks" | "allowExpand" | "shouldFocus" | "persistScrollGutter" | "primaryToolbarIconBefore" | "secondaryToolbarComponents" | "allowAnalyticsGASV3" | "allowTasksAndDecisions" | "allowRule" | "allowTextColor" | "allowTables" | "allowHelpDialog" | "feedbackInfo" | "allowJiraIssue" | "allowPanel" | "allowExtension" | "allowConfluenceInlineComment" | "allowTemplatePlaceholders" | "allowDate" | "allowLayouts" | "allowStatus" | "allowDynamicTextSizing" | "allowTextAlignment" | "allowIndentation" | "allowNewInsertionBehaviour" | "autoScrollIntoView" | "allowFindReplace" | "UNSAFE_cards" | "smartLinks" | "errorReporterHandler" | "annotationProviders" | "legacyImageUploadProvider" | "contentTransformerProvider" | "allowKeyboardAccessibleDatepicker" | "onEditorReady" | "inputSamplingLimit" | "extensionProviders" | "UNSAFE_useAnalyticsContext" | "elementBrowser" | "UNSAFE_allowUndoRedoButtons" | "trackValidTransactions" | "useStickyToolbar" | "allowFragmentMark" | "dangerouslyAppendPlugins"> & React.RefAttributes<any>>;
 export { FullPageWithAnalytics as FullPage };

package/dist/types/labs/next/mobile.d.ts

@@ -9,4 +9,4 @@ export declare function MobileEditor(props: MobileEditorProps & WithAnalyticsEve
 export declare namespace MobileEditor {
     var displayName: string;
 }
-export declare const Mobile: React.ForwardRefExoticComponent<Pick<MobileEditorProps & WithAnalyticsEventsProps, "onAnalyticsEvent" | "children" | "defaultValue" | "placeholder" | "onChange" | "plugins" | "disabled" | "maxHeight" | "popupsMountPoint" | "popupsBoundariesElement" | "popupsScrollableElement" | "onDestroy" | "onMount" | "transformer" | "onSave" | "onCancel" | "isMaxContentSizeReached"> & React.RefAttributes<any>>;
+export declare const Mobile: React.ForwardRefExoticComponent<Pick<MobileEditorProps & WithAnalyticsEventsProps, "onAnalyticsEvent" | "children" | "plugins" | "defaultValue" | "onChange" | "placeholder" | "disabled" | "maxHeight" | "popupsMountPoint" | "popupsBoundariesElement" | "popupsScrollableElement" | "onDestroy" | "onMount" | "transformer" | "onSave" | "onCancel" | "isMaxContentSizeReached"> & React.RefAttributes<any>>;

package/dist/types/nodeviews/ReactNodeView.d.ts

@@ -50,11 +50,6 @@ export default class ReactNodeView<P = ReactComponentProps> implements NodeView
     setDomAttrs(node: PMNode, element: HTMLElement): void;
     get dom(): HTMLElement | undefined;
     destroy(): void;
-    get performanceOptions(): {
-        enabled: boolean;
-        samplingRate: number;
-        slowThreshold: number;
-    };
     private dispatchAnalyticsEvent;
     static fromComponent(component: React.ComponentType<any>, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, props?: ReactComponentProps, viewShouldUpdate?: (nextNode: PMNode) => boolean, hasIntlContext?: boolean): (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<ReactComponentProps>;
 }

package/dist/types/nodeviews/getInlineNodeViewProducer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { EditorProps, EditorView } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
+import type { PMPluginFactoryParams } from '../types';
+export declare type InlineNodeViewComponentProps = {
+    view: EditorView;
+    getPos: NodeViewParams['getPos'];
+    node: PMNode;
+};
+declare type InlineNodeViewComponent<ExtraComponentProps> = React.ComponentType<InlineNodeViewComponentProps & ExtraComponentProps>;
+declare type NodeViewProducer = NonNullable<EditorProps['nodeViews']>[string];
+declare type NodeViewParams = {
+    node: Parameters<NodeViewProducer>[0];
+    view: Parameters<NodeViewProducer>[1];
+    getPos: Parameters<NodeViewProducer>[2];
+    decorations: Parameters<NodeViewProducer>[3];
+};
+export declare function getInlineNodeViewProducer<ExtraComponentProps>({ pmPluginFactoryParams, Component, extraComponentProps, }: {
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    Component: InlineNodeViewComponent<ExtraComponentProps>;
+    extraComponentProps?: ExtraComponentProps;
+}): NodeViewProducer;
+export {};

package/dist/types/nodeviews/getInlineNodeViewProducer.styles.d.ts

@@ -0,0 +1 @@
+export declare const InlineNodeViewSharedStyles: import("@emotion/react").SerializedStyles;

package/dist/types/nodeviews/getPerformanceOptions.d.ts

@@ -0,0 +1,19 @@
+import type { EditorView } from 'prosemirror-view';
+import { EditorState } from 'prosemirror-state';
+import { AnalyticsEventPayload } from '../plugins/analytics';
+export declare let nodeViewRenderedEventsCounter: number;
+export declare function getPerformanceOptions(view: EditorView): {
+    trackingEnabled: boolean;
+    samplingRate: number;
+    slowThreshold: number;
+};
+export declare function startMeasureReactNodeViewRendered({ nodeTypeName, }: {
+    nodeTypeName: string;
+}): void;
+export declare function stopMeasureReactNodeViewRendered({ nodeTypeName, dispatchAnalyticsEvent, editorState, samplingRate, slowThreshold, }: {
+    nodeTypeName: string;
+    dispatchAnalyticsEvent(payload: AnalyticsEventPayload): void;
+    editorState: EditorState;
+    samplingRate: number;
+    slowThreshold: number;
+}): void;