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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-type
 
+## 4.0.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.0.12
+
+### Patch Changes
+
+- [#180067](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/180067)
+  [`fdee6c449ca83`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fdee6c449ca83) -
+  [ux] Adding block quote as an option to the text formatting menu for full page editors
+- Updated dependencies
+
 ## 4.0.11
 
 ### Patch Changes

package/dist/cjs/blockTypePlugin.js

@@ -153,7 +153,7 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
         name: 'blockType',
         plugin: function plugin(_ref5) {
           var dispatch = _ref5.dispatch;
-          return (0, _main.createPlugin)(api, dispatch, options && options.lastNodeMustBeParagraph);
+          return (0, _main.createPlugin)(api, dispatch, options && options.lastNodeMustBeParagraph, options === null || options === void 0 ? void 0 : options.includeBlockQuoteAsTextstyleOption);
         }
       }, {
         name: 'blockTypeInputRule',
@@ -185,7 +185,12 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
     commands: {
       setTextLevel: function setTextLevel(level, inputMethod) {
         var _api$analytics4;
-        return (0, _blockType.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 (0, _blockType.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 (0, _blockType.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) {
@@ -222,9 +227,9 @@ var blockTypePlugin = exports.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((0, _toConsumableArray2.default)(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)), (0, _toConsumableArray2.default)(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((0, _toConsumableArray2.default)(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)), (0, _toConsumableArray2.default)(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/cjs/pm-plugins/block-types.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WRAPPER_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = exports.PANEL = exports.OTHER = exports.NORMAL_TEXT = exports.HEADING_6 = exports.HEADING_5 = exports.HEADING_4 = exports.HEADING_3 = exports.HEADING_2 = exports.HEADING_1 = exports.HEADINGS_BY_NAME = exports.HEADINGS_BY_LEVEL = exports.CODE_BLOCK = exports.BLOCK_QUOTE = exports.ALL_BLOCK_TYPES = void 0;
+exports.getBlockTypesInDropdown = exports.WRAPPER_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = exports.PANEL = exports.OTHER = exports.NORMAL_TEXT = exports.HEADING_6 = exports.HEADING_5 = exports.HEADING_4 = exports.HEADING_3 = exports.HEADING_2 = exports.HEADING_1 = exports.HEADINGS_BY_NAME = exports.HEADINGS_BY_LEVEL = exports.CODE_BLOCK = exports.BLOCK_QUOTE = exports.ALL_BLOCK_TYPES = void 0;
 var _messages = require("@atlaskit/editor-common/messages");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var NORMAL_TEXT = exports.NORMAL_TEXT = {
   name: 'normal',
   title: _messages.blockTypeMessages.normal,
@@ -56,7 +57,8 @@ var HEADING_6 = exports.HEADING_6 = {
 var BLOCK_QUOTE = exports.BLOCK_QUOTE = {
   name: 'blockquote',
   title: _messages.blockTypeMessages.blockquote,
-  nodeName: 'blockquote'
+  nodeName: 'blockquote',
+  tagName: 'blockquote'
 };
 var CODE_BLOCK = exports.CODE_BLOCK = {
   name: 'codeblock',
@@ -76,6 +78,11 @@ var OTHER = exports.OTHER = {
 var TEXT_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = [NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6];
 var WRAPPER_BLOCK_TYPES = exports.WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];
 var ALL_BLOCK_TYPES = exports.ALL_BLOCK_TYPES = TEXT_BLOCK_TYPES.concat(WRAPPER_BLOCK_TYPES);
+var getBlockTypesInDropdown = exports.getBlockTypesInDropdown = function getBlockTypesInDropdown(includeBlockQuoteAsTextstyleOption) {
+  return (0, _experiments.editorExperiment)('platform_editor_blockquote_in_text_formatting_menu', true, {
+    exposure: true
+  }) && includeBlockQuoteAsTextstyleOption ? [].concat(TEXT_BLOCK_TYPES, [BLOCK_QUOTE]) : TEXT_BLOCK_TYPES;
+};
 var HEADINGS_BY_LEVEL = exports.HEADINGS_BY_LEVEL = TEXT_BLOCK_TYPES.reduce(function (acc, blockType) {
   if (blockType.level && blockType.nodeName === 'heading') {
     acc[blockType.level] = blockType;

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

@@ -4,16 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertBlockQuoteWithAnalytics = exports.cleanUpAtTheStartOfDocument = void 0;
+exports.insertBlockQuoteWithAnalyticsCommand = insertBlockQuoteWithAnalyticsCommand;
 exports.setBlockType = setBlockType;
 exports.setBlockTypeWithAnalytics = setBlockTypeWithAnalytics;
 exports.setHeading = setHeading;
 exports.setHeadingWithAnalytics = void 0;
+exports.setNormalText = setNormalText;
 exports.setNormalTextWithAnalytics = setNormalTextWithAnalytics;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorTables = require("@atlaskit/editor-tables");
 var _blockTypes = require("../block-types");
+var _wrapSelectionIn = require("./wrapSelectionIn");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -35,7 +39,7 @@ function setBlockType(name) {
     return null;
   };
 }
-function setHeading(level) {
+function setHeading(level, fromBlockQuote) {
   return function (_ref2) {
     var tr = _ref2.tr;
     var selection = tr.selection,
@@ -44,32 +48,45 @@ 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 _model.Slice(_model.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;
   };
 }
-function setBlockTypeWithAnalytics(name, inputMethod, editorAnalyticsApi) {
+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 = _blockTypes.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() {
+function setNormalText(fromBlockQuote) {
   return function (_ref5) {
     var tr = _ref5.tr;
     var selection = tr.selection,
@@ -78,7 +95,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;
   };
@@ -120,7 +145,7 @@ function withCurrentHeadingLevel(fn) {
     });
   };
 }
-function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
+function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
     return function (_ref8) {
       var tr = _ref8.tr;
@@ -135,13 +160,13 @@ function setNormalTextWithAnalytics(inputMethod, editorAnalyticsApi) {
           previousHeadingLevel: previousHeadingLevel
         }
       })(tr);
-      return setNormalText()({
+      return setNormalText(fromBlockQuote)({
         tr: tr
       });
     };
   });
 }
-var setHeadingWithAnalytics = exports.setHeadingWithAnalytics = function setHeadingWithAnalytics(newHeadingLevel, inputMethod, editorAnalyticsApi) {
+var setHeadingWithAnalytics = exports.setHeadingWithAnalytics = function setHeadingWithAnalytics(newHeadingLevel, inputMethod, editorAnalyticsApi, fromBlockQuote) {
   return withCurrentHeadingLevel(function (previousHeadingLevel) {
     return function (_ref9) {
       var tr = _ref9.tr;
@@ -156,7 +181,7 @@ var setHeadingWithAnalytics = exports.setHeadingWithAnalytics = function setHead
           previousHeadingLevel: previousHeadingLevel
         }
       })(tr);
-      return setHeading(newHeadingLevel)({
+      return setHeading(newHeadingLevel, fromBlockQuote)({
         tr: tr
       });
     };
@@ -191,9 +216,33 @@ var insertBlockQuoteWithAnalytics = exports.insertBlockQuoteWithAnalytics = func
     }
   })(insertBlockQuote());
 };
+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 (0, _wrapSelectionIn.wrapSelectionInBlockType)(nodes.blockquote)({
+        tr: tr
+      });
+    };
+  });
+}
 var cleanUpAtTheStartOfDocument = exports.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;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapSelectionInBlockType = wrapSelectionInBlockType;
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+function wrapSelectionInBlockType(nodeType) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var nodes = tr.doc.type.schema.nodes;
+    var _tr$doc$type$schema$m = tr.doc.type.schema.marks,
+      alignment = _tr$doc$type$schema$m.alignment,
+      indentation = _tr$doc$type$schema$m.indentation;
+    if (nodes.paragraph && nodes.blockquote) {
+      /**Remove alignment and indentation marks from the selection */
+      var marksToRemove = [alignment, indentation];
+      var hasMark = function hasMark(mark) {
+        return marksToRemove.indexOf(mark.type) > -1;
+      };
+      var not = function not(fn) {
+        return function (arg) {
+          return !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, function (node, pos) {
+        if (node.type === nodes.paragraph && node.marks.some(hasMark)) {
+          var resolvedPos = tr.doc.resolve(pos);
+          var withoutBlockMarks = node.marks.filter(not(hasMark));
+          tr = tr.setNodeMarkup(resolvedPos.pos, undefined, node.attrs, withoutBlockMarks);
+        }
+      });
+
+      /** Get range and wrapping needed for the selection */
+      var _tr$selection = tr.selection,
+        $from = _tr$selection.$from,
+        $to = _tr$selection.$to;
+      var range = $from.blockRange($to);
+      var wrapping = range && (0, _transform.findWrapping)(range, nodes.blockquote);
+      if (wrapping) {
+        /** Wrap the selection */
+        tr.wrap(range, wrapping).scrollIntoView();
+      } else {
+        /** If wrapping is not possible, replace with a blockquote */
+        var start = $from.start();
+        var end = $to.end();
+        var content = $from.node().content;
+        var blockquote = nodes.blockquote.create({}, nodes.paragraph.create({}, content));
+        var slice = new _model.Slice(_model.Fragment.from(blockquote), 0, 0);
+        tr.replaceRange(start, end, slice).scrollIntoView();
+      }
+    }
+    return tr;
+  };
+}

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

@@ -25,6 +25,8 @@ var blockTypeForNode = function blockTypeForNode(node, schema) {
     }
   } else if (node.type === schema.nodes.paragraph) {
     return _blockTypes.NORMAL_TEXT;
+  } else if (node.type === schema.nodes.blockquote) {
+    return _blockTypes.BLOCK_QUOTE;
   }
   return _blockTypes.OTHER;
 };
@@ -67,6 +69,7 @@ var detectBlockType = function detectBlockType(availableBlockTypes, state) {
       } else if (blockType !== _blockTypes.OTHER && blockType !== nodeBlockType[0]) {
         blockType = _blockTypes.OTHER;
       }
+      return false;
     }
   });
   return blockType || _blockTypes.OTHER;
@@ -78,7 +81,7 @@ var autoformatHeading = function autoformatHeading(headingLevel, editorAnalytics
   return (0, _blockType.setHeadingWithAnalytics)(headingLevel, _analytics.INPUT_METHOD.FORMATTING, editorAnalyticsApi);
 };
 var pluginKey = exports.pluginKey = new _state.PluginKey('blockTypePlugin');
-var createPlugin = exports.createPlugin = function createPlugin(editorAPI, dispatch, lastNodeMustBeParagraph) {
+var createPlugin = exports.createPlugin = function createPlugin(editorAPI, dispatch, lastNodeMustBeParagraph, includeBlockQuoteAsTextstyleOption) {
   var _editorAPI$analytics;
   var editorAnalyticsApi = editorAPI === null || editorAPI === void 0 || (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions;
   var altKeyLocation = 0;
@@ -101,16 +104,21 @@ var createPlugin = exports.createPlugin = function createPlugin(editorAPI, dispa
         var availableWrapperBlockTypes = _blockTypes.WRAPPER_BLOCK_TYPES.filter(function (blockType) {
           return isBlockTypeSchemaSupported(blockType, state);
         });
+        var BLOCK_TYPES_IN_DROPDOWN = (0, _blockTypes.getBlockTypesInDropdown)(includeBlockQuoteAsTextstyleOption);
+        var availableBlockTypesInDropdown = BLOCK_TYPES_IN_DROPDOWN.filter(function (blockType) {
+          return isBlockTypeSchemaSupported(blockType, state);
+        });
         return {
-          currentBlockType: detectBlockType(availableBlockTypes, state),
+          currentBlockType: detectBlockType(availableBlockTypesInDropdown, state),
           blockTypesDisabled: (0, _utils.areBlockTypesDisabled)(state),
           availableBlockTypes: availableBlockTypes,
-          availableWrapperBlockTypes: availableWrapperBlockTypes
+          availableWrapperBlockTypes: availableWrapperBlockTypes,
+          availableBlockTypesInDropdown: availableBlockTypesInDropdown
         };
       },
       apply: function apply(_tr, oldPluginState, _oldState, newState) {
         var newPluginState = _objectSpread(_objectSpread({}, oldPluginState), {}, {
-          currentBlockType: detectBlockType(oldPluginState.availableBlockTypes, newState),
+          currentBlockType: detectBlockType(oldPluginState.availableBlockTypesInDropdown, newState),
           blockTypesDisabled: (0, _utils.areBlockTypesDisabled)(newState)
         });
         if (newPluginState.currentBlockType !== oldPluginState.currentBlockType || newPluginState.blockTypesDisabled !== oldPluginState.blockTypesDisabled) {

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

@@ -26,12 +26,17 @@ function FloatingToolbarComponent(_ref) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, _analytics.INPUT_METHOD.FLOATING_TB));
   }, [api]);
+  var wrapBlockQuote = (0, _react.useCallback)(function () {
+    var _api$core2, _api$blockType2;
+    return api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 || (_api$blockType2 = api.blockType) === null || _api$blockType2 === void 0 || (_api$blockType2 = _api$blockType2.commands) === null || _api$blockType2 === void 0 ? void 0 : _api$blockType2.insertBlockQuote(_analytics.INPUT_METHOD.TOOLBAR));
+  }, [api]);
   return /*#__PURE__*/_react.default.createElement(_ToolbarBlockType.default, {
     isSmall: FloatingToolbarSettings.isSmall,
     isDisabled: FloatingToolbarSettings.disabled,
     isReducedSpacing: FloatingToolbarSettings.isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
     pluginState: blockTypeState,
+    wrapBlockQuote: wrapBlockQuote,
     shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,
     api: api
   });

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

@@ -20,15 +20,20 @@ function PrimaryToolbarComponent(_ref) {
     shouldUseDefaultRole = _ref.shouldUseDefaultRole;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType']),
     blockTypeState = _useSharedPluginState.blockTypeState;
-  var boundSetBlockType = function boundSetBlockType(name) {
+  var boundSetBlockType = function boundSetBlockType(name, fromBlockQuote) {
     var _api$core, _api$blockType;
-    return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, _analytics.INPUT_METHOD.TOOLBAR));
+    return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, _analytics.INPUT_METHOD.TOOLBAR, fromBlockQuote));
+  };
+  var wrapBlockQuote = function wrapBlockQuote() {
+    var _api$core2, _api$blockType2;
+    return api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 || (_api$blockType2 = api.blockType) === null || _api$blockType2 === void 0 || (_api$blockType2 = _api$blockType2.commands) === null || _api$blockType2 === void 0 ? void 0 : _api$blockType2.insertBlockQuote(_analytics.INPUT_METHOD.TOOLBAR));
   };
   return /*#__PURE__*/_react.default.createElement(_ToolbarBlockType.default, {
     isSmall: isSmall,
     isDisabled: disabled,
     isReducedSpacing: isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
+    wrapBlockQuote: wrapBlockQuote,
     pluginState: blockTypeState,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,

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

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -24,42 +23,40 @@ var _blocktypeButton = require("./blocktype-button");
 var _styled = require("./styled");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ToolbarBlockType, _React$PureComponent);
-  var _super = _createSuper(ToolbarBlockType);
   function ToolbarBlockType() {
     var _this;
     (0, _classCallCheck2.default)(this, ToolbarBlockType);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+    _this = _callSuper(this, ToolbarBlockType, [].concat(args));
+    (0, _defineProperty2.default)(_this, "state", {
       active: false,
       isOpenedByKeyboard: false,
       typographyTheme: undefined,
       observer: null
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChange", function (attrs) {
+    (0, _defineProperty2.default)(_this, "onOpenChange", function (attrs) {
       _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
         active: attrs.isOpen,
         isOpenedByKeyboard: attrs.isOpenedByKeyboard
       }));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTriggerClick", function () {
+    (0, _defineProperty2.default)(_this, "handleTriggerClick", function () {
       _this.onOpenChange({
         isOpen: !_this.state.active,
         isOpenedByKeyboard: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTriggerByKeyboard", function (event) {
+    (0, _defineProperty2.default)(_this, "handleTriggerByKeyboard", function (event) {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
         _this.onOpenChange({
@@ -68,12 +65,12 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createItems", function () {
+    (0, _defineProperty2.default)(_this, "createItems", function () {
       var formatMessage = _this.props.intl.formatMessage;
       var _this$props$pluginSta = _this.props.pluginState,
         currentBlockType = _this$props$pluginSta.currentBlockType,
-        availableBlockTypes = _this$props$pluginSta.availableBlockTypes;
-      var items = availableBlockTypes.map(function (blockType, index) {
+        availableBlockTypesInDropdown = _this$props$pluginSta.availableBlockTypesInDropdown;
+      var items = availableBlockTypesInDropdown.map(function (blockType, index) {
         var isActive = currentBlockType === blockType;
         var tagName = blockType.tagName || 'p';
         var Tag = tagName;
@@ -101,12 +98,17 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         items: items
       }];
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectBlockType", function (_ref) {
+    (0, _defineProperty2.default)(_this, "handleSelectBlockType", function (_ref) {
       var item = _ref.item,
         _ref$shouldCloseMenu = _ref.shouldCloseMenu,
         shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
       var blockType = item.value;
-      _this.props.setTextLevel(blockType.name);
+      if (blockType.name === 'blockquote') {
+        _this.props.wrapBlockQuote(blockType.name);
+      } else {
+        var fromBlockQuote = _this.props.pluginState.currentBlockType.name === 'blockquote';
+        _this.props.setTextLevel(blockType.name, fromBlockQuote);
+      }
       if (shouldCloseMenu) {
         _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
           active: false
@@ -115,7 +117,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
     });
     return _this;
   }
-  (0, _createClass2.default)(ToolbarBlockType, [{
+  (0, _inherits2.default)(ToolbarBlockType, _React$PureComponent);
+  return (0, _createClass2.default)(ToolbarBlockType, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
@@ -155,6 +158,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         currentBlockType = _this$props$pluginSta2.currentBlockType,
         blockTypesDisabled = _this$props$pluginSta2.blockTypesDisabled,
         availableBlockTypes = _this$props$pluginSta2.availableBlockTypes,
+        availableBlockTypesInDropdown = _this$props$pluginSta2.availableBlockTypesInDropdown,
         shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
         formatMessage = _this$props.intl.formatMessage,
         api = _this$props.api;
@@ -164,12 +168,12 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
       if (isHeadingDisabled) {
         return null;
       }
-      var blockTypeTitles = availableBlockTypes.filter(function (blockType) {
+      var blockTypeTitles = availableBlockTypesInDropdown.filter(function (blockType) {
         return blockType.name === currentBlockType.name;
       }).map(function (blockType) {
         return blockType.title;
       });
-      if (!this.props.isDisabled && !blockTypesDisabled) {
+      if (!this.props.isDisabled && (!blockTypesDisabled || currentBlockType.name === 'blockquote')) {
         var 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
@@ -235,6 +239,5 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
       );
     }
   }]);
-  return ToolbarBlockType;
 }(_react.default.PureComponent);
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(ToolbarBlockType);

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

@@ -20,7 +20,7 @@ var blockTypeMenuItemStyle = exports.blockTypeMenuItemStyle = function blockType
   return function () {
     return (0, _react.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
-    (0, _styles.headingsSharedStyles)(typographyTheme), {
+    tagName === 'blockquote' ? _styles.blockquoteSharedStyles : (0, _styles.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/cjs/pm-plugins/utils.js

@@ -7,6 +7,7 @@ exports.areBlockTypesDisabled = areBlockTypesDisabled;
 exports.isNodeAWrappingBlockNode = exports.createWrappingTextBlockRule = exports.createJoinNodesRule = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockTypes = require("./block-types");
 var isNodeAWrappingBlockNode = exports.isNodeAWrappingBlockNode = function isNodeAWrappingBlockNode(node) {
   if (!node) {
@@ -82,7 +83,22 @@ function getSelectedWrapperNodes(state) {
  */
 function areBlockTypesDisabled(state) {
   var nodesTypes = getSelectedWrapperNodes(state);
-  var panel = state.schema.nodes.panel;
+  var _state$schema$nodes2 = state.schema.nodes,
+    panel = _state$schema$nodes2.panel,
+    blockquote = _state$schema$nodes2.blockquote;
+  if ((0, _experiments.editorExperiment)('platform_editor_blockquote_in_text_formatting_menu', true)) {
+    var hasQuote = false;
+    var _state$selection2 = state.selection,
+      $from = _state$selection2.$from,
+      $to = _state$selection2.$to;
+    state.doc.nodesBetween($from.pos, $to.pos, function (node) {
+      hasQuote = node.type === blockquote;
+      return !hasQuote;
+    });
+    return nodesTypes.filter(function (type) {
+      return type !== panel;
+    }).length > 0 || hasQuote;
+  }
   return nodesTypes.filter(function (type) {
     return type !== panel;
   }).length > 0;

package/dist/es2019/blockTypePlugin.js

@@ -7,7 +7,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';
@@ -143,7 +143,7 @@ const blockTypePlugin = ({
         name: 'blockType',
         plugin: ({
           dispatch
-        }) => createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph)
+        }) => createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph, options === null || options === void 0 ? void 0 : options.includeBlockQuoteAsTextstyleOption)
       }, {
         name: 'blockTypeInputRule',
         plugin: ({
@@ -174,9 +174,13 @@ const blockTypePlugin = ({
       }
     },
     commands: {
-      setTextLevel(level, inputMethod) {
+      setTextLevel(level, inputMethod, fromBlockQuote = false) {
         var _api$analytics4;
-        return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+        return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, fromBlockQuote);
+      },
+      insertBlockQuote(inputMethod) {
+        var _api$analytics5;
+        return insertBlockQuoteWithAnalyticsCommand(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
       }
     },
     getSharedState(editorState) {
@@ -213,9 +217,9 @@ const blockTypePlugin = ({
         }
       },
       quickInsert: intl => {
-        var _api$analytics5, _api$analytics6;
+        var _api$analytics6, _api$analytics7;
         const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-        return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)];
+        return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions)];
       }
     }
   };