@atlaskit/editor-core 151.2.1 → 153.0.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { customPanel, PanelType } from '@atlaskit/adf-schema';
+import { panel, PanelType } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
@@ -7,7 +7,7 @@ import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD,
 import { IconPanel, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanelError } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
 import IconCustomPanel from '../quick-insert/assets/custom-panel';
-import { T75 } from '@atlaskit/theme/colors';
+import { T50 } from '@atlaskit/theme/colors';
 
 const insertPanelTypeWithAnalytics = (panelAttributes, state, insert) => {
   const tr = insert(insertPanelType(panelAttributes, state));
@@ -34,7 +34,7 @@ const panelPlugin = (options = {}) => ({
   name: 'panel',
 
   nodes() {
-    const panelNode = customPanel(!!options.UNSAFE_allowCustomPanel);
+    const panelNode = panel(!!options.allowCustomPanel);
     return [{
       name: 'panel',
       node: panelNode
@@ -127,7 +127,7 @@ const panelPlugin = (options = {}) => ({
 
       }];
 
-      if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
+      if (options.allowCustomPanel && options.allowCustomPanelEdit) {
         quickInsertOptions.push({
           id: 'custompanel',
           title: formatMessage(messages.customPanel),
@@ -139,7 +139,7 @@ const panelPlugin = (options = {}) => ({
             return insertPanelTypeWithAnalytics({
               panelType: PanelType.CUSTOM,
               panelIcon: ':rainbow:',
-              panelColor: T75
+              panelColor: T50
             }, state, insert);
           }
 

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

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   info: {
     id: 'fabric.editor.info',

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

@@ -56,7 +56,7 @@ class PanelNodeView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.UNSAFE_allowCustomPanel || false));
+    } = DOMSerializer.renderSpec(document, panelAttrsToDom(node.attrs, pluginOptions.allowCustomPanel || false));
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
@@ -69,7 +69,7 @@ class PanelNodeView {
 
     this.icon.contentEditable = 'false';
     ReactDOM.render( /*#__PURE__*/React.createElement(PanelIcon, {
-      allowCustomPanel: pluginOptions.UNSAFE_allowCustomPanel,
+      allowCustomPanel: pluginOptions.allowCustomPanel,
       panelAttributes: node.attrs,
       providerFactory: this.providerFactory
     }), this.icon);

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

@@ -4,7 +4,7 @@ import NoteIcon from '@atlaskit/icon/glyph/editor/note';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
-import RemoveEmojiIcon from '../floating-toolbar/ui/EditorRemoveEmojiIcon';
+import RemoveEmojiIcon from '@atlaskit/icon/glyph/editor/remove-emoji';
 import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
@@ -20,8 +20,8 @@ export const panelIconMap = {
   [PanelType.INFO]: ':info:',
   [PanelType.NOTE]: ':note:',
   [PanelType.WARNING]: ':warning:',
-  [PanelType.ERROR]: ':error:',
-  [PanelType.SUCCESS]: ':success:',
+  [PanelType.ERROR]: ':cross_mark:',
+  [PanelType.SUCCESS]: ':check_mark:',
   [PanelType.TIP]: ':tip:'
 };
 export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) => {
@@ -228,9 +228,14 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory) =>
       panelType,
       panelColor,
       panelIcon
-    } = panelObject.node.attrs; // force toolbar to be turned on
+    } = panelObject.node.attrs;
 
-    const items = getToolbarItems(formatMessage, nodeType, options.UNSAFE_allowCustomPanel || false, options.UNSAFE_allowCustomPanel && options.UNSAFE_allowCustomPanelEdit || false, providerFactory, panelType, options.UNSAFE_allowCustomPanel ? panelColor : undefined, options.UNSAFE_allowCustomPanel ? panelIcon : undefined);
+    const isStandardPanel = panelType => {
+      return panelType !== PanelType.CUSTOM ? panelType : undefined;
+    }; // force toolbar to be turned on
+
+
+    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined);
 
     const getDomRef = editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);

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

@@ -16,11 +16,18 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   const isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
   const style = panelColor && isCustomPanel ? `background-color: ${panelColor}` : '';
   const hasIcon = !isCustomPanel || !!panelIcon;
-  const panelAttrs = {
+  let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,
     style
   };
+
+  if (panelColor && isCustomPanel) {
+    panelAttrs = { ...panelAttrs,
+      'data-panel-color': panelColor
+    };
+  }
+
   const iconDiv = ['div', {
     class: PanelSharedCssClassName.icon
   }];

package/dist/es2019/plugins/placeholder-text/ui/PlaceholderFloatingToolbar/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import PanelTextInput from '../../../../ui/PanelTextInput';
 import FloatingToolbar, { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from '../../../../ui/FloatingToolbar';
 export const messages = defineMessages({

package/dist/es2019/plugins/quick-insert/index.js

@@ -16,9 +16,9 @@ const quickInsertPlugin = options => ({
       // It's important that this plugin is above TypeAheadPlugin
       plugin: ({
         providerFactory,
-        reactContext,
+        getIntl,
         dispatch
-      }) => quickInsertPluginFactory(quickInsert, providerFactory, reactContext().intl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
+      }) => quickInsertPluginFactory(quickInsert, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
     }];
   },
 
@@ -108,7 +108,7 @@ const setProviderState = providerState => (state, dispatch) => {
   return true;
 };
 
-function quickInsertPluginFactory(quickInsertItems, providerFactory, intl, dispatch, emptyStateHandler) {
+function quickInsertPluginFactory(quickInsertItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
   return new Plugin({
     key: pluginKey,
     state: {
@@ -119,7 +119,7 @@ function quickInsertPluginFactory(quickInsertItems, providerFactory, intl, dispa
           // lazy so it doesn't run on editor initialization
           // memo here to avoid using a singleton cache, avoids editor
           // getting confused when two editors exist within the same page.
-          lazyDefaultItems: () => memoProcessItems(quickInsertItems || [], intl)
+          lazyDefaultItems: () => memoProcessItems(quickInsertItems || [], getIntl())
         };
       },
 

package/dist/es2019/plugins/rank.js

@@ -6,9 +6,10 @@ export default {
   // https://product-fabric.atlassian.net/wiki/spaces/E/pages/1113098008/Selection+Guide#Special-Cases
   'expandKeymap', 'tableSelectionKeymap', 'tableKeymap', 'captionKeymap', // selection keymap needs to be above gap cursor keymap so it can set node selections from
   // left/right arrows
-  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'inlineCode'],
+  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'beforePrimaryToolbar', 'inlineCode'],
   nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'rule', 'panel', 'mention', 'confluenceUnsupportedBlock', 'confluenceUnsupportedInline', 'unsupportedBlock', 'unsupportedInline', 'confluenceJiraIssue', 'hardBreak', 'emoji', 'placeholder', 'mediaSingle', 'mediaGroup', 'table', 'expand', 'nestedExpand', 'media', 'tableHeader', 'decisionList', 'tableRow', 'decisionItem', 'tableCell', 'taskList', 'taskItem', 'extension', 'bodiedExtension', 'inlineExtension', 'layoutSection', 'layoutColumn', 'inlineCard', 'blockCard', 'embedCard'],
-  marks: [// Inline marks
+  marks: [// Fragment mark is both for inline and block elements
+  'fragment', // Inline marks
   'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'typeAheadQuery', // Block marks
   'alignment', 'breakout', 'indentation', 'annotation', //Unsupported mark
   'unsupportedMark', 'unsupportedNodeAttribute']

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

@@ -107,7 +107,8 @@ export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
 
 
   if (selection instanceof GapCursorSelection && // next node allow gap cursor position
-  isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && (isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
+  isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && ( // gap cursor changes block node
+  isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
     // reverse cursor position
     if (dispatch) {
       dispatch(tr.setSelection(new GapCursorSelection($pos, selection.side === Side.RIGHT ? Side.LEFT : Side.RIGHT)).scrollIntoView());

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

@@ -8,6 +8,25 @@ export const getInitialState = state => ({
   decorationSet: getDecorations(state.tr),
   selection: state.selection
 });
+
+const toggleContentEditable = (node, root = false) => {
+  if (root || node.getAttribute('contenteditable') === 'true') {
+    const wasTrue = node.getAttribute('contenteditable') === 'true';
+    node.setAttribute('contenteditable', 'false');
+    requestAnimationFrame(() => {
+      if (wasTrue) {
+        node.setAttribute('contenteditable', 'true');
+      } else {
+        node.removeAttribute('contenteditable');
+      }
+    });
+  } // any children with contenteditable = true block selection from proceeding
+
+
+  const children = Array.from(node.children);
+  children.forEach(child => toggleContentEditable(child));
+};
+
 export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) => {
   return new Plugin({
     key: selectionPluginKey,
@@ -25,7 +44,9 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
           return;
         }
 
-        const analyticsPayload = getNodeSelectionAnalyticsPayload(state.selection) || getAllSelectionAnalyticsPayload(state.selection) || !editorView.mouseDown && (getRangeSelectionAnalyticsPayload(state.selection, state.doc) || getCellSelectionAnalyticsPayload(state)); // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
+        const analyticsPayload = getNodeSelectionAnalyticsPayload(state.selection) || getAllSelectionAnalyticsPayload(state.selection) || // We handle all range/cell selections except click and drag here, which is
+        // handled in mouseup handler below
+        !editorView.mouseDown && (getRangeSelectionAnalyticsPayload(state.selection, state.doc) || getCellSelectionAnalyticsPayload(state)); // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
         // as there were several issues caused by the fact that adding analytics through
         // the plugin adds a new step to the transaction
         // This causes prosemirror to run through some different code paths, eg. attempting
@@ -95,10 +116,13 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
           return false;
         },
         keydown: (editorView, event) => {
-          // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
+          const {
+            state
+          } = editorView; // Firefox bugfix to bypass issue with editing text adjacent to a DOM node with
           // contenteditable="false". (See https://product-fabric.atlassian.net/browse/ED-9452)
           // On keypress, if the head of cursor selection touches a node with contenteditable="false",
           // we temporarily remove the attribute, wait one tick, then restore it with its original value.
+
           if (browser.gecko) {
             const node = editorView.nodeDOM(editorView.state.selection.head);
 
@@ -108,6 +132,31 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
                 node.setAttribute('contenteditable', 'false');
               });
             }
+          } // Bugfix for block ReactNodeViews like table and extension
+          // They could not be selected with Shift + ArrowDown/ArrowUp
+          // Fixed when contenteditable = false, but then you couldn't edit their contents
+          // Therefore, briefly set contenteditable=false to allow the selection through, then set it back to true
+
+
+          if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            let pos;
+
+            if (event.key === 'ArrowDown') {
+              pos = state.selection.$head.after();
+            } else {
+              pos = state.selection.$head.before() - 1; // block extensions only take up one position, dont need to get before()
+
+              if (!editorView.nodeDOM(pos)) {
+                pos = state.doc.resolve(pos).before();
+              }
+            }
+
+            const node = editorView.nodeDOM(pos);
+
+            if (node instanceof HTMLDivElement && node.className.includes('View-content-wrap') // class added by ReactNodeView
+            ) {
+              toggleContentEditable(node, true);
+            }
           }
 
           return false;

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

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   placeholder: {
     id: 'fabric.editor.statusPlaceholder',

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
 import { Status } from '@atlaskit/status/element';
@@ -93,7 +93,10 @@ export class StatusNodeView extends ReactNodeView {
 
 }
 export default function statusNodeView(portalProviderAPI, eventDispatcher, options) {
-  return (node, view, getPos) => new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    options
-  }).init();
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      options
+    }, undefined, undefined, undefined, hasIntlContext).init();
+  };
 }

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

@@ -203,7 +203,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
     } = this.props;
     const {
       color,
-      text
+      text,
+      localId
     } = this.state;
     return target && /*#__PURE__*/React.createElement(PopupWithListeners, {
       target: target,
@@ -221,7 +222,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       onColorClick: this.onColorClick,
       onColorHover: this.onColorHover,
       onTextChanged: this.onTextChanged,
-      onEnter: this.onEnter
+      onEnter: this.onEnter,
+      localId: localId
     })));
   }
 

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

@@ -22,7 +22,7 @@ function addColumnAtCustomStep(column) {
   };
 }
 
-function addColumnAt(column, allowAddColumnCustomStep = false, view) {
+export function addColumnAt(column, allowAddColumnCustomStep = false, view) {
   return tr => {
     let updatedTr = tr;
 
@@ -44,7 +44,6 @@ function addColumnAt(column, allowAddColumnCustomStep = false, view) {
 } // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 
-
 export const addColumnBefore = (state, dispatch, view) => {
   const table = findTable(state.selection);
 

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

@@ -49,6 +49,7 @@ const tablesPlugin = options => ({
     return [{
       name: 'table',
       plugin: ({
+        dispatchAnalyticsEvent,
         dispatch,
         portalProviderAPI,
         eventDispatcher
@@ -60,7 +61,7 @@ const tablesPlugin = options => ({
           breakoutEnabled,
           tableOptions
         } = options || {};
-        return createPlugin(dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+        return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled && dynamicSizingEnabled, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
       }
     }, {
       name: 'tablePMColResizing',

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { tableCellBorderWidth } from '@atlaskit/editor-common';
 import { ShadowEvent, TableCssClassName as ClassName } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
@@ -54,7 +53,7 @@ export class OverflowShadowsObserver {
         }, {
           threshold: [0, 1],
           root: this.wrapper,
-          rootMargin: `0px ${tableInsertColumnButtonSize / 2 - tableCellBorderWidth}px 0px 0px`
+          rootMargin: `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`
         });
         return;
       }

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

@@ -10,7 +10,7 @@ import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plu
 import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
 import { findControlsHoverDecoration, updateResizeHandles } from '../utils';
-import { INPUT_METHOD } from '../../analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
 import TableCellNodeView from '../nodeviews/tableCell';
@@ -18,7 +18,7 @@ let isBreakoutEnabled;
 let isDynamicTextSizingEnabled;
 let isFullWidthModeEnabled;
 let wasFullWidthModeEnabled;
-export const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, pluginConfig, dynamicTextSizing, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, dynamicTextSizing, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled) => {
   var _window;
 
   isBreakoutEnabled = breakoutEnabled;
@@ -47,13 +47,34 @@ export const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, plugi
   const tableCellNodeview = pluginConfig.tableCellOptimization ? {
     tableCell: (node, view, getPos) => new TableCellNodeView(node, view, getPos, observer),
     tableHeader: (node, view, getPos) => new TableCellNodeView(node, view, getPos, observer)
-  } : {};
+  } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
+
+  const invalidTableIds = [];
   return new Plugin({
     state: state,
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
       const tr = transactions.find(tr => tr.getMeta('uiEvent') === 'cut');
 
+      function reportInvalidTableCellSpanAttrs(invalidNodeAttr) {
+        if (invalidTableIds.find(id => id === invalidNodeAttr.tableLocalId)) {
+          return;
+        }
+
+        invalidTableIds.push(invalidNodeAttr.tableLocalId);
+        dispatchAnalyticsEvent({
+          action: ACTION.INVALID_DOCUMENT_ENCOUNTERED,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            nodeType: invalidNodeAttr.nodeType,
+            reason: `${invalidNodeAttr.attribute}: ${invalidNodeAttr.reason}`,
+            tableLocalId: invalidNodeAttr.tableLocalId,
+            spanValue: invalidNodeAttr.spanValue
+          }
+        });
+      }
+
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
         const updatedTr = handleCut(tr, oldState, newState);
@@ -61,7 +82,7 @@ export const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, plugi
       }
 
       if (transactions.find(tr => tr.docChanged)) {
-        return fixTables(newState.tr);
+        return fixTables(newState.tr, reportInvalidTableCellSpanAttrs);
       }
     },
     view: editorView => {

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/colgroup.js

@@ -9,9 +9,9 @@ export const generateColgroup = table => {
       // We slice here to guard against our colwidth array having more entries
       // Than the we actually span. We'll patch the document at a later point.
       cell.attrs.colwidth.slice(0, colspan).forEach(width => {
-        cols.push(['col', {
+        cols.push(['col', width ? {
           style: `width: ${width}px;`
-        }]);
+        } : {}]);
       });
     } else {
       // When we have merged cells on the first row (firstChild),

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/resize-state.js

@@ -25,6 +25,7 @@ export const getResizeState = ({
       cols,
       widths,
       maxSize,
+      tableWidth,
       overflow
     };
   } // Getting the resize state from DOM
@@ -42,6 +43,7 @@ export const getResizeState = ({
     cols,
     widths,
     maxSize,
+    tableWidth,
     overflow
   };
 }; // updates Colgroup DOM node with new widths
@@ -146,7 +148,8 @@ export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex
   });
   let newState = { ...resizeState,
     cols: cols.map(col => {
-      if (columnsIndexes.indexOf(col.index) > -1 || columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
+      if (columnsIndexes.indexOf(col.index) > -1 || // take from prev columns only if dragging the first handle to the left
+      columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
         return col;
       }
 

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

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '../../messages';
 import { clearHoverSelection, hoverTable } from './commands';

package/dist/es2019/plugins/table/transforms/column-width.js

@@ -1,4 +1,5 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
@@ -105,7 +106,10 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
   return tr.setSelection(selectionBookmark.resolve(tr.doc));
 };
 /**
- * This function is called when user inserts/deletes a column in a table to rescale all columns.
+ * This function is called when user inserts/deletes a column in a table to;
+ * - rescale all columns (if the table did not overflow before the insertion)
+ * - and update column widths.
+ *
  * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
  * @param table
  * @param view
@@ -113,6 +117,8 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  */
 
 export const rescaleColumns = (table, view) => tr => {
+  // If the table has been not been resized we skip updating the size
+  // of columns here.
   if (!view || !hasTableBeenResized(table.node)) {
     return tr;
   }
@@ -128,7 +134,8 @@ export const rescaleColumns = (table, view) => tr => {
     return tr;
   }
 
-  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
+
   const maxSize = getTableMaxWidth({
     table: table.node,
     tableStart: table.start,
@@ -144,8 +151,11 @@ export const rescaleColumns = (table, view) => tr => {
     domAtPos,
     maxSize
   });
+  const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
+  const tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
+  // we resize the cells to avoid the overflow occuring
 
-  if (resizeState.overflow) {
+  if (tableDidntPreviouslyOverflow && resizeState.overflow) {
     resizeState = scaleTableTo(resizeState, maxSize);
   }
 

package/dist/es2019/plugins/table/transforms/fix-tables.js

@@ -11,7 +11,35 @@ export const fireAnalytics = (properties = {}) => sendLogs({
     server: 'local',
     user: '-'
   }]
-}); // We attempt to patch the document when we have extra, unneeded, column widths
+});
+
+const validateTableCellNodeAttrs = ({
+  colspan,
+  rowspan,
+  tableLocalId
+}, reportInvalidTableCellSpanAttrs) => {
+  if (colspan && colspan < 0) {
+    reportInvalidTableCellSpanAttrs({
+      nodeType: 'tableCell',
+      attribute: 'colspan',
+      reason: 'negative value',
+      tableLocalId,
+      spanValue: colspan
+    });
+  }
+
+  if (rowspan && rowspan < 0) {
+    reportInvalidTableCellSpanAttrs({
+      nodeType: 'tableCell',
+      attribute: 'rowspan',
+      reason: 'negative value',
+      tableLocalId,
+      spanValue: rowspan
+    });
+  }
+
+  return;
+}; // We attempt to patch the document when we have extra, unneeded, column widths
 // Take this node for example:
 //
 //    ['td', { colwidth: [100, 100, 100], colspan: 2 }]
@@ -19,14 +47,24 @@ export const fireAnalytics = (properties = {}) => sendLogs({
 // This row only spans two columns, yet it contains widths for 3.
 // We remove the third width here, assumed duplicate content.
 
-export const removeExtraneousColumnWidths = (node, basePos, tr) => {
+
+export const removeExtraneousColumnWidths = (node, basePos, tr, reportInvalidTableCellSpanAttrs) => {
   let hasProblems = false;
   tr = replaceCells(tr, node, basePos, cell => {
     const {
       colwidth,
-      colspan
+      colspan,
+      rowspan
     } = cell.attrs;
 
+    if (reportInvalidTableCellSpanAttrs) {
+      validateTableCellNodeAttrs({
+        colspan,
+        rowspan,
+        tableLocalId: node.attrs.localId
+      }, reportInvalidTableCellSpanAttrs);
+    }
+
     if (colwidth && colwidth.length > colspan) {
       hasProblems = true;
       return cell.type.createChecked({ ...cell.attrs,
@@ -46,12 +84,12 @@ export const removeExtraneousColumnWidths = (node, basePos, tr) => {
 
   return false;
 };
-export const fixTables = tr => {
+export const fixTables = (tr, reportInvalidTableCellSpanAttrs) => {
   let hasProblems = false;
   tr.doc.descendants((node, pos) => {
     if (node.type.name === 'table') {
       // in the unlikely event of having to fix multiple tables at the same time
-      hasProblems = removeExtraneousColumnWidths(node, tr.mapping.map(pos), tr);
+      hasProblems = removeExtraneousColumnWidths(node, tr.mapping.map(pos), tr, reportInvalidTableCellSpanAttrs);
     }
   });
 

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { findDomRefAtPos } from 'prosemirror-utils';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common';
 import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
@@ -49,7 +49,7 @@ export class FloatingContextualButtonInner extends React.Component {
         formatMessage
       },
       dispatchAnalyticsEvent
-    } = this.props; //  : Props & InjectedIntlProps
+    } = this.props; //  : Props & WrappedComponentProps
 
     const domAtPos = editorView.domAtPos.bind(editorView);
     let targetCellRef;
@@ -90,8 +90,9 @@ export class FloatingContextualButtonInner extends React.Component {
       title: labelCellOptions,
       onClick: this.handleClick,
       iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
-        label: labelCellOptions
-      })
+        label: ""
+      }),
+      "aria-label": labelCellOptions
     }));
     const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;