@atlaskit/editor-plugin-tasks-and-decisions/dist/esm/nodeviews/TaskItemNodeView.js

Tasks and decisions plugin for @atlaskit/editor-core

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { bindAll } from 'bind-event-listener';
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
import { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { openRequestEditPopupAt } from '../pm-plugins/helpers';
import { taskItemToDom } from './taskItemNodeSpec';
import { isContentEmpty } from './utils';
export var TaskItemNodeView = /*#__PURE__*/function () {
  function TaskItemNodeView(node, view, getPos, _ref) {
    var _this = this;
    var api = _ref.api,
      placeholder = _ref.placeholder,
      intl = _ref.intl;
    _classCallCheck(this, TaskItemNodeView);
    _defineProperty(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') {
          openRequestEditPopupAt(_this.view, pos);
        }
        return;
      }
    });
    _defineProperty(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
      var objectAri = _this.getObjectAri();
      if (currentTaskDecisionState !== null && currentTaskDecisionState !== void 0 && currentTaskDecisionState.taskDecisionProvider && objectAri) {
        currentTaskDecisionState.taskDecisionProvider.toggleTask({
          localId: localId,
          objectAri: objectAri
        }, nextState);
      }

      // 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: nextState,
        localId: localId
      }));
      tr.setMeta('scrollIntoView', false);
      var taskItemInfoMeta = {
        checkState: nextState,
        from: nodePos,
        to: nodePos + _this.node.nodeSize
      };
      tr.setMeta('taskItemInfo', taskItemInfoMeta);
      _this.view.dispatch(tr);
    });
    this.node = node;
    this.view = view;
    this.getPos = getPos;
    this.intl = intl;
    this.api = api;
    this.view = view;
    var domPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : this.intl.formatMessage(tasksAndDecisionsMessages.taskPlaceholder);
    var _DOMSerializer$render = DOMSerializer.renderSpec(document, taskItemToDom(node, domPlaceholder, intl)),
      dom = _DOMSerializer$render.dom,
      contentDOM = _DOMSerializer$render.contentDOM;
    this.dom = dom;
    this.contentDOM = contentDOM;
    this.domElement = this.dom instanceof HTMLElement ? this.dom : undefined;
    if (this.domElement) {
      this.input = this.domElement.querySelector('input[type="checkbox"]');
      this.unbindInputDom = bindAll(this.input, [{
        type: 'click',
        listener: this.handleOnClick
      }, {
        type: 'change',
        listener: this.handleOnChange
      }]);
    }
  }
  return _createClass(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;
    }

    // Update the placeholder visibility based on content
  }, {
    key: "updatePlaceholder",
    value: function updatePlaceholder(node) {
      var currentIsContentEmpty = this.isContentEmpty(node);
      if (expValEquals('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true)) {
        currentIsContentEmpty = 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) {
      if (!expValEquals('platform_editor_prevent_taskitem_remount', 'isEnabled', true)) {
        var isValidUpdate = node.type === this.node.type && !!(node.attrs.state === this.node.attrs.state);
        if (!isValidUpdate) {
          return false;
        }
      }

      // Only return false if this is a completely different task
      if (this.node.attrs.localId !== node.attrs.localId) {
        return false;
      }
      if (expValEquals('platform_editor_prevent_taskitem_remount', 'isEnabled', true)) {
        if (node.type !== this.node.type) {
          return false;
        }
        var stateChanged = node.type === this.node.type && !!(node.attrs.state !== this.node.attrs.state);

        // Update task checkbox state to match document state.
        // It's possible the state may have changed from a collab edit and not from a checkbox click
        // so we need to update the checkbox to match.
        if (stateChanged && this.input) {
          this.input.checked = node.attrs.state === 'DONE';
        }
      }
      this.updatePlaceholder(node);
      if (this.domElement && !node.sameMarkup(this.node)) {
        this.domElement.setAttribute('data-task-state', node.attrs.state);
        this.domElement.setAttribute('data-task-local-id', node.attrs.localId);
        this.domElement.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.emptyContent = undefined;
      this.api = undefined;
    }
  }]);
}();