@atlaskit/editor-plugin-block-type 4.0.14 → 4.1.0

package/dist/es2019/pm-plugins/commands/block-type.js

@@ -4,6 +4,7 @@ import { filterChildrenBetween, wrapSelectionIn } from '@atlaskit/editor-common/
 import { Slice, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { HEADINGS_BY_NAME, NORMAL_TEXT } from '../block-types';
+import { FORMATTING_NODE_TYPES, FORMATTING_MARK_TYPES, cellSelectionNodesBetween, formatTypes, clearNodeFormattingOnSelection } from './clear-formatting';
 import { wrapSelectionInBlockType } from './wrapSelectionIn';
 export function setBlockType(name) {
   return ({
@@ -117,6 +118,54 @@ export function setNormalText(fromBlockQuote) {
     return tr;
   };
 }
+export function clearFormatting() {
+  return function ({
+    tr
+  }) {
+    const formattingCleared = [];
+    const schema = tr.doc.type.schema;
+    FORMATTING_MARK_TYPES.forEach(mark => {
+      const {
+        from,
+        to
+      } = tr.selection;
+      const markType = schema.marks[mark];
+      if (!markType) {
+        return;
+      }
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, (node, pos) => {
+          const isTableCell = node.type === schema.nodes.tableCell || node.type === schema.nodes.tableHeader;
+          if (!isTableCell) {
+            return true;
+          }
+          if (tr.doc.rangeHasMark(pos, pos + node.nodeSize, markType)) {
+            formattingCleared.push(formatTypes[mark]);
+            tr.removeMark(pos, pos + node.nodeSize, markType);
+          }
+          return false;
+        });
+      } else if (tr.doc.rangeHasMark(from, to, markType)) {
+        formattingCleared.push(formatTypes[mark]);
+        tr.removeMark(from, to, markType);
+      }
+    });
+    FORMATTING_NODE_TYPES.forEach(nodeName => {
+      const formattedNodeType = schema.nodes[nodeName];
+      const {
+        $from,
+        $to
+      } = tr.selection;
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, clearNodeFormattingOnSelection(schema, tr, formattedNodeType, nodeName, formattingCleared));
+      } else {
+        tr.doc.nodesBetween($from.pos, $to.pos, clearNodeFormattingOnSelection(schema, tr, formattedNodeType, nodeName, formattingCleared));
+      }
+    });
+    tr.setStoredMarks([]);
+    return tr;
+  };
+}
 function withCurrentHeadingLevel(fn) {
   return ({
     tr

package/dist/es2019/pm-plugins/commands/clear-formatting.js

@@ -0,0 +1,50 @@
+import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { liftTarget } from '@atlaskit/editor-prosemirror/transform';
+// Functions duplicated from platform/packages/editor/editor-plugin-text-formatting/src/editor-commands/clear-formatting.ts
+// TODO: Refactor to avoid duplication if platform_editor_blockquote_in_text_formatting_menu experiment is productionalised
+export const FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
+export const FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
+export const formatTypes = {
+  em: ACTION_SUBJECT_ID.FORMAT_ITALIC,
+  code: ACTION_SUBJECT_ID.FORMAT_CODE,
+  strike: ACTION_SUBJECT_ID.FORMAT_STRIKE,
+  strong: ACTION_SUBJECT_ID.FORMAT_STRONG,
+  underline: ACTION_SUBJECT_ID.FORMAT_UNDERLINE,
+  textColor: ACTION_SUBJECT_ID.FORMAT_COLOR,
+  subsup: 'subsup',
+  backgroundColor: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR
+};
+export const cellSelectionNodesBetween = (selection, doc, f, startPos
+// eslint-disable-next-line @typescript-eslint/max-params
+) => {
+  selection.forEachCell((cell, cellPos) => {
+    doc.nodesBetween(cellPos, cellPos + cell.nodeSize, f, startPos);
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/max-params
+export function clearNodeFormattingOnSelection(schema, tr, formattedNodeType, nodeName, formattingCleared) {
+  return function (node, pos) {
+    if (node.type === formattedNodeType) {
+      if (formattedNodeType.isTextblock) {
+        tr.setNodeMarkup(pos, schema.nodes.paragraph);
+        formattingCleared.push(nodeName);
+        return false;
+      } else {
+        // In case of panel or blockquote
+        const fromPos = tr.doc.resolve(pos + 1);
+        const toPos = tr.doc.resolve(pos + node.nodeSize - 1);
+        const nodeRange = fromPos.blockRange(toPos);
+        if (nodeRange) {
+          const targetLiftDepth = liftTarget(nodeRange);
+          if (targetLiftDepth || targetLiftDepth === 0) {
+            formattingCleared.push(nodeName);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            tr.lift(nodeRange, targetLiftDepth);
+          }
+        }
+      }
+    }
+    return true;
+  };
+}

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

@@ -6,7 +6,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BLOCK_QUOTE, CODE_BLOCK, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6, HEADINGS_BY_LEVEL, NORMAL_TEXT, OTHER, PANEL, TEXT_BLOCK_TYPES, WRAPPER_BLOCK_TYPES, getBlockTypesInDropdown } from './block-types';
 import { setHeadingWithAnalytics, setNormalTextWithAnalytics } from './commands/block-type';
 import { HEADING_KEYS } from './consts';
-import { areBlockTypesDisabled } from './utils';
+import { areBlockTypesDisabled, checkFormattingIsPresent, hasBlockQuoteInOptions } from './utils';
 const blockTypeForNode = (node, schema) => {
   if (node.type === schema.nodes.heading) {
     const maybeNode = HEADINGS_BY_LEVEL[node.attrs['level']];
@@ -96,12 +96,14 @@ export const createPlugin = (editorAPI, dispatch, lastNodeMustBeParagraph, inclu
         const availableWrapperBlockTypes = WRAPPER_BLOCK_TYPES.filter(blockType => isBlockTypeSchemaSupported(blockType, state));
         const BLOCK_TYPES_IN_DROPDOWN = getBlockTypesInDropdown(includeBlockQuoteAsTextstyleOption);
         const availableBlockTypesInDropdown = BLOCK_TYPES_IN_DROPDOWN.filter(blockType => isBlockTypeSchemaSupported(blockType, state));
+        const formattingIsPresent = hasBlockQuoteInOptions(availableBlockTypesInDropdown) ? checkFormattingIsPresent(state) : undefined;
         return {
           currentBlockType: detectBlockType(availableBlockTypesInDropdown, state),
           blockTypesDisabled: areBlockTypesDisabled(state),
           availableBlockTypes,
           availableWrapperBlockTypes,
-          availableBlockTypesInDropdown
+          availableBlockTypesInDropdown,
+          formattingIsPresent
         };
       },
       // Ignored via go/ees005
@@ -110,9 +112,10 @@ export const createPlugin = (editorAPI, dispatch, lastNodeMustBeParagraph, inclu
         const newPluginState = {
           ...oldPluginState,
           currentBlockType: detectBlockType(oldPluginState.availableBlockTypesInDropdown, newState),
-          blockTypesDisabled: areBlockTypesDisabled(newState)
+          blockTypesDisabled: areBlockTypesDisabled(newState),
+          formattingIsPresent: hasBlockQuoteInOptions(oldPluginState.availableBlockTypesInDropdown) ? checkFormattingIsPresent(newState) : undefined
         };
-        if (newPluginState.currentBlockType !== oldPluginState.currentBlockType || newPluginState.blockTypesDisabled !== oldPluginState.blockTypesDisabled) {
+        if (newPluginState.currentBlockType !== oldPluginState.currentBlockType || newPluginState.blockTypesDisabled !== oldPluginState.blockTypesDisabled || newPluginState.formattingIsPresent !== oldPluginState.formattingIsPresent) {
           dispatch(pluginKey, newPluginState);
         }
         return newPluginState;

package/dist/es2019/pm-plugins/ui/FloatingToolbarComponent.js

@@ -22,6 +22,10 @@ export function FloatingToolbarComponent({
     var _api$core2, _api$blockType2, _api$blockType2$comma;
     return api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType2 = api.blockType) === null || _api$blockType2 === void 0 ? void 0 : (_api$blockType2$comma = _api$blockType2.commands) === null || _api$blockType2$comma === void 0 ? void 0 : _api$blockType2$comma.insertBlockQuote(INPUT_METHOD.TOOLBAR));
   }, [api]);
+  const clearFormatting = useCallback(() => {
+    var _api$core3, _api$blockType3, _api$blockType3$comma;
+    return api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType3 = api.blockType) === null || _api$blockType3 === void 0 ? void 0 : (_api$blockType3$comma = _api$blockType3.commands) === null || _api$blockType3$comma === void 0 ? void 0 : _api$blockType3$comma.clearFormatting());
+  }, [api]);
   return /*#__PURE__*/React.createElement(ToolbarBlockType, {
     isSmall: FloatingToolbarSettings.isSmall,
     isDisabled: FloatingToolbarSettings.disabled,
@@ -32,6 +36,7 @@ export function FloatingToolbarComponent({
     ,
     pluginState: blockTypeState,
     wrapBlockQuote: wrapBlockQuote,
+    clearFormatting: clearFormatting,
     shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,
     api: api
   });

package/dist/es2019/pm-plugins/ui/PrimaryToolbarComponent.js

@@ -23,12 +23,17 @@ export function PrimaryToolbarComponent({
     var _api$core2, _api$blockType2, _api$blockType2$comma;
     return api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType2 = api.blockType) === null || _api$blockType2 === void 0 ? void 0 : (_api$blockType2$comma = _api$blockType2.commands) === null || _api$blockType2$comma === void 0 ? void 0 : _api$blockType2$comma.insertBlockQuote(INPUT_METHOD.TOOLBAR));
   };
+  const clearFormatting = () => {
+    var _api$core3, _api$blockType3, _api$blockType3$comma;
+    return api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType3 = api.blockType) === null || _api$blockType3 === void 0 ? void 0 : (_api$blockType3$comma = _api$blockType3.commands) === null || _api$blockType3$comma === void 0 ? void 0 : _api$blockType3$comma.clearFormatting());
+  };
   return /*#__PURE__*/React.createElement(ToolbarBlockType, {
     isSmall: isSmall,
     isDisabled: disabled,
     isReducedSpacing: isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
-    wrapBlockQuote: wrapBlockQuote
+    wrapBlockQuote: wrapBlockQuote,
+    clearFormatting: clearFormatting
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,

package/dist/es2019/pm-plugins/ui/ToolbarBlockType/index.js

@@ -8,13 +8,16 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { findKeymapByDescription, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
+import { findKeymapByDescription, tooltip, clearFormatting } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ThemeMutationObserver } from '@atlaskit/tokens';
+import { NORMAL_TEXT } from '../../block-types';
 import { BlockTypeButton } from './blocktype-button';
-import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
+import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect, floatingToolbarWrapperStyle } from './styled';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class ToolbarBlockType extends React.PureComponent {
   constructor(...args) {
@@ -56,23 +59,22 @@ class ToolbarBlockType extends React.PureComponent {
       } = this.props;
       const {
         currentBlockType,
-        availableBlockTypesInDropdown
+        availableBlockTypesInDropdown,
+        formattingIsPresent
       } = this.props.pluginState;
       const items = availableBlockTypesInDropdown.map((blockType, index) => {
         const isActive = currentBlockType === blockType;
         const tagName = blockType.tagName || 'p';
         const Tag = tagName;
         const keyMap = findKeymapByDescription(blockType.title.defaultMessage);
-        return {
+        const item = {
           content:
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           jsx("div", {
             css: blockTypeMenuItemStyle(tagName, isActive, this.state.typographyTheme)
           }, jsx(Tag, null, formatMessage(blockType.title))),
           value: blockType,
-          label: formatMessage(blockType.title),
           'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
-          keyShortcuts: getAriaKeyshortcuts(keyMap),
           key: `${blockType.name}-${index}`,
           elemAfter:
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -81,7 +83,30 @@ class ToolbarBlockType extends React.PureComponent {
           }, tooltip(keyMap)),
           isActive
         };
+        return item;
       });
+      if (availableBlockTypesInDropdown.map(blockType => blockType.name).includes('blockquote')) {
+        const clearFormattingItem = {
+          content: jsx("div", null, jsx("p", null, toolbarMessages.clearFormatting.defaultMessage)),
+          value: {
+            name: 'clearFormatting'
+          },
+          'aria-label': tooltip(clearFormatting, toolbarMessages.clearFormatting.defaultMessage),
+          key: 'clear-formatting',
+          elemAfter:
+          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          jsx("div", {
+            css: [keyboardShortcut]
+          }, tooltip(clearFormatting)),
+          isActive: false,
+          isDisabled: currentBlockType === NORMAL_TEXT && !formattingIsPresent
+        };
+        return [{
+          items
+        }, {
+          items: [clearFormattingItem]
+        }];
+      }
       return [{
         items
       }];
@@ -94,8 +119,12 @@ class ToolbarBlockType extends React.PureComponent {
       if (blockType.name === 'blockquote') {
         this.props.wrapBlockQuote(blockType.name);
       } else {
-        const fromBlockQuote = this.props.pluginState.currentBlockType.name === 'blockquote';
-        this.props.setTextLevel(blockType.name, fromBlockQuote);
+        if (blockType.name === 'clearFormatting') {
+          this.props.clearFormatting();
+        } else {
+          const fromBlockQuote = this.props.pluginState.currentBlockType.name === 'blockquote';
+          this.props.setTextLevel(blockType.name, fromBlockQuote);
+        }
       }
       if (shouldCloseMenu) {
         this.setState({
@@ -154,48 +183,54 @@ class ToolbarBlockType extends React.PureComponent {
     const blockTypeTitles = availableBlockTypesInDropdown.filter(blockType => blockType.name === currentBlockType.name).map(blockType => blockType.title);
     if (!this.props.isDisabled && !blockTypesDisabled) {
       const items = this.createItems();
-      return (
+      return jsx("span", {
+        css: editorExperiment('platform_editor_blockquote_in_text_formatting_menu', true) ?
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        [wrapperStyle, floatingToolbarWrapperStyle] :
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        jsx("span", {
-          css: wrapperStyle
-        }, jsx(DropdownMenu, {
-          items: items,
-          onOpenChange: this.onOpenChange,
-          onItemActivated: this.handleSelectBlockType,
-          isOpen: active,
-          mountTo: popupsMountPoint,
-          boundariesElement: popupsBoundariesElement,
-          scrollableElement: popupsScrollableElement,
-          zIndex: akEditorMenuZIndex,
-          fitHeight: 360,
-          fitWidth: 106,
-          shouldUseDefaultRole: shouldUseDefaultRole,
-          shouldFocusFirstItem: () => {
-            if (isOpenedByKeyboard) {
-              // eslint-disable-next-line @repo/internal/react/no-set-state-inside-render
-              this.setState({
-                ...this.state,
-                isOpenedByKeyboard: false
-              });
-            }
-            return isOpenedByKeyboard;
+        wrapperStyle
+      }, jsx(DropdownMenu, {
+        items: items,
+        onOpenChange: this.onOpenChange,
+        onItemActivated: this.handleSelectBlockType,
+        isOpen: active,
+        mountTo: popupsMountPoint,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement,
+        zIndex: akEditorMenuZIndex,
+        fitHeight: 360,
+        fitWidth: 106,
+        section: {
+          hasSeparator: true
+        },
+        shouldUseDefaultRole: shouldUseDefaultRole
+        // hasSeparator={true}
+        ,
+        shouldFocusFirstItem: () => {
+          if (isOpenedByKeyboard) {
+            // eslint-disable-next-line @repo/internal/react/no-set-state-inside-render
+            this.setState({
+              ...this.state,
+              isOpenedByKeyboard: false
+            });
           }
-        }, jsx(BlockTypeButton, {
-          isSmall: isSmall,
-          isReducedSpacing: isReducedSpacing,
-          selected: active,
-          disabled: false,
-          title: blockTypeTitles[0],
-          onClick: this.handleTriggerClick,
-          onKeyDown: this.handleTriggerByKeyboard,
-          formatMessage: formatMessage,
-          "aria-expanded": active,
-          blockTypeName: currentBlockType.name
-        })), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          css: separatorStyles
-        }))
-      );
+          return isOpenedByKeyboard;
+        }
+      }, jsx(BlockTypeButton, {
+        isSmall: isSmall,
+        isReducedSpacing: isReducedSpacing,
+        selected: active,
+        disabled: false,
+        title: blockTypeTitles[0],
+        onClick: this.handleTriggerClick,
+        onKeyDown: this.handleTriggerByKeyboard,
+        formatMessage: formatMessage,
+        "aria-expanded": active,
+        blockTypeName: currentBlockType.name
+      })), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        css: separatorStyles
+      }));
     }
     return (
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/es2019/pm-plugins/ui/ToolbarBlockType/styled.js

@@ -18,6 +18,12 @@ export const blockTypeMenuItemStyle = (tagName, selected, typographyTheme) => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       'h1, h2, h3, h4, h5, h6': {
         marginTop: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      blockquote: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginTop: 0
       }
     }
   },
@@ -45,4 +51,12 @@ export const wrapperSmallStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const expandIconWrapperStyle = css({
   marginLeft: "var(--ds-space-negative-100, -8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const floatingToolbarWrapperStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  "[data-role='droplistContent']": {
+    maxHeight: '90vh'
+  }
 });

package/dist/es2019/pm-plugins/utils.js

@@ -1,7 +1,8 @@
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
 import { createRule, createWrappingJoinRule } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { WRAPPER_BLOCK_TYPES } from './block-types';
+import { WRAPPER_BLOCK_TYPES, FORMATTING_NODE_TYPES, FORMATTING_MARK_TYPES } from './block-types';
 export const isNodeAWrappingBlockNode = node => {
   if (!node) {
     return false;
@@ -107,4 +108,44 @@ export function areBlockTypesDisabled(state) {
     return nodesTypes.filter(type => type !== panel).length > 0 && (!hasQuote || hasNestedListInQuote);
   }
   return nodesTypes.filter(type => type !== panel).length > 0;
-}
+}
+const blockStylingIsPresent = state => {
+  const {
+    from,
+    to
+  } = state.selection;
+  let isBlockStyling = false;
+  state.doc.nodesBetween(from, to, node => {
+    if (FORMATTING_NODE_TYPES.indexOf(node.type.name) !== -1) {
+      isBlockStyling = true;
+      return false;
+    }
+    return true;
+  });
+  return isBlockStyling;
+};
+const marksArePresent = state => {
+  const activeMarkTypes = FORMATTING_MARK_TYPES.filter(mark => {
+    if (!!state.schema.marks[mark]) {
+      const {
+        $from,
+        empty
+      } = state.selection;
+      const {
+        marks
+      } = state.schema;
+      if (empty) {
+        return !!marks[mark].isInSet(state.storedMarks || $from.marks());
+      }
+      return anyMarkActive(state, marks[mark]);
+    }
+    return false;
+  });
+  return activeMarkTypes.length > 0;
+};
+export const checkFormattingIsPresent = state => {
+  return marksArePresent(state) || blockStylingIsPresent(state);
+};
+export const hasBlockQuoteInOptions = dropdownOptions => {
+  return !!dropdownOptions.find(blockType => blockType.name === 'blockquote');
+};

package/dist/esm/blockTypePlugin.js

@@ -8,7 +8,7 @@ import { IconHeading, IconQuote } from '@atlaskit/editor-common/quick-insert';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { setBlockTypeWithAnalytics, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand } from './pm-plugins/commands/block-type';
+import { setBlockTypeWithAnalytics, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand, clearFormatting as _clearFormatting } from './pm-plugins/commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
@@ -184,6 +184,9 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       insertBlockQuote: function insertBlockQuote(inputMethod) {
         var _api$analytics5;
         return insertBlockQuoteWithAnalyticsCommand(inputMethod, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
+      },
+      clearFormatting: function clearFormatting() {
+        return _clearFormatting();
       }
     },
     getSharedState: function getSharedState(editorState) {

package/dist/esm/pm-plugins/block-types.js

@@ -70,6 +70,8 @@ export var OTHER = {
   nodeName: ''
 };
 export var TEXT_BLOCK_TYPES = [NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6];
+export var FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
+export var FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
 export var WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];
 export var ALL_BLOCK_TYPES = TEXT_BLOCK_TYPES.concat(WRAPPER_BLOCK_TYPES);
 export var getBlockTypesInDropdown = function getBlockTypesInDropdown(includeBlockQuoteAsTextstyleOption) {

package/dist/esm/pm-plugins/commands/block-type.js

@@ -7,6 +7,7 @@ import { filterChildrenBetween, wrapSelectionIn } from '@atlaskit/editor-common/
 import { Slice, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { HEADINGS_BY_NAME, NORMAL_TEXT } from '../block-types';
+import { FORMATTING_NODE_TYPES, FORMATTING_MARK_TYPES, cellSelectionNodesBetween, formatTypes, clearNodeFormattingOnSelection } from './clear-formatting';
 import { wrapSelectionInBlockType } from './wrapSelectionIn';
 export function setBlockType(name) {
   return function (_ref) {
@@ -98,9 +99,54 @@ export function setNormalText(fromBlockQuote) {
     return tr;
   };
 }
-function withCurrentHeadingLevel(fn) {
+export function clearFormatting() {
   return function (_ref7) {
     var tr = _ref7.tr;
+    var formattingCleared = [];
+    var schema = tr.doc.type.schema;
+    FORMATTING_MARK_TYPES.forEach(function (mark) {
+      var _tr$selection = tr.selection,
+        from = _tr$selection.from,
+        to = _tr$selection.to;
+      var markType = schema.marks[mark];
+      if (!markType) {
+        return;
+      }
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, function (node, pos) {
+          var isTableCell = node.type === schema.nodes.tableCell || node.type === schema.nodes.tableHeader;
+          if (!isTableCell) {
+            return true;
+          }
+          if (tr.doc.rangeHasMark(pos, pos + node.nodeSize, markType)) {
+            formattingCleared.push(formatTypes[mark]);
+            tr.removeMark(pos, pos + node.nodeSize, markType);
+          }
+          return false;
+        });
+      } else if (tr.doc.rangeHasMark(from, to, markType)) {
+        formattingCleared.push(formatTypes[mark]);
+        tr.removeMark(from, to, markType);
+      }
+    });
+    FORMATTING_NODE_TYPES.forEach(function (nodeName) {
+      var formattedNodeType = schema.nodes[nodeName];
+      var _tr$selection2 = tr.selection,
+        $from = _tr$selection2.$from,
+        $to = _tr$selection2.$to;
+      if (tr.selection instanceof CellSelection) {
+        cellSelectionNodesBetween(tr.selection, tr.doc, clearNodeFormattingOnSelection(schema, tr, formattedNodeType, nodeName, formattingCleared));
+      } else {
+        tr.doc.nodesBetween($from.pos, $to.pos, clearNodeFormattingOnSelection(schema, tr, formattedNodeType, nodeName, formattingCleared));
+      }
+    });
+    tr.setStoredMarks([]);
+    return tr;
+  };
+}
+function withCurrentHeadingLevel(fn) {
+  return function (_ref8) {
+    var tr = _ref8.tr;
     // Find all headings and paragraphs of text
     var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
       heading = _tr$doc$type$schema$n.heading,
@@ -137,8 +183,8 @@ function withCurrentHeadingLevel(fn) {
 }
 export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
-    return function (_ref8) {
-      var tr = _ref8.tr;
+    return function (_ref9) {
+      var tr = _ref9.tr;
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
         action: ACTION.FORMATTED,
         actionSubject: ACTION_SUBJECT.TEXT,
@@ -161,8 +207,8 @@ export var setHeadingWithAnalytics = function setHeadingWithAnalytics(newHeading
 // eslint-disable-next-line @typescript-eslint/max-params
 ) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
-    return function (_ref9) {
-      var tr = _ref9.tr;
+    return function (_ref10) {
+      var tr = _ref10.tr;
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
         action: ACTION.FORMATTED,
         actionSubject: ACTION_SUBJECT.TEXT,
@@ -211,8 +257,8 @@ export var insertBlockQuoteWithAnalytics = function insertBlockQuoteWithAnalytic
 };
 export function insertBlockQuoteWithAnalyticsCommand(inputMethod, editorAnalyticsApi) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
-    return function (_ref10) {
-      var tr = _ref10.tr;
+    return function (_ref11) {
+      var tr = _ref11.tr;
       var nodes = tr.doc.type.schema.nodes;
 
       // TODO: analytics event
@@ -234,8 +280,8 @@ export function insertBlockQuoteWithAnalyticsCommand(inputMethod, editorAnalytic
   });
 }
 export var cleanUpAtTheStartOfDocument = function cleanUpAtTheStartOfDocument(state, dispatch) {
-  var _ref11 = state.selection,
-    $cursor = _ref11.$cursor;
+  var _ref12 = state.selection,
+    $cursor = _ref12.$cursor;
   if ($cursor && !$cursor.nodeBefore && !$cursor.nodeAfter && $cursor.pos === 1) {
     var tr = state.tr,
       schema = state.schema;

package/dist/esm/pm-plugins/commands/clear-formatting.js

@@ -0,0 +1,50 @@
+import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { liftTarget } from '@atlaskit/editor-prosemirror/transform';
+// Functions duplicated from platform/packages/editor/editor-plugin-text-formatting/src/editor-commands/clear-formatting.ts
+// TODO: Refactor to avoid duplication if platform_editor_blockquote_in_text_formatting_menu experiment is productionalised
+export var FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
+export var FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
+export var formatTypes = {
+  em: ACTION_SUBJECT_ID.FORMAT_ITALIC,
+  code: ACTION_SUBJECT_ID.FORMAT_CODE,
+  strike: ACTION_SUBJECT_ID.FORMAT_STRIKE,
+  strong: ACTION_SUBJECT_ID.FORMAT_STRONG,
+  underline: ACTION_SUBJECT_ID.FORMAT_UNDERLINE,
+  textColor: ACTION_SUBJECT_ID.FORMAT_COLOR,
+  subsup: 'subsup',
+  backgroundColor: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR
+};
+export var cellSelectionNodesBetween = function cellSelectionNodesBetween(selection, doc, f, startPos
+// eslint-disable-next-line @typescript-eslint/max-params
+) {
+  selection.forEachCell(function (cell, cellPos) {
+    doc.nodesBetween(cellPos, cellPos + cell.nodeSize, f, startPos);
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/max-params
+export function clearNodeFormattingOnSelection(schema, tr, formattedNodeType, nodeName, formattingCleared) {
+  return function (node, pos) {
+    if (node.type === formattedNodeType) {
+      if (formattedNodeType.isTextblock) {
+        tr.setNodeMarkup(pos, schema.nodes.paragraph);
+        formattingCleared.push(nodeName);
+        return false;
+      } else {
+        // In case of panel or blockquote
+        var fromPos = tr.doc.resolve(pos + 1);
+        var toPos = tr.doc.resolve(pos + node.nodeSize - 1);
+        var nodeRange = fromPos.blockRange(toPos);
+        if (nodeRange) {
+          var targetLiftDepth = liftTarget(nodeRange);
+          if (targetLiftDepth || targetLiftDepth === 0) {
+            formattingCleared.push(nodeName);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            tr.lift(nodeRange, targetLiftDepth);
+          }
+        }
+      }
+    }
+    return true;
+  };
+}