@atlaskit/editor-core 149.0.0 → 150.0.1

package/dist/es2019/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 tr => {
     const table = findTable(tr.selection);
@@ -20,17 +22,30 @@ function addColumnAtCustomStep(column) {
   };
 }
 
-function addColumnAt(column, allowAddColumnCustomStep = false) {
-  if (allowAddColumnCustomStep) {
-    return addColumnAtCustomStep(column);
-  }
+function addColumnAt(column, allowAddColumnCustomStep = false, view) {
+  return tr => {
+    let updatedTr = tr;
+
+    if (allowAddColumnCustomStep) {
+      updatedTr = addColumnAtCustomStep(column)(updatedTr);
+    } else {
+      updatedTr = addColumnAtPMUtils(column)(updatedTr);
+    }
 
-  return addColumnAtPMUtils(column);
+    const 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 const addColumnBefore = (state, dispatch) => {
+export const addColumnBefore = (state, dispatch, view) => {
   const table = findTable(state.selection);
 
   if (!table) {
@@ -39,14 +54,14 @@ export const addColumnBefore = (state, dispatch) => {
 
   if (dispatch) {
     let 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 const addColumnAfter = (state, dispatch) => {
+export const addColumnAfter = (state, dispatch, view) => {
   const table = findTable(state.selection);
 
   if (!table) {
@@ -55,14 +70,14 @@ export const addColumnAfter = (state, dispatch) => {
 
   if (dispatch) {
     let 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 const insertColumn = column => (state, dispatch) => {
-  const tr = addColumnAt(column, getAllowAddColumnCustomStep(state))(state.tr);
+export const insertColumn = column => (state, dispatch, view) => {
+  let tr = addColumnAt(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
 
   if (!table) {

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

@@ -89,7 +89,7 @@ export const setCellAttr = (name, value) => (state, dispatch) => {
 
   return false;
 };
-export const triggerUnlessTableHeader = command => (state, dispatch) => {
+export const triggerUnlessTableHeader = command => (state, dispatch, view) => {
   const {
     selection,
     schema: {
@@ -103,7 +103,7 @@ export const triggerUnlessTableHeader = command => (state, dispatch) => {
     const cell = findCellClosestToPos(selection.$from);
 
     if (cell && cell.node.type !== tableHeader) {
-      return command(state, dispatch);
+      return command(state, dispatch, view);
     }
   }
 
@@ -111,7 +111,7 @@ export const triggerUnlessTableHeader = command => (state, dispatch) => {
     const rect = getSelectionRect(selection);
 
     if (!checkIfHeaderRowEnabled(state) || rect && rect.top > 0) {
-      return command(state, dispatch);
+      return command(state, dispatch, view);
     }
   }
 

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

@@ -171,24 +171,24 @@ const arrowLeftFromText = selection => (state, dispatch) => {
 
     if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
     ) {
-        const {
-          selectionRelativeToNode
-        } = getSelectionPluginState(state);
-
-        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);
-        }
+      const {
+        selectionRelativeToNode
+      } = getSelectionPluginState(state);
+
+      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;
@@ -204,14 +204,14 @@ const arrowRightFromText = selection => (state, dispatch) => {
 
     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/es2019/plugins/table/nodeviews/TableComponent.js

@@ -156,16 +156,17 @@ class TableComponent extends React.Component {
       const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
       const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
       const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
+      const 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,
             layoutChanged

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

@@ -1,6 +1,6 @@
 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';
 export default class TableCellNodeView {
   constructor(node, view, getPos, observer) {
@@ -25,13 +25,26 @@ export default class TableCellNodeView {
     }
   }
 
-  shouldRecreateNodeView(node) {
+  updateNodeView(node) {
     if (this.node.type !== node.type) {
       return false;
     }
 
-    const attrs = setCellAttrs(this.node);
-    const nextAttrs = setCellAttrs(node); // added + changed attributes
+    const attrs = getCellDomAttrs(this.node);
+    const nextAttrs = getCellDomAttrs(node);
+    const {
+      colspan,
+      rowspan
+    } = getCellAttrs(this.dom); // need to rerender when colspan/rowspan in dom are different from the node attrs
+    // this can happen when undoing merge cells
+
+    const defaultColspan = 1,
+          defaultRowspan = 1;
+
+    if (colspan !== (node.attrs.colspan || defaultColspan) || rowspan !== (node.attrs.rowspan || defaultRowspan)) {
+      return false;
+    } // added + changed attributes
+
 
     const addedAttrs = Object.entries(nextAttrs).filter(([key, value]) => attrs[key] !== value);
     const removedAttrs = Object.keys(attrs).filter(key => !nextAttrs.hasOwnProperty(key));
@@ -51,9 +64,9 @@ export default class TableCellNodeView {
   }
 
   update(node) {
-    const shouldUpdate = this.shouldRecreateNodeView(node);
+    const didUpdate = this.updateNodeView(node);
     this.node = node;
-    return shouldUpdate;
+    return didUpdate;
   }
 
   destroy() {

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

@@ -146,8 +146,7 @@ export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex
   });
   let newState = { ...resizeState,
     cols: cols.map(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;
       }
 
@@ -184,19 +183,19 @@ export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex
     } // table is in overflow: keep the dragged column at its widths and evenly distribute columns
     // to recover from overflow state
     else {
-        const columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
-        newState = { ...resizeState,
-          cols: newState.cols.map(col => {
-            if (col.index === sourceCol.index) {
-              return col;
-            }
+      const columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
+      newState = { ...resizeState,
+        cols: newState.cols.map(col => {
+          if (col.index === sourceCol.index) {
+            return col;
+          }
 
-            return { ...col,
-              width: columnWidth
-            };
-          })
-        };
-      }
+          return { ...col,
+            width: columnWidth
+          };
+        })
+      };
+    }
   } // fix total table widths by adding missing pixels to columns widths here and there
 
 
@@ -207,7 +206,7 @@ export const areColumnsEven = resizeState => {
   return newResizeState.cols.every((col, i) => col.width === resizeState.cols[i].width);
 }; // Get the layout
 
-const normaliseTableLayout = input => {
+export const normaliseTableLayout = input => {
   switch (input) {
     case 'wide':
       return input;
@@ -219,7 +218,6 @@ const normaliseTableLayout = input => {
       return 'default';
   }
 };
-
 export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, dynamicTextSizing) => {
   const {
     totalRowCount,

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

@@ -78,7 +78,7 @@ export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos) =
   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) {
   const scaleFactor = maxSize / getTotalWidth(state);
   let newState = { ...state,
     maxSize,

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

@@ -97,12 +97,12 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   const options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
-    onClick: (state, dispatch) => {
+    onClick: (state, dispatch, view) => {
       const selectionRect = getClosestSelectionRect(state);
       const 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;
@@ -132,11 +132,11 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
     title: formatMessage(tableMessages.removeColumns, {
       0: numberOfColumns
     }),
-    onClick: (state, dispatch) => {
+    onClick: (state, dispatch, view) => {
       const 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/es2019/plugins/table/transforms/column-width.js

@@ -1,5 +1,10 @@
 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 const updateColumnWidths = (resizeState, table, start) => tr => {
   const map = TableMap.get(table);
   const updatedCellsAttrs = {}; // calculating new attributes for each cell
@@ -84,19 +89,65 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
   }
 
   const tablePos = start - 1;
-  const {
-    selection
-  } = tr;
-  /* 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.
+  const 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
    */
 
-  const 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 const rescaleColumns = (table, view) => tr => {
+  if (!view || !hasTableBeenResized(table.node)) {
+    return tr;
+  }
+
+  const {
+    state
+  } = view;
+  const domAtPos = view.domAtPos.bind(view);
+  const maybeTable = domAtPos(table.start).node;
+  const tableRef = maybeTable.closest('table');
+
+  if (!tableRef) {
+    return tr;
+  }
+
+  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+  const maxSize = getTableMaxWidth({
+    table: table.node,
+    tableStart: table.start,
+    state,
+    layout,
+    dynamicTextSizing: true
+  });
+  let resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    table: table.node,
+    start: table.start,
+    tableRef,
+    domAtPos,
+    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/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -296,7 +296,7 @@ class ContextualMenu extends 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();
           break;
 

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

@@ -185,7 +185,7 @@ class FloatingInsertButton extends React.Component {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch);
+      insertColumnWithAnalytics(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 

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

@@ -18,4 +18,10 @@ export const getMergedCellsPositions = tr => {
     }
   });
   return mergedCells;
-};
+};
+export const colsToRect = (cols, noOfRows) => ({
+  left: Math.min(...cols),
+  right: Math.max(...cols) + 1,
+  top: 0,
+  bottom: noOfRows
+});

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

@@ -173,8 +173,7 @@ const 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) {
     const tr = liftBlock(state.tr, $next, $next);
 
     if (dispatch && tr) {

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

@@ -117,12 +117,6 @@ class ToolbarTextColor extends React.Component {
         isShowingMoreColors
       } = this.state;
 
-      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,
@@ -207,11 +201,13 @@ class ToolbarTextColor extends React.Component {
           label: ""
         })))
       })
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "text-color-palette"
     }, /*#__PURE__*/React.createElement(ColorPalette, {
       palette: palette,
       onClick: color => this.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/es2019/plugins/text-formatting/pm-plugins/cursor.js

@@ -28,10 +28,7 @@ export default new Plugin({
       const clickWasAtTextNode = !!(clickNode && clickNode.isText);
       const 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)) {
         const clickWasInsideNodeDOM = event.target.parentNode === view.domAtPos(clickedDOMElementPosition).node && code.isInSet(view.state.doc.resolve(clickedDOMElementPosition).nodeAfter.marks);
         const 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/es2019/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

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

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

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

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

@@ -4,14 +4,13 @@ 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';
 const TypeAheadContent = styled.div`
   background: ${N0};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 1px ${N60A}, 0 4px 8px -2px ${N50A};
-  padding: ${divide(gridSize, 2)}px 0;
+  padding: ${gridSize() / 2}px 0;
   width: 320px;
   max-height: 380px; /* ~5.5 visibile items */
   overflow-y: auto;

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

@@ -60,9 +60,7 @@ export const subscribeToToolbarAndPickerUpdates = (editorView, cb) => {
       const oldToolbarConfig = getOldConfigWithNodeInfo(lastUpdatedState);
       const 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 {

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { N60A } from '@atlaskit/theme/colors';
@@ -32,6 +32,8 @@ const ColorPickerButton = props => {
     setIsPopupOpen(!isPopupOpen);
   };
 
+  const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
+
   const onColorSelected = (color, label) => {
     setIsPopupOpen(false);
 
@@ -68,11 +70,12 @@ const ColorPickerButton = props => {
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX
-    }, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPalette, {
+    }, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
       selectedColor: props.currentColor || null,
-      onClick: onColorSelected
+      onClick: onColorSelected,
+      handleClickOutside: togglePopup
     })));
   };