@atlaskit/editor-plugin-block-type 4.0.11 → 4.0.13

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

@@ -1,4 +1,5 @@
 import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const NORMAL_TEXT = {
   name: 'normal',
   title: messages.normal,
@@ -50,7 +51,8 @@ export const HEADING_6 = {
 export const BLOCK_QUOTE = {
   name: 'blockquote',
   title: messages.blockquote,
-  nodeName: 'blockquote'
+  nodeName: 'blockquote',
+  tagName: 'blockquote'
 };
 export const CODE_BLOCK = {
   name: 'codeblock',
@@ -70,6 +72,11 @@ export const OTHER = {
 export const TEXT_BLOCK_TYPES = [NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6];
 export const WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];
 export const ALL_BLOCK_TYPES = TEXT_BLOCK_TYPES.concat(WRAPPER_BLOCK_TYPES);
+export const getBlockTypesInDropdown = includeBlockQuoteAsTextstyleOption => {
+  return editorExperiment('platform_editor_blockquote_in_text_formatting_menu', true, {
+    exposure: true
+  }) && includeBlockQuoteAsTextstyleOption ? [...TEXT_BLOCK_TYPES, BLOCK_QUOTE] : TEXT_BLOCK_TYPES;
+};
 export const HEADINGS_BY_LEVEL = TEXT_BLOCK_TYPES.reduce((acc, blockType) => {
   if (blockType.level && blockType.nodeName === 'heading') {
     acc[blockType.level] = blockType;

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

@@ -1,8 +1,10 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { filterChildrenBetween, wrapSelectionIn } from '@atlaskit/editor-common/utils';
+import { Slice, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { HEADINGS_BY_NAME, NORMAL_TEXT } from '../block-types';
+import { wrapSelectionInBlockType } from './wrapSelectionIn';
 export function setBlockType(name) {
   return ({
     tr
@@ -24,7 +26,7 @@ export function setBlockType(name) {
     return null;
   };
 }
-export function setHeading(level) {
+export function setHeading(level, fromBlockQuote) {
   return function ({
     tr
   }) {
@@ -41,14 +43,27 @@ export function setHeading(level) {
       $from,
       $to
     }) => {
-      tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
-        level
-      });
+      if (fromBlockQuote) {
+        const range = $from.blockRange($to);
+        if (!range) {
+          return;
+        }
+        const content = $from.node().content;
+        const headingNode = schema.nodes.heading.createChecked({
+          level
+        }, content);
+        const slice = new Slice(Fragment.from(headingNode), 0, 0);
+        tr.replaceRange(range.start, range.end, slice);
+      } else {
+        tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
+          level
+        });
+      }
     });
     return tr;
   };
 }
-export function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi) {
+export function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return ({
     tr
   }) => {
@@ -56,20 +71,20 @@ export function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi)
       nodes
     } = tr.doc.type.schema;
     if (name === 'normal' && nodes.paragraph) {
-      return setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi)({
+      return setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi, fromBlockQuote)({
         tr
       });
     }
     const headingBlockType = HEADINGS_BY_NAME[name];
     if (headingBlockType && nodes.heading && headingBlockType.level) {
-      return setHeadingWithAnalytics(headingBlockType.level, inputMethod, editorAnalyticsApi)({
+      return setHeadingWithAnalytics(headingBlockType.level, inputMethod, editorAnalyticsApi, fromBlockQuote)({
         tr
       });
     }
     return null;
   };
 }
-function setNormalText() {
+export function setNormalText(fromBlockQuote) {
   return function ({
     tr
   }) {
@@ -86,7 +101,15 @@ function setNormalText() {
       $from,
       $to
     }) => {
-      tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+      if (fromBlockQuote) {
+        const range = $from.blockRange($to);
+        if (!range) {
+          return;
+        }
+        tr.lift(range, 0);
+      } else {
+        tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+      }
     });
     return tr;
   };
@@ -121,7 +144,7 @@ function withCurrentHeadingLevel(fn) {
     });
   };
 }
-export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
+export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return withCurrentHeadingLevel(previousHeadingLevel => ({
     tr
   }) => {
@@ -136,12 +159,12 @@ export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
         previousHeadingLevel
       }
     })(tr);
-    return setNormalText()({
+    return setNormalText(fromBlockQuote)({
       tr
     });
   });
 }
-export const setHeadingWithAnalytics = (newHeadingLevel, inputMethod, editorAnalyticsApi) => {
+export const setHeadingWithAnalytics = (newHeadingLevel, inputMethod, editorAnalyticsApi, fromBlockQuote) => {
   return withCurrentHeadingLevel(previousHeadingLevel => ({
     tr
   }) => {
@@ -156,7 +179,7 @@ export const setHeadingWithAnalytics = (newHeadingLevel, inputMethod, editorAnal
         previousHeadingLevel
       }
     })(tr);
-    return setHeading(newHeadingLevel)({
+    return setHeading(newHeadingLevel, fromBlockQuote)({
       tr
     });
   });
@@ -192,6 +215,31 @@ export const insertBlockQuoteWithAnalytics = (inputMethod, editorAnalyticsApi) =
     }
   })(insertBlockQuote());
 };
+export function insertBlockQuoteWithAnalyticsCommand(inputMethod, editorAnalyticsApi) {
+  return withCurrentHeadingLevel(previousHeadingLevel => ({
+    tr
+  }) => {
+    const {
+      nodes
+    } = tr.doc.type.schema;
+
+    // TODO: analytics event
+
+    // editorAnalyticsApi?.attachAnalyticsEvent({
+    // 	action: ACTION.FORMATTED,
+    // 	actionSubject: ACTION_SUBJECT.TEXT,
+    // 	eventType: EVENT_TYPE.TRACK,
+    // 	actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE,
+    // 	attributes: {
+    // 		inputMethod: inputMethod,
+    // 	},
+    // })(tr);
+
+    return wrapSelectionInBlockType(nodes.blockquote)({
+      tr
+    });
+  });
+}
 export const cleanUpAtTheStartOfDocument = (state, dispatch) => {
   const {
     $cursor

package/dist/es2019/pm-plugins/commands/wrapSelectionIn.js

@@ -0,0 +1,54 @@
+import { Slice, Fragment } from '@atlaskit/editor-prosemirror/model';
+import { findWrapping } from '@atlaskit/editor-prosemirror/transform';
+export function wrapSelectionInBlockType(nodeType) {
+  return ({
+    tr
+  }) => {
+    const {
+      nodes
+    } = tr.doc.type.schema;
+    const {
+      alignment,
+      indentation
+    } = tr.doc.type.schema.marks;
+    if (nodes.paragraph && nodes.blockquote) {
+      /**Remove alignment and indentation marks from the selection */
+      const marksToRemove = [alignment, indentation];
+      const hasMark = mark => marksToRemove.indexOf(mark.type) > -1;
+      const not = fn => arg => !fn(arg);
+
+      /**
+       * When you need to toggle the selection
+       * when another type which does not allow alignment is applied
+       */
+      tr.doc.nodesBetween(tr.selection.from, tr.selection.to, (node, pos) => {
+        if (node.type === nodes.paragraph && node.marks.some(hasMark)) {
+          const resolvedPos = tr.doc.resolve(pos);
+          const withoutBlockMarks = node.marks.filter(not(hasMark));
+          tr = tr.setNodeMarkup(resolvedPos.pos, undefined, node.attrs, withoutBlockMarks);
+        }
+      });
+
+      /** Get range and wrapping needed for the selection */
+      const {
+        $from,
+        $to
+      } = tr.selection;
+      const range = $from.blockRange($to);
+      const wrapping = range && findWrapping(range, nodes.blockquote);
+      if (wrapping) {
+        /** Wrap the selection */
+        tr.wrap(range, wrapping).scrollIntoView();
+      } else {
+        /** If wrapping is not possible, replace with a blockquote */
+        const start = $from.start();
+        const end = $to.end();
+        const content = $from.node().content;
+        const blockquote = nodes.blockquote.create({}, nodes.paragraph.create({}, content));
+        const slice = new Slice(Fragment.from(blockquote), 0, 0);
+        tr.replaceRange(start, end, slice).scrollIntoView();
+      }
+    }
+    return tr;
+  };
+}

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

@@ -3,7 +3,7 @@ import { browser } from '@atlaskit/editor-common/browser';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 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 } from './block-types';
+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';
@@ -15,6 +15,8 @@ const blockTypeForNode = (node, schema) => {
     }
   } else if (node.type === schema.nodes.paragraph) {
     return NORMAL_TEXT;
+  } else if (node.type === schema.nodes.blockquote) {
+    return BLOCK_QUOTE;
   }
   return OTHER;
 };
@@ -56,6 +58,7 @@ const detectBlockType = (availableBlockTypes, state) => {
       } else if (blockType !== OTHER && blockType !== nodeBlockType[0]) {
         blockType = OTHER;
       }
+      return false;
     }
   });
   return blockType || OTHER;
@@ -67,7 +70,7 @@ const autoformatHeading = (headingLevel, editorAnalyticsApi) => {
   return setHeadingWithAnalytics(headingLevel, INPUT_METHOD.FORMATTING, editorAnalyticsApi);
 };
 export const pluginKey = new PluginKey('blockTypePlugin');
-export const createPlugin = (editorAPI, dispatch, lastNodeMustBeParagraph) => {
+export const createPlugin = (editorAPI, dispatch, lastNodeMustBeParagraph, includeBlockQuoteAsTextstyleOption) => {
   var _editorAPI$analytics;
   const editorAnalyticsApi = editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions;
   let altKeyLocation = 0;
@@ -88,17 +91,20 @@ export const createPlugin = (editorAPI, dispatch, lastNodeMustBeParagraph) => {
       init(_config, state) {
         const availableBlockTypes = TEXT_BLOCK_TYPES.filter(blockType => isBlockTypeSchemaSupported(blockType, state));
         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));
         return {
-          currentBlockType: detectBlockType(availableBlockTypes, state),
+          currentBlockType: detectBlockType(availableBlockTypesInDropdown, state),
           blockTypesDisabled: areBlockTypesDisabled(state),
           availableBlockTypes,
-          availableWrapperBlockTypes
+          availableWrapperBlockTypes,
+          availableBlockTypesInDropdown
         };
       },
       apply(_tr, oldPluginState, _oldState, newState) {
         const newPluginState = {
           ...oldPluginState,
-          currentBlockType: detectBlockType(oldPluginState.availableBlockTypes, newState),
+          currentBlockType: detectBlockType(oldPluginState.availableBlockTypesInDropdown, newState),
           blockTypesDisabled: areBlockTypesDisabled(newState)
         };
         if (newPluginState.currentBlockType !== oldPluginState.currentBlockType || newPluginState.blockTypesDisabled !== oldPluginState.blockTypesDisabled) {

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

@@ -18,12 +18,17 @@ export function FloatingToolbarComponent({
     var _api$core, _api$blockType, _api$blockType$comman;
     return api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.FLOATING_TB));
   }, [api]);
+  const wrapBlockQuote = useCallback(() => {
+    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]);
   return /*#__PURE__*/React.createElement(ToolbarBlockType, {
     isSmall: FloatingToolbarSettings.isSmall,
     isDisabled: FloatingToolbarSettings.disabled,
     isReducedSpacing: FloatingToolbarSettings.isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
     pluginState: blockTypeState,
+    wrapBlockQuote: wrapBlockQuote,
     shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,
     api: api
   });

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

@@ -15,15 +15,20 @@ export function PrimaryToolbarComponent({
   const {
     blockTypeState
   } = useSharedPluginState(api, ['blockType']);
-  const boundSetBlockType = name => {
+  const boundSetBlockType = (name, fromBlockQuote) => {
     var _api$core, _api$blockType, _api$blockType$comman;
-    return api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.TOOLBAR));
+    return api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
+  };
+  const wrapBlockQuote = () => {
+    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));
   };
   return /*#__PURE__*/React.createElement(ToolbarBlockType, {
     isSmall: isSmall,
     isDisabled: disabled,
     isReducedSpacing: isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
+    wrapBlockQuote: wrapBlockQuote,
     pluginState: blockTypeState,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,

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

@@ -56,9 +56,9 @@ class ToolbarBlockType extends React.PureComponent {
       } = this.props;
       const {
         currentBlockType,
-        availableBlockTypes
+        availableBlockTypesInDropdown
       } = this.props.pluginState;
-      const items = availableBlockTypes.map((blockType, index) => {
+      const items = availableBlockTypesInDropdown.map((blockType, index) => {
         const isActive = currentBlockType === blockType;
         const tagName = blockType.tagName || 'p';
         const Tag = tagName;
@@ -91,7 +91,12 @@ class ToolbarBlockType extends React.PureComponent {
       shouldCloseMenu = true
     }) => {
       const blockType = item.value;
-      this.props.setTextLevel(blockType.name);
+      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 (shouldCloseMenu) {
         this.setState({
           ...this.state,
@@ -133,7 +138,8 @@ class ToolbarBlockType extends React.PureComponent {
       pluginState: {
         currentBlockType,
         blockTypesDisabled,
-        availableBlockTypes
+        availableBlockTypes,
+        availableBlockTypesInDropdown
       },
       shouldUseDefaultRole,
       intl: {
@@ -145,8 +151,8 @@ class ToolbarBlockType extends React.PureComponent {
     if (isHeadingDisabled) {
       return null;
     }
-    const blockTypeTitles = availableBlockTypes.filter(blockType => blockType.name === currentBlockType.name).map(blockType => blockType.title);
-    if (!this.props.isDisabled && !blockTypesDisabled) {
+    const blockTypeTitles = availableBlockTypesInDropdown.filter(blockType => blockType.name === currentBlockType.name).map(blockType => blockType.title);
+    if (!this.props.isDisabled && (!blockTypesDisabled || currentBlockType.name === 'blockquote')) {
       const items = this.createItems();
       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

@@ -4,7 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
+import { headingsSharedStyles, blockquoteSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { N400 } from '@atlaskit/theme/colors';
 export const blockTypeMenuItemStyle = (tagName, selected, typographyTheme) => {
@@ -12,7 +12,7 @@ export const blockTypeMenuItemStyle = (tagName, selected, typographyTheme) => {
   const selectedStyle = selected ? `${tagName} { color: ${"var(--ds-text, white)"} !important; }` : '';
   return () => css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  headingsSharedStyles(typographyTheme), {
+  tagName === 'blockquote' ? blockquoteSharedStyles : headingsSharedStyles(typographyTheme), {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '>': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

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

@@ -1,5 +1,6 @@
 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';
 export const isNodeAWrappingBlockNode = node => {
   if (!node) {
@@ -75,7 +76,20 @@ function getSelectedWrapperNodes(state) {
 export function areBlockTypesDisabled(state) {
   const nodesTypes = getSelectedWrapperNodes(state);
   const {
-    panel
+    panel,
+    blockquote
   } = state.schema.nodes;
+  if (editorExperiment('platform_editor_blockquote_in_text_formatting_menu', true)) {
+    let hasQuote = false;
+    const {
+      $from,
+      $to
+    } = state.selection;
+    state.doc.nodesBetween($from.pos, $to.pos, node => {
+      hasQuote = node.type === blockquote;
+      return !hasQuote;
+    });
+    return nodesTypes.filter(type => type !== panel).length > 0 || hasQuote;
+  }
   return nodesTypes.filter(type => type !== panel).length > 0;
 }

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 } from './pm-plugins/commands/block-type';
+import { setBlockTypeWithAnalytics, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand } 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';
@@ -146,7 +146,7 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
         name: 'blockType',
         plugin: function plugin(_ref5) {
           var dispatch = _ref5.dispatch;
-          return createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph);
+          return createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph, options === null || options === void 0 ? void 0 : options.includeBlockQuoteAsTextstyleOption);
         }
       }, {
         name: 'blockTypeInputRule',
@@ -178,7 +178,12 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
     commands: {
       setTextLevel: function setTextLevel(level, inputMethod) {
         var _api$analytics4;
-        return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+        var fromBlockQuote = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+        return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, fromBlockQuote);
+      },
+      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);
       }
     },
     getSharedState: function getSharedState(editorState) {
@@ -215,9 +220,9 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
         }
       },
       quickInsert: function quickInsert(intl) {
-        var _api$analytics5, _api$analytics6;
+        var _api$analytics6, _api$analytics7;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-        return [].concat(_toConsumableArray(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)), _toConsumableArray(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)));
+        return [].concat(_toConsumableArray(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)), _toConsumableArray(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions)));
       }
     }
   };

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

@@ -1,4 +1,5 @@
 import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var NORMAL_TEXT = {
   name: 'normal',
   title: messages.normal,
@@ -50,7 +51,8 @@ export var HEADING_6 = {
 export var BLOCK_QUOTE = {
   name: 'blockquote',
   title: messages.blockquote,
-  nodeName: 'blockquote'
+  nodeName: 'blockquote',
+  tagName: 'blockquote'
 };
 export var CODE_BLOCK = {
   name: 'codeblock',
@@ -70,6 +72,11 @@ export var OTHER = {
 export var TEXT_BLOCK_TYPES = [NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6];
 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) {
+  return editorExperiment('platform_editor_blockquote_in_text_formatting_menu', true, {
+    exposure: true
+  }) && includeBlockQuoteAsTextstyleOption ? [].concat(TEXT_BLOCK_TYPES, [BLOCK_QUOTE]) : TEXT_BLOCK_TYPES;
+};
 export var HEADINGS_BY_LEVEL = TEXT_BLOCK_TYPES.reduce(function (acc, blockType) {
   if (blockType.level && blockType.nodeName === 'heading') {
     acc[blockType.level] = blockType;

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

@@ -4,8 +4,10 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { filterChildrenBetween, wrapSelectionIn } from '@atlaskit/editor-common/utils';
+import { Slice, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { HEADINGS_BY_NAME, NORMAL_TEXT } from '../block-types';
+import { wrapSelectionInBlockType } from './wrapSelectionIn';
 export function setBlockType(name) {
   return function (_ref) {
     var tr = _ref.tr;
@@ -24,7 +26,7 @@ export function setBlockType(name) {
     return null;
   };
 }
-export function setHeading(level) {
+export function setHeading(level, fromBlockQuote) {
   return function (_ref2) {
     var tr = _ref2.tr;
     var selection = tr.selection,
@@ -33,32 +35,45 @@ export function setHeading(level) {
     ranges.forEach(function (_ref3) {
       var $from = _ref3.$from,
         $to = _ref3.$to;
-      tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
-        level: level
-      });
+      if (fromBlockQuote) {
+        var range = $from.blockRange($to);
+        if (!range) {
+          return;
+        }
+        var content = $from.node().content;
+        var headingNode = schema.nodes.heading.createChecked({
+          level: level
+        }, content);
+        var slice = new Slice(Fragment.from(headingNode), 0, 0);
+        tr.replaceRange(range.start, range.end, slice);
+      } else {
+        tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
+          level: level
+        });
+      }
     });
     return tr;
   };
 }
-export function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi) {
+export function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return function (_ref4) {
     var tr = _ref4.tr;
     var nodes = tr.doc.type.schema.nodes;
     if (name === 'normal' && nodes.paragraph) {
-      return setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi)({
+      return setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi, fromBlockQuote)({
         tr: tr
       });
     }
     var headingBlockType = HEADINGS_BY_NAME[name];
     if (headingBlockType && nodes.heading && headingBlockType.level) {
-      return setHeadingWithAnalytics(headingBlockType.level, inputMethod, editorAnalyticsApi)({
+      return setHeadingWithAnalytics(headingBlockType.level, inputMethod, editorAnalyticsApi, fromBlockQuote)({
         tr: tr
       });
     }
     return null;
   };
 }
-function setNormalText() {
+export function setNormalText(fromBlockQuote) {
   return function (_ref5) {
     var tr = _ref5.tr;
     var selection = tr.selection,
@@ -67,7 +82,15 @@ function setNormalText() {
     ranges.forEach(function (_ref6) {
       var $from = _ref6.$from,
         $to = _ref6.$to;
-      tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+      if (fromBlockQuote) {
+        var range = $from.blockRange($to);
+        if (!range) {
+          return;
+        }
+        tr.lift(range, 0);
+      } else {
+        tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+      }
     });
     return tr;
   };
@@ -109,7 +132,7 @@ function withCurrentHeadingLevel(fn) {
     });
   };
 }
-export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
+export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
     return function (_ref8) {
       var tr = _ref8.tr;
@@ -124,13 +147,13 @@ export function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
           previousHeadingLevel: previousHeadingLevel
         }
       })(tr);
-      return setNormalText()({
+      return setNormalText(fromBlockQuote)({
         tr: tr
       });
     };
   });
 }
-export var setHeadingWithAnalytics = function setHeadingWithAnalytics(newHeadingLevel, inputMethod, editorAnalyticsApi) {
+export var setHeadingWithAnalytics = function setHeadingWithAnalytics(newHeadingLevel, inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
     return function (_ref9) {
       var tr = _ref9.tr;
@@ -145,7 +168,7 @@ export var setHeadingWithAnalytics = function setHeadingWithAnalytics(newHeading
           previousHeadingLevel: previousHeadingLevel
         }
       })(tr);
-      return setHeading(newHeadingLevel)({
+      return setHeading(newHeadingLevel, fromBlockQuote)({
         tr: tr
       });
     };
@@ -180,9 +203,33 @@ export var insertBlockQuoteWithAnalytics = function insertBlockQuoteWithAnalytic
     }
   })(insertBlockQuote());
 };
+export function insertBlockQuoteWithAnalyticsCommand(inputMethod, editorAnalyticsApi) {
+  return withCurrentHeadingLevel(function (previousHeadingLevel) {
+    return function (_ref10) {
+      var tr = _ref10.tr;
+      var nodes = tr.doc.type.schema.nodes;
+
+      // TODO: analytics event
+
+      // editorAnalyticsApi?.attachAnalyticsEvent({
+      // 	action: ACTION.FORMATTED,
+      // 	actionSubject: ACTION_SUBJECT.TEXT,
+      // 	eventType: EVENT_TYPE.TRACK,
+      // 	actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE,
+      // 	attributes: {
+      // 		inputMethod: inputMethod,
+      // 	},
+      // })(tr);
+
+      return wrapSelectionInBlockType(nodes.blockquote)({
+        tr: tr
+      });
+    };
+  });
+}
 export var cleanUpAtTheStartOfDocument = function cleanUpAtTheStartOfDocument(state, dispatch) {
-  var _ref10 = state.selection,
-    $cursor = _ref10.$cursor;
+  var _ref11 = state.selection,
+    $cursor = _ref11.$cursor;
   if ($cursor && !$cursor.nodeBefore && !$cursor.nodeAfter && $cursor.pos === 1) {
     var tr = state.tr,
       schema = state.schema;