@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/es2019/plugins/table/reducer.js

@@ -86,15 +86,6 @@ export default ((pluginState, action) => {
         ...action.data
       };
 
-    case 'SET_TABLE_SIZE':
-      if (pluginState.tableWidth !== action.data.tableWidth || pluginState.tableHeight !== action.data.tableHeight) {
-        return { ...pluginState,
-          ...action.data
-        };
-      }
-
-      return pluginState;
-
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':

package/dist/es2019/plugins/table/toolbar.js

@@ -6,7 +6,6 @@ import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeader
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
-import { checkIfNumberColumnEnabled } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '../analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -208,9 +207,7 @@ export const getToolbarConfig = config => (state, intl) => {
 
   if (tableObject && pluginState.editorHasFocus) {
     const nodeType = state.schema.nodes.table;
-    const menu = getToolbarMenuConfig(config, { ...pluginState,
-      isNumberColumnEnabled: checkIfNumberColumnEnabled(state)
-    }, intl);
+    const menu = getToolbarMenuConfig(config, pluginState, intl);
     const cellItems = getCellItems(config, state, intl); // Check if we need to show confirm dialog for delete button
 
     let confirmDialog;

package/dist/es2019/plugins/table/transforms/metadata.js

@@ -1,4 +1,4 @@
-import { pluginKey } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
 import { fireAnalytics } from './fix-tables'; // Set metadata on a ProseMirror transaction for debugging purposes in Synchrony
 
 export const setMeta = meta => tr => {

package/dist/es2019/plugins/table/ui/FloatingContextualButton/index.js

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -13,11 +15,8 @@ import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
 import { CONTENT_COMPONENT } from '../../../analytics/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../analytics';
-import { tableFloatingCellButtonStyles } from './styles.css';
+import { tableFloatingCellButtonStyles } from './styles';
 import { ErrorBoundary } from '../../../../ui/ErrorBoundary';
-const ButtonWrapper = styled.div`
-  ${tableFloatingCellButtonStyles}
-`;
 export class FloatingContextualButtonInner extends React.Component {
   constructor(...args) {
     super(...args);
@@ -84,12 +83,14 @@ export class FloatingContextualButtonInner extends React.Component {
 
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const labelCellOptions = formatMessage(messages.cellOptions);
-    const button = /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    const button = jsx("div", {
+      css: tableFloatingCellButtonStyles
+    }, jsx(ToolbarButton, {
       className: ClassName.CONTEXTUAL_MENU_BUTTON,
       selected: isContextualMenuOpen,
       title: labelCellOptions,
       onClick: this.handleClick,
-      iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
+      iconBefore: jsx(ExpandIcon, {
         label: ""
       }),
       "aria-label": labelCellOptions
@@ -98,7 +99,7 @@ export class FloatingContextualButtonInner extends React.Component {
 
     if (this.props.stickyHeader && parentSticky) {
       const pos = targetCellRef.getBoundingClientRect();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         style: {
           position: 'fixed',
           top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
@@ -108,7 +109,7 @@ export class FloatingContextualButtonInner extends React.Component {
       }, button);
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       alignX: "right",
       alignY: "start",
       target: targetCellRef,
@@ -132,9 +133,9 @@ _defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextua
 
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return jsx(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
+  }, jsx(FloatingContextualButton, props));
 }

package/dist/es2019/plugins/table/ui/FloatingContextualButton/{styles.css.js → styles.js}

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N0, N20 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -1,16 +1,14 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { getPluginState, pluginKey } from '../../pm-plugins/plugin-factory';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { pluginKey } from '../../pm-plugins/plugin-key';
 import { contextualMenuDropdownWidth, contextualMenuTriggerSize } from '../consts';
-import { tablePopupStyles } from './styles.css';
-import ContextualMenu from './ContextualMenu';
-const MenuWrapper = styled.div`
-  ${tablePopupStyles}
-`; // offset of the contextual menu dropdown
+import { tablePopupStyles } from './styles';
+import ContextualMenu from './ContextualMenu'; // offset of the contextual menu dropdown
 
 const calculateOffset = (targetCellRef, state) => {
   const {
@@ -64,7 +62,7 @@ const FloatingContextualMenu = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -78,7 +76,9 @@ const FloatingContextualMenu = ({
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     offset: [-7, 0]
-  }, /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(ContextualMenu, {
+  }, jsx("div", {
+    css: tablePopupStyles
+  }, jsx(ContextualMenu, {
     editorView: editorView,
     offset: calculateOffset(targetCellRef, editorView.state),
     isOpen: isOpen,

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/{styles.css.js → styles.js}

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { contextualMenuDropdownWidth } from '../consts';

package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -110,7 +110,7 @@ export class FloatingInsertButton extends React.Component {
     const tableContainerWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_CONTAINER}`);
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
-    const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state);
+    const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: targetCellRef,
       mountTo: tableContainerWrapper || mountPoint,

package/dist/es2019/plugins/table/ui/LayoutButton/index.js

@@ -181,10 +181,9 @@ class LayoutButton extends React.Component {
       targetRef,
       layout,
       isResizing,
-      tableWidth,
       stickyHeader
     } = this.props;
-    return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
+    return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
   }
 
 }

package/dist/es2019/plugins/table/ui/{common-styles.css.js → common-styles.js}

@@ -1,4 +1,5 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
+import { css as deprecatedCss } from 'styled-components';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { fontSize } from '@atlaskit/theme/constants';
 import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
@@ -6,7 +7,7 @@ import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableN
 import { scrollbarStyles } from '../../../ui/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
-import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles.css';
+import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -40,7 +41,10 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
     }
   }
 }`;
-export const tableStyles = css`
+export const tableStyles = props => {
+  var _props$featureFlags;
+
+  return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${N20A};
     color: ${N300};
@@ -54,8 +58,8 @@ export const tableStyles = css`
   }
 
   .ProseMirror {
-    ${tableSharedStyle};
-    ${columnControlsLineMarker};
+    ${tableSharedStyle(props)};
+    ${columnControlsLineMarker(props)};
     ${hoveredDeleteButton};
     ${hoveredCell};
     ${hoveredWarningCell};
@@ -73,7 +77,7 @@ export const tableStyles = css`
       }
 
       td.${ClassName.TABLE_CELL} {
-        background-color: ${tableCellBackgroundColor};
+        background-color: ${tableCellBackgroundColor(props)};
       }
     }
 
@@ -175,7 +179,7 @@ export const tableStyles = css`
 
     tr.sticky th {
       border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor};
+        ${tableBorderColor(props)};
       margin-right: -1px;
     }
 
@@ -242,16 +246,13 @@ export const tableStyles = css`
       border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid white;
     }
 
-    ${props => {
-  var _props$featureFlags;
-
-  return (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '';
-}}
+    ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
+    ${OverflowShadow(props)}
 
-    ${OverflowShadow}
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
       height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
     }
+
     .less-padding {
       padding: 0 ${tablePadding}px;
 
@@ -288,7 +289,7 @@ export const tableStyles = css`
       width: 100% !important;
     }
 
-    ${columnControlsDecoration};
+    ${columnControlsDecoration(props)};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -299,7 +300,7 @@ export const tableStyles = css`
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
         position: relative;
 
-        ${InsertMarker(`
+        ${InsertMarker(props, `
           left: -11px;
           top: 9px;
         `)};
@@ -308,27 +309,29 @@ export const tableStyles = css`
       .${ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER} {
         position: relative;
 
-        ${InsertMarker(`
+        ${InsertMarker(props, `
           right: -1px;
           top: -12px;
         `)};
       }
     }
+
     .${ClassName.CORNER_CONTROLS}.sticky {
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
         /* sticky row insert dot overlaps other row insert and messes things up */
         display: none !important;
       }
     }
+
     .${ClassName.CONTROLS_CORNER_BUTTON} {
       position: absolute;
       top: 0;
       width: ${tableToolbarSize + 1}px;
       height: ${tableToolbarSize + 1}px;
-      border: 1px solid ${tableBorderColor};
+      border: 1px solid ${tableBorderColor(props)};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableToolbarColor};
+      background: ${tableToolbarColor(props)};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -339,6 +342,7 @@ export const tableStyles = css`
       border-color: ${tableBorderSelectedColor};
       background: ${tableToolbarSelectedColor};
     }
+
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
         width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
@@ -347,11 +351,13 @@ export const tableStyles = css`
         border-right-width: 0;
       }
     }
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
       border-color: ${tableBorderSelectedColor};
       background: ${tableToolbarSelectedColor};
       cursor: pointer;
     }
+
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
       border-color: ${tableBorderDeleteColor};
@@ -365,7 +371,7 @@ export const tableStyles = css`
       display: none;
       position: relative;
 
-      ${InsertMarker(`
+      ${InsertMarker(props, `
         bottom: -1px;
         left: -11px;
       `)};
@@ -387,8 +393,8 @@ export const tableStyles = css`
         z-index: ${akEditorUnitZIndex};
       }
 
-      ${HeaderButton(`
-        border-bottom: 1px solid ${tableBorderColor};
+      ${HeaderButton(props, `
+        border-bottom: 1px solid ${tableBorderColor(props)};
         border-right: 0px;
         border-radius: 0;
         height: 100%;
@@ -406,6 +412,7 @@ export const tableStyles = css`
         }
       `)}
     }
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
       ${HeaderButtonHover()}
       ${HeaderButtonDanger()}
@@ -420,25 +427,27 @@ export const tableStyles = css`
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
+
     .${ClassName.NUMBERED_COLUMN_BUTTON} {
-      border: 1px solid ${tableBorderColor};
+      border: 1px solid ${tableBorderColor(props)};
       box-sizing: border-box;
       margin-top: -1px;
       padding-bottom: 2px;
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableToolbarColor};
-      color: ${tableTextColor};
-      border-color: ${tableBorderColor};
+      background-color: ${tableToolbarColor(props)};
+      color: ${tableTextColor(props)};
+      border-color: ${tableBorderColor(props)};
 
       :first-child {
         margin-top: 0;
       }
       :last-child {
-        border-bottom: 1px solid ${tableBorderColor};
+        border-bottom: 1px solid ${tableBorderColor(props)};
       }
     }
+
     .${ClassName.WITH_CONTROLS} {
       .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
         display: block;
@@ -497,7 +506,12 @@ export const tableStyles = css`
        * cell when center/right aligned.
        */
       th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-        > h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child {
+        > h1:first-child,
+        > h2:first-child,
+        > h3:first-child,
+        > h4:first-child,
+        > h5:first-child,
+        > h6:first-child {
           margin-top: 0;
         }
       }
@@ -566,7 +580,12 @@ export const tableStyles = css`
   .ProseMirror.${ClassName.RESIZE_CURSOR} {
     cursor: col-resize;
   }
+
+  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
+    padding-left: revert;
+  }
 `;
+};
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
@@ -574,10 +593,25 @@ export const tableFullPageEditorStyles = css`
     width: 100%;
   }
 `;
+export const deprecatedTableFullPageEditorStyles = deprecatedCss`
+  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+`;
 export const tableCommentEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
     margin-right: 0;
     ${scrollbarStyles};
   }
+`; // TODO remove this after migrated off styled-component
+
+export const deprecatedTableCommentEditorStyles = deprecatedCss`
+  .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
+    margin-left: 0;
+    margin-right: 0;
+    ${scrollbarStyles};
+  }
 `;