@atlaskit/editor-core 159.0.1 → 162.0.0

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 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';
@@ -16,17 +16,18 @@ const InsertLine = cssString => css`
   }
 `;
 
-const Marker = css`
-  background-color: ${tableBorderColor};
+const Marker = props => css`
+  background-color: ${tableBorderColor(props)};
   position: absolute;
   height: ${lineMarkerSize}px;
   width: ${lineMarkerSize}px;
   border-radius: 50%;
   pointer-events: none;
 `;
-export const InsertMarker = cssString => css`
+
+export const InsertMarker = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
-    ${Marker};
+    ${Marker(props)};
     ${cssString}
   }
 `;
@@ -52,10 +53,10 @@ const Button = cssString => css`
   ${cssString}
 `;
 
-export const HeaderButton = cssString => css`
+export const HeaderButton = (props, cssString) => css`
   .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableToolbarColor};
-    border: 1px solid ${tableBorderColor};
+    background: ${tableToolbarColor(props)};
+    border: 1px solid ${tableBorderColor(props)};
     display: block;
     box-sizing: border-box;
     padding: 0;
@@ -151,14 +152,14 @@ export const insertRowButtonWrapper = css`
     left: ${tableInsertColumnButtonSize - 1}px;
   `)}
 `;
-export const columnControlsLineMarker = css`
+export const columnControlsLineMarker = props => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child td,
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child th {
     position: relative;
 
     &::before {
       content: ' ';
-      ${Marker};
+      ${Marker(props)};
       top: -${tableToolbarSize + lineMarkerOffsetFromColumnControls}px;
       right: -${lineMarkerSize / 2}px;
     }
@@ -185,57 +186,57 @@ export const DeleteButton = css`
     cursor: pointer;
   }
 `;
-export const OverflowShadow = css`
-.${ClassName.TABLE_RIGHT_SHADOW},
-.${ClassName.TABLE_LEFT_SHADOW}{
-  display: block;
-  height: calc(100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px);
-  position: absolute;
-  pointer-events: none;
-  top: ${tableMarginTop + tableToolbarSize - 1}px;
-  z-index: ${akEditorShadowZIndex};
-  width: 8px;
-}
-.${ClassName.TABLE_LEFT_SHADOW} {
-  background: linear-gradient(
-    to left,
-    rgba(99, 114, 130, 0) 0,
-    ${N40A} 100%
-  );
-  left: 0px;
-}
-.${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
-  left: ${akEditorTableNumberColumnWidth - 1}px;
-}
-.${ClassName.TABLE_RIGHT_SHADOW} {
-  background: linear-gradient(
-    to right,
-    rgba(99, 114, 130, 0) 0,
-    ${N40A} 100%
-  );
-  left: calc(100% + 2px);
-}
-.${ClassName.WITH_CONTROLS} {
+export const OverflowShadow = props => css`
   .${ClassName.TABLE_RIGHT_SHADOW},
   .${ClassName.TABLE_LEFT_SHADOW}{
-    height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-    top: ${tableMarginTop - 1}px;
+    display: block;
+    height: calc(100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px);
+    position: absolute;
+    pointer-events: none;
+    top: ${tableMarginTop + tableToolbarSize - 1}px;
+    z-index: ${akEditorShadowZIndex};
+    width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    border-left: 1px solid ${tableBorderColor};
+    background: linear-gradient(
+      to left,
+      rgba(99, 114, 130, 0) 0,
+      ${N40A} 100%
+    );
+    left: 0px;
   }
-}
-.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-  .${ClassName.TABLE_RIGHT_SHADOW},
-  .${ClassName.TABLE_LEFT_SHADOW} {
-    top: ${tableControlsSpacing}px;
+  .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
+    left: ${akEditorTableNumberColumnWidth - 1}px;
+  }
+  .${ClassName.TABLE_RIGHT_SHADOW} {
+    background: linear-gradient(
+      to right,
+      rgba(99, 114, 130, 0) 0,
+      ${N40A} 100%
+    );
+    left: calc(100% + 2px);
+  }
+  .${ClassName.WITH_CONTROLS} {
+    .${ClassName.TABLE_RIGHT_SHADOW},
+    .${ClassName.TABLE_LEFT_SHADOW}{
+      height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
+      top: ${tableMarginTop - 1}px;
+    }
+    .${ClassName.TABLE_LEFT_SHADOW} {
+      border-left: 1px solid ${tableBorderColor(props)};
+    }
+  }
+  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
+    .${ClassName.TABLE_RIGHT_SHADOW},
+    .${ClassName.TABLE_LEFT_SHADOW} {
+      top: ${tableControlsSpacing}px;
+    }
   }
-}
 `;
 
-const columnHeaderButton = cssString => css`
-  background: ${tableToolbarColor};
-  border: 1px solid ${tableBorderColor};
+const columnHeaderButton = (props, cssString) => css`
+  background: ${tableToolbarColor(props)};
+  border: 1px solid ${tableBorderColor(props)};
   display: block;
   box-sizing: border-box;
   padding: 0;
@@ -253,7 +254,7 @@ const columnHeaderButtonSelected = css`
   border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
 `;
-export const columnControlsDecoration = css`
+export const columnControlsDecoration = props => css`
   .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
     display: none;
     cursor: pointer;
@@ -266,8 +267,8 @@ export const columnControlsDecoration = css`
     &::after {
       content: ' ';
 
-      ${columnHeaderButton(`
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
+      ${columnHeaderButton(props, `
+        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor(props)};
         border-bottom: none;
         height: ${tableToolbarSize}px;
         width: 100%;

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

@@ -1,11 +1,11 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { pluginKey } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
 export const isIsolating = node => {
   return !!node.type.spec.isolating;
 };
-export const containsHeaderColumn = (state, table) => {
+export const containsHeaderColumn = table => {
   const map = TableMap.get(table); // Get cell positions for first column.
 
   const cellPositions = map.cellsInRect({
@@ -19,7 +19,7 @@ export const containsHeaderColumn = (state, table) => {
     try {
       const cell = table.nodeAt(cellPositions[i]);
 
-      if (cell && cell.type !== state.schema.nodes.tableHeader) {
+      if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
         return false;
       }
     } catch (e) {
@@ -29,22 +29,22 @@ export const containsHeaderColumn = (state, table) => {
 
   return true;
 };
-export const containsHeaderRow = (state, table) => {
+export const containsHeaderRow = table => {
   const map = TableMap.get(table);
 
   for (let i = 0; i < map.width; i++) {
     const cell = table.nodeAt(map.map[i]);
 
-    if (cell && cell.type !== state.schema.nodes.tableHeader) {
+    if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
       return false;
     }
   }
 
   return true;
 };
-export const checkIfHeaderColumnEnabled = state => filterNearSelection(state, findTable, containsHeaderColumn, false);
-export const checkIfHeaderRowEnabled = state => filterNearSelection(state, findTable, containsHeaderRow, false);
-export const checkIfNumberColumnEnabled = state => filterNearSelection(state, findTable, (_, table) => !!table.attrs.isNumberColumnEnabled, false);
+export const checkIfHeaderColumnEnabled = selection => filterNearSelection(selection, findTable, containsHeaderColumn, false);
+export const checkIfHeaderRowEnabled = selection => filterNearSelection(selection, findTable, containsHeaderRow, false);
+export const checkIfNumberColumnEnabled = selection => filterNearSelection(selection, findTable, table => !!table.attrs.isNumberColumnEnabled, false);
 export const isLayoutSupported = state => {
   const {
     permittedLayouts
@@ -78,14 +78,14 @@ export const tablesHaveDifferentNoOfColumns = (currentTable, previousTable) => {
   return prevMap.width !== currentMap.width;
 };
 
-function filterNearSelection(state, findNode, predicate, defaultValue) {
-  const found = findNode(state.selection);
+function filterNearSelection(selection, findNode, predicate, defaultValue) {
+  const found = findNode(selection);
 
   if (!found) {
     return defaultValue;
   }
 
-  return predicate(state, found.node, found.pos);
+  return predicate(found.node, found.pos);
 }
 
 function getTableWidths(node) {

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

@@ -1,6 +1,8 @@
 import { autoJoin } from 'prosemirror-commands';
+import { NodeRange } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, replaceParentNodeOfType, safeInsert, setTextSelection } from 'prosemirror-utils';
+import { liftTarget } from 'prosemirror-transform';
 import { uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD, USER_CONTEXT } from '../analytics';
 import { GapCursorSelection } from '../selection/gap-cursor-selection';
@@ -234,6 +236,14 @@ export const createListAtSelection = (tr, list, item, schema, state, listLocalId
     }, [item.create({
       localId: uuid.generate()
     }, $from.node($from.depth).content)]);
+    const hasBlockquoteParent = findParentNodeOfType(blockquote)(selection);
+
+    if (hasBlockquoteParent) {
+      const liftedDepth = $from.depth - 1;
+      const range = new NodeRange($from, $to, liftedDepth);
+      tr.lift(range, liftTarget(range));
+    }
+
     const listParent = findParentNodeOfType(taskList)(selection) || findParentNodeOfType(decisionList)(selection);
     const listItem = findParentNodeOfType(taskItem)(selection) || findParentNodeOfType(decisionItem)(selection); // For a selection inside a task/decision list, we can't just simply replace the
     // node type as it will mess up lists with > 1 item
@@ -265,10 +275,12 @@ export const createListAtSelection = (tr, list, item, schema, state, listLocalId
 
     const nodeTypesToReplace = [blockquote];
 
-    if (nodeType === paragraph && childCount > 0) {
+    if (nodeType === paragraph && childCount > 0 || hasBlockquoteParent) {
       // Only convert paragraphs containing content.
       // Empty paragraphs use the default flow.
       // This distinction ensures the text selection remains in the correct location.
+      // We also want to replace the paragraph type when we are inside a blockQuote
+      // to avoid inserting an extra taskList whilst keeping the paragraph
       nodeTypesToReplace.push(paragraph);
     }
 

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

@@ -1,5 +1,5 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
-export const textFormattingStyles = css`
-  ${codeMarkSharedStyles}
+export const textFormattingStyles = props => css`
+  ${codeMarkSharedStyles(props)}
 `;

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
@@ -8,6 +8,8 @@ import { SingleToolbarButtons } from './single-toolbar-buttons';
 import { MoreButton } from './more-button';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { toolbarMessages } from './toolbar-messages';
+import { usePreviousObjectState, compareItemsArrays, isArrayContainsContent } from '../../utils';
+import Announcer from '../../../../utils/announcer/announcer';
 
 const ToolbarFormatting = ({
   shouldUseResponsiveToolbar,
@@ -21,6 +23,7 @@ const ToolbarFormatting = ({
   intl
 }) => {
   const editorState = useMemo(() => editorView.state, [editorView.state]);
+  const [message, setMessage] = useState('');
   const defaultIcons = useFormattingIcons({
     editorState,
     intl,
@@ -46,6 +49,52 @@ const ToolbarFormatting = ({
     toolbarSize,
     responsivenessEnabled: shouldUseResponsiveToolbar
   });
+  const clearFormattingStatus = intl.formatMessage(toolbarMessages.textFormattingOff);
+  const superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
+  const subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
+  const activeItems = [...dropdownItems, ...singleItems].filter(item => item.isActive);
+  const prevActiveItems = usePreviousObjectState(activeItems);
+  const fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
+  const fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
+  let comparedItems;
+  let screenReaderMessage = '';
+
+  if (prevActiveItems && activeItems.length > prevActiveItems.length) {
+    comparedItems = compareItemsArrays(activeItems, prevActiveItems);
+    screenReaderMessage = intl.formatMessage(toolbarMessages.on, {
+      formattingType: comparedItems[0].content
+    });
+  } else {
+    comparedItems = compareItemsArrays(prevActiveItems, activeItems);
+
+    if (comparedItems && comparedItems.length) {
+      var _activeItems$;
+
+      screenReaderMessage = intl.formatMessage(toolbarMessages.off, {
+        formattingType: comparedItems[0].content
+      });
+
+      if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
+        screenReaderMessage = intl.formatMessage(toolbarMessages.codeOn, {
+          textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
+        });
+      }
+
+      if (fromSuperscriptToSubscript) {
+        screenReaderMessage = superscriptOffSubscriptOnStatus;
+      }
+
+      if (fromSubscriptToSuperscript) {
+        screenReaderMessage = subscriptOffSuperscriptOnStatus;
+      }
+    }
+  } // handle 'Clear formatting' status for screen readers
+
+
+  if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
+    screenReaderMessage = clearFormattingStatus;
+  }
+
   const items = useMemo(() => {
     if (!clearIcon) {
       return dropdownItems;
@@ -54,9 +103,19 @@ const ToolbarFormatting = ({
     return [...dropdownItems, clearIcon];
   }, [clearIcon, dropdownItems]);
   const moreFormattingButtonLabel = intl.formatMessage(toolbarMessages.moreFormatting);
+  useEffect(() => {
+    if (screenReaderMessage) {
+      setMessage(screenReaderMessage);
+    }
+  }, [screenReaderMessage]);
   return /*#__PURE__*/React.createElement(ButtonGroup, {
     width: isReducedSpacing ? 'small' : 'large'
-  }, /*#__PURE__*/React.createElement(SingleToolbarButtons, {
+  }, message && /*#__PURE__*/React.createElement(Announcer, {
+    ariaLive: "assertive",
+    text: message,
+    ariaRelevant: "additions",
+    delay: 250
+  }), /*#__PURE__*/React.createElement(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing

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

@@ -15,16 +15,31 @@ export const toolbarMessages = defineMessages({
     defaultMessage: 'Code',
     description: 'Whether the text selection has monospaced/code font'
   },
+  codeOn: {
+    id: 'fabric.editor.code.on',
+    defaultMessage: '{textFormattingOff}, Code On',
+    description: 'Reports that code formatting has been turned on'
+  },
   subscript: {
     id: 'fabric.editor.subscript',
     defaultMessage: 'Subscript',
     description: 'Whether the text selection is written below the line in a slightly smaller size'
   },
+  subscriptOffSuperscriptOn: {
+    id: 'fabric.editor.subscript.off.superscript.on',
+    defaultMessage: 'Subscript Off, Superscript On',
+    description: 'Reports text formatting in case when subscript off and superscript on'
+  },
   superscript: {
     id: 'fabric.editor.superscript',
     defaultMessage: 'Superscript',
     description: 'Whether the text selection is written above the line in a slightly smaller size'
   },
+  superscriptOffSubscriptOn: {
+    id: 'fabric.editor.superscript.off.subscript.on',
+    defaultMessage: 'Superscript Off, Subscript On',
+    description: 'Describe text formatting in case when Superscript Off and Subscript on'
+  },
   clearFormatting: {
     id: 'fabric.editor.clearFormatting',
     defaultMessage: 'Clear formatting',
@@ -44,5 +59,20 @@ export const toolbarMessages = defineMessages({
     id: 'fabric.editor.italic',
     defaultMessage: 'Italic',
     description: 'This refers to italics or emphasized formatting.'
+  },
+  on: {
+    id: 'fabric.editor.on',
+    defaultMessage: '{formattingType} On',
+    description: 'Reports that text formatting has been turned on'
+  },
+  off: {
+    id: 'fabric.editor.off',
+    defaultMessage: '{formattingType} Off',
+    description: 'Reports that text formatting has been turned off'
+  },
+  textFormattingOff: {
+    id: 'fabric.editor.text.formatting.off',
+    defaultMessage: 'Text formatting Off',
+    description: 'Reports that text formatting has been turned off'
   }
 });

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

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
 export const nodeLen = node => {
@@ -131,4 +132,15 @@ const marksArePresent = state => {
 
 export const checkFormattingIsPresent = state => {
   return marksArePresent(state) || blockStylingIsPresent(state);
-};
+};
+export const usePreviousObjectState = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+export const compareItemsArrays = (items, prevItems) => {
+  return items && items.filter(item => !prevItems.includes(item));
+};
+export const isArrayContainsContent = (items, content) => items.filter(item => item.content === content).length > 0;

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

@@ -1,7 +1,7 @@
 import { TypeAheadAvailableNodes, SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { findHandler, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
+import { findHandler, findHandlerByTrigger, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
 import { INPUT_METHOD } from '../analytics/types/enums';
-import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
+import { openTypeAheadAtCursor, openTypeAhead } from './transforms/open-typeahead-at-cursor';
 import { closeTypeAhead } from './transforms/close-type-ahead';
 import { updateQuery } from './commands/update-query';
 import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
@@ -203,6 +203,35 @@ const currentQuery = ({
   return getTypeAheadQuery(editorView.state);
 };
 
+const find = ({
+  editorView
+}) => trigger => {
+  const {
+    state: editorState
+  } = editorView;
+  const handler = findHandlerByTrigger({
+    trigger,
+    editorState
+  });
+
+  if (!handler) {
+    return null;
+  }
+
+  return handler;
+}; // This is an internal tool to be used inside of others Editor Plugins
+// We shouldn't public export this method.
+
+
+export const createInternalTypeAheadTools = editorView => {
+  const props = {
+    editorView
+  };
+  return {
+    findTypeAheadHandler: find(props),
+    openTypeAheadHandler: openTypeAhead
+  };
+};
 export const createTypeAheadTools = editorView => {
   const props = {
     editorView

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

@@ -1,11 +1,12 @@
 import { TextSelection } from 'prosemirror-state';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
-export const openTypeAheadAtCursor = ({
-  triggerHandler,
-  inputMethod,
-  query
-}) => tr => {
+export const openTypeAhead = props => tr => {
+  const {
+    triggerHandler,
+    inputMethod,
+    query
+  } = props;
   tr.setMeta(pluginKey, {
     action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
     params: {
@@ -14,6 +15,17 @@ export const openTypeAheadAtCursor = ({
       query
     }
   });
+};
+export const openTypeAheadAtCursor = ({
+  triggerHandler,
+  inputMethod,
+  query
+}) => tr => {
+  openTypeAhead({
+    triggerHandler,
+    inputMethod,
+    query
+  })(tr);
   const {
     selection
   } = tr;

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

@@ -64,6 +64,21 @@ export const findHandler = (id, state) => {
   } = pluginState;
   return typeAheadHandlers.find(h => h.id === id) || null;
 };
+export const findHandlerByTrigger = ({
+  trigger,
+  editorState
+}) => {
+  const pluginState = typeAheadPluginKey.getState(editorState);
+
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+
+  const {
+    typeAheadHandlers
+  } = pluginState;
+  return typeAheadHandlers.find(h => h.trigger === trigger) || null;
+};
 export const moveSelectedIndex = ({
   editorView,
   direction

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -12,7 +12,7 @@ import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -67,7 +67,7 @@ const ContentArea = styled(ContentStyles)`
 
   padding: ${TableControlsPadding}px;
 
-  ${tableCommentEditorStyles};
+  ${deprecatedTableCommentEditorStyles};
 `;
 ContentArea.displayName = 'ContentArea';
 const SecondaryToolbar = styled.div`

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
 import ContentStyles from '../../ContentStyles';
-import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles.css';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
@@ -93,7 +93,7 @@ export const EditorContentArea = styled.div`
     }
   }
 
-  ${tableFullPageEditorStyles};
+  ${deprecatedTableFullPageEditorStyles};
 
   .fabric-editor--full-width-mode {
     /* Full Width Mode styles for ignoring breakout sizes */