@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/es2019/plugins/table/ui/{ui-styles.css.js → ui-styles.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}
   }
 `;
@@ -40,7 +41,8 @@ const Button = cssString => css`
   margin: 0px;
   padding: 0px;
   text-decoration: none;
-  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
+  transition: background 0.1s ease-out 0s,
+    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
   outline: none !important;
   cursor: none;
 
@@ -52,10 +54,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;
@@ -107,7 +109,7 @@ const InsertButton = () => css`
     bottom: 0;
   }
   .${ClassName.CONTROLS_INSERT_BUTTON_INNER},
-  .${ClassName.CONTROLS_INSERT_BUTTON} {
+    .${ClassName.CONTROLS_INSERT_BUTTON} {
     height: ${tableInsertColumnButtonSize}px;
     width: ${tableInsertColumnButtonSize}px;
   }
@@ -151,14 +153,20 @@ export const insertRowButtonWrapper = css`
     left: ${tableInsertColumnButtonSize - 1}px;
   `)}
 `;
-export const columnControlsLineMarker = css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child td,
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child th {
+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;
     }
@@ -166,7 +174,7 @@ export const columnControlsLineMarker = css`
 `;
 export const DeleteButton = css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
-  .${ClassName.CONTROLS_DELETE_BUTTON} {
+    .${ClassName.CONTROLS_DELETE_BUTTON} {
     height: ${tableDeleteButtonSize}px;
     width: ${tableDeleteButtonSize}px;
   }
@@ -185,57 +193,52 @@ 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} {
-  .${ClassName.TABLE_RIGHT_SHADOW},
-  .${ClassName.TABLE_LEFT_SHADOW}{
-    height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-    top: ${tableMarginTop - 1}px;
+export const OverflowShadow = props => 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} {
-    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 +256,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 +269,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%;
@@ -283,16 +286,21 @@ export const columnControlsDecoration = css`
     display: block;
   }
 
-  table tr:first-child td.${ClassName.TABLE_CELL},
-  table tr:first-child th.${ClassName.TABLE_HEADER_CELL} {
+  table
+    tr:first-child
+    td.${ClassName.TABLE_CELL},
+    table
+    tr:first-child
+    th.${ClassName.TABLE_HEADER_CELL} {
     &.${ClassName.COLUMN_SELECTED},
-    &.${ClassName.HOVERED_COLUMN},
-    &.${ClassName.HOVERED_TABLE} {
+      &.${ClassName.HOVERED_COLUMN},
+      &.${ClassName.HOVERED_TABLE} {
       .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
         ${columnHeaderButtonSelected};
       }
 
-      &.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+      &.${ClassName.HOVERED_CELL_IN_DANGER}
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
         background-color: ${tableToolbarDeleteColor};
         border: 1px solid ${tableBorderDeleteColor};
         border-bottom: none;
@@ -301,8 +309,14 @@ export const columnControlsDecoration = css`
     }
   }
 
-  .${ClassName.TABLE_SELECTED} table tr:first-child td.${ClassName.TABLE_CELL},
-  .${ClassName.TABLE_SELECTED} table tr:first-child th.${ClassName.TABLE_HEADER_CELL} {
+  .${ClassName.TABLE_SELECTED}
+    table
+    tr:first-child
+    td.${ClassName.TABLE_CELL},
+    .${ClassName.TABLE_SELECTED}
+    table
+    tr:first-child
+    th.${ClassName.TABLE_HEADER_CELL} {
     .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
       ${columnHeaderButtonSelected};
     }
@@ -311,8 +325,8 @@ export const columnControlsDecoration = css`
 export const hoveredDeleteButton = css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
     .${ClassName.SELECTED_CELL},
-    .${ClassName.COLUMN_SELECTED},
-    .${ClassName.HOVERED_CELL} {
+      .${ClassName.COLUMN_SELECTED},
+      .${ClassName.HOVERED_CELL} {
       border: 1px solid ${tableBorderDeleteColor};
     }
     .${ClassName.SELECTED_CELL}::after {
@@ -321,7 +335,8 @@ export const hoveredDeleteButton = css`
   }
 `;
 export const hoveredCell = css`
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     .${ClassName.HOVERED_CELL} {
       position: relative;
       border: 1px solid ${tableBorderSelectedColor};
@@ -329,7 +344,8 @@ export const hoveredCell = css`
   }
 `;
 export const hoveredWarningCell = css`
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     td.${ClassName.HOVERED_CELL_WARNING} {
       background-color: ${Y50} !important; // We need to override the background-color added to the cell
       border: 1px solid ${Y200};
@@ -349,8 +365,7 @@ export const resizeHandle = css`
       z-index: ${resizeHandlerZIndex};
     }
 
-    td.${ClassName.WITH_RESIZE_LINE},
-    th.${ClassName.WITH_RESIZE_LINE} {
+    td.${ClassName.WITH_RESIZE_LINE}, th.${ClassName.WITH_RESIZE_LINE} {
       .${ClassName.RESIZE_HANDLE_DECORATION}::after {
         content: ' ';
         right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
@@ -363,8 +378,14 @@ export const resizeHandle = css`
       }
     }
 
-    table tr:first-child th.${ClassName.WITH_RESIZE_LINE} .${ClassName.RESIZE_HANDLE_DECORATION}::after,
-    table tr:first-child td.${ClassName.WITH_RESIZE_LINE} .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+    table
+      tr:first-child
+      th.${ClassName.WITH_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after,
+      table
+      tr:first-child
+      td.${ClassName.WITH_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
       top: -${tableToolbarSize + tableCellBorderWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
     }

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/tasks-and-decisions/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const taskDecisionStyles = css`

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/constants.js

@@ -1,5 +1,6 @@
 export const TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 export const TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
+export const TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 export let NavigationDirection;
 
 (function (NavigationDirection) {