@atlaskit/editor-core 161.0.0 → 162.0.2

package/dist/es2019/labs/next/full-page.js

@@ -10,7 +10,7 @@ import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
-import { tableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles';
 import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
 import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';
@@ -81,7 +81,7 @@ const EditorContentArea = styled.div`
       clear: none;
     }
   }
-  ${tableFullPageEditorStyles};
+  ${deprecatedTableFullPageEditorStyles};
 `;
 EditorContentArea.displayName = 'EditorContentArea';
 const MainToolbar = styled.div`

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

@@ -1,8 +1,8 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common/styles';
-export const blocktypeStyles = css`
+export const blocktypeStyles = props => css`
   .ProseMirror {
     ${blockquoteSharedStyles};
-    ${headingsSharedStyles};
+    ${headingsSharedStyles(props)};
   }
 `;

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

@@ -1,11 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+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 { NORMAL_TEXT } from '../../types';
-import { BlockTypeMenuItem, KeyboardShortcut } from './styled';
+import { blockTypeMenuItemStyle, KeyboardShortcut } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
 
@@ -41,16 +44,16 @@ class ToolbarBlockType extends React.PureComponent {
       } = this.props.pluginState;
       const items = availableBlockTypes.map((blockType, index) => {
         const isActive = currentBlockType === blockType;
-        const Tag = blockType.tagName || 'p';
+        const tagName = blockType.tagName || 'p';
+        const Tag = tagName;
         return {
-          content: /*#__PURE__*/React.createElement(BlockTypeMenuItem, {
-            tagName: Tag,
-            selected: isActive
-          }, /*#__PURE__*/React.createElement(Tag, null, formatMessage(blockType.title))),
+          content: jsx("div", {
+            css: blockTypeMenuItemStyle(tagName, isActive)
+          }, jsx(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
           key: `${blockType.name}-${index}`,
-          elemAfter: /*#__PURE__*/React.createElement(KeyboardShortcut, {
+          elemAfter: jsx(KeyboardShortcut, {
             selected: isActive
           }, tooltip(findKeymapByDescription(blockType.title.defaultMessage))),
           isActive
@@ -105,7 +108,7 @@ class ToolbarBlockType extends React.PureComponent {
 
     if (!this.props.isDisabled && !blockTypesDisabled) {
       const items = this.createItems();
-      return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+      return jsx(MenuWrapper, null, jsx(DropdownMenu, {
         items: items,
         onOpenChange: this.onOpenChange,
         onItemActivated: this.handleSelectBlockType,
@@ -117,7 +120,7 @@ class ToolbarBlockType extends React.PureComponent {
         fitHeight: 360,
         fitWidth: 106,
         shouldUseDefaultRole: true
-      }, /*#__PURE__*/React.createElement(BlockTypeButton, {
+      }, jsx(BlockTypeButton, {
         isSmall: isSmall,
         isReducedSpacing: isReducedSpacing,
         selected: active,
@@ -126,10 +129,10 @@ class ToolbarBlockType extends React.PureComponent {
         onClick: this.handleTriggerClick,
         formatMessage: formatMessage,
         "aria-expanded": active
-      }, longestDropdownMenuItem)), /*#__PURE__*/React.createElement(Separator, null));
+      }, longestDropdownMenuItem)), jsx(Separator, null));
     }
 
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(BlockTypeButton, {
+    return jsx(Wrapper, null, jsx(BlockTypeButton, {
       isSmall: isSmall,
       isReducedSpacing: isReducedSpacing,
       selected: active,
@@ -138,7 +141,7 @@ class ToolbarBlockType extends React.PureComponent {
       onClick: this.handleTriggerClick,
       formatMessage: formatMessage,
       "aria-expanded": active
-    }, longestDropdownMenuItem), /*#__PURE__*/React.createElement(Separator, null));
+    }, longestDropdownMenuItem), jsx(Separator, null));
   }
 
 }

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

@@ -1,22 +1,27 @@
+/** @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';
-export const BlockTypeMenuItem = styled.div`
-  ${headingsSharedStyles};
-  > {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin-top: 0;
+export const blockTypeMenuItemStyle = (tagName, selected) => {
+  // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
+  const selectedStyle = selected ? `${tagName} { color: white !important; }` : '';
+  return themeProps => css`
+    ${headingsSharedStyles(themeProps)};
+    > {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-top: 0;
+      }
     }
-  }
-  ${props => // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-props.selected ? `${props.tagName} { color: white !important; }` : ''};
-`;
+    ${selectedStyle};
+  `;
+};
 export const KeyboardShortcut = styled(Shortcut)`
   ${props => props.selected ? `color: ${N400};` : ''}
   margin-left: 16px;

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

@@ -45,8 +45,8 @@ export const messages = defineMessages({
     defaultMessage: 'URL',
     description: 'Title for option to convert the card to become a regular text-based hyperlink.'
   },
-  cardTitle: {
-    id: 'fabric.editor.cardTitle',
+  blockTitle: {
+    id: 'fabric.editor.blockTitle',
     defaultMessage: 'Card',
     description: 'Title for option to display link in the card view.'
   },
@@ -65,8 +65,8 @@ export const messages = defineMessages({
     defaultMessage: 'Display link as URL',
     description: 'Description for option to convert the card to become a regular text-based hyperlink.'
   },
-  cardDescription: {
-    id: 'fabric.editor.cardDescription',
+  blockDescription: {
+    id: 'fabric.editor.blockDescription',
     defaultMessage: 'Display more information about a link, including a summary and actions',
     description: 'Description for option to display link in the card view.'
   },

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

@@ -8,8 +8,10 @@ import Dropdown from '../../floating-toolbar/ui/Dropdown';
 import { messages } from '../messages';
 import nodeNames from '../../../messages';
 import { getFeatureFlags } from '../../../plugins/feature-flags-context';
-import LinkToolbarIconDropdown from './LinkToolbarIconDropdown';
-import LinkToolbarButtonGroup from './LinkToolbarButtonGroup';
+import { LinkToolbarIconDropdown } from './LinkToolbarIconDropdown';
+import { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
+import { getButtonGroupOption } from './link-toolbar-button-group-options';
+import { getIconDropdownOption } from './link-toolbar-icon-dropdown-options';
 export class LinkToolbarAppearance extends React.Component {
   constructor(...args) {
     super(...args);
@@ -38,6 +40,7 @@ export class LinkToolbarAppearance extends React.Component {
       const isSmartLinkSupportedInParent = isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
       const tooltip = isSmartLinkSupportedInParent ? undefined : parentNodeName(editorState, intl);
       const embedOption = allowEmbeds && preview && {
+        appearance: 'embed',
         title: intl.formatMessage(messages.embed),
         onClick: setSelectedCardAppearance('embed'),
         selected: currentAppearance === 'embed',
@@ -52,24 +55,27 @@ export class LinkToolbarAppearance extends React.Component {
         selected: !currentAppearance,
         testId: 'url-appearance'
       }, {
+        appearance: 'inline',
         title: intl.formatMessage(messages.inline),
         onClick: setSelectedCardAppearance('inline'),
         selected: currentAppearance === 'inline',
-        hidden: false,
         testId: 'inline-appearance'
       }, {
+        appearance: 'block',
         title: intl.formatMessage(messages.block),
         onClick: setSelectedCardAppearance('block'),
         selected: currentAppearance === 'block',
-        hidden: false,
         testId: 'block-appearance',
         disabled: !isSmartLinkSupportedInParent,
         tooltip
       }];
-      const title = intl.formatMessage(currentAppearance ? messages[currentAppearance] : messages.url);
 
       const dispatchCommand = fn => {
-        fn && fn(editorState, view && view.dispatch);
+        fn && fn(editorState, view && view.dispatch); // Refocus the view to ensure the editor has focus
+
+        if (view && !view.hasFocus()) {
+          view.focus();
+        }
       };
 
       if (embedOption) {
@@ -82,18 +88,24 @@ export class LinkToolbarAppearance extends React.Component {
 
       if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
         return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
-          key: "link-toolbar-button-group"
+          key: "link-toolbar-button-group",
+          options: options.map(option => getButtonGroupOption(intl, dispatchCommand, option))
         });
       }
 
       if (viewChangingExperimentToolbarStyle === 'newDropdown') {
         return /*#__PURE__*/React.createElement(LinkToolbarIconDropdown, {
-          key: "link-toolbar-icon-dropdown"
+          key: "link-toolbar-icon-dropdown",
+          title: "Change view",
+          buttonTestId: "link-toolbar-appearance-button",
+          dispatchCommand: dispatchCommand,
+          options: options.map(option => getIconDropdownOption(intl, dispatchCommand, option))
         });
       }
 
+      const title = intl.formatMessage(currentAppearance ? messages[currentAppearance] : messages.url);
       return /*#__PURE__*/React.createElement(Dropdown, {
-        key: 'link-toolbar',
+        key: "link-toolbar",
         buttonTestId: "link-toolbar-appearance-button",
         title: title,
         dispatchCommand: dispatchCommand,

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

@@ -1,7 +1,58 @@
 import React from 'react';
+import styled from 'styled-components';
+import { ButtonGroup } from '@atlaskit/button';
+import Button from '../../floating-toolbar/ui/Button';
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
 
-const LinkToolbarButtonGroup = ({}) => {
-  return /*#__PURE__*/React.createElement("span", null);
+export const StyledButton = styled(Button)`
+  pointer-events: ${({
+  disabled
+}) => disabled ? 'none' : 'auto'};
+`;
+
+const DisallowedWrapper = ({
+  disabled,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", props);
 };
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+
 
-export default LinkToolbarButtonGroup;
+const StyledDisallowedWrapper = styled(DisallowedWrapper)`
+  cursor: ${({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer'};
+`;
+export const LinkToolbarButtonGroup = ({
+  options
+}) => {
+  return /*#__PURE__*/React.createElement(ButtonGroup, null, options.map(({
+    onClick,
+    selected,
+    disabled,
+    testId,
+    tooltipContent,
+    title,
+    icon: Icon
+  }) => /*#__PURE__*/React.createElement(StyledDisallowedWrapper, {
+    key: testId,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(StyledButton, {
+    title: title,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      size: "medium",
+      label: title
+    }),
+    selected: selected,
+    onClick: onClick,
+    testId: testId,
+    disabled: disabled,
+    tooltipContent: tooltipContent
+  }))));
+};

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

@@ -1,7 +1,149 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { MenuGroup, Section, CustomItem } from '@atlaskit/menu';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { B50, N20, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import Tooltip from '@atlaskit/tooltip';
+import Dropdown from '../../floating-toolbar/ui/Dropdown';
+export const ICON_HEIGHT = 40;
+export const ICON_WIDTH = 40;
+const iconBoxStyles = css({
+  width: ICON_HEIGHT,
+  height: ICON_WIDTH,
+  overflow: 'hidden',
+  border: '1px solid rgba(223, 225, 229, 0.5)'
+  /* N60 at 50% */
+  ,
+  borderRadius: borderRadius(),
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: token('color.background.default', 'white')
+});
+const primitiveStyles = css({
+  padding: '0.75rem',
+  alignItems: 'flex-start'
+});
+const interactiveStyles = css({
+  '&:active': {
+    backgroundColor: token('color.background.brand.pressed', B50),
+    color: token('color.text.accent.blue', B400)
+  }
+});
+const unselectedStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N20),
+    color: token('color.text.brand', 'currentColor')
+  }
+});
+const selectedOptionStyles = css({
+  backgroundColor: token('color.background.brand.pressed', B50),
+  color: token('color.text.brand', 'currentColor'),
+  '&:hover': {
+    backgroundColor: token('color.background.brand.pressed', B50),
+    color: token('color.text.brand', 'currentColor')
+  }
+});
+const titleOffsetStyles = css({
+  marginTop: '0.125rem'
+});
+
+const getCustomStyles = (selected, disabled) => {
+  if (disabled) {
+    return [primitiveStyles];
+  }
+
+  if (selected) {
+    return [primitiveStyles, selectedOptionStyles, interactiveStyles];
+  }
+
+  return [primitiveStyles, unselectedStyles, interactiveStyles];
+};
+
+const OptionRoot = props => jsx("div", _extends({}, props, {
+  tabIndex: 0
+}));
+
+const Option = ({
+  title,
+  description,
+  selected,
+  disabled,
+  onClick,
+  icon: Icon,
+  testId,
+  tooltipContent,
+  hide
+}) => {
+  const option = jsx(CustomItem, {
+    "aria-label": title,
+    component: OptionRoot,
+    iconBefore: jsx("div", {
+      css: iconBoxStyles
+    }, jsx(Icon, {
+      width: 38,
+      height: 38,
+      label: title
+    })),
+    css: getCustomStyles(selected, disabled),
+    description: description,
+    testId: testId,
+    onClick: event => {
+      event.preventDefault();
+
+      if (!disabled) {
+        onClick();
+        hide();
+      }
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === 'Space') {
+        event.preventDefault();
+
+        if (!disabled) {
+          onClick();
+          hide();
+        }
+      }
+    },
+    role: "option",
+    "aria-selected": selected,
+    isSelected: selected,
+    isDisabled: disabled,
+    shouldDescriptionWrap: true
+  }, jsx("div", {
+    css: titleOffsetStyles
+  }, title));
+
+  if (tooltipContent) {
+    return jsx(Tooltip, {
+      content: tooltipContent
+    }, option);
+  }
 
-const LinkToolbarIconDropdown = ({}) => {
-  return /*#__PURE__*/React.createElement("span", null);
+  return option;
 };
 
-export default LinkToolbarIconDropdown;
+export const LinkToolbarIconDropdown = ({
+  options,
+  ...rest
+}) => jsx(Dropdown, _extends({}, rest, {
+  options: {
+    render: ({
+      hide
+    }) => jsx(MenuGroup, null, jsx("div", {
+      role: "listbox"
+    }, jsx(Section, null, options.map(props => jsx(Option, _extends({
+      key: props.testId
+    }, props, {
+      hide: hide
+    })))))),
+    width: 320,
+    height: 200
+  }
+}));

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

@@ -1,15 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 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/media-ui/embeds';
+import { embedHeaderHeight } from '@atlaskit/smart-card';
 import { Wrapper } 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';
-import { EmbedSpacing } from './styled';
+import { embedSpacingStyles } from './styled';
 export default class ResizableEmbedCard extends React.Component {
   constructor(...args) {
     super(...args);
@@ -321,7 +324,7 @@ export default class ResizableEmbedCard extends React.Component {
       };
     }
 
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       "data-testid": 'resizable-embed-card-height-definer',
       style: {
         display: 'block',
@@ -352,15 +355,16 @@ export default class ResizableEmbedCard extends React.Component {
         enable[side] = false;
       }
     });
-    return /*#__PURE__*/React.createElement(EmbedSpacing, {
+    return jsx("div", {
+      css: embedSpacingStyles,
       "data-testid": "resizable-embed-card-spacing"
-    }, /*#__PURE__*/React.createElement(Wrapper, {
+    }, jsx(Wrapper, {
       layout: layout,
       isResized: !!pctWidth,
       containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
       innerRef: elem => this.wrapper = elem,
       fullWidthMode: fullWidthMode
-    }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+    }, jsx(Resizer, _extends({}, this.props, {
       width: initialWidth // Starting or initial width of embed <iframe> itself.
       ,
       enable: enable,

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

@@ -13,7 +13,7 @@ const IconCardGlyph = props => {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 9c-1.10457 0-2 .89543-2 2v10c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V11c0-1.10457-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Zm-4 3c-.55228 0-1 .4477-1 1s.44772 1 1 1h14c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Zm-1 4c0-.5523.44772-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1H9c-.55228 0-1-.4477-1-1Z",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/es2019/plugins/card/ui/assets/embed.js

@@ -13,7 +13,7 @@ const IconEmbedGlyph = props => {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/es2019/plugins/card/ui/assets/inline.js

@@ -13,7 +13,7 @@ const IconInlineGlyph = props => {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/es2019/plugins/card/ui/assets/url.js

@@ -15,7 +15,7 @@ const IconUrlGlyph = props => {
     width: "20",
     height: "2",
     rx: "1",
-    fill: "#42526E"
+    fill: "currentColor"
   }));
 };
 

package/dist/es2019/plugins/card/ui/link-toolbar-button-group-options.js

@@ -0,0 +1,45 @@
+import { messages } from '../messages';
+import { IconCard } from './assets/card';
+import { IconEmbed } from './assets/embed';
+import { IconInline } from './assets/inline';
+import { IconUrl } from './assets/url';
+const appearancePropsMap = {
+  url: {
+    title: messages.urlTitle,
+    icon: IconUrl
+  },
+  inline: {
+    title: messages.inlineTitle,
+    icon: IconInline
+  },
+  block: {
+    title: messages.blockTitle,
+    icon: IconCard
+  },
+  embed: {
+    title: messages.embedTitle,
+    icon: IconEmbed
+  }
+};
+export const getButtonGroupOption = (intl, dispatchCommand, {
+  disabled,
+  onClick,
+  selected,
+  appearance,
+  testId,
+  tooltip
+}) => {
+  const {
+    title,
+    icon
+  } = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'];
+  return {
+    title: intl.formatMessage(title),
+    icon,
+    onClick: () => dispatchCommand(onClick),
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip || null,
+    testId,
+    selected
+  };
+};

package/dist/es2019/plugins/card/ui/link-toolbar-icon-dropdown-options.js

@@ -0,0 +1,51 @@
+import { messages } from '../messages';
+import { IconCard } from './assets/card';
+import { IconEmbed } from './assets/embed';
+import { IconInline } from './assets/inline';
+import { IconUrl } from './assets/url';
+const appearancePropsMap = {
+  url: {
+    title: messages.urlTitle,
+    description: messages.urlDescription,
+    icon: IconUrl
+  },
+  inline: {
+    title: messages.inlineTitle,
+    description: messages.inlineDescription,
+    icon: IconInline
+  },
+  block: {
+    title: messages.blockTitle,
+    description: messages.blockDescription,
+    icon: IconCard
+  },
+  embed: {
+    title: messages.embedTitle,
+    description: messages.embedDescription,
+    icon: IconEmbed
+  }
+};
+export const getIconDropdownOption = (intl, dispatchCommand, {
+  disabled,
+  onClick,
+  selected,
+  appearance,
+  testId,
+  tooltip
+}) => {
+  const {
+    title,
+    description,
+    icon
+  } = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'];
+  return {
+    title: intl.formatMessage(title),
+    description: intl.formatMessage(description),
+    icon,
+    onClick: () => dispatchCommand(onClick),
+    selected: Boolean(selected),
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip,
+    testId
+  };
+};

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 export const embedCardStyles = css`
   .ProseMirror {
     .embedCardView-content-wrap[layout^='wrap-'] {
@@ -19,6 +19,6 @@ export const embedCardStyles = css`
     }
   }
 `;
-export const EmbedSpacing = styled.div`
+export const embedSpacingStyles = css`
   margin: 0 10px;
 `;

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

@@ -0,0 +1 @@
+export {};