@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/es2019/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -1,62 +1,65 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-const ImageContainer = styled.div`
+const imageContainer = css`
   margin: 0 auto ${gridSize() * 3}px;
   height: 80px;
 `;
 
-const ErrorImage = () => /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement("svg", {
+const ErrorImage = () => jsx("div", {
+  css: imageContainer
+}, jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 163.28 218",
   height: "80"
-}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+}, jsx("defs", null, jsx("linearGradient", {
   id: "linear-gradient",
   x1: "133.86",
   x2: "-2.79",
   y1: "136.43",
   y2: "200.15",
   gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
+}, jsx("stop", {
   offset: "0",
   stopColor: "#ffd740"
-}), /*#__PURE__*/React.createElement("stop", {
+}), jsx("stop", {
   offset: "1",
   stopColor: "#ffab00"
-})), /*#__PURE__*/React.createElement("clipPath", {
+})), jsx("clipPath", {
   id: "clip-path"
-}, /*#__PURE__*/React.createElement("path", {
+}, jsx("path", {
   id: "_Polygon_",
   d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
   className: "cls-1",
   "data-name": "<Polygon>"
-})), /*#__PURE__*/React.createElement("style", null, `.cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}`)), /*#__PURE__*/React.createElement("g", {
+})), jsx("style", null, `.cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}`)), jsx("g", {
   id: "Layer_2",
   "data-name": "Layer 2"
-}, /*#__PURE__*/React.createElement("g", {
+}, jsx("g", {
   id: "Software"
-}, /*#__PURE__*/React.createElement("path", {
+}, jsx("path", {
   id: "_Polygon_2",
   d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
   className: "cls-1",
   "data-name": "<Polygon>"
-}), /*#__PURE__*/React.createElement("path", {
+}), jsx("path", {
   d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
   className: "cls-2"
-}), /*#__PURE__*/React.createElement("path", {
+}), jsx("path", {
   fill: "#ffc400",
   d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
-}), /*#__PURE__*/React.createElement("path", {
+}), jsx("path", {
   fill: "#ffab00",
   d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
-}), /*#__PURE__*/React.createElement("path", {
+}), jsx("path", {
   fill: "none",
   stroke: "#344563",
   strokeLinecap: "round",
   strokeMiterlimit: "10",
   strokeWidth: "2",
   d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
-}), /*#__PURE__*/React.createElement("path", {
+}), jsx("path", {
   d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
   className: "cls-6"
 })))));

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field } from '@atlaskit/form';
 import AKToggle from '@atlaskit/toggle';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
 import { RequiredIndicator } from './common/RequiredIndicator';
-const ToggleFieldWrapper = styled.div`
+const toggleFieldWrapper = css`
   display: flex;
 `;
-const ToggleLabel = styled.label`
+const toggleLabel = css`
   display: flex;
   padding: 3px 3px 3px 0px;
   flex-grow: 1;
@@ -40,7 +42,7 @@ function Checkbox({
     isRequired = false,
     defaultValue = false
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
@@ -53,11 +55,11 @@ function Checkbox({
       value: isChecked,
       ...restFieldProps
     } = fieldProps;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AKCheckbox, _extends({}, restFieldProps, {
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
       label: label,
       onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
       isChecked: isChecked
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -75,7 +77,7 @@ function Toggle({
     isRequired = false,
     defaultValue = false
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
@@ -89,15 +91,18 @@ function Toggle({
       value: isChecked,
       ...restFieldProps
     } = fieldProps;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ToggleFieldWrapper, null, /*#__PURE__*/React.createElement(ToggleLabel, {
+    return jsx(Fragment, null, jsx("div", {
+      css: toggleFieldWrapper
+    }, jsx("label", {
+      css: toggleLabel,
       id: id,
       htmlFor: id
-    }, label, isRequired ? /*#__PURE__*/React.createElement(RequiredIndicator, {
+    }, label, isRequired ? jsx(RequiredIndicator, {
       "aria-hidden": "true"
-    }, "*") : null), /*#__PURE__*/React.createElement(AKToggle, _extends({}, restFieldProps, {
+    }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
       isChecked: isChecked
-    }))), /*#__PURE__*/React.createElement(FieldMessages, {
+    }))), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -110,14 +115,14 @@ export default function Boolean({
   onFieldChange
 }) {
   if (field.style === 'toggle') {
-    return /*#__PURE__*/React.createElement(Toggle, {
+    return jsx(Toggle, {
       name: name,
       field: field,
       onFieldChange: onFieldChange
     });
   }
 
-  return /*#__PURE__*/React.createElement(Checkbox, {
+  return jsx(Checkbox, {
     name: name,
     field: field,
     onFieldChange: onFieldChange

package/dist/es2019/ui/ConfigPanel/Fields/TabGroup.js

@@ -1,8 +1,9 @@
+/** @jsx jsx */
 import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-const TabWrapper = styled.div`
+const tabWrapper = css`
   // increase specificity to make sure the tab style is overridden
   &&& [role='tabpanel'][tabindex] {
     padding: 0;
@@ -13,8 +14,9 @@ const TabWrapper = styled.div`
     right: 0;
   }
 `;
-const PanelWrapper = styled.div`
+const panelWrapper = css`
   flex-grow: 1;
+  max-width: 100%;
 `;
 
 const TabGroupImpl = props => {
@@ -33,18 +35,22 @@ const TabGroupImpl = props => {
   const onChange = React.useCallback(index => {
     setActiveTab(index);
   }, [setActiveTab]);
-  return /*#__PURE__*/React.createElement(TabWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
+  return jsx("div", {
+    css: tabWrapper
+  }, jsx(Tabs, {
     id: `configPanelTabs-${field.name}`,
     onChange: onChange,
     selected: activeTab
-  }, /*#__PURE__*/React.createElement(TabList, null, fields.map(({
+  }, jsx(TabList, null, fields.map(({
     name,
     label
-  }) => /*#__PURE__*/React.createElement(Tab, {
+  }) => jsx(Tab, {
     key: `tab-${name}`
-  }, label))), fields.map(field => /*#__PURE__*/React.createElement(TabPanel, {
+  }, label))), fields.map(field => jsx(TabPanel, {
     key: `panel-${field.name}`
-  }, /*#__PURE__*/React.createElement(PanelWrapper, null, renderPanel(field))))));
+  }, jsx("div", {
+    css: panelWrapper
+  }, renderPanel(field))))));
 };
 
 TabGroupImpl.displayName = 'TabGroup';

package/dist/es2019/ui/ConfigPanel/Fields/UserSelect.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 import { Field } from '@atlaskit/form';
-import { hydrateDefaultValues, SmartUserPicker } from '@atlaskit/user-picker';
+import SmartUserPicker, { hydrateDefaultValues } from '@atlaskit/smart-user-picker';
 import { getUserFieldContextProvider } from '@atlaskit/editor-common/extensions';
 import UnhandledType from './UnhandledType';
 import { validate } from '../utils';
@@ -45,6 +45,14 @@ function makeSafe(value) {
   return value.id;
 }
 
+const isOptionData = value => {
+  if (!value) {
+    return false;
+  }
+
+  return (Array.isArray(value) ? value : [value]).every(item => 'name' in item);
+};
+
 function SafeSmartUserPicker({
   context,
   field,
@@ -83,9 +91,10 @@ function SafeSmartUserPicker({
     let cancel = false;
 
     async function hydrate() {
-      const hydrated = await hydrateDefaultValues(makeCompat(safeValue), productKey);
+      const hydrated = await hydrateDefaultValues(undefined, // no need to override baseUrl
+      makeCompat(safeValue), productKey);
 
-      if (cancel) {
+      if (cancel || !isOptionData(hydrated)) {
         return;
       }
 

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -1,6 +1,7 @@
-import React from 'react';
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import Loadable from 'react-loadable';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -12,11 +13,11 @@ const iconWidth = 40;
 const buttonWidth = 40;
 const margin = 16;
 const gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
-const Item = styled.div`
+const item = css`
   display: flex;
   margin-bottom: 24px;
 `;
-const ItemIcon = styled.div`
+const itemIcon = css`
   width: ${iconWidth}px;
   height: ${iconWidth}px;
   overflow: hidden;
@@ -33,7 +34,7 @@ const ItemIcon = styled.div`
     height: ${iconWidth}px;
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -43,13 +44,12 @@ const ItemBody = styled.div`
   flex-grow: 3;
   max-width: calc(100% - ${gapSizeForEllipsis}px);
 `;
-const CenteredItemTitle = styled.div`
+const centeredItemTitle = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
 `;
-CenteredItemTitle.displayName = 'CenteredItemTitle';
-const ItemText = styled.div`
+const itemText = css`
   max-width: 100%;
   white-space: initial;
   .item-summary {
@@ -62,12 +62,10 @@ const ItemText = styled.div`
     text-overflow: ellipsis;
   }
 `;
-ItemText.displayName = 'ItemText';
-const Description = styled.p`
+const descriptionStyle = css`
   margin-bottom: 24px;
 `;
-Description.displayName = 'Description';
-const CloseButtonWrapper = styled.div`
+const closeButtonWrapper = css`
   width: ${buttonWidth}px;
   text-align: right;
 `;
@@ -85,22 +83,35 @@ const Header = ({
     loader: icon,
     loading: () => null
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemIcon, null, /*#__PURE__*/React.createElement(ResolvedIcon, {
+  return jsx(Fragment, null, jsx("div", {
+    css: item
+  }, jsx("div", {
+    css: itemIcon
+  }, jsx(ResolvedIcon, {
     label: title
-  })), /*#__PURE__*/React.createElement(ItemBody, null, summary ? /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
+    css: itemBody
+  }, summary ? jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title",
     id: "context-panel-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, title), jsx("div", {
     className: "item-summary"
-  }, summary)) : /*#__PURE__*/React.createElement(CenteredItemTitle, {
+  }, summary)) : jsx("div", {
+    css: centeredItemTitle,
     id: "context-panel-title"
-  }, title)), /*#__PURE__*/React.createElement(CloseButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  }, title)), jsx("div", {
+    css: closeButtonWrapper
+  }, jsx(Button, {
     appearance: "subtle",
-    iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+    iconBefore: jsx(CrossIcon, {
       label: intl.formatMessage(messages.close)
     }),
     onClick: onClose
-  }))), (description || documentationUrl) && /*#__PURE__*/React.createElement(Description, null, description && /*#__PURE__*/React.createElement(React.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && /*#__PURE__*/React.createElement("a", {
+  }))), (description || documentationUrl) && jsx("p", {
+    css: descriptionStyle
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
     href: documentationUrl

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

@@ -1,9 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
-import styled from 'styled-components';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
@@ -35,9 +32,10 @@ import { smartCardStyles } from '../../plugins/card/styles';
 import { dateStyles } from '../../plugins/date/styles';
 import { embedCardStyles } from '../../plugins/card/ui/styled';
 import { useFeatureFlags } from '../../plugins/feature-flags-context';
+import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 const contentStyles = props => {
-  var _props$featureFlags;
+  var _props$featureFlags, _props$featureFlags2;
 
   return css`
   .ProseMirror {
@@ -50,29 +48,9 @@ const contentStyles = props => {
     ${listsSharedStyles};
     ${indentationSharedStyles};
     ${shadowSharedStyle};
+    ${InlineNodeViewSharedStyles};
   }
 
-  ${tableStyles(props)}
-  ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props)}
-
-  ${blocktypeStyles(props)}
-  ${textFormattingStyles(props)}
-  ${textColorStyles}
-  ${mediaStyles}
-  ${layoutStyles}
-  ${tasksAndDecisionsStyles}
-  ${blockMarksSharedStyles}
-  ${dateSharedStyle}
-  ${annotationSharedStyles(props)}
-  ${embedCardStyles}
-
-  .mediaGroupView-content-wrap ul {
-    padding: 0;
-  }
-`;
-};
-
-const DeprecatedContentStyles = styled.div`
   .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
     pointer-events: none;
     opacity: 0.7;
@@ -96,32 +74,47 @@ const DeprecatedContentStyles = styled.div`
 
   ${placeholderTextStyles}
   ${placeholderStyles}
+  ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props)}
+
+  ${blocktypeStyles(props)}
+  ${textFormattingStyles(props)}
+  ${textColorStyles}
   ${listsStyles}
-  ${ruleStyles}
+  ${ruleStyles(props)}
+  ${mediaStyles}
+  ${layoutStyles}
   ${telepointerStyle}
   ${gapCursorStyles};
-  ${panelStyles}
+  ${tableStyles(props)}
+  ${panelStyles(props)}
   ${fakeCursorStyles}
   ${mentionsStyles}
-  ${({
-  featureFlags
-}) => featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
+  ${(_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
+  ${tasksAndDecisionsStyles}
   ${gridStyles}
   ${linkStyles}
+  ${blockMarksSharedStyles}
+  ${dateSharedStyle}
   ${extensionStyles}
-  ${expandStyles}
+  ${expandStyles(props)}
   ${findReplaceStyles}
   ${taskDecisionStyles}
   ${statusStyles}
+  ${annotationSharedStyles(props)}
   ${smartCardStyles}
   ${smartCardSharedStyles}
   ${dateStyles}
+  ${embedCardStyles}
   ${unsupportedStyles}
 
   .panelView-content-wrap {
     box-sizing: border-box;
   }
 
+  .mediaGroupView-content-wrap ul {
+    padding: 0;
+  }
+
   /** Needed to override any cleared floats, e.g. image wrapping */
 
   div.fabric-editor-block-mark[class^='fabric-editor-align'] {
@@ -164,20 +157,22 @@ const DeprecatedContentStyles = styled.div`
     }
   }
 `;
+};
+
 export default /*#__PURE__*/React.forwardRef((props, ref) => {
   const featureFlags = useFeatureFlags();
   const {
-    allowAnnotation
+    className,
+    children
   } = props;
   const theme = useTheme();
   const memoizedStyle = useMemo(() => contentStyles({
     theme,
-    allowAnnotation,
     featureFlags
-  }), [theme, featureFlags, allowAnnotation]);
-  return jsx(DeprecatedContentStyles, _extends({}, props, {
-    innerRef: ref,
-    featureFlags: featureFlags,
+  }), [theme, featureFlags]);
+  return jsx("div", {
+    className: className,
+    ref: ref,
     css: memoizedStyle
-  }));
+  }, children);
 });

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled from 'styled-components';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -100,15 +100,14 @@ const ViewMore = ({
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: viewMoreItemTheme
-  }, /*#__PURE__*/React.createElement(Item, {
+  return /*#__PURE__*/React.createElement(Item, {
     onClick: item.action,
     elemBefore: /*#__PURE__*/React.createElement(ItemBefore, null, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress
-  }, item.title));
+    onKeyPress: onKeyPress,
+    theme: viewMoreItemTheme
+  }, item.title);
 };
 
 const getSvgIconForItem = ({