feat: add supports for image with link

packages/editor/src/extensions/image/BubbleItemImageHref.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { i18n } from "@/locales";
+import type { Editor } from "@tiptap/vue-3";
+import { computed, type Component } from "vue";
+import Image from "./index";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  icon?: Component;
+  title?: string;
+  action?: ({ editor }: { editor: Editor }) => void;
+}>();
+
+const href = computed({
+  get: () => {
+    return props.editor.getAttributes(Image.name).href;
+  },
+  set: (href: string) => {
+    props.editor
+      .chain()
+      .updateAttributes(Image.name, { href: href })
+      .setNodeSelection(props.editor.state.selection.from)
+      .focus()
+      .run();
+  },
+});
+</script>
+
+<template>
+  <input
+    v-model.lazy="href"
+    :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"
+  />
+</template>

packages/editor/src/extensions/image/ImageView.vue

@@ -37,6 +37,14 @@ const alt = computed({
   },
 });
 
+const href = computed({
+  get: () => {
+    return props.node?.attrs.href;
+  },
+  set: (href: string) => {
+    props.updateAttributes({ href: href });
+  },
+});
 function handleSetFocus() {
   props.editor.commands.setNodeSelection(props.getPos());
 }
@@ -92,6 +100,7 @@ onMounted(() => {
         :src="src"
         :title="node.attrs.title"
         :alt="alt"
+        :href="href"
         class="w-full h-full"
       />
     </div>

packages/editor/src/extensions/image/index.ts

@@ -1,5 +1,5 @@
 import TiptapImage from "@tiptap/extension-image";
-import { VueNodeViewRenderer, isActive } from "@tiptap/vue-3";
+import { VueNodeViewRenderer, isActive, mergeAttributes } from "@tiptap/vue-3";
 import ImageView from "./ImageView.vue";
 import type { ImageOptions } from "@tiptap/extension-image";
 import type { ExtensionOptions } from "@/types";
@@ -12,6 +12,7 @@ import type { EditorState } from "prosemirror-state";
 import BubbleItemImageSize from "./BubbleItemImageSize.vue";
 import BubbleItemImageAlt from "./BubbleItemImageAlt.vue";
 import BubbleItemVideoLink from "./BubbleItemImageLink.vue";
+import BubbleItemImageHref from "./BubbleItemImageHref.vue";
 import { BlockActionSeparator } from "@/components";
 import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
 import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
@@ -22,6 +23,7 @@ import MdiShare from "~icons/mdi/share";
 import MdiTextBoxEditOutline from "~icons/mdi/text-box-edit-outline";
 import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red";
 import { deleteNode } from "@/utils";
+import MdiLink from "~icons/mdi/link";
 
 const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
   inline() {
@@ -61,6 +63,18 @@ const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
           };
         },
       },
+      href: {
+        default: null,
+        parseHTML: (element) => {
+          const href = element.getAttribute("href") || null;
+          return href;
+        },
+        renderHTML: (attributes) => {
+          return {
+            href: attributes.href,
+          };
+        },
+      },
       style: {
         renderHTML() {
           return {
@@ -84,7 +98,6 @@ const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
       },
     ];
   },
-
   addOptions() {
     return {
       ...this.parent?.(),
@@ -186,10 +199,20 @@ const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
             },
             {
               priority: 100,
-              component: markRaw(BlockActionSeparator),
+              props: {
+                icon: markRaw(MdiLink),
+                title: i18n.global.t("editor.extensions.image.edit_href"),
+                action: () => {
+                  return markRaw(BubbleItemImageHref);
+                },
+              },
             },
             {
               priority: 110,
+              component: markRaw(BlockActionSeparator),
+            },
+            {
+              priority: 120,
               props: {
                 icon: markRaw(MdiDeleteForeverOutline),
                 title: i18n.global.t("editor.common.button.delete"),
@@ -201,6 +224,16 @@ const Image = TiptapImage.extend<ExtensionOptions & ImageOptions>({
       },
     };
   },
+  renderHTML({ HTMLAttributes }) {
+    if (HTMLAttributes.href) {
+      return [
+        "a",
+        { href: HTMLAttributes.href },
+        ["img", mergeAttributes(HTMLAttributes)],
+      ];
+    }
+    return ["img", mergeAttributes(HTMLAttributes)];
+  },
 });
 
 const handleSetTextAlign = (

packages/editor/src/locales/en.yaml

@@ -12,7 +12,7 @@ editor:
       add_row_after: Add row after
       toggle_header_column: Set/Unset First Column Header
       toggle_header_row: Set/Unset First Row Header
-      toggle_header_cell: Set/Unset Current Cell as Header 
+      toggle_header_cell: Set/Unset Current Cell as Header
       delete_row: Delete row
       merge_cells: Merge cells
       split_cell: Split cell
@@ -51,6 +51,7 @@ editor:
       restore_size: Restore original size
       edit_link: Edit link
       edit_alt: Edit alt
+      edit_href: Edit href
     video:
       disable_controls: Hide controls
       enable_controls: Show controls
@@ -102,6 +103,7 @@ editor:
     placeholder:
       link_input: Enter the link and press enter to confirm.
       alt_input: Enter the image alt and press enter to confirm.
+      alt_href: Enter the image href and press enter to confirm.
     button:
       new_line: New line
       delete: Delete

packages/editor/src/locales/zh-CN.yaml

@@ -51,6 +51,7 @@ editor:
       restore_size: 恢复原始尺寸
       edit_link: 修改链接
       edit_alt: 修改图片 alt 属性
+      edit_href: 修改外部 href 属性
     video:
       disable_controls: 隐藏控制面板
       enable_controls: 显示控制面板
@@ -102,6 +103,7 @@ editor:
     placeholder:
       link_input: 输入链接，按回车确定
       alt_input: 输入图片 alt 属性值，按回车确认
+      alt_href: 输入图片外部链接 href 属性值，按回车确认
     button:
       new_line: 换行
       delete: 删除