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

package/dist/cjs/nodeviews/taskItem.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.taskItemNodeViewFactory = taskItemNodeViewFactory;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _steps = require("@atlaskit/adf-schema/steps");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _Task = _interopRequireDefault(require("../ui/Task"));
+var _useShowPlaceholder = require("./hooks/use-show-placeholder");
+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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var TaskItemWrapper = function TaskItemWrapper(_ref) {
+  var localId = _ref.localId,
+    forwardRef = _ref.forwardRef,
+    isDone = _ref.isDone,
+    onChange = _ref.onChange,
+    providerFactory = _ref.providerFactory,
+    isContentNodeEmpty = _ref.isContentNodeEmpty,
+    api = _ref.api,
+    getPos = _ref.getPos,
+    editorView = _ref.editorView;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['taskDecision']),
+    taskDecisionState = _useSharedPluginState.taskDecisionState;
+  var isFocused = Boolean((taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.focusedTaskItemLocalId) === localId);
+  var showPlaceholder = (0, _useShowPlaceholder.useShowPlaceholder)({
+    editorView: editorView,
+    isContentNodeEmpty: isContentNodeEmpty,
+    getPos: getPos,
+    api: api
+  });
+  return /*#__PURE__*/_react.default.createElement(_Task.default, {
+    taskId: localId,
+    contentRef: forwardRef,
+    isDone: isDone,
+    onChange: onChange,
+    isFocused: isFocused,
+    showPlaceholder: showPlaceholder,
+    providers: providerFactory
+  });
+};
+var Task = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(Task, _ReactNodeView);
+  var _super = _createSuper(Task);
+  function Task() {
+    var _this;
+    (0, _classCallCheck2.default)(this, Task);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (taskId, isChecked) {
+      var tr = _this.view.state.tr;
+      var 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 _steps.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.
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addListAnalyticsData", function (event) {
+      try {
+        var nodePos = _this.getPos();
+        if (typeof nodePos !== 'number') {
+          return false;
+        }
+        var resolvedPos = _this.view.state.doc.resolve(nodePos);
+        var position = resolvedPos.index();
+        var listSize = resolvedPos.parent.childCount;
+        var listLocalId = resolvedPos.parent.attrs.localId;
+        event.update(function (payload) {
+          var _payload$attributes = payload.attributes,
+            attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
+            actionSubject = payload.actionSubject;
+          if (actionSubject !== 'action') {
+            // Not action related, ignore
+            return payload;
+          }
+          return _objectSpread(_objectSpread({}, payload), {}, {
+            attributes: _objectSpread(_objectSpread({}, attributes), {}, {
+              position: position,
+              listSize: listSize,
+              listLocalId: 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.
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(Task, [{
+    key: "initWithAPI",
+    value: function initWithAPI(api) {
+      this.api = api;
+      this.init();
+      return this;
+    }
+  }, {
+    key: "isContentEmpty",
+    value: function isContentEmpty(node) {
+      return node.content.childCount === 0;
+    }
+  }, {
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      domRef.style.listStyleType = 'none';
+      return domRef;
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('div');
+      // setting a className prevents PM/Chrome mutation observer from
+      // incorrectly deleting nodes
+      dom.className = 'task-item';
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "render",
+    value: function render(props, forwardRef) {
+      var _this$node$attrs = this.node.attrs,
+        localId = _this$node$attrs.localId,
+        state = _this$node$attrs.state;
+      var isContentNodeEmpty = this.isContentEmpty(this.node);
+      return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsListener, {
+        channel: "fabric-elements",
+        onEvent: this.addListAnalyticsData
+      }, /*#__PURE__*/_react.default.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
+      }));
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function 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;
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations) {
+      var _this2 = this;
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(Task.prototype), "update", this).call(this, node, decorations, undefined, function (currentNode, newNode) {
+        return (
+          // Toggle the placeholder based on whether user input exists
+          !_this2.isContentEmpty(newNode) && !!(currentNode.attrs.state === newNode.attrs.state)
+        );
+      });
+    }
+  }]);
+  return Task;
+}(_reactNodeView.default);
+function taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api) {
+  return function (node, view, getPos) {
+    var hasIntlContext = true;
+    return new Task(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory: providerFactory
+    }, undefined, undefined, undefined, hasIntlContext).initWithAPI(api);
+  };
+}

package/dist/cjs/plugin.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tasksAndDecisionsPlugin = void 0;
+var _react = require("@emotion/react");
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _indentation = require("@atlaskit/editor-common/indentation");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _commands = require("./commands");
+var _helpers = require("./pm-plugins/helpers");
+var _inputRules = _interopRequireDefault(require("./pm-plugins/input-rules"));
+var _keymaps = _interopRequireWildcard(require("./pm-plugins/keymaps"));
+var _main = require("./pm-plugins/main");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _ToolbarDecision = _interopRequireDefault(require("./ui/ToolbarDecision"));
+var _ToolbarTask = _interopRequireDefault(require("./ui/ToolbarTask"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+var taskDecisionToolbarGroupStyles = (0, _react.css)({
+  display: 'flex'
+});
+var addItem = function addItem(insert, listType, schema) {
+  return function (_ref) {
+    var listLocalId = _ref.listLocalId,
+      itemLocalId = _ref.itemLocalId;
+    var _getListTypes = (0, _commands.getListTypes)(listType, schema),
+      list = _getListTypes.list,
+      item = _getListTypes.item;
+    return insert(list.createChecked({
+      localId: listLocalId
+    }, item.createChecked({
+      localId: itemLocalId
+    })));
+  };
+};
+var tasksAndDecisionsPlugin = exports.tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin(_ref2) {
+  var _api$analytics, _api$analytics2, _api$analytics3;
+  var _ref2$config = _ref2.config,
+    _ref2$config2 = _ref2$config === void 0 ? {} : _ref2$config,
+    allowNestedTasks = _ref2$config2.allowNestedTasks,
+    consumeTabs = _ref2$config2.consumeTabs,
+    useLongPressSelection = _ref2$config2.useLongPressSelection,
+    api = _ref2.api;
+  return {
+    name: 'taskDecision',
+    nodes: function nodes() {
+      return [{
+        name: 'decisionList',
+        node: _adfSchema.decisionList
+      }, {
+        name: 'decisionItem',
+        node: _adfSchema.decisionItem
+      }, {
+        name: 'taskList',
+        node: _adfSchema.taskList
+      }, {
+        name: 'taskItem',
+        node: _adfSchema.taskItem
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var pluginState = _pluginKey.stateKey.getState(editorState);
+      var indentLevel = (0, _helpers.getCurrentIndentLevel)(editorState.selection) || 0;
+      var itemIndex = (0, _helpers.getTaskItemIndex)(editorState);
+      return {
+        focusedTaskItemLocalId: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.focusedTaskItemLocalId) || null,
+        isInsideTask: (0, _helpers.isInsideTask)(editorState),
+        indentDisabled: itemIndex === 0 || indentLevel >= _indentation.MAX_INDENTATION_LEVEL,
+        outdentDisabled: indentLevel <= 1
+      };
+    },
+    actions: {
+      insertTaskDecision: (0, _commands.insertTaskDecisionCommand)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions),
+      indentTaskList: (0, _keymaps.getIndentCommand)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+      outdentTaskList: (0, _keymaps.getUnindentCommand)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'tasksAndDecisions',
+        plugin: function plugin(_ref3) {
+          var portalProviderAPI = _ref3.portalProviderAPI,
+            providerFactory = _ref3.providerFactory,
+            eventDispatcher = _ref3.eventDispatcher,
+            dispatch = _ref3.dispatch;
+          return (0, _main.createPlugin)(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection);
+        }
+      }, {
+        name: 'tasksAndDecisionsInputRule',
+        plugin: function plugin(_ref4) {
+          var _api$analytics4;
+          var schema = _ref4.schema,
+            featureFlags = _ref4.featureFlags;
+          return (0, _inputRules.default)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(schema, featureFlags);
+        }
+      }, {
+        name: 'tasksAndDecisionsKeyMap',
+        plugin: function plugin(_ref5) {
+          var schema = _ref5.schema;
+          return (0, _keymaps.default)(schema, api, allowNestedTasks, consumeTabs);
+        }
+      } // Needs to be after "save-on-enter"
+      ];
+    },
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref6) {
+      var editorView = _ref6.editorView,
+        disabled = _ref6.disabled;
+      return (0, _react.jsx)("div", {
+        css: taskDecisionToolbarGroupStyles
+      }, (0, _react.jsx)(_ToolbarDecision.default, {
+        editorView: editorView,
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        editorAPI: api
+      }), (0, _react.jsx)(_ToolbarTask.default, {
+        editorView: editorView,
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        editorAPI: api
+      }));
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref7) {
+        var formatMessage = _ref7.formatMessage;
+        return [{
+          id: 'action',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.action),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.actionDescription),
+          priority: 100,
+          keywords: ['checkbox', 'task', 'todo'],
+          keyshortcut: '[]',
+          icon: function icon() {
+            return (0, _react.jsx)(_quickInsert.IconAction, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics5;
+            return (0, _commands.insertTaskDecisionAction)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)(state, 'taskList', _analytics.INPUT_METHOD.QUICK_INSERT, addItem(insert, 'taskList', state.schema));
+          }
+        }, {
+          id: 'decision',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.decision),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.decisionDescription),
+          priority: 900,
+          keyshortcut: '<>',
+          icon: function icon() {
+            return (0, _react.jsx)(_quickInsert.IconDecision, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics6;
+            return (0, _commands.insertTaskDecisionAction)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)(state, 'decisionList', _analytics.INPUT_METHOD.QUICK_INSERT, addItem(insert, 'decisionList', state.schema));
+          }
+        }];
+      }
+    }
+  };
+};

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

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapSelectionInTaskList = exports.liftSelection = exports.joinAtCut = void 0;
+var _commands = require("@atlaskit/editor-common/commands");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _utils = require("../utils");
+var _helpers = require("./helpers");
+var liftSelection = exports.liftSelection = function liftSelection(state, dispatch) {
+  var normalizedSelection = (0, _utils.normalizeTaskItemsSelection)(state.selection);
+  var $from = normalizedSelection.$from,
+    $to = normalizedSelection.$to;
+  var tr = (0, _helpers.liftBlock)(state.tr, $from, $to);
+  if (dispatch && tr) {
+    dispatch(tr);
+  }
+  return !!tr;
+};
+var wrapSelectionInTaskList = exports.wrapSelectionInTaskList = function wrapSelectionInTaskList(state, dispatch) {
+  var _normalizeTaskItemsSe = (0, _utils.normalizeTaskItemsSelection)(state.selection),
+    $from = _normalizeTaskItemsSe.$from,
+    $to = _normalizeTaskItemsSe.$to;
+
+  // limit ui indentation to 6 levels
+  var _state$schema$nodes = state.schema.nodes,
+    taskList = _state$schema$nodes.taskList,
+    taskItem = _state$schema$nodes.taskItem;
+  var maxDepth = (0, _helpers.subtreeHeight)($from, $to, [taskList, taskItem]);
+  if (maxDepth >= 6) {
+    return true;
+  }
+  var blockRange = (0, _helpers.getBlockRange)($from, $to);
+  if (!blockRange) {
+    return true;
+  }
+  var wrapping = (0, _transform.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}
+ */
+var joinAtCut = exports.joinAtCut = function joinAtCut($pos) {
+  return function (state, dispatch) {
+    var $cut = (0, _commands.findCutBefore)($pos);
+    if (!$cut) {
+      return false;
+    }
+    var paragraph = $cut.doc.type.schema.nodes.paragraph;
+
+    // find the boundary between the taskList and paragraph
+    if ($cut.nodeBefore && (0, _helpers.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
+      var $lastNode = $cut.doc.resolve($cut.pos - 1);
+
+      // might have deeply nested taskList, keep trying to find it
+      while (!(0, _helpers.isActionOrDecisionItem)($lastNode.parent)) {
+        $lastNode = state.doc.resolve($lastNode.pos - 1);
+      }
+
+      // grab the structure between the taskItem and the paragraph
+      // note: structure = true in ReplaceAroundStep
+      var 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
+      var tr = state.tr.step(new _transform.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;
+  };
+};