fix: resolve the issue of not being able to drag after adding a figure caption (#7984)

#### What type of PR is this?

/kind bug
/area editor
/milestone 2.22.x

#### What this PR does / why we need it:

解决由于调整图片时多个位置同时修改 figure 而导致的报错问题。

#### Which issue(s) this PR fixes:

Fixes #7980 

#### Does this PR introduce a user-facing change?
```release-note
解决在 figure 中添加 caption 后拖动图片报错的问题
```

Author: LIlGG

ui/packages/editor/src/extensions/figure/index.ts

@@ -4,6 +4,7 @@ import {
   Node,
   Plugin,
   PluginKey,
+  TextSelection,
   type CommandProps,
 } from "@/tiptap";
 import type { ExtensionOptions } from "@/types";
@@ -16,7 +17,7 @@ declare module "@/tiptap" {
     figure: {
       setFigure: (attrs?: Record<string, unknown>) => ReturnType;
       unsetFigure: () => ReturnType;
-      updateFigureContainerWidth: (width: string) => ReturnType;
+      updateFigureContainerWidth: (width?: string) => ReturnType;
     };
   }
 }
@@ -96,6 +97,51 @@ export const ExtensionFigure = Node.create<ExtensionFigureOptions>({
 
   addKeyboardShortcuts() {
     return {
+      Enter: ({ editor }) => {
+        const { state } = editor;
+        const { selection } = state;
+        const { $from } = selection;
+
+        let inFigure = false;
+        let figureDepth = -1;
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const node = $from.node(depth);
+          if (node.type.name === this.name) {
+            inFigure = true;
+            figureDepth = depth;
+            break;
+          }
+        }
+
+        if (!inFigure) {
+          return false;
+        }
+
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const node = $from.node(depth);
+          if (node.type.name === ExtensionFigureCaption.name) {
+            return false;
+          }
+        }
+
+        const figureNode = $from.node(figureDepth);
+        const figurePos = $from.before(figureDepth);
+        const afterFigurePos = figurePos + figureNode.nodeSize;
+
+        editor
+          .chain()
+          .command(({ tr }) => {
+            const paragraph = tr.doc.type.schema.nodes.paragraph.create();
+            tr.insert(afterFigurePos, paragraph);
+            tr.setSelection(
+              TextSelection.near(tr.doc.resolve(afterFigurePos + 1))
+            );
+            return true;
+          })
+          .run();
+
+        return true;
+      },
       Backspace: ({ editor }) => {
         const { state } = editor;
         const { selection, doc } = state;
@@ -205,17 +251,26 @@ export const ExtensionFigure = Node.create<ExtensionFigureOptions>({
           return commands.lift(this.name);
         },
       updateFigureContainerWidth:
-        (width: string) =>
-        ({ state }: CommandProps) => {
-          // Here we need to use this.editor instead of the dispatch and tr obtained from CommandProps
-          // Because the dispatch and tr in CommandProps are outdated
-          const { dispatch } = this.editor.view;
-          const { tr } = this.editor.state;
+        (width?: string) =>
+        ({ state, dispatch }: CommandProps) => {
           const { selection } = state;
           const { $from } = selection;
 
+          let figureDepth = -1;
+          for (let d = $from.depth; d > 0; d--) {
+            if ($from.node(d).type.name === this.name) {
+              figureDepth = d;
+              break;
+            }
+          }
+
+          if (figureDepth === -1) {
+            return false;
+          }
+
+          const figureNode = $from.node(figureDepth);
           const figureCaptionNodes = findChildren(
-            $from.node(),
+            figureNode,
             (node) => node.type.name === ExtensionFigureCaption.name
           );
 
@@ -224,7 +279,10 @@ export const ExtensionFigure = Node.create<ExtensionFigureOptions>({
           }
 
           const figureCaptionNode = figureCaptionNodes[0];
-          tr.setNodeMarkup(figureCaptionNode.pos + 1, undefined, {
+          const figurePos = $from.start(figureDepth);
+          const captionPos = figurePos + figureCaptionNode.pos;
+
+          const tr = state.tr.setNodeMarkup(captionPos, undefined, {
             width: width,
           });
           dispatch?.(tr);

ui/packages/editor/src/extensions/image/BubbleItemImageSize.vue

@@ -5,7 +5,7 @@ import {
   BlockActionSeparator,
 } from "@/components";
 import { i18n } from "@/locales";
-import type { Editor } from "@/tiptap";
+import { findChildren, type Editor } from "@/tiptap";
 import { computed, type Component } from "vue";
 import MdiBackupRestore from "~icons/mdi/backup-restore";
 import MdiImageSizeSelectActual from "~icons/mdi/image-size-select-actual";
@@ -35,9 +35,31 @@ const size = computed({
 });
 
 function handleSetSize(size: { width?: string; height?: string }) {
+  let figureWidth = size.width;
+  if (!size.width) {
+    const { state } = props.editor;
+    const { selection } = state;
+    const imageNodePosList = findChildren(
+      selection.$from.node(),
+      (node) => node.type.name === ExtensionImage.name
+    );
+    if (imageNodePosList.length === 0) {
+      return;
+    }
+    const imageNodePos = imageNodePosList[0];
+    if (imageNodePos && imageNodePos.node.type.name === ExtensionImage.name) {
+      const pos = selection.$from.pos + imageNodePos.pos;
+      const nodeDOM = props.editor.view.nodeDOM(pos) as HTMLElement;
+      const imageNodeDOM = nodeDOM.querySelector("img");
+      if (imageNodeDOM && imageNodeDOM.naturalWidth) {
+        figureWidth = `${imageNodeDOM.naturalWidth}px`;
+      }
+    }
+  }
   props.editor
     .chain()
     .updateAttributes(ExtensionImage.name, size)
+    .updateFigureContainerWidth(figureWidth)
     .setNodeSelection(props.editor.state.selection.from)
     .focus()
     .run();

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

@@ -108,11 +108,28 @@ const aspectRatio = ref<number>(0);
 const resizeRef = ref<HTMLDivElement>();
 const inputRef = ref<HTMLInputElement>();
 
-function onImageLoaded() {
+function onImageLoaded(event: Event) {
   if (!resizeRef.value) return;
 
   aspectRatio.value =
     resizeRef.value.clientWidth / resizeRef.value.clientHeight;
+  const target = event.target;
+
+  if (props.node?.attrs.width) {
+    return;
+  }
+  if (target instanceof HTMLImageElement) {
+    props.editor
+      .chain()
+      .updateAttributes(ExtensionImage.name, {
+        width: `${target.naturalWidth}px`,
+        height: `${target.naturalHeight}px`,
+      })
+      .updateFigureContainerWidth(`${target.naturalWidth}px`)
+      .setNodeSelection(props.getPos() || 0)
+      .focus()
+      .run();
+  }
 }
 
 let cleanupResize: (() => void) | null = null;
@@ -182,6 +199,7 @@ function setupResizeListener() {
       props.editor
         .chain()
         .updateAttributes(ExtensionImage.name, { width, height })
+        .updateFigureContainerWidth(width)
         .setNodeSelection(props.getPos() || 0)
         .focus()
         .run();
@@ -249,16 +267,6 @@ watch([src, resizeHandleRef], () => {
   }
 });
 
-watch(
-  () => props.node?.attrs.width,
-  (newWidth) => {
-    if (newWidth) {
-      props.editor.commands.updateFigureContainerWidth(newWidth);
-    }
-  },
-  { immediate: false }
-);
-
 const { isExternalAsset, transferring, handleTransfer } =
   useExternalAssetsTransfer(src, handleSetExternalLink);