@atlaskit/editor-core 162.0.0 → 164.0.0

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

@@ -9,12 +9,18 @@ import { createTableView } from '../nodeviews/table';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
-import { findControlsHoverDecoration, updateResizeHandles } from '../utils';
+import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, updateResizeHandles } from '../utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import TableCellNodeView from '../nodeviews/tableCell';
+import { transformSliceRemoveCellBackgroundColor, transformSliceToRemoveColumnsWidths, transformSliceToAddTableHeaders } from '../commands/misc';
+import { transformSliceToRemoveOpenLayoutNodes } from '../../layout/utils';
+import { transformSliceToRemoveOpenExpand } from '../../expand/utils';
+import { transformSliceToRemoveOpenBodiedExtension } from '../../extension/actions';
+import { insideTable } from '../../../utils';
+import { isHeaderRowRequired } from '../utils/paste';
 let isBreakoutEnabled;
 let isDynamicTextSizingEnabled;
 let isFullWidthModeEnabled;
@@ -51,6 +57,18 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
   } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   const invalidTableIds = [];
+  let editorViewRef = null;
+
+  const getCurrentEditorState = () => {
+    const editorView = editorViewRef;
+
+    if (!editorView) {
+      return null;
+    }
+
+    return editorView.state;
+  };
+
   return new SafePlugin({
     state: state,
     key: pluginKey,
@@ -88,6 +106,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     },
     view: editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);
+      editorViewRef = editorView;
       return {
         update: view => {
           const {
@@ -142,6 +161,51 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       };
     },
     props: {
+      transformPasted(slice) {
+        const editorState = getCurrentEditorState();
+
+        if (!editorState) {
+          return slice;
+        }
+
+        const {
+          schema
+        } = editorState; // if we're pasting to outside a table or outside a table
+        // header, ensure that we apply any table headers to the first
+        // row of content we see, if required
+
+        if (!insideTable(editorState) && isHeaderRowRequired(editorState)) {
+          slice = transformSliceToAddTableHeaders(slice, schema);
+        }
+
+        slice = transformSliceToFixHardBreakProblemOnCopyFromCell(slice, schema); // We do this separately, so it also applies to drag/drop events
+        // This needs to go before `transformSliceToRemoveOpenExpand`
+
+        slice = transformSliceToRemoveOpenLayoutNodes(slice, schema); // If a partial paste of expand, paste only the content
+        // This needs to go before `transformSliceToRemoveOpenTable`
+
+        slice = transformSliceToRemoveOpenExpand(slice, schema);
+        /** If a partial paste of table, paste only table's content */
+
+        slice = transformSliceToRemoveOpenTable(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        slice = transformSliceToCorrectEmptyTableCells(slice, schema);
+
+        if (!pluginConfig.allowColumnResizing) {
+          slice = transformSliceToRemoveColumnsWidths(slice, schema);
+        } // If we don't allow background on cells, we need to remove it
+        // from the paste slice
+
+
+        if (!pluginConfig.allowBackgroundColor) {
+          slice = transformSliceRemoveCellBackgroundColor(slice, schema);
+        }
+
+        return slice;
+      },
+
       handleClick: ({
         state,
         dispatch

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/ContextualMenu.js

@@ -1,12 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
 import { splitCell } from '@atlaskit/editor-tables/utils';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '../../../../keymaps';
 import ColorPalette from '../../../../ui/ColorPalette';
 import cellBackgroundColorPalette from '../../../../ui/ColorPalette/Palettes/cellBackgroundColorPalette';
 import DropdownMenu from '../../../../ui/DropdownMenu';
-import { Shortcut, CellColourPreview } from '../../../../ui/styles';
+import { shortcutStyle, cellColourPreviewStyles } from '../../../../ui/styles';
 import { closestElement } from '../../../../utils/dom';
 import { INPUT_METHOD } from '../../../analytics';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
@@ -121,13 +124,13 @@ export class ContextualMenu extends Component {
           value: {
             name: 'background'
           },
-          elemAfter: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CellColourPreview, {
-            selectedColor: background,
+          elemAfter: jsx("div", null, jsx("div", {
+            css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+          }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
-          }, /*#__PURE__*/React.createElement(ColorPalette, {
+          }, jsx(ColorPalette, {
             cols: 7,
             palette: cellBackgroundColorPalette,
             onClick: this.setColor,
@@ -141,14 +144,18 @@ export class ContextualMenu extends Component {
         value: {
           name: 'insert_column'
         },
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(addColumnAfter))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(addColumnAfter))
       });
       items.push({
         content: formatMessage(tableMessages.insertRow),
         value: {
           name: 'insert_row'
         },
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(addRowAfter))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(addRowAfter))
       });
       const {
         top,
@@ -235,7 +242,9 @@ export class ContextualMenu extends Component {
         value: {
           name: 'clear'
         },
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(backspace))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(backspace))
       });
       return items.length ? [{
         items
@@ -441,10 +450,10 @@ export class ContextualMenu extends Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
-    }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    }, jsx(DropdownMenu, {
       mountTo: mountPoint,
       items: items,
       isOpen: isOpen,

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

@@ -1,17 +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 } 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 {
@@ -65,7 +62,7 @@ const FloatingContextualMenu = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -79,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/{common-styles.css.js → common-styles.js}

@@ -1,5 +1,4 @@
 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';
@@ -7,7 +6,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 {
@@ -89,9 +88,9 @@ export const tableStyles = props => {
       ${insertRowButtonWrapper}
     }
 
-    /* Delete button*/
+    /* Delete button */
     ${DeleteButton}
-    /* Ends Delete button*/
+    /* Ends Delete button */
 
     /* sticky styles */
     .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
@@ -187,7 +186,7 @@ export const tableStyles = props => {
       border-right-width: 1px;
     }
 
-     /* add left edge for first cell */
+    /* add left edge for first cell */
     .${ClassName.TABLE_STICKY} tr.sticky > th:first-child {
       margin-left: 0px;
     }
@@ -506,7 +505,12 @@ export const tableStyles = props => {
        * 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;
         }
       }
@@ -575,6 +579,10 @@ export const tableStyles = props => {
   .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`
@@ -584,25 +592,10 @@ 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};
-  }
 `;

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

@@ -41,7 +41,8 @@ const Button = cssString => css`
   margin: 0px;
   padding: 0px;
   text-decoration: none;
-  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
+  transition: background 0.1s ease-out 0s,
+    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
   outline: none !important;
   cursor: none;
 
@@ -108,7 +109,7 @@ const InsertButton = () => css`
     bottom: 0;
   }
   .${ClassName.CONTROLS_INSERT_BUTTON_INNER},
-  .${ClassName.CONTROLS_INSERT_BUTTON} {
+    .${ClassName.CONTROLS_INSERT_BUTTON} {
     height: ${tableInsertColumnButtonSize}px;
     width: ${tableInsertColumnButtonSize}px;
   }
@@ -153,8 +154,14 @@ export const insertRowButtonWrapper = css`
   `)}
 `;
 export const columnControlsLineMarker = props => css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child td,
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child th {
+  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
+    table
+    tr:first-child
+    td,
+  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
+    table
+    tr:first-child
+    th {
     position: relative;
 
     &::before {
@@ -167,7 +174,7 @@ export const columnControlsLineMarker = props => css`
 `;
 export const DeleteButton = css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
-  .${ClassName.CONTROLS_DELETE_BUTTON} {
+    .${ClassName.CONTROLS_DELETE_BUTTON} {
     height: ${tableDeleteButtonSize}px;
     width: ${tableDeleteButtonSize}px;
   }
@@ -187,10 +194,11 @@ export const DeleteButton = css`
   }
 `;
 export const OverflowShadow = props => css`
-  .${ClassName.TABLE_RIGHT_SHADOW},
-  .${ClassName.TABLE_LEFT_SHADOW}{
+  .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px);
+    height: calc(
+      100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px
+    );
     position: absolute;
     pointer-events: none;
     top: ${tableMarginTop + tableToolbarSize - 1}px;
@@ -198,11 +206,7 @@ export const OverflowShadow = props => css`
     width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(
-      to left,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
     left: 0px;
   }
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
@@ -217,8 +221,7 @@ export const OverflowShadow = props => css`
     left: calc(100% + 2px);
   }
   .${ClassName.WITH_CONTROLS} {
-    .${ClassName.TABLE_RIGHT_SHADOW},
-    .${ClassName.TABLE_LEFT_SHADOW}{
+    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
       top: ${tableMarginTop - 1}px;
     }
@@ -227,8 +230,7 @@ export const OverflowShadow = props => css`
     }
   }
   .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-    .${ClassName.TABLE_RIGHT_SHADOW},
-    .${ClassName.TABLE_LEFT_SHADOW} {
+    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       top: ${tableControlsSpacing}px;
     }
   }
@@ -284,16 +286,21 @@ export const columnControlsDecoration = props => css`
     display: block;
   }
 
-  table tr:first-child td.${ClassName.TABLE_CELL},
-  table tr:first-child th.${ClassName.TABLE_HEADER_CELL} {
+  table
+    tr:first-child
+    td.${ClassName.TABLE_CELL},
+    table
+    tr:first-child
+    th.${ClassName.TABLE_HEADER_CELL} {
     &.${ClassName.COLUMN_SELECTED},
-    &.${ClassName.HOVERED_COLUMN},
-    &.${ClassName.HOVERED_TABLE} {
+      &.${ClassName.HOVERED_COLUMN},
+      &.${ClassName.HOVERED_TABLE} {
       .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
         ${columnHeaderButtonSelected};
       }
 
-      &.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+      &.${ClassName.HOVERED_CELL_IN_DANGER}
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
         background-color: ${tableToolbarDeleteColor};
         border: 1px solid ${tableBorderDeleteColor};
         border-bottom: none;
@@ -302,8 +309,14 @@ export const columnControlsDecoration = props => css`
     }
   }
 
-  .${ClassName.TABLE_SELECTED} table tr:first-child td.${ClassName.TABLE_CELL},
-  .${ClassName.TABLE_SELECTED} table tr:first-child th.${ClassName.TABLE_HEADER_CELL} {
+  .${ClassName.TABLE_SELECTED}
+    table
+    tr:first-child
+    td.${ClassName.TABLE_CELL},
+    .${ClassName.TABLE_SELECTED}
+    table
+    tr:first-child
+    th.${ClassName.TABLE_HEADER_CELL} {
     .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
       ${columnHeaderButtonSelected};
     }
@@ -312,8 +325,8 @@ export const columnControlsDecoration = props => css`
 export const hoveredDeleteButton = css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
     .${ClassName.SELECTED_CELL},
-    .${ClassName.COLUMN_SELECTED},
-    .${ClassName.HOVERED_CELL} {
+      .${ClassName.COLUMN_SELECTED},
+      .${ClassName.HOVERED_CELL} {
       border: 1px solid ${tableBorderDeleteColor};
     }
     .${ClassName.SELECTED_CELL}::after {
@@ -322,7 +335,8 @@ export const hoveredDeleteButton = css`
   }
 `;
 export const hoveredCell = css`
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     .${ClassName.HOVERED_CELL} {
       position: relative;
       border: 1px solid ${tableBorderSelectedColor};
@@ -330,7 +344,8 @@ export const hoveredCell = css`
   }
 `;
 export const hoveredWarningCell = css`
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     td.${ClassName.HOVERED_CELL_WARNING} {
       background-color: ${Y50} !important; // We need to override the background-color added to the cell
       border: 1px solid ${Y200};
@@ -350,8 +365,7 @@ export const resizeHandle = css`
       z-index: ${resizeHandlerZIndex};
     }
 
-    td.${ClassName.WITH_RESIZE_LINE},
-    th.${ClassName.WITH_RESIZE_LINE} {
+    td.${ClassName.WITH_RESIZE_LINE}, th.${ClassName.WITH_RESIZE_LINE} {
       .${ClassName.RESIZE_HANDLE_DECORATION}::after {
         content: ' ';
         right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
@@ -364,8 +378,14 @@ export const resizeHandle = css`
       }
     }
 
-    table tr:first-child th.${ClassName.WITH_RESIZE_LINE} .${ClassName.RESIZE_HANDLE_DECORATION}::after,
-    table tr:first-child td.${ClassName.WITH_RESIZE_LINE} .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+    table
+      tr:first-child
+      th.${ClassName.WITH_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after,
+      table
+      tr:first-child
+      td.${ClassName.WITH_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
       top: -${tableToolbarSize + tableCellBorderWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
     }

package/dist/es2019/plugins/table/utils/paste.js

@@ -1,6 +1,7 @@
 import { Fragment, Slice } from 'prosemirror-model';
 import { flatten } from 'prosemirror-utils';
-import { flatmap, mapSlice } from '../../../utils/slice'; // lifts up the content of each cell, returning an array of nodes
+import { flatmap, mapSlice } from '../../../utils/slice';
+import { getPluginState } from '../pm-plugins/plugin-factory'; // lifts up the content of each cell, returning an array of nodes
 
 export const unwrapContentFromTable = maybeTable => {
   const {
@@ -44,7 +45,7 @@ export const transformSliceToFixHardBreakProblemOnCopyFromCell = (slice, schema)
     hardBreak
   } = schema.nodes;
   const emptyParagraphNode = paragraph.createAndFill();
-  const hardBreakNode = hardBreak.createAndFill();
+  const hardBreakNode = hardBreak === null || hardBreak === void 0 ? void 0 : hardBreak.createAndFill();
   const paragraphNodeSize = emptyParagraphNode ? emptyParagraphNode.nodeSize : 0;
   const hardBreakNodeSize = hardBreakNode ? hardBreakNode.nodeSize : 0;
   const paragraphWithHardBreakSize = paragraphNodeSize + hardBreakNodeSize;
@@ -95,4 +96,8 @@ export const transformSliceToCorrectEmptyTableCells = (slice, schema) => {
 
     return node;
   });
-};
+};
+export function isHeaderRowRequired(state) {
+  const tableState = getPluginState(state);
+  return tableState && tableState.pluginConfig.isHeaderRowRequired;
+}