feat(web-editor): add resizable media interactions

2026-04-05 23:58:39 +08:00
parent fab72906c9
commit 8ef7c75948
7 changed files with 695 additions and 53 deletions
@@ -0,0 +1,99 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ResizableMediaNodeView } from "@/components/editor/resizable-media-node-view";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    video: {
+      setVideo: (attributes: {
+        src: string;
+        title?: string | null;
+        widthPercent?: number;
+        align?: "left" | "center" | "right";
+      }) => ReturnType;
+    };
+  }
+}
+
+export const ResizableVideo = Node.create({
+  name: "video",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      title: {
+        default: null
+      },
+      widthPercent: {
+        default: 100,
+        parseHTML: (element: HTMLElement) =>
+          Number(element.getAttribute("data-width-percent") ?? 100),
+        renderHTML: (attributes: { widthPercent?: number }) => ({
+          "data-width-percent": attributes.widthPercent ?? 100
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (element: HTMLElement) => element.getAttribute("data-align") ?? "center",
+        renderHTML: (attributes: { align?: string }) => ({
+          "data-align": attributes.align ?? "center"
+        })
+      },
+      uploadToken: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute("data-upload-token"),
+        renderHTML: (attributes: { uploadToken?: string | null }) =>
+          attributes.uploadToken
+            ? {
+                "data-upload-token": attributes.uploadToken
+              }
+            : {}
+      }
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "video[src]"
+      }
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "video",
+      mergeAttributes(HTMLAttributes, {
+        controls: "true"
+      })
+    ];
+  },
+
+  addCommands() {
+    return {
+      setVideo:
+        (attributes) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: {
+              align: "center",
+              widthPercent: 100,
+              ...attributes
+            }
+          })
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer((props) => (
+      <ResizableMediaNodeView {...props} mediaKind="video" />
+    ));
+  }
+});