@atlaskit/editor-plugin-tasks-and-decisions
Version:
Tasks and decisions plugin for @atlaskit/editor-core
191 lines (185 loc) • 8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TaskItemNodeView = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _bindEventListener = require("bind-event-listener");
var _steps = require("@atlaskit/adf-schema/steps");
var _messages = require("@atlaskit/editor-common/messages");
var _model = require("@atlaskit/editor-prosemirror/model");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _helpers = require("../pm-plugins/helpers");
var _taskItemNodeSpec = require("./taskItemNodeSpec");
var _utils = require("./utils");
var TaskItemNodeView = exports.TaskItemNodeView = /*#__PURE__*/function () {
function TaskItemNodeView(node, view, getPos, _ref) {
var _this = this;
var api = _ref.api,
placeholder = _ref.placeholder,
intl = _ref.intl;
(0, _classCallCheck2.default)(this, TaskItemNodeView);
(0, _defineProperty2.default)(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') {
(0, _helpers.openRequestEditPopupAt)(_this.view, pos);
}
return;
}
});
(0, _defineProperty2.default)(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 _steps.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(_messages.tasksAndDecisionsMessages.taskPlaceholder);
var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _taskItemNodeSpec.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 = (0, _bindEventListener.bindAll)(this.input, [{
type: 'click',
listener: this.handleOnClick
}, {
type: 'change',
listener: this.handleOnChange
}]);
}
}
return (0, _createClass2.default)(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 ((0, _expValEquals.expValEquals)('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true)) {
currentIsContentEmpty = (0, _utils.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 (!(0, _expValEquals.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 ((0, _expValEquals.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;
}
}]);
}();