@tiptap/extension-list 3.0.0-beta.21 → 3.0.0-beta.23
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/dist/index.cjs +8 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/dist/kit/index.cjs +8 -1
- package/dist/kit/index.cjs.map +1 -1
- package/dist/kit/index.d.cts +12 -0
- package/dist/kit/index.d.ts +12 -0
- package/dist/kit/index.js +8 -1
- package/dist/kit/index.js.map +1 -1
- package/dist/task-item/index.cjs +8 -1
- package/dist/task-item/index.cjs.map +1 -1
- package/dist/task-item/index.d.cts +12 -0
- package/dist/task-item/index.d.ts +12 -0
- package/dist/task-item/index.js +8 -1
- package/dist/task-item/index.js.map +1 -1
- package/package.json +5 -5
- package/src/task-item/task-item.ts +23 -0
|
@@ -27,6 +27,18 @@ interface TaskItemOptions {
|
|
|
27
27
|
* @example 'myCustomTaskList'
|
|
28
28
|
*/
|
|
29
29
|
taskListTypeName: string;
|
|
30
|
+
/**
|
|
31
|
+
* Accessibility options for the task item.
|
|
32
|
+
* @default {}
|
|
33
|
+
* @example
|
|
34
|
+
* ```js
|
|
35
|
+
* {
|
|
36
|
+
* checkboxLabel: (node) => `Task item: ${node.textContent || 'empty task item'}`
|
|
37
|
+
* }
|
|
38
|
+
*/
|
|
39
|
+
a11y?: {
|
|
40
|
+
checkboxLabel?: (node: Node, checked: boolean) => string;
|
|
41
|
+
};
|
|
30
42
|
}
|
|
31
43
|
/**
|
|
32
44
|
* Matches a task item to a - [ ] on input.
|
|
@@ -27,6 +27,18 @@ interface TaskItemOptions {
|
|
|
27
27
|
* @example 'myCustomTaskList'
|
|
28
28
|
*/
|
|
29
29
|
taskListTypeName: string;
|
|
30
|
+
/**
|
|
31
|
+
* Accessibility options for the task item.
|
|
32
|
+
* @default {}
|
|
33
|
+
* @example
|
|
34
|
+
* ```js
|
|
35
|
+
* {
|
|
36
|
+
* checkboxLabel: (node) => `Task item: ${node.textContent || 'empty task item'}`
|
|
37
|
+
* }
|
|
38
|
+
*/
|
|
39
|
+
a11y?: {
|
|
40
|
+
checkboxLabel?: (node: Node, checked: boolean) => string;
|
|
41
|
+
};
|
|
30
42
|
}
|
|
31
43
|
/**
|
|
32
44
|
* Matches a task item to a - [ ] on input.
|
package/dist/task-item/index.js
CHANGED
|
@@ -7,7 +7,8 @@ var TaskItem = Node.create({
|
|
|
7
7
|
return {
|
|
8
8
|
nested: false,
|
|
9
9
|
HTMLAttributes: {},
|
|
10
|
-
taskListTypeName: "taskList"
|
|
10
|
+
taskListTypeName: "taskList",
|
|
11
|
+
a11y: void 0
|
|
11
12
|
};
|
|
12
13
|
},
|
|
13
14
|
content() {
|
|
@@ -77,6 +78,11 @@ var TaskItem = Node.create({
|
|
|
77
78
|
const checkboxStyler = document.createElement("span");
|
|
78
79
|
const checkbox = document.createElement("input");
|
|
79
80
|
const content = document.createElement("div");
|
|
81
|
+
const updateA11Y = () => {
|
|
82
|
+
var _a, _b;
|
|
83
|
+
checkbox.ariaLabel = ((_b = (_a = this.options.a11y) == null ? void 0 : _a.checkboxLabel) == null ? void 0 : _b.call(_a, node, checkbox.checked)) || `Task item checkbox for ${node.textContent || "empty task item"}`;
|
|
84
|
+
};
|
|
85
|
+
updateA11Y();
|
|
80
86
|
checkboxWrapper.contentEditable = "false";
|
|
81
87
|
checkbox.type = "checkbox";
|
|
82
88
|
checkbox.addEventListener("mousedown", (event) => event.preventDefault());
|
|
@@ -125,6 +131,7 @@ var TaskItem = Node.create({
|
|
|
125
131
|
}
|
|
126
132
|
listItem.dataset.checked = updatedNode.attrs.checked;
|
|
127
133
|
checkbox.checked = updatedNode.attrs.checked;
|
|
134
|
+
updateA11Y();
|
|
128
135
|
return true;
|
|
129
136
|
}
|
|
130
137
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/task-item/task-item.ts"],"sourcesContent":["import type { KeyboardShortcutCommand } from '@tiptap/core'\nimport { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\n\nexport interface TaskItemOptions {\n /**\n * A callback function that is called when the checkbox is clicked while the editor is in readonly mode.\n * @param node The prosemirror node of the task item\n * @param checked The new checked state\n * @returns boolean\n */\n onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean\n\n /**\n * Controls whether the task items can be nested or not.\n * @default false\n * @example true\n */\n nested: boolean\n\n /**\n * HTML attributes to add to the task item element.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record<string, any>\n\n /**\n * The node type for taskList nodes\n * @default 'taskList'\n * @example 'myCustomTaskList'\n */\n taskListTypeName: string\n}\n\n/**\n * Matches a task item to a - [ ] on input.\n */\nexport const inputRegex = /^\\s*(\\[([( |x])?\\])\\s$/\n\n/**\n * This extension allows you to create task items.\n * @see https://www.tiptap.dev/api/nodes/task-item\n */\nexport const TaskItem = Node.create<TaskItemOptions>({\n name: 'taskItem',\n\n addOptions() {\n return {\n nested: false,\n HTMLAttributes: {},\n taskListTypeName: 'taskList',\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 => {\n const dataChecked = element.getAttribute('data-checked')\n\n return dataChecked === '' || dataChecked === 'true'\n },\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(this.options.HTMLAttributes, HTMLAttributes, {\n 'data-type': this.name,\n }),\n [\n 'label',\n [\n 'input',\n {\n type: 'checkbox',\n checked: node.attrs.checked ? 'checked' : null,\n },\n ],\n ['span'],\n ],\n ['div', 0],\n ]\n },\n\n addKeyboardShortcuts() {\n const shortcuts: {\n [key: string]: KeyboardShortcutCommand\n } = {\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 ({ node, HTMLAttributes, getPos, editor }) => {\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('mousedown', event => event.preventDefault())\n checkbox.addEventListener('change', event => {\n // if the editor isn’t editable and we don't have a handler for\n // readonly checks we have to undo the latest change\n if (!editor.isEditable && !this.options.onReadOnlyChecked) {\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 const position = getPos()\n\n if (typeof position !== 'number') {\n return false\n }\n const currentNode = tr.doc.nodeAt(position)\n\n tr.setNodeMarkup(position, undefined, {\n ...currentNode?.attrs,\n checked,\n })\n\n return true\n })\n .run()\n }\n if (!editor.isEditable && this.options.onReadOnlyChecked) {\n // Reset state if onReadOnlyChecked returns false\n if (!this.options.onReadOnlyChecked(node, checked)) {\n checkbox.checked = !checkbox.checked\n }\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 checkbox.checked = node.attrs.checked\n\n checkboxWrapper.append(checkbox, checkboxStyler)\n listItem.append(checkboxWrapper, content)\n\n Object.entries(HTMLAttributes).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 checkbox.checked = updatedNode.attrs.checked\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"],"mappings":";AACA,SAAS,iBAAiB,MAAM,yBAAyB;
|
|
1
|
+
{"version":3,"sources":["../../src/task-item/task-item.ts"],"sourcesContent":["import type { KeyboardShortcutCommand } from '@tiptap/core'\nimport { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core'\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model'\n\nexport interface TaskItemOptions {\n /**\n * A callback function that is called when the checkbox is clicked while the editor is in readonly mode.\n * @param node The prosemirror node of the task item\n * @param checked The new checked state\n * @returns boolean\n */\n onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean\n\n /**\n * Controls whether the task items can be nested or not.\n * @default false\n * @example true\n */\n nested: boolean\n\n /**\n * HTML attributes to add to the task item element.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record<string, any>\n\n /**\n * The node type for taskList nodes\n * @default 'taskList'\n * @example 'myCustomTaskList'\n */\n taskListTypeName: string\n\n /**\n * Accessibility options for the task item.\n * @default {}\n * @example\n * ```js\n * {\n * checkboxLabel: (node) => `Task item: ${node.textContent || 'empty task item'}`\n * }\n */\n a11y?: {\n checkboxLabel?: (node: ProseMirrorNode, checked: boolean) => string\n }\n}\n\n/**\n * Matches a task item to a - [ ] on input.\n */\nexport const inputRegex = /^\\s*(\\[([( |x])?\\])\\s$/\n\n/**\n * This extension allows you to create task items.\n * @see https://www.tiptap.dev/api/nodes/task-item\n */\nexport const TaskItem = Node.create<TaskItemOptions>({\n name: 'taskItem',\n\n addOptions() {\n return {\n nested: false,\n HTMLAttributes: {},\n taskListTypeName: 'taskList',\n a11y: undefined,\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 => {\n const dataChecked = element.getAttribute('data-checked')\n\n return dataChecked === '' || dataChecked === 'true'\n },\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(this.options.HTMLAttributes, HTMLAttributes, {\n 'data-type': this.name,\n }),\n [\n 'label',\n [\n 'input',\n {\n type: 'checkbox',\n checked: node.attrs.checked ? 'checked' : null,\n },\n ],\n ['span'],\n ],\n ['div', 0],\n ]\n },\n\n addKeyboardShortcuts() {\n const shortcuts: {\n [key: string]: KeyboardShortcutCommand\n } = {\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 ({ node, HTMLAttributes, getPos, editor }) => {\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 const updateA11Y = () => {\n checkbox.ariaLabel =\n this.options.a11y?.checkboxLabel?.(node, checkbox.checked) ||\n `Task item checkbox for ${node.textContent || 'empty task item'}`\n }\n\n updateA11Y()\n\n checkboxWrapper.contentEditable = 'false'\n checkbox.type = 'checkbox'\n checkbox.addEventListener('mousedown', event => event.preventDefault())\n checkbox.addEventListener('change', event => {\n // if the editor isn’t editable and we don't have a handler for\n // readonly checks we have to undo the latest change\n if (!editor.isEditable && !this.options.onReadOnlyChecked) {\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 const position = getPos()\n\n if (typeof position !== 'number') {\n return false\n }\n const currentNode = tr.doc.nodeAt(position)\n\n tr.setNodeMarkup(position, undefined, {\n ...currentNode?.attrs,\n checked,\n })\n\n return true\n })\n .run()\n }\n if (!editor.isEditable && this.options.onReadOnlyChecked) {\n // Reset state if onReadOnlyChecked returns false\n if (!this.options.onReadOnlyChecked(node, checked)) {\n checkbox.checked = !checkbox.checked\n }\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 checkbox.checked = node.attrs.checked\n\n checkboxWrapper.append(checkbox, checkboxStyler)\n listItem.append(checkboxWrapper, content)\n\n Object.entries(HTMLAttributes).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 checkbox.checked = updatedNode.attrs.checked\n updateA11Y()\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"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-list",
|
|
3
3
|
"description": "List extension for tiptap",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.23",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -87,12 +87,12 @@
|
|
|
87
87
|
"dist"
|
|
88
88
|
],
|
|
89
89
|
"devDependencies": {
|
|
90
|
-
"@tiptap/core": "3.0.0-beta.
|
|
91
|
-
"@tiptap/pm": "3.0.0-beta.
|
|
90
|
+
"@tiptap/core": "3.0.0-beta.23",
|
|
91
|
+
"@tiptap/pm": "3.0.0-beta.23"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|
|
94
|
-
"@tiptap/core": "3.0.0-beta.
|
|
95
|
-
"@tiptap/pm": "3.0.0-beta.
|
|
94
|
+
"@tiptap/core": "3.0.0-beta.23",
|
|
95
|
+
"@tiptap/pm": "3.0.0-beta.23"
|
|
96
96
|
},
|
|
97
97
|
"repository": {
|
|
98
98
|
"type": "git",
|
|
@@ -31,6 +31,19 @@ export interface TaskItemOptions {
|
|
|
31
31
|
* @example 'myCustomTaskList'
|
|
32
32
|
*/
|
|
33
33
|
taskListTypeName: string
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Accessibility options for the task item.
|
|
37
|
+
* @default {}
|
|
38
|
+
* @example
|
|
39
|
+
* ```js
|
|
40
|
+
* {
|
|
41
|
+
* checkboxLabel: (node) => `Task item: ${node.textContent || 'empty task item'}`
|
|
42
|
+
* }
|
|
43
|
+
*/
|
|
44
|
+
a11y?: {
|
|
45
|
+
checkboxLabel?: (node: ProseMirrorNode, checked: boolean) => string
|
|
46
|
+
}
|
|
34
47
|
}
|
|
35
48
|
|
|
36
49
|
/**
|
|
@@ -50,6 +63,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
|
|
50
63
|
nested: false,
|
|
51
64
|
HTMLAttributes: {},
|
|
52
65
|
taskListTypeName: 'taskList',
|
|
66
|
+
a11y: undefined,
|
|
53
67
|
}
|
|
54
68
|
},
|
|
55
69
|
|
|
@@ -132,6 +146,14 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
|
|
132
146
|
const checkbox = document.createElement('input')
|
|
133
147
|
const content = document.createElement('div')
|
|
134
148
|
|
|
149
|
+
const updateA11Y = () => {
|
|
150
|
+
checkbox.ariaLabel =
|
|
151
|
+
this.options.a11y?.checkboxLabel?.(node, checkbox.checked) ||
|
|
152
|
+
`Task item checkbox for ${node.textContent || 'empty task item'}`
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
updateA11Y()
|
|
156
|
+
|
|
135
157
|
checkboxWrapper.contentEditable = 'false'
|
|
136
158
|
checkbox.type = 'checkbox'
|
|
137
159
|
checkbox.addEventListener('mousedown', event => event.preventDefault())
|
|
@@ -199,6 +221,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
|
|
199
221
|
|
|
200
222
|
listItem.dataset.checked = updatedNode.attrs.checked
|
|
201
223
|
checkbox.checked = updatedNode.attrs.checked
|
|
224
|
+
updateA11Y()
|
|
202
225
|
|
|
203
226
|
return true
|
|
204
227
|
},
|