feat: hightlight selected text when edit url

This commit is contained in:
Seviche CC 2023-03-30 18:19:29 +08:00
parent 928dac1ce5
commit 32b992216d
Signed by: SevicheCC
GPG key ID: C577000000000000
5 changed files with 35 additions and 8 deletions

View file

@ -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",

View file

@ -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)

View file

@ -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

View file

@ -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,

View file

@ -29,13 +29,13 @@ export default {
},
},
{
title: 'bold',
title: 'code block',
command: ({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setMark('bold')
.setNode('pre')
.run()
},
},