@atlaskit/editor-core 149.0.0 → 150.0.1

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

@@ -6,8 +6,10 @@ import { safeInsert } from 'prosemirror-utils';
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
-import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step'; // #endregion
+import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
+import { rescaleColumns } from '../transforms/column-width';
 
+// #endregion
 function addColumnAtCustomStep(column) {
   return function (tr) {
     var table = findTable(tr.selection);
@@ -22,17 +24,30 @@ function addColumnAtCustomStep(column) {
 
 function addColumnAt(column) {
   var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var view = arguments.length > 2 ? arguments[2] : undefined;
+  return function (tr) {
+    var updatedTr = tr;
 
-  if (allowAddColumnCustomStep) {
-    return addColumnAtCustomStep(column);
-  }
+    if (allowAddColumnCustomStep) {
+      updatedTr = addColumnAtCustomStep(column)(updatedTr);
+    } else {
+      updatedTr = addColumnAtPMUtils(column)(updatedTr);
+    }
 
-  return addColumnAtPMUtils(column);
+    var table = findTable(updatedTr.selection);
+
+    if (table) {
+      // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
+      updatedTr = rescaleColumns(table, view)(updatedTr);
+    }
+
+    return updatedTr;
+  };
 } // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 
 
-export var addColumnBefore = function addColumnBefore(state, dispatch) {
+export var addColumnBefore = function addColumnBefore(state, dispatch, view) {
   var table = findTable(state.selection);
 
   if (!table) {
@@ -41,14 +56,14 @@ export var addColumnBefore = function addColumnBefore(state, dispatch) {
 
   if (dispatch) {
     var rect = selectedRect(state);
-    dispatch(addColumnAt(rect.left, getAllowAddColumnCustomStep(state))(state.tr));
+    dispatch(addColumnAt(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
 
   return true;
 }; // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 
-export var addColumnAfter = function addColumnAfter(state, dispatch) {
+export var addColumnAfter = function addColumnAfter(state, dispatch, view) {
   var table = findTable(state.selection);
 
   if (!table) {
@@ -57,15 +72,15 @@ export var addColumnAfter = function addColumnAfter(state, dispatch) {
 
   if (dispatch) {
     var rect = selectedRect(state);
-    dispatch(addColumnAt(rect.right, getAllowAddColumnCustomStep(state))(state.tr));
+    dispatch(addColumnAt(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
 
   return true;
 }; // #region Commands
 
 export var insertColumn = function insertColumn(column) {
-  return function (state, dispatch) {
-    var tr = addColumnAt(column, getAllowAddColumnCustomStep(state))(state.tr);
+  return function (state, dispatch, view) {
+    var tr = addColumnAt(column, getAllowAddColumnCustomStep(state), view)(state.tr);
     var table = findTable(tr.selection);
 
     if (!table) {

package/dist/esm/plugins/table/commands/misc.js

@@ -98,7 +98,7 @@ export var setCellAttr = function setCellAttr(name, value) {
   };
 };
 export var triggerUnlessTableHeader = function triggerUnlessTableHeader(command) {
-  return function (state, dispatch) {
+  return function (state, dispatch, view) {
     var selection = state.selection,
         tableHeader = state.schema.nodes.tableHeader;
 
@@ -106,7 +106,7 @@ export var triggerUnlessTableHeader = function triggerUnlessTableHeader(command)
       var cell = findCellClosestToPos(selection.$from);
 
       if (cell && cell.node.type !== tableHeader) {
-        return command(state, dispatch);
+        return command(state, dispatch, view);
       }
     }
 
@@ -114,7 +114,7 @@ export var triggerUnlessTableHeader = function triggerUnlessTableHeader(command)
       var rect = getSelectionRect(selection);
 
       if (!checkIfHeaderRowEnabled(state) || rect && rect.top > 0) {
-        return command(state, dispatch);
+        return command(state, dispatch, view);
       }
     }
 

package/dist/esm/plugins/table/commands/selection.js

@@ -165,23 +165,23 @@ var arrowLeftFromText = function arrowLeftFromText(selection) {
 
       if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
       ) {
-          var _getSelectionPluginSt4 = getSelectionPluginState(state),
-              selectionRelativeToNode = _getSelectionPluginSt4.selectionRelativeToNode;
-
-          if (selectionRelativeToNode === RelativeSelectionPos.Before) {
-            // we have a text selection at start of first table cell, directly inside a top level paragraph,
-            // and want to set gap cursor selection before table
-            return setGapCursorBeforeTable()(state, dispatch);
-          } else {
-            // we have a text selection at start of first table cell, directly inside a top level paragraph,
-            // and want to set a full table cell selection
-            return selectFullTable({
-              node: table.node,
-              startPos: table.start,
-              dir: TableSelectionDirection.BottomToTop
-            })(state, dispatch);
-          }
+        var _getSelectionPluginSt4 = getSelectionPluginState(state),
+            selectionRelativeToNode = _getSelectionPluginSt4.selectionRelativeToNode;
+
+        if (selectionRelativeToNode === RelativeSelectionPos.Before) {
+          // we have a text selection at start of first table cell, directly inside a top level paragraph,
+          // and want to set gap cursor selection before table
+          return setGapCursorBeforeTable()(state, dispatch);
+        } else {
+          // we have a text selection at start of first table cell, directly inside a top level paragraph,
+          // and want to set a full table cell selection
+          return selectFullTable({
+            node: table.node,
+            startPos: table.start,
+            dir: TableSelectionDirection.BottomToTop
+          })(state, dispatch);
         }
+      }
     }
 
     return false;
@@ -197,14 +197,14 @@ var arrowRightFromText = function arrowRightFromText(selection) {
 
       if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
       ) {
-          // we have a text selection at end of last table cell, directly inside a top level paragraph,
-          // and want to set a full table cell selection
-          return selectFullTable({
-            node: table.node,
-            startPos: table.start,
-            dir: TableSelectionDirection.TopToBottom
-          })(state, dispatch);
-        }
+        // we have a text selection at end of last table cell, directly inside a top level paragraph,
+        // and want to set a full table cell selection
+        return selectFullTable({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.TopToBottom
+        })(state, dispatch);
+      }
     }
 
     return false;

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

@@ -177,16 +177,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
 
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
+      var noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
 
       if ( // Breakout mode/layout changed
       layoutChanged || // We need to react if our parent changes
       // Scales the cols widths relative to the new parent width.
       parentWidthChanged || // Enabling / disabling this feature reduces or adds size to the table.
-      hasNumberedColumnChanged || // Adding or removing columns from the table, should snap the remaining / new columns to the layout width.
-      tablesHaveDifferentNoOfColumns(node, prevNode) || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
+      hasNumberedColumnChanged || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
       // Usually happens on window resize.
-      layoutSize !== _this.layoutSize) {
-        if (!hasNumberedColumnChanged) {
+      layoutSize !== _this.layoutSize || noOfColumnsChanged) {
+        // If column has been inserted/deleted avoid multi dispatch
+        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
           _this.scaleTable({
             parentWidth: parentWidth,
             layoutChanged: layoutChanged

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import uuid from 'uuid';
 import { DOMSerializer } from 'prosemirror-model';
-import { setCellAttrs } from '@atlaskit/adf-schema';
+import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
 import { getFeatureFlags } from '../../feature-flags-context';
 
 var TableCellNodeView = /*#__PURE__*/function () {
@@ -33,16 +33,30 @@ var TableCellNodeView = /*#__PURE__*/function () {
   }
 
   _createClass(TableCellNodeView, [{
-    key: "shouldRecreateNodeView",
-    value: function shouldRecreateNodeView(node) {
+    key: "updateNodeView",
+    value: function updateNodeView(node) {
       var _this = this;
 
       if (this.node.type !== node.type) {
         return false;
       }
 
-      var attrs = setCellAttrs(this.node);
-      var nextAttrs = setCellAttrs(node); // added + changed attributes
+      var attrs = getCellDomAttrs(this.node);
+      var nextAttrs = getCellDomAttrs(node);
+
+      var _getCellAttrs = getCellAttrs(this.dom),
+          colspan = _getCellAttrs.colspan,
+          rowspan = _getCellAttrs.rowspan; // need to rerender when colspan/rowspan in dom are different from the node attrs
+      // this can happen when undoing merge cells
+
+
+      var defaultColspan = 1,
+          defaultRowspan = 1;
+
+      if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+        return false;
+      } // added + changed attributes
+
 
       var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
@@ -79,9 +93,9 @@ var TableCellNodeView = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(node) {
-      var shouldUpdate = this.shouldRecreateNodeView(node);
+      var didUpdate = this.updateNodeView(node);
       this.node = node;
-      return shouldUpdate;
+      return didUpdate;
     }
   }, {
     key: "destroy",

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

@@ -186,8 +186,7 @@ export var bulkColumnsResize = function bulkColumnsResize(resizeState, columnsIn
 
   var newState = _objectSpread(_objectSpread({}, resizeState), {}, {
     cols: cols.map(function (col) {
-      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) {
+      if (columnsIndexes.indexOf(col.index) > -1 || columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
         return col;
       }
 
@@ -225,19 +224,19 @@ export var bulkColumnsResize = function bulkColumnsResize(resizeState, columnsIn
     } // table is in overflow: keep the dragged column at its widths and evenly distribute columns
     // to recover from overflow state
     else {
-        var columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
-        newState = _objectSpread(_objectSpread({}, resizeState), {}, {
-          cols: newState.cols.map(function (col) {
-            if (col.index === sourceCol.index) {
-              return col;
-            }
-
-            return _objectSpread(_objectSpread({}, col), {}, {
-              width: columnWidth
-            });
-          })
-        });
-      }
+      var columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
+      newState = _objectSpread(_objectSpread({}, resizeState), {}, {
+        cols: newState.cols.map(function (col) {
+          if (col.index === sourceCol.index) {
+            return col;
+          }
+
+          return _objectSpread(_objectSpread({}, col), {}, {
+            width: columnWidth
+          });
+        })
+      });
+    }
   } // fix total table widths by adding missing pixels to columns widths here and there
 
 
@@ -250,7 +249,7 @@ export var areColumnsEven = function areColumnsEven(resizeState) {
   });
 }; // Get the layout
 
-var normaliseTableLayout = function normaliseTableLayout(input) {
+export var normaliseTableLayout = function normaliseTableLayout(input) {
   switch (input) {
     case 'wide':
       return input;
@@ -262,7 +261,6 @@ var normaliseTableLayout = function normaliseTableLayout(input) {
       return 'default';
   }
 };
-
 export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFromSelectedColumns(rect, state, domAtPos, dynamicTextSizing) {
   var _getSelectedTableInfo = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo.totalRowCount,

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -82,7 +82,7 @@ export var scaleWithParent = function scaleWithParent(tableRef, parentWidth, tab
   return scaleTableTo(resizeState, Math.floor(parentWidth));
 }; // Scales the table to a given size and updates its colgroup DOM node
 
-function scaleTableTo(state, maxSize) {
+export function scaleTableTo(state, maxSize) {
   var scaleFactor = maxSize / getTotalWidth(state);
 
   var newState = _objectSpread(_objectSpread({}, state), {}, {

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

@@ -102,12 +102,12 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   var options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
-    onClick: function onClick(state, dispatch) {
+    onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
 
       if (index) {
-        insertColumnWithAnalytics(INPUT_METHOD.FLOATING_TB, index)(state, dispatch);
+        insertColumnWithAnalytics(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
 
       return true;
@@ -137,11 +137,11 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     title: formatMessage(tableMessages.removeColumns, {
       0: numberOfColumns
     }),
-    onClick: function onClick(state, dispatch) {
+    onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
 
       if (selectionRect) {
-        deleteColumnsWithAnalytics(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch);
+        deleteColumnsWithAnalytics(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
 
       return true;

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

@@ -5,7 +5,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
+import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
+import { tableCellMinWidth } from '@atlaskit/editor-common';
+import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 export var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = TableMap.get(table);
@@ -93,19 +98,66 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
     }
 
     var tablePos = start - 1;
-    var _tr = tr,
-        selection = _tr.selection;
-    /* Create a mapping before the table node is replaced to allow the current
-     * selection to be mapped back to it's original position inside the table.
+    var selectionBookmark = tr.selection.getBookmark();
+    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
+    /**
+     * We want to restore to the original selection but w/o applying the mapping. Function
+     * tr.replaceWith puts the selection after the inserted content. We need to manually
+     * set the selection back to original state. Mapping in this case doesn't quite work
+     * e.g. if we change the content before a selection. This is because mapping
+     * means moving it if the content in front of it changed. Instead we can get
+     * bookmark of selection.
      *
-     * If the mapping from the new 'replaceWith' transaction is used, prosemirror
-     * will map the selection to after the table as it thinks the original table
-     * node has been deleted.
+     * @see https://github.com/ProseMirror/prosemirror/issues/645
      */
 
-    var originalMap = Object.assign(Object.create(Object.getPrototypeOf(tr.mapping)), tr.mapping);
-    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks)); // restore selection after replacing the table
+    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 is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
+ * @param table
+ * @param view
+ * @returns Updated transaction with rescaled columns for a given table
+ */
+
+export var rescaleColumns = function rescaleColumns(table, view) {
+  return function (tr) {
+    if (!view || !hasTableBeenResized(table.node)) {
+      return tr;
+    }
+
+    var state = view.state;
+    var domAtPos = view.domAtPos.bind(view);
+    var maybeTable = domAtPos(table.start).node;
+    var tableRef = maybeTable.closest('table');
+
+    if (!tableRef) {
+      return tr;
+    }
+
+    var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+    var maxSize = getTableMaxWidth({
+      table: table.node,
+      tableStart: table.start,
+      state: state,
+      layout: layout,
+      dynamicTextSizing: true
+    });
+    var resizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      table: table.node,
+      start: table.start,
+      tableRef: tableRef,
+      domAtPos: domAtPos,
+      maxSize: maxSize
+    });
+
+    if (resizeState.overflow) {
+      resizeState = scaleTableTo(resizeState, maxSize);
+    }
 
-    return tr.setSelection(selection.map(tr.doc, originalMap));
+    return updateColumnWidths(resizeState, table.node, table.start)(tr);
   };
 };

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -316,7 +316,7 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
 
         case 'insert_column':
-          insertColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch);
+          insertColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
 
           _this.toggleOpen();
 

package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js

@@ -198,7 +198,7 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         event.preventDefault();
         var state = editorView.state,
             dispatch = editorView.dispatch;
-        insertColumnWithAnalytics(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch);
+        insertColumnWithAnalytics(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

package/dist/esm/plugins/table/utils/table.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 export var getMergedCellsPositions = function getMergedCellsPositions(tr) {
@@ -18,4 +19,12 @@ export var getMergedCellsPositions = function getMergedCellsPositions(tr) {
     }
   });
   return mergedCells;
+};
+export var colsToRect = function colsToRect(cols, noOfRows) {
+  return {
+    left: Math.min.apply(Math, _toConsumableArray(cols)),
+    right: Math.max.apply(Math, _toConsumableArray(cols)) + 1,
+    top: 0,
+    bottom: noOfRows
+  };
 };

package/dist/esm/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -184,8 +184,7 @@ var deleteHandler = filter([isInsideTaskOrDecisionItem, isEmptySelectionAtEnd],
   } // if nested, just unindent
 
 
-  if ($next.node($next.depth - 2).type === taskList || // this is for the case when we are on a non-nested item and next one is nested
-  $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
+  if ($next.node($next.depth - 2).type === taskList || $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
     var tr = liftBlock(state.tr, $next, $next);
 
     if (dispatch && tr) {

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -144,12 +144,6 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           isOpen = _this$state.isOpen,
           isShowingMoreColors = _this$state.isShowingMoreColors;
 
-      if (e.defaultPrevented) {
-        // This should be handled by stopping propogation, but as an additional safety net
-        // we ignore handled events for the purpose of hiding the popup.
-        return;
-      }
-
       if (isOpen === true) {
         _this.dispatchAnalyticsEvent(_this.buildAnalyticsPalette(ACTION.CLOSED, {
           isShowingMoreColors: isShowingMoreColors,
@@ -237,13 +231,15 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
             label: ""
           })))
         })
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": "text-color-palette"
       }, /*#__PURE__*/React.createElement(ColorPalette, {
         palette: palette,
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color
-      }), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
         appearance: "subtle",
         onClick: this.handleShowMoreToggle,
         iconBefore: /*#__PURE__*/React.createElement(EditorBackgroundColorIcon, {

package/dist/esm/plugins/text-formatting/pm-plugins/cursor.js

@@ -24,10 +24,7 @@ export default new Plugin({
       var clickWasAtTextNode = !!(clickNode && clickNode.isText);
       var clickWasAtEndOfAParagraphNode = $click.parent.type === paragraph && $click.textOffset === 0 && $click.nodeAfter === null;
 
-      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && ( // if click did not occur at a text node or end of paragraph, then
-      // it was at a directly adjacent non-text node, so we skip this manual
-      // text selection logic to preserve that non-text node's selection
-      clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
+      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && (clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
         var clickWasInsideNodeDOM = event.target.parentNode === view.domAtPos(clickedDOMElementPosition).node && code.isInSet(view.state.doc.resolve(clickedDOMElementPosition).nodeAfter.marks);
         var nodeNextToClick = $click.nodeBefore && code.isInSet($click.nodeBefore.marks) ? $click.nodeAfter : $click.nodeBefore; // Need to set the selection here to allow clicking between [code('text'),{<>},emoji()]
 

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -15,8 +15,25 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       }
     });
     var selection = tr.selection;
-    var isTextRangeSelection = selection instanceof TextSelection && selection.$cursor === null;
-    var nextTr = isTextRangeSelection ? tr.deleteSelection() : tr;
-    return nextTr;
+
+    if (!(selection instanceof TextSelection)) {
+      return tr;
+    }
+
+    if (!selection.$cursor) {
+      tr.deleteSelection();
+      return tr;
+    } // Search & Destroy placeholder
+
+
+    var cursorPos = selection.$cursor.pos;
+    var nodeAtCursor = tr.doc.nodeAt(cursorPos);
+    var isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
+
+    if (nodeAtCursor && isPlaceholderAtCursorPosition) {
+      tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+    }
+
+    return tr;
   };
 };

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -52,7 +52,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
-  var onKeyDown = useCallback(function (event) {
+  var checkKeyEvent = useCallback(function (event) {
     var key = keyNameNormalized(event);
     var sel = document.getSelection();
     var raw = ref.current.textContent || '';
@@ -165,7 +165,10 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         });
         event.preventDefault();
         event.stopPropagation();
+        return;
       }
+
+      checkKeyEvent(event);
     };
 
     var onFocusOut = function onFocusOut(event) {
@@ -260,7 +263,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent]);
   useEffect(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
@@ -290,7 +293,6 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     contentEditable: true,
     innerRef: ref,
     onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
     onClick: onClick,
     role: "textbox",
     suppressContentEditableWarning: true,

package/dist/esm/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -8,10 +8,9 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Popup } from '@atlaskit/editor-common';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
-import { divide } from '@atlaskit/theme/math';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
 import { TypeAheadList } from './TypeAheadList';
-var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, divide(gridSize, 2));
+var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,

package/dist/esm/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js

@@ -62,9 +62,7 @@ export var subscribeToToolbarAndPickerUpdates = function subscribeToToolbarAndPi
       var oldToolbarConfig = getOldConfigWithNodeInfo(lastUpdatedState);
       var isToolbarEqual = areToolbarsSame(toolbarConfig, oldToolbarConfig);
 
-      if (dateState !== oldDateState || statusState !== oldStatusState || // Sometimes the toolbar changes while a picker is open, we dont care about this
-      // EG A nested status or date node in a table
-      !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
+      if (dateState !== oldDateState || statusState !== oldStatusState || !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
         shouldCallback = true;
       }
     } else {