@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -2,21 +2,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import commonMessages from '../../../../messages';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
+import { findDomRefAtPos } from 'prosemirror-utils';
 
 const addPopupOffset = pos => ({ ...pos,
-  // add 22 pixels to align y position with
+  // add 12 pixels to align y position with
   //the columns controls
-  top: pos.top ? pos.top + 22 : undefined
+  top: pos.top ? pos.top + 12 : undefined
 });
 
-const getTitle = layout => {
+const getMessage = layout => {
   switch (layout) {
     case 'default':
       return commonMessages.layoutWide;
@@ -42,24 +43,77 @@ class LayoutButton extends React.Component {
     });
   }
 
-  render() {
+  getTitle() {
     const {
       intl: {
         formatMessage
       },
+      layout = 'default'
+    } = this.props;
+    return formatMessage(getMessage(layout));
+  }
+
+  toolbarButton() {
+    const {
+      isResizing,
+      layout = 'default'
+    } = this.props;
+    const title = this.getTitle();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(ClassName.LAYOUT_BUTTON, {
+        [ClassName.IS_RESIZING]: isResizing
+      })
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      title: title,
+      onClick: this.handleClick,
+      iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+        label: title
+      }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+        label: title
+      })
+    }));
+  }
+
+  getStickyTargetRef(pos) {
+    const {
+      editorView
+    } = this.props;
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    const node = findDomRefAtPos(pos, domAtPos);
+    return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
+  }
+
+  renderSticky(button, targetRef) {
+    const title = this.getTitle();
+
+    if (!targetRef || !(targetRef instanceof HTMLElement)) {
+      return null;
+    }
+
+    const pos = targetRef.getBoundingClientRect();
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-label": title,
+      style: {
+        position: 'fixed',
+        top: pos.top + 22,
+        left: pos.right + 10
+      }
+    }, button);
+  }
+
+  renderPopup(button) {
+    const {
       mountPoint,
       boundariesElement,
       scrollableElement,
-      targetRef,
-      isResizing,
-      layout = 'default'
+      targetRef
     } = this.props;
 
     if (!targetRef) {
       return null;
     }
 
-    const title = formatMessage(getTitle(layout));
+    const title = this.getTitle();
     return /*#__PURE__*/React.createElement(Popup, {
       ariaLabel: title,
       target: targetRef,
@@ -71,19 +125,21 @@ class LayoutButton extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       forcePlacement: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(ClassName.LAYOUT_BUTTON, {
-        [ClassName.IS_RESIZING]: isResizing
-      })
-    }, /*#__PURE__*/React.createElement(ToolbarButton, {
-      title: title,
-      onClick: this.handleClick,
-      iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
-        label: title
-      }) : /*#__PURE__*/React.createElement(ExpandIcon, {
-        label: title
-      })
-    })));
+    }, button);
+  }
+
+  render() {
+    const {
+      stickyHeader
+    } = this.props;
+    const button = this.toolbarButton();
+    const stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
+
+    if (stickyTargetRef) {
+      return this.renderSticky(button, stickyTargetRef);
+    } else {
+      return this.renderPopup(button);
+    }
   }
 
   shouldComponentUpdate(nextProps) {
@@ -91,9 +147,10 @@ class LayoutButton extends React.Component {
       targetRef,
       layout,
       isResizing,
-      tableWidth
+      tableWidth,
+      stickyHeader
     } = this.props;
-    return targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
+    return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
   }
 
 }

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { hoverRows, selectRow } from '../../commands';
 import { isSelectionUpdated } from '../../utils';
 import CornerControls from './CornerControls';

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common';
+import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { fontSize } from '@atlaskit/theme/constants';
 import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -7,6 +7,7 @@ import { scrollbarStyles } from '../../../ui/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles.css';
+const cornerControlHeight = tableToolbarSize + 1;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
   th,td {
@@ -292,7 +293,7 @@ export const tableStyles = css`
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
       width: ${tableToolbarSize + 1}px;
-      height: ${tableToolbarSize + 1}px;
+      height: ${cornerControlHeight}px;
       display: none;
 
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
@@ -488,6 +489,19 @@ export const tableStyles = css`
         margin-top: 0;
       }
 
+      /*
+       * Headings have a top margin by default, but we don't want this on the
+       * first heading within table header cells.
+       *
+       * This specifically sets margin-top for the first heading within a header
+       * cell when center/right aligned.
+       */
+      th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
+        > h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child {
+          margin-top: 0;
+        }
+      }
+
       .${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
         position: relative;
       }
@@ -517,7 +531,8 @@ export const tableStyles = css`
     }
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       position: absolute;
-      top: ${tableMarginTop - 1}px;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
     }
     .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
@@ -526,15 +541,13 @@ export const tableStyles = css`
       left: -${tableToolbarSize}px;
     }
     .${ClassName.TABLE_NODE_WRAPPER} {
-      /* 
+      /*
       compensating for half of the insert column button
       that is aligned to the right edge initially on hover of the top right column control when table overflown,
       its center should be aligned with the edge
        */
       padding-right: ${tableInsertColumnButtonSize / 2}px;
       margin-right: -${tableInsertColumnButtonSize / 2}px;
-      padding-top: ${tableInsertColumnButtonSize / 2}px;
-      margin-top: -${tableInsertColumnButtonSize / 2}px;
       padding-bottom: ${tableScrollbarOffset}px;
       margin-bottom: -${tableScrollbarOffset}px;
       /* fixes gap cursor height */

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

@@ -1,5 +1,5 @@
-import { B100, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
-import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common';
+import { B200, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 import { themed } from '@atlaskit/theme/components';
@@ -25,7 +25,7 @@ export const tableBorderColor = themed({
 });
 export const tableFloatingControlsColor = N20;
 export const tableCellSelectedColor = B75;
-export const tableToolbarSelectedColor = B100;
+export const tableToolbarSelectedColor = B200;
 export const tableBorderSelectedColor = B300;
 export const tableCellDeleteColor = R50;
 export const tableBorderDeleteColor = R400;

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tableCellBorderWidth, tableMarginBottom, tableMarginTop } from '@atlaskit/editor-common';
+import { tableCellBorderWidth, tableMarginBottom, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
 import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } from './consts';

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

@@ -1,44 +1,84 @@
 import { NodeRange } from 'prosemirror-model';
+import { findWrapping } from 'prosemirror-transform';
 import { findTable } from '@atlaskit/editor-tables/utils';
+
+const bail = () => ({
+  tableIsCollapsible: false
+});
 /**
- * Collapses the selected table into an expand given a transaction.
- *
- * Will return undefined if it cannot determine the relevant table from a
- * selection,
- *
- * Or if wrapping it in an expand results in any errors
- *
- * @param tr
- * @returns Transaction | undefined
+ * Checks whether we can wrap the selected table into an expand via
+ * prosemirror-transform's `findWrapping` helper
  */
 
-export const collapseSelectedTable = tr => {
+
+export const isTableCollapsible = tr => {
   const selection = tr.selection;
   const schema = tr.doc.type.schema;
   const nodePos = findTable(selection);
 
   if (!nodePos) {
-    return undefined;
+    return bail();
   }
 
+  const expand = schema.nodes.expand;
   const {
     node,
     pos
   } = nodePos;
   const $pos = tr.doc.resolve(pos);
-  const expand = schema.nodes.expand;
-  const range = new NodeRange($pos, tr.doc.resolve(pos + node.nodeSize), $pos.depth); // Check if result of this transaction would result in an invalid document
-
-  try {
-    // TODO: add attrs: { __expanded: false } when it is working with new collab (CEMS-1204)
-    tr.wrap(range, [{
-      type: expand
-    }]).setMeta('scrollIntoView', true);
-    tr.doc.check();
-  } catch (err) {
-    // Don't care why it failed, only that we couldn't do so without issue
+  const range = new NodeRange($pos, tr.doc.resolve(pos + node.nodeSize), $pos.depth);
+
+  if (!range) {
+    return bail();
+  }
+
+  const canWrap = findWrapping(range, expand);
+
+  if (canWrap === null) {
+    return bail();
+  }
+
+  return {
+    tableIsCollapsible: true,
+    range,
+
+    /**
+     * Do we ever want to deal with the result of `findWrapping`? Probably not,
+     * but we have it anyway.
+     */
+    findWrappingRes: canWrap
+  };
+};
+/**
+ * Collapses the selected table into an expand given a transaction via
+ * `Transform.wrap`.
+ *
+ * Will return undefined if it cannot determine the relevant table from a
+ * selection, or if the table itself isn't collapsible.
+ *
+ * @param tr
+ * @returns Transaction | undefined
+ */
+
+export const collapseSelectedTable = tr => {
+  const canCollapse = isTableCollapsible(tr);
+  const expand = tr.doc.type.schema.nodes.expand;
+
+  if (!canCollapse.range || !canCollapse.tableIsCollapsible) {
     return undefined;
   }
+  /**
+   * TODO: add attrs: { __expanded: false } when
+   * - it is working with new collab (CEMS-1204)
+   * - synchrony is no longer used
+   *
+   *   (via confluence-frontend, "this feature" referencing allowInteractiveExpand)
+   *   `we can NEVER allow this feature to be enabled for the synchrony-powered editor
+   */
+
 
+  tr.wrap(canCollapse.range, [{
+    type: expand
+  }]).setMeta('scrollIntoView', true);
   return tr;
 };

package/dist/es2019/plugins/tasks-and-decisions/commands.js

@@ -95,13 +95,14 @@ export const insertTaskDecision = (view, listType, inputMethod = INPUT_METHOD.TO
     const {
       $to
     } = state.selection;
-    const pos = $to.end($to.depth);
-    return tr.split(pos, 1, [{
+    const endPos = $to.end($to.depth);
+    const newItemParagraphPos = endPos + 2;
+    return tr.split(endPos, 1, [{
       type: item,
       attrs: {
         localId: itemLocalId
       }
-    }]).setSelection(new TextSelection(tr.doc.resolve(pos + $to.depth)));
+    }]).setSelection(new TextSelection(tr.doc.resolve(newItemParagraphPos)));
   };
 
   const tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId);

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

@@ -1,5 +1,5 @@
 import { liftTarget } from 'prosemirror-transform';
-import { hasParentNodeOfType } from 'prosemirror-utils';
+import { findParentNodeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { findFarthestParentNode } from '../../../utils';
 export const isInsideTaskOrDecisionItem = state => {
   const {
@@ -28,6 +28,12 @@ export const isInsideTask = state => {
   } = state.schema.nodes;
   return hasParentNodeOfType([taskItem])(state.selection);
 };
+export const isInsideDecision = state => {
+  const {
+    decisionItem
+  } = state.schema.nodes;
+  return hasParentNodeOfType([decisionItem])(state.selection);
+};
 export const isTable = node => {
   if (!node) {
     return false;
@@ -81,6 +87,18 @@ export const getCurrentIndentLevel = selection => {
 
   return $from.depth - furthestParent.depth;
 };
+/**
+ * Finds the index of the current task item in relation to the closest taskList
+ */
+
+export const getTaskItemIndex = state => {
+  const $pos = state.selection.$from;
+
+  const isTaskList = node => (node === null || node === void 0 ? void 0 : node.type.name) === 'taskList';
+
+  const itemAtPos = findParentNodeClosestToPos($pos, isTaskList);
+  return $pos.index(itemAtPos ? itemAtPos.depth : undefined);
+};
 /**
  * Walk outwards from a position until we encounter the (inside) start of
  * the next node, or reach the end of the document.

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

@@ -2,13 +2,13 @@ import { autoJoin, chainCommands } from 'prosemirror-commands';
 import { keymap } from 'prosemirror-keymap';
 import { Fragment, Slice } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { uuid } from '@atlaskit/adf-schema';
 import { filter, isEmptySelectionAtEnd, isEmptySelectionAtStart } from '../../../utils/commands';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, withAnalytics } from '../../analytics';
 import { insertTaskDecisionWithAnalytics } from '../commands';
 import { joinAtCut, liftSelection, wrapSelectionInTaskList } from './commands';
-import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable } from './helpers';
+import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable, getTaskItemIndex, isInsideDecision } from './helpers';
 
 const indentationAnalytics = (curIndentLevel, direction) => ({
   action: ACTION.FORMATTED,
@@ -91,7 +91,25 @@ const unindent = filter(isInsideTask, (state, dispatch) => {
   }
 
   return withAnalytics(indentationAnalytics(curIndentLevel, INDENT_DIRECTION.OUTDENT))(autoJoin(liftSelection, ['taskList']))(state, dispatch);
-});
+}); // if selection is decision item or first action item in table cell
+// then dont consume the Tab, as table-keymap should tab to the next cell
+
+const shouldLetTabThroughInTable = state => {
+  const curIndentLevel = getCurrentIndentLevel(state.selection);
+  const curIndex = getTaskItemIndex(state);
+  const {
+    tableCell,
+    tableHeader
+  } = state.schema.nodes;
+  const cell = findParentNodeOfType([tableCell, tableHeader])(state.selection);
+
+  if ((curIndentLevel === 1 && curIndex === 0 || isInsideDecision(state)) && cell) {
+    return true;
+  }
+
+  return false;
+};
+
 const indent = filter(isInsideTask, (state, dispatch) => {
   // limit ui indentation to 6 levels
   const curIndentLevel = getCurrentIndentLevel(state.selection);
@@ -338,8 +356,8 @@ const enter = filter(isInsideTaskOrDecisionItem, chainCommands(filter(isEmptyTas
 }));
 export function keymapPlugin(schema, allowNestedTasks, consumeTabs) {
   const indentHandlers = {
-    'Shift-Tab': consumeTabs ? chainCommands(unindent, isInsideTaskOrDecisionItem) : unindent,
-    Tab: consumeTabs ? chainCommands(indent, isInsideTaskOrDecisionItem) : indent
+    'Shift-Tab': filter([isInsideTaskOrDecisionItem, state => !shouldLetTabThroughInTable(state)], (state, dispatch) => unindent(state, dispatch) || !!consumeTabs),
+    Tab: filter([isInsideTaskOrDecisionItem, state => !shouldLetTabThroughInTable(state)], (state, dispatch) => indent(state, dispatch) || !!consumeTabs)
   };
   const defaultHandlers = consumeTabs ? {
     'Shift-Tab': isInsideTaskOrDecisionItem,

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

@@ -1,4 +1,5 @@
-import { NodeSelection, Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
 import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
@@ -23,7 +24,7 @@ const setContextIdentifierProvider = provider => (state, dispatch) => {
 };
 
 export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, useLongPressSelection = false) {
-  return new Plugin({
+  return new SafePlugin({
     props: {
       nodeViews: {
         taskItem: taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory),

package/dist/es2019/plugins/tasks-and-decisions/styles.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common';
+import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const taskDecisionStyles = css`
   [data-decision-wrapper] {

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

@@ -2,7 +2,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-next';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import TaskItemWithProviders from './task-item-with-providers';
 const messages = defineMessages({
   placeholder: {

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

@@ -40,8 +40,6 @@ const textColorPlugin = textColorConfig => ({
     dispatchAnalyticsEvent,
     disabled
   }) {
-    const config = pluginConfig(textColorConfig);
-    const showMoreColorsToggle = config === null || config === void 0 ? void 0 : config.allowMoreTextColors;
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
         textColor: textColorPluginKey
@@ -55,7 +53,6 @@ const textColorPlugin = textColorConfig => ({
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
-        showMoreColorsToggle: showMoreColorsToggle,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         disabled: disabled
       })

package/dist/es2019/plugins/text-color/pm-plugins/main.js

@@ -1,41 +1,23 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { textColorPalette, textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';
 export function createInitialPluginState(editorState, pluginConfig) {
   const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
-  const showMoreColorsToggle = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowMoreTextColors) || false;
   const palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: DEFAULT_BORDER_COLOR
-  }, ...(showMoreColorsToggle ? textColorPaletteExtended : textColorPalette)];
+  }, ...textColorPaletteExtended];
   const state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),
     palette,
     defaultColor: defaultColor.color
-  }; // break up the palette for extended colors
-
-  if (showMoreColorsToggle) {
-    // defined palette order: [normal, dark, light] (but normal[0] is default/dark)
-    // expanded palette: [dark, normal, light] with normal[0] on the dark row
-    const normalRow = palette.slice(0, 7);
-    const darkRow = palette.slice(7, 14);
-    const lightRow = palette.slice(14);
-    const paletteExpanded = darkRow.concat(normalRow).concat(lightRow); // swap default back and slot 7
-
-    const defaultSwatch = paletteExpanded[0];
-    paletteExpanded[0] = paletteExpanded[7];
-    paletteExpanded[7] = defaultSwatch;
-    return { ...state,
-      palette: normalRow,
-      paletteExpanded
-    };
-  }
-
+  };
   return state;
 }
 export let ACTIONS;
@@ -48,7 +30,7 @@ export let ACTIONS;
 
 export const pluginKey = new PluginKey('textColorPlugin');
 export function createPlugin(dispatch, pluginConfig) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init(_config, editorState) {

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

@@ -16,6 +16,6 @@ const textColorGlyph = props => /*#__PURE__*/React.createElement("svg", _extends
 export const EditorTextColorIcon = () => {
   return /*#__PURE__*/React.createElement(Icon, {
     glyph: textColorGlyph,
-    label: "Text color icon"
+    label: ""
   });
 };