@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/es2019/plugins/expand/ui/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
@@ -10,12 +10,14 @@ const EXPAND_SELECTED_BACKGROUND = themed({
   light: 'rgba(255, 255, 255, 0.6)',
   dark: 'rgba(9, 10, 11, 0.29)'
 });
-const EXPAND_ICON_COLOR = css`
+
+const EXPAND_ICON_COLOR = props => css`
   color: ${themed({
   light: N80A,
   dark: '#d9dde3'
-})};
+})(props)};
 `;
+
 const ACTIVE_STATE_BACKGROUND_COLOR = themed({
   dark: `#0C294F`
 });
@@ -38,13 +40,16 @@ const DANGER_STATE_BORDER_COLOR = themed({
 const DANGER_STATE_BORDER_RADIUS = themed({
   dark: '3px'
 });
-export const expandStyles = css`
+export const expandStyles = props => css`
   .${expandClassNames.icon} > div {
     display: flex;
   }
 
   .${expandClassNames.prefix} {
-    ${sharedExpandStyles.ContainerStyles}
+    ${sharedExpandStyles.containerStyles({
+  expanded: false,
+  focused: false
+})(props)}
     overflow: hidden;
     cursor: pointer;
     box-sizing: border-box;
@@ -54,7 +59,7 @@ export const expandStyles = css`
     }
 
     .${expandClassNames.iconContainer} svg {
-      ${EXPAND_ICON_COLOR};
+      ${EXPAND_ICON_COLOR(props)};
       transform: rotate(90deg);
     }
 
@@ -63,17 +68,17 @@ export const expandStyles = css`
 
       ::after {
         // Custom background color and borders (for dark theme).
-        background-color: ${ACTIVE_STATE_BACKGROUND_COLOR};
-        border: ${ACTIVE_STATE_BORDER};
-        border-radius: ${ACTIVE_STATE_BORDER_RADIUS};
+        background-color: ${ACTIVE_STATE_BACKGROUND_COLOR(props)};
+        border: ${ACTIVE_STATE_BORDER(props)};
+        border-radius: ${ACTIVE_STATE_BORDER_RADIUS(props)};
       }
     }
 
     &.danger {
-      background: ${DANGER_STATE_BACKGROUND_COLOR};
-      border: ${DANGER_STATE_BORDER};
-      border-color: ${DANGER_STATE_BORDER_COLOR};
-      border-radius: ${DANGER_STATE_BORDER_RADIUS};
+      background: ${DANGER_STATE_BACKGROUND_COLOR(props)};
+      border: ${DANGER_STATE_BORDER(props)};
+      border-color: ${DANGER_STATE_BORDER_COLOR(props)};
+      border-radius: ${DANGER_STATE_BORDER_RADIUS(props)};
     }
   }
 
@@ -86,29 +91,32 @@ export const expandStyles = css`
   }
 
   .${expandClassNames.content} {
-    ${sharedExpandStyles.ContentStyles}
+    ${sharedExpandStyles.contentStyles({
+  expanded: false,
+  focused: false
+})(props)}
     cursor: text;
     padding-top: 0px;
   }
 
   .${expandClassNames.titleInput} {
-    ${sharedExpandStyles.TitleInputStyles}
+    ${sharedExpandStyles.titleInputStyles(props)}
   }
 
   .${expandClassNames.titleContainer} {
-    ${sharedExpandStyles.TitleContainerStyles};
+    ${sharedExpandStyles.titleContainerStyles(props)};
     overflow: visible;
   }
 
   .${expandClassNames.expanded} {
-    background: ${EXPAND_SELECTED_BACKGROUND};
+    background: ${EXPAND_SELECTED_BACKGROUND(props)};
     border-color: ${themed({
   light: N40A,
   dark: DN50
-})};
+})(props)};
 
     .${expandClassNames.content} {
-      padding-top: ${gridSize}px;
+      padding-top: ${gridSize()}px;
     }
   }
 
@@ -116,11 +124,13 @@ export const expandStyles = css`
     width: 100%;
   }
 
+  /* stylelint-disable property-no-unknown, value-keyword-case */
   .${expandClassNames.prefix}:(.${expandClassNames.expanded}) {
     .expand-content-wrapper {
       height: auto;
     }
   }
+  /* stylelint-enable property-no-unknown, value-keyword-case */
 
   .${expandClassNames.prefix}:not(.${expandClassNames.expanded}) {
     .ak-editor-expand__content {
@@ -133,7 +143,7 @@ export const expandStyles = css`
     }
 
     .${expandClassNames.iconContainer} svg {
-      ${EXPAND_ICON_COLOR};
+      ${EXPAND_ICON_COLOR(props)};
       transform: rotate(0deg);
     }
 
@@ -145,8 +155,8 @@ export const expandStyles = css`
         border-color: ${themed({
   light: N50A,
   dark: DN50
-})};
-        background: ${EXPAND_SELECTED_BACKGROUND};
+})(props)};
+        background: ${EXPAND_SELECTED_BACKGROUND(props)};
       }
     }
   }

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { overflowShadow } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { Wrapper, Header, Content, ContentWrapper, widerLayoutClassName } from './styles';
-import { Overlay } from '../styles';
+import { wrapperStyle, Header, Content, ContentWrapper, widerLayoutClassName } from './styles';
+import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
 import { pluginKey as widthPluginKey } from '../../../../width';
 import WithPluginState from '../../../../../ui/WithPluginState';
@@ -32,7 +34,7 @@ const Extension = props => {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  return /*#__PURE__*/React.createElement(WithPluginState, {
+  return jsx(WithPluginState, {
     editorView: view,
     plugins: {
       widthState: widthPluginKey
@@ -42,21 +44,25 @@ const Extension = props => {
         width: 0
       }
     }) => {
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        innerRef: handleRef,
+      return jsx("div", {
+        ref: handleRef,
         "data-layout": node.attrs.layout,
         className: classNames,
-        extensionWidth: calcBreakoutWidth(node.attrs.layout, widthState.width)
-      }, /*#__PURE__*/React.createElement("div", {
+        css: theme => {
+          const extensionWidth = calcBreakoutWidth(node.attrs.layout, widthState.width);
+          return wrapperStyle(theme, extensionWidth);
+        }
+      }, jsx("div", {
         className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
-      }, /*#__PURE__*/React.createElement(Overlay, {
+      }, jsx("div", {
+        css: overlay,
         className: "extension-overlay"
-      }), /*#__PURE__*/React.createElement(Header, {
+      }), jsx(Header, {
         contentEditable: false,
         className: headerClassNames
-      }, !removeBorder && /*#__PURE__*/React.createElement(ExtensionLozenge, {
+      }, !removeBorder && jsx(ExtensionLozenge, {
         node: node
-      }), children), hasBody && /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Content, {
+      }), children), hasBody && jsx(ContentWrapper, null, jsx(Content, {
         innerRef: handleContentDOMRef,
         className: "extension-content block"
       }))));

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
-import { Wrapper as WrapperDefault, padding } from '../styles';
+import { wrapperDefault, padding } from '../styles';
 const dataConsumerSelector = '[data-mark-type="dataConsumer"]';
 export const widerLayoutClassName = 'wider-layout';
-export const Wrapper = styled(WrapperDefault)`
+export const wrapperStyle = (theme, extensionWidth) => css`
+  ${wrapperDefault(theme)}
+
   &.without-frame {
     background: transparent;
   }
@@ -16,7 +19,7 @@ export const Wrapper = styled(WrapperDefault)`
     overflow-x: auto;
   }
 
-  /* extension container breakout, only works on top level*/
+  /* extension container breakout, only works on top level */
   .ProseMirror
     > ${dataConsumerSelector}
     > [extensiontype]
@@ -24,9 +27,7 @@ export const Wrapper = styled(WrapperDefault)`
     .ProseMirror
     > [extensiontype]
     &.${widerLayoutClassName} {
-    width: ${({
-  extensionWidth
-}) => `${extensionWidth}`};
+    width: ${extensionWidth};
     margin-left: 50%;
     transform: translateX(-50%);
   }

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/index.js

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Overlay } from '../styles';
+import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
-import { Wrapper } from './styles';
+import { wrapperStyle } from './styles';
 export default class InlineExtension extends Component {
   render() {
     const {
@@ -11,11 +13,13 @@ export default class InlineExtension extends Component {
     } = this.props;
     const hasChildren = !!children;
     const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return jsx("div", {
+      css: wrapperStyle,
       className: `extension-container inline ${className}`
-    }, /*#__PURE__*/React.createElement(Overlay, {
+    }, jsx("div", {
+      css: overlay,
       className: "extension-overlay"
-    }), children ? children : /*#__PURE__*/React.createElement(ExtensionLozenge, {
+    }), children ? children : jsx(ExtensionLozenge, {
       node: node
     }));
   }

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,7 +1,9 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { Wrapper as WrapperDefault } from '../styles';
-export const Wrapper = styled(WrapperDefault)`
+import { wrapperDefault } from '../styles';
+export const wrapperStyle = theme => css`
+  ${wrapperDefault(theme)}
+
   cursor: pointer;
   display: inline-flex;
   margin: 1px;

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { getExtensionLozengeData } from '@atlaskit/editor-common/utils';
-import { PlaceholderFallback, PlaceholderFallbackParams, StyledImage } from './styles';
+import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
 export const capitalizeFirstLetter = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
@@ -37,7 +39,8 @@ export default class ExtensionLozenge extends Component {
       url,
       ...rest
     } = lozengeData;
-    return /*#__PURE__*/React.createElement(StyledImage, _extends({
+    return jsx("img", _extends({
+      css: styledImage,
       src: url
     }, rest, {
       alt: extensionKey
@@ -55,15 +58,19 @@ export default class ExtensionLozenge extends Component {
     const params = parameters && parameters.macroParams;
     const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
     const isBlockExtension = name === 'extension';
-    return /*#__PURE__*/React.createElement(PlaceholderFallback, null, lozengeData && !isBlockExtension ? this.renderImage({
+    return jsx("div", {
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? this.renderImage({
       height: ICON_SIZE,
       width: ICON_SIZE,
       ...lozengeData
-    }) : /*#__PURE__*/React.createElement(EditorFileIcon, {
+    }) : jsx(EditorFileIcon, {
       label: title
-    }), /*#__PURE__*/React.createElement("span", {
+    }), jsx("span", {
       className: "extension-title"
-    }, capitalizeFirstLetter(title)), params && !isBlockExtension && /*#__PURE__*/React.createElement(PlaceholderFallbackParams, null, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
+    }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
 
 }

package/dist/es2019/plugins/extension/ui/Extension/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -6,15 +6,15 @@ import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const padding = gridSize();
 export const BODIED_EXT_PADDING = padding * 2;
-export const Wrapper = styled.div`
+export const wrapperDefault = theme => css`
   background: ${themed({
   light: N20,
   dark: DN50
-})};
+})(theme)};
   border-radius: ${borderRadius()}px;
   color: ${themed({
   dark: DN700
-})};
+})(theme)};
   position: relative;
   vertical-align: middle;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -35,7 +35,7 @@ export const Wrapper = styled.div`
     }
   }
 `;
-export const Overlay = styled.div`
+export const overlay = css`
   border-radius: ${borderRadius()}px;
   position: absolute;
   width: 100%;
@@ -44,15 +44,18 @@ export const Overlay = styled.div`
   pointer-events: none;
   transition: opacity 0.3s;
 `;
-export const PlaceholderFallback = styled.div`
+export const placeholderFallback = css`
   display: inline-flex;
   align-items: center;
 
   & > img {
     margin: 0 4px;
   }
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: placeholder-fallback;
 `;
-export const PlaceholderFallbackParams = styled.span`
+export const placeholderFallbackParams = css`
   display: inline-block;
   max-width: 200px;
   margin-left: 5px;
@@ -61,7 +64,10 @@ export const PlaceholderFallbackParams = styled.span`
   white-space: nowrap;
   overflow: hidden;
 `;
-export const StyledImage = styled.img`
+export const styledImage = css`
   max-height: 16px;
   max-width: 16px;
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: lozenge-image;
 `;

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { FormattedMessage } from 'react-intl-next';
@@ -7,11 +8,11 @@ import { messages } from './messages';
 
 const noop = () => {};
 
-const SaveIndicatorWrapper = styled.div`
+const saveIndicatorWrapper = css`
   display: flex;
   justify-content: center;
 `;
-const SaveIndicatorContent = styled.div`
+const saveIndicatorContent = css`
   position: fixed;
   width: 256px;
   bottom: 20px;
@@ -27,7 +28,7 @@ const SaveIndicatorContent = styled.div`
     0px 0px 1px rgba(9, 30, 66, 0.31);
   border-radius: 16px;
 `;
-const SaveIndicatorText = styled.span`
+const saveIndicatorText = css`
   padding-left: 6px;
 `;
 export const SaveIndicator = ({
@@ -51,14 +52,19 @@ export const SaveIndicator = ({
       return () => clearTimeout(handleId);
     }
   }, [saving, duration]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children({
+  return jsx(Fragment, null, jsx("div", null, children({
     onSaveStarted,
     onSaveEnded: noop
-  })), visible && saving && /*#__PURE__*/React.createElement(SaveIndicatorWrapper, null, /*#__PURE__*/React.createElement(SaveIndicatorContent, {
+  })), visible && saving && jsx("div", {
+    css: saveIndicatorWrapper
+  }, jsx("div", {
+    css: saveIndicatorContent,
     "data-testid": "save-indicator-content"
-  }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+  }, jsx(CheckCircleIcon, {
     label: "Saving",
     primaryColor: G300,
     size: "small"
-  }), /*#__PURE__*/React.createElement(SaveIndicatorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.saveIndicator)))));
+  }), jsx("span", {
+    css: saveIndicatorText
+  }, jsx(FormattedMessage, messages.saveIndicator)))));
 };

package/dist/es2019/plugins/extension/ui/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const extensionStyles = css`
   .extensionView-content-wrap,
@@ -37,5 +37,6 @@ export const extensionStyles = css`
     .extensionView-content-wrap
     .extension-container {
     width: 100%;
+    max-width: 100%; // ensure width can't go over 100%;
   }
 `;

package/dist/es2019/plugins/fake-text-cursor/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
 export const fakeCursorStyles = css`
   .ProseMirror {

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -51,6 +51,6 @@ export function createFeatureFlagsFromProps(props) {
     maxUnsafeChromeSpellcheckingVersion: safeNumberFeatureFlag((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.maxUnsafeChromeSpellcheckingVersion),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
     chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.viewChangingExperimentToolbarStyle) === 'string' ? props.featureFlags.viewChangingExperimentToolbarStyle || undefined : undefined
+    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined
   };
 }

package/dist/es2019/plugins/find-replace/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75, B200 } from '@atlaskit/theme/colors';
 export const searchMatchBgColour = B75;
 export const selectedSearchMatchBgColour = B200;

package/dist/es2019/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Component } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -20,6 +20,11 @@ const Spacer = styled.span`
 `;
 const MenuContainer = styled.div`
   min-width: ${menuItemDimensions.width}px;
+
+  // temporary solution before we migrated off dst/item
+  & span[class^='ItemParts__Before'] {
+    margin-right: 4px;
+  }
 `;
 const padding = gridSize();
 export const itemSpacing = gridSize() / 2;
@@ -49,11 +54,7 @@ class Dropdown extends Component {
       items,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: {
-        [itemThemeNamespace]: editorItemTheme
-      }
-    }, /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(item => !item.hidden).map((item, idx) => {
+    return /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(item => !item.hidden).map((item, idx) => {
       const itemContent = /*#__PURE__*/React.createElement(Item, {
         key: idx,
         isCompact: true,
@@ -69,7 +70,10 @@ class Dropdown extends Component {
           hide();
         },
         "data-testid": item.testId,
-        isDisabled: item.disabled
+        isDisabled: item.disabled,
+        theme: {
+          [itemThemeNamespace]: editorItemTheme
+        }
       }, item.title);
 
       if (item.tooltip) {
@@ -80,7 +84,7 @@ class Dropdown extends Component {
       }
 
       return itemContent;
-    })));
+    }));
   }
 
   renderSelected(item, intl) {

package/dist/es2019/plugins/floating-toolbar/ui/styles.js

@@ -48,7 +48,13 @@ const getStyles = (property, {
 export const iconOnlySpacing = {
   '&&': {
     padding: '0px',
-    '&[href]': {
+
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
       padding: '0 2px'
     }
   },

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N30A, B200 } from '@atlaskit/theme/colors';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 export const GRID_GUTTER = 12;