@tiptap/extension-task-item 2.0.0-beta.3 → 2.0.0-beta.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/README.md +2 -2
- package/dist/packages/extension-task-item/src/task-item.d.ts +2 -4
- package/dist/tiptap-extension-task-item.cjs.js +63 -24
- package/dist/tiptap-extension-task-item.cjs.js.map +1 -1
- package/dist/tiptap-extension-task-item.esm.js +64 -26
- package/dist/tiptap-extension-task-item.esm.js.map +1 -1
- package/dist/tiptap-extension-task-item.umd.js +68 -28
- package/dist/tiptap-extension-task-item.umd.js.map +1 -1
- package/package.json +6 -5
- package/src/task-item.ts +70 -33
- package/CHANGELOG.md +0 -142
- package/dist/tiptap-extension-task-item.bundle.umd.min.js +0 -2
- package/dist/tiptap-extension-task-item.bundle.umd.min.js.map +0 -1
package/LICENSE.md
CHANGED
package/README.md
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
## Introduction
|
|
8
8
|
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
|
9
9
|
|
|
10
|
-
##
|
|
10
|
+
## Official Documentation
|
|
11
11
|
Documentation can be found on the [tiptap website](https://tiptap.dev).
|
|
12
12
|
|
|
13
13
|
## License
|
|
14
|
-
tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap
|
|
14
|
+
tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { Node } from '@tiptap/core';
|
|
2
2
|
export interface TaskItemOptions {
|
|
3
3
|
nested: boolean;
|
|
4
|
-
HTMLAttributes:
|
|
5
|
-
[key: string]: any;
|
|
6
|
-
};
|
|
4
|
+
HTMLAttributes: Record<string, any>;
|
|
7
5
|
}
|
|
8
6
|
export declare const inputRegex: RegExp;
|
|
9
|
-
export declare const TaskItem: Node<TaskItemOptions>;
|
|
7
|
+
export declare const TaskItem: Node<TaskItemOptions, any>;
|
|
@@ -3,14 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@tiptap/core');
|
|
6
|
-
var prosemirrorInputrules = require('prosemirror-inputrules');
|
|
7
6
|
|
|
8
7
|
const inputRegex = /^\s*(\[([ |x])\])\s$/;
|
|
9
8
|
const TaskItem = core.Node.create({
|
|
10
9
|
name: 'taskItem',
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
addOptions() {
|
|
11
|
+
return {
|
|
12
|
+
nested: false,
|
|
13
|
+
HTMLAttributes: {},
|
|
14
|
+
};
|
|
14
15
|
},
|
|
15
16
|
content() {
|
|
16
17
|
return this.options.nested ? 'paragraph block*' : 'paragraph+';
|
|
@@ -20,43 +21,60 @@ const TaskItem = core.Node.create({
|
|
|
20
21
|
return {
|
|
21
22
|
checked: {
|
|
22
23
|
default: false,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}),
|
|
24
|
+
keepOnSplit: false,
|
|
25
|
+
parseHTML: element => element.getAttribute('data-checked') === 'true',
|
|
26
26
|
renderHTML: attributes => ({
|
|
27
27
|
'data-checked': attributes.checked,
|
|
28
28
|
}),
|
|
29
|
-
keepOnSplit: false,
|
|
30
29
|
},
|
|
31
30
|
};
|
|
32
31
|
},
|
|
33
32
|
parseHTML() {
|
|
34
33
|
return [
|
|
35
34
|
{
|
|
36
|
-
tag:
|
|
35
|
+
tag: `li[data-type="${this.name}"]`,
|
|
37
36
|
priority: 51,
|
|
38
37
|
},
|
|
39
38
|
];
|
|
40
39
|
},
|
|
41
|
-
renderHTML({ HTMLAttributes }) {
|
|
42
|
-
return [
|
|
40
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
41
|
+
return [
|
|
42
|
+
'li',
|
|
43
|
+
core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': this.name }),
|
|
44
|
+
[
|
|
45
|
+
'label',
|
|
46
|
+
[
|
|
47
|
+
'input',
|
|
48
|
+
{
|
|
49
|
+
type: 'checkbox',
|
|
50
|
+
checked: node.attrs.checked
|
|
51
|
+
? 'checked'
|
|
52
|
+
: null,
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
['span'],
|
|
56
|
+
],
|
|
57
|
+
[
|
|
58
|
+
'div',
|
|
59
|
+
0,
|
|
60
|
+
],
|
|
61
|
+
];
|
|
43
62
|
},
|
|
44
63
|
addKeyboardShortcuts() {
|
|
45
64
|
const shortcuts = {
|
|
46
|
-
Enter: () => this.editor.commands.splitListItem(
|
|
47
|
-
'Shift-Tab': () => this.editor.commands.liftListItem(
|
|
65
|
+
Enter: () => this.editor.commands.splitListItem(this.name),
|
|
66
|
+
'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
|
|
48
67
|
};
|
|
49
68
|
if (!this.options.nested) {
|
|
50
69
|
return shortcuts;
|
|
51
70
|
}
|
|
52
71
|
return {
|
|
53
72
|
...shortcuts,
|
|
54
|
-
Tab: () => this.editor.commands.sinkListItem(
|
|
73
|
+
Tab: () => this.editor.commands.sinkListItem(this.name),
|
|
55
74
|
};
|
|
56
75
|
},
|
|
57
76
|
addNodeView() {
|
|
58
77
|
return ({ node, HTMLAttributes, getPos, editor, }) => {
|
|
59
|
-
const { view } = editor;
|
|
60
78
|
const listItem = document.createElement('li');
|
|
61
79
|
const checkboxWrapper = document.createElement('label');
|
|
62
80
|
const checkboxStyler = document.createElement('span');
|
|
@@ -65,14 +83,30 @@ const TaskItem = core.Node.create({
|
|
|
65
83
|
checkboxWrapper.contentEditable = 'false';
|
|
66
84
|
checkbox.type = 'checkbox';
|
|
67
85
|
checkbox.addEventListener('change', event => {
|
|
86
|
+
// if the editor isn’t editable
|
|
87
|
+
// we have to undo the latest change
|
|
88
|
+
if (!editor.isEditable) {
|
|
89
|
+
checkbox.checked = !checkbox.checked;
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
68
92
|
const { checked } = event.target;
|
|
69
|
-
if (typeof getPos === 'function') {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
93
|
+
if (editor.isEditable && typeof getPos === 'function') {
|
|
94
|
+
editor
|
|
95
|
+
.chain()
|
|
96
|
+
.focus(undefined, { scrollIntoView: false })
|
|
97
|
+
.command(({ tr }) => {
|
|
98
|
+
tr.setNodeMarkup(getPos(), undefined, {
|
|
99
|
+
checked,
|
|
100
|
+
});
|
|
101
|
+
return true;
|
|
102
|
+
})
|
|
103
|
+
.run();
|
|
74
104
|
}
|
|
75
105
|
});
|
|
106
|
+
Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
|
|
107
|
+
listItem.setAttribute(key, value);
|
|
108
|
+
});
|
|
109
|
+
listItem.dataset.checked = node.attrs.checked;
|
|
76
110
|
if (node.attrs.checked) {
|
|
77
111
|
checkbox.setAttribute('checked', 'checked');
|
|
78
112
|
}
|
|
@@ -90,6 +124,7 @@ const TaskItem = core.Node.create({
|
|
|
90
124
|
if (updatedNode.type !== this.type) {
|
|
91
125
|
return false;
|
|
92
126
|
}
|
|
127
|
+
listItem.dataset.checked = updatedNode.attrs.checked;
|
|
93
128
|
if (updatedNode.attrs.checked) {
|
|
94
129
|
checkbox.setAttribute('checked', 'checked');
|
|
95
130
|
}
|
|
@@ -103,14 +138,18 @@ const TaskItem = core.Node.create({
|
|
|
103
138
|
},
|
|
104
139
|
addInputRules() {
|
|
105
140
|
return [
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
141
|
+
core.wrappingInputRule({
|
|
142
|
+
find: inputRegex,
|
|
143
|
+
type: this.type,
|
|
144
|
+
getAttributes: match => ({
|
|
145
|
+
checked: match[match.length - 1] === 'x',
|
|
146
|
+
}),
|
|
147
|
+
}),
|
|
109
148
|
];
|
|
110
149
|
},
|
|
111
150
|
});
|
|
112
151
|
|
|
113
152
|
exports.TaskItem = TaskItem;
|
|
114
|
-
exports
|
|
153
|
+
exports["default"] = TaskItem;
|
|
115
154
|
exports.inputRegex = inputRegex;
|
|
116
155
|
//# sourceMappingURL=tiptap-extension-task-item.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-task-item.cjs.js","sources":["../src/task-item.ts"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core'\
|
|
1
|
+
{"version":3,"file":"tiptap-extension-task-item.cjs.js","sources":["../src/task-item.ts"],"sourcesContent":["import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'\n\nexport interface TaskItemOptions {\n nested: boolean,\n HTMLAttributes: Record<string, any>,\n}\n\nexport const inputRegex = /^\\s*(\\[([ |x])\\])\\s$/\n\nexport const TaskItem = Node.create<TaskItemOptions>({\n name: 'taskItem',\n\n addOptions() {\n return {\n nested: false,\n HTMLAttributes: {},\n }\n },\n\n content() {\n return this.options.nested ? 'paragraph block*' : 'paragraph+'\n },\n\n defining: true,\n\n addAttributes() {\n return {\n checked: {\n default: false,\n keepOnSplit: false,\n parseHTML: element => element.getAttribute('data-checked') === 'true',\n renderHTML: attributes => ({\n 'data-checked': attributes.checked,\n }),\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: `li[data-type=\"${this.name}\"]`,\n priority: 51,\n },\n ]\n },\n\n renderHTML({ node, HTMLAttributes }) {\n return [\n 'li',\n mergeAttributes(\n this.options.HTMLAttributes,\n HTMLAttributes,\n { 'data-type': this.name },\n ),\n [\n 'label',\n [\n 'input',\n {\n type: 'checkbox',\n checked: node.attrs.checked\n ? 'checked'\n : null,\n },\n ],\n ['span'],\n ],\n [\n 'div',\n 0,\n ],\n ]\n },\n\n addKeyboardShortcuts() {\n const shortcuts = {\n Enter: () => this.editor.commands.splitListItem(this.name),\n 'Shift-Tab': () => this.editor.commands.liftListItem(this.name),\n }\n\n if (!this.options.nested) {\n return shortcuts\n }\n\n return {\n ...shortcuts,\n Tab: () => this.editor.commands.sinkListItem(this.name),\n }\n },\n\n addNodeView() {\n return ({\n node,\n HTMLAttributes,\n getPos,\n editor,\n }) => {\n const listItem = document.createElement('li')\n const checkboxWrapper = document.createElement('label')\n const checkboxStyler = document.createElement('span')\n const checkbox = document.createElement('input')\n const content = document.createElement('div')\n\n checkboxWrapper.contentEditable = 'false'\n checkbox.type = 'checkbox'\n checkbox.addEventListener('change', event => {\n // if the editor isn’t editable\n // we have to undo the latest change\n if (!editor.isEditable) {\n checkbox.checked = !checkbox.checked\n\n return\n }\n\n const { checked } = event.target as any\n\n if (editor.isEditable && typeof getPos === 'function') {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .command(({ tr }) => {\n tr.setNodeMarkup(getPos(), undefined, {\n checked,\n })\n\n return true\n })\n .run()\n }\n })\n\n Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {\n listItem.setAttribute(key, value)\n })\n\n listItem.dataset.checked = node.attrs.checked\n if (node.attrs.checked) {\n checkbox.setAttribute('checked', 'checked')\n }\n\n checkboxWrapper.append(checkbox, checkboxStyler)\n listItem.append(checkboxWrapper, content)\n\n Object\n .entries(HTMLAttributes)\n .forEach(([key, value]) => {\n listItem.setAttribute(key, value)\n })\n\n return {\n dom: listItem,\n contentDOM: content,\n update: updatedNode => {\n if (updatedNode.type !== this.type) {\n return false\n }\n\n listItem.dataset.checked = updatedNode.attrs.checked\n if (updatedNode.attrs.checked) {\n checkbox.setAttribute('checked', 'checked')\n } else {\n checkbox.removeAttribute('checked')\n }\n\n return true\n },\n }\n }\n },\n\n addInputRules() {\n return [\n wrappingInputRule({\n find: inputRegex,\n type: this.type,\n getAttributes: match => ({\n checked: match[match.length - 1] === 'x',\n }),\n }),\n ]\n },\n})\n"],"names":["Node","mergeAttributes","wrappingInputRule"],"mappings":"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"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { Node, mergeAttributes } from '@tiptap/core';
|
|
2
|
-
import { wrappingInputRule } from 'prosemirror-inputrules';
|
|
1
|
+
import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core';
|
|
3
2
|
|
|
4
3
|
const inputRegex = /^\s*(\[([ |x])\])\s$/;
|
|
5
4
|
const TaskItem = Node.create({
|
|
6
5
|
name: 'taskItem',
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
addOptions() {
|
|
7
|
+
return {
|
|
8
|
+
nested: false,
|
|
9
|
+
HTMLAttributes: {},
|
|
10
|
+
};
|
|
10
11
|
},
|
|
11
12
|
content() {
|
|
12
13
|
return this.options.nested ? 'paragraph block*' : 'paragraph+';
|
|
@@ -16,43 +17,60 @@ const TaskItem = Node.create({
|
|
|
16
17
|
return {
|
|
17
18
|
checked: {
|
|
18
19
|
default: false,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}),
|
|
20
|
+
keepOnSplit: false,
|
|
21
|
+
parseHTML: element => element.getAttribute('data-checked') === 'true',
|
|
22
22
|
renderHTML: attributes => ({
|
|
23
23
|
'data-checked': attributes.checked,
|
|
24
24
|
}),
|
|
25
|
-
keepOnSplit: false,
|
|
26
25
|
},
|
|
27
26
|
};
|
|
28
27
|
},
|
|
29
28
|
parseHTML() {
|
|
30
29
|
return [
|
|
31
30
|
{
|
|
32
|
-
tag:
|
|
31
|
+
tag: `li[data-type="${this.name}"]`,
|
|
33
32
|
priority: 51,
|
|
34
33
|
},
|
|
35
34
|
];
|
|
36
35
|
},
|
|
37
|
-
renderHTML({ HTMLAttributes }) {
|
|
38
|
-
return [
|
|
36
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
37
|
+
return [
|
|
38
|
+
'li',
|
|
39
|
+
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': this.name }),
|
|
40
|
+
[
|
|
41
|
+
'label',
|
|
42
|
+
[
|
|
43
|
+
'input',
|
|
44
|
+
{
|
|
45
|
+
type: 'checkbox',
|
|
46
|
+
checked: node.attrs.checked
|
|
47
|
+
? 'checked'
|
|
48
|
+
: null,
|
|
49
|
+
},
|
|
50
|
+
],
|
|
51
|
+
['span'],
|
|
52
|
+
],
|
|
53
|
+
[
|
|
54
|
+
'div',
|
|
55
|
+
0,
|
|
56
|
+
],
|
|
57
|
+
];
|
|
39
58
|
},
|
|
40
59
|
addKeyboardShortcuts() {
|
|
41
60
|
const shortcuts = {
|
|
42
|
-
Enter: () => this.editor.commands.splitListItem(
|
|
43
|
-
'Shift-Tab': () => this.editor.commands.liftListItem(
|
|
61
|
+
Enter: () => this.editor.commands.splitListItem(this.name),
|
|
62
|
+
'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
|
|
44
63
|
};
|
|
45
64
|
if (!this.options.nested) {
|
|
46
65
|
return shortcuts;
|
|
47
66
|
}
|
|
48
67
|
return {
|
|
49
68
|
...shortcuts,
|
|
50
|
-
Tab: () => this.editor.commands.sinkListItem(
|
|
69
|
+
Tab: () => this.editor.commands.sinkListItem(this.name),
|
|
51
70
|
};
|
|
52
71
|
},
|
|
53
72
|
addNodeView() {
|
|
54
73
|
return ({ node, HTMLAttributes, getPos, editor, }) => {
|
|
55
|
-
const { view } = editor;
|
|
56
74
|
const listItem = document.createElement('li');
|
|
57
75
|
const checkboxWrapper = document.createElement('label');
|
|
58
76
|
const checkboxStyler = document.createElement('span');
|
|
@@ -61,14 +79,30 @@ const TaskItem = Node.create({
|
|
|
61
79
|
checkboxWrapper.contentEditable = 'false';
|
|
62
80
|
checkbox.type = 'checkbox';
|
|
63
81
|
checkbox.addEventListener('change', event => {
|
|
82
|
+
// if the editor isn’t editable
|
|
83
|
+
// we have to undo the latest change
|
|
84
|
+
if (!editor.isEditable) {
|
|
85
|
+
checkbox.checked = !checkbox.checked;
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
64
88
|
const { checked } = event.target;
|
|
65
|
-
if (typeof getPos === 'function') {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
89
|
+
if (editor.isEditable && typeof getPos === 'function') {
|
|
90
|
+
editor
|
|
91
|
+
.chain()
|
|
92
|
+
.focus(undefined, { scrollIntoView: false })
|
|
93
|
+
.command(({ tr }) => {
|
|
94
|
+
tr.setNodeMarkup(getPos(), undefined, {
|
|
95
|
+
checked,
|
|
96
|
+
});
|
|
97
|
+
return true;
|
|
98
|
+
})
|
|
99
|
+
.run();
|
|
70
100
|
}
|
|
71
101
|
});
|
|
102
|
+
Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
|
|
103
|
+
listItem.setAttribute(key, value);
|
|
104
|
+
});
|
|
105
|
+
listItem.dataset.checked = node.attrs.checked;
|
|
72
106
|
if (node.attrs.checked) {
|
|
73
107
|
checkbox.setAttribute('checked', 'checked');
|
|
74
108
|
}
|
|
@@ -86,6 +120,7 @@ const TaskItem = Node.create({
|
|
|
86
120
|
if (updatedNode.type !== this.type) {
|
|
87
121
|
return false;
|
|
88
122
|
}
|
|
123
|
+
listItem.dataset.checked = updatedNode.attrs.checked;
|
|
89
124
|
if (updatedNode.attrs.checked) {
|
|
90
125
|
checkbox.setAttribute('checked', 'checked');
|
|
91
126
|
}
|
|
@@ -99,13 +134,16 @@ const TaskItem = Node.create({
|
|
|
99
134
|
},
|
|
100
135
|
addInputRules() {
|
|
101
136
|
return [
|
|
102
|
-
wrappingInputRule(
|
|
103
|
-
|
|
104
|
-
|
|
137
|
+
wrappingInputRule({
|
|
138
|
+
find: inputRegex,
|
|
139
|
+
type: this.type,
|
|
140
|
+
getAttributes: match => ({
|
|
141
|
+
checked: match[match.length - 1] === 'x',
|
|
142
|
+
}),
|
|
143
|
+
}),
|
|
105
144
|
];
|
|
106
145
|
},
|
|
107
146
|
});
|
|
108
147
|
|
|
109
|
-
export default
|
|
110
|
-
export { TaskItem, inputRegex };
|
|
148
|
+
export { TaskItem, TaskItem as default, inputRegex };
|
|
111
149
|
//# sourceMappingURL=tiptap-extension-task-item.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-task-item.esm.js","sources":["../src/task-item.ts"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core'\
|
|
1
|
+
{"version":3,"file":"tiptap-extension-task-item.esm.js","sources":["../src/task-item.ts"],"sourcesContent":["import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'\n\nexport interface TaskItemOptions {\n nested: boolean,\n HTMLAttributes: Record<string, any>,\n}\n\nexport const inputRegex = /^\\s*(\\[([ |x])\\])\\s$/\n\nexport const TaskItem = Node.create<TaskItemOptions>({\n name: 'taskItem',\n\n addOptions() {\n return {\n nested: false,\n HTMLAttributes: {},\n }\n },\n\n content() {\n return this.options.nested ? 'paragraph block*' : 'paragraph+'\n },\n\n defining: true,\n\n addAttributes() {\n return {\n checked: {\n default: false,\n keepOnSplit: false,\n parseHTML: element => element.getAttribute('data-checked') === 'true',\n renderHTML: attributes => ({\n 'data-checked': attributes.checked,\n }),\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: `li[data-type=\"${this.name}\"]`,\n priority: 51,\n },\n ]\n },\n\n renderHTML({ node, HTMLAttributes }) {\n return [\n 'li',\n mergeAttributes(\n this.options.HTMLAttributes,\n HTMLAttributes,\n { 'data-type': this.name },\n ),\n [\n 'label',\n [\n 'input',\n {\n type: 'checkbox',\n checked: node.attrs.checked\n ? 'checked'\n : null,\n },\n ],\n ['span'],\n ],\n [\n 'div',\n 0,\n ],\n ]\n },\n\n addKeyboardShortcuts() {\n const shortcuts = {\n Enter: () => this.editor.commands.splitListItem(this.name),\n 'Shift-Tab': () => this.editor.commands.liftListItem(this.name),\n }\n\n if (!this.options.nested) {\n return shortcuts\n }\n\n return {\n ...shortcuts,\n Tab: () => this.editor.commands.sinkListItem(this.name),\n }\n },\n\n addNodeView() {\n return ({\n node,\n HTMLAttributes,\n getPos,\n editor,\n }) => {\n const listItem = document.createElement('li')\n const checkboxWrapper = document.createElement('label')\n const checkboxStyler = document.createElement('span')\n const checkbox = document.createElement('input')\n const content = document.createElement('div')\n\n checkboxWrapper.contentEditable = 'false'\n checkbox.type = 'checkbox'\n checkbox.addEventListener('change', event => {\n // if the editor isn’t editable\n // we have to undo the latest change\n if (!editor.isEditable) {\n checkbox.checked = !checkbox.checked\n\n return\n }\n\n const { checked } = event.target as any\n\n if (editor.isEditable && typeof getPos === 'function') {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .command(({ tr }) => {\n tr.setNodeMarkup(getPos(), undefined, {\n checked,\n })\n\n return true\n })\n .run()\n }\n })\n\n Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {\n listItem.setAttribute(key, value)\n })\n\n listItem.dataset.checked = node.attrs.checked\n if (node.attrs.checked) {\n checkbox.setAttribute('checked', 'checked')\n }\n\n checkboxWrapper.append(checkbox, checkboxStyler)\n listItem.append(checkboxWrapper, content)\n\n Object\n .entries(HTMLAttributes)\n .forEach(([key, value]) => {\n listItem.setAttribute(key, value)\n })\n\n return {\n dom: listItem,\n contentDOM: content,\n update: updatedNode => {\n if (updatedNode.type !== this.type) {\n return false\n }\n\n listItem.dataset.checked = updatedNode.attrs.checked\n if (updatedNode.attrs.checked) {\n checkbox.setAttribute('checked', 'checked')\n } else {\n checkbox.removeAttribute('checked')\n }\n\n return true\n },\n }\n }\n },\n\n addInputRules() {\n return [\n wrappingInputRule({\n find: inputRegex,\n type: this.type,\n getAttributes: match => ({\n checked: match[match.length - 1] === 'x',\n }),\n }),\n ]\n },\n})\n"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core')
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core'
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global[
|
|
5
|
-
}(this, (function (exports, core
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-task-item"] = {}, global.core));
|
|
5
|
+
})(this, (function (exports, core) { 'use strict';
|
|
6
6
|
|
|
7
7
|
const inputRegex = /^\s*(\[([ |x])\])\s$/;
|
|
8
8
|
const TaskItem = core.Node.create({
|
|
9
9
|
name: 'taskItem',
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
addOptions() {
|
|
11
|
+
return {
|
|
12
|
+
nested: false,
|
|
13
|
+
HTMLAttributes: {},
|
|
14
|
+
};
|
|
13
15
|
},
|
|
14
16
|
content() {
|
|
15
17
|
return this.options.nested ? 'paragraph block*' : 'paragraph+';
|
|
@@ -19,43 +21,60 @@
|
|
|
19
21
|
return {
|
|
20
22
|
checked: {
|
|
21
23
|
default: false,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}),
|
|
24
|
+
keepOnSplit: false,
|
|
25
|
+
parseHTML: element => element.getAttribute('data-checked') === 'true',
|
|
25
26
|
renderHTML: attributes => ({
|
|
26
27
|
'data-checked': attributes.checked,
|
|
27
28
|
}),
|
|
28
|
-
keepOnSplit: false,
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
},
|
|
32
32
|
parseHTML() {
|
|
33
33
|
return [
|
|
34
34
|
{
|
|
35
|
-
tag:
|
|
35
|
+
tag: `li[data-type="${this.name}"]`,
|
|
36
36
|
priority: 51,
|
|
37
37
|
},
|
|
38
38
|
];
|
|
39
39
|
},
|
|
40
|
-
renderHTML({ HTMLAttributes }) {
|
|
41
|
-
return [
|
|
40
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
41
|
+
return [
|
|
42
|
+
'li',
|
|
43
|
+
core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': this.name }),
|
|
44
|
+
[
|
|
45
|
+
'label',
|
|
46
|
+
[
|
|
47
|
+
'input',
|
|
48
|
+
{
|
|
49
|
+
type: 'checkbox',
|
|
50
|
+
checked: node.attrs.checked
|
|
51
|
+
? 'checked'
|
|
52
|
+
: null,
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
['span'],
|
|
56
|
+
],
|
|
57
|
+
[
|
|
58
|
+
'div',
|
|
59
|
+
0,
|
|
60
|
+
],
|
|
61
|
+
];
|
|
42
62
|
},
|
|
43
63
|
addKeyboardShortcuts() {
|
|
44
64
|
const shortcuts = {
|
|
45
|
-
Enter: () => this.editor.commands.splitListItem(
|
|
46
|
-
'Shift-Tab': () => this.editor.commands.liftListItem(
|
|
65
|
+
Enter: () => this.editor.commands.splitListItem(this.name),
|
|
66
|
+
'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
|
|
47
67
|
};
|
|
48
68
|
if (!this.options.nested) {
|
|
49
69
|
return shortcuts;
|
|
50
70
|
}
|
|
51
71
|
return {
|
|
52
72
|
...shortcuts,
|
|
53
|
-
Tab: () => this.editor.commands.sinkListItem(
|
|
73
|
+
Tab: () => this.editor.commands.sinkListItem(this.name),
|
|
54
74
|
};
|
|
55
75
|
},
|
|
56
76
|
addNodeView() {
|
|
57
77
|
return ({ node, HTMLAttributes, getPos, editor, }) => {
|
|
58
|
-
const { view } = editor;
|
|
59
78
|
const listItem = document.createElement('li');
|
|
60
79
|
const checkboxWrapper = document.createElement('label');
|
|
61
80
|
const checkboxStyler = document.createElement('span');
|
|
@@ -64,14 +83,30 @@
|
|
|
64
83
|
checkboxWrapper.contentEditable = 'false';
|
|
65
84
|
checkbox.type = 'checkbox';
|
|
66
85
|
checkbox.addEventListener('change', event => {
|
|
86
|
+
// if the editor isn’t editable
|
|
87
|
+
// we have to undo the latest change
|
|
88
|
+
if (!editor.isEditable) {
|
|
89
|
+
checkbox.checked = !checkbox.checked;
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
67
92
|
const { checked } = event.target;
|
|
68
|
-
if (typeof getPos === 'function') {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
93
|
+
if (editor.isEditable && typeof getPos === 'function') {
|
|
94
|
+
editor
|
|
95
|
+
.chain()
|
|
96
|
+
.focus(undefined, { scrollIntoView: false })
|
|
97
|
+
.command(({ tr }) => {
|
|
98
|
+
tr.setNodeMarkup(getPos(), undefined, {
|
|
99
|
+
checked,
|
|
100
|
+
});
|
|
101
|
+
return true;
|
|
102
|
+
})
|
|
103
|
+
.run();
|
|
73
104
|
}
|
|
74
105
|
});
|
|
106
|
+
Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
|
|
107
|
+
listItem.setAttribute(key, value);
|
|
108
|
+
});
|
|
109
|
+
listItem.dataset.checked = node.attrs.checked;
|
|
75
110
|
if (node.attrs.checked) {
|
|
76
111
|
checkbox.setAttribute('checked', 'checked');
|
|
77
112
|
}
|
|
@@ -89,6 +124,7 @@
|
|
|
89
124
|
if (updatedNode.type !== this.type) {
|
|
90
125
|
return false;
|
|
91
126
|
}
|
|
127
|
+
listItem.dataset.checked = updatedNode.attrs.checked;
|
|
92
128
|
if (updatedNode.attrs.checked) {
|
|
93
129
|
checkbox.setAttribute('checked', 'checked');
|
|
94
130
|
}
|
|
@@ -102,18 +138,22 @@
|
|
|
102
138
|
},
|
|
103
139
|
addInputRules() {
|
|
104
140
|
return [
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
141
|
+
core.wrappingInputRule({
|
|
142
|
+
find: inputRegex,
|
|
143
|
+
type: this.type,
|
|
144
|
+
getAttributes: match => ({
|
|
145
|
+
checked: match[match.length - 1] === 'x',
|
|
146
|
+
}),
|
|
147
|
+
}),
|
|
108
148
|
];
|
|
109
149
|
},
|
|
110
150
|
});
|
|
111
151
|
|
|
112
152
|
exports.TaskItem = TaskItem;
|
|
113
|
-
exports
|
|
153
|
+
exports["default"] = TaskItem;
|
|
114
154
|
exports.inputRegex = inputRegex;
|
|
115
155
|
|
|
116
156
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
117
157
|
|
|
118
|
-
}))
|
|
158
|
+
}));
|
|
119
159
|
//# sourceMappingURL=tiptap-extension-task-item.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tiptap-extension-task-item.umd.js","sources":["../src/task-item.ts"],"sourcesContent":["import { Node, mergeAttributes } from '@tiptap/core'\
|
|
1
|
+
{"version":3,"file":"tiptap-extension-task-item.umd.js","sources":["../src/task-item.ts"],"sourcesContent":["import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'\n\nexport interface TaskItemOptions {\n nested: boolean,\n HTMLAttributes: Record<string, any>,\n}\n\nexport const inputRegex = /^\\s*(\\[([ |x])\\])\\s$/\n\nexport const TaskItem = Node.create<TaskItemOptions>({\n name: 'taskItem',\n\n addOptions() {\n return {\n nested: false,\n HTMLAttributes: {},\n }\n },\n\n content() {\n return this.options.nested ? 'paragraph block*' : 'paragraph+'\n },\n\n defining: true,\n\n addAttributes() {\n return {\n checked: {\n default: false,\n keepOnSplit: false,\n parseHTML: element => element.getAttribute('data-checked') === 'true',\n renderHTML: attributes => ({\n 'data-checked': attributes.checked,\n }),\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: `li[data-type=\"${this.name}\"]`,\n priority: 51,\n },\n ]\n },\n\n renderHTML({ node, HTMLAttributes }) {\n return [\n 'li',\n mergeAttributes(\n this.options.HTMLAttributes,\n HTMLAttributes,\n { 'data-type': this.name },\n ),\n [\n 'label',\n [\n 'input',\n {\n type: 'checkbox',\n checked: node.attrs.checked\n ? 'checked'\n : null,\n },\n ],\n ['span'],\n ],\n [\n 'div',\n 0,\n ],\n ]\n },\n\n addKeyboardShortcuts() {\n const shortcuts = {\n Enter: () => this.editor.commands.splitListItem(this.name),\n 'Shift-Tab': () => this.editor.commands.liftListItem(this.name),\n }\n\n if (!this.options.nested) {\n return shortcuts\n }\n\n return {\n ...shortcuts,\n Tab: () => this.editor.commands.sinkListItem(this.name),\n }\n },\n\n addNodeView() {\n return ({\n node,\n HTMLAttributes,\n getPos,\n editor,\n }) => {\n const listItem = document.createElement('li')\n const checkboxWrapper = document.createElement('label')\n const checkboxStyler = document.createElement('span')\n const checkbox = document.createElement('input')\n const content = document.createElement('div')\n\n checkboxWrapper.contentEditable = 'false'\n checkbox.type = 'checkbox'\n checkbox.addEventListener('change', event => {\n // if the editor isn’t editable\n // we have to undo the latest change\n if (!editor.isEditable) {\n checkbox.checked = !checkbox.checked\n\n return\n }\n\n const { checked } = event.target as any\n\n if (editor.isEditable && typeof getPos === 'function') {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .command(({ tr }) => {\n tr.setNodeMarkup(getPos(), undefined, {\n checked,\n })\n\n return true\n })\n .run()\n }\n })\n\n Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {\n listItem.setAttribute(key, value)\n })\n\n listItem.dataset.checked = node.attrs.checked\n if (node.attrs.checked) {\n checkbox.setAttribute('checked', 'checked')\n }\n\n checkboxWrapper.append(checkbox, checkboxStyler)\n listItem.append(checkboxWrapper, content)\n\n Object\n .entries(HTMLAttributes)\n .forEach(([key, value]) => {\n listItem.setAttribute(key, value)\n })\n\n return {\n dom: listItem,\n contentDOM: content,\n update: updatedNode => {\n if (updatedNode.type !== this.type) {\n return false\n }\n\n listItem.dataset.checked = updatedNode.attrs.checked\n if (updatedNode.attrs.checked) {\n checkbox.setAttribute('checked', 'checked')\n } else {\n checkbox.removeAttribute('checked')\n }\n\n return true\n },\n }\n }\n },\n\n addInputRules() {\n return [\n wrappingInputRule({\n find: inputRegex,\n type: this.type,\n getAttributes: match => ({\n checked: match[match.length - 1] === 'x',\n }),\n }),\n ]\n },\n})\n"],"names":["Node","mergeAttributes","wrappingInputRule"],"mappings":"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"}
|