@atlaskit/editor-plugin-tasks-and-decisions
Version:
Tasks and decisions plugin for @atlaskit/editor-core
200 lines (197 loc) • 7.77 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.taskItemNodeSpec = exports.lazyTaskItemToDom = exports.blockTaskItemNodeSpec = void 0;
exports.taskItemToDom = taskItemToDom;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _utils = require("./utils");
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; }
/**
* Wrapper for ADF taskItem node spec to augment toDOM implementation
* with fallback UI for lazy node view rendering / window virtualization
* @nodeSpecException:toDOM patch
* @returns
* @example
*/
var taskItemNodeSpec = exports.taskItemNodeSpec = function taskItemNodeSpec() {
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
return _adfSchema.taskItem;
}
return _objectSpread(_objectSpread({}, _adfSchema.taskItem), {}, {
toDOM: function toDOM(node) {
return lazyTaskItemToDom(node);
}
});
};
/**
* Wrapper for ADF blockTaskItem node spec to augment toDOM implementation
* with fallback UI for lazy node view rendering / window virtualization
* @nodeSpecException:toDOM patch
* @returns
* @example
*/
var blockTaskItemNodeSpec = exports.blockTaskItemNodeSpec = function blockTaskItemNodeSpec() {
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
return _adfSchema.blockTaskItem;
}
return _objectSpread(_objectSpread({}, _adfSchema.blockTaskItem), {}, {
toDOM: function toDOM(node) {
return lazyTaskItemToDom(node);
}
});
};
var getCheckBoxId = function getCheckBoxId(localId) {
return "task-checkbox-".concat(localId);
};
// eslint-disable-next-line jsdoc/require-example
/**
* Converts a task item node to a DOM output specification.
* This is used for rendering the task item in the editor.
*
* @param {Node} node - The ProseMirror node representing the task item.
* @param {string} placeholder - The placeholder text to display when the task item is empty.
* @returns A DOMOutputSpec representing the task item.
*/
function taskItemToDom(node, placeholder, intl) {
var checked = node.attrs.state === 'DONE';
var checkboxId = getCheckBoxId(node.attrs.localId);
var inputAttrs = {
name: checkboxId,
id: checkboxId,
type: 'checkbox',
'aria-label': intl.formatMessage(checked ? _messages.tasksAndDecisionsMessages.markTaskAsNotCompleted : _messages.tasksAndDecisionsMessages.markTaskAsCompleted)
};
if (checked) {
inputAttrs.checked = 'true';
}
var dataAttrs = _objectSpread({
'data-task-local-id': node.attrs.localId,
'data-task-state': node.attrs.state,
'data-prosemirror-node-name': 'taskItem'
}, node.type.name === 'blockTaskItem' ? {
'data-task-is-block': 'true'
} : {});
var contentDomDataAttrs = node.content.childCount > 0 ? {} : {
'data-empty': 'true'
};
if ((0, _expValEquals.expValEquals)('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true)) {
contentDomDataAttrs = (0, _utils.isContentEmpty)(node) ? {
'data-empty': 'true'
} : {};
}
var checkboxIcons = ['http://www.w3.org/2000/svg svg', {
width: '20',
height: '20',
viewBox: '2 2 20 20',
role: 'presentation',
'data-component': 'checkbox-icon'
}, ['http://www.w3.org/2000/svg g', {
'fill-rule': 'evenodd'
}, ['http://www.w3.org/2000/svg rect', {
fill: 'currentcolor',
x: '5.5',
y: '5.5',
width: '13',
height: '13',
rx: '1.5'
}], ['http://www.w3.org/2000/svg path', {
'fill-rule': 'evenodd',
'clip-rule': 'evenodd',
d: 'm16.326 9.48-1.152-.96-4.424 5.308-1.924-2.308-1.152.96 2.5 3a.75.75 0 0 0 1.152 0z',
fill: 'inherit'
}]]];
return ['div', _objectSpread(_objectSpread({
class: "".concat(_styles.TaskDecisionSharedCssClassName.TASK_CONTAINER)
}, dataAttrs), {}, {
state: node.attrs.state
}), ['div', {
'data-component': 'task-item-main'
}, ['span', {
contenteditable: 'false',
class: "".concat(_styles.TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER),
'data-component': 'task-item-input-wrap'
}, ['input', _objectSpread(_objectSpread({}, inputAttrs), {}, {
'data-input-type': 'task-item',
'data-task-input': true,
'data-testid': 'task-item-checkbox',
'data-component': 'task-item-input',
role: 'checkbox'
})], checkboxIcons], ['span', {
class: 'placeholder-node-view',
'data-testid': 'task-decision-item-placeholder',
'data-component': 'placeholder',
contenteditable: 'false'
}, placeholder], ['div', {
'data-component': 'content'
}, ['div', _objectSpread({
class: _styles.TaskDecisionSharedCssClassName.TASK_ITEM
}, contentDomDataAttrs), 0]]]];
}
var lazyTaskItemToDom = exports.lazyTaskItemToDom = function lazyTaskItemToDom(node) {
var checked = node.attrs.state === 'DONE';
var inputAttrs = {
name: node.attrs.localId,
id: node.attrs.localId,
type: 'checkbox'
};
if (checked) {
inputAttrs.checked = 'true';
}
var dataAttrs = _objectSpread({
'data-task-local-id': node.attrs.localId,
'data-task-state': node.attrs.state
}, node.type.name === 'blockTaskItem' ? {
'data-task-is-block': 'true'
} : {});
return ['div', _objectSpread(_objectSpread({
class: _styles.TaskDecisionSharedCssClassName.TASK_CONTAINER
}, dataAttrs), {}, {
style: (0, _lazyNodeView.convertToInlineCss)({
listStyleType: 'none',
lineHeight: '24px',
minWidth: '48px',
position: 'relative'
})
}), ['div', {
style: (0, _lazyNodeView.convertToInlineCss)({
display: 'flex'
})
}, ['span', {
contenteditable: 'false',
style: (0, _lazyNodeView.convertToInlineCss)({
width: '24px',
height: '24px',
lineHeight: '24px',
display: 'grid',
placeContent: 'center center'
})
}, ['input', _objectSpread(_objectSpread({}, inputAttrs), {}, {
'data-input-type': 'lazy-task-item',
style: (0, _lazyNodeView.convertToInlineCss)({
width: '13px',
height: '13px',
margin: '1px 0 0 0',
padding: 0,
accentColor: "var(--ds-background-selected-bold, #1868DB)"
})
})]], ['div', {
'data-component': 'content'
}, ['div', {
class: _styles.TaskDecisionSharedCssClassName.TASK_ITEM,
style: (0, _lazyNodeView.convertToInlineCss)({
display: 'block',
fontSize: '16px',
fontFamily: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
color: "var(--ds-text, #292A2E)"
})
}, 0]]]];
};