feat: use TipTap starter-kit
This commit is contained in:
Dominik Pschenitschni
parent
6e417d92ae
commit
fc91cf6013
|
|
@ -60,37 +60,22 @@
|
|||
"@sentry/tracing": "7.114.0",
|
||||
"@sentry/vue": "8.47.0",
|
||||
"@tiptap/core": "2.10.4",
|
||||
"@tiptap/extension-blockquote": "2.10.4",
|
||||
"@tiptap/extension-bold": "2.10.4",
|
||||
"@tiptap/extension-bullet-list": "2.10.4",
|
||||
"@tiptap/extension-code": "2.10.4",
|
||||
"@tiptap/extension-code-block": "2.10.4",
|
||||
"@tiptap/extension-code-block-lowlight": "2.10.4",
|
||||
"@tiptap/extension-document": "2.10.4",
|
||||
"@tiptap/extension-dropcursor": "2.10.4",
|
||||
"@tiptap/extension-gapcursor": "2.10.4",
|
||||
"@tiptap/extension-hard-break": "2.10.4",
|
||||
"@tiptap/extension-heading": "2.10.4",
|
||||
"@tiptap/extension-history": "2.10.4",
|
||||
"@tiptap/extension-horizontal-rule": "2.10.4",
|
||||
"@tiptap/extension-image": "2.10.4",
|
||||
"@tiptap/extension-italic": "2.10.4",
|
||||
"@tiptap/extension-link": "2.10.4",
|
||||
"@tiptap/extension-list-item": "2.10.4",
|
||||
"@tiptap/extension-ordered-list": "2.10.4",
|
||||
"@tiptap/extension-paragraph": "2.10.4",
|
||||
"@tiptap/extension-placeholder": "2.10.4",
|
||||
"@tiptap/extension-strike": "2.10.4",
|
||||
"@tiptap/extension-table": "2.10.4",
|
||||
"@tiptap/extension-table-cell": "2.10.4",
|
||||
"@tiptap/extension-table-header": "2.10.4",
|
||||
"@tiptap/extension-table-row": "2.10.4",
|
||||
"@tiptap/extension-task-item": "2.10.4",
|
||||
"@tiptap/extension-task-list": "2.10.4",
|
||||
"@tiptap/extension-text": "2.10.4",
|
||||
"@tiptap/extension-typography": "2.10.4",
|
||||
"@tiptap/extension-underline": "2.10.4",
|
||||
"@tiptap/pm": "2.10.4",
|
||||
"@tiptap/starter-kit": "^2.10.4",
|
||||
"@tiptap/suggestion": "2.10.4",
|
||||
"@tiptap/vue-3": "2.10.4",
|
||||
"@vueuse/core": "12.2.0",
|
||||
|
|
|
|||
|
|
@ -49,69 +49,24 @@ importers:
|
|||
'@tiptap/core':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-blockquote':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-bold':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-bullet-list':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-code':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-code-block':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-code-block-lowlight':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/extension-code-block@2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)(highlight.js@11.8.0)(lowlight@2.9.0)
|
||||
'@tiptap/extension-document':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-dropcursor':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-gapcursor':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-hard-break':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-heading':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-history':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-horizontal-rule':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-image':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-italic':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-link':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-list-item':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-ordered-list':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-paragraph':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-placeholder':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-strike':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-table':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
|
|
@ -130,9 +85,6 @@ importers:
|
|||
'@tiptap/extension-task-list':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-text':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-typography':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
|
|
@ -142,6 +94,9 @@ importers:
|
|||
'@tiptap/pm':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4
|
||||
'@tiptap/starter-kit':
|
||||
specifier: ^2.10.4
|
||||
version: 2.10.4
|
||||
'@tiptap/suggestion':
|
||||
specifier: 2.10.4
|
||||
version: 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
|
|
@ -2339,6 +2294,11 @@ packages:
|
|||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-text-style@2.10.4':
|
||||
resolution: {integrity: sha512-ibq7avkcwHyUSG53Hf+P31rrwsKVbbiqbWZM4kXC7M2X3iUwFrtvaa+SWzyWQfE1jl2cCrD1+rfSkj/alcOKGg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-text@2.10.4':
|
||||
resolution: {integrity: sha512-wPdVxCHrIS9S+8n08lgyyqRZPj9FBbyLlFt74/lV5yBC3LOorq1VKdjrTskmaj4jud7ImXoKDyBddAYTHdJ1xw==}
|
||||
peerDependencies:
|
||||
|
|
@ -2357,6 +2317,9 @@ packages:
|
|||
'@tiptap/pm@2.10.4':
|
||||
resolution: {integrity: sha512-pZ4NEkRtYoDLe0spARvXZ1N3hNv/5u6vfPdPtEbmNpoOSjSNqDC1kVM+qJY0iaCYpxbxcv7cxn3kBumcFLQpJQ==}
|
||||
|
||||
'@tiptap/starter-kit@2.10.4':
|
||||
resolution: {integrity: sha512-tu/WCs9Mkr5Nt8c3/uC4VvAbQlVX0OY7ygcqdzHGUeG9zP3twdW7o5xM3kyDKR2++sbVzqu5Ll5qNU+1JZvPGQ==}
|
||||
|
||||
'@tiptap/suggestion@2.10.4':
|
||||
resolution: {integrity: sha512-7Bzcn1REA7OmVRxiMF2kVK9EhosXotdLAGaEvSbn4zQtHCJG0tREuYvPy53LGzVuPkBDR6Pf6sp1QbGvSne/8g==}
|
||||
peerDependencies:
|
||||
|
|
@ -8714,6 +8677,10 @@ snapshots:
|
|||
dependencies:
|
||||
'@tiptap/core': 2.10.4(@tiptap/pm@2.10.4)
|
||||
|
||||
'@tiptap/extension-text-style@2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.10.4(@tiptap/pm@2.10.4)
|
||||
|
||||
'@tiptap/extension-text@2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.10.4(@tiptap/pm@2.10.4)
|
||||
|
|
@ -8747,6 +8714,30 @@ snapshots:
|
|||
prosemirror-transform: 1.10.2
|
||||
prosemirror-view: 1.37.0
|
||||
|
||||
'@tiptap/starter-kit@2.10.4':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.10.4(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-blockquote': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-bold': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-bullet-list': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-code': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-code-block': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-document': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-dropcursor': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-gapcursor': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-hard-break': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-heading': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-history': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-horizontal-rule': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)
|
||||
'@tiptap/extension-italic': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-list-item': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-ordered-list': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-paragraph': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-strike': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-text': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/extension-text-style': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
|
||||
'@tiptap/pm': 2.10.4
|
||||
|
||||
'@tiptap/suggestion@2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))(@tiptap/pm@2.10.4)':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.10.4(@tiptap/pm@2.10.4)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue