vikunja/vikunja
7
43
Fork 73
Code Issues 150 Pull Requests 16 Packages Releases 32 Activity

fix(editor): add unique ids to task list items

Browse Source
This commit is contained in:
kolaente 2024-02-17 23:15:27 +01:00
parent f120d72211
commit e5e8e8d134
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/input/editor/TipTap.vue
View File

@ -19,7 +19,7 @@
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
> >
<icon :icon="['fa', 'fa-bold']" /> <icon :icon="['fa', 'fa-bold']"/>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.italic')" v-tooltip="$t('input.editor.italic')"
@ -27,7 +27,7 @@
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
> >
<icon :icon="['fa', 'fa-italic']" /> <icon :icon="['fa', 'fa-italic']"/>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.underline')" v-tooltip="$t('input.editor.underline')"
@ -35,7 +35,7 @@
:class="{ 'is-active': editor.isActive('underline') }" :class="{ 'is-active': editor.isActive('underline') }"
@click="editor.chain().focus().toggleUnderline().run()" @click="editor.chain().focus().toggleUnderline().run()"
> >
<icon :icon="['fa', 'fa-underline']" /> <icon :icon="['fa', 'fa-underline']"/>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.strikethrough')" v-tooltip="$t('input.editor.strikethrough')"
@ -43,7 +43,7 @@
:class="{ 'is-active': editor.isActive('strike') }" :class="{ 'is-active': editor.isActive('strike') }"
@click="editor.chain().focus().toggleStrike().run()" @click="editor.chain().focus().toggleStrike().run()"
> >
<icon :icon="['fa', 'fa-strikethrough']" /> <icon :icon="['fa', 'fa-strikethrough']"/>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.code')" v-tooltip="$t('input.editor.code')"
@ -51,7 +51,7 @@
:class="{ 'is-active': editor.isActive('code') }" :class="{ 'is-active': editor.isActive('code') }"
@click="editor.chain().focus().toggleCode().run()" @click="editor.chain().focus().toggleCode().run()"
> >
<icon :icon="['fa', 'fa-code']" /> <icon :icon="['fa', 'fa-code']"/>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.link')" v-tooltip="$t('input.editor.link')"
@ -59,7 +59,7 @@
:class="{ 'is-active': editor.isActive('link') }" :class="{ 'is-active': editor.isActive('link') }"
@click="setLink" @click="setLink"
> >
<icon :icon="['fa', 'fa-link']" /> <icon :icon="['fa', 'fa-link']"/>
</BaseButton> </BaseButton>
</BubbleMenu> </BubbleMenu>
@ -389,7 +389,20 @@ const editor = useEditor({
CustomImage, CustomImage,
TaskList, TaskList,
TaskItem.configure({ TaskItem.extend({
addAttributes() {
return {
...this.parent?.(),
id: {
default: () => createRandomID(),
parseHTML: element => element.getAttribute('data-id'),
renderHTML: attributes => ({
'data-id': attributes.id,
}),
},
}
},
}).configure({
nested: true, nested: true,
onReadOnlyChecked: (node: Node, checked: boolean): boolean => { onReadOnlyChecked: (node: Node, checked: boolean): boolean => {
if (!isEditEnabled) { if (!isEditEnabled) {
@ -401,7 +414,7 @@ const editor = useEditor({
// https://github.com/ueberdosis/tiptap/issues/3676 // https://github.com/ueberdosis/tiptap/issues/3676
editor.value!.state.doc.descendants((subnode, pos) => { editor.value!.state.doc.descendants((subnode, pos) => {
if (node.eq(subnode)) { if (node.attrs.id === subnode.attrs.id) {
const {tr} = editor.value!.state const {tr} = editor.value!.state
tr.setNodeMarkup(pos, undefined, { tr.setNodeMarkup(pos, undefined, {
...node.attrs, ...node.attrs,
@ -409,10 +422,10 @@ const editor = useEditor({
}) })
editor.value!.view.dispatch(tr) editor.value!.view.dispatch(tr)
bubbleSave() bubbleSave()
return true
} }
}) })
return true return true
}, },
}), }),
@ -597,7 +610,7 @@ watch(
() => isEditing.value, () => isEditing.value,
async editing => { async editing => {
await nextTick() await nextTick()
let checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]') let checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
if (typeof checkboxes === 'undefined' || checkboxes.length === 0) { if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
// For some reason, this works when we check a second time. // For some reason, this works when we check a second time.