vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

tiptap editor #2222

Merged
konrad merged 66 commits from dpschen/frontend:feature/feat-tiptap-editor into main 2023-10-22 13:49:01 +00:00
Conversation 3 Commits 66 Files Changed 28 +45 -91
3 changed files with 45 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 76d31c84ad - Show all commits

116
src/components/input/editor/EditorToolbar.vue
View File

@ -5,7 +5,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
title="h1" v-tooltip="$t('input.editor.heading1')"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>1 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>1
</BaseButton> </BaseButton>
@ -13,7 +13,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
title="h2" v-tooltip="$t('input.editor.heading2')"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>2 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>2
</BaseButton> </BaseButton>
@ -21,34 +21,10 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
title="h3" v-tooltip="$t('input.editor.heading3')"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>3 <span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>3
</BaseButton> </BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
title="h4"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>4
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
title="h5"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>5
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
title="h6"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>6
</BaseButton>
</div> </div>
<div class="editor-toolbar__segment"> <div class="editor-toolbar__segment">
@ -56,7 +32,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
title="bold" v-tooltip="$t('input.editor.bold')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-bold']"/> <icon :icon="['fa', 'fa-bold']"/>
@ -66,17 +42,27 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
title="italic" v-tooltip="$t('input.editor.italic')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-italic']"/> <icon :icon="['fa', 'fa-italic']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleUnderline().run()"
:class="{ 'is-active': editor.isActive('underline') }"
v-tooltip="$t('input.editor.underline')"
>
<span class="icon">
<icon :icon="['fa', 'fa-underline']"/>
</span>
</BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleStrike().run()" @click="editor.chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }" :class="{ 'is-active': editor.isActive('strike') }"
title="strike" v-tooltip="$t('input.editor.strikethrough')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-strikethrough']"/> <icon :icon="['fa', 'fa-strikethrough']"/>
@ -85,21 +71,11 @@
</div> </div>
<div class="editor-toolbar__segment"> <div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }"
title="code"
>
<span class="icon">
<icon :icon="['fa', 'fa-code']"/>
</span>
</BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleCodeBlock().run()" @click="editor.chain().focus().toggleCodeBlock().run()"
:class="{ 'is-active': editor.isActive('codeBlock') }" :class="{ 'is-active': editor.isActive('codeBlock') }"
title="code block" v-tooltip="$t('input.editor.code')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-code']"/> <icon :icon="['fa', 'fa-code']"/>
@ -109,7 +85,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleBlockquote().run()" @click="editor.chain().focus().toggleBlockquote().run()"
:class="{ 'is-active': editor.isActive('blockquote') }" :class="{ 'is-active': editor.isActive('blockquote') }"
title="quote" v-tooltip="$t('input.editor.quote')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-quote-right']"/> <icon :icon="['fa', 'fa-quote-right']"/>
@ -122,7 +98,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleBulletList().run()" @click="editor.chain().focus().toggleBulletList().run()"
:class="{ 'is-active': editor.isActive('bulletList') }" :class="{ 'is-active': editor.isActive('bulletList') }"
title="bullet list" v-tooltip="$t('input.editor.bulletList')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-list-ol']"/> <icon :icon="['fa', 'fa-list-ol']"/>
@ -132,7 +108,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleOrderedList().run()" @click="editor.chain().focus().toggleOrderedList().run()"
:class="{ 'is-active': editor.isActive('orderedList') }" :class="{ 'is-active': editor.isActive('orderedList') }"
title="ordered list" v-tooltip="$t('input.editor.orderedList')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-list-ul']"/> <icon :icon="['fa', 'fa-list-ul']"/>
@ -142,7 +118,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().toggleTaskList().run()" @click="editor.chain().focus().toggleTaskList().run()"
:class="{ 'is-active': editor.isActive('taskList') }" :class="{ 'is-active': editor.isActive('taskList') }"
title="task list" v-tooltip="$t('input.editor.taskList')"
> >
<span class="icon"> <span class="icon">
<icon icon="fa-list-check"/> <icon icon="fa-list-check"/>
@ -151,54 +127,35 @@
</div> </div>
<div class="editor-toolbar__segment"> <div class="editor-toolbar__segment">
<BaseButton class="editor-toolbar__button" @click="openImagePicker" title="Add image"> <BaseButton
class="editor-toolbar__button"
@click="openImagePicker"
v-tooltip="$t('input.editor.image')"
>
<span class="icon"> <span class="icon">
<icon icon="fa-image"/> <icon icon="fa-image"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().unsetAllMarks().run()"
>
<icon icon="xmark"/>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().clearNodes().run()"
>
<icon icon="xmarks-lines"/>
</BaseButton>
</div>
<div class="editor-toolbar__segment"> <div class="editor-toolbar__segment">
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="setLink" @click="setLink"
:class="{ 'is-active': editor.isActive('link') }" :class="{ 'is-active': editor.isActive('link') }"
title="set link" title="set link"
v-tooltip="$t('input.editor.link')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-link']"/> <icon :icon="['fa', 'fa-link']"/>
</span> </span>
</BaseButton> </BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().unsetLink().run()"
:disabled="!editor.isActive('link')"
title="unset link"
>
<span class="icon">
<icon :icon="['fa', 'fa-unlink']"/>
</span>
</BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().setParagraph().run()" @click="editor.chain().focus().setParagraph().run()"
:class="{ 'is-active': editor.isActive('paragraph') }" :class="{ 'is-active': editor.isActive('paragraph') }"
title="paragraph" title="paragraph"
v-tooltip="$t('input.editor.text')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-paragraph']"/> <icon :icon="['fa', 'fa-paragraph']"/>
@ -208,17 +165,10 @@
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().setHorizontalRule().run()" @click="editor.chain().focus().setHorizontalRule().run()"
> v-tooltip="$t('input.editor.horizontalRule')"
<span class="editor-toolbar__pseudo-icon">
-
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().setHardBreak().run()"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-arrow-turn-down']"/> <icon :icon="['fa', 'fa-ruler-horizontal']"/>
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -227,7 +177,7 @@
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().undo().run()" @click="editor.chain().focus().undo().run()"
title="undo" v-tooltip="$t('input.editor.undo')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-undo']"/> <icon :icon="['fa', 'fa-undo']"/>
@ -236,7 +186,7 @@
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@click="editor.chain().focus().redo().run()" @click="editor.chain().focus().redo().run()"
title="redo" v-tooltip="$t('input.editor.redo')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-redo']"/> <icon :icon="['fa', 'fa-redo']"/>
@ -250,7 +200,7 @@
class="editor-toolbar__button" class="editor-toolbar__button"
@click="toggleTableMode" @click="toggleTableMode"
:class="{ 'is-active': editor.isActive('table') }" :class="{ 'is-active': editor.isActive('table') }"
title="table" v-tooltip="$t('input.editor.table.title')"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-table']"/> <icon :icon="['fa', 'fa-table']"/>

12
src/components/input/editor/TipTap.vue
View File

@ -14,7 +14,7 @@
class="editor-bubble__button" class="editor-bubble__button"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
title="bold" v-tooltip="$t('input.editor.bold')"
> >
<icon :icon="['fa', 'fa-bold']"/> <icon :icon="['fa', 'fa-bold']"/>
</BaseButton> </BaseButton>
@ -22,7 +22,7 @@
class="editor-bubble__button" class="editor-bubble__button"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
title="italic" v-tooltip="$t('input.editor.italic')"
> >
<icon :icon="['fa', 'fa-italic']"/> <icon :icon="['fa', 'fa-italic']"/>
</BaseButton> </BaseButton>
@ -30,7 +30,7 @@
class="editor-bubble__button" class="editor-bubble__button"
@click="editor.chain().focus().toggleUnderline().run()" @click="editor.chain().focus().toggleUnderline().run()"
:class="{ 'is-active': editor.isActive('underline') }" :class="{ 'is-active': editor.isActive('underline') }"
title="italic" v-tooltip="$t('input.editor.underline')"
> >
<icon :icon="['fa', 'fa-underline']"/> <icon :icon="['fa', 'fa-underline']"/>
</BaseButton> </BaseButton>
@ -38,7 +38,7 @@
class="editor-bubble__button" class="editor-bubble__button"
@click="editor.chain().focus().toggleStrike().run()" @click="editor.chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }" :class="{ 'is-active': editor.isActive('strike') }"
title="strike" v-tooltip="$t('input.editor.strikethrough')"
> >
<icon :icon="['fa', 'fa-strikethrough']"/> <icon :icon="['fa', 'fa-strikethrough']"/>
</BaseButton> </BaseButton>
@ -46,7 +46,7 @@
class="editor-bubble__button" class="editor-bubble__button"
@click="editor.chain().focus().toggleCode().run()" @click="editor.chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }" :class="{ 'is-active': editor.isActive('code') }"
title="code" v-tooltip="$t('input.editor.code')"
> >
<icon :icon="['fa', 'fa-code']"/> <icon :icon="['fa', 'fa-code']"/>
</BaseButton> </BaseButton>
@ -54,7 +54,7 @@
class="editor-bubble__button" class="editor-bubble__button"
@click="setLink" @click="setLink"
:class="{ 'is-active': editor.isActive('link') }" :class="{ 'is-active': editor.isActive('link') }"
title="set link" v-tooltip="$t('input.editor.link')"
> >
<icon :icon="['fa', 'fa-link']"/> <icon :icon="['fa', 'fa-link']"/>
</BaseButton> </BaseButton>

8
src/i18n/lang/en.json
View File

@ -524,14 +524,15 @@
"bold": "Bold", "bold": "Bold",
"italic": "Italic", "italic": "Italic",
"strikethrough": "Strikethrough", "strikethrough": "Strikethrough",
"underline": "Underline",
"code": "Code", "code": "Code",
"codeTooltip": "Capture a code snippet.", "codeTooltip": "Capture a code snippet.",
"quote": "Quote", "quote": "Quote",
"quoteTooltip": "Capture a quote.", "quoteTooltip": "Capture a quote.",
"bulletList": "Bullet list", "bulletList": "Bullet list",
"bulletListTooltip": "Create a simple bullet list.", "bulletListTooltip": "Create a simple bullet list.",
"unorderedList": "Unordered List", "unorderedList": "Unordered list",
"orderedList": "Ordered List", "orderedList": "Ordered list",
"orderedListTooltip": "Create a list with numbering.", "orderedListTooltip": "Create a list with numbering.",
"cleanBlock": "Clean Block", "cleanBlock": "Clean Block",
"link": "Link", "link": "Link",
@ -546,7 +547,10 @@
"textTooltip": "Just start typing with plain text.", "textTooltip": "Just start typing with plain text.",
"taskList": "Task list", "taskList": "Task list",
"taskListTooltip": "Track tasks with a to-do list.", "taskListTooltip": "Track tasks with a to-do list.",
"undo": "Undo",
"redo": "Redo",
"table": { "table": {
"title": "Table",
"insert": "Insert table", "insert": "Insert table",
"addColumnBefore": "Add column before", "addColumnBefore": "Add column before",
"addColumnAfter": "Add column after", "addColumnAfter": "Add column after",