@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/es2019/plugins/clipboard/pm-plugins/main.js

@@ -3,17 +3,99 @@ import { TextSelection } from 'prosemirror-state';
 import { clipboardPluginKey } from '../plugin-key';
 import { getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../../selection/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../analytics/types/enums';
+import { DOMSerializer } from 'prosemirror-model';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { Fragment } from 'prosemirror-model';
 export const createPlugin = ({
-  dispatchAnalyticsEvent
-}) => new SafePlugin({
-  key: clipboardPluginKey,
-  props: {
-    handleDOMEvents: {
-      cut: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.CUT),
-      copy: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.COPIED)
+  dispatchAnalyticsEvent,
+  schema
+}) => {
+  let editorView;
+
+  const getEditorView = () => editorView;
+
+  return new SafePlugin({
+    key: clipboardPluginKey,
+    view: view => {
+      editorView = view;
+      return {
+        update: view => {
+          editorView = view;
+        }
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        cut: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.CUT),
+        copy: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.COPIED)
+      },
+      clipboardSerializer: createClipboardSerializer(schema, getEditorView)
     }
-  }
-});
+  });
+};
+/**
+ * Overrides Prosemirror's default clipboardSerializer, in order to fix table row copy/paste bug raised in ED-13003.
+ * This allows us to store the original table’s attributes on the new table that the row is wrapped with when it is being copied.
+ * e.g. keeping the layout on a row that is copied.
+ * We store the default serializer in order to call it after we handle the table row case.
+ */
+
+export const createClipboardSerializer = (schema, getEditorView) => {
+  const oldSerializer = DOMSerializer.fromSchema(schema);
+  const newSerializer = new DOMSerializer(oldSerializer.nodes, oldSerializer.marks);
+  const originalSerializeFragment = newSerializer.serializeFragment.bind(newSerializer);
+
+  newSerializer.serializeFragment = (content, options = {}, target) => {
+    var _content$firstChild;
+
+    const editorView = getEditorView();
+    const selection = editorView.state.selection; // We do not need to handle when a user copies a tableRow + other content.
+    // In that scenario it already wraps the Row with correct Table and attributes.
+
+    if (!options.tableWrapperExists) {
+      let i = 0;
+
+      while (i < content.childCount) {
+        var _content$maybeChild;
+
+        if (((_content$maybeChild = content.maybeChild(i)) === null || _content$maybeChild === void 0 ? void 0 : _content$maybeChild.type.name) === 'table') {
+          options.tableWrapperExists = true;
+          break;
+        }
+
+        i++;
+      }
+    } // When the content being copied includes a tableRow that is not already wrapped with a table,
+    // We will wrap it with one ourselves, while preserving the parent table's attributes.
+
+
+    if (((_content$firstChild = content.firstChild) === null || _content$firstChild === void 0 ? void 0 : _content$firstChild.type.name) === 'tableRow' && !options.tableWrapperExists) {
+      // We only want 1 table wrapping the rows.
+      // tableWrapperExist is a custom prop added solely for the purposes of this recursive algorithm.
+      // The function is recursively called for each node in the tree captured in the fragment.
+      // For recursive logic see the bind call above and the prosemirror-model (https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L44
+      // and https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L87)
+      options.tableWrapperExists = true;
+      const parentTable = findParentNodeOfType(schema.nodes.table)(selection);
+      const attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
+      const newTable = schema.nodes.table;
+      const newTableNode = newTable.createChecked({ ...attributes
+      }, content);
+      const newContent = Fragment.from(newTableNode); // Pass updated content into original ProseMirror serializeFragment function.
+      // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+      //@ts-ignore
+
+      return originalSerializeFragment(newContent, options, target);
+    } // If we're not copying any rows, just run default serializeFragment function.
+    // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+    //@ts-ignore
+
+
+    return originalSerializeFragment(content, options, target);
+  };
+
+  return newSerializer;
+};
 export const sendClipboardAnalytics = (view, dispatchAnalyticsEvent, action) => {
   const clipboardAnalyticsPayload = getAnalyticsPayload(view.state, action);
 

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

@@ -1,25 +1,27 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { blockNodesVerticalMargin, akEditorTableCellMinWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorCodeFontFamily, akEditorSelectedNodeClassName, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { codeBlockClassNames } from './ui/class-names';
-export const highlightingCodeBlockStyles = css`
+export const highlightingCodeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
     background-image: ${overflowShadow({
   background: themed({
     light: colors.N20,
     dark: colors.DN50
-  }),
+  })(props),
   width: '8px'
 })};
     background-repeat: no-repeat;
     background-color: ${themed({
   light: colors.N20,
   dark: colors.DN50
-})};
+})(props)};
+
     --ds--code--bg-color: transparent;
+
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
     background-position: 100% 0, 100% 0, 0 0;
@@ -39,12 +41,12 @@ export const highlightingCodeBlockStyles = css`
       background-color: ${themed({
   light: colors.N30,
   dark: colors.DN20
-})};
+})(props)};
       padding: ${gridSize()}px;
       color: ${themed({
   light: colors.N90,
   dark: colors.DN90
-})};
+})(props)};
 
       span {
         display: block;
@@ -60,7 +62,7 @@ export const highlightingCodeBlockStyles = css`
           color: ${themed({
   light: colors.N400,
   dark: colors.DN400
-})};
+})(props)};
         }
       }
     }
@@ -114,7 +116,7 @@ export const highlightingCodeBlockStyles = css`
           caret-color: ${themed({
   light: colors.N800,
   dark: colors.DN500
-})};
+})(props)};
         }
       }
     }
@@ -154,22 +156,24 @@ export const highlightingCodeBlockStyles = css`
     }
   }
 `;
-export const codeBlockStyles = css`
+export const codeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
     background-image: ${overflowShadow({
   background: themed({
     light: colors.N20,
     dark: colors.DN50
-  }),
+  })(props),
   width: '8px'
 })};
+
     --ds--code--bg-color: transparent;
+
     background-repeat: no-repeat;
     background-color: ${themed({
   light: colors.N20,
   dark: colors.DN50
-})};
+})(props)};
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
     background-position: 100% 0, 100% 0, 0 0;
@@ -189,7 +193,7 @@ export const codeBlockStyles = css`
       background-color: ${themed({
   light: colors.N30,
   dark: colors.DN20
-})};
+})(props)};
       padding: ${gridSize()}px;
 
       span {
@@ -206,7 +210,7 @@ export const codeBlockStyles = css`
           color: ${themed({
   light: colors.N400,
   dark: colors.DN400
-})};
+})(props)};
         }
       }
     }
@@ -225,7 +229,7 @@ export const codeBlockStyles = css`
         color: ${themed({
   light: colors.N800,
   dark: colors.DN800
-})};
+})(props)};
         border-radius: ${borderRadius()}px;
         margin: ${gridSize()}px;
         white-space: pre;

package/dist/es2019/plugins/collab-edit/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { TELEPOINTER_DIM_CLASS } from './plugin-state';
 import { colors } from './utils';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';

package/dist/es2019/plugins/collab-edit/ui/avatars.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import AvatarGroup from '@atlaskit/avatar-group';
-import { AvatarContainer } from './styles';
+import { avatarContainer } from './styles';
 import toAvatar from './to-avatar';
 import { scrollToCollabCursor } from '../utils';
 import { getFeatureFlags } from '../../feature-flags-context';
@@ -16,7 +18,9 @@ export const Avatars = /*#__PURE__*/React.memo(props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AvatarContainer, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+  return jsx("div", {
+    css: avatarContainer
+  }, jsx(AvatarGroup, {
     appearance: "stack",
     size: "medium",
     data: avatars,

package/dist/es2019/plugins/collab-edit/ui/colored-avatar-item.js

@@ -1,11 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { getAvatarColor } from '../utils';
-import { Badge } from './styles';
+import { badge } from './styles';
 export const ColoredAvatarItem = props => {
   const color = getAvatarColor(props.sessionId).color.solid;
   const avatar = props.name.substr(0, 1).toUpperCase();
-  return /*#__PURE__*/React.createElement(Badge, {
-    color: color,
+  return jsx("div", {
+    css: badge(color),
     "data-testid": "editor-collab-badge"
   }, avatar);
 };

package/dist/es2019/plugins/collab-edit/ui/invite-to-edit.js

@@ -1,9 +1,11 @@
-import React from 'react';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import { InviteTeamWrapper } from './styles';
+import { inviteTeamWrapper } from './styles';
 
-const ID = props => /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+const ID = props => jsx(Fragment, null, props.children);
 
 export const InviteToEditButton = props => {
   const {
@@ -12,7 +14,7 @@ export const InviteToEditButton = props => {
     selected,
     title
   } = props;
-  const iconBefore = React.useMemo(() => /*#__PURE__*/React.createElement(InviteTeamIcon, {
+  const iconBefore = React.useMemo(() => jsx(InviteTeamIcon, {
     label: title
   }), [title]);
 
@@ -21,7 +23,9 @@ export const InviteToEditButton = props => {
   }
 
   const Wrapper = Component ? Component : ID;
-  return /*#__PURE__*/React.createElement(InviteTeamWrapper, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx("div", {
+    css: inviteTeamWrapper
+  }, jsx(Wrapper, null, jsx(ToolbarButton, {
     className: "invite-to-edit",
     onClick: onClick,
     selected: selected,

package/dist/es2019/plugins/collab-edit/ui/styles.js

@@ -1,14 +1,14 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export const InviteTeamWrapper = styled.div`
+export const inviteTeamWrapper = css`
   background: ${N20};
   border-radius: 50%;
   min-width: ${gridSize() * 4}px;
   margin-left: -${gridSize() / 2}px;
 `;
-export const AvatarContainer = styled.div`
+export const avatarContainer = css`
   margin-right: ${gridSize()}px;
   display: flex;
   align-items: center;
@@ -27,7 +27,7 @@ export const AvatarContainer = styled.div`
     padding: 2px;
   }
 `;
-export const Badge = styled.div`
+export const badge = color => css`
   display: block;
   position: absolute;
   right: 1px;
@@ -36,9 +36,7 @@ export const Badge = styled.div`
   height: 13px;
   z-index: ${akEditorSmallZIndex};
   border-radius: 3px;
-  background: ${({
-  color
-}) => color};
+  background: ${color};
   color: #fff;
   font-size: ${relativeFontSizeToBase16(9)};
   line-height: 0;

package/dist/es2019/plugins/date/nodeviews/date.js

@@ -1,57 +1,46 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { injectIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import { timestampToString, timestampToTaskContext, isPastDate } from '@atlaskit/editor-common/utils';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';
+export function DateNodeView(props) {
+  const {
+    node: {
+      attrs: {
+        timestamp
+      }
+    },
+    view: {
+      state: {
+        doc,
+        schema,
+        selection
+      }
+    },
+    getPos
+  } = props;
+  const intl = useIntl(); // We fall back to selection.$from even though it does not cover all use cases
+  // eg. upon Editor init, selection is at the start, not at the Date node
 
-class DateNodeView extends React.Component {
-  constructor(...args) {
-    super(...args);
+  const $nodePos = typeof getPos === 'function' ? doc.resolve(getPos()) : selection.$from;
+  const parent = $nodePos.parent;
+  const withinIncompleteTask = parent.type === schema.nodes.taskItem && parent.attrs.state !== 'DONE';
+  const color = withinIncompleteTask && isPastDate(timestamp) ? 'red' : undefined;
+  return /*#__PURE__*/React.createElement("span", {
+    className: DateSharedCssClassName.DATE_WRAPPER,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(Date, {
+    color: color,
+    value: timestamp
+  }, withinIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
 
-    _defineProperty(this, "handleClick", event => {
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        state,
-        dispatch
-      } = this.props.view;
-      setDatePickerAt(state.selection.from)(state, dispatch);
-    });
-  }
-
-  render() {
+  function handleClick(event) {
+    event.nativeEvent.stopImmediatePropagation();
     const {
-      node: {
-        attrs: {
-          timestamp
-        }
-      },
-      view: {
-        state: {
-          doc,
-          schema,
-          selection
-        }
-      },
-      intl,
-      getPos
-    } = this.props; // We fall back to selection.$from even though it does not cover all use cases
-    // eg. upon Editor init, selection is at the start, not at the Date node
-
-    const $nodePos = typeof getPos === 'function' ? doc.resolve(getPos()) : selection.$from;
-    const parent = $nodePos.parent;
-    const withinIncompleteTask = parent.type === schema.nodes.taskItem && parent.attrs.state !== 'DONE';
-    const color = withinIncompleteTask && isPastDate(timestamp) ? 'red' : undefined;
-    return /*#__PURE__*/React.createElement("span", {
-      className: DateSharedCssClassName.DATE_WRAPPER,
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement(Date, {
-      color: color,
-      value: timestamp
-    }, withinIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
+      state,
+      dispatch
+    } = props.view;
+    setDatePickerAt(state.selection.from)(state, dispatch);
   }
-
-}
-
-export default injectIntl(DateNodeView);
+}

package/dist/es2019/plugins/date/pm-plugins/main.js

@@ -1,6 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import DateNodeView from '../nodeviews/date';
-import { ReactNodeView } from '../../../nodeviews';
+import { DateNodeView } from '../nodeviews/date';
+import { getInlineNodeViewProducer } from '../../../nodeviews/getInlineNodeViewProducer';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { reducer, mapping, onSelectionChanged } from './utils';
 import { pluginKey } from './plugin-key';
@@ -12,24 +12,22 @@ const {
   onSelectionChanged
 });
 
-const createPlugin = ({
-  dispatch,
-  portalProviderAPI,
-  eventDispatcher
-}) => {
+const createPlugin = pmPluginFactoryParams => {
   const newPluginState = {
     showDatePickerAt: null,
     isNew: false,
     isDateEmpty: false,
     focusDateInput: false
   };
-  const hasIntlContext = true;
   return new SafePlugin({
-    state: createPluginState(dispatch, newPluginState),
+    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
     key: pluginKey,
     props: {
       nodeViews: {
-        date: ReactNodeView.fromComponent(DateNodeView, portalProviderAPI, eventDispatcher, undefined, undefined, hasIntlContext)
+        date: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: DateNodeView
+        })
       }
     }
   });

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`

package/dist/es2019/plugins/date/ui/DatePicker/date-picker-input.js

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { findDateSegmentByPosition, adjustDate, isDatePossiblyValid } from '../../utils/internal';
 import { parseDateType, formatDateType } from '../../utils/formatParse';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../../analytics/types/enums';
 import TextField from '@atlaskit/textfield';
 import { ErrorMessage } from '@atlaskit/form';
-const DateTextFieldWrapper = styled.div`
+const dateTextFieldWrapper = css`
   padding: 22px;
   padding-bottom: 12px;
 `;
@@ -213,7 +215,9 @@ class DatePickerInput extends React.Component {
     const attemptedDateParse = parseDateType(inputText, locale); // Don't display an error for an empty input.
 
     const displayError = (attemptedDateParse === null || !possiblyValid) && inputText !== '';
-    return /*#__PURE__*/React.createElement(DateTextFieldWrapper, null, /*#__PURE__*/React.createElement(TextField, {
+    return jsx("div", {
+      css: dateTextFieldWrapper
+    }, jsx(TextField, {
       name: "datetextfield",
       value: inputText,
       ref: this.handleInputRef,
@@ -223,7 +227,7 @@ class DatePickerInput extends React.Component {
       spellCheck: false,
       autoComplete: "off",
       isInvalid: displayError
-    }), displayError && /*#__PURE__*/React.createElement(ErrorMessage, null, formatMessage(messages.invalidDateError)));
+    }), displayError && jsx(ErrorMessage, null, formatMessage(messages.invalidDateError)));
   }
 
   componentDidUpdate() {

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common/utils';
@@ -8,12 +11,11 @@ import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../../ui/with-outer-listeners';
-import styled from 'styled-components';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
 import { injectIntl } from 'react-intl-next';
 import DatePickerInput from './date-picker-input';
-const PopupContentWrapper = styled.div`
+const popupContentWrapper = css`
   padding: 2px;
   border-radius: ${borderRadius()}px;
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
@@ -127,7 +129,7 @@ class DatePicker extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    return jsx(PopupWithListeners, {
       target: element,
       offset: [0, 8],
       fitHeight: 327,
@@ -138,7 +140,9 @@ class DatePicker extends React.Component {
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement
-    }, /*#__PURE__*/React.createElement(PopupContentWrapper, null, showTextField === true && /*#__PURE__*/React.createElement(DatePickerInput, {
+    }, jsx("div", {
+      css: popupContentWrapper
+    }, showTextField === true && jsx(DatePickerInput, {
       date: date,
       onNewDate: this.handleNewDate,
       onSubmitDate: this.handleKeyboardSubmitDate,
@@ -147,7 +151,7 @@ class DatePicker extends React.Component {
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       autoFocus: autoFocus,
       autoSelectAll: isNew
-    }), /*#__PURE__*/React.createElement(Calendar, {
+    }), jsx(Calendar, {
       onChange: this.handleOnChange,
       onSelect: date => onSelect(date, INPUT_METHOD.PICKER),
       day: day,

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N0, N20, N900 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
@@ -83,7 +83,6 @@ export const emojiStylesNext = css`
       overflow: hidden;
       padding: ${topAndBottomPadding}px ${leftAndRightTextPadding}px;
       pointer-events: none;
-      position: absolute;
       text-decoration: none;
       text-overflow: ellipsis;
       white-space: nowrap;

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

@@ -1,17 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, forwardRef } from 'react';
+
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { expandMessages, ExpandLayoutWrapper } from '@atlaskit/editor-common/ui';
+import { expandMessages, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from '@atlaskit/editor-common/ui';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
 import { expandClassNames } from './class-names';
-const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
 export const withTooltip = WrapperComponent => {
   return class WithSortableColumn extends React.Component {
     constructor(props) {
@@ -22,11 +19,11 @@ export const withTooltip = WrapperComponent => {
       const {
         label
       } = this.props;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         content: label,
         position: "top",
         tag: ExpandLayoutWrapperWithRef
-      }, /*#__PURE__*/React.createElement(WrapperComponent, this.props));
+      }, jsx(WrapperComponent, this.props));
     }
 
   };
@@ -52,10 +49,10 @@ export const CustomButton = props => {
       ...rest
     };
   }, [props]);
-  return /*#__PURE__*/React.createElement(Button, {
+  return jsx(Button, {
     appearance: "subtle",
     className: expandClassNames.iconContainer,
-    iconBefore: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    iconBefore: jsx(ChevronRightIcon, {
       label: label
     }),
     shouldFitContainer: true,
@@ -77,12 +74,14 @@ export const ExpandIconButton = props => {
   const hoverEventCheck = supportsAnyHover ? window.matchMedia('(any-hover: hover)').matches : true; // hoverEventCheck is to disable tooltips for mobile to prevent incorrect hover state causing issues on iOS
 
   if (props.allowInteractiveExpand && hoverEventCheck) {
-    return /*#__PURE__*/React.createElement(ButtonWithTooltip, _extends({
+    return jsx(ButtonWithTooltip, _extends({
       label: label
     }, props));
   }
 
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, null, /*#__PURE__*/React.createElement(ButtonWithoutTooltip, _extends({
+  return jsx("div", {
+    css: expandLayoutWrapperStyle
+  }, jsx(ButtonWithoutTooltip, _extends({
     label: label
   }, props)));
 };