diff --git a/package.json b/package.json index b6ca35e78..dae5d2562 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@kyvg/vue3-notification": "3.0.2", "@sentry/tracing": "7.74.0", "@sentry/vue": "7.74.0", + "@tiptap/core": "^2.1.12", "@tiptap/extension-character-count": "2.0.3", "@tiptap/extension-code-block-lowlight": "2.0.3", "@tiptap/extension-document": "2.0.3", @@ -69,6 +70,7 @@ "@tiptap/extension-task-list": "2.0.3", "@tiptap/extension-typography": "2.0.3", "@tiptap/starter-kit": "2.0.3", + "@tiptap/suggestion": "^2.1.12", "@tiptap/vue-3": "2.0.3", "@types/is-touch-device": "1.0.0", "@types/lodash.clonedeep": "4.5.7", @@ -98,6 +100,7 @@ "register-service-worker": "1.7.2", "snake-case": "3.0.4", "sortablejs": "1.15.0", + "tippy.js": "^6.3.7", "ufo": "1.3.1", "vue": "3.3.6", "vue-advanced-cropper": "2.8.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac203261f..4304b5f39 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,6 +40,9 @@ dependencies: '@sentry/vue': specifier: 7.74.0 version: 7.74.0(vue@3.3.6) + '@tiptap/core': + specifier: ^2.1.12 + version: 2.1.12(@tiptap/pm@2.1.12) '@tiptap/extension-character-count': specifier: 2.0.3 version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12) @@ -82,6 +85,9 @@ dependencies: '@tiptap/starter-kit': specifier: 2.0.3 version: 2.0.3(@tiptap/pm@2.1.12) + '@tiptap/suggestion': + specifier: ^2.1.12 + version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12) '@tiptap/vue-3': specifier: 2.0.3 version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)(vue@3.3.6) @@ -169,6 +175,9 @@ dependencies: sortablejs: specifier: 1.15.0 version: 1.15.0 + tippy.js: + specifier: ^6.3.7 + version: 6.3.7 ufo: specifier: 1.3.1 version: 1.3.1 @@ -4538,6 +4547,16 @@ packages: - '@tiptap/pm' dev: false + /@tiptap/suggestion@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12): + resolution: {integrity: sha512-rhlLWwVkOodBGRMK0mAmE34l2a+BqM2Y7q1ViuQRBhs/6sZ8d83O4hARHKVwqT5stY4i1l7d7PoemV3uAGI6+g==} + peerDependencies: + '@tiptap/core': ^2.0.0 + '@tiptap/pm': ^2.0.0 + dependencies: + '@tiptap/core': 2.1.12(@tiptap/pm@2.1.12) + '@tiptap/pm': 2.1.12 + dev: false + /@tiptap/vue-3@2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)(vue@3.3.6): resolution: {integrity: sha512-2CtNUzt+e7sgvIjxPOyBwoiRcuCHNeJzW+XGxNK2uCWlAKp/Yw3boJ51d51UuIbj9RitGHJ5GpCdLJoL7SDiQA==} peerDependencies: diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue index a03321023..6da6de9bc 100644 --- a/src/components/input/editor/TipTap.vue +++ b/src/components/input/editor/TipTap.vue @@ -46,6 +46,9 @@ import CharacterCount from '@tiptap/extension-character-count' import StarterKit from '@tiptap/starter-kit' import {EditorContent, useEditor, VueNodeViewRenderer} from '@tiptap/vue-3' +import Commands from './commands' +import suggestion from './suggestion' + // load all highlight.js languages import {lowlight} from 'lowlight' @@ -199,6 +202,10 @@ const editor = useEditor({ // return VueNodeViewRenderer(CodeBlock) // }, // }).configure({ lowlight }), + + Commands.configure({ + suggestion, + }), ], onUpdate: () => { // HTML diff --git a/src/components/input/editor/commands.js b/src/components/input/editor/commands.ts similarity index 74% rename from src/components/input/editor/commands.js rename to src/components/input/editor/commands.ts index a16f097c9..189d567e7 100644 --- a/src/components/input/editor/commands.js +++ b/src/components/input/editor/commands.ts @@ -1,6 +1,8 @@ import { Extension } from '@tiptap/core' import Suggestion from '@tiptap/suggestion' +// Copied and adjusted from https://github.com/ueberdosis/tiptap/tree/252acb32d27a0f9af14813eeed83d8a50059a43a/demos/src/Experiments/Commands/Vue + export default Extension.create({ name: 'commands', diff --git a/src/components/input/editor/suggestion.js b/src/components/input/editor/suggestion.ts similarity index 100% rename from src/components/input/editor/suggestion.js rename to src/components/input/editor/suggestion.ts