@atlaskit/editor-core 161.0.0 → 162.0.2

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

@@ -5,12 +5,12 @@ import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
-import { getPluginState, pluginKey } from '../pm-plugins/plugin-factory';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
-import { setTableSize } from '../commands';
 import { getFeatureFlags } from '../../feature-flags-context';
 import { EmitterEvents } from '../../../extensibility';
 
@@ -44,31 +44,17 @@ export default class TableView extends ReactNodeView {
     _defineProperty(this, "hasHoveredRows", false);
 
     this.getPos = props.getPos;
-    this.editorView = props.view;
     this.tableRenderOptimization = props.tableRenderOptimization;
     this.eventDispatcher = props.eventDispatcher;
   }
 
   getContentDOM() {
-    var _window;
-
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
 
     if (rendered.dom) {
       this.table = rendered.dom;
     }
 
-    if (this.tableRenderOptimization && this.table && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          const height = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-          const width = entry.contentRect ? entry.contentRect.width : entry.target.offsetWidth;
-          setTableSize(height, width)(this.editorView.state, this.editorView.dispatch);
-        }
-      });
-      this.resizeObserver.observe(this.table);
-    }
-
     return rendered;
   }
 

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -2,7 +2,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
-import { pluginKey as tablePluginKey } from '../plugin-factory';
+import { pluginKey as tablePluginKey } from '../plugin-key';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
 export const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);

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

@@ -12,7 +12,8 @@ import { TableCssClassName as ClassName } from '../types';
 import { findControlsHoverDecoration, updateResizeHandles } from '../utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { defaultTableSelection } from './default-table-selection';
-import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
+import { createPluginState, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
 import TableCellNodeView from '../nodeviews/tableCell';
 let isBreakoutEnabled;
 let isDynamicTextSizingEnabled;

package/dist/es2019/plugins/table/pm-plugins/plugin-factory.js

@@ -1,8 +1,7 @@
-import { PluginKey } from 'prosemirror-state';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { handleDocOrSelectionChanged } from '../handlers';
 import reducer from '../reducer';
-export const pluginKey = new PluginKey('tablePlugin');
+import { pluginKey } from './plugin-key';
 export const {
   createPluginState,
   createCommand,

package/dist/es2019/plugins/table/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('tablePlugin');

package/dist/es2019/plugins/table/pm-plugins/safari-delayed-dom-selection-syncing-workaround.js

@@ -22,6 +22,8 @@ export const createPlugin = () => {
           // DOM selection syncing during pointer drag.
           //
           // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+          // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
+          // https://github.com/ProseMirror/prosemirror-view/pull/116
           // This fix removes the selectionToDOM from the view
           // prior to selectionToDOM being called.
           // selectionToDOM checks if there is an "active"

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -4,7 +4,7 @@ import { pluginKey as widthPluginKey } from '../../../../../plugins/width';
 import { mapChildren } from '../../../../../utils/slice';
 import { TableCssClassName as ClassName, TableCssClassName } from '../../../types';
 import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../../../ui/consts';
-import { pluginKey as tablePluginKey } from '../../plugin-factory';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
 import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../../table-resizing/utils/dom';
 import { updateStickyState } from '../commands';
 import { getTop, getTree } from './dom';

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

@@ -13,7 +13,7 @@ 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}

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

@@ -4,9 +4,10 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 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 { tablePopupStyles } from './styles';
 import ContextualMenu from './ContextualMenu';
 const MenuWrapper = styled.div`
   ${tablePopupStyles}

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;
         }
       }
@@ -567,6 +581,7 @@ export const tableStyles = css`
     cursor: col-resize;
   }
 `;
+};
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
@@ -574,10 +589,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};
+  }
 `;