@atlaskit/editor-core 151.3.0 → 153.0.1

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;
 

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '../../../../keymaps';
 import ColorPalette from '../../../../ui/ColorPalette';
 import cellBackgroundColorPalette from '../../../../ui/ColorPalette/Palettes/cellBackgroundColorPalette';
@@ -61,8 +61,7 @@ export const messages = defineMessages({
     description: `Distribute widths between selected columns`
   }
 });
-
-class ContextualMenu extends Component {
+export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
 
@@ -443,6 +442,7 @@ class ContextualMenu extends Component {
     }
 
     return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
     }, /*#__PURE__*/React.createElement(DropdownMenu, {
       mountTo: mountPoint,

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 const DeleteButton = ({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { tableMarginTop } from '@atlaskit/editor-common';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';

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

@@ -5,7 +5,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common';
 import { closestElement } from '../../../../utils/dom';
 import { INPUT_METHOD } from '../../../analytics';
@@ -15,8 +15,7 @@ import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
 import InsertButton from './InsertButton';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, CONTENT_COMPONENT } from '../../../analytics/types/enums';
-
-class FloatingInsertButton extends React.Component {
+export class FloatingInsertButton extends React.Component {
   constructor(props) {
     super(props);
     this.insertColumn = this.insertColumn.bind(this);

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import classnames from 'classnames';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';

package/dist/es2019/plugins/table/ui/common-styles.css.js

@@ -18,7 +18,11 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   > .${ClassName.TABLE_STICKY_SENTINEL_TOP}, > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
     position: absolute;
     width: 100%;
-    height: 0px;
+    height: 1px;
+    margin-top: -1px;
+    // need this to avoid sentinel being focused via keyboard
+    // this still allows it to be detected by intersection observer
+    visibility: hidden;
   }
   > .${ClassName.TABLE_STICKY_SENTINEL_TOP} {
     top: ${columnControlsDecorationHeight}px;

package/dist/es2019/plugins/table/ui/consts.js

@@ -1,4 +1,4 @@
-import { B100, B300, B75, N0, N20, R50, R300, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { B100, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -28,7 +28,7 @@ export const tableCellSelectedColor = B75;
 export const tableToolbarSelectedColor = B100;
 export const tableBorderSelectedColor = B300;
 export const tableCellDeleteColor = R50;
-export const tableBorderDeleteColor = R300;
+export const tableBorderDeleteColor = R400;
 export const tableToolbarDeleteColor = R75;
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;

package/dist/es2019/plugins/table/ui/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   insertColumn: {
     id: 'fabric.editor.insertColumn',
@@ -32,7 +32,7 @@ export default defineMessages({
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this table will also remove all of the data contained in any connected charts.',
+    defaultMessage: 'Removing this table will break all the charts connected to it.',
     description: 'Message for confirm modal when deleting a table linked to an extension.'
   }
 });

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/decisionItem.js

@@ -41,12 +41,13 @@ class Decision extends ReactNodeView {
   }
 
   update(node, decorations) {
-    return super.update(node, decorations, // Toggle the placeholder based on whether user input exists.
+    return super.update(node, decorations, undefined, // Toggle the placeholder based on whether user input exists.
     (_currentNode, _newNode) => !this.isContentEmpty(_newNode));
   }
 
 }
 
 export const decisionItemNodeView = (portalProviderAPI, eventDispatcher) => (node, view, getPos) => {
-  return new Decision(node, view, getPos, portalProviderAPI, eventDispatcher, {}).init();
+  const hasIntlContext = true;
+  return new Decision(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
 };

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -110,7 +110,7 @@ class Task extends ReactNodeView {
   }
 
   update(node, decorations) {
-    return super.update(node, decorations, (currentNode, newNode) => // Toggle the placeholder based on whether user input exists
+    return super.update(node, decorations, undefined, (currentNode, newNode) => // Toggle the placeholder based on whether user input exists
     !this.isContentEmpty(newNode) && !!(currentNode.attrs.state === newNode.attrs.state));
   }
 
@@ -118,8 +118,9 @@ class Task extends ReactNodeView {
 
 export function taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory) {
   return (node, view, getPos) => {
+    const hasIntlContext = true;
     return new Task(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

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

@@ -173,7 +173,8 @@ const deleteHandler = filter([isInsideTaskOrDecisionItem, isEmptySelectionAtEnd]
   } // if nested, just unindent
 
 
-  if ($next.node($next.depth - 2).type === taskList || $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
+  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) {
     const tr = liftBlock(state.tr, $next, $next);
 
     if (dispatch && tr) {

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

@@ -1,6 +1,6 @@
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
-import { nodesBetweenChanged } from '../../../utils';
+import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
 import { decisionItemNodeView } from '../nodeviews/decisionItem';
 import { taskItemNodeViewFactory } from '../nodeviews/taskItem';
@@ -145,10 +145,10 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
             } = node.attrs;
 
             if (localId === undefined || localId === null || localId === '') {
-              tr.setNodeMarkup(pos, undefined, {
+              tr.step(new SetAttrsStep(pos, {
                 localId: uuid.generate(),
                 ...rest
-              });
+              }));
               modified = true;
             }
           }

package/dist/es2019/plugins/tasks-and-decisions/ui/Decision/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 { DecisionItem } from '@atlaskit/task-decision';
 const messages = defineMessages({
   placeholder: {

package/dist/es2019/plugins/tasks-and-decisions/ui/Task/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
 import TaskItemWithProviders from './task-item-with-providers';
 const messages = defineMessages({

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarTask/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/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 Button from '@atlaskit/button/custom-theme-button';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -34,8 +34,7 @@ export const messages = defineMessages({
     description: 'Fewer colors'
   }
 });
-
-class ToolbarTextColor extends React.Component {
+export class ToolbarTextColor extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -206,7 +205,8 @@ class ToolbarTextColor extends React.Component {
     }, /*#__PURE__*/React.createElement(ColorPalette, {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
-      selectedColor: pluginState.color
+      selectedColor: pluginState.color,
+      isShowingMoreColors: isShowingMoreColors
     })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
       onClick: this.handleShowMoreToggle,
@@ -273,5 +273,4 @@ class ToolbarTextColor extends React.Component {
   }
 
 }
-
 export default injectIntl(ToolbarTextColor);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
 import WithPluginState from '../../ui/WithPluginState';
 import { plugin as textFormattingPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
-import { plugin as clearFormattingPlugin } from './pm-plugins/clear-formatting';
+import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
 import textFormattingCursorPlugin from './pm-plugins/cursor';
 import textFormattingInputRulePlugin from './pm-plugins/input-rule';
@@ -81,7 +81,8 @@ const textFormatting = (options = {}) => ({
   }) {
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
-        textFormattingState: textFormattingPluginKey
+        textFormattingState: textFormattingPluginKey,
+        clearFormattingPluginState: clearFormattingPluginKey
       },
       render: () => {
         return /*#__PURE__*/React.createElement(Toolbar, {

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

@@ -28,7 +28,10 @@ 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 && (clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
+      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)) {
         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/text-formatting/ui/Toolbar/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
 import { useClearIcon } from './hooks/clear-formatting-icon';

package/dist/es2019/plugins/text-formatting/ui/Toolbar/toolbar-messages.js

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

package/dist/es2019/plugins/type-ahead/index.js

@@ -110,9 +110,9 @@ const typeAheadPlugin = options => {
         name: 'typeAhead',
         plugin: ({
           dispatch,
-          reactContext
+          getIntl
         }) => createPlugin({
-          reactContext,
+          getIntl,
           popupMountRef,
           reactDispatch: dispatch,
           typeAheadHandlers: typeAhead,

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -5,7 +5,7 @@ import { TextSelection } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { B400 } from '@atlaskit/theme/colors';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider } from 'react-intl-next';
 import { redo, undo } from 'prosemirror-history';
 import { TYPE_AHEAD_DECORATION_KEY, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';

package/dist/es2019/plugins/type-ahead/pm-plugins/main.js

@@ -21,12 +21,12 @@ const hasTypeAheadStep = tr => {
 
 export function createPlugin({
   reactDispatch,
-  reactContext,
   popupMountRef,
   createAnalyticsEvent,
-  typeAheadHandlers
+  typeAheadHandlers,
+  getIntl
 }) {
-  const intl = reactContext().intl;
+  const intl = getIntl();
   const {
     createDecorations,
     removeDecorations

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

@@ -1,5 +1,6 @@
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
 import { themed } from '@atlaskit/theme/components';
 import { ThemeProvider } from 'styled-components';

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';