@atlaskit/editor-plugin-status 0.1.2 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-status
 
+## 0.2.1
+
+### Patch Changes
+
+- [#42564](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42564) [`7139d6b0a64`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7139d6b0a64) - ED-20512 Fixed issue with adding status node inside a codeblock
+
+## 0.2.0
+
+### Minor Changes
+
+- [#42325](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42325) [`58f1fd91d09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58f1fd91d09) - ED-20512 Set Focus on status input field when tab is pressed
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.removeStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS = void 0;
+exports.verifyAndInsertStatus = exports.updateStatusWithAnalytics = exports.updateStatus = exports.setStatusPickerAt = exports.setFocusOnStatusInput = exports.removeStatus = exports.createStatus = exports.commitStatusPicker = exports.DEFAULT_STATUS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -19,22 +19,26 @@ var DEFAULT_STATUS = exports.DEFAULT_STATUS = {
   text: '',
   color: 'neutral'
 };
-var createStatus = exports.createStatus = function createStatus() {
-  var showStatusPickerAtOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  return function (insert, state) {
-    var statusNode = state.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, DEFAULT_STATUS), {}, {
-      localId: _adfSchema.uuid.generate()
-    }));
-    var space = state.schema.text(' ');
-    var tr = insert(_model.Fragment.from([statusNode, space]), {
-      selectInlineNode: true
-    });
-    var showStatusPickerAt = tr.selection.from + showStatusPickerAtOffset;
-    return tr.setSelection(_state.NodeSelection.create(tr.doc, showStatusPickerAt)).setMeta(_pluginKey.pluginKey, {
-      showStatusPickerAt: showStatusPickerAt,
-      isNew: true
-    });
-  };
+var verifyAndInsertStatus = exports.verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, state) {
+  var fragment = _model.Fragment.fromArray([statusNode, state.schema.text(' ')]);
+  var tr = state.tr;
+  var insertable = (0, _utils.canInsert)(tr.selection.$from, fragment);
+  if (!insertable) {
+    var parentSelection = _state.NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+    tr.insert(parentSelection.to, fragment).setSelection(_state.NodeSelection.create(tr.doc, parentSelection.to + 1));
+  } else {
+    tr.insert(tr.selection.from, fragment).setSelection(_state.NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
+  }
+  return tr.setMeta(_pluginKey.pluginKey, {
+    showStatusPickerAt: tr.selection.from,
+    isNew: true
+  }).scrollIntoView();
+};
+var createStatus = exports.createStatus = function createStatus(state) {
+  var statusNode = state.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, DEFAULT_STATUS), {}, {
+    localId: _adfSchema.uuid.generate()
+  }));
+  return verifyAndInsertStatus(statusNode, state);
 };
 var updateStatus = exports.updateStatus = function updateStatus(status) {
   return function (state, dispatch) {
@@ -50,18 +54,7 @@ var updateStatus = exports.updateStatus = function updateStatus(status) {
     if (!showStatusPickerAt) {
       // Same behaviour as quick insert (used in createStatus)
       var statusNode = schema.nodes.status.createChecked(statusProps);
-      var fragment = _model.Fragment.fromArray([statusNode, state.schema.text(' ')]);
-      var insertable = (0, _utils.canInsert)(tr.selection.$from, fragment);
-      if (!insertable) {
-        var parentSelection = _state.NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
-        tr.insert(parentSelection.to, fragment).setSelection(_state.NodeSelection.create(tr.doc, parentSelection.to + 1));
-      } else {
-        tr.insert(tr.selection.from, fragment).setSelection(_state.NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
-      }
-      tr.setMeta(_pluginKey.pluginKey, {
-        showStatusPickerAt: tr.selection.from,
-        isNew: true
-      }).scrollIntoView();
+      tr = verifyAndInsertStatus(statusNode, state);
       if (dispatch) {
         dispatch(tr);
       }
@@ -108,6 +101,18 @@ var removeStatus = exports.removeStatus = function removeStatus(showStatusPicker
     return tr;
   };
 };
+var setFocusOnStatusInput = exports.setFocusOnStatusInput = function setFocusOnStatusInput() {
+  return function (state, dispatch) {
+    if (!dispatch) {
+      return false;
+    }
+    var tr = state.tr.setMeta(_pluginKey.pluginKey, {
+      focusStatusInput: true
+    });
+    dispatch(tr);
+    return true;
+  };
+};
 var handleClosingByArrows = function handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr) {
   if (closingMethod === 'arrowLeft') {
     // put cursor right before status Lozenge
@@ -135,6 +140,7 @@ var commitStatusPicker = exports.commitStatusPicker = function commitStatusPicke
     var tr = state.tr;
     tr = tr.setMeta(_pluginKey.pluginKey, {
       showStatusPickerAt: null,
+      focusStatusInput: false,
       isNew: false
     });
     if (closingMethod) {

package/dist/cjs/plugin.js

@@ -75,6 +75,7 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
             localId = _statusNode$attrs.localId;
           return /*#__PURE__*/_react.default.createElement(_statusPicker.default, {
             isNew: statusState.isNew,
+            focusStatusInput: statusState.focusStatusInput,
             target: target,
             defaultText: text,
             defaultColor: color,
@@ -118,7 +119,7 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
         },
         action: function action(insert, state) {
           var _api$analytics2;
-          var tr = (0, _actions.createStatus)()(insert, state);
+          var tr = (0, _actions.createStatus)(state);
           api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             action: _analytics.ACTION.INSERTED,
             actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,

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

@@ -7,11 +7,25 @@ exports.default = void 0;
 exports.keymapPlugin = keymapPlugin;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _actions = require("../actions");
 var _utils = require("../utils");
+var _pluginKey = require("./plugin-key");
 function keymapPlugin() {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, consumeKeyEvent, list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, consumeKeyEvent, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch) {
+    var statusPluginState = _pluginKey.pluginKey.getState(state);
+    var isStatusNode = state.selection instanceof _state.NodeSelection ? state.selection.node.type === state.schema.nodes.status : false;
+    if (!isStatusNode) {
+      return false;
+    }
+    if (statusPluginState !== null && statusPluginState !== void 0 && statusPluginState.showStatusPickerAt) {
+      (0, _actions.setFocusOnStatusInput)()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
   return (0, _keymap.keymap)(list);
 }
 

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

@@ -33,7 +33,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
       init: function init() {
         return {
           isNew: false,
-          showStatusPickerAt: null
+          showStatusPickerAt: null,
+          focusStatusInput: false
         };
       },
       apply: function apply(tr, state, oldEditorState) {
@@ -67,7 +68,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
           if (_showStatusPickerAt !== state.showStatusPickerAt) {
             var _newState2 = _objectSpread(_objectSpread({}, state), {}, {
               isNew: false,
-              showStatusPickerAt: _showStatusPickerAt
+              showStatusPickerAt: _showStatusPickerAt,
+              focusStatusInput: false
             });
             pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, _newState2);
             return _newState2;

package/dist/cjs/ui/statusPicker.js

@@ -235,17 +235,8 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
       this.reset();
       this.fireStatusPopupOpenedAnalytics(this.state);
-      if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-        // Wrapper should be focused only if status already exists otherwise input field will receive focus
-        this.focusTimeout = requestAnimationFrame(function () {
-          var _this2$popupBodyWrapp;
-          // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-          (_this2$popupBodyWrapp = _this2.popupBodyWrapper) === null || _this2$popupBodyWrapp === void 0 || (_this2$popupBodyWrapp = _this2$popupBodyWrapp.current) === null || _this2$popupBodyWrapp === void 0 || _this2$popupBodyWrapp.focus();
-        });
-      }
     }
   }, {
     key: "componentWillUnmount",
@@ -288,7 +279,8 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         target = _this$props.target,
         mountTo = _this$props.mountTo,
         boundariesElement = _this$props.boundariesElement,
-        scrollableElement = _this$props.scrollableElement;
+        scrollableElement = _this$props.scrollableElement,
+        focusStatusInput = _this$props.focusStatusInput;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
@@ -310,7 +302,7 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         onClick: this.handlePopupClick,
         onKeyDown: this.onKeyDown
       }, (0, _react2.jsx)(_picker.StatusPicker, {
-        autoFocus: isNew,
+        autoFocus: isNew || focusStatusInput,
         selectedColor: color,
         text: text,
         onColorClick: this.onColorClick,

package/dist/es2019/actions.js

@@ -9,20 +9,27 @@ export const DEFAULT_STATUS = {
   text: '',
   color: 'neutral'
 };
-export const createStatus = (showStatusPickerAtOffset = 0) => (insert, state) => {
+export const verifyAndInsertStatus = (statusNode, state) => {
+  const fragment = Fragment.fromArray([statusNode, state.schema.text(' ')]);
+  const tr = state.tr;
+  const insertable = canInsert(tr.selection.$from, fragment);
+  if (!insertable) {
+    const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+    tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
+  } else {
+    tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
+  }
+  return tr.setMeta(pluginKey, {
+    showStatusPickerAt: tr.selection.from,
+    isNew: true
+  }).scrollIntoView();
+};
+export const createStatus = state => {
   const statusNode = state.schema.nodes.status.createChecked({
     ...DEFAULT_STATUS,
     localId: uuid.generate()
   });
-  const space = state.schema.text(' ');
-  const tr = insert(Fragment.from([statusNode, space]), {
-    selectInlineNode: true
-  });
-  const showStatusPickerAt = tr.selection.from + showStatusPickerAtOffset;
-  return tr.setSelection(NodeSelection.create(tr.doc, showStatusPickerAt)).setMeta(pluginKey, {
-    showStatusPickerAt,
-    isNew: true
-  });
+  return verifyAndInsertStatus(statusNode, state);
 };
 export const updateStatus = status => (state, dispatch) => {
   const {
@@ -43,18 +50,7 @@ export const updateStatus = status => (state, dispatch) => {
   if (!showStatusPickerAt) {
     // Same behaviour as quick insert (used in createStatus)
     const statusNode = schema.nodes.status.createChecked(statusProps);
-    const fragment = Fragment.fromArray([statusNode, state.schema.text(' ')]);
-    const insertable = canInsert(tr.selection.$from, fragment);
-    if (!insertable) {
-      const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
-      tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
-    } else {
-      tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
-    }
-    tr.setMeta(pluginKey, {
-      showStatusPickerAt: tr.selection.from,
-      isNew: true
-    }).scrollIntoView();
+    tr = verifyAndInsertStatus(statusNode, state);
     if (dispatch) {
       dispatch(tr);
     }
@@ -93,6 +89,16 @@ export const removeStatus = showStatusPickerAt => ({
   tr.replace(showStatusPickerAt, showStatusPickerAt + 1);
   return tr;
 };
+export const setFocusOnStatusInput = () => (state, dispatch) => {
+  if (!dispatch) {
+    return false;
+  }
+  const tr = state.tr.setMeta(pluginKey, {
+    focusStatusInput: true
+  });
+  dispatch(tr);
+  return true;
+};
 const handleClosingByArrows = (closingMethod, state, showStatusPickerAt, tr) => {
   if (closingMethod === 'arrowLeft') {
     // put cursor right before status Lozenge
@@ -123,6 +129,7 @@ export const commitStatusPicker = closingPayload => editorView => {
   let tr = state.tr;
   tr = tr.setMeta(pluginKey, {
     showStatusPickerAt: null,
+    focusStatusInput: false,
     isNew: false
   });
   if (closingMethod) {

package/dist/es2019/plugin.js

@@ -71,6 +71,7 @@ const baseStatusPlugin = ({
           } = statusNode.attrs;
           return /*#__PURE__*/React.createElement(StatusPicker, {
             isNew: statusState.isNew,
+            focusStatusInput: statusState.focusStatusInput,
             target: target,
             defaultText: text,
             defaultColor: color,
@@ -112,7 +113,7 @@ const decorateWithPluginOptions = (plugin, options, api) => {
       icon: () => /*#__PURE__*/React.createElement(IconStatus, null),
       action(insert, state) {
         var _api$analytics2;
-        const tr = createStatus()(insert, state);
+        const tr = createStatus(state);
         api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
           action: ACTION.INSERTED,
           actionSubject: ACTION_SUBJECT.DOCUMENT,

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

@@ -1,10 +1,24 @@
 import { bindKeymapWithCommand, enter, tab } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { setFocusOnStatusInput } from '../actions';
 import { mayGetStatusAtSelection } from '../utils';
+import { pluginKey } from './plugin-key';
 export function keymapPlugin() {
   const list = {};
   bindKeymapWithCommand(enter.common, consumeKeyEvent, list);
-  bindKeymapWithCommand(tab.common, consumeKeyEvent, list);
+  bindKeymapWithCommand(tab.common, (state, dispatch) => {
+    const statusPluginState = pluginKey.getState(state);
+    const isStatusNode = state.selection instanceof NodeSelection ? state.selection.node.type === state.schema.nodes.status : false;
+    if (!isStatusNode) {
+      return false;
+    }
+    if (statusPluginState !== null && statusPluginState !== void 0 && statusPluginState.showStatusPickerAt) {
+      setFocusOnStatusInput()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
   return keymap(list);
 }
 

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

@@ -10,7 +10,8 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
   state: {
     init: () => ({
       isNew: false,
-      showStatusPickerAt: null
+      showStatusPickerAt: null,
+      focusStatusInput: false
     }),
     apply(tr, state, oldEditorState) {
       const meta = tr.getMeta(pluginKey);
@@ -49,7 +50,8 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
           const newState = {
             ...state,
             isNew: false,
-            showStatusPickerAt
+            showStatusPickerAt,
+            focusStatusInput: false
           };
           pmPluginFactoryParams.dispatch(pluginKey, newState);
           return newState;

package/dist/es2019/ui/statusPicker.js

@@ -215,14 +215,6 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
   componentDidMount() {
     this.reset();
     this.fireStatusPopupOpenedAnalytics(this.state);
-    if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-      // Wrapper should be focused only if status already exists otherwise input field will receive focus
-      this.focusTimeout = requestAnimationFrame(() => {
-        var _this$popupBodyWrappe3, _this$popupBodyWrappe4;
-        // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-        (_this$popupBodyWrappe3 = this.popupBodyWrapper) === null || _this$popupBodyWrappe3 === void 0 ? void 0 : (_this$popupBodyWrappe4 = _this$popupBodyWrappe3.current) === null || _this$popupBodyWrappe4 === void 0 ? void 0 : _this$popupBodyWrappe4.focus();
-      });
-    }
   }
   componentWillUnmount() {
     this.focusTimeout && cancelAnimationFrame(this.focusTimeout);
@@ -259,7 +251,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       target,
       mountTo,
       boundariesElement,
-      scrollableElement
+      scrollableElement,
+      focusStatusInput
     } = this.props;
     const {
       color,
@@ -283,7 +276,7 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       onClick: this.handlePopupClick,
       onKeyDown: this.onKeyDown
     }, jsx(AkStatusPicker, {
-      autoFocus: isNew,
+      autoFocus: isNew || focusStatusInput,
       selectedColor: color,
       text: text,
       onColorClick: this.onColorClick,

package/dist/esm/actions.js

@@ -12,22 +12,26 @@ export var DEFAULT_STATUS = {
   text: '',
   color: 'neutral'
 };
-export var createStatus = function createStatus() {
-  var showStatusPickerAtOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  return function (insert, state) {
-    var statusNode = state.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, DEFAULT_STATUS), {}, {
-      localId: uuid.generate()
-    }));
-    var space = state.schema.text(' ');
-    var tr = insert(Fragment.from([statusNode, space]), {
-      selectInlineNode: true
-    });
-    var showStatusPickerAt = tr.selection.from + showStatusPickerAtOffset;
-    return tr.setSelection(NodeSelection.create(tr.doc, showStatusPickerAt)).setMeta(pluginKey, {
-      showStatusPickerAt: showStatusPickerAt,
-      isNew: true
-    });
-  };
+export var verifyAndInsertStatus = function verifyAndInsertStatus(statusNode, state) {
+  var fragment = Fragment.fromArray([statusNode, state.schema.text(' ')]);
+  var tr = state.tr;
+  var insertable = canInsert(tr.selection.$from, fragment);
+  if (!insertable) {
+    var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+    tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
+  } else {
+    tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
+  }
+  return tr.setMeta(pluginKey, {
+    showStatusPickerAt: tr.selection.from,
+    isNew: true
+  }).scrollIntoView();
+};
+export var createStatus = function createStatus(state) {
+  var statusNode = state.schema.nodes.status.createChecked(_objectSpread(_objectSpread({}, DEFAULT_STATUS), {}, {
+    localId: uuid.generate()
+  }));
+  return verifyAndInsertStatus(statusNode, state);
 };
 export var updateStatus = function updateStatus(status) {
   return function (state, dispatch) {
@@ -43,18 +47,7 @@ export var updateStatus = function updateStatus(status) {
     if (!showStatusPickerAt) {
       // Same behaviour as quick insert (used in createStatus)
       var statusNode = schema.nodes.status.createChecked(statusProps);
-      var fragment = Fragment.fromArray([statusNode, state.schema.text(' ')]);
-      var insertable = canInsert(tr.selection.$from, fragment);
-      if (!insertable) {
-        var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
-        tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
-      } else {
-        tr.insert(tr.selection.from, fragment).setSelection(NodeSelection.create(tr.doc, tr.selection.from - fragment.size));
-      }
-      tr.setMeta(pluginKey, {
-        showStatusPickerAt: tr.selection.from,
-        isNew: true
-      }).scrollIntoView();
+      tr = verifyAndInsertStatus(statusNode, state);
       if (dispatch) {
         dispatch(tr);
       }
@@ -101,6 +94,18 @@ export var removeStatus = function removeStatus(showStatusPickerAt) {
     return tr;
   };
 };
+export var setFocusOnStatusInput = function setFocusOnStatusInput() {
+  return function (state, dispatch) {
+    if (!dispatch) {
+      return false;
+    }
+    var tr = state.tr.setMeta(pluginKey, {
+      focusStatusInput: true
+    });
+    dispatch(tr);
+    return true;
+  };
+};
 var handleClosingByArrows = function handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr) {
   if (closingMethod === 'arrowLeft') {
     // put cursor right before status Lozenge
@@ -128,6 +133,7 @@ export var commitStatusPicker = function commitStatusPicker(closingPayload) {
     var tr = state.tr;
     tr = tr.setMeta(pluginKey, {
       showStatusPickerAt: null,
+      focusStatusInput: false,
       isNew: false
     });
     if (closingMethod) {

package/dist/esm/plugin.js

@@ -68,6 +68,7 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
             localId = _statusNode$attrs.localId;
           return /*#__PURE__*/React.createElement(StatusPicker, {
             isNew: statusState.isNew,
+            focusStatusInput: statusState.focusStatusInput,
             target: target,
             defaultText: text,
             defaultColor: color,
@@ -111,7 +112,7 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
         },
         action: function action(insert, state) {
           var _api$analytics2;
-          var tr = createStatus()(insert, state);
+          var tr = createStatus(state);
           api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,

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

@@ -1,10 +1,24 @@
 import { bindKeymapWithCommand, enter, tab } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { setFocusOnStatusInput } from '../actions';
 import { mayGetStatusAtSelection } from '../utils';
+import { pluginKey } from './plugin-key';
 export function keymapPlugin() {
   var list = {};
   bindKeymapWithCommand(enter.common, consumeKeyEvent, list);
-  bindKeymapWithCommand(tab.common, consumeKeyEvent, list);
+  bindKeymapWithCommand(tab.common, function (state, dispatch) {
+    var statusPluginState = pluginKey.getState(state);
+    var isStatusNode = state.selection instanceof NodeSelection ? state.selection.node.type === state.schema.nodes.status : false;
+    if (!isStatusNode) {
+      return false;
+    }
+    if (statusPluginState !== null && statusPluginState !== void 0 && statusPluginState.showStatusPickerAt) {
+      setFocusOnStatusInput()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
   return keymap(list);
 }
 

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

@@ -15,7 +15,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
       init: function init() {
         return {
           isNew: false,
-          showStatusPickerAt: null
+          showStatusPickerAt: null,
+          focusStatusInput: false
         };
       },
       apply: function apply(tr, state, oldEditorState) {
@@ -49,7 +50,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
           if (_showStatusPickerAt !== state.showStatusPickerAt) {
             var _newState2 = _objectSpread(_objectSpread({}, state), {}, {
               isNew: false,
-              showStatusPickerAt: _showStatusPickerAt
+              showStatusPickerAt: _showStatusPickerAt,
+              focusStatusInput: false
             });
             pmPluginFactoryParams.dispatch(pluginKey, _newState2);
             return _newState2;

package/dist/esm/ui/statusPicker.js

@@ -230,17 +230,8 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
       this.reset();
       this.fireStatusPopupOpenedAnalytics(this.state);
-      if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-        // Wrapper should be focused only if status already exists otherwise input field will receive focus
-        this.focusTimeout = requestAnimationFrame(function () {
-          var _this2$popupBodyWrapp;
-          // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-          (_this2$popupBodyWrapp = _this2.popupBodyWrapper) === null || _this2$popupBodyWrapp === void 0 || (_this2$popupBodyWrapp = _this2$popupBodyWrapp.current) === null || _this2$popupBodyWrapp === void 0 || _this2$popupBodyWrapp.focus();
-        });
-      }
     }
   }, {
     key: "componentWillUnmount",
@@ -283,7 +274,8 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         target = _this$props.target,
         mountTo = _this$props.mountTo,
         boundariesElement = _this$props.boundariesElement,
-        scrollableElement = _this$props.scrollableElement;
+        scrollableElement = _this$props.scrollableElement,
+        focusStatusInput = _this$props.focusStatusInput;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
@@ -305,7 +297,7 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         onClick: this.handlePopupClick,
         onKeyDown: this.onKeyDown
       }, jsx(AkStatusPicker, {
-        autoFocus: isNew,
+        autoFocus: isNew || focusStatusInput,
         selectedColor: color,
         text: text,
         onColorClick: this.onColorClick,

package/dist/types/actions.d.ts

@@ -1,15 +1,16 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+import type { Command, CommandDispatch, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+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 createStatus: (showStatusPickerAtOffset?: number) => (insert: (node: Node | Object | string, opts: {
-    selectInlineNode: boolean;
-}) => Transaction, state: EditorState) => Transaction;
+export declare const verifyAndInsertStatus: (statusNode: Node, state: EditorState) => Transaction;
+export declare const createStatus: (state: EditorState) => Transaction;
 export declare const updateStatus: (status?: StatusType) => Command;
 export type UpdateStatus = (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const updateStatusWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const setStatusPickerAt: (showStatusPickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
 export declare const removeStatus: (showStatusPickerAt: number) => EditorCommand;
+export declare const setFocusOnStatusInput: () => (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
 export declare const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;

package/dist/types/types.d.ts

@@ -8,6 +8,7 @@ export type StatusType = {
 export type StatusState = {
     isNew: boolean;
     showStatusPickerAt: number | null;
+    focusStatusInput?: boolean;
 };
 export interface StatusPluginOptions {
     menuDisabled: boolean;

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

@@ -19,6 +19,7 @@ export interface Props {
     onTextChanged: (status: StatusType, isNew: boolean) => void;
     onEnter: (status: StatusType) => void;
     isNew?: boolean;
+    focusStatusInput?: boolean;
     defaultText?: string;
     defaultColor?: Color;
     defaultLocalId?: string;

package/dist/types-ts4.5/actions.d.ts

@@ -1,15 +1,16 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+import type { Command, CommandDispatch, EditorCommand, TOOLBAR_MENU_TYPE } from '@atlaskit/editor-common/types';
+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 createStatus: (showStatusPickerAtOffset?: number) => (insert: (node: Node | Object | string, opts: {
-    selectInlineNode: boolean;
-}) => Transaction, state: EditorState) => Transaction;
+export declare const verifyAndInsertStatus: (statusNode: Node, state: EditorState) => Transaction;
+export declare const createStatus: (state: EditorState) => Transaction;
 export declare const updateStatus: (status?: StatusType) => Command;
 export type UpdateStatus = (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const updateStatusWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const setStatusPickerAt: (showStatusPickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
 export declare const removeStatus: (showStatusPickerAt: number) => EditorCommand;
+export declare const setFocusOnStatusInput: () => (state: EditorState, dispatch: CommandDispatch | undefined) => boolean;
 export declare const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;

package/dist/types-ts4.5/types.d.ts

@@ -8,6 +8,7 @@ export type StatusType = {
 export type StatusState = {
     isNew: boolean;
     showStatusPickerAt: number | null;
+    focusStatusInput?: boolean;
 };
 export interface StatusPluginOptions {
     menuDisabled: boolean;

package/dist/types-ts4.5/ui/statusPicker.d.ts

@@ -19,6 +19,7 @@ export interface Props {
     onTextChanged: (status: StatusType, isNew: boolean) => void;
     onEnter: (status: StatusType) => void;
     isNew?: boolean;
+    focusStatusInput?: boolean;
     defaultText?: string;
     defaultColor?: Color;
     defaultLocalId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-status",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Status plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/editor-common": "^76.17.0",
+    "@atlaskit/editor-common": "^76.18.0",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.8.0",

package/report.api.md

@@ -76,6 +76,7 @@ interface StatusPluginOptions {
 export type StatusState = {
   isNew: boolean;
   showStatusPickerAt: null | number;
+  focusStatusInput?: boolean;
 };
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -60,6 +60,7 @@ interface StatusPluginOptions {
 export type StatusState = {
     isNew: boolean;
     showStatusPickerAt: null | number;
+    focusStatusInput?: boolean;
 };
 
 // @public (undocumented)