feat: use TipTap starter-kit
This commit is contained in:
Dominik Pschenitschni
@@ -60,37 +60,22 @@
|
||||
"@sentry/tracing": "7.120.3",
|
||||
"@sentry/vue": "8.48.0",
|
||||
"@tiptap/core": "2.11.2",
|
||||
"@tiptap/extension-blockquote": "2.11.2",
|
||||
"@tiptap/extension-bold": "2.11.2",
|
||||
"@tiptap/extension-bullet-list": "2.11.2",
|
||||
"@tiptap/extension-code": "2.11.2",
|
||||
"@tiptap/extension-code-block": "2.11.2",
|
||||
"@tiptap/extension-code-block-lowlight": "2.11.2",
|
||||
"@tiptap/extension-document": "2.11.2",
|
||||
"@tiptap/extension-dropcursor": "2.11.2",
|
||||
"@tiptap/extension-gapcursor": "2.11.2",
|
||||
"@tiptap/extension-hard-break": "2.11.2",
|
||||
"@tiptap/extension-heading": "2.11.2",
|
||||
"@tiptap/extension-history": "2.11.2",
|
||||
"@tiptap/extension-horizontal-rule": "2.11.2",
|
||||
"@tiptap/extension-image": "2.11.2",
|
||||
"@tiptap/extension-italic": "2.11.2",
|
||||
"@tiptap/extension-link": "2.11.2",
|
||||
"@tiptap/extension-list-item": "2.11.2",
|
||||
"@tiptap/extension-ordered-list": "2.11.2",
|
||||
"@tiptap/extension-paragraph": "2.11.2",
|
||||
"@tiptap/extension-placeholder": "2.11.2",
|
||||
"@tiptap/extension-strike": "2.11.2",
|
||||
"@tiptap/extension-table": "2.11.2",
|
||||
"@tiptap/extension-table-cell": "2.11.2",
|
||||
"@tiptap/extension-table-header": "2.11.2",
|
||||
"@tiptap/extension-table-row": "2.11.2",
|
||||
"@tiptap/extension-task-item": "2.11.2",
|
||||
"@tiptap/extension-task-list": "2.11.2",
|
||||
"@tiptap/extension-text": "2.11.2",
|
||||
"@tiptap/extension-typography": "2.11.2",
|
||||
"@tiptap/extension-underline": "2.11.2",
|
||||
"@tiptap/pm": "2.11.2",
|
||||
"@tiptap/starter-kit": "^2.11.2",
|
||||
"@tiptap/suggestion": "2.11.2",
|
||||
"@tiptap/vue-3": "2.11.2",
|
||||
"@vueuse/core": "12.4.0",
|
||||
|
||||
87
frontend/pnpm-lock.yaml
generated
87
frontend/pnpm-lock.yaml
generated
@@ -49,69 +49,24 @@ importers:
|
||||
'@tiptap/core':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-blockquote':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-bold':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-bullet-list':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-code':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-code-block':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-code-block-lowlight':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/extension-code-block@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)(highlight.js@11.8.0)(lowlight@2.9.0)
|
||||
'@tiptap/extension-document':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-dropcursor':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-gapcursor':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-hard-break':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-heading':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-history':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-horizontal-rule':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-image':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-italic':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-link':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-list-item':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-ordered-list':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-paragraph':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-placeholder':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-strike':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-table':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
@@ -130,9 +85,6 @@ importers:
|
||||
'@tiptap/extension-task-list':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-text':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-typography':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
@@ -142,6 +94,9 @@ importers:
|
||||
'@tiptap/pm':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2
|
||||
'@tiptap/starter-kit':
|
||||
specifier: ^2.11.2
|
||||
version: 2.11.2
|
||||
'@tiptap/suggestion':
|
||||
specifier: 2.11.2
|
||||
version: 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
@@ -2339,6 +2294,11 @@ packages:
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-text-style@2.11.2':
|
||||
resolution: {integrity: sha512-RAa7BTwEOJRZN3EB2lg03KXyu7JC/Ce96cerh3D0Fo78yrtKOArPaiVHoTki6ZEIG43ccHEit1PPjMYxivPPeg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-text@2.11.2':
|
||||
resolution: {integrity: sha512-fJZeKYM5jeJ7NpS3FWLnC/NAvg+mZNbcTaRgXMo5ljBCgiMcYHhYg9p/RHk4SeICZBBpR9WSSZXHMACd9CbJiA==}
|
||||
peerDependencies:
|
||||
@@ -2357,6 +2317,9 @@ packages:
|
||||
'@tiptap/pm@2.11.2':
|
||||
resolution: {integrity: sha512-lNOMFRcD0mGy7Hf8tFMHW/fnglvq3dA0grs0QrSY4cHyYbH9BHtQjLMDceczXdXbXZq7nEqC40UBWNnqtaclpw==}
|
||||
|
||||
'@tiptap/starter-kit@2.11.2':
|
||||
resolution: {integrity: sha512-FUIblP9BSmBzskf/aX7AIcUK5XP5Gi/VqUqm5evCkzlR1FrggLoy+vY+CX0me4oE/WYk4KAgIRXkE9tcbwotQA==}
|
||||
|
||||
'@tiptap/suggestion@2.11.2':
|
||||
resolution: {integrity: sha512-jA06veq7Ko7+yeyy4pymTGdqHfWNydDIioPCR0yddbon+3+aLP2hE31J+/1/8FmhSoE0qJsEki3/RU7pKTLgrg==}
|
||||
peerDependencies:
|
||||
@@ -8751,6 +8714,10 @@ snapshots:
|
||||
dependencies:
|
||||
'@tiptap/core': 2.11.2(@tiptap/pm@2.11.2)
|
||||
|
||||
'@tiptap/extension-text-style@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.11.2(@tiptap/pm@2.11.2)
|
||||
|
||||
'@tiptap/extension-text@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.11.2(@tiptap/pm@2.11.2)
|
||||
@@ -8784,6 +8751,30 @@ snapshots:
|
||||
prosemirror-transform: 1.10.2
|
||||
prosemirror-view: 1.37.0
|
||||
|
||||
'@tiptap/starter-kit@2.11.2':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.11.2(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-blockquote': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-bold': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-bullet-list': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-code': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-code-block': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-document': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-dropcursor': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-gapcursor': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-hard-break': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-heading': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-history': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-horizontal-rule': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)
|
||||
'@tiptap/extension-italic': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-list-item': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-ordered-list': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-paragraph': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-strike': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-text': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/extension-text-style': 2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))
|
||||
'@tiptap/pm': 2.11.2
|
||||
|
||||
'@tiptap/suggestion@2.11.2(@tiptap/core@2.11.2(@tiptap/pm@2.11.2))(@tiptap/pm@2.11.2)':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.11.2(@tiptap/pm@2.11.2)
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
v-tooltip="$t('input.editor.bold')"
|
||||
class="editor-bubble__button"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
@click="() => editor?.chain().focus().toggleBold().run()"
|
||||
>
|
||||
<Icon :icon="['fa', 'fa-bold']" />
|
||||
</BaseButton>
|
||||
@@ -25,7 +25,7 @@
|
||||
v-tooltip="$t('input.editor.italic')"
|
||||
class="editor-bubble__button"
|
||||
:class="{ 'is-active': editor.isActive('italic') }"
|
||||
@click="editor.chain().focus().toggleItalic().run()"
|
||||
@click="() => editor?.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
<Icon :icon="['fa', 'fa-italic']" />
|
||||
</BaseButton>
|
||||
@@ -33,7 +33,7 @@
|
||||
v-tooltip="$t('input.editor.underline')"
|
||||
class="editor-bubble__button"
|
||||
:class="{ 'is-active': editor.isActive('underline') }"
|
||||
@click="editor.chain().focus().toggleUnderline().run()"
|
||||
@click="() => editor?.chain().focus().toggleUnderline().run()"
|
||||
>
|
||||
<Icon :icon="['fa', 'fa-underline']" />
|
||||
</BaseButton>
|
||||
@@ -41,7 +41,7 @@
|
||||
v-tooltip="$t('input.editor.strikethrough')"
|
||||
class="editor-bubble__button"
|
||||
:class="{ 'is-active': editor.isActive('strike') }"
|
||||
@click="editor.chain().focus().toggleStrike().run()"
|
||||
@click="() => editor?.chain().focus().toggleStrike().run()"
|
||||
>
|
||||
<Icon :icon="['fa', 'fa-strikethrough']" />
|
||||
</BaseButton>
|
||||
@@ -49,7 +49,7 @@
|
||||
v-tooltip="$t('input.editor.code')"
|
||||
class="editor-bubble__button"
|
||||
:class="{ 'is-active': editor.isActive('code') }"
|
||||
@click="editor.chain().focus().toggleCode().run()"
|
||||
@click="() => editor?.chain().focus().toggleCode().run()"
|
||||
>
|
||||
<Icon :icon="['fa', 'fa-code']" />
|
||||
</BaseButton>
|
||||
@@ -87,7 +87,7 @@
|
||||
<li>
|
||||
<BaseButton
|
||||
class="done-edit"
|
||||
@click="setEdit"
|
||||
@click="() => setEdit()"
|
||||
>
|
||||
{{ $t('input.editor.edit') }}
|
||||
</BaseButton>
|
||||
@@ -108,7 +108,7 @@
|
||||
<li v-if="!isEditing">
|
||||
<BaseButton
|
||||
class="done-edit"
|
||||
@click="setEdit"
|
||||
@click="() => setEdit()"
|
||||
>
|
||||
{{ $t('input.editor.edit') }}
|
||||
</BaseButton>
|
||||
@@ -138,11 +138,16 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {eventToHotkeyString} from '@github/hotkey'
|
||||
|
||||
import EditorToolbar from './EditorToolbar.vue'
|
||||
|
||||
import Link from '@tiptap/extension-link'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import {Extension, mergeAttributes} from '@tiptap/core'
|
||||
import {BubbleMenu, EditorContent, type Extensions, useEditor} from '@tiptap/vue-3'
|
||||
|
||||
import Link from '@tiptap/extension-link'
|
||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||||
import Table from '@tiptap/extension-table'
|
||||
import TableCell from '@tiptap/extension-table-cell'
|
||||
@@ -151,28 +156,12 @@ import TableRow from '@tiptap/extension-table-row'
|
||||
import Typography from '@tiptap/extension-typography'
|
||||
import Image from '@tiptap/extension-image'
|
||||
import Underline from '@tiptap/extension-underline'
|
||||
import {Placeholder} from '@tiptap/extension-placeholder'
|
||||
|
||||
import TaskItem from '@tiptap/extension-task-item'
|
||||
import TaskList from '@tiptap/extension-task-list'
|
||||
import HardBreak from '@tiptap/extension-hard-break'
|
||||
|
||||
import {Blockquote} from '@tiptap/extension-blockquote'
|
||||
import {Bold} from '@tiptap/extension-bold'
|
||||
import {BulletList} from '@tiptap/extension-bullet-list'
|
||||
import {Code} from '@tiptap/extension-code'
|
||||
import {Document} from '@tiptap/extension-document'
|
||||
import {Dropcursor} from '@tiptap/extension-dropcursor'
|
||||
import {Gapcursor} from '@tiptap/extension-gapcursor'
|
||||
import {HardBreak} from '@tiptap/extension-hard-break'
|
||||
import {Heading} from '@tiptap/extension-heading'
|
||||
import {History} from '@tiptap/extension-history'
|
||||
import {HorizontalRule} from '@tiptap/extension-horizontal-rule'
|
||||
import {Italic} from '@tiptap/extension-italic'
|
||||
import {ListItem} from '@tiptap/extension-list-item'
|
||||
import {OrderedList} from '@tiptap/extension-ordered-list'
|
||||
import {Paragraph} from '@tiptap/extension-paragraph'
|
||||
import {Strike} from '@tiptap/extension-strike'
|
||||
import {Text} from '@tiptap/extension-text'
|
||||
import {BubbleMenu, EditorContent, type Extensions, useEditor} from '@tiptap/vue-3'
|
||||
import {Node} from '@tiptap/pm/model'
|
||||
|
||||
import Commands from './commands'
|
||||
@@ -185,12 +174,9 @@ import type {ITask} from '@/modelTypes/ITask'
|
||||
import type {IAttachment} from '@/modelTypes/IAttachment'
|
||||
import AttachmentModel from '@/models/attachment'
|
||||
import AttachmentService from '@/services/attachment'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import XButton from '@/components/input/Button.vue'
|
||||
import {Placeholder} from '@tiptap/extension-placeholder'
|
||||
import {eventToHotkeyString} from '@github/hotkey'
|
||||
import {Extension, mergeAttributes} from '@tiptap/core'
|
||||
|
||||
import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
|
||||
import inputPrompt from '@/helpers/inputPrompt'
|
||||
import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
|
||||
@@ -351,16 +337,14 @@ const additionalLinkProtocols = [
|
||||
|
||||
const extensions : Extensions = [
|
||||
// Starterkit:
|
||||
Blockquote,
|
||||
Bold,
|
||||
BulletList,
|
||||
Code,
|
||||
StarterKit.configure({
|
||||
codeBlock: false,
|
||||
hardBreak: false,
|
||||
}),
|
||||
|
||||
CodeBlockLowlight.configure({
|
||||
lowlight,
|
||||
}),
|
||||
Document,
|
||||
Dropcursor,
|
||||
Gapcursor,
|
||||
HardBreak.extend({
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
@@ -374,15 +358,6 @@ const extensions : Extensions = [
|
||||
}
|
||||
},
|
||||
}),
|
||||
Heading,
|
||||
History,
|
||||
HorizontalRule,
|
||||
Italic,
|
||||
ListItem,
|
||||
OrderedList,
|
||||
Paragraph,
|
||||
Strike,
|
||||
Text,
|
||||
|
||||
Placeholder.configure({
|
||||
placeholder: ({editor}) => {
|
||||
@@ -451,7 +426,6 @@ const extensions : Extensions = [
|
||||
Commands.configure({
|
||||
suggestion: suggestionSetup(t),
|
||||
}),
|
||||
BubbleMenu,
|
||||
]
|
||||
|
||||
// Add a custom extension for the Escape key
|
||||
|
||||
Reference in New Issue
Block a user