@atlaskit/editor-plugin-status 17.2.6 → 17.3.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-status
 
+## 17.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.3.0
+
+### Minor Changes
+
+- [`c7130b14cc4b2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c7130b14cc4b2) -
+  [ux] Add Status to the block menu Turn into list behind platform_editor_turn_into_status.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.2.6
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verifyAndInsertStatus = exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.setFocusOnStatusInput = exports.removeStatus = exports.insertStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS_NEW = exports.DEFAULT_STATUS = void 0;
+exports.verifyAndInsertStatus = exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.setFocusOnStatusInput = exports.removeStatus = exports.insertStatus = exports.createStatus = exports.commitStatusPicker = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _uuid = require("@atlaskit/adf-schema/uuid");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -13,19 +13,10 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _createStatusNode = require("../utils/createStatusNode");
 var _pluginKey = require("./plugin-key");
 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; } // oxlint-disable-next-line import/no-duplicates
-var DEFAULT_STATUS = exports.DEFAULT_STATUS = {
-  text: '',
-  color: 'neutral'
-};
-var DEFAULT_STATUS_NEW = exports.DEFAULT_STATUS_NEW = {
-  text: '',
-  color: 'neutral',
-  style: 'mixedCase'
-};
 var verifyAndInsertStatus = exports.verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, tr, annotationMarks) {
   var fragment = _model.Fragment.fromArray([statusNode, tr.doc.type.schema.text(' ', annotationMarks)]);
   var insertable = (0, _utils2.canInsert)(tr.selection.$from, fragment);
@@ -42,9 +33,7 @@ var verifyAndInsertStatus = exports.verifyAndInsertStatus = function verifyAndIn
 };
 var createStatus = exports.createStatus = function createStatus(tr) {
   var annotationMarksForPos = (0, _utils.getAnnotationMarksForPos)(tr.selection.$head);
-  var statusNode = tr.doc.type.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), {}, {
-    localId: _uuid.uuid.generate()
-  }), null, annotationMarksForPos);
+  var statusNode = (0, _createStatusNode.createStatusNode)(tr.doc.type.schema, {}, annotationMarksForPos);
   return verifyAndInsertStatus(statusNode, tr, annotationMarksForPos);
 };
 var insertStatus = exports.insertStatus = function insertStatus(editorAnalyticsAPI) {
@@ -73,7 +62,7 @@ var updateStatus = exports.updateStatus = function updateStatus(status) {
       text: status.text.trim(),
       localId: status.localId || _uuid.uuid.generate()
     }) : status;
-    var statusProps = _objectSpread(_objectSpread({}, (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), selectedStatus);
+    var statusProps = _objectSpread(_objectSpread({}, (0, _createStatusNode.getDefaultStatusAttrs)()), selectedStatus);
     var tr = state.tr;
     var _ref2 = _pluginKey.pluginKey.getState(state) || {},
       showStatusPickerAt = _ref2.showStatusPickerAt;

package/dist/cjs/statusPlugin.js

@@ -9,24 +9,46 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _status = require("@atlaskit/adf-schema/status");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _key = require("@atlaskit/editor-common/block-menu/key");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("./pm-plugins/actions");
+var _turnInto = require("./utils/turnInto");
 var _keymap = require("./pm-plugins/keymap");
 var _plugin = _interopRequireDefault(require("./pm-plugins/plugin"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _ContentComponent = require("./ui/ContentComponent");
 var _getStatusQuickInsertComponents = require("./ui/quick-insert/getStatusQuickInsertComponents");
+var _statusBlockMenuItem = require("./ui/statusBlockMenuItem");
 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; }
 var statusPlugin = exports.statusPlugin = function statusPlugin(_ref) {
   var _api$analytics, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
+  if ((0, _expValEquals.expValEquals)('platform_editor_block_menu', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_turn_into_status')) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: _key.TRANSFORM_STRUCTURE_STATUS_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: _blockMenu.TRANSFORM_STRUCTURE_MENU_SECTION.key,
+        rank: _blockMenu.TRANSFORM_STRUCTURE_MENU_SECTION_RANK[_key.TRANSFORM_STRUCTURE_STATUS_MENU_ITEM.key]
+      },
+      component: (0, _statusBlockMenuItem.createStatusBlockMenuItem)(api),
+      isHidden: function isHidden() {
+        var _api$blockControls;
+        return (0, _turnInto.isStatusTurnIntoHidden)(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection);
+      }
+    }]);
+  }
   var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
   if ((options === null || options === void 0 ? void 0 : options.menuDisabled) !== true && isRegisteredSlashCommandEnabled) {
     var _api$uiControlRegistr;

package/dist/cjs/ui/statusBlockMenuItem.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createStatusBlockMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _lozenge = _interopRequireDefault(require("@atlaskit/icon-lab/core/lozenge"));
+var _createStatusNode = require("../utils/createStatusNode");
+var _pluginKey = require("../pm-plugins/plugin-key");
+var StatusBlockMenuItem = function StatusBlockMenuItem(_ref) {
+  var api = _ref.api,
+    isSuggested = _ref.isSuggested;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var _api$blockMenu;
+      var tr = _ref2.tr;
+      var command = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformInlineNode({
+        buildInlineNode: function buildInlineNode(source) {
+          return (0, _createStatusNode.createStatusNode)(tr.doc.type.schema, {
+            text: source.textContent.trim()
+          });
+        },
+        isSuggested: isSuggested,
+        targetTypeName: 'status'
+      });
+      var nextTr = command === null || command === void 0 ? void 0 : command({
+        tr: tr
+      });
+      if (!(nextTr !== null && nextTr !== void 0 && nextTr.docChanged)) {
+        return null;
+      }
+      return nextTr.setMeta(_pluginKey.pluginKey, {
+        focusStatusInput: true,
+        isNew: true,
+        showStatusPickerAt: nextTr.selection.from
+      });
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(_messages.toolbarInsertBlockMessages.status));
+};
+var createStatusBlockMenuItem = exports.createStatusBlockMenuItem = function createStatusBlockMenuItem(api) {
+  return function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      isSuggested = _ref3.isSuggested;
+    return /*#__PURE__*/_react.default.createElement(StatusBlockMenuItem, {
+      api: api,
+      isSuggested: isSuggested
+    });
+  };
+};

package/dist/cjs/ui/statusPicker.js

@@ -27,7 +27,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _element = require("@atlaskit/status/element");
 var _picker = require("@atlaskit/status/picker");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
-var _actions = require("../pm-plugins/actions");
+var _createStatusNode = require("../utils/createStatusNode");
 var _analytics = require("./analytics");
 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; })(); } /**
@@ -422,8 +422,8 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         defaultLocalId = props.defaultLocalId,
         isNew = props.isNew;
       return {
-        color: defaultColor || _actions.DEFAULT_STATUS.color,
-        text: defaultText || _actions.DEFAULT_STATUS.text,
+        color: defaultColor || _createStatusNode.DEFAULT_STATUS.color,
+        text: defaultText || _createStatusNode.DEFAULT_STATUS.text,
         localId: defaultLocalId,
         isNew: isNew
       };

package/dist/cjs/utils/createStatusNode.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultStatusAttrs = exports.createStatusNode = exports.DEFAULT_STATUS_NEW = exports.DEFAULT_STATUS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+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; }
+var DEFAULT_STATUS = exports.DEFAULT_STATUS = {
+  text: '',
+  color: 'neutral'
+};
+var DEFAULT_STATUS_NEW = exports.DEFAULT_STATUS_NEW = {
+  text: '',
+  color: 'neutral',
+  style: 'mixedCase'
+};
+var getDefaultStatusAttrs = exports.getDefaultStatusAttrs = function getDefaultStatusAttrs() {
+  return (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS;
+};
+var createStatusNode = exports.createStatusNode = function createStatusNode(schema) {
+  var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var marks = arguments.length > 2 ? arguments[2] : undefined;
+  return schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, getDefaultStatusAttrs()), {}, {
+    localId: _adfSchema.uuid.generate()
+  }, attrs), null, marks);
+};

package/dist/cjs/utils/turnInto.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isStatusTurnIntoHidden = exports.canTurnIntoStatus = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var MAX_STATUS_TURN_INTO_CHARS = 30;
+var SUPPORTED_SOURCE_TYPES = new Set(['paragraph', 'heading']);
+var getTurnIntoStatusSourceNode = function getTurnIntoStatusSourceNode(selection) {
+  if (!selection || !(selection instanceof _state.NodeSelection)) {
+    return null;
+  }
+  return selection.node;
+};
+var canTurnIntoStatus = exports.canTurnIntoStatus = function canTurnIntoStatus(node) {
+  if (!node || !SUPPORTED_SOURCE_TYPES.has(node.type.name)) {
+    return false;
+  }
+  for (var i = 0; i < node.childCount; i++) {
+    if (!node.child(i).isText) {
+      return false;
+    }
+  }
+  return node.textContent.trim().length <= MAX_STATUS_TURN_INTO_CHARS;
+};
+var isStatusTurnIntoHidden = exports.isStatusTurnIntoHidden = function isStatusTurnIntoHidden(selection) {
+  return !canTurnIntoStatus(getTurnIntoStatusSourceNode(selection));
+};

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

@@ -6,17 +6,8 @@ import { getAnnotationMarksForPos } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { canInsert } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { createStatusNode, getDefaultStatusAttrs } from '../utils/createStatusNode';
 import { pluginKey } from './plugin-key';
-export const DEFAULT_STATUS = {
-  text: '',
-  color: 'neutral'
-};
-export const DEFAULT_STATUS_NEW = {
-  text: '',
-  color: 'neutral',
-  style: 'mixedCase'
-};
 export const verifyAndInsertStatus = (statusNode, tr, annotationMarks) => {
   const fragment = Fragment.fromArray([statusNode, tr.doc.type.schema.text(' ', annotationMarks)]);
   const insertable = canInsert(tr.selection.$from, fragment);
@@ -33,10 +24,7 @@ export const verifyAndInsertStatus = (statusNode, tr, annotationMarks) => {
 };
 export const createStatus = tr => {
   const annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
-  const statusNode = tr.doc.type.schema.nodes.status.createChecked({
-    ...(fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS),
-    localId: uuid.generate()
-  }, null, annotationMarksForPos);
+  const statusNode = createStatusNode(tr.doc.type.schema, {}, annotationMarksForPos);
   return verifyAndInsertStatus(statusNode, tr, annotationMarksForPos);
 };
 export const insertStatus = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.TOOLBAR) => ({
@@ -63,7 +51,7 @@ export const updateStatus = status => (state, dispatch) => {
     localId: status.localId || uuid.generate()
   }) : status;
   const statusProps = {
-    ...(fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS),
+    ...getDefaultStatusAttrs(),
     ...selectedStatus
   };
   let tr = state.tr;

package/dist/es2019/statusPlugin.js

@@ -1,23 +1,45 @@
 import React from 'react';
 import { status } from '@atlaskit/adf-schema/status';
 import { ACTION_SUBJECT_ID, ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
+import { TRANSFORM_STRUCTURE_STATUS_MENU_ITEM } from '@atlaskit/editor-common/block-menu/key';
 import { addInlineComment, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconStatus } from '@atlaskit/editor-common/quick-insert';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { commitStatusPicker, insertStatus, removeStatus, updateStatusWithAnalytics } from './pm-plugins/actions';
+import { isStatusTurnIntoHidden } from './utils/turnInto';
 import { keymapPlugin } from './pm-plugins/keymap';
 import createStatusPlugin from './pm-plugins/plugin';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { ContentComponent } from './ui/ContentComponent';
 import { getStatusQuickInsertComponents } from './ui/quick-insert/getStatusQuickInsertComponents';
+import { createStatusBlockMenuItem } from './ui/statusBlockMenuItem';
 export const statusPlugin = ({
   config: options,
   api
 }) => {
   var _api$analytics, _api$analytics2;
+  if (expValEquals('platform_editor_block_menu', 'isEnabled', true) && isExperimentEnabled('platform_editor_turn_into_status')) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: TRANSFORM_STRUCTURE_STATUS_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: TRANSFORM_STRUCTURE_MENU_SECTION.key,
+        rank: TRANSFORM_STRUCTURE_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_STATUS_MENU_ITEM.key]
+      },
+      component: createStatusBlockMenuItem(api),
+      isHidden: () => {
+        var _api$blockControls, _api$blockControls$sh;
+        return isStatusTurnIntoHidden(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection);
+      }
+    }]);
+  }
   const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
   if ((options === null || options === void 0 ? void 0 : options.menuDisabled) !== true && isRegisteredSlashCommandEnabled) {
     var _api$uiControlRegistr;

package/dist/es2019/ui/statusBlockMenuItem.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
+import { createStatusNode } from '../utils/createStatusNode';
+import { pluginKey } from '../pm-plugins/plugin-key';
+const StatusBlockMenuItem = ({
+  api,
+  isSuggested
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const handleClick = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockMenu;
+      const command = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformInlineNode({
+        buildInlineNode: source => createStatusNode(tr.doc.type.schema, {
+          text: source.textContent.trim()
+        }),
+        isSuggested,
+        targetTypeName: 'status'
+      });
+      const nextTr = command === null || command === void 0 ? void 0 : command({
+        tr
+      });
+      if (!(nextTr !== null && nextTr !== void 0 && nextTr.docChanged)) {
+        return null;
+      }
+      return nextTr.setMeta(pluginKey, {
+        focusStatusInput: true,
+        isNew: true,
+        showStatusPickerAt: nextTr.selection.from
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(LozengeIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(toolbarInsertBlockMessages.status));
+};
+export const createStatusBlockMenuItem = api => {
+  return ({
+    isSuggested
+  } = {}) => /*#__PURE__*/React.createElement(StatusBlockMenuItem, {
+    api: api,
+    isSuggested: isSuggested
+  });
+};

package/dist/es2019/ui/statusPicker.js

@@ -22,7 +22,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Status } from '@atlaskit/status/element';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
-import { DEFAULT_STATUS } from '../pm-plugins/actions';
+import { DEFAULT_STATUS } from '../utils/createStatusNode';
 import { analyticsState, createStatusAnalyticsAndFire } from './analytics';
 const PopupWithListeners = withOuterListeners(Popup);
 export let InputMethod = /*#__PURE__*/function (InputMethod) {

package/dist/es2019/utils/createStatusNode.js

@@ -0,0 +1,17 @@
+import { uuid } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+export const DEFAULT_STATUS = {
+  text: '',
+  color: 'neutral'
+};
+export const DEFAULT_STATUS_NEW = {
+  text: '',
+  color: 'neutral',
+  style: 'mixedCase'
+};
+export const getDefaultStatusAttrs = () => fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS;
+export const createStatusNode = (schema, attrs = {}, marks) => schema.nodes.status.createChecked({
+  ...getDefaultStatusAttrs(),
+  localId: uuid.generate(),
+  ...attrs
+}, null, marks);

package/dist/es2019/utils/turnInto.js

@@ -0,0 +1,21 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+const MAX_STATUS_TURN_INTO_CHARS = 30;
+const SUPPORTED_SOURCE_TYPES = new Set(['paragraph', 'heading']);
+const getTurnIntoStatusSourceNode = selection => {
+  if (!selection || !(selection instanceof NodeSelection)) {
+    return null;
+  }
+  return selection.node;
+};
+export const canTurnIntoStatus = node => {
+  if (!node || !SUPPORTED_SOURCE_TYPES.has(node.type.name)) {
+    return false;
+  }
+  for (let i = 0; i < node.childCount; i++) {
+    if (!node.child(i).isText) {
+      return false;
+    }
+  }
+  return node.textContent.trim().length <= MAX_STATUS_TURN_INTO_CHARS;
+};
+export const isStatusTurnIntoHidden = selection => !canTurnIntoStatus(getTurnIntoStatusSourceNode(selection));

package/dist/esm/pm-plugins/actions.js

@@ -9,17 +9,8 @@ import { getAnnotationMarksForPos } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { canInsert } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { createStatusNode, getDefaultStatusAttrs } from '../utils/createStatusNode';
 import { pluginKey } from './plugin-key';
-export var DEFAULT_STATUS = {
-  text: '',
-  color: 'neutral'
-};
-export var DEFAULT_STATUS_NEW = {
-  text: '',
-  color: 'neutral',
-  style: 'mixedCase'
-};
 export var verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, tr, annotationMarks) {
   var fragment = Fragment.fromArray([statusNode, tr.doc.type.schema.text(' ', annotationMarks)]);
   var insertable = canInsert(tr.selection.$from, fragment);
@@ -36,9 +27,7 @@ export var verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, tr
 };
 export var createStatus = function createStatus(tr) {
   var annotationMarksForPos = getAnnotationMarksForPos(tr.selection.$head);
-  var statusNode = tr.doc.type.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), {}, {
-    localId: uuid.generate()
-  }), null, annotationMarksForPos);
+  var statusNode = createStatusNode(tr.doc.type.schema, {}, annotationMarksForPos);
   return verifyAndInsertStatus(statusNode, tr, annotationMarksForPos);
 };
 export var insertStatus = function insertStatus(editorAnalyticsAPI) {
@@ -67,7 +56,7 @@ export var updateStatus = function updateStatus(status) {
       text: status.text.trim(),
       localId: status.localId || uuid.generate()
     }) : status;
-    var statusProps = _objectSpread(_objectSpread({}, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS), selectedStatus);
+    var statusProps = _objectSpread(_objectSpread({}, getDefaultStatusAttrs()), selectedStatus);
     var tr = state.tr;
     var _ref2 = pluginKey.getState(state) || {},
       showStatusPickerAt = _ref2.showStatusPickerAt;

package/dist/esm/statusPlugin.js

@@ -4,22 +4,44 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { status } from '@atlaskit/adf-schema/status';
 import { ACTION_SUBJECT_ID, ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
+import { TRANSFORM_STRUCTURE_STATUS_MENU_ITEM } from '@atlaskit/editor-common/block-menu/key';
 import { addInlineComment, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconStatus } from '@atlaskit/editor-common/quick-insert';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { commitStatusPicker, insertStatus, removeStatus, updateStatusWithAnalytics } from './pm-plugins/actions';
+import { isStatusTurnIntoHidden } from './utils/turnInto';
 import { keymapPlugin } from './pm-plugins/keymap';
 import createStatusPlugin from './pm-plugins/plugin';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { ContentComponent } from './ui/ContentComponent';
 import { getStatusQuickInsertComponents } from './ui/quick-insert/getStatusQuickInsertComponents';
+import { createStatusBlockMenuItem } from './ui/statusBlockMenuItem';
 export var statusPlugin = function statusPlugin(_ref) {
   var _api$analytics, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
+  if (expValEquals('platform_editor_block_menu', 'isEnabled', true) && isExperimentEnabled('platform_editor_turn_into_status')) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
+      type: 'block-menu-item',
+      key: TRANSFORM_STRUCTURE_STATUS_MENU_ITEM.key,
+      parent: {
+        type: 'block-menu-section',
+        key: TRANSFORM_STRUCTURE_MENU_SECTION.key,
+        rank: TRANSFORM_STRUCTURE_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_STATUS_MENU_ITEM.key]
+      },
+      component: createStatusBlockMenuItem(api),
+      isHidden: function isHidden() {
+        var _api$blockControls;
+        return isStatusTurnIntoHidden(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection);
+      }
+    }]);
+  }
   var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
   if ((options === null || options === void 0 ? void 0 : options.menuDisabled) !== true && isRegisteredSlashCommandEnabled) {
     var _api$uiControlRegistr;

package/dist/esm/ui/statusBlockMenuItem.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
+import { createStatusNode } from '../utils/createStatusNode';
+import { pluginKey } from '../pm-plugins/plugin-key';
+var StatusBlockMenuItem = function StatusBlockMenuItem(_ref) {
+  var api = _ref.api,
+    isSuggested = _ref.isSuggested;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var _api$blockMenu;
+      var tr = _ref2.tr;
+      var command = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformInlineNode({
+        buildInlineNode: function buildInlineNode(source) {
+          return createStatusNode(tr.doc.type.schema, {
+            text: source.textContent.trim()
+          });
+        },
+        isSuggested: isSuggested,
+        targetTypeName: 'status'
+      });
+      var nextTr = command === null || command === void 0 ? void 0 : command({
+        tr: tr
+      });
+      if (!(nextTr !== null && nextTr !== void 0 && nextTr.docChanged)) {
+        return null;
+      }
+      return nextTr.setMeta(pluginKey, {
+        focusStatusInput: true,
+        isNew: true,
+        showStatusPickerAt: nextTr.selection.from
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(LozengeIcon, {
+      label: "",
+      size: "small"
+    })
+  }, formatMessage(toolbarInsertBlockMessages.status));
+};
+export var createStatusBlockMenuItem = function createStatusBlockMenuItem(api) {
+  return function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      isSuggested = _ref3.isSuggested;
+    return /*#__PURE__*/React.createElement(StatusBlockMenuItem, {
+      api: api,
+      isSuggested: isSuggested
+    });
+  };
+};

package/dist/esm/ui/statusPicker.js

@@ -29,7 +29,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Status } from '@atlaskit/status/element';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
-import { DEFAULT_STATUS } from '../pm-plugins/actions';
+import { DEFAULT_STATUS } from '../utils/createStatusNode';
 import { analyticsState, createStatusAnalyticsAndFire } from './analytics';
 var PopupWithListeners = withOuterListeners(Popup);
 export var InputMethod = /*#__PURE__*/function (InputMethod) {

package/dist/esm/utils/createStatusNode.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { uuid } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+export var DEFAULT_STATUS = {
+  text: '',
+  color: 'neutral'
+};
+export var DEFAULT_STATUS_NEW = {
+  text: '',
+  color: 'neutral',
+  style: 'mixedCase'
+};
+export var getDefaultStatusAttrs = function getDefaultStatusAttrs() {
+  return fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? DEFAULT_STATUS_NEW : DEFAULT_STATUS;
+};
+export var createStatusNode = function createStatusNode(schema) {
+  var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var marks = arguments.length > 2 ? arguments[2] : undefined;
+  return schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, getDefaultStatusAttrs()), {}, {
+    localId: uuid.generate()
+  }, attrs), null, marks);
+};

package/dist/esm/utils/turnInto.js

@@ -0,0 +1,23 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+var MAX_STATUS_TURN_INTO_CHARS = 30;
+var SUPPORTED_SOURCE_TYPES = new Set(['paragraph', 'heading']);
+var getTurnIntoStatusSourceNode = function getTurnIntoStatusSourceNode(selection) {
+  if (!selection || !(selection instanceof NodeSelection)) {
+    return null;
+  }
+  return selection.node;
+};
+export var canTurnIntoStatus = function canTurnIntoStatus(node) {
+  if (!node || !SUPPORTED_SOURCE_TYPES.has(node.type.name)) {
+    return false;
+  }
+  for (var i = 0; i < node.childCount; i++) {
+    if (!node.child(i).isText) {
+      return false;
+    }
+  }
+  return node.textContent.trim().length <= MAX_STATUS_TURN_INTO_CHARS;
+};
+export var isStatusTurnIntoHidden = function isStatusTurnIntoHidden(selection) {
+  return !canTurnIntoStatus(getTurnIntoStatusSourceNode(selection));
+};

package/dist/types/pm-plugins/actions.d.ts

@@ -6,8 +6,6 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ClosingPayload, StatusType } from '../types';
-export declare const DEFAULT_STATUS: StatusType;
-export declare const DEFAULT_STATUS_NEW: StatusType;
 export declare const verifyAndInsertStatus: (statusNode: Node, tr: Transaction, annotationMarks?: Mark[] | undefined) => Transaction;
 export declare const createStatus: (tr: Transaction) => Transaction;
 export declare const insertStatus: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod?: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => EditorCommand;

package/dist/types/statusPluginType.d.ts

@@ -1,6 +1,9 @@
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { NextEditorPlugin, OptionalPlugin, Command } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls/blockControlsPluginType';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu/blockMenuPluginType';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 import type { commitStatusPicker, insertStatus, removeStatus, UpdateStatus } from './pm-plugins/actions';
 import type { StatusPluginOptions, StatusState } from './types';
@@ -26,7 +29,10 @@ export type StatusPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<DummyAnnotationPlugin>,
     OptionalPlugin<DummyEditorViewModePlugin>,
-    OptionalPlugin<UiControlRegistryPlugin>
+    OptionalPlugin<UiControlRegistryPlugin>,
+    OptionalPlugin<BlockMenuPlugin>,
+    OptionalPlugin<BlockControlsPlugin>,
+    OptionalPlugin<SelectionPlugin>
 ];
 export type StatusPluginActions = {
     commitStatusPicker: typeof commitStatusPicker;

package/dist/types/ui/statusBlockMenuItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuItemComponentProps } from '@atlaskit/editor-plugin-block-menu/blockMenuPluginType';
+import type { StatusPlugin } from '../statusPluginType';
+export declare const createStatusBlockMenuItem: (api: ExtractInjectionAPI<StatusPlugin> | undefined) => ({ isSuggested }?: BlockMenuItemComponentProps) => React.JSX.Element;

package/dist/types/utils/createStatusNode.d.ts

@@ -0,0 +1,6 @@
+import type { Mark, Node, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { StatusType } from '../types';
+export declare const DEFAULT_STATUS: StatusType;
+export declare const DEFAULT_STATUS_NEW: StatusType;
+export declare const getDefaultStatusAttrs: () => StatusType;
+export declare const createStatusNode: (schema: Schema, attrs?: Partial<StatusType>, marks?: readonly Mark[]) => Node;

package/dist/types/utils/turnInto.d.ts

@@ -0,0 +1,4 @@
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+import { type Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const canTurnIntoStatus: (node: Node | null) => boolean;
+export declare const isStatusTurnIntoHidden: (selection: Selection | undefined) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "17.2.6",
+	"version": "17.3.2",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,27 +21,31 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.2.0",
+		"@atlaskit/adf-schema": "^57.3.0",
 		"@atlaskit/analytics-next": "^12.5.0",
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^16.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^17.4.0",
+		"@atlaskit/editor-plugin-block-menu": "^15.1.0",
+		"@atlaskit/editor-plugin-selection": "^16.1.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.1.0",
+		"@atlaskit/editor-toolbar": "^2.6.0",
 		"@atlaskit/editor-ui-control-model": "^2.9.0",
 		"@atlaskit/icon": "^37.6.0",
-		"@atlaskit/icon-lab": "^7.7.0",
+		"@atlaskit/icon-lab": "^7.8.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/status": "^5.9.0",
-		"@atlaskit/tmp-editor-statsig": "^174.0.0",
+		"@atlaskit/tmp-editor-statsig": "^176.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.12.0",
+		"@atlaskit/editor-common": "^120.16.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"