@tiptap/extension-task-item
Advanced tools
@tiptap/extension-task-item - npm Package Compare versions
Comparing version 2.0.0-beta.213 to 2.0.0-beta.214
@@ -1,155 +0,153 @@ | ||
| // src/task-item.ts | ||
| import { mergeAttributes, Node, wrappingInputRule } from "@tiptap/core"; | ||
| var inputRegex = /^\s*(\[([( |x])?\])\s$/; | ||
| var TaskItem = Node.create({ | ||
| name: "taskItem", | ||
| addOptions() { | ||
| return { | ||
| nested: false, | ||
| HTMLAttributes: {} | ||
| }; | ||
| }, | ||
| content() { | ||
| return this.options.nested ? "paragraph block*" : "paragraph+"; | ||
| }, | ||
| defining: true, | ||
| addAttributes() { | ||
| return { | ||
| checked: { | ||
| default: false, | ||
| keepOnSplit: false, | ||
| parseHTML: (element) => element.getAttribute("data-checked") === "true", | ||
| renderHTML: (attributes) => ({ | ||
| "data-checked": attributes.checked | ||
| }) | ||
| } | ||
| }; | ||
| }, | ||
| parseHTML() { | ||
| return [ | ||
| { | ||
| tag: `li[data-type="${this.name}"]`, | ||
| priority: 51 | ||
| } | ||
| ]; | ||
| }, | ||
| renderHTML({ node, HTMLAttributes }) { | ||
| return [ | ||
| "li", | ||
| mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { | ||
| "data-type": this.name | ||
| }), | ||
| [ | ||
| "label", | ||
| [ | ||
| "input", | ||
| { | ||
| type: "checkbox", | ||
| checked: node.attrs.checked ? "checked" : null | ||
| } | ||
| ], | ||
| ["span"] | ||
| ], | ||
| ["div", 0] | ||
| ]; | ||
| }, | ||
| addKeyboardShortcuts() { | ||
| const shortcuts = { | ||
| Enter: () => this.editor.commands.splitListItem(this.name), | ||
| "Shift-Tab": () => this.editor.commands.liftListItem(this.name) | ||
| }; | ||
| if (!this.options.nested) { | ||
| return shortcuts; | ||
| } | ||
| return { | ||
| ...shortcuts, | ||
| Tab: () => this.editor.commands.sinkListItem(this.name) | ||
| }; | ||
| }, | ||
| addNodeView() { | ||
| return ({ | ||
| node, | ||
| HTMLAttributes, | ||
| getPos, | ||
| editor | ||
| }) => { | ||
| const listItem = document.createElement("li"); | ||
| const checkboxWrapper = document.createElement("label"); | ||
| const checkboxStyler = document.createElement("span"); | ||
| const checkbox = document.createElement("input"); | ||
| const content = document.createElement("div"); | ||
| checkboxWrapper.contentEditable = "false"; | ||
| checkbox.type = "checkbox"; | ||
| checkbox.addEventListener("change", (event) => { | ||
| if (!editor.isEditable && !this.options.onReadOnlyChecked) { | ||
| checkbox.checked = !checkbox.checked; | ||
| return; | ||
| import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'; | ||
| const inputRegex = /^\s*(\[([( |x])?\])\s$/; | ||
| const TaskItem = Node.create({ | ||
| name: 'taskItem', | ||
| addOptions() { | ||
| return { | ||
| nested: false, | ||
| HTMLAttributes: {}, | ||
| }; | ||
| }, | ||
| content() { | ||
| return this.options.nested ? 'paragraph block*' : 'paragraph+'; | ||
| }, | ||
| defining: true, | ||
| addAttributes() { | ||
| return { | ||
| checked: { | ||
| default: false, | ||
| keepOnSplit: false, | ||
| parseHTML: element => element.getAttribute('data-checked') === 'true', | ||
| renderHTML: attributes => ({ | ||
| 'data-checked': attributes.checked, | ||
| }), | ||
| }, | ||
| }; | ||
| }, | ||
| parseHTML() { | ||
| return [ | ||
| { | ||
| tag: `li[data-type="${this.name}"]`, | ||
| priority: 51, | ||
| }, | ||
| ]; | ||
| }, | ||
| renderHTML({ node, HTMLAttributes }) { | ||
| return [ | ||
| 'li', | ||
| mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { | ||
| 'data-type': this.name, | ||
| }), | ||
| [ | ||
| 'label', | ||
| [ | ||
| 'input', | ||
| { | ||
| type: 'checkbox', | ||
| checked: node.attrs.checked ? 'checked' : null, | ||
| }, | ||
| ], | ||
| ['span'], | ||
| ], | ||
| ['div', 0], | ||
| ]; | ||
| }, | ||
| addKeyboardShortcuts() { | ||
| const shortcuts = { | ||
| Enter: () => this.editor.commands.splitListItem(this.name), | ||
| 'Shift-Tab': () => this.editor.commands.liftListItem(this.name), | ||
| }; | ||
| if (!this.options.nested) { | ||
| return shortcuts; | ||
| } | ||
| const { checked } = event.target; | ||
| if (editor.isEditable && typeof getPos === "function") { | ||
| editor.chain().focus(void 0, { scrollIntoView: false }).command(({ tr }) => { | ||
| const position = getPos(); | ||
| const currentNode = tr.doc.nodeAt(position); | ||
| tr.setNodeMarkup(position, void 0, { | ||
| ...currentNode == null ? void 0 : currentNode.attrs, | ||
| checked | ||
| return { | ||
| ...shortcuts, | ||
| Tab: () => this.editor.commands.sinkListItem(this.name), | ||
| }; | ||
| }, | ||
| addNodeView() { | ||
| return ({ node, HTMLAttributes, getPos, editor, }) => { | ||
| const listItem = document.createElement('li'); | ||
| const checkboxWrapper = document.createElement('label'); | ||
| const checkboxStyler = document.createElement('span'); | ||
| const checkbox = document.createElement('input'); | ||
| const content = document.createElement('div'); | ||
| checkboxWrapper.contentEditable = 'false'; | ||
| checkbox.type = 'checkbox'; | ||
| checkbox.addEventListener('change', event => { | ||
| // if the editor isn’t editable and we don't have a handler for | ||
| // readonly checks we have to undo the latest change | ||
| if (!editor.isEditable && !this.options.onReadOnlyChecked) { | ||
| checkbox.checked = !checkbox.checked; | ||
| return; | ||
| } | ||
| const { checked } = event.target; | ||
| if (editor.isEditable && typeof getPos === 'function') { | ||
| editor | ||
| .chain() | ||
| .focus(undefined, { scrollIntoView: false }) | ||
| .command(({ tr }) => { | ||
| const position = getPos(); | ||
| const currentNode = tr.doc.nodeAt(position); | ||
| tr.setNodeMarkup(position, undefined, { | ||
| ...currentNode === null || currentNode === void 0 ? void 0 : currentNode.attrs, | ||
| checked, | ||
| }); | ||
| return true; | ||
| }) | ||
| .run(); | ||
| } | ||
| if (!editor.isEditable && this.options.onReadOnlyChecked) { | ||
| // Reset state if onReadOnlyChecked returns false | ||
| if (!this.options.onReadOnlyChecked(node, checked)) { | ||
| checkbox.checked = !checkbox.checked; | ||
| } | ||
| } | ||
| }); | ||
| return true; | ||
| }).run(); | ||
| } | ||
| if (!editor.isEditable && this.options.onReadOnlyChecked) { | ||
| if (!this.options.onReadOnlyChecked(node, checked)) { | ||
| checkbox.checked = !checkbox.checked; | ||
| } | ||
| } | ||
| }); | ||
| Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => { | ||
| listItem.setAttribute(key, value); | ||
| }); | ||
| listItem.dataset.checked = node.attrs.checked; | ||
| if (node.attrs.checked) { | ||
| checkbox.setAttribute("checked", "checked"); | ||
| } | ||
| checkboxWrapper.append(checkbox, checkboxStyler); | ||
| listItem.append(checkboxWrapper, content); | ||
| Object.entries(HTMLAttributes).forEach(([key, value]) => { | ||
| listItem.setAttribute(key, value); | ||
| }); | ||
| return { | ||
| dom: listItem, | ||
| contentDOM: content, | ||
| update: (updatedNode) => { | ||
| if (updatedNode.type !== this.type) { | ||
| return false; | ||
| } | ||
| listItem.dataset.checked = updatedNode.attrs.checked; | ||
| if (updatedNode.attrs.checked) { | ||
| checkbox.setAttribute("checked", "checked"); | ||
| } else { | ||
| checkbox.removeAttribute("checked"); | ||
| } | ||
| return true; | ||
| } | ||
| }; | ||
| }; | ||
| }, | ||
| addInputRules() { | ||
| return [ | ||
| wrappingInputRule({ | ||
| find: inputRegex, | ||
| type: this.type, | ||
| getAttributes: (match) => ({ | ||
| checked: match[match.length - 1] === "x" | ||
| }) | ||
| }) | ||
| ]; | ||
| } | ||
| Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => { | ||
| listItem.setAttribute(key, value); | ||
| }); | ||
| listItem.dataset.checked = node.attrs.checked; | ||
| if (node.attrs.checked) { | ||
| checkbox.setAttribute('checked', 'checked'); | ||
| } | ||
| checkboxWrapper.append(checkbox, checkboxStyler); | ||
| listItem.append(checkboxWrapper, content); | ||
| Object.entries(HTMLAttributes).forEach(([key, value]) => { | ||
| listItem.setAttribute(key, value); | ||
| }); | ||
| return { | ||
| dom: listItem, | ||
| contentDOM: content, | ||
| update: updatedNode => { | ||
| if (updatedNode.type !== this.type) { | ||
| return false; | ||
| } | ||
| listItem.dataset.checked = updatedNode.attrs.checked; | ||
| if (updatedNode.attrs.checked) { | ||
| checkbox.setAttribute('checked', 'checked'); | ||
| } | ||
| else { | ||
| checkbox.removeAttribute('checked'); | ||
| } | ||
| return true; | ||
| }, | ||
| }; | ||
| }; | ||
| }, | ||
| addInputRules() { | ||
| return [ | ||
| wrappingInputRule({ | ||
| find: inputRegex, | ||
| type: this.type, | ||
| getAttributes: match => ({ | ||
| checked: match[match.length - 1] === 'x', | ||
| }), | ||
| }), | ||
| ]; | ||
| }, | ||
| }); | ||
| // src/index.ts | ||
| var src_default = TaskItem; | ||
| export { | ||
| TaskItem, | ||
| src_default as default, | ||
| inputRegex | ||
| }; | ||
| export { TaskItem, TaskItem as default, inputRegex }; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@tiptap/extension-task-item", | ||
| "description": "task item extension for tiptap", | ||
| "version": "2.0.0-beta.213", | ||
| "version": "2.0.0-beta.214", | ||
| "homepage": "https://tiptap.dev", | ||
@@ -18,3 +18,3 @@ "keywords": [ | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "types": "./dist/packages/extension-task-item/src/index.d.ts", | ||
| "import": "./dist/index.js", | ||
@@ -26,3 +26,4 @@ "require": "./dist/index.cjs" | ||
| "module": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "umd": "dist/index.umd.js", | ||
| "types": "dist/packages/extension-task-item/src/index.d.ts", | ||
| "files": [ | ||
@@ -37,4 +38,4 @@ "src", | ||
| "devDependencies": { | ||
| "@tiptap/core": "^2.0.0-beta.213", | ||
| "@tiptap/pm": "^2.0.0-beta.213" | ||
| "@tiptap/core": "^2.0.0-beta.214", | ||
| "@tiptap/pm": "^2.0.0-beta.214" | ||
| }, | ||
@@ -47,15 +48,5 @@ "repository": { | ||
| "scripts": { | ||
| "build": "tsup" | ||
| }, | ||
| "tsup": { | ||
| "entry": [ | ||
| "src/index.ts" | ||
| ], | ||
| "dts": true, | ||
| "splitting": true, | ||
| "format": [ | ||
| "esm", | ||
| "cjs" | ||
| ] | ||
| "clean": "rm -rf dist", | ||
| "build": "npm run clean && rollup -c" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by235.12%
53797
- Number of package files
- increased by71.43%
12
- Lines of code
- increased by34.46%
636
No dependency changes