@atlaskit/editor-plugin-tasks-and-decisions 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-tasks-and-decisions
 
+## 5.1.2
+
+### Patch Changes
+
+- [#146751](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146751)
+  [`ba4499469ce64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba4499469ce64) -
+  fix vanilla task with collab session
+- Updated dependencies
+
+## 5.1.1
+
+### Patch Changes
+
+- [#139777](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139777)
+  [`cfdfe0077993d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfdfe0077993d) -
+  Fix bug where a refs were passed incorrectly, preventing task item focus from being set
+- Updated dependencies
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TaskItemNodeView.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TaskItemNodeView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
+var _steps = require("@atlaskit/adf-schema/steps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _helpers = require("../pm-plugins/helpers");
+var _taskItemNodeSpec = require("./taskItemNodeSpec");
+var TaskItemNodeView = exports.TaskItemNodeView = /*#__PURE__*/function () {
+  function TaskItemNodeView(node, view, getPos, _ref) {
+    var _this = this;
+    var api = _ref.api,
+      placeholder = _ref.placeholder,
+      intl = _ref.intl;
+    (0, _classCallCheck2.default)(this, TaskItemNodeView);
+    (0, _defineProperty2.default)(this, "dom", document.createElement('span'));
+    (0, _defineProperty2.default)(this, "handleOnClick", function (event) {
+      var _this$api;
+      if (!((_this$api = _this.api) !== null && _this$api !== void 0 && (_this$api = _this$api.taskDecision) !== null && _this$api !== void 0 && (_this$api = _this$api.sharedState.currentState()) !== null && _this$api !== void 0 && _this$api.hasEditPermission)) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        var pos = _this.getPos();
+        if (typeof pos === 'number') {
+          (0, _helpers.openRequestEditPopupAt)(_this.view, pos);
+        }
+        return;
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleOnChange", function () {
+      var _this$api2;
+      var tr = _this.view.state.tr;
+      var nodePos = _this.getPos();
+      if (typeof nodePos !== 'number') {
+        return;
+      }
+      var _this$node$attrs = _this.node.attrs,
+        localId = _this$node$attrs.localId,
+        state = _this$node$attrs.state;
+      var isDone = state === 'DONE';
+      var nextState = isDone ? 'TODO' : 'DONE';
+      var currentTaskDecisionState = (_this$api2 = _this.api) === null || _this$api2 === void 0 ? void 0 : _this$api2.taskDecision.sharedState.currentState();
+
+      // logic is inspired from packages/elements/task-decision/src/components/ResourcedTaskItem.tsx
+      if (currentTaskDecisionState !== null && currentTaskDecisionState !== void 0 && currentTaskDecisionState.taskDecisionProvider && _this.objectId) {
+        currentTaskDecisionState === null || currentTaskDecisionState === void 0 || currentTaskDecisionState.taskDecisionProvider.toggleTask({
+          localId: localId,
+          objectAri: _this.objectId
+        }, isDone ? 'DONE' : 'TODO');
+      }
+
+      // SetAttrsStep should be used to prevent task updates from being dropped when mapping task ticks
+      // from a previous version of the document, such as a published page.
+      tr.step(new _steps.SetAttrsStep(nodePos, {
+        state: nextState,
+        localId: localId
+      }));
+      tr.setMeta('scrollIntoView', false);
+      _this.view.dispatch(tr);
+    });
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.intl = intl;
+    this.api = api;
+    this.view = view;
+    try {
+      var domPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : this.intl.formatMessage(_messages.tasksAndDecisionsMessages.taskPlaceholder);
+      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _taskItemNodeSpec.taskItemToDom)(node, domPlaceholder)),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
+      if (!(dom instanceof HTMLElement)) {
+        // It's safe to throw error here because, the code is wrapped in try-catch.
+        // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.input = this.dom.querySelector('input[type="checkbox"]');
+      this.unbindInputDom = (0, _bindEventListener.bindAll)(this.input, [{
+        type: 'click',
+        listener: this.handleOnClick
+      }, {
+        type: 'change',
+        listener: this.handleOnChange
+      }]);
+      this.objectId = this.getObjectAri();
+      this.updatePlaceholder(node);
+    } catch (error) {
+      TaskItemNodeView.logError(error instanceof Error ? error : new Error('Unknown error on TaskItemNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  return (0, _createClass2.default)(TaskItemNodeView, [{
+    key: "getContextIdentifierProvider",
+    value: function getContextIdentifierProvider() {
+      var _this$api3;
+      return (_this$api3 = this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.contextIdentifier) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.sharedState.currentState()) === null || _this$api3 === void 0 ? void 0 : _this$api3.contextIdentifierProvider;
+    }
+  }, {
+    key: "getObjectAri",
+    value: function getObjectAri() {
+      var provider = this.getContextIdentifierProvider();
+      if (provider) {
+        return provider.objectId;
+      }
+      return undefined;
+    }
+  }, {
+    key: "isContentEmpty",
+    value: function isContentEmpty(node) {
+      return node.content.childCount === 0;
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      var _this$node$firstChild;
+      var fallbackElementInput = document.createElement('input');
+      fallbackElementInput.setAttribute('type', 'checkbox');
+      var fallbackElementText = document.createElement('span');
+      fallbackElementText.innerText = ((_this$node$firstChild = this.node.firstChild) === null || _this$node$firstChild === void 0 ? void 0 : _this$node$firstChild.text) || '';
+      this.dom.appendChild(fallbackElementInput);
+      this.dom.appendChild(fallbackElementText);
+    }
+
+    // Update the placeholder visibility based on content
+  }, {
+    key: "updatePlaceholder",
+    value: function updatePlaceholder(node) {
+      var currentIsContentEmpty = this.isContentEmpty(node);
+      if (currentIsContentEmpty !== this.emptyContent) {
+        var _this$contentDOM;
+        this.emptyContent = currentIsContentEmpty;
+        (_this$contentDOM = this.contentDOM) === null || _this$contentDOM === void 0 || _this$contentDOM.toggleAttribute('data-empty', currentIsContentEmpty);
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      var isValidUpdate = node.type === this.node.type && !!(node.attrs.state === this.node.attrs.state);
+      if (!isValidUpdate) {
+        return false;
+      }
+      this.updatePlaceholder(node);
+      if (!node.sameMarkup(this.node)) {
+        this.dom.setAttribute('data-task-state', node.attrs.state);
+        this.dom.setAttribute('data-task-local-id', node.attrs.localId);
+        this.dom.setAttribute('state', node.attrs.state);
+      }
+      this.node = node;
+      return true;
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      if (!this.contentDOM) {
+        return true;
+      }
+      return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.unbindInputDom) {
+        this.unbindInputDom();
+      }
+      this.contentDOM = undefined;
+      this.input = undefined;
+      this.objectId = undefined;
+      this.emptyContent = undefined;
+      this.api = undefined;
+    }
+  }], [{
+    key: "logError",
+    value: function logError(error) {
+      void (0, _monitoring.logException)(error, {
+        location: 'editor-plugin-date/DateNodeView'
+      });
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/{task-lazy-node-view.js → task-node-view.js}

@@ -4,16 +4,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.lazyTaskView = void 0;
+exports.taskView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _taskItem = require("./taskItem");
+var _TaskItemNodeView = require("./TaskItemNodeView");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var lazyTaskView = exports.lazyTaskView = function lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api, placeholder) {
+var taskView = exports.taskView = function taskView(portalProviderAPI, eventDispatcher, providerFactory, api, intl, placeholder) {
+  if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+    exposure: true
+  })) {
+    return function (node, view, getPos) {
+      return new _TaskItemNodeView.TaskItemNodeView(node, view, getPos, {
+        placeholder: placeholder,
+        api: api,
+        intl: intl
+      });
+    };
+  }
   if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
-    return (0, _taskItem.taskItemNodeViewFactory)(portalProviderAPI, eventDispatcher, providerFactory, api, placeholder);
+    return (0, _taskItem.taskItemNodeViewFactory)(portalProviderAPI, eventDispatcher, providerFactory, api, intl, placeholder);
   }
   return (0, _lazyNodeView.withLazyLoading)({
     nodeName: 'taskItem',
@@ -25,7 +37,7 @@ var lazyTaskView = exports.lazyTaskView = function lazyTaskView(portalProviderAP
       }).then(function (_ref) {
         var taskItemNodeViewFactory = _ref.taskItemNodeViewFactory;
         return function (node, view, getPos) {
-          return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api, placeholder)(node, view, getPos);
+          return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api, intl, placeholder)(node, view, getPos);
         };
       });
       return result;

package/dist/cjs/nodeviews/taskItem.js

@@ -389,7 +389,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
 }(_reactNodeView.default);
-function taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api, placeholder) {
+function taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api, intl, placeholder) {
   return function (node, view, getPos) {
     return new Task(node, view, getPos, portalProviderAPI, eventDispatcher, {
       placeholder: placeholder,

package/dist/cjs/nodeviews/taskItemNodeSpec.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.taskItemNodeSpec = exports.lazyTaskItemToDom = void 0;
+exports.taskItemToDom = taskItemToDom;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _styles = require("@atlaskit/editor-common/styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+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; }
+/**
+ * Wrapper for ADF taskItem node spec to augment toDOM implementation
+ * with fallback UI for lazy node view rendering / window virtualization
+ * @nodeSpecException:toDOM patch
+ * @returns
+ */
+var taskItemNodeSpec = exports.taskItemNodeSpec = function taskItemNodeSpec() {
+  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
+    return _adfSchema.taskItem;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.taskItem), {}, {
+    toDOM: function toDOM(node) {
+      return lazyTaskItemToDom(node);
+    }
+  });
+};
+function taskItemToDom(node, placeholder) {
+  var checked = node.attrs.state === 'DONE';
+  var inputAttrs = {
+    name: node.attrs.localId,
+    id: node.attrs.localId,
+    type: 'checkbox'
+  };
+  if (checked) {
+    inputAttrs.checked = 'true';
+  }
+  var dataAttrs = {
+    'data-task-local-id': node.attrs.localId,
+    'data-task-state': node.attrs.state,
+    'data-prosemirror-node-view-type': 'vanilla'
+  };
+  return ['div', _objectSpread(_objectSpread({
+    class: "".concat(_styles.TaskDecisionSharedCssClassName.TASK_CONTAINER)
+  }, dataAttrs), {}, {
+    state: node.attrs.state
+  }), ['div', {
+    'data-component': 'task-item-main'
+  }, ['span', {
+    contenteditable: 'false',
+    class: "".concat(_styles.TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER),
+    'data-component': 'task-item-input-wrap'
+  }, ['input', _objectSpread(_objectSpread({}, inputAttrs), {}, {
+    'data-input-type': 'task-item',
+    'data-task-input': true,
+    'data-testid': 'task-item-checkbox',
+    'data-component': 'task-item-input',
+    role: 'checkbox'
+  })], ['span', {
+    'aria-hidden': true,
+    'data-component': 'checkbox-icon-wrap'
+  }, ['http://www.w3.org/2000/svg svg', {
+    viewBox: "0 0 16 16",
+    width: '16',
+    height: '16',
+    role: 'presentation',
+    fill: 'none',
+    'data-component': 'checkbox-unchecked-icon'
+  }, ['http://www.w3.org/2000/svg rect', {
+    width: '12.5',
+    height: '12.5',
+    x: '1.75',
+    y: '1.75',
+    stroke: 'currentcolor',
+    'stroke-width': '1.5',
+    rx: '1.25'
+  }]], ['http://www.w3.org/2000/svg svg', {
+    viewBox: "0 0 16 16",
+    width: '16',
+    height: '16',
+    role: 'presentation',
+    fill: 'none',
+    'data-component': 'checkbox-checked-icon'
+  }, ['http://www.w3.org/2000/svg path', {
+    fill: 'currentcolor',
+    'fill-rule': 'evenodd',
+    'clip-rule': 'evenodd',
+    d: 'M3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm9.326 4.48-1.152-.96L6.75 9.828 4.826 7.52l-1.152.96 2.5 3a.75.75 0 0 0 1.152 0z'
+  }]]]], ['span', {
+    class: 'placeholder-node-view',
+    'data-testid': 'task-decision-item-placeholder',
+    'data-component': 'placeholder',
+    contenteditable: 'false'
+  }, placeholder], ['div', {
+    'data-component': 'content'
+  }, ['div', {
+    class: _styles.TaskDecisionSharedCssClassName.TASK_ITEM
+  }, 0]]]];
+}
+var lazyTaskItemToDom = exports.lazyTaskItemToDom = function lazyTaskItemToDom(node) {
+  var checked = node.attrs.state === 'DONE';
+  var inputAttrs = {
+    name: node.attrs.localId,
+    id: node.attrs.localId,
+    type: 'checkbox'
+  };
+  if (checked) {
+    inputAttrs.checked = 'true';
+  }
+  var dataAttrs = {
+    'data-task-local-id': node.attrs.localId,
+    'data-task-state': node.attrs.state
+  };
+  return ['div', _objectSpread(_objectSpread({
+    class: _styles.TaskDecisionSharedCssClassName.TASK_CONTAINER
+  }, dataAttrs), {}, {
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      listStyleType: 'none',
+      lineHeight: '24px',
+      minWidth: '48px',
+      position: 'relative'
+    })
+  }), ['div', {
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      display: 'flex'
+    })
+  }, ['span', {
+    contenteditable: 'false',
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      width: '24px',
+      height: '24px',
+      lineHeight: '24px',
+      display: 'grid',
+      placeContent: 'center center'
+    })
+  }, ['input', _objectSpread(_objectSpread({}, inputAttrs), {}, {
+    'data-input-type': 'lazy-task-item',
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      width: '13px',
+      height: '13px',
+      margin: '1px 0 0 0',
+      padding: 0,
+      accentColor: "var(--ds-background-selected-bold, #0C66E4)"
+    })
+  })]], ['div', {
+    'data-component': 'content'
+  }, ['div', {
+    class: _styles.TaskDecisionSharedCssClassName.TASK_ITEM,
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      display: 'block',
+      fontSize: '16px',
+      fontFamily: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+      color: "var(--ds-text, #172B4D)"
+    })
+  }, 0]]]];
+};

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.setProvider = exports.focusTaskDecision = void 0;
+exports.setProvider = exports.openRequestEditPopup = exports.focusTaskDecision = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@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) { (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; }
@@ -17,4 +17,9 @@ var setProvider = exports.setProvider = function setProvider(state, action) {
   return _objectSpread(_objectSpread({}, state), {}, {
     taskDecisionProvider: action.data
   });
+};
+var openRequestEditPopup = exports.openRequestEditPopup = function openRequestEditPopup(state, action) {
+  return _objectSpread(_objectSpread({}, state), {}, {
+    openRequestToEditPopupAt: action.data
+  });
 };

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.closeRequestEditPopupAt = closeRequestEditPopupAt;
 exports.findFirstParentListNode = findFirstParentListNode;
+exports.focusCheckbox = focusCheckbox;
 exports.focusCheckboxAndUpdateSelection = focusCheckboxAndUpdateSelection;
 exports.getAllTaskItemsDataInRootTaskList = getAllTaskItemsDataInRootTaskList;
 exports.getCurrentIndentLevel = exports.getBlockRange = void 0;
@@ -11,6 +13,7 @@ exports.getCurrentTaskItemIndex = getCurrentTaskItemIndex;
 exports.getTaskItemDataAtPos = getTaskItemDataAtPos;
 exports.getTaskItemDataToFocus = getTaskItemDataToFocus;
 exports.liftBlock = exports.isTable = exports.isInsideTaskOrDecisionItem = exports.isInsideTask = exports.isInsideDecision = exports.isEmptyTaskDecision = exports.isActionOrDecisionList = exports.isActionOrDecisionItem = exports.getTaskItemIndex = void 0;
+exports.openRequestEditPopupAt = openRequestEditPopupAt;
 exports.removeCheckboxFocus = removeCheckboxFocus;
 exports.walkOut = exports.subtreeHeight = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
@@ -275,13 +278,25 @@ function getTaskItemDataToFocus(view, direction) {
     localId: taskItemToFocus.node.attrs.localId
   };
 }
+function focusCheckbox(view, taskItemData) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var tr = state.tr;
+  if (taskItemData) {
+    tr.setMeta(_pluginKey.stateKey, {
+      action: _types.ACTIONS.FOCUS_BY_LOCALID,
+      data: taskItemData.localId
+    });
+    dispatch(tr);
+  }
+}
 function focusCheckboxAndUpdateSelection(view, taskItemData) {
   var pos = taskItemData.pos,
     localId = taskItemData.localId;
   var state = view.state,
     dispatch = view.dispatch;
-  var doc = state.doc,
-    tr = state.tr;
+  var doc = state.doc;
+  var tr = state.tr;
   tr.setSelection(new _state.TextSelection(doc.resolve(pos + 1)));
   tr.setMeta(_pluginKey.stateKey, {
     action: _types.ACTIONS.FOCUS_BY_LOCALID,
@@ -298,6 +313,24 @@ function removeCheckboxFocus(view) {
     action: _types.ACTIONS.FOCUS_BY_LOCALID
   }));
 }
+function openRequestEditPopupAt(view, pos) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var tr = state.tr;
+  dispatch(tr.setMeta(_pluginKey.stateKey, {
+    action: _types.ACTIONS.OPEN_REQUEST_TO_EDIT_POPUP,
+    data: pos
+  }));
+}
+function closeRequestEditPopupAt(view) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var tr = state.tr;
+  dispatch(tr.setMeta(_pluginKey.stateKey, {
+    action: _types.ACTIONS.OPEN_REQUEST_TO_EDIT_POPUP,
+    data: null
+  }));
+}
 function findFirstParentListNode($pos) {
   var currentNode = $pos.doc.nodeAt($pos.pos);
   var listNodePosition = null;

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

@@ -17,7 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decisionLazyNodeView = require("../nodeviews/decision-lazy-node-view");
 var _DecisionItemVanilla = require("../nodeviews/DecisionItemVanilla");
-var _taskLazyNodeView = require("../nodeviews/task-lazy-node-view");
+var _taskNodeView = require("../nodeviews/task-node-view");
 var _actions = require("./actions");
 var _helpers = require("./helpers");
 var _pluginKey = require("./plugin-key");
@@ -42,7 +42,7 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
   return new _safePlugin.SafePlugin({
     props: {
       nodeViews: {
-        taskItem: (0, _taskLazyNodeView.lazyTaskView)(portalProviderAPI, eventDispatcher, providerFactory, api, taskPlaceholder),
+        taskItem: (0, _taskNodeView.taskView)(portalProviderAPI, eventDispatcher, providerFactory, api, getIntl(), taskPlaceholder),
         decisionItem: function (node, view, getPos, decorations, innerDecorations) {
           if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
             exposure: true
@@ -70,7 +70,7 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
         }
         return false;
       },
-      handleClickOn: (0, _selection.createSelectionClickHandler)(['decisionItem'], function (target) {
+      handleClickOn: (0, _selection.createSelectionClickHandler)(['decisionItem', 'taskItem'], function (target) {
         return target.hasAttribute('data-decision-wrapper') || target.getAttribute('aria-label') === 'Decision';
       }, {
         useLongPressSelection: useLongPressSelection
@@ -81,8 +81,7 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
         change: _taskItemOnChange.taskItemOnChange
       },
       handleKeyDown: function handleKeyDown(view, event) {
-        var state = view.state,
-          dispatch = view.dispatch;
+        var state = view.state;
         var selection = state.selection,
           schema = state.schema;
         var $from = selection.$from,
@@ -140,16 +139,12 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
             }
           }
         }
-
         // If left arrow key is pressed and cursor is at first position in task-item
         //  then focus checkbox and DON'T proceed with default keyboard handler
         if (event.key === 'ArrowLeft' && parentOffset === 0) {
           // here we are not using focusCheckboxAndUpdateSelection() method
           // because it is working incorretly when we are placing is inside the nested items
-          dispatch(state.tr.setMeta(_pluginKey.stateKey, {
-            action: _types.ACTIONS.FOCUS_BY_LOCALID,
-            data: currentTaskItemData === null || currentTaskItemData === void 0 ? void 0 : currentTaskItemData.localId
-          }));
+          (0, _helpers.focusCheckbox)(view, currentTaskItemData);
           return true;
         }
         if (event.key === 'ArrowRight') {
@@ -213,6 +208,12 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
               data: data
             });
             break;
+          case _types.ACTIONS.OPEN_REQUEST_TO_EDIT_POPUP:
+            newPluginState = (0, _actions.openRequestEditPopup)(newPluginState, {
+              action: _types.ACTIONS.OPEN_REQUEST_TO_EDIT_POPUP,
+              data: data
+            });
+            break;
         }
 
         // Commands
@@ -273,6 +274,28 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
         return tr.setMeta('addToHistory', false);
       }
       return;
+    },
+    view: function view() {
+      return {
+        update: function update(view, prevState) {
+          var pluginState = _pluginKey.stateKey.getState(view.state);
+          var prevPluginState = _pluginKey.stateKey.getState(prevState);
+          if (pluginState.focusedTaskItemLocalId === prevPluginState.focusedTaskItemLocalId) {
+            return;
+          }
+          var taskItem = (0, _helpers.getTaskItemDataAtPos)(view);
+          if (!taskItem) {
+            return;
+          }
+          if (pluginState.focusedTaskItemLocalId === taskItem.localId) {
+            var taskElement = view.nodeDOM(taskItem.pos);
+            if (taskElement instanceof HTMLElement) {
+              var _taskElement$querySel;
+              taskElement === null || taskElement === void 0 || (_taskElement$querySel = taskElement.querySelector('input')) === null || _taskElement$querySel === void 0 || _taskElement$querySel.focus();
+            }
+          }
+        }
+      };
     }
   });
 }

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

@@ -7,6 +7,7 @@ exports.ACTIONS = void 0;
 var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["SET_PROVIDER"] = 0] = "SET_PROVIDER";
   ACTIONS[ACTIONS["FOCUS_BY_LOCALID"] = 1] = "FOCUS_BY_LOCALID";
+  ACTIONS[ACTIONS["OPEN_REQUEST_TO_EDIT_POPUP"] = 2] = "OPEN_REQUEST_TO_EDIT_POPUP";
   return ACTIONS;
 }({}); // actions
 // commands