mirror of
https://codeberg.org/Sevichecc/Seigwai.git
synced 2025-04-30 07:49:30 +08:00
feat: hightlight selected text when edit url
This commit is contained in:
parent
928dac1ce5
commit
32b992216d
5 changed files with 35 additions and 8 deletions
|
@ -17,6 +17,8 @@
|
|||
"@tiptap/core": "2.0.0-beta.220",
|
||||
"@tiptap/extension-bubble-menu": "2.0.0-beta.220",
|
||||
"@tiptap/extension-character-count": "2.0.0-beta.220",
|
||||
"@tiptap/extension-code-block": "^2.0.0",
|
||||
"@tiptap/extension-highlight": "^2.0.0",
|
||||
"@tiptap/extension-link": "2.0.0-beta.220",
|
||||
"@tiptap/extension-typography": "2.0.0-beta.220",
|
||||
"@tiptap/pm": "2.0.0-beta.220",
|
||||
|
|
|
@ -19,6 +19,12 @@ dependencies:
|
|||
'@tiptap/extension-character-count':
|
||||
specifier: 2.0.0-beta.220
|
||||
version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
'@tiptap/extension-code-block':
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
'@tiptap/extension-highlight':
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0(@tiptap/core@2.0.0-beta.220)
|
||||
'@tiptap/extension-link':
|
||||
specifier: 2.0.0-beta.220
|
||||
version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
|
@ -700,11 +706,11 @@ packages:
|
|||
'@tiptap/pm': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-code-block@2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
|
||||
resolution: {integrity: sha512-fgA7yTfHqhBtMJF7I9FPJ6UWuZPtxOQiN45Iv9LNmFIB6YRucdpmF+daZ27sElu0a+eICZyXwVn4w4iJphifuw==}
|
||||
/@tiptap/extension-code-block@2.0.0(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
|
||||
resolution: {integrity: sha512-rkI2W8037A9BWtsYNhuzA4/IjJF1jafmGGXKh56xLW7hkW563u33jizvQ+f+g+5dofKWUd+0coMv0bDax7ANCg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.209
|
||||
'@tiptap/pm': ^2.0.0-beta.209
|
||||
'@tiptap/core': ^2.0.0
|
||||
'@tiptap/pm': ^2.0.0
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
|
||||
'@tiptap/pm': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
|
||||
|
@ -773,6 +779,14 @@ packages:
|
|||
'@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-highlight@2.0.0(@tiptap/core@2.0.0-beta.220):
|
||||
resolution: {integrity: sha512-2EbfBMmWRQj06LaG2cwncmKNQJzxrquSubVVK7wmrVOTm7oCbgCiofYZ3Fv0vE9qNowKUnPsd1oza7m5x2FAeA==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-history@2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
|
||||
resolution: {integrity: sha512-qNL2a9UhnlmCs4y2iQYrfeMB8vEX3bHozBJanHu0PWNQJcj90R5xqorBp/bRcqZdi0kuQfxcTnGHtLUpN/U0TA==}
|
||||
peerDependencies:
|
||||
|
@ -894,7 +908,7 @@ packages:
|
|||
'@tiptap/extension-bold': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
|
||||
'@tiptap/extension-bullet-list': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
|
||||
'@tiptap/extension-code': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
|
||||
'@tiptap/extension-code-block': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
'@tiptap/extension-code-block': 2.0.0(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
'@tiptap/extension-document': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
|
||||
'@tiptap/extension-dropcursor': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
'@tiptap/extension-gapcursor': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
|
||||
|
|
|
@ -12,10 +12,15 @@ const inputUrl = ref<HTMLInputElement | null>(null)
|
|||
const openLinkInput = () => {
|
||||
url.value = editor.getAttributes('link').href || ''
|
||||
showUrlInput.value = true
|
||||
|
||||
editor.chain().toggleHighlight().run()
|
||||
|
||||
nextTick(() => inputUrl.value?.focus())
|
||||
}
|
||||
|
||||
const setLink = () => {
|
||||
editor.chain().focus().unsetHighlight().run()
|
||||
|
||||
if (url.value === null) {
|
||||
showUrlInput.value = false
|
||||
return
|
||||
|
|
|
@ -3,9 +3,10 @@ import { EditorContent, useEditor } from '@tiptap/vue-3'
|
|||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Typography from '@tiptap/extension-typography'
|
||||
import Link from '@tiptap/extension-link'
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
import suggestion from './suggestion'
|
||||
import BubbleMenu from './BubbleMenu.vue'
|
||||
import Commands from './commands'
|
||||
import suggestion from './suggestion'
|
||||
|
||||
const editor = useEditor({
|
||||
content: `<p>
|
||||
|
@ -23,6 +24,11 @@ const editor = useEditor({
|
|||
Commands.configure({
|
||||
suggestion,
|
||||
}),
|
||||
Highlight.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'bg-blue-100',
|
||||
},
|
||||
}),
|
||||
],
|
||||
editable: true,
|
||||
autofocus: true,
|
||||
|
|
|
@ -29,13 +29,13 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
title: 'bold',
|
||||
title: 'code block',
|
||||
command: ({ editor, range }) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.deleteRange(range)
|
||||
.setMark('bold')
|
||||
.setNode('pre')
|
||||
.run()
|
||||
},
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue