@atlaskit/editor-core 153.1.1 → 153.1.5

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

@@ -1,25 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DOMSerializer } from 'prosemirror-model';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
-import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
-import NoteIcon from '@atlaskit/icon/glyph/editor/note';
-import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
-import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
-import { Emoji } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 import { panelAttrsToDom } from '../utils';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 export const panelIcons = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  note: NoteIcon,
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
   tip: TipIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
-  custom: InfoIcon
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
+  custom: PanelInfoIcon
 };
 export const PanelIcon = props => {
   const {
@@ -27,7 +23,9 @@ export const PanelIcon = props => {
     providerFactory,
     panelAttributes: {
       panelType,
-      panelIcon
+      panelIcon,
+      panelIconId,
+      panelIconText
     }
   } = props;
 
@@ -35,6 +33,8 @@ export const PanelIcon = props => {
     return /*#__PURE__*/React.createElement(Emoji, {
       providers: providerFactory,
       shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
       showTooltip: false,
       allowTextFallback: false,
       fitToHeight: akEditorCustomIconSize
@@ -77,7 +77,7 @@ class PanelNodeView {
 
   ignoreMutation(mutation) {
     // ignore mutation if it caused by the icon.
-    return mutation.target === this.icon;
+    return mutation.target === this.icon || mutation.target.parentNode === this.icon;
   }
 
 }

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

@@ -1,5 +1,5 @@
 import { Plugin } from 'prosemirror-state';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../types';
 import { createSelectionClickHandler } from '../../selection/utils';

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const panelStyles = css`
   .ProseMirror {

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

@@ -9,7 +9,7 @@ import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBackgroundPalette';
-import { getPanelTypeBackground } from '@atlaskit/editor-common';
+import { getPanelTypeBackground } from '@atlaskit/editor-common/styles';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
@@ -17,12 +17,30 @@ import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';
 export const panelIconMap = {
-  [PanelType.INFO]: ':info:',
-  [PanelType.NOTE]: ':note:',
-  [PanelType.WARNING]: ':warning:',
-  [PanelType.ERROR]: ':cross_mark:',
-  [PanelType.SUCCESS]: ':check_mark:',
-  [PanelType.TIP]: ':tip:'
+  [PanelType.INFO]: {
+    shortName: ':info:',
+    id: 'atlassian-info'
+  },
+  [PanelType.NOTE]: {
+    shortName: ':note:',
+    id: 'atlassian-note'
+  },
+  [PanelType.WARNING]: {
+    shortName: ':warning:',
+    id: 'atlassian-warning'
+  },
+  [PanelType.ERROR]: {
+    shortName: ':cross_mark:',
+    id: 'atlassian-cross_mark'
+  },
+  [PanelType.SUCCESS]: {
+    shortName: ':check_mark:',
+    id: 'atlassian-check_mark'
+  },
+  [PanelType.TIP]: {
+    shortName: ':tip:',
+    id: 'atlassian-tip'
+  }
 };
 export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) => {
   const items = [{
@@ -72,9 +90,10 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
 
       let previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
       const emojiInfo = panelNode.node.attrs.panelType;
-      const panelInfo = panelIconMap[emojiInfo];
-      const previousEmoji = panelInfo ? {
-        emoji: panelInfo
+      const panelEmoji = panelIconMap[emojiInfo];
+      const previousEmoji = panelEmoji ? {
+        emoji: panelEmoji.shortName,
+        emojiId: panelEmoji.id
       } : {};
 
       if (previousColor === color) {
@@ -111,9 +130,11 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
 
       let previousIcon = panelNode.node.attrs.panelIcon || '';
 
-      if (previousIcon === emoji) {
+      if (previousIcon === emoji.shortName) {
         changePanelType(PanelType.CUSTOM, {
-          emoji
+          emoji: emoji.shortName,
+          emojiId: emoji.id,
+          emojiText: emoji.fallback
         }, true)(state, dispatch);
         return false;
       }
@@ -123,13 +144,15 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         actionSubject: ACTION_SUBJECT.PANEL,
         actionSubjectId: ACTION_SUBJECT_ID.PANEL,
         attributes: {
-          newIcon: emoji,
+          newIcon: emoji.shortName,
           previousIcon: previousIcon
         },
         eventType: EVENT_TYPE.TRACK
       };
       withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
-        emoji
+        emoji: emoji.shortName,
+        emojiId: emoji.id,
+        emojiText: emoji.fallback
       }, true))(state, dispatch);
       return false;
     };
@@ -155,7 +178,9 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         eventType: EVENT_TYPE.TRACK
       };
       withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
-        emoji: undefined
+        emoji: undefined,
+        emojiId: undefined,
+        emojiText: undefined
       }, isCustomPanelEnabled))(state, dispatch);
       return false;
     };
@@ -184,7 +209,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         selectType: 'emoji',
         options: [],
         selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
-        onChange: emojiShortName => changeEmoji(emojiShortName)
+        onChange: emoji => changeEmoji(emoji)
       };
       const removeEmojiButton = {
         id: 'editor.panel.removeEmoji',

package/dist/es2019/plugins/panel/utils.js

@@ -1,6 +1,6 @@
 import { findSelectedNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 export const findPanel = (state, selection) => {
   const {
     panel
@@ -11,11 +11,13 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   const {
     panelColor,
     panelType,
-    panelIcon
+    panelIcon,
+    panelIconId,
+    panelIconText
   } = attrs;
   const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
   const style = panelColor && isCustomPanel ? `background-color: ${panelColor}` : '';
-  const hasIcon = !isCustomPanel || !!panelIcon;
+  const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,
@@ -24,7 +26,9 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
 
   if (panelColor && isCustomPanel) {
     panelAttrs = { ...panelAttrs,
-      'data-panel-color': panelColor
+      'data-panel-color': panelColor,
+      'data-panel-icon-id': panelIconId,
+      'data-panel-icon-text': panelIconText
     };
   }
 

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

@@ -19,7 +19,7 @@ import { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToC
 import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent } from './analytics';
 import { analyticsPluginKey, PasteTypes } from '../../analytics';
 import { insideTable, measurements } from '../../../utils';
-import { measureRender } from '@atlaskit/editor-common';
+import { measureRender } from '@atlaskit/editor-common/utils';
 import { transformSliceToCorrectMediaWrapper, unwrapNestedMediaElements } from '../../media/utils/media-common';
 import { transformSliceToRemoveColumnsWidths, transformSliceRemoveCellBackgroundColor } from '../../table/commands/misc';
 import { upgradeTextToLists, splitParagraphs } from '../../list/transforms';

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { ruleSharedStyles } from '@atlaskit/editor-common';
+import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const ruleStyles = css`
   .ProseMirror {

package/dist/es2019/plugins/selection/gap-cursor/actions.js

@@ -1,6 +1,6 @@
 import { Selection, TextSelection, NodeSelection } from 'prosemirror-state';
 import { removeNodeBefore, findDomRefAtPos } from 'prosemirror-utils';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Direction, isBackward, isForward } from './direction';
 import { GapCursorSelection, Side } from './selection';
 import { isTextBlockNearPos, getMediaNearPos } from './utils';

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

@@ -1,5 +1,5 @@
 import { Plugin, NodeSelection, TextSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { createPluginState, getPluginState } from '../plugin-factory';
 import { selectionPluginKey } from '../types';
 import { getDecorations, shouldRecalcDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../utils';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Status } from '@atlaskit/status/element';
 import { ReactNodeView } from '../../../nodeviews';
 import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
@@ -82,7 +82,7 @@ export class StatusNodeView extends ReactNodeView {
     } = this.node.attrs;
     return /*#__PURE__*/React.createElement(InlineNodeWrapper, {
       useInlineWrapper: options && options.useInlineWrapper
-    }, /*#__PURE__*/React.createElement(IntlStatusContainerView, {
+    }, options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(IntlStatusContainerView, {
       view: this.view,
       text: text,
       color: color,

package/dist/es2019/plugins/status/plugin.js

@@ -1,6 +1,4 @@
 import { NodeSelection, Plugin, TextSelection } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
 import statusNodeView from './nodeviews/status';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
@@ -104,32 +102,7 @@ const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) =>
   props: {
     nodeViews: {
       status: statusNodeView(portalProviderAPI, eventDispatcher, options)
-    },
-
-    decorations(state) {
-      const {
-        tr
-      } = state;
-      const nodeAtSelection = tr.doc.nodeAt(tr.selection.from);
-
-      if (options && options.allowZeroWidthSpaceAfter && nodeAtSelection && nodeAtSelection.type === state.schema.nodes.status) {
-        const delayedNodeRendering = () => {
-          return document.createTextNode(ZERO_WIDTH_SPACE);
-        };
-
-        const decoration = Decoration.widget(tr.selection.from, delayedNodeRendering, {
-          side: 1,
-          key: '#status-zero-width-char-decoration'
-        });
-        const {
-          doc
-        } = state;
-        return DecorationSet.create(doc, [decoration]);
-      }
-
-      return null;
     }
-
   }
 });
 

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

@@ -1,7 +1,19 @@
 import { css } from 'styled-components';
-import { StatusSharedCssClassName } from '@atlaskit/editor-common';
+import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const statusStyles = css`
+  .${TableSharedCssClassName.TABLE_CELL_WRAPPER},
+    .${TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER},
+    [data-layout-section] {
+    .${StatusSharedCssClassName.STATUS_CONTAINER} {
+      max-width: 100%;
+      line-height: 0;
+
+      > span {
+        width: 100%;
+      }
+    }
+  }
   .${StatusSharedCssClassName.STATUS_CONTAINER} {
     // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default
     // as it will make all inline nodes inline-block by default

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import styled from 'styled-components';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';

package/dist/es2019/plugins/table/commands/collapse.js

@@ -1,13 +1,13 @@
 import { collapseSelectedTable } from '../utils/collapse';
 export const wrapTableInExpand = (state, dispatch) => {
-  const canCollapseTr = collapseSelectedTable(state.tr);
+  const collapseTr = collapseSelectedTable(state.tr);
 
-  if (!canCollapseTr) {
+  if (!collapseTr) {
     return false;
   }
 
   if (dispatch) {
-    dispatch(canCollapseTr);
+    dispatch(collapseTr);
   }
 
   return true;

package/dist/es2019/plugins/table/commands/sort.js

@@ -2,7 +2,7 @@ import { Selection } from 'prosemirror-state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos } from '@atlaskit/editor-tables/utils';
 import { convertArrayOfRowsToTableNode, convertTableNodeToArrayOfRows, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import { createCompareNodes } from '@atlaskit/editor-common';
+import { createCompareNodes } from '@atlaskit/editor-common/utils';
 import { pluginKey } from '../../card/pm-plugins/main';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { TableSortStep, TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';

package/dist/es2019/plugins/table/event-handlers.js

@@ -2,8 +2,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import rafSchedule from 'raf-schd';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '../../utils';
 import { closestElement } from '../../utils/dom';
 import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, TABLE_ACTION } from '../analytics';
@@ -74,7 +73,6 @@ export const handleClick = (view, event) => {
   const rowElement = closestElement(element, 'tr');
   const rowIndex = rowElement && rowElement.rowIndex;
   const cellIndex = map.width * rowIndex + colIndex;
-  const posInTable = map.map[cellIndex + 1];
   const {
     dispatch,
     state: {
@@ -90,6 +88,7 @@ export const handleClick = (view, event) => {
   /** Only if the last item is media group, insert a paragraph */
 
   if (isLastItemMediaGroup(editorElement)) {
+    const posInTable = map.map[cellIndex] + editorElement.nodeSize;
     tr.insert(posInTable + table.pos, paragraph.create());
     dispatch(tr);
     setNodeSelection(view, posInTable + table.pos);
@@ -377,8 +376,7 @@ export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mo
 
   if (!hasTableNode || isDragging) {
     return false;
-  } // debounce event handler
-
+  }
 
-  return rafSchedule(eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects));
+  return eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects);
 };

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

@@ -2,7 +2,7 @@
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { isTextInput } from '../../utils/is-text-input';
-import { collapseSelectedTable } from './utils/collapse';
+import { isTableCollapsible } from './utils/collapse';
 import { defaultTableSelection } from './pm-plugins/default-table-selection';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableSortStep } from '@atlaskit/adf-schema/steps';
@@ -86,9 +86,8 @@ const updateCollapseHandler = ({
   }
 
   const expandNodeType = schema.nodes.expand;
-  const isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection); // check result of wrapping without applying it
-
-  const trCanBeCollapsed = collapseSelectedTable(tr); // We're focused on a table + we're not inside an expand
+  const isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
+  const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible; // We're focused on a table + we're not inside an expand
 
   const canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
   !isTableCollapsed && !!trCanBeCollapsed;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { browser } from '@atlaskit/editor-common/utils';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
@@ -9,6 +10,7 @@ import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { IconTable } from '../quick-insert/assets';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
+import { createPlugin as createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin } from './pm-plugins/safari-delayed-dom-selection-syncing-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -46,7 +48,7 @@ const tablesPlugin = options => ({
   },
 
   pmPlugins() {
-    return [{
+    const plugins = [{
       name: 'table',
       plugin: ({
         dispatchAnalyticsEvent,
@@ -106,7 +108,20 @@ const tablesPlugin = options => ({
       plugin: ({
         dispatch
       }) => createTableLocalIdPlugin(dispatch)
-    }];
+    }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
+    // causing issues with table selections in Safari
+    // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+
+    if (browser.safari) {
+      plugins.push({
+        name: 'tableSafariDelayedDomSelectionSyncingWorkaround',
+        plugin: () => {
+          return createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin();
+        }
+      });
+    }
+
+    return plugins;
   },
 
   contentComponent({

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

@@ -3,7 +3,8 @@ import React from 'react';
 import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
-import { browser, calcTableWidth, tableMarginSides } from '@atlaskit/editor-common';
+import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
+import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { isValidPosition } from '../../../utils';
 import { getParentNodeWidth } from '../../../utils/node-width';
@@ -205,11 +206,7 @@ class TableComponent extends React.Component {
       const {
         width
       } = containerWidth;
-
-      if (this.frameId && window) {
-        window.cancelAnimationFrame(this.frameId);
-      }
-
+      this.scaleTableDebounced.cancel();
       scaleTable(this.table, { ...scaleOptions,
         node,
         prevNode: this.node || node,
@@ -255,7 +252,7 @@ class TableComponent extends React.Component {
       }
 
       const parentWidth = this.getParentNodeWidth();
-      this.frameId = this.scaleTableDebounced(parentWidth);
+      this.scaleTableDebounced(parentWidth);
     });
 
     _defineProperty(this, "updateTableContainerWidth", () => {
@@ -381,7 +378,7 @@ class TableComponent extends React.Component {
        */
       window.addEventListener('resize', this.handleWindowResizeDebounced);
       this.updateTableContainerWidth();
-      this.frameId = this.handleTableResizingDebounced(this.props);
+      this.handleTableResizingDebounced();
     }
 
     const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -399,15 +396,15 @@ class TableComponent extends React.Component {
     }
 
     this.handleScrollDebounced.cancel();
+    this.scaleTableDebounced.cancel();
+    this.handleTableResizingDebounced.cancel();
+    this.handleAutoSizeDebounced.cancel();
+    this.handleWindowResizeDebounced.cancel();
 
     if (this.props.allowColumnResizing) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
 
-    if (this.frameId && window) {
-      window.cancelAnimationFrame(this.frameId);
-    }
-
     if (this.overflowShadowsObserver) {
       this.overflowShadowsObserver.dispose();
     }
@@ -458,7 +455,7 @@ class TableComponent extends React.Component {
         updateControls(view.state);
       }
 
-      this.frameId = this.handleTableResizingDebounced(prevProps);
+      this.handleTableResizingDebounced();
     }
   }
 

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

@@ -8,6 +8,7 @@ import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState, pluginKey } from '../pm-plugins/plugin-factory';
 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';
@@ -142,6 +143,13 @@ export default class TableView extends ReactNodeView {
         return true;
       }
 
+      const tableMap = TableMap.get(node);
+      const nextTableMap = TableMap.get(nextNode);
+
+      if (tableMap.width !== nextTableMap.width) {
+        return true;
+      }
+
       return attrKeys.some(key => {
         return node.attrs[key] !== nextNode.attrs[key];
       });

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

@@ -1,7 +1,7 @@
 import { Plugin } from 'prosemirror-state';
 import { findParentDomRefOfType, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { closestElement } from '../../../utils/dom';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';

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

@@ -0,0 +1,63 @@
+import { PluginKey, Plugin } from 'prosemirror-state';
+export const tableSafariDelayedDomSelectionSyncingWorkaroundKey = new PluginKey('tableSafariDelayedDomSelectionSyncingWorkaround');
+export const createPlugin = () => {
+  // From a review of the prosemirror-view source code,
+  // the only places where a view relies on the presence
+  // of view.mouseDown are;
+  //   - when checking it's presence in selectionToDOM
+  //     to delay drag selections
+  //   - to ensure it is cleaned up when the mouseup
+  //     event is not fired in a previous mousedown event
+  // Because we are manually wiping the view.mouseDown,
+  // we manage this custom cleanup ourselves
+  let prevMouseDownDone = null;
+  return new Plugin({
+    key: tableSafariDelayedDomSelectionSyncingWorkaroundKey,
+    props: {
+      handleDOMEvents: {
+        mousedown: view => {
+          // Workaround issue in safari where table selections
+          //  do not work correctly since prosemirror delayed
+          // DOM selection syncing during pointer drag.
+          //
+          // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+          // This fix removes the selectionToDOM from the view
+          // prior to selectionToDOM being called.
+          // selectionToDOM checks if there is an "active"
+          // mouseDown, and if so, it delays running logic
+          // which causes the table selections issue.
+          // The handleDOMEvents are called before ProseMirror
+          // events fired on the editable DOM element.
+          // This means the view.mouseView will not yet be
+          // created when the mousedown event starts.
+          // https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents
+          //
+          // Because selectionToDOM is only added to the script
+          // tasks queue following the mousedown event, we can
+          // prepend a task which will clear the mouseDown from
+          // the view. We do this using a setTimout with no
+          // interval.
+          if (prevMouseDownDone) {
+            // avoid memory leaks when the mouseup event is not fired
+            // in a previous mousedown event
+            prevMouseDownDone();
+          }
+
+          setTimeout(() => {
+            // the ts-ignores here are required due to the
+            // view.mouseDown being an internal which is
+            // not part of the views type signature
+            // @ts-ignore
+            if (view.mouseDown) {
+              // @ts-ignore
+              prevMouseDownDone = view.mouseDown.done.bind(view.mouseDown); // @ts-ignore
+
+              view.mouseDown = null;
+            }
+          });
+          return false;
+        }
+      }
+    }
+  });
+};