mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 11:49:02 +08:00
Respond to review feedback
This commit is contained in:
parent
71e941f3da
commit
515300bb26
@ -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 function returns false, the check state will be preserved (`readOnly`).
|
||||
|
||||
```js
|
||||
TaskItem.configure({
|
||||
onReadOnlyChecked: (node, checked) => {
|
||||
|
@ -2,7 +2,7 @@ import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
|
||||
import { Node as ProseMirrorNode } from 'prosemirror-model'
|
||||
|
||||
export interface TaskItemOptions {
|
||||
onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => void
|
||||
onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean
|
||||
nested: boolean
|
||||
HTMLAttributes: Record<string, any>
|
||||
}
|
||||
@ -30,8 +30,8 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
||||
checked: {
|
||||
default: false,
|
||||
keepOnSplit: false,
|
||||
parseHTML: element => element.getAttribute('data-checked') === 'true',
|
||||
renderHTML: attributes => ({
|
||||
parseHTML: (element) => element.getAttribute('data-checked') === 'true',
|
||||
renderHTML: (attributes) => ({
|
||||
'data-checked': attributes.checked,
|
||||
}),
|
||||
},
|
||||
@ -85,9 +85,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ({
|
||||
node, HTMLAttributes, getPos, editor,
|
||||
}) => {
|
||||
return ({ node, HTMLAttributes, getPos, editor }) => {
|
||||
const listItem = document.createElement('li')
|
||||
const checkboxWrapper = document.createElement('label')
|
||||
const checkboxStyler = document.createElement('span')
|
||||
@ -96,7 +94,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
||||
|
||||
checkboxWrapper.contentEditable = 'false'
|
||||
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
|
||||
// readonly checks we have to undo the latest change
|
||||
if (!editor.isEditable && !this.options.onReadOnlyChecked) {
|
||||
@ -125,7 +123,10 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
||||
.run()
|
||||
}
|
||||
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 {
|
||||
dom: listItem,
|
||||
contentDOM: content,
|
||||
update: updatedNode => {
|
||||
update: (updatedNode) => {
|
||||
if (updatedNode.type !== this.type) {
|
||||
return false
|
||||
}
|
||||
@ -171,7 +172,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
||||
wrappingInputRule({
|
||||
find: inputRegex,
|
||||
type: this.type,
|
||||
getAttributes: match => ({
|
||||
getAttributes: (match) => ({
|
||||
checked: match[match.length - 1] === 'x',
|
||||
}),
|
||||
}),
|
||||
|
Loading…
Reference in New Issue
Block a user