@atlaskit/editor-common 63.0.0 → 65.0.0

package/dist/es2019/styles/shared/table.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
@@ -26,7 +26,8 @@ export const TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector
 };
-const tableSharedStyle = css`
+
+const tableSharedStyle = props => css`
   .${TableSharedCssClassName.TABLE_CONTAINER} {
     position: relative;
     margin: 0 auto ${tableMarginBottom}px;
@@ -53,7 +54,7 @@ const tableSharedStyle = css`
       ${themed({
   light: akEditorTableBorder,
   dark: akEditorTableBorderDark
-})};
+})(props)};
     table-layout: fixed;
     font-size: 1em;
     width: 100%;
@@ -85,7 +86,7 @@ const tableSharedStyle = css`
           ${themed({
   light: akEditorTableBorder,
   dark: akEditorTableBorderDark
-})};
+})(props)};
         border-right-width: 0;
         border-bottom-width: 0;
         padding: ${tableCellPadding}px;
@@ -94,7 +95,7 @@ const tableSharedStyle = css`
 
         ${themed({
   dark: getTableCellBackgroundDarkModeColors
-})};
+})(props)};
 
         > *:first-child {
           margin-top: 0;
@@ -117,7 +118,7 @@ const tableSharedStyle = css`
         background-color: ${themed({
   light: akEditorTableToolbar,
   dark: akEditorTableToolbarDark
-})};
+})(props)};
         text-align: left;
 
         /* only apply this styling to codeblocks in default background headercells */
@@ -128,7 +129,7 @@ const tableSharedStyle = css`
   background: themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
+  })(props),
   width: `${gridSize()}px`
 })};
             background-attachment: local, scroll, scroll;
@@ -136,13 +137,13 @@ const tableSharedStyle = css`
             background-color: ${themed({
   light: 'rgb(235, 237, 240)',
   dark: 'rgb(36, 47, 66)'
-})};
+})(props)};
 
             .line-number-gutter {
               background-color: ${themed({
   light: 'rgb(226, 229, 233)',
   dark: DN20
-})};
+})(props)};
             }
 
             /* this is only relevant to the element taken care of by renderer */
@@ -151,20 +152,20 @@ const tableSharedStyle = css`
   background: themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
+  })(props),
   width: `${gridSize()}px`
 })}!important;
 
               background-color: ${themed({
   light: 'rgb(235, 237, 240)',
   dark: 'rgb(36, 47, 66)'
-})}!important;
+})(props)}!important;
 
               // selector lives inside @atlaskit/code
               --ds--code--line-number-bg-color: ${themed({
   light: 'rgb(226, 229, 233)',
   dark: DN20
-})};
+})(props)};
             }
           }
         }
@@ -172,6 +173,7 @@ const tableSharedStyle = css`
     }
   }
 `;
+
 export const calcTableWidth = (layout, containerWidth, addControllerPadding = true) => {
   switch (layout) {
     case 'full-width':

package/dist/es2019/styles/shared/task-decision.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export const TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'

package/dist/es2019/styles/shared/text-color.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export const textColorStyles = css`
   .fabric-text-color-mark {
     color: var(--custom-text-color, inherit);

package/dist/es2019/styles/shared/whitespace.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 const whitespaceSharedStyles = css`
   word-wrap: break-word;
   white-space: pre-wrap;

package/dist/es2019/types/collab.js

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

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

@@ -1,7 +1,9 @@
 import React, { useMemo } from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { fontSize } from '@atlaskit/theme/constants';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 
 function mapBreakpointToFontSize(breakpoint) {
@@ -35,13 +37,22 @@ export function BaseThemeWrapper({
   baseFontSize,
   children
 }) {
+  const {
+    mode
+  } = useGlobalTheme();
   const memoizedTheme = useMemo(() => ({
     baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
-    layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth
-  }), [breakpoint, dynamicTextSizing, baseFontSize]);
+    layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth,
+    // Below is used for editor dark mode.
+    [CHANNEL]: {
+      mode
+    }
+  }), [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, children);
+  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
+    theme: memoizedTheme
+  }, children));
 }
 export function BaseTheme({
   children,

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

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-const CaptionWrapper = styled.div`
+const captionWrapperStyle = css`
   margin-top: 8px;
   text-align: center;
   position: relative;
   color: ${N400};
 `;
-const Placeholder = styled.p`
+const placeholderStyle = css`
   color: ${N200};
   position: absolute;
   top: 0;
@@ -28,10 +30,14 @@ export class CaptionComponent extends React.Component {
       }
     } = this.props;
     const showPlaceholder = !selected && !hasContent;
-    return /*#__PURE__*/React.createElement(CaptionWrapper, _extends({
+    return jsx("div", _extends({
       "data-media-caption": true,
       "data-testid": "media-caption"
-    }, dataAttributes), showPlaceholder ? /*#__PURE__*/React.createElement(Placeholder, null, formatMessage(messages.placeholder)) : null, children);
+    }, dataAttributes, {
+      css: captionWrapperStyle
+    }), showPlaceholder ? jsx("p", {
+      css: placeholderStyle
+    }, formatMessage(messages.placeholder)) : null, children);
   }
 
 }

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

@@ -21,7 +21,8 @@ export default function MediaSingle({
   nodeType = 'mediaSingle',
   fullWidthMode,
   lineLength,
-  hasFallbackContainer = true
+  hasFallbackContainer = true,
+  handleMediaSingleRef
 }) {
   const children = React.Children.toArray(propsChildren);
 
@@ -74,6 +75,7 @@ export default function MediaSingle({
 
   const [media, caption] = children;
   return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
+    innerRef: handleMediaSingleRef,
     width: width,
     layout: layout,
     containerWidth: containerWidth,

package/dist/es2019/ui/MediaSingle/link.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-export const MediaLink = styled.a`
+import { css } from '@emotion/react';
+export const mediaLinkStyle = css`
   position: absolute;
   background: transparent;
   top: 0;
@@ -9,5 +9,4 @@ export const MediaLink = styled.a`
   cursor: pointer;
   width: 100%;
   height: 100%;
-`;
-MediaLink.displayName = 'MediaLink';
+`;

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

@@ -11,7 +11,6 @@ export default class Mention extends PureComponent {
         accessLevel,
         eventHandlers,
         id,
-        portal,
         text
       } = this.props;
       const {
@@ -24,8 +23,7 @@ export default class Mention extends PureComponent {
         accessLevel: accessLevel,
         eventHandlers: eventHandlers,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       });
     });
 

package/dist/es2019/ui/Mention/mention-with-profilecard.js

@@ -1,148 +1,35 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import ProfileCard from '@atlaskit/profilecard';
-import Popup from '../Popup';
-import withOuterListeners from '../with-outer-listeners';
-const ProfilecardResourcedWithListeners = withOuterListeners(ProfileCard);
-export default class MentionWithProfileCard extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      target: null,
-      visible: false,
-      popupAlignX: 'left',
-      popupAlignY: 'top'
-    });
-
-    _defineProperty(this, "handleRef", target => {
-      this.setState({
-        target
-      });
-    });
-
-    _defineProperty(this, "handleMentionNodeRef", component => {
-      if (!component) {
-        this.domNode = null;
-      } else {
-        this.domNode = findDOMNode(component);
-      }
-    });
-
-    _defineProperty(this, "showProfilecard", event => {
-      if (!this.domNode) {
-        return;
-      }
-
-      event.stopPropagation();
-      const [popupAlignX, popupAlignY] = this.calculateLayerPosition();
-      this.setState({
-        popupAlignX,
-        popupAlignY,
-        visible: true
-      });
-    });
-
-    _defineProperty(this, "hideProfilecard", () => {
-      this.setState({
-        visible: false
-      });
-    });
-  }
-
-  calculateLayerPosition() {
-    const domNodeCentreCoords = this.getDomNodeCenterCoords();
-    const visibleAreaCentreCoords = this.getVisibleAreaCentreCoords();
-    const popupAlignY = domNodeCentreCoords.y > visibleAreaCentreCoords.y ? 'top' : 'bottom';
-    const popupAlignX = domNodeCentreCoords.x > visibleAreaCentreCoords.x ? 'right' : 'left';
-    return [popupAlignX, popupAlignY];
-  }
-
-  getDomNodeCenterCoords() {
-    const rect = this.domNode.getBoundingClientRect();
-    return {
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2
-    };
-  }
-
-  getVisibleAreaCentreCoords() {
-    return {
-      x: window.innerWidth / 2,
-      y: window.innerHeight / 2
-    };
-  }
-
-  getActions(id, text, accessLevel) {
-    const {
-      profilecardProvider
-    } = this.props;
-    const actions = profilecardProvider.getActions(id, text, accessLevel);
-    return actions.map(action => {
-      return { ...action,
-        callback: () => {
-          this.setState({
-            visible: false
-          });
-
-          if (action && action.callback) {
-            action.callback();
-          }
-        }
-      };
-    });
-  }
-
-  render() {
-    const {
-      accessLevel,
-      id,
-      mentionProvider,
-      profilecardProvider,
-      text,
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
-      portal
-    } = this.props;
-    const {
-      popupAlignX,
-      popupAlignY,
-      target,
-      visible
-    } = this.state;
-    const {
-      cloudId,
-      resourceClient
-    } = profilecardProvider;
-    return /*#__PURE__*/React.createElement("span", {
-      ref: this.handleRef,
-      onClick: this.showProfilecard
-    }, /*#__PURE__*/React.createElement(ResourcedMention, {
-      ref: this.handleMentionNodeRef,
-      id: id,
-      text: text,
-      accessLevel: accessLevel,
-      mentionProvider: mentionProvider,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-    }), target && portal && visible && /*#__PURE__*/React.createElement(Popup, {
-      offset: [0, 8],
-      target: target,
-      mountTo: portal,
-      alignX: popupAlignX,
-      alignY: popupAlignY
-    }, /*#__PURE__*/React.createElement(ProfilecardResourcedWithListeners, {
-      handleClickOutside: this.hideProfilecard,
-      handleEscapeKeydown: this.hideProfilecard,
-      cloudId: cloudId,
-      userId: id,
-      resourceClient: resourceClient,
-      actions: this.getActions(id, text, accessLevel)
-    })));
-  }
-
+import { ProfileCardTrigger } from '@atlaskit/profilecard';
+export default function MentionWithProfileCard({
+  id,
+  text,
+  accessLevel,
+  mentionProvider,
+  profilecardProvider,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const {
+    cloudId,
+    resourceClient
+  } = profilecardProvider;
+  const actions = useMemo(() => profilecardProvider.getActions(id, text, accessLevel), [accessLevel, id, profilecardProvider, text]);
+  return /*#__PURE__*/React.createElement(ProfileCardTrigger, {
+    cloudId: cloudId,
+    userId: id,
+    resourceClient: resourceClient,
+    actions: actions,
+    trigger: "click",
+    position: "bottom-end"
+  }, /*#__PURE__*/React.createElement(ResourcedMention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }));
 }

package/dist/es2019/ui/Mention/mention-with-providers.js

@@ -51,11 +51,9 @@ export default class MentionWithProviders extends PureComponent {
   render() {
     const {
       accessLevel,
-      userType,
       eventHandlers,
       id,
       mentionProvider,
-      portal,
       text
     } = this.props;
     const {
@@ -70,10 +68,8 @@ export default class MentionWithProviders extends PureComponent {
       id: id,
       text: text,
       accessLevel: accessLevel,
-      userType: userType,
       mentionProvider: mentionProvider,
-      profilecardProvider: profilecardProvider,
-      portal: portal
+      profilecardProvider: profilecardProvider
     }, actionHandlers));
   }
 

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

@@ -1,48 +1,56 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-const Message = styled.div`
-  ${h200} font-weight: normal;
-  color: ${props => {
-  if (props.error) {
-    return R400;
-  }
-
-  if (props.valid) {
-    return G400;
-  }
+const errorColor = css`
+  color: ${R400};
+`;
+const validColor = css`
+  color: ${G400};
+`;
 
-  return N200;
-}};
+const messageStyle = props => css`
+  ${h200(props)} font-weight: normal;
+  color: ${N200};
   margin-top: ${gridSize() / 2}px;
   display: flex;
   justify-content: baseline;
 `;
-const IconWrapper = styled.span`
+
+const iconWrapperStyle = css`
   display: flex;
   margin-right: 4px;
 `;
 export const HelperMessage = ({
   children
-}) => /*#__PURE__*/React.createElement(Message, null, children);
+}) => jsx("div", {
+  css: messageStyle
+}, children);
 export const ErrorMessage = ({
   children
-}) => /*#__PURE__*/React.createElement(Message, {
-  error: true
-}, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+}) => jsx("div", {
+  css: theme => {
+    return [messageStyle(theme), errorColor];
+  }
+}, jsx("span", {
+  css: iconWrapperStyle
+}, jsx(ErrorIcon, {
   size: "small",
   label: "error",
   "aria-label": "error"
 })), children);
 export const ValidMessage = ({
   children
-}) => /*#__PURE__*/React.createElement(Message, {
-  valid: true
-}, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(SuccessIcon, {
+}) => jsx("div", {
+  css: theme => {
+    return [messageStyle(theme), validColor];
+  }
+}, jsx("span", {
+  css: iconWrapperStyle
+}, jsx(SuccessIcon, {
   size: "small",
   label: "success"
 })), children);

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

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -10,7 +11,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-const BlockNode = styled.div`
+const blockNodeStyle = css`
   align-items: center;
   background: ${N30};
   border: 1px dashed ${N50};
@@ -43,15 +44,18 @@ const UnsupportedBlockNode = ({
   });
   const originalNodeType = node === null || node === void 0 ? void 0 : node.attrs.originalValue.type;
   const tooltipOnShowHandler = useCallback(() => dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType), [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement(BlockNode, null, message, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("div", {
+    css: blockNodeStyle,
+    className: "unsupported"
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -10,7 +11,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-const InlineNode = styled.span`
+const inlineNodeStyle = css`
   align-items: center;
   background: ${N30};
   border: 1px dashed ${N50};
@@ -40,15 +41,17 @@ const UnsupportedInlineNode = ({
   });
   const originalNodeType = node === null || node === void 0 ? void 0 : node.attrs.originalValue.type;
   const tooltipOnShowHandler = useCallback(() => dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType), [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement(InlineNode, null, message, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("span", {
+    css: inlineNodeStyle
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
-import styled from 'styled-components';
 import { WidthObserver } from '@atlaskit/width-detector';
 const SCROLLBAR_WIDTH = 30;
 export function getBreakpoint(width = 0) {
@@ -27,10 +29,6 @@ const {
   Provider,
   Consumer
 } = WidthContext;
-const RelativeContainer = /*#__PURE__*/React.memo(styled.div`
-  position: relative;
-  width: 100%;
-`);
 export class WidthProvider extends React.Component {
   constructor(props) {
     super(props);
@@ -54,12 +52,16 @@ export class WidthProvider extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(RelativeContainer, {
+    return jsx("div", {
+      css: css`
+          position: relative;
+          width: 100%;
+        `,
       className: this.props.className
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: this.setWidth,
       offscreen: true
-    }), /*#__PURE__*/React.createElement(Provider, {
+    }), jsx(Provider, {
       value: createWidthContext(this.state.width)
     }, this.props.children));
   }