@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -6,9 +6,9 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import DropdownMenu from '../../../../ui/DropdownMenu';
-import { Separator, Wrapper, MenuWrapper } from '../../../../ui/styles';
+import { separatorStyles, wrapperStyle } from '../../../../ui/styles';
 import { NORMAL_TEXT } from '../../types';
-import { blockTypeMenuItemStyle, KeyboardShortcut } from './styled';
+import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
 
@@ -53,8 +53,8 @@ class ToolbarBlockType extends React.PureComponent {
           value: blockType,
           label: formatMessage(blockType.title),
           key: `${blockType.name}-${index}`,
-          elemAfter: jsx(KeyboardShortcut, {
-            selected: isActive
+          elemAfter: jsx("div", {
+            css: [keyboardShortcut, isActive && keyboardShortcutSelect]
           }, tooltip(findKeymapByDescription(blockType.title.defaultMessage))),
           isActive
         };
@@ -108,7 +108,9 @@ class ToolbarBlockType extends React.PureComponent {
 
     if (!this.props.isDisabled && !blockTypesDisabled) {
       const items = this.createItems();
-      return jsx(MenuWrapper, null, jsx(DropdownMenu, {
+      return jsx("span", {
+        css: wrapperStyle
+      }, jsx(DropdownMenu, {
         items: items,
         onOpenChange: this.onOpenChange,
         onItemActivated: this.handleSelectBlockType,
@@ -129,10 +131,14 @@ class ToolbarBlockType extends React.PureComponent {
         onClick: this.handleTriggerClick,
         formatMessage: formatMessage,
         "aria-expanded": active
-      }, longestDropdownMenuItem)), jsx(Separator, null));
+      }, longestDropdownMenuItem)), jsx("span", {
+        css: separatorStyles
+      }));
     }
 
-    return jsx(Wrapper, null, jsx(BlockTypeButton, {
+    return jsx("span", {
+      css: wrapperStyle
+    }, jsx(BlockTypeButton, {
       isSmall: isSmall,
       isReducedSpacing: isReducedSpacing,
       selected: active,
@@ -141,7 +147,9 @@ class ToolbarBlockType extends React.PureComponent {
       onClick: this.handleTriggerClick,
       formatMessage: formatMessage,
       "aria-expanded": active
-    }, longestDropdownMenuItem), jsx(Separator, null));
+    }, longestDropdownMenuItem), jsx("span", {
+      css: separatorStyles
+    }));
   }
 
 }

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
-import styled from 'styled-components';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
-import { Shortcut } from '../../../../ui/styles';
+import { shortcutStyle } from '../../../../ui/styles';
 export const blockTypeMenuItemStyle = (tagName, selected) => {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
   const selectedStyle = selected ? `${tagName} { color: white !important; }` : '';
@@ -22,7 +21,10 @@ export const blockTypeMenuItemStyle = (tagName, selected) => {
     ${selectedStyle};
   `;
 };
-export const KeyboardShortcut = styled(Shortcut)`
-  ${props => props.selected ? `color: ${N400};` : ''}
+export const keyboardShortcut = css`
+  ${shortcutStyle}
   margin-left: 16px;
+`;
+export const keyboardShortcutSelect = css`
+  color: ${N400};
 `;

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
@@ -7,7 +10,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import styled from 'styled-components';
 import { getBreakoutMode } from '../utils/get-breakout-mode';
 import { setBreakoutMode } from '../commands/set-breakout-mode';
 import { removeBreakout } from '../commands/remove-breakout';
@@ -22,7 +24,7 @@ const {
   N300,
   N20A
 } = colors;
-const Wrapper = styled.div`
+const toolbarButtonWrapper = css`
   && button {
     background: ${N20A};
     color: ${N300};
@@ -123,7 +125,7 @@ class LayoutButton extends React.Component {
       element = closestEl.firstChild;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       ariaLabel: title,
       target: element,
       offset: [5, 0],
@@ -134,13 +136,15 @@ class LayoutButton extends React.Component {
       scrollableElement: scrollableElement,
       stick: true,
       forcePlacement: true
-    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    }, jsx("div", {
+      css: toolbarButtonWrapper
+    }, jsx(ToolbarButton, {
       title: title,
       testId: titleMessage.id,
       onClick: this.handleClick(nextBreakoutMode),
-      iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? /*#__PURE__*/React.createElement(CollapseIcon, {
+      iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? jsx(CollapseIcon, {
         label: title
-      }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+      }) : jsx(ExpandIcon, {
         label: title
       })
     })));

package/dist/es2019/plugins/card/nodeviews/genericCard.js

@@ -4,11 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { titleUrlPairFromNode } from '../utils';
-import { changeSelectedCardToLink } from '../pm-plugins/doc';
+import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
 export function Card(SmartCardComponent, UnsupportedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = class extends React.Component {
+  return _class = class extends React.Component {
     constructor(...args) {
       super(...args);
 
@@ -69,7 +69,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
           return;
         }
 
-        changeSelectedCardToLink(undefined, url, true, node, getPos())(view.state, view.dispatch);
+        changeSelectedCardToLinkFallback(undefined, url, true, node, getPos())(view.state, view.dispatch);
         return null;
       } else {
         // Otherwise, render a blue link as fallback (above in render()).
@@ -81,5 +81,5 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
 
   }, _defineProperty(_class, "contextTypes", {
     contextAdapter: PropTypes.object
-  }), _temp;
+  }), _class;
 }

package/dist/es2019/plugins/card/nodeviews/inlineCard.js

@@ -3,11 +3,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
-import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import { registerCard } from '../pm-plugins/actions';
 export class InlineCardComponent extends React.PureComponent {
   constructor(...args) {
@@ -57,7 +55,7 @@ export class InlineCardComponent extends React.PureComponent {
       url,
       data
     } = node.attrs;
-    const card = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, ZERO_WIDTH_SPACE), /*#__PURE__*/React.createElement("span", {
+    const card = /*#__PURE__*/React.createElement("span", {
       className: "card"
     }, /*#__PURE__*/React.createElement(SmartCard, {
       key: url,
@@ -68,7 +66,7 @@ export class InlineCardComponent extends React.PureComponent {
       container: this.scrollContainer,
       onResolve: this.onResolve,
       inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined
-    })), /*#__PURE__*/React.createElement("span", null, ZERO_WIDTH_SPACE)); // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+    })); // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
     // otherwise if we got data, we can render the card directly since it doesn't need the Provider
 
     return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
@@ -83,23 +81,17 @@ _defineProperty(InlineCardComponent, "contextTypes", {
 });
 
 const WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
-export class InlineCard extends ReactNodeView {
-  createDomRef() {
-    return super.createDomRef({
-      displayInlineBlockForInlineNodes: false
-    });
-  }
-
-  render() {
-    const {
-      useAlternativePreloader
-    } = this.reactComponentProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCard, {
-      node: this.node,
-      view: this.view,
-      getPos: this.getPos,
-      useAlternativePreloader: useAlternativePreloader
-    }));
-  }
-
+export function InlineCardNodeView(props) {
+  const {
+    useAlternativePreloader,
+    node,
+    view,
+    getPos
+  } = props;
+  return /*#__PURE__*/React.createElement(WrappedInlineCard, {
+    node: node,
+    view: view,
+    getPos: getPos,
+    useAlternativePreloader: useAlternativePreloader
+  });
 }

package/dist/es2019/plugins/card/pm-plugins/doc.js

@@ -12,6 +12,7 @@ import { shouldReplaceLink } from './shouldReplaceLink';
 import { SMART_LINK_TYPE } from '../../../plugins/analytics/types/node-events';
 import { getLinkCreationAnalyticsEvent } from '../../../plugins/hyperlink/analytics';
 import { unlinkPayload } from '../../../utils/linking-utils';
+import { getFeatureFlags } from '../../feature-flags-context';
 export function insertCard(tr, cardAdf, schema) {
   const {
     inlineCard
@@ -207,13 +208,48 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
     tr = cardToLinkWithTransaction(state, text, href);
   }
 
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (sendAnalytics) {
+    if (selectedNode) {
+      const {
+        viewChangingExperimentToolbarStyle
+      } = getFeatureFlags(state);
+      addAnalytics(state, tr, {
+        action: ACTION.CHANGED_TYPE,
+        actionSubject: ACTION_SUBJECT.SMART_LINK,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          newType: SMART_LINK_TYPE.URL,
+          previousType: appearanceForNodeType(selectedNode.type),
+          featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
+        }
+      });
+    }
+  }
+
+  if (dispatch) {
+    dispatch(tr.scrollIntoView());
+  }
+
+  return true;
+};
+export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node, pos) => (state, dispatch) => {
+  let tr;
+
+  if (node && pos) {
+    tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
+  } else {
+    tr = cardToLinkWithTransaction(state, text, href);
+  }
+
   if (sendAnalytics) {
     addAnalytics(state, tr, {
-      action: ACTION.CHANGED_TYPE,
+      action: ACTION.ERRORED,
       actionSubject: ACTION_SUBJECT.SMART_LINK,
-      eventType: EVENT_TYPE.TRACK,
+      eventType: EVENT_TYPE.OPERATIONAL,
       attributes: {
-        newType: SMART_LINK_TYPE.URL
+        error: 'Smart card falling back to link.'
       }
     });
   }
@@ -311,13 +347,17 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
   } = state.selection;
   const nodeType = getLinkNodeType(appearance, state.schema.nodes);
   const tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
+  const {
+    viewChangingExperimentToolbarStyle
+  } = getFeatureFlags(state);
   addAnalytics(state, tr, {
     action: ACTION.CHANGED_TYPE,
     actionSubject: ACTION_SUBJECT.SMART_LINK,
     eventType: EVENT_TYPE.TRACK,
     attributes: {
       newType: appearance,
-      previousType: appearanceForNodeType(selectedNode.type)
+      previousType: appearanceForNodeType(selectedNode.type),
+      featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
     }
   });
 

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -1,19 +1,16 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import rafSchedule from 'raf-schd';
+import { getInlineNodeViewProducer } from '../../../nodeviews/getInlineNodeViewProducer';
 import reducer from './reducers';
 import { pluginKey } from './plugin-key';
 import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { EmbedCard } from '../nodeviews/embedCard';
 import { BlockCard } from '../nodeviews/blockCard';
-import { InlineCard } from '../nodeviews/inlineCard';
+import { InlineCardNodeView } from '../nodeviews/inlineCard';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../plugins/analytics';
 export { pluginKey } from './plugin-key';
-export const createPlugin = options => ({
-  portalProviderAPI,
-  eventDispatcher,
-  providerFactory,
-  dispatchAnalyticsEvent
-}) => {
+export const createPlugin = options => pmPluginFactoryParams => {
   const {
     platform,
     allowResizing,
@@ -24,6 +21,20 @@ export const createPlugin = options => ({
   return new SafePlugin({
     state: {
       init() {
+        const {
+          viewChangingExperimentToolbarStyle
+        } = pmPluginFactoryParams.featureFlags;
+        pmPluginFactoryParams.dispatchAnalyticsEvent({
+          eventType: EVENT_TYPE.OPERATIONAL,
+          action: ACTION.EXPOSED,
+          actionSubject: ACTION_SUBJECT.FEATURE,
+          attributes: {
+            flagKey: 'confluence.frontend.fabric.editor.view-changing-experiment-toolbar-style',
+            value: viewChangingExperimentToolbarStyle || 'noChange'
+          },
+          source: '@atlaskit/feature-flag-client',
+          tags: ['measurement']
+        });
         return {
           requests: [],
           provider: null,
@@ -57,7 +68,7 @@ export const createPlugin = options => ({
       const subscriptionHandler = (name, provider) => handleProvider(name, provider, view);
 
       const rafCancellationCallbacks = [];
-      providerFactory.subscribe('cardProvider', subscriptionHandler);
+      pmPluginFactoryParams.providerFactory.subscribe('cardProvider', subscriptionHandler);
       return {
         update(view, prevState) {
           const currentState = getPluginState(view.state);
@@ -92,7 +103,7 @@ export const createPlugin = options => ({
           Object.keys(outstandingRequests).forEach(url => Promise.reject(outstandingRequests[url])); // Cancel any outstanding raf callbacks.
 
           rafCancellationCallbacks.forEach(cancellationCallback => cancellationCallback());
-          providerFactory.unsubscribe('cardProvider', subscriptionHandler);
+          pmPluginFactoryParams.providerFactory.unsubscribe('cardProvider', subscriptionHandler);
         }
 
       };
@@ -100,14 +111,18 @@ export const createPlugin = options => ({
 
     props: {
       nodeViews: {
-        inlineCard: (node, view, getPos) => {
-          const reactComponentProps = {
+        inlineCard: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: InlineCardNodeView,
+          extraComponentProps: {
             useAlternativePreloader
-          };
-          const hasIntlContext = true;
-          return new InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
-        },
+          }
+        }),
         blockCard: (node, view, getPos) => {
+          const {
+            portalProviderAPI,
+            eventDispatcher
+          } = pmPluginFactoryParams;
           const reactComponentProps = {
             platform
           };
@@ -115,6 +130,11 @@ export const createPlugin = options => ({
           return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         },
         embedCard: (node, view, getPos) => {
+          const {
+            portalProviderAPI,
+            eventDispatcher,
+            dispatchAnalyticsEvent
+          } = pmPluginFactoryParams;
           const reactComponentProps = {
             eventDispatcher,
             allowResizing,

package/dist/es2019/plugins/card/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground } from '@atlaskit/editor-shared-styles';
 import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';

package/dist/es2019/plugins/card/ui/LinkToolbarButtonGroup.js

@@ -1,22 +1,24 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';
 import Button from '../../floating-toolbar/ui/Button';
 /**
  * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
  */
 
-export const StyledButton = styled(Button)`
-  pointer-events: ${({
-  disabled
-}) => disabled ? 'none' : 'auto'};
+const buttonStyle = css`
+  pointer-events: auto;
+`;
+const buttonStyleNoneEvent = css`
+  pointer-events: none;
 `;
 
 const DisallowedWrapper = ({
   disabled,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement("div", props);
+  return jsx("div", props);
 };
 /**
  * The button requires `pointer-events: none;` in order to fix the tooltip, hence
@@ -24,15 +26,16 @@ const DisallowedWrapper = ({
  */
 
 
-const StyledDisallowedWrapper = styled(DisallowedWrapper)`
-  cursor: ${({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer'};
+const defaultWrapperStyle = css`
+  cursor: pointer;
+`;
+const disallowedWrapperStyle = css`
+  cursor: not-allowed;
 `;
 export const LinkToolbarButtonGroup = ({
   options
 }) => {
-  return /*#__PURE__*/React.createElement(ButtonGroup, null, options.map(({
+  return jsx(ButtonGroup, null, options.map(({
     onClick,
     selected,
     disabled,
@@ -40,12 +43,14 @@ export const LinkToolbarButtonGroup = ({
     tooltipContent,
     title,
     icon: Icon
-  }) => /*#__PURE__*/React.createElement(StyledDisallowedWrapper, {
+  }) => jsx(DisallowedWrapper, {
+    css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
     key: testId,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(StyledButton, {
+  }, jsx(Button, {
+    css: disabled ? buttonStyleNoneEvent : buttonStyle,
     title: title,
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: jsx(Icon, {
       size: "medium",
       label: title
     }),

package/dist/es2019/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -31,8 +31,8 @@ const primitiveStyles = css({
 });
 const interactiveStyles = css({
   '&:active': {
-    backgroundColor: token('color.background.brand.pressed', B50),
-    color: token('color.text.accent.blue', B400)
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', B400)
   }
 });
 const unselectedStyles = css({
@@ -42,11 +42,11 @@ const unselectedStyles = css({
   }
 });
 const selectedOptionStyles = css({
-  backgroundColor: token('color.background.brand.pressed', B50),
-  color: token('color.text.brand', 'currentColor'),
+  backgroundColor: token('color.background.selected.pressed', B50),
+  color: token('color.text.selected', 'currentColor'),
   '&:hover': {
-    backgroundColor: token('color.background.brand.pressed', B50),
-    color: token('color.text.brand', 'currentColor')
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', 'currentColor')
   }
 });
 const titleOffsetStyles = css({

package/dist/es2019/plugins/card/ui/ResizableEmbedCard.js

@@ -8,7 +8,7 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirr
 import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorMediaResizeHandlerPaddingWide, akEditorBreakoutPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
-import { Wrapper } from '../../../ui/Resizer/styled';
+import { wrapperStyle } from '../../../ui/Resizer/styled';
 import Resizer from '../../../ui/Resizer';
 import { handleSides, imageAlignmentMap, snapTo } from '../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../../plugins/media/utils/media-single';
@@ -358,12 +358,13 @@ export default class ResizableEmbedCard extends React.Component {
     return jsx("div", {
       css: embedSpacingStyles,
       "data-testid": "resizable-embed-card-spacing"
-    }, jsx(Wrapper, {
-      layout: layout,
-      isResized: !!pctWidth,
-      containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
-      innerRef: elem => this.wrapper = elem,
-      fullWidthMode: fullWidthMode
+    }, jsx("div", {
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
+        fullWidthMode
+      })
     }, jsx(Resizer, _extends({}, this.props, {
       width: initialWidth // Starting or initial width of embed <iframe> itself.
       ,

package/dist/es2019/plugins/code-block/pm-plugins/keymaps.js

@@ -44,7 +44,7 @@ export function keymapPlugin(schema) {
         return true;
       }
 
-      if (dispatch && $cursor.node && isEmptyNode(schema)($cursor.node()) && (hasParentNodeOfType(layoutColumn)(state.selection) || hasParentNodeOfType(table)(state.selection))) {
+      if ($cursor.node && isEmptyNode(schema)($cursor.node()) && (hasParentNodeOfType(layoutColumn)(state.selection) || hasParentNodeOfType(table)(state.selection))) {
         const {
           tr
         } = state;

package/dist/es2019/plugins/code-block/styles.js

@@ -19,7 +19,9 @@ export const highlightingCodeBlockStyles = props => css`
   light: colors.N20,
   dark: colors.DN50
 })(props)};
+
     --ds--code--bg-color: transparent;
+
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
     background-position: 100% 0, 100% 0, 0 0;
@@ -164,7 +166,9 @@ export const codeBlockStyles = props => css`
   })(props),
   width: '8px'
 })};
+
     --ds--code--bg-color: transparent;
+
     background-repeat: no-repeat;
     background-color: ${themed({
   light: colors.N20,

package/dist/es2019/plugins/collab-edit/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { TELEPOINTER_DIM_CLASS } from './plugin-state';
 import { colors } from './utils';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';

package/dist/es2019/plugins/collab-edit/ui/avatars.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import AvatarGroup from '@atlaskit/avatar-group';
-import { AvatarContainer } from './styles';
+import { avatarContainer } from './styles';
 import toAvatar from './to-avatar';
 import { scrollToCollabCursor } from '../utils';
 import { getFeatureFlags } from '../../feature-flags-context';
@@ -16,7 +18,9 @@ export const Avatars = /*#__PURE__*/React.memo(props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AvatarContainer, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+  return jsx("div", {
+    css: avatarContainer
+  }, jsx(AvatarGroup, {
     appearance: "stack",
     size: "medium",
     data: avatars,

package/dist/es2019/plugins/collab-edit/ui/colored-avatar-item.js

@@ -1,11 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { getAvatarColor } from '../utils';
-import { Badge } from './styles';
+import { badge } from './styles';
 export const ColoredAvatarItem = props => {
   const color = getAvatarColor(props.sessionId).color.solid;
   const avatar = props.name.substr(0, 1).toUpperCase();
-  return /*#__PURE__*/React.createElement(Badge, {
-    color: color,
+  return jsx("div", {
+    css: badge(color),
     "data-testid": "editor-collab-badge"
   }, avatar);
 };

package/dist/es2019/plugins/collab-edit/ui/invite-to-edit.js

@@ -1,9 +1,11 @@
-import React from 'react';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import { InviteTeamWrapper } from './styles';
+import { inviteTeamWrapper } from './styles';
 
-const ID = props => /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+const ID = props => jsx(Fragment, null, props.children);
 
 export const InviteToEditButton = props => {
   const {
@@ -12,7 +14,7 @@ export const InviteToEditButton = props => {
     selected,
     title
   } = props;
-  const iconBefore = React.useMemo(() => /*#__PURE__*/React.createElement(InviteTeamIcon, {
+  const iconBefore = React.useMemo(() => jsx(InviteTeamIcon, {
     label: title
   }), [title]);
 
@@ -21,7 +23,9 @@ export const InviteToEditButton = props => {
   }
 
   const Wrapper = Component ? Component : ID;
-  return /*#__PURE__*/React.createElement(InviteTeamWrapper, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx("div", {
+    css: inviteTeamWrapper
+  }, jsx(Wrapper, null, jsx(ToolbarButton, {
     className: "invite-to-edit",
     onClick: onClick,
     selected: selected,