diff --git a/packages/tiptap-extensions/src/nodes/TodoItem.js b/packages/tiptap-extensions/src/nodes/TodoItem.js index ed9b47a5..caa05cfc 100644 --- a/packages/tiptap-extensions/src/nodes/TodoItem.js +++ b/packages/tiptap-extensions/src/nodes/TodoItem.js @@ -29,6 +29,39 @@ export default class TodoItem extends Node {
`, + /* + The render function enables TodoItem to work in `runtimeonly` builds, + which is required for frameworks requiring strict CSP policies. For + example, doing this is required in Chrome Extensions. Having both + the template and the render function ensures there are no issues + converting the node to JSON and rendering the component. + */ + render(h) { + return h('li', { + attrs: { + 'data-type': this.node.type.name, + 'data-done': this.node.attrs.done.toString(), + 'data-drag-handle': '', + }, + }, [ + h('span', { + class: 'todo-checkbox', + attrs: { + contenteditable: false, + }, + on: { + click: this.onChange, + }, + }), + h('div', { + class: 'todo-content', + attrs: { + contenteditable: this.view.editable.toString(), + }, + ref: 'content', + }), + ]) + }, } }