diff --git a/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue b/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue index f624b5a2f..999852667 100644 --- a/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue +++ b/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue @@ -2,7 +2,7 @@ import { i18n } from "@/locales"; import type { Editor } from "@/tiptap/vue-3"; import { computed, type Component } from "vue"; -import Image from "./index"; +import { ExtensionLink, ExtensionImage } from "@/extensions"; const props = defineProps<{ editor: Editor; @@ -15,15 +15,24 @@ const props = defineProps<{ const href = computed({ get: () => { - return props.editor.getAttributes(Image.name).href; + const attrs = props.editor.getAttributes(ExtensionLink.name); + return attrs?.href || props.editor.getAttributes(ExtensionImage.name).href; }, set: (href: string) => { - props.editor - .chain() - .updateAttributes(Image.name, { href: href }) - .setNodeSelection(props.editor.state.selection.from) - .focus() - .run(); + props.editor.commands.setLink({ href: href, target: "_blank" }); + }, +}); + +const target = computed({ + get() { + const attrs = props.editor.getAttributes(ExtensionLink.name); + return attrs?.target === "_blank"; + }, + set(value) { + props.editor.commands.setLink({ + href: href.value, + target: value ? "_blank" : "_self", + }); }, }); @@ -34,4 +43,14 @@ const href = computed({ :placeholder="i18n.global.t('editor.common.placeholder.alt_href')" class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500" /> +