@atlaskit/editor-core 187.43.8 → 187.43.11

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-core
 
+## 187.43.11
+
+### Patch Changes
+
+- [`65b155b2787`](https://bitbucket.org/atlassian/atlassian-frontend/commits/65b155b2787) - [ux] ED-19172: Updated tableHeaderCellBackgroundColor to use non-transparent token."
+- [`96f4e9fe6de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96f4e9fe6de) - [ux] ECA11Y-1 Added keyboard support to focus checkbox, check or uncheck, inside action item
+- [`9131a0a2ffa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9131a0a2ffa) - Extract quick-insert plugin from @atlaskit/editor-core to @atlaskit/editor-plugin-quick-insert.
+- Updated dependencies
+
 ## 187.43.8
 
 ### Patch Changes

package/dist/cjs/labs/next/presets/default.js

@@ -27,7 +27,7 @@ var _editorPluginAnalytics = require("@atlaskit/editor-plugin-analytics");
 var _editorPluginPlaceholder = require("@atlaskit/editor-plugin-placeholder");
 var _annotation = _interopRequireDefault(require("../../../plugins/annotation"));
 var _editorPluginComposition = require("@atlaskit/editor-plugin-composition");
-var _quickInsert = _interopRequireDefault(require("../../../plugins/quick-insert"));
+var _editorPluginQuickInsert = require("@atlaskit/editor-plugin-quick-insert");
 var _selection = _interopRequireDefault(require("../../../plugins/selection"));
 var _codeBlock = _interopRequireDefault(require("../../../plugins/code-block"));
 var _undoRedo = _interopRequireDefault(require("../../../plugins/undo-redo"));
@@ -74,7 +74,7 @@ function createDefaultPreset(options) {
       return builder.add([p, options.annotationProviders]);
     }
     return builder;
-  }).add([_editorPluginHyperlink.hyperlinkPlugin, options.hyperlinkOptions]).add([_editorPluginTextFormatting.textFormattingPlugin, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
+  }).add([_editorPluginHyperlink.hyperlinkPlugin, options.hyperlinkOptions]).add([_editorPluginTextFormatting.textFormattingPlugin, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_editorPluginQuickInsert.quickInsertPlugin, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
   }]).add([_editorPluginPlaceholder.placeholderPlugin, options.placeholder]).add(_editorPluginUnsupportedContent.unsupportedContentPlugin).add(_editorPluginEditorDisabled.editorDisabledPlugin).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
     appearance: 'full-page'

package/dist/cjs/plugins/index.js

@@ -257,12 +257,6 @@ Object.defineProperty(exports, "placeholderTextPlugin", {
     return _placeholderText.default;
   }
 });
-Object.defineProperty(exports, "quickInsertPlugin", {
-  enumerable: true,
-  get: function get() {
-    return _quickInsert.default;
-  }
-});
 Object.defineProperty(exports, "saveOnEnterPlugin", {
   enumerable: true,
   get: function get() {
@@ -349,7 +343,6 @@ var _mentions = _interopRequireDefault(require("./mentions"));
 var _panel = _interopRequireDefault(require("./panel"));
 var _paste = _interopRequireDefault(require("./paste"));
 var _placeholderText = _interopRequireDefault(require("./placeholder-text"));
-var _quickInsert = _interopRequireDefault(require("./quick-insert"));
 var _saveOnEnter = _interopRequireDefault(require("./save-on-enter"));
 var _submitEditor = _interopRequireDefault(require("./submit-editor"));
 var _tasksAndDecisions = _interopRequireDefault(require("./tasks-and-decisions"));

package/dist/cjs/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -131,12 +131,14 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
         plugins: {
           taskDecisionPlugin: _pluginKey.stateKey
         },
-        render: function render() {
+        render: function render(_ref) {
+          var taskDecisionPlugin = _ref.taskDecisionPlugin;
           return /*#__PURE__*/_react.default.createElement(_Task.default, {
             taskId: localId,
             contentRef: forwardRef,
             isDone: state === 'DONE',
             onChange: _this2.handleOnChange,
+            isFocused: (taskDecisionPlugin === null || taskDecisionPlugin === void 0 ? void 0 : taskDecisionPlugin.focusedTaskItemLocalId) === localId,
             showPlaceholder: _this2.isContentEmpty(_this2.node) && !(0, _utils.isTypeAheadOpen)(_this2.view.state),
             providers: props.providerFactory
           });

package/dist/cjs/plugins/tasks-and-decisions/pm-plugins/helpers.js

@@ -3,10 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.walkOut = exports.subtreeHeight = exports.liftBlock = exports.isTable = exports.isInsideTaskOrDecisionItem = exports.isInsideTask = exports.isInsideDecision = exports.isEmptyTaskDecision = exports.isActionOrDecisionList = exports.isActionOrDecisionItem = exports.getTaskItemIndex = exports.getCurrentIndentLevel = exports.getBlockRange = void 0;
+exports.focusCheckboxAndUpdateSelection = focusCheckboxAndUpdateSelection;
+exports.getAllTaskItemsDataInRootTaskList = getAllTaskItemsDataInRootTaskList;
+exports.getCurrentIndentLevel = exports.getBlockRange = void 0;
+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.removeCheckboxFocus = removeCheckboxFocus;
+exports.walkOut = exports.subtreeHeight = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("../../../utils");
+var _pluginKey = require("./plugin-key");
+var _types = require("./types");
 var isInsideTaskOrDecisionItem = function isInsideTaskOrDecisionItem(state) {
   var _state$schema$nodes = state.schema.nodes,
     decisionItem = _state$schema$nodes.decisionItem,
@@ -200,4 +211,102 @@ var liftBlock = function liftBlock(tr, $from, $to) {
   }
   return tr.lift(blockRange, target).scrollIntoView();
 };
-exports.liftBlock = liftBlock;
+exports.liftBlock = liftBlock;
+function getTaskItemDataAtPos(view) {
+  var state = view.state;
+  var selection = state.selection,
+    schema = state.schema;
+  var $from = selection.$from;
+  var isInTaskItem = $from.node().type === schema.nodes.taskItem;
+
+  // current selection has to be inside taskitem
+  if (isInTaskItem) {
+    var taskItemPos = $from.before();
+    return {
+      pos: taskItemPos,
+      localId: $from.node().attrs.localId
+    };
+  }
+}
+function getAllTaskItemsDataInRootTaskList(view) {
+  var state = view.state;
+  var schema = state.schema;
+  var $fromPos = state.selection.$from;
+  var isInTaskItem = $fromPos.node().type === schema.nodes.taskItem;
+  // if not inside task item then return undefined;
+  if (!isInTaskItem) {
+    return;
+  }
+  var _schema$nodes = schema.nodes,
+    taskList = _schema$nodes.taskList,
+    taskItem = _schema$nodes.taskItem;
+  var rootTaskListData = (0, _utils2.findFarthestParentNode)(function (node) {
+    return node.type === taskList;
+  })($fromPos);
+  if (rootTaskListData) {
+    var rootTaskList = rootTaskListData.node;
+    var rootTaskListStartPos = rootTaskListData.start;
+    var allTaskItems = [];
+    rootTaskList.descendants(function (node, pos, parent, index) {
+      if (node.type === taskItem) {
+        allTaskItems.push({
+          node: node,
+          pos: pos + rootTaskListStartPos,
+          index: index
+        });
+      }
+    });
+    return allTaskItems;
+  }
+}
+function getCurrentTaskItemIndex(view, allTaskItems) {
+  var state = view.state;
+  var $fromPos = state.selection.$from;
+  var allTaskItemNodes = allTaskItems.map(function (nodeData) {
+    return nodeData.node;
+  });
+  var currentTaskItem = $fromPos.node($fromPos.depth);
+  var currentTaskItemIndex = allTaskItemNodes.indexOf(currentTaskItem);
+  return currentTaskItemIndex;
+}
+function getTaskItemDataToFocus(view, direction) {
+  var allTaskItems = getAllTaskItemsDataInRootTaskList(view);
+  // if not inside task item then allTaskItems will be undefined;
+  if (!allTaskItems) {
+    return;
+  }
+  var currentTaskItemIndex = getCurrentTaskItemIndex(view, allTaskItems);
+  if (direction === 'next' ? currentTaskItemIndex === allTaskItems.length - 1 : currentTaskItemIndex === 0) {
+    // checkbox of first or last task item is already focused based on direction.
+    return;
+  }
+  var indexOfTaskItemToFocus = direction === 'next' ? currentTaskItemIndex + 1 : currentTaskItemIndex - 1;
+  var taskItemToFocus = allTaskItems[indexOfTaskItemToFocus];
+  return {
+    pos: taskItemToFocus.pos,
+    localId: taskItemToFocus.node.attrs.localId
+  };
+}
+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;
+  tr.setSelection(new _state.TextSelection(doc.resolve(pos + 1)));
+  tr.setMeta(_pluginKey.stateKey, {
+    action: _types.ACTIONS.FOCUS_BY_LOCALID,
+    data: localId
+  });
+  dispatch(tr);
+}
+function removeCheckboxFocus(view) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var tr = state.tr;
+  view.focus();
+  dispatch(tr.setMeta(_pluginKey.stateKey, {
+    action: _types.ACTIONS.FOCUS_BY_LOCALID
+  }));
+}

package/dist/cjs/plugins/tasks-and-decisions/pm-plugins/main.js

@@ -15,18 +15,17 @@ var _utils2 = require("../../selection/utils");
 var _decisionItem = require("../nodeviews/decisionItem");
 var _taskItem = require("../nodeviews/taskItem");
 var _pluginKey = require("./plugin-key");
+var _helpers = require("./helpers");
+var _selection = require("@atlaskit/editor-common/selection");
+var _types = require("./types");
 var _excluded = ["localId"];
 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 ACTIONS = /*#__PURE__*/function (ACTIONS) {
-  ACTIONS[ACTIONS["SET_CONTEXT_PROVIDER"] = 0] = "SET_CONTEXT_PROVIDER";
-  return ACTIONS;
-}(ACTIONS || {});
 var setContextIdentifierProvider = function setContextIdentifierProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(_pluginKey.stateKey, {
-        action: ACTIONS.SET_CONTEXT_PROVIDER,
+        action: _types.ACTIONS.SET_CONTEXT_PROVIDER,
         data: provider
       }));
     }
@@ -67,7 +66,104 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
         return target.hasAttribute('data-decision-wrapper') || target.getAttribute('aria-label') === 'Decision';
       }, {
         useLongPressSelection: useLongPressSelection
-      })
+      }),
+      handleKeyDown: function handleKeyDown(view, event) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        var selection = state.selection,
+          schema = state.schema;
+        var $from = selection.$from,
+          $to = selection.$to;
+        var parentOffset = $from.parentOffset;
+        var isInTaskItem = $from.node().type === schema.nodes.taskItem;
+        var focusedTaskItemLocalId = _pluginKey.stateKey.getState(state).focusedTaskItemLocalId;
+        var currentTaskItemData = (0, _helpers.getTaskItemDataAtPos)(view);
+        var currentTaskItemFocused = focusedTaskItemLocalId === (currentTaskItemData === null || currentTaskItemData === void 0 ? void 0 : currentTaskItemData.localId);
+
+        // if task item checkbox not focused and arrow key is not pressed
+        //  then we don't want to handle event.
+        if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+          return false;
+        }
+
+        // We want to handle arrow up, down and left key only
+        //  when selection is inside task item and no text is selected.
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft'].includes(event.key) && (!isInTaskItem || $from.pos !== $to.pos)) {
+          return false;
+        }
+
+        // Arrow keys are pressed and shift, ctrl or meta is pressed as well.
+        //  along with arrow keys and task item checkbox is focused
+        //  then first move focus to view and proceed with default event handling.
+        if (event.shiftKey || event.ctrlKey || event.metaKey) {
+          currentTaskItemFocused && (0, _helpers.removeCheckboxFocus)(view);
+          return false;
+        }
+
+        // task item checkbox is already focused
+        if (focusedTaskItemLocalId) {
+          if (event.key === 'ArrowLeft') {
+            // Move focus to view and proceed with default keyboard handler.
+            // Which will move cursor to previous position.
+            (0, _helpers.removeCheckboxFocus)(view);
+            return false;
+          }
+          if (event.key === 'ArrowRight') {
+            // Move focus to view and DON'T proceed with default handler.
+            // We have assumed that selection is already before first character of task item.
+            (0, _helpers.removeCheckboxFocus)(view);
+            return true;
+          }
+          if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            var taskItemData = (0, _helpers.getTaskItemDataToFocus)(view, event.key === 'ArrowUp' ? 'previous' : 'next');
+            if (taskItemData) {
+              (0, _helpers.focusCheckboxAndUpdateSelection)(view, taskItemData);
+              return true;
+            } else {
+              // If any how checkbox input not found, then move focus to view
+              //  and proceed with default keyboard handler.
+              (0, _helpers.removeCheckboxFocus)(view);
+              return false;
+            }
+          }
+        }
+
+        // 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
+          }));
+          return true;
+        }
+        if (event.key === 'ArrowRight') {
+          var _$from$nodeAfter;
+          // If gap cursor is just before task list then focus first task item in list.
+          if (selection instanceof _selection.GapCursorSelection && selection.side === 'left' && ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type) === schema.nodes.taskList) {
+            var taskList = $from.nodeAfter;
+            var firstTaskItemNode = taskList.child(0);
+            var taskItemPos = $from.pos + 1;
+            (0, _helpers.focusCheckboxAndUpdateSelection)(view, {
+              pos: taskItemPos,
+              localId: firstTaskItemNode.attrs.localId
+            });
+            return true;
+          }
+          // if cursor is at then end of task item text then focus next task item checkbox
+          else if (isInTaskItem && $from.node().content.size === parentOffset) {
+            var nextTaskItemData = (0, _helpers.getTaskItemDataToFocus)(view, 'next');
+            if (nextTaskItemData) {
+              (0, _helpers.focusCheckboxAndUpdateSelection)(view, nextTaskItemData);
+              return true;
+            }
+          } else {
+            return false;
+          }
+        }
+      }
     },
     state: {
       init: function init() {
@@ -84,11 +180,16 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
           data = _ref.data;
         var newPluginState = pluginState;
         switch (action) {
-          case ACTIONS.SET_CONTEXT_PROVIDER:
+          case _types.ACTIONS.SET_CONTEXT_PROVIDER:
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               contextIdentifierProvider: data
             });
             break;
+          case _types.ACTIONS.FOCUS_BY_LOCALID:
+            newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              focusedTaskItemLocalId: data
+            });
+            break;
         }
         dispatch(_pluginKey.stateKey, newPluginState);
         return newPluginState;

package/dist/cjs/plugins/tasks-and-decisions/pm-plugins/types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ACTIONS = void 0;
+var ACTIONS = /*#__PURE__*/function (ACTIONS) {
+  ACTIONS[ACTIONS["SET_CONTEXT_PROVIDER"] = 0] = "SET_CONTEXT_PROVIDER";
+  ACTIONS[ACTIONS["FOCUS_BY_LOCALID"] = 1] = "FOCUS_BY_LOCALID";
+  return ACTIONS;
+}({});
+exports.ACTIONS = ACTIONS;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.43.8";
+var version = "187.43.11";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/labs/next/presets/default.js

@@ -21,7 +21,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { placeholderPlugin } from '@atlaskit/editor-plugin-placeholder';
 import annotationPlugin from '../../../plugins/annotation';
 import { compositionPlugin } from '@atlaskit/editor-plugin-composition';
-import quickInsertPlugin from '../../../plugins/quick-insert';
+import { quickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
 import selectionPlugin from '../../../plugins/selection';
 import codeBlockPlugin from '../../../plugins/code-block';
 import undoRedoPlugin from '../../../plugins/undo-redo';

package/dist/es2019/plugins/index.js

@@ -18,7 +18,6 @@ export { default as mentionsPlugin } from './mentions';
 export { default as panelPlugin } from './panel';
 export { default as pastePlugin } from './paste';
 export { default as placeholderTextPlugin } from './placeholder-text';
-export { default as quickInsertPlugin } from './quick-insert';
 export { default as saveOnEnterPlugin } from './save-on-enter';
 export { default as submitEditorPlugin } from './submit-editor';
 export { default as tasksAndDecisionsPlugin } from './tasks-and-decisions';

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -102,12 +102,15 @@ class Task extends ReactNodeView {
       plugins: {
         taskDecisionPlugin: taskPluginKey
       },
-      render: () => {
+      render: ({
+        taskDecisionPlugin
+      }) => {
         return /*#__PURE__*/React.createElement(TaskItem, {
           taskId: localId,
           contentRef: forwardRef,
           isDone: state === 'DONE',
           onChange: this.handleOnChange,
+          isFocused: (taskDecisionPlugin === null || taskDecisionPlugin === void 0 ? void 0 : taskDecisionPlugin.focusedTaskItemLocalId) === localId,
           showPlaceholder: this.isContentEmpty(this.node) && !isTypeAheadOpen(this.view.state),
           providers: props.providerFactory
         });

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/helpers.js

@@ -1,6 +1,9 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { liftTarget } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findFarthestParentNode } from '../../../utils';
+import { stateKey } from './plugin-key';
+import { ACTIONS } from './types';
 export const isInsideTaskOrDecisionItem = state => {
   const {
     decisionItem,
@@ -193,4 +196,121 @@ export const liftBlock = (tr, $from, $to) => {
     return null;
   }
   return tr.lift(blockRange, target).scrollIntoView();
-};
+};
+export function getTaskItemDataAtPos(view) {
+  const {
+    state
+  } = view;
+  const {
+    selection,
+    schema
+  } = state;
+  const {
+    $from
+  } = selection;
+  const isInTaskItem = $from.node().type === schema.nodes.taskItem;
+
+  // current selection has to be inside taskitem
+  if (isInTaskItem) {
+    const taskItemPos = $from.before();
+    return {
+      pos: taskItemPos,
+      localId: $from.node().attrs.localId
+    };
+  }
+}
+export function getAllTaskItemsDataInRootTaskList(view) {
+  const {
+    state
+  } = view;
+  const {
+    schema
+  } = state;
+  const $fromPos = state.selection.$from;
+  const isInTaskItem = $fromPos.node().type === schema.nodes.taskItem;
+  // if not inside task item then return undefined;
+  if (!isInTaskItem) {
+    return;
+  }
+  const {
+    taskList,
+    taskItem
+  } = schema.nodes;
+  const rootTaskListData = findFarthestParentNode(node => node.type === taskList)($fromPos);
+  if (rootTaskListData) {
+    const rootTaskList = rootTaskListData.node;
+    const rootTaskListStartPos = rootTaskListData.start;
+    const allTaskItems = [];
+    rootTaskList.descendants((node, pos, parent, index) => {
+      if (node.type === taskItem) {
+        allTaskItems.push({
+          node,
+          pos: pos + rootTaskListStartPos,
+          index
+        });
+      }
+    });
+    return allTaskItems;
+  }
+}
+export function getCurrentTaskItemIndex(view, allTaskItems) {
+  const {
+    state
+  } = view;
+  const $fromPos = state.selection.$from;
+  const allTaskItemNodes = allTaskItems.map(nodeData => nodeData.node);
+  const currentTaskItem = $fromPos.node($fromPos.depth);
+  const currentTaskItemIndex = allTaskItemNodes.indexOf(currentTaskItem);
+  return currentTaskItemIndex;
+}
+export function getTaskItemDataToFocus(view, direction) {
+  const allTaskItems = getAllTaskItemsDataInRootTaskList(view);
+  // if not inside task item then allTaskItems will be undefined;
+  if (!allTaskItems) {
+    return;
+  }
+  const currentTaskItemIndex = getCurrentTaskItemIndex(view, allTaskItems);
+  if (direction === 'next' ? currentTaskItemIndex === allTaskItems.length - 1 : currentTaskItemIndex === 0) {
+    // checkbox of first or last task item is already focused based on direction.
+    return;
+  }
+  const indexOfTaskItemToFocus = direction === 'next' ? currentTaskItemIndex + 1 : currentTaskItemIndex - 1;
+  const taskItemToFocus = allTaskItems[indexOfTaskItemToFocus];
+  return {
+    pos: taskItemToFocus.pos,
+    localId: taskItemToFocus.node.attrs.localId
+  };
+}
+export function focusCheckboxAndUpdateSelection(view, taskItemData) {
+  const {
+    pos,
+    localId
+  } = taskItemData;
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    doc,
+    tr
+  } = state;
+  tr.setSelection(new TextSelection(doc.resolve(pos + 1)));
+  tr.setMeta(stateKey, {
+    action: ACTIONS.FOCUS_BY_LOCALID,
+    data: localId
+  });
+  dispatch(tr);
+}
+export function removeCheckboxFocus(view) {
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    tr
+  } = state;
+  view.focus();
+  dispatch(tr.setMeta(stateKey, {
+    action: ACTIONS.FOCUS_BY_LOCALID
+  }));
+}