@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -1,22 +1,23 @@
+/** @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 { N40 } from '@atlaskit/theme/colors';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
-export const ExpandContainer = styled.div`
+export const expandContainer = css`
   border-bottom: 1px solid ${N40};
 `;
-export const ExpandControl = styled.div`
+export const expandControl = css`
   display: flex;
   height: ${gridSize() * 6}px;
   justify-content: center;
   padding-right: ${gridSize()}px;
 `;
-const ChevronContainer = styled.div`
+const chevronContainer = css`
   display: flex;
   align-items: center;
 
@@ -25,19 +26,17 @@ const ChevronContainer = styled.div`
     height: ${gridSize() * 3}px;
   }
 `;
-const LabelContainer = styled.div`
+const labelContainer = css`
   width: 100%;
   align-items: center;
   display: flex;
   font-weight: 500;
 `;
-const ExpandContentContainer = styled.div`
-  display: ${({
-  isHidden
-}) => isHidden ? 'none' : 'block'};
-  margin-top: -${gridSize}px;
+
+const expandContentContainer = isHidden => css`
+  display: ${isHidden ? 'none' : 'block'};
+  margin-top: -${gridSize()}px;
 `;
-ExpandContentContainer.displayName = 'ExpandContentContainer';
 
 function Expand({
   field,
@@ -46,18 +45,27 @@ function Expand({
   intl
 }) {
   const [expanded, setExpanded] = useState(isExpanded);
-  return /*#__PURE__*/React.createElement(ExpandContainer, null, /*#__PURE__*/React.createElement(ExpandControl, null, /*#__PURE__*/React.createElement(LabelContainer, null, field.label), /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: expandContainer
+  }, jsx("div", {
+    css: expandControl
+  }, jsx("div", {
+    css: labelContainer
+  }, field.label), jsx("div", {
+    css: chevronContainer
+  }, jsx(Button, {
     onClick: () => {
       setExpanded(!expanded);
     },
     testId: "form-expand-toggle",
-    iconBefore: expanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    iconBefore: expanded ? jsx(ChevronDownIcon, {
       label: intl.formatMessage(messages.collapse)
-    }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    }) : jsx(ChevronRightIcon, {
       label: intl.formatMessage(messages.expand)
     })
-  }))), /*#__PURE__*/React.createElement(ExpandContentContainer, {
-    isHidden: !expanded
+  }))), jsx("div", {
+    "data-testid": "expand-content-container",
+    css: expandContentContainer(!expanded)
   }, children));
 }
 

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -12,7 +14,7 @@ import FormContent from '../FormContent';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-const ActionsWrapper = styled.div`
+const actionsWrapper = css`
   border-top: 1px solid ${N40A};
   margin-top: ${gridSize() * 2}px;
   padding-top: ${gridSize() * 2}px;
@@ -167,7 +169,7 @@ class FieldsetField extends React.Component {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isAdding ? /*#__PURE__*/React.createElement(Select, {
+      return jsx(React.Fragment, null, isAdding ? jsx(Select, {
         testId: "field-picker",
         defaultMenuIsOpen: true,
         autoFocus: true,
@@ -178,10 +180,10 @@ class FieldsetField extends React.Component {
             this.onSelectItem(option);
           }
         }
-      }) : /*#__PURE__*/React.createElement(Button, {
+      }) : jsx(Button, {
         testId: "add-more",
         appearance: "subtle",
-        iconBefore: /*#__PURE__*/React.createElement(AddCircleIcon, {
+        iconBefore: jsx(AddCircleIcon, {
           size: "small",
           label: intl.formatMessage(messages.addField)
         }),
@@ -218,9 +220,9 @@ class FieldsetField extends React.Component {
       visibleFields
     } = this.state;
     const children = this.renderActions();
-    return /*#__PURE__*/React.createElement(React.Fragment, null, error && /*#__PURE__*/React.createElement(FieldsetError, {
+    return jsx(Fragment, null, error && jsx(FieldsetError, {
       message: error
-    }), /*#__PURE__*/React.createElement("div", null, options.showTitle && /*#__PURE__*/React.createElement("h5", null, label), /*#__PURE__*/React.createElement(FormContent, {
+    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormContent, {
       fields: selectedFields,
       parentName: name,
       extensionManifest: extensionManifest,
@@ -229,8 +231,9 @@ class FieldsetField extends React.Component {
       onClickRemove: this.onClickRemove,
       onFieldChange: onFieldChange,
       firstVisibleFieldName: firstVisibleFieldName
-    }), children && /*#__PURE__*/React.createElement(ActionsWrapper, {
-      testId: "fieldset-actions"
+    }), children && jsx("div", {
+      css: actionsWrapper,
+      "data-testId": "fieldset-actions"
     }, children)));
   }
 
@@ -239,12 +242,14 @@ class FieldsetField extends React.Component {
 function FieldsetError({
   message
 }) {
-  return /*#__PURE__*/React.createElement(SectionMessageWrapper, null, /*#__PURE__*/React.createElement(SectionMessage, {
+  return jsx("div", {
+    css: sectionMessageWrapper
+  }, jsx(SectionMessage, {
     appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, message)));
+  }, jsx("p", null, message)));
 }
 
-const SectionMessageWrapper = styled.div`
+const sectionMessageWrapper = css`
   margin-bottom: 24px;
 `;
 export default injectIntl(FieldsetField);

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
-import styled from 'styled-components';
-const ItemWrapper = styled.div`
+const itemWrapper = css`
   display: flex;
   align-items: center;
 
@@ -12,15 +12,13 @@ const ItemWrapper = styled.div`
     color: currentColor;
   }
 `;
-const IconWrapper = styled.span`
-  ${({
-  context
-}) => context === 'menu' && `
-    align-self: flex-start;
-    margin-top: 3px;
-  `}
+const iconWrapper = css`
   line-height: 1;
 `;
+const iconWrapperMenu = css`
+  align-self: flex-start;
+  margin-top: 3px;
+`;
 
 const getIconSize = (context, description) => {
   if (context === 'value' || !description) {
@@ -37,15 +35,17 @@ export const formatOptionLabel = ({
 }, {
   context
 }) => {
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, {
-    context: context
-  }, typeof icon === 'string' ? /*#__PURE__*/React.createElement(Avatar, {
+  return jsx("div", {
+    css: itemWrapper
+  }, jsx("span", {
+    css: [iconWrapper, context === 'menu' && iconWrapperMenu]
+  }, typeof icon === 'string' ? jsx(Avatar, {
     src: icon,
     size: getIconSize(context, description),
     appearance: "square"
-  }) : icon), /*#__PURE__*/React.createElement("div", {
+  }) : icon), jsx("div", {
     style: {
       paddingLeft: icon ? gridSize() : 0
     }
-  }, /*#__PURE__*/React.createElement("p", null, label, description && context !== 'value' && /*#__PURE__*/React.createElement("small", null, description))));
+  }, jsx("p", null, label, description && context !== 'value' && jsx("small", null, description))));
 };

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/Fields/common/RequiredIndicator.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-export const RequiredIndicator = styled.span`
+export const requiredIndicator = css`
   color: ${R500};
 `;

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/ConfigPanel/LoadingState.js

@@ -1,13 +1,15 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-const SpinnerWrapper = styled.div`
+const spinnerWrapper = css`
   display: flex;
   justify-content: center;
   margin-top: 64px;
 `;
 
-const LoadingState = () => /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
+const LoadingState = () => jsx("div", {
+  css: spinnerWrapper
+}, jsx(Spinner, {
   size: "small"
 }));
 

package/dist/es2019/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -1,16 +1,20 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import * as colors from '@atlaskit/theme/colors';
 import { messages } from '../messages';
-const RemovableFieldWrapper = styled.div`
+const removableFieldWrapper = css`
   position: relative;
-  margin-bottom: ${props => props.hasMarginBottom ? gridSize() * 2 : 0}px;
+  margin-bottom: 0;
 `;
-const RemoveButtonWrapper = styled.div`
+const wrapperWithMarginBottom = css`
+  margin-bottom: ${gridSize() * 2}px;
+`;
+const removeButtonWrapper = css`
   position: absolute;
   right: 0;
   top: 0;
@@ -35,16 +39,17 @@ const RemovableField = ({
 
   const onClickCallback = React.useCallback(() => onClickRemove && onClickRemove(name), [name, onClickRemove]);
   const hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
-  return /*#__PURE__*/React.createElement(RemovableFieldWrapper, {
-    hasMarginBottom: hasMarginBottom,
+  return jsx("div", {
+    css: [removableFieldWrapper, hasMarginBottom && wrapperWithMarginBottom],
     className: className
-  }, children, canRemoveField && /*#__PURE__*/React.createElement(RemoveButtonWrapper, {
-    testId: `remove-field-${name}`,
+  }, children, canRemoveField && jsx("div", {
+    css: removeButtonWrapper,
+    "data-testid": `remove-field-${name}`,
     onClick: onClickCallback
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: intl.formatMessage(messages.removeField),
     position: "left"
-  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+  }, jsx(CrossCircleIcon, {
     size: "small",
     label: intl.formatMessage(messages.removeField)
   }))));

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,25 @@ const DeprecatedContentStyles = styled.div`
     }
   }
 `;
-export default /*#__PURE__*/React.forwardRef((props, ref) => {
-  const featureFlags = useFeatureFlags();
-  const {
-    allowAnnotation
-  } = props;
-  const theme = useTheme();
-  const memoizedStyle = useMemo(() => contentStyles({
-    theme,
-    allowAnnotation,
-    featureFlags
-  }), [theme, featureFlags, allowAnnotation]);
-  return jsx(DeprecatedContentStyles, _extends({}, props, {
-    innerRef: ref,
-    featureFlags: featureFlags,
-    css: memoizedStyle
-  }));
-});
+};
+
+export const createEditorContentStyle = styles => {
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
+    const featureFlags = useFeatureFlags();
+    const {
+      className,
+      children
+    } = props;
+    const theme = useTheme();
+    const memoizedStyle = useMemo(() => contentStyles({
+      theme,
+      featureFlags
+    }), [theme, featureFlags]);
+    return jsx("div", {
+      className: className,
+      ref: ref,
+      css: [memoizedStyle, styles]
+    }, children);
+  });
+};
+export default createEditorContentStyle();