@atlaskit/editor-plugin-tasks-and-decisions 0.1.0 → 0.2.0

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

@@ -0,0 +1,316 @@
+import { findFarthestParentNode } from '@atlaskit/editor-common/utils';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { liftTarget } from '@atlaskit/editor-prosemirror/transform';
+import { findParentNodeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { stateKey } from './plugin-key';
+import { ACTIONS } from './types';
+export const isInsideTaskOrDecisionItem = state => {
+  const {
+    decisionItem,
+    taskItem
+  } = state.schema.nodes;
+  return hasParentNodeOfType([decisionItem, taskItem])(state.selection);
+};
+export const isActionOrDecisionList = node => {
+  const {
+    taskList,
+    decisionList
+  } = node.type.schema.nodes;
+  return [taskList, decisionList].indexOf(node.type) > -1;
+};
+export const isActionOrDecisionItem = node => {
+  const {
+    taskItem,
+    decisionItem
+  } = node.type.schema.nodes;
+  return [taskItem, decisionItem].indexOf(node.type) > -1;
+};
+export const isInsideTask = state => {
+  const {
+    taskItem
+  } = state.schema.nodes;
+  return hasParentNodeOfType([taskItem])(state.selection);
+};
+export const isInsideDecision = state => {
+  const {
+    decisionItem
+  } = state.schema.nodes;
+  return hasParentNodeOfType([decisionItem])(state.selection);
+};
+export const isTable = node => {
+  if (!node) {
+    return false;
+  }
+  const {
+    table,
+    tableHeader,
+    tableCell,
+    tableRow
+  } = node.type.schema.nodes;
+  return [table, tableHeader, tableCell, tableRow].includes(node.type);
+};
+
+/**
+ * Creates a NodeRange around the given taskItem and the following
+ * ("nested") taskList, if one exists.
+ */
+export const getBlockRange = ($from, $to) => {
+  const {
+    taskList
+  } = $from.doc.type.schema.nodes;
+  let end = $to.end();
+  const $after = $to.doc.resolve(end + 1);
+  const after = $after.nodeAfter;
+
+  // ensure the node after is actually just a sibling
+  // $to will be inside the text, so subtract one to get the taskItem it contains in
+  if (after && after.type === taskList && $after.depth === $to.depth - 1) {
+    // it was! include it in our blockRange
+    end += after.nodeSize;
+  }
+  return $from.blockRange($to.doc.resolve(end));
+};
+
+/**
+ * Finds the distance between the current $from and the root of the taskList.
+ */
+export const getCurrentIndentLevel = selection => {
+  const {
+    $from
+  } = selection;
+  const {
+    taskList
+  } = $from.doc.type.schema.nodes;
+  const furthestParent = findFarthestParentNode(node => node.type === taskList)($from);
+  if (!furthestParent) {
+    return null;
+  }
+  return $from.depth - furthestParent.depth;
+};
+
+/**
+ * Finds the index of the current task item in relation to the closest taskList
+ */
+export const getTaskItemIndex = state => {
+  const $pos = state.selection.$from;
+  const isTaskList = node => (node === null || node === void 0 ? void 0 : node.type.name) === 'taskList';
+  const itemAtPos = findParentNodeClosestToPos($pos, isTaskList);
+  return $pos.index(itemAtPos ? itemAtPos.depth : undefined);
+};
+
+/**
+ * Walk outwards from a position until we encounter the (inside) start of
+ * the next node, or reach the end of the document.
+ *
+ * @param $startPos Position to start walking from.
+ */
+export const walkOut = $startPos => {
+  let $pos = $startPos;
+
+  // invariant 1: don't walk past the end of the document
+  // invariant 2: we haven't walked to the start of *any* node
+  //              parentOffset includes textOffset.
+  while ($pos.pos < $pos.doc.nodeSize - 2 && $pos.parentOffset > 0) {
+    $pos = $pos.doc.resolve($pos.pos + 1);
+  }
+  return $pos;
+};
+
+/**
+ * Finds the height of a tree-like structure, given any position inside it.
+ *
+ * Traverses from the top of the tree to all leaf nodes, and returns the length
+ * of the longest path.
+ *
+ * This means you can use it with things like taskList, which
+ * do not nest themselves inside taskItems but rather as adjacent children.
+ *
+ * @param $pos Any position inside the tree.
+ * @param types The node types to consider traversable
+ */
+export const subtreeHeight = ($from, $to, types) => {
+  const root = findFarthestParentNode(node => types.indexOf(node.type) > -1)($from);
+  if (!root) {
+    return -1;
+  }
+
+  // get the height between the root and the current position
+  const distToParent = $from.depth - root.depth;
+
+  // include any following taskList since nested lists appear
+  // as siblings
+  //
+  // this is unlike regular bullet lists where the orderedList
+  // appears as descendent of listItem
+  const blockRange = getBlockRange($from, $to);
+  if (!blockRange) {
+    return -1;
+  }
+
+  // and get the max height from the current position to the
+  // deepest leaf node
+  let maxChildDepth = $from.depth;
+  $from.doc.nodesBetween(blockRange.start, blockRange.end, (descendent, relPos, parent) => {
+    maxChildDepth = Math.max($from.doc.resolve(relPos).depth, maxChildDepth);
+
+    // keep descending down the tree if we can
+    if (types.indexOf(descendent.type) > -1) {
+      return true;
+    }
+  });
+  return distToParent + (maxChildDepth - $from.depth);
+};
+
+/**
+ * Returns `true` if the taskItem or decisionItem has no text.
+ */
+export const isEmptyTaskDecision = state => {
+  const {
+    selection,
+    schema
+  } = state;
+  const {
+    $from
+  } = selection;
+  const node = $from.node($from.depth);
+  return node && (node.type === schema.nodes.taskItem || node.type === schema.nodes.decisionItem) && node.content.size === 0;
+};
+
+/**
+ * Lifts a taskItem and any directly following taskList
+ * (taskItem and its "nested children") out one level.
+ *
+ * @param tr Transaction to base steps on
+ * @param $from Start of range you want to lift
+ * @param $to End of range you want to lift (can be same as `$from`)
+ */
+export const liftBlock = (tr, $from, $to) => {
+  const blockRange = getBlockRange($from, $to);
+  if (!blockRange) {
+    return null;
+  }
+
+  // ensure we can actually lift
+  const target = liftTarget(blockRange);
+  if (typeof target !== 'number') {
+    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
+  }));
+}

package/dist/es2019/pm-plugins/input-rules.js

@@ -0,0 +1,91 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { canInsert } from '@atlaskit/editor-prosemirror/utils';
+import { createPlugin, createRule, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
+import { changeInDepth, getListTypes, insertTaskDecisionAction } from '../commands';
+const createListRule = editorAnalyticsAPI => (regex, listType, itemAttrs) => {
+  return createRule(regex, (state, _match, start, end) => {
+    const {
+      paragraph
+    } = state.schema.nodes;
+    const {
+      list
+    } = getListTypes(listType, state.schema);
+    const $end = state.doc.resolve(end);
+    const $endOfParent = state.doc.resolve($end.after());
+    // Only allow creating list in nodes that support them.
+    // Parent must be a paragraph as we don't want this applying to headings
+    if ($end.parent.type !== paragraph || !canInsert($endOfParent, list.createAndFill())) {
+      return null;
+    }
+    const insertTr = insertTaskDecisionAction(editorAnalyticsAPI)(state, listType, INPUT_METHOD.FORMATTING, addItem(start, end), undefined, undefined, itemAttrs);
+    return insertTr;
+  });
+};
+const addItem = (start, end) => ({
+  tr,
+  state,
+  list,
+  item,
+  listLocalId,
+  itemLocalId,
+  itemAttrs
+}) => {
+  const {
+    selection: {
+      $from
+    },
+    schema
+  } = state;
+  const {
+    hardBreak
+  } = schema.nodes;
+  const content = $from.node($from.depth).content;
+  let shouldBreakNode = false;
+  content.forEach((node, offset) => {
+    if (node.type === hardBreak && offset < start) {
+      shouldBreakNode = true;
+    }
+  });
+  if (!shouldBreakNode) {
+    tr.replaceRangeWith($from.before(), $from.after(), list.create({
+      localId: listLocalId
+    }, [item.create({
+      localId: itemLocalId,
+      ...itemAttrs
+    }, content)])).delete(start + 1, end + 1).setSelection(new TextSelection(tr.doc.resolve(start + 1)));
+  } else {
+    const depthAdjustment = changeInDepth($from, tr.selection.$from);
+    tr.split($from.pos).setSelection(new NodeSelection(tr.doc.resolve($from.pos + 1))).replaceSelectionWith(list.create({
+      localId: listLocalId
+    }, [item.create({
+      localId: itemLocalId,
+      ...itemAttrs
+    },
+    // TODO: [ts30] handle void and null properly
+    tr.doc.nodeAt($from.pos + 1).content)])).setSelection(new TextSelection(tr.doc.resolve($from.pos + depthAdjustment))).delete(start, end + 1);
+  }
+  return tr;
+};
+export const inputRulePlugin = editorAnalyticsAPI => (schema, featureFlags) => {
+  const rules = [];
+  const {
+    decisionList,
+    decisionItem,
+    taskList,
+    taskItem
+  } = schema.nodes;
+  if (decisionList && decisionItem) {
+    rules.push(createListRule(editorAnalyticsAPI)(new RegExp(`(^|${leafNodeReplacementCharacter})\\<\\>\\s$`), 'decisionList'));
+  }
+  if (taskList && taskItem) {
+    rules.push(createListRule(editorAnalyticsAPI)(new RegExp(`(^|${leafNodeReplacementCharacter})\\[\\]\\s$`), 'taskList'));
+    rules.push(createListRule(editorAnalyticsAPI)(new RegExp(`(^|${leafNodeReplacementCharacter})\\[x\\]\\s$`), 'taskList', {
+      state: 'DONE'
+    }));
+  }
+  return createPlugin('tasks-and-decisions', rules, {
+    isBlockNodeRule: true
+  });
+};
+export default inputRulePlugin;