@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/es2019/plugins/paste/util/tinyMCE.js

@@ -0,0 +1,185 @@
+import chunk from 'lodash/chunk';
+
+const isPastedFromTinyMCE = pasteEvent => {
+  var _pasteEvent$clipboard, _pasteEvent$clipboard2, _pasteEvent$clipboard3;
+
+  return (_pasteEvent$clipboard = pasteEvent === null || pasteEvent === void 0 ? void 0 : (_pasteEvent$clipboard2 = pasteEvent.clipboardData) === null || _pasteEvent$clipboard2 === void 0 ? void 0 : (_pasteEvent$clipboard3 = _pasteEvent$clipboard2.types) === null || _pasteEvent$clipboard3 === void 0 ? void 0 : _pasteEvent$clipboard3.some(mimeType => mimeType === 'x-tinymce/html')) !== null && _pasteEvent$clipboard !== void 0 ? _pasteEvent$clipboard : false;
+};
+
+export const isPastedFromTinyMCEConfluence = (pasteEvent, html) => {
+  return isPastedFromTinyMCE(pasteEvent) && !!html && !!html.match(/class=\"\s?(confluenceTd|confluenceTh|confluenceTable).+"/gim);
+};
+/**
+ * Wraps html markup with a `<table>` and uses `DOMParser` to generate
+ * and return both the table-wrapped and non-table-wrapped DOM document
+ * instances.
+ */
+
+export const wrapWithTable = html => {
+  const parser = new DOMParser();
+  const nonTableWrappedDoc = parser.parseFromString(html, 'text/html');
+  const tableWrappedDoc = parser.parseFromString(`<table>${html}</table>`, 'text/html');
+  tableWrappedDoc.body.querySelectorAll('meta').forEach(meta => {
+    tableWrappedDoc.head.prepend(meta);
+  });
+  return {
+    tableWrappedDoc,
+    nonTableWrappedDoc
+  };
+};
+
+const exactlyDivisible = (larger, smaller) => larger % smaller === 0;
+
+const getTableElementsInfo = doc => {
+  const cellCount = doc.querySelectorAll('td').length;
+  const thCount = doc.querySelectorAll('th').length;
+  const mergedCellCount = doc.querySelectorAll('td[colspan]:not([colspan="1"])').length;
+  let hasThAfterTd = false;
+  const thsAndCells = doc.querySelectorAll('th,td');
+
+  for (let i = 0, cellFound = false; i < thsAndCells.length; i++) {
+    if (cellFound && thsAndCells[i].nodeName === 'TH') {
+      hasThAfterTd = true;
+      break;
+    }
+
+    if (thsAndCells[i].nodeName === 'TD') {
+      cellFound = true;
+    }
+  }
+
+  const onlyTh = thCount > 0 && cellCount === 0;
+  const onlyCells = cellCount > 0 && thCount === 0;
+  const hasCompleteRow = // we take header-only and cell-only tables to be
+  // row-complete
+  onlyTh || onlyCells || // if headers and cells can "fit" against each other,
+  // then we assume a complete row exists
+  (exactlyDivisible(thCount, cellCount) || exactlyDivisible(cellCount, thCount)) && // all numbers are divisible by 1, so we carve out a specific
+  // check for when there is only 1 table cell, and more than 1
+  // table header.
+  !(thCount > 1 && cellCount === 1);
+  return {
+    cellCount,
+    thCount,
+    mergedCellCount,
+    hasThAfterTd,
+    hasIncompleteRow: !hasCompleteRow
+  };
+};
+
+const configureTableRows = (doc, colsInRow) => {
+  var _Array$from;
+
+  const tableHeadersAndCells = Array.from(doc.body.querySelectorAll('th,td'));
+  const evenlySplitChunks = chunk(tableHeadersAndCells, colsInRow);
+  const tableBody = doc.body.querySelector('tbody');
+  evenlySplitChunks.forEach(chunk => {
+    const tr = doc.createElement('tr');
+    tableBody === null || tableBody === void 0 ? void 0 : tableBody.append(tr);
+    tr.append(...chunk);
+  }); // We remove any leftover empty rows which may cause fabric editor
+  // to no-op when parsing the table
+
+  const emptyRows = (_Array$from = Array.from(tableBody.querySelectorAll('tr'))) === null || _Array$from === void 0 ? void 0 : _Array$from.filter(row => row.innerHTML.trim().length === 0);
+  emptyRows.forEach(row => row.remove());
+  return doc.body.innerHTML;
+};
+
+const fillIncompleteRowWithEmptyCells = (doc, thCount, cellCount) => {
+  var _lastCell$parentEleme;
+
+  let extraCellsCount = 0;
+
+  while (!exactlyDivisible(cellCount + extraCellsCount, thCount)) {
+    extraCellsCount++;
+  }
+
+  const extraEmptyCells = Array.from(Array(extraCellsCount)).map(() => doc.createElement('td'));
+  const lastCell = doc.body.querySelector('td:last-of-type');
+  lastCell === null || lastCell === void 0 ? void 0 : (_lastCell$parentEleme = lastCell.parentElement) === null || _lastCell$parentEleme === void 0 ? void 0 : _lastCell$parentEleme.append(...extraEmptyCells);
+  return {
+    updatedCellCount: cellCount + extraCellsCount
+  };
+};
+/**
+ * Given a DOM document, it will try to rebuild table rows by using the
+ * table headers count as an initial starting point for the assumed
+ * number of columns that make up a row (`colsInRow`). It will slowly
+ * decrease that `colsInRow` count until it finds exact fit for table
+ * headers and cells with `colsInRow` else it returns the original
+ * document's markup.
+ *
+ * NOTE: It will NOT try to rebuild table rows if it encounters merged cells
+ * or compex table configurations (where table headers exist after normal
+ * table cells). It will build a single column table if NO table
+ * headers exist.
+ */
+
+
+export const tryReconstructTableRows = doc => {
+  let {
+    cellCount,
+    thCount,
+    mergedCellCount,
+    hasThAfterTd,
+    hasIncompleteRow
+  } = getTableElementsInfo(doc);
+
+  if (mergedCellCount || hasThAfterTd) {
+    // bail out to avoid handling more complex table structures
+    return doc.body.innerHTML;
+  }
+
+  if (!thCount) {
+    // if no table headers exist for reference, fallback to a single column table structure
+    return configureTableRows(doc, 1);
+  }
+
+  if (hasIncompleteRow) {
+    // if shift-click selection copies a partial table row to the clipboard,
+    // and we do have table headers for reference, then we add empty table cells
+    // to fill out the partial row
+    const {
+      updatedCellCount
+    } = fillIncompleteRowWithEmptyCells(doc, thCount, cellCount);
+    cellCount = updatedCellCount;
+  }
+
+  for (let possibleColsInRow = thCount; possibleColsInRow > 0; possibleColsInRow--) {
+    if (exactlyDivisible(thCount, possibleColsInRow) && exactlyDivisible(cellCount, possibleColsInRow)) {
+      return configureTableRows(doc, possibleColsInRow);
+    }
+  }
+
+  return doc.body.innerHTML;
+};
+export const htmlHasIncompleteTable = html => {
+  return !html.includes('<table ') && (html.includes('<td ') || html.includes('<th '));
+};
+/**
+ * Strictly for ED-7331. Given incomplete table html from tinyMCE, it will try to rebuild
+ * a whole valid table. If it rebuilds the table, it may first rebuild it as a single
+ * row table, so this also then tries to reconstruct the table rows/columns if
+ * possible (best effort).
+ */
+
+export const tryRebuildCompleteTableHtml = incompleteTableHtml => {
+  // first we try wrapping the table elements with <table> and let DOMParser try to rebuild
+  // a valid DOM tree. we also keep the non-wrapped table for comparison purposes.
+  const {
+    nonTableWrappedDoc,
+    tableWrappedDoc
+  } = wrapWithTable(incompleteTableHtml);
+  const didPreserveTableElements = Boolean(!nonTableWrappedDoc.body.querySelector('th, td') && tableWrappedDoc.body.querySelector('th, td'));
+  const isExpectedStructure = tableWrappedDoc.querySelectorAll('body > table:only-child') && !tableWrappedDoc.querySelector(`body > table > tbody > tr > :not(th,td)`); // if DOMParser saves table elements that we would otherwise lose, and
+  // if the table html is what we'd expect (a single table, with no extraneous
+  // elements in table rows other than th, td), then we can now also try to
+  // rebuild table rows/columns.
+
+  if (didPreserveTableElements && isExpectedStructure) {
+    const completeTableHtml = tryReconstructTableRows(tableWrappedDoc);
+    return completeTableHtml;
+  }
+
+  return null;
+};

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

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { isInEmptyLine, isEmptyDocument, bracketTyped } from '../../utils/document';
 import { pluginKey as alignmentPluginKey } from '../alignment/pm-plugins/main';
@@ -98,7 +99,7 @@ export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPl
   }
 
   const getPlaceholderHintMessage = createGetPlaceholderHintMessage(placeholderHints);
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: (_, state) => createPlaceHolderStateFrom(state, getPlaceholderHintMessage, defaultPlaceholderText, bracketPlaceholderText),

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { NodeSelection, Plugin, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { placeholder } from '@atlaskit/adf-schema';
 import MediaServicesTextIcon from '@atlaskit/icon/glyph/media-services/text';
 import WithPluginState from '../../ui/WithPluginState';
@@ -13,7 +14,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, IN
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 export function createPlugin(dispatch, options) {
   const allowInserting = !!options.allowInserting;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: () => ({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import memoizeOne from 'memoize-one';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { pluginKey } from './plugin-key';
@@ -109,7 +109,7 @@ const setProviderState = providerState => (state, dispatch) => {
 };
 
 function quickInsertPluginFactory(quickInsertItems, providerFactory, getIntl, dispatch, emptyStateHandler) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init() {

package/dist/es2019/plugins/rank.js

@@ -11,6 +11,6 @@ export default {
   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
+  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer', // Unsupported mark
   'unsupportedMark', 'unsupportedNodeAttribute']
 };

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/scroll-into-view/index.js

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { TEXT_INPUT_RULE_TRANSACTION_KEY } from '@atlaskit/prosemirror-input-rules';
 /**
  * Plugin to scroll the user's selection into view whenever the user updates
@@ -12,7 +13,7 @@ import { TEXT_INPUT_RULE_TRANSACTION_KEY } from '@atlaskit/prosemirror-input-rul
 
 export const scrollIntoViewPluginKey = new PluginKey('scrollIntoViewPlugin');
 
-const createPlugin = () => new Plugin({
+const createPlugin = () => new SafePlugin({
   key: scrollIntoViewPluginKey,
   appendTransaction: (transactions, oldState, newState) => {
     if (!transactions.length) {

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/gap-cursor-main.js

@@ -1,4 +1,5 @@
-import { Plugin, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { findPositionOfNodeBefore } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -9,7 +10,7 @@ import { toDOM } from '../gap-cursor/utils/place-gap-cursor';
 import { deleteNode, setGapCursorAtPos } from '../gap-cursor/actions';
 import { Direction } from '../gap-cursor/direction';
 import { gapCursorPluginKey } from './gap-cursor-plugin-key';
-const plugin = new Plugin({
+const plugin = new SafePlugin({
   key: gapCursorPluginKey,
   state: {
     init: () => false,

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

@@ -1,5 +1,6 @@
-import { Plugin, NodeSelection, TextSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
+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';
@@ -28,7 +29,7 @@ const toggleContentEditable = (node, root = false) => {
 };
 
 export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) => {
-  return new Plugin({
+  return new SafePlugin({
     key: selectionPluginKey,
     state: createPluginState(dispatch, getInitialState),
     view: () => ({

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

@@ -2,10 +2,9 @@ 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';
 import { messages } from './messages';
 export const StyledStatus = styled.span`
   opacity: ${props => props.placeholderStyle ? 0.5 : 1};
@@ -52,10 +51,6 @@ _defineProperty(StatusContainerView, "displayName", 'StatusContainerView');
 export const IntlStatusContainerView = injectIntl(StatusContainerView);
 export class StatusNodeView extends ReactNodeView {
   createDomRef() {
-    if (this.reactComponentProps.options && this.reactComponentProps.options.useInlineWrapper) {
-      return createMobileInlineDomRef();
-    }
-
     return super.createDomRef();
   }
 
@@ -80,9 +75,7 @@ export class StatusNodeView extends ReactNodeView {
       localId,
       style
     } = this.node.attrs;
-    return /*#__PURE__*/React.createElement(InlineNodeWrapper, {
-      useInlineWrapper: options && options.useInlineWrapper
-    }, /*#__PURE__*/React.createElement(IntlStatusContainerView, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, 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,12 +1,11 @@
-import { NodeSelection, Plugin, TextSelection } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
 import statusNodeView from './nodeviews/status';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
 export { pluginKey, pluginKeyName } from './plugin-key';
 
-const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) => new Plugin({
+const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) => new SafePlugin({
   state: {
     init: () => ({
       isNew: false,
@@ -104,32 +103,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';
@@ -203,8 +203,7 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
     } = this.props;
     const {
       color,
-      text,
-      localId
+      text
     } = this.state;
     return target && /*#__PURE__*/React.createElement(PopupWithListeners, {
       target: target,
@@ -222,8 +221,7 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       onColorClick: this.onColorClick,
       onColorHover: this.onColorHover,
       onTextChanged: this.onTextChanged,
-      onEnter: this.onEnter,
-      localId: localId
+      onEnter: this.onEnter
     })));
   }
 

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

@@ -263,8 +263,19 @@ export const moveCursorBackward = (state, dispatch) => {
   // it doesn't join node before (last cell) with node after (content after the cursor)
   // due to ridiculous amount of PM code that would have been required to overwrite
 
+  tr.setSelection(new TextSelection(state.doc.resolve(pos))); // if we are inside an empty paragraph not at the end of the doc we delete it
+
+  const cursorNode = $cursor.node();
+  const docEnd = state.doc.content.size;
+  const paragraphWrapStart = $cursor.pos - 1;
+  const paragraphWrapEnd = $cursor.pos + 1;
+
+  if (cursorNode.content.size === 0 && $cursor.pos + 1 !== docEnd) {
+    tr.delete(paragraphWrapStart, paragraphWrapEnd);
+  }
+
   if (dispatch) {
-    dispatch(tr.setSelection(new TextSelection(state.doc.resolve(pos))));
+    dispatch(tr);
   }
 
   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

@@ -220,7 +220,8 @@ const tablesPlugin = options => ({
           targetRef: tableWrapperTarget,
           layout: layout,
           isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
-          tableWidth: tableRenderOptimization ? tableWidth : undefined
+          tableWidth: tableRenderOptimization ? tableWidth : undefined,
+          stickyHeader: stickyHeader
         }));
       }
     }));