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

package/dist/es2019/nodeviews/decisionItem.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import DecisionItem from '../ui/Decision';
+import { useShowPlaceholder } from './hooks/use-show-placeholder';
+const DecisionItemWrapper = ({
+  api,
+  editorView,
+  forwardRef,
+  isContentNodeEmpty,
+  getPos
+}) => {
+  const showPlaceholder = useShowPlaceholder({
+    editorView,
+    isContentNodeEmpty,
+    getPos,
+    api
+  });
+  return /*#__PURE__*/React.createElement(DecisionItem, {
+    contentRef: forwardRef,
+    showPlaceholder: showPlaceholder
+  });
+};
+class Decision extends ReactNodeView {
+  isContentEmpty(node) {
+    return node.content.childCount === 0;
+  }
+  initWithAPI(api) {
+    this.api = api;
+    this.init();
+    return this;
+  }
+  createDomRef() {
+    const domRef = document.createElement('li');
+    domRef.style.listStyleType = 'none';
+    return domRef;
+  }
+  getContentDOM() {
+    const dom = document.createElement('div');
+    // setting a className prevents PM/Chrome mutation observer from
+    // incorrectly deleting nodes
+    dom.className = 'decision-item';
+    return {
+      dom
+    };
+  }
+  render(_props, forwardRef) {
+    const isContentNodeEmpty = this.isContentEmpty(this.node);
+    return /*#__PURE__*/React.createElement(DecisionItemWrapper, {
+      forwardRef: forwardRef,
+      isContentNodeEmpty: isContentNodeEmpty,
+      api: this.api
+      // The getPosHandler type is wrong, there is no `boolean` in the real implementation
+      // @ts-expect-error 2322: Type 'getPosHandler' is not assignable to type '() => number | undefined'.
+      ,
+      getPos: this.getPos,
+      editorView: this.view
+    });
+  }
+  viewShouldUpdate(nextNode) {
+    /**
+     * To ensure the placeholder is correctly toggled we need to allow react to re-render
+     * on first character insertion.
+     * Note: last character deletion is handled externally and automatically re-renders.
+     */
+    return this.isContentEmpty(this.node) && !!nextNode.content.childCount;
+  }
+  update(node, decorations) {
+    return super.update(node, decorations, undefined,
+    // Toggle the placeholder based on whether user input exists.
+    (_currentNode, _newNode) => !this.isContentEmpty(_newNode));
+  }
+}
+export const decisionItemNodeView = (portalProviderAPI, eventDispatcher, api) => (node, view, getPos) => {
+  const hasIntlContext = true;
+  return new Decision(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).initWithAPI(api);
+};

package/dist/es2019/nodeviews/hooks/use-show-placeholder.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const useShowPlaceholder = ({
+  editorView,
+  api,
+  isContentNodeEmpty,
+  getPos
+}) => {
+  const {
+    typeAheadState
+  } = useSharedPluginState(api, ['typeAhead']);
+  const isTypeAheadOpen = Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen);
+  const isTypeAheadOpenedInsideItem = useMemo(() => {
+    var _selection$$cursor;
+    if (!isTypeAheadOpen) {
+      return false;
+    }
+    const itemPosition = getPos();
+    if (typeof itemPosition !== 'number') {
+      return false;
+    }
+    const selection = editorView.state.selection;
+    if (!(selection instanceof TextSelection)) {
+      return false;
+    }
+    const maybeItemNode = editorView.state.doc.nodeAt(itemPosition);
+    const maybeParentItemNode = (_selection$$cursor = selection.$cursor) === null || _selection$$cursor === void 0 ? void 0 : _selection$$cursor.node();
+    if (maybeItemNode && maybeParentItemNode && maybeItemNode.eq(maybeParentItemNode)) {
+      return true;
+    }
+    return false;
+  }, [isTypeAheadOpen, getPos, editorView]);
+  const showPlaceholder = Boolean(!isTypeAheadOpenedInsideItem && isContentNodeEmpty);
+  return showPlaceholder;
+};

package/dist/es2019/nodeviews/taskItem.js

@@ -0,0 +1,173 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { AnalyticsListener } from '@atlaskit/analytics-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import TaskItem from '../ui/Task';
+import { useShowPlaceholder } from './hooks/use-show-placeholder';
+const TaskItemWrapper = ({
+  localId,
+  forwardRef,
+  isDone,
+  onChange,
+  providerFactory,
+  isContentNodeEmpty,
+  api,
+  getPos,
+  editorView
+}) => {
+  const {
+    taskDecisionState
+  } = useSharedPluginState(api, ['taskDecision']);
+  const isFocused = Boolean((taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.focusedTaskItemLocalId) === localId);
+  const showPlaceholder = useShowPlaceholder({
+    editorView,
+    isContentNodeEmpty,
+    getPos,
+    api
+  });
+  return /*#__PURE__*/React.createElement(TaskItem, {
+    taskId: localId,
+    contentRef: forwardRef,
+    isDone: isDone,
+    onChange: onChange,
+    isFocused: isFocused,
+    showPlaceholder: showPlaceholder,
+    providers: providerFactory
+  });
+};
+class Task extends ReactNodeView {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleOnChange", (taskId, isChecked) => {
+      const {
+        tr
+      } = this.view.state;
+      const nodePos = this.getPos();
+      if (typeof nodePos !== 'number') {
+        return false;
+      }
+
+      // 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 SetAttrsStep(nodePos, {
+        state: isChecked ? 'DONE' : 'TODO',
+        localId: taskId
+      }));
+      tr.setMeta('scrollIntoView', false);
+      this.view.dispatch(tr);
+    });
+    /**
+     * Dynamically generates analytics data relating to the parent list.
+     *
+     * Required to be dynamic, as list (in prosemirror model) may have
+     * changed (e.g. item movements, or additional items in list).
+     * This node view will have not rerendered for those changes, so
+     * cannot render the position and listSize into the
+     * AnalyticsContext at initial render time.
+     */
+    _defineProperty(this, "addListAnalyticsData", event => {
+      try {
+        const nodePos = this.getPos();
+        if (typeof nodePos !== 'number') {
+          return false;
+        }
+        const resolvedPos = this.view.state.doc.resolve(nodePos);
+        const position = resolvedPos.index();
+        const listSize = resolvedPos.parent.childCount;
+        const listLocalId = resolvedPos.parent.attrs.localId;
+        event.update(payload => {
+          const {
+            attributes = {},
+            actionSubject
+          } = payload;
+          if (actionSubject !== 'action') {
+            // Not action related, ignore
+            return payload;
+          }
+          return {
+            ...payload,
+            attributes: {
+              ...attributes,
+              position,
+              listSize,
+              listLocalId
+            }
+          };
+        });
+      } catch (e) {
+        // This can occur if pos is NaN (seen it in some test cases)
+        // Act defensively here, and lose some analytics data rather than
+        // cause any user facing error.
+      }
+    });
+  }
+  initWithAPI(api) {
+    this.api = api;
+    this.init();
+    return this;
+  }
+  isContentEmpty(node) {
+    return node.content.childCount === 0;
+  }
+  createDomRef() {
+    const domRef = document.createElement('div');
+    domRef.style.listStyleType = 'none';
+    return domRef;
+  }
+  getContentDOM() {
+    const dom = document.createElement('div');
+    // setting a className prevents PM/Chrome mutation observer from
+    // incorrectly deleting nodes
+    dom.className = 'task-item';
+    return {
+      dom
+    };
+  }
+  render(props, forwardRef) {
+    const {
+      localId,
+      state
+    } = this.node.attrs;
+    const isContentNodeEmpty = this.isContentEmpty(this.node);
+    return /*#__PURE__*/React.createElement(AnalyticsListener, {
+      channel: "fabric-elements",
+      onEvent: this.addListAnalyticsData
+    }, /*#__PURE__*/React.createElement(TaskItemWrapper, {
+      localId: localId,
+      forwardRef: forwardRef,
+      isDone: state === 'DONE',
+      onChange: this.handleOnChange,
+      isContentNodeEmpty: isContentNodeEmpty,
+      providerFactory: props.providerFactory
+      // The getPosHandler type is wrong, there is no `boolean` in the real implementation
+      // @ts-expect-error 2322: Type 'getPosHandler' is not assignable to type '() => number | undefined'.
+      ,
+      getPos: this.getPos,
+      editorView: this.view,
+      api: this.api
+    }));
+  }
+  viewShouldUpdate(nextNode) {
+    /**
+     * To ensure the placeholder is correctly toggled we need to allow react to re-render
+     * on first character insertion.
+     * Note: last character deletion is handled externally and automatically re-renders.
+     */
+    return this.isContentEmpty(this.node) && !!nextNode.content.childCount;
+  }
+  update(node, decorations) {
+    return super.update(node, decorations, undefined, (currentNode, newNode) =>
+    // Toggle the placeholder based on whether user input exists
+    !this.isContentEmpty(newNode) && !!(currentNode.attrs.state === newNode.attrs.state));
+  }
+}
+export function taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api) {
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new Task(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory
+    }, undefined, undefined, undefined, hasIntlContext).initWithAPI(api);
+  };
+}

package/dist/es2019/plugin.js

@@ -0,0 +1,154 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { decisionItem, decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { MAX_INDENTATION_LEVEL } from '@atlaskit/editor-common/indentation';
+import { toolbarInsertBlockMessages as insertBlockMessages } from '@atlaskit/editor-common/messages';
+import { IconAction, IconDecision } from '@atlaskit/editor-common/quick-insert';
+import { getListTypes, insertTaskDecisionAction, insertTaskDecisionCommand } from './commands';
+import { getCurrentIndentLevel, getTaskItemIndex, isInsideTask } from './pm-plugins/helpers';
+import inputRulePlugin from './pm-plugins/input-rules';
+import keymap, { getIndentCommand, getUnindentCommand } from './pm-plugins/keymaps';
+import { createPlugin } from './pm-plugins/main';
+import { stateKey as taskPluginKey } from './pm-plugins/plugin-key';
+import ToolbarDecision from './ui/ToolbarDecision';
+import ToolbarTask from './ui/ToolbarTask';
+const taskDecisionToolbarGroupStyles = css({
+  display: 'flex'
+});
+const addItem = (insert, listType, schema) => ({
+  listLocalId,
+  itemLocalId
+}) => {
+  const {
+    list,
+    item
+  } = getListTypes(listType, schema);
+  return insert(list.createChecked({
+    localId: listLocalId
+  }, item.createChecked({
+    localId: itemLocalId
+  })));
+};
+export const tasksAndDecisionsPlugin = ({
+  config: {
+    allowNestedTasks,
+    consumeTabs,
+    useLongPressSelection
+  } = {},
+  api
+}) => {
+  var _api$analytics, _api$analytics2, _api$analytics3;
+  return {
+    name: 'taskDecision',
+    nodes() {
+      return [{
+        name: 'decisionList',
+        node: decisionList
+      }, {
+        name: 'decisionItem',
+        node: decisionItem
+      }, {
+        name: 'taskList',
+        node: taskList
+      }, {
+        name: 'taskItem',
+        node: taskItem
+      }];
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      const pluginState = taskPluginKey.getState(editorState);
+      const indentLevel = getCurrentIndentLevel(editorState.selection) || 0;
+      const itemIndex = getTaskItemIndex(editorState);
+      return {
+        focusedTaskItemLocalId: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.focusedTaskItemLocalId) || null,
+        isInsideTask: isInsideTask(editorState),
+        indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL,
+        outdentDisabled: indentLevel <= 1
+      };
+    },
+    actions: {
+      insertTaskDecision: insertTaskDecisionCommand(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions),
+      indentTaskList: getIndentCommand(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+      outdentTaskList: getUnindentCommand(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)
+    },
+    pmPlugins() {
+      return [{
+        name: 'tasksAndDecisions',
+        plugin: ({
+          portalProviderAPI,
+          providerFactory,
+          eventDispatcher,
+          dispatch
+        }) => {
+          return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection);
+        }
+      }, {
+        name: 'tasksAndDecisionsInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => {
+          var _api$analytics4;
+          return inputRulePlugin(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(schema, featureFlags);
+        }
+      }, {
+        name: 'tasksAndDecisionsKeyMap',
+        plugin: ({
+          schema
+        }) => keymap(schema, api, allowNestedTasks, consumeTabs)
+      } // Needs to be after "save-on-enter"
+      ];
+    },
+
+    secondaryToolbarComponent({
+      editorView,
+      disabled
+    }) {
+      return jsx("div", {
+        css: taskDecisionToolbarGroupStyles
+      }, jsx(ToolbarDecision, {
+        editorView: editorView,
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        editorAPI: api
+      }), jsx(ToolbarTask, {
+        editorView: editorView,
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        editorAPI: api
+      }));
+    },
+    pluginsOptions: {
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'action',
+        title: formatMessage(insertBlockMessages.action),
+        description: formatMessage(insertBlockMessages.actionDescription),
+        priority: 100,
+        keywords: ['checkbox', 'task', 'todo'],
+        keyshortcut: '[]',
+        icon: () => jsx(IconAction, null),
+        action(insert, state) {
+          var _api$analytics5;
+          return insertTaskDecisionAction(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(state, 'taskList', INPUT_METHOD.QUICK_INSERT, addItem(insert, 'taskList', state.schema));
+        }
+      }, {
+        id: 'decision',
+        title: formatMessage(insertBlockMessages.decision),
+        description: formatMessage(insertBlockMessages.decisionDescription),
+        priority: 900,
+        keyshortcut: '<>',
+        icon: () => jsx(IconDecision, null),
+        action(insert, state) {
+          var _api$analytics6;
+          return insertTaskDecisionAction(api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)(state, 'decisionList', INPUT_METHOD.QUICK_INSERT, addItem(insert, 'decisionList', state.schema));
+        }
+      }]
+    }
+  };
+};

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

@@ -0,0 +1,94 @@
+import { findCutBefore } from '@atlaskit/editor-common/commands';
+import { findWrapping, ReplaceAroundStep } from '@atlaskit/editor-prosemirror/transform';
+import { normalizeTaskItemsSelection } from '../utils';
+import { getBlockRange, isActionOrDecisionItem, isActionOrDecisionList, liftBlock, subtreeHeight } from './helpers';
+export const liftSelection = (state, dispatch) => {
+  const normalizedSelection = normalizeTaskItemsSelection(state.selection);
+  const {
+    $from,
+    $to
+  } = normalizedSelection;
+  const tr = liftBlock(state.tr, $from, $to);
+  if (dispatch && tr) {
+    dispatch(tr);
+  }
+  return !!tr;
+};
+export const wrapSelectionInTaskList = (state, dispatch) => {
+  const {
+    $from,
+    $to
+  } = normalizeTaskItemsSelection(state.selection);
+
+  // limit ui indentation to 6 levels
+  const {
+    taskList,
+    taskItem
+  } = state.schema.nodes;
+  const maxDepth = subtreeHeight($from, $to, [taskList, taskItem]);
+  if (maxDepth >= 6) {
+    return true;
+  }
+  const blockRange = getBlockRange($from, $to);
+  if (!blockRange) {
+    return true;
+  }
+  const wrapping = findWrapping(blockRange, state.schema.nodes.taskList);
+  if (!wrapping) {
+    return true;
+  }
+  if (dispatch) {
+    dispatch(state.tr.wrap(blockRange, wrapping).scrollIntoView());
+  }
+  return true;
+};
+
+/**
+ * Tries to move the paragraph content near the given position into the taskItem or decisionItem
+ * before it.
+ *
+ * Looks backwards from the given position to find the "cut point" between the last taskItem and the
+ * following paragraph. Then tries to move the content from that paragraph into the taskItem.
+ *
+ * @param $pos Position at the end of, or anywhere in paragraph following, the last taskItem
+ * @see {joinToPreviousListItem}
+ */
+export const joinAtCut = $pos => (state, dispatch) => {
+  const $cut = findCutBefore($pos);
+  if (!$cut) {
+    return false;
+  }
+  const {
+    paragraph
+  } = $cut.doc.type.schema.nodes;
+
+  // find the boundary between the taskList and paragraph
+  if ($cut.nodeBefore && isActionOrDecisionList($cut.nodeBefore) && $cut.nodeAfter && $cut.nodeAfter.type === paragraph) {
+    // we'll find the boundary of a taskList
+    // so resolve -1 to find the inside end of the last taskItem
+    let $lastNode = $cut.doc.resolve($cut.pos - 1);
+
+    // might have deeply nested taskList, keep trying to find it
+    while (!isActionOrDecisionItem($lastNode.parent)) {
+      $lastNode = state.doc.resolve($lastNode.pos - 1);
+    }
+
+    // grab the structure between the taskItem and the paragraph
+    // note: structure = true in ReplaceAroundStep
+    const slice = state.tr.doc.slice($lastNode.pos, $cut.pos);
+
+    // collapse the range between end of last taskItem and after the paragraph
+    // with the gap being the paragraph's content (i.e. take that content)
+    //
+    // we pass the structure we found earlier to join the p and taskItem nodes
+    //
+    // see https://prosemirror.net/docs/ref/#transform.ReplaceStep.constructor
+    // see https://prosemirror.net/docs/ref/#transform.ReplaceAroundStep.constructor
+    const tr = state.tr.step(new ReplaceAroundStep($lastNode.pos, $cut.pos + $cut.nodeAfter.nodeSize, $cut.pos + 1, $cut.pos + $cut.nodeAfter.nodeSize - 1, slice, 0, true));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};