mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-24 11:49:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Respond to review feedback

Browse Source
This commit is contained in:
Kasper Nilsson 2022-05-12 23:09:29 -07:00 committed by Dominik
parent 71e941f3da
commit 515300bb26
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/nodes/task-item.md
View File

@ -50,6 +50,8 @@ A handler for when the task item is checked or unchecked while the editor is set
If this is not supplied, the task items are immutable while the editor is `readOnly`. If this is not supplied, the task items are immutable while the editor is `readOnly`.
If this function returns false, the check state will be preserved (`readOnly`).
```js ```js
TaskItem.configure({ TaskItem.configure({
onReadOnlyChecked: (node, checked) => { onReadOnlyChecked: (node, checked) => {

21
packages/extension-task-item/src/task-item.ts
View File

@ -2,7 +2,7 @@ import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
import { Node as ProseMirrorNode } from 'prosemirror-model' import { Node as ProseMirrorNode } from 'prosemirror-model'
export interface TaskItemOptions { export interface TaskItemOptions {
onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => void onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean
nested: boolean nested: boolean
HTMLAttributes: Record<string, any> HTMLAttributes: Record<string, any>
} }
@ -30,8 +30,8 @@ export const TaskItem = Node.create<TaskItemOptions>({
checked: { checked: {
default: false, default: false,
keepOnSplit: false, keepOnSplit: false,
parseHTML: element => element.getAttribute('data-checked') === 'true', parseHTML: (element) => element.getAttribute('data-checked') === 'true',
renderHTML: attributes => ({ renderHTML: (attributes) => ({
'data-checked': attributes.checked, 'data-checked': attributes.checked,
}), }),
}, },
@ -85,9 +85,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
}, },
addNodeView() { addNodeView() {
return ({ return ({ node, HTMLAttributes, getPos, editor }) => {
node, HTMLAttributes, getPos, editor,
}) => {
const listItem = document.createElement('li') const listItem = document.createElement('li')
const checkboxWrapper = document.createElement('label') const checkboxWrapper = document.createElement('label')
const checkboxStyler = document.createElement('span') const checkboxStyler = document.createElement('span')
@ -96,7 +94,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
checkboxWrapper.contentEditable = 'false' checkboxWrapper.contentEditable = 'false'
checkbox.type = 'checkbox' checkbox.type = 'checkbox'
checkbox.addEventListener('change', event => { checkbox.addEventListener('change', (event) => {
// if the editor isn’t editable and we don't have a handler for // if the editor isn’t editable and we don't have a handler for
// readonly checks we have to undo the latest change // readonly checks we have to undo the latest change
if (!editor.isEditable && !this.options.onReadOnlyChecked) { if (!editor.isEditable && !this.options.onReadOnlyChecked) {
@ -125,7 +123,10 @@ export const TaskItem = Node.create<TaskItemOptions>({
.run() .run()
} }
if (!editor.isEditable && this.options.onReadOnlyChecked) { if (!editor.isEditable && this.options.onReadOnlyChecked) {
this.options.onReadOnlyChecked(node, checked) // Reset state if onReadOnlyChecked returns false
if (!this.options.onReadOnlyChecked(node, checked)) {
checkbox.checked = !checkbox.checked
}
} }
}) })
@ -148,7 +149,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
return { return {
dom: listItem, dom: listItem,
contentDOM: content, contentDOM: content,
update: updatedNode => { update: (updatedNode) => {
if (updatedNode.type !== this.type) { if (updatedNode.type !== this.type) {
return false return false
} }
@ -171,7 +172,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
wrappingInputRule({ wrappingInputRule({
find: inputRegex, find: inputRegex,
type: this.type, type: this.type,
getAttributes: match => ({ getAttributes: (match) => ({
checked: match[match.length - 1] === 'x', checked: match[match.length - 1] === 'x',
}), }),
}), }),