@elia-ori/editor 0.1.1 → 0.1.3

package/dist/index.d.cts

@@ -23,7 +23,7 @@ interface ToolbarProps {
     toolbarEnd?: React.ReactNode;
     theme?: string;
     onThemeToggle?: () => void;
-    onImageUpload?: (file: File) => void;
+    onImageUpload?: (file: File) => Promise<string> | void;
 }
 declare function Toolbar({ editor, config, toolbarStart, toolbarEnd, theme, onThemeToggle, onImageUpload, }: ToolbarProps): react_jsx_runtime.JSX.Element | null;
 
@@ -42,7 +42,7 @@ interface EliaEditorProps {
     readOnly?: boolean;
     theme?: string;
     onThemeToggle?: () => void;
-    onImageUpload?: (file: File) => void;
+    onImageUpload?: (file: File) => Promise<string> | void;
 }
 declare function EliaEditor({ content, onChange, placeholder, toolbar, header, toolbarStart, toolbarEnd, footer, className, editorClassName, autofocus, readOnly, theme, onThemeToggle, onImageUpload, }: EliaEditorProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -23,7 +23,7 @@ interface ToolbarProps {
     toolbarEnd?: React.ReactNode;
     theme?: string;
     onThemeToggle?: () => void;
-    onImageUpload?: (file: File) => void;
+    onImageUpload?: (file: File) => Promise<string> | void;
 }
 declare function Toolbar({ editor, config, toolbarStart, toolbarEnd, theme, onThemeToggle, onImageUpload, }: ToolbarProps): react_jsx_runtime.JSX.Element | null;
 
@@ -42,7 +42,7 @@ interface EliaEditorProps {
     readOnly?: boolean;
     theme?: string;
     onThemeToggle?: () => void;
-    onImageUpload?: (file: File) => void;
+    onImageUpload?: (file: File) => Promise<string> | void;
 }
 declare function EliaEditor({ content, onChange, placeholder, toolbar, header, toolbarStart, toolbarEnd, footer, className, editorClassName, autofocus, readOnly, theme, onThemeToggle, onImageUpload, }: EliaEditorProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -4145,6 +4145,50 @@ var Callout = Node3.create({
 // src/components/Toolbar.tsx
 import { useRef } from "react";
 
+// src/lib/compress-image.ts
+var DEFAULT_MAX_SIZE_MB = 1;
+var DEFAULT_MAX_DIMENSION = 1920;
+var DEFAULT_QUALITY = 0.85;
+async function compressImage(file, options = {}) {
+  const {
+    maxSizeMB = DEFAULT_MAX_SIZE_MB,
+    maxDimension = DEFAULT_MAX_DIMENSION,
+    quality = DEFAULT_QUALITY
+  } = options;
+  if (file.size <= maxSizeMB * 1024 * 1024) {
+    return file;
+  }
+  const img = new Image();
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      let { width, height } = img;
+      if (width > maxDimension || height > maxDimension) {
+        const ratio = Math.min(maxDimension / width, maxDimension / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error("\u5716\u7247\u58D3\u7E2E\u5931\u6557"));
+            return;
+          }
+          resolve(new File([blob], file.name, { type: "image/jpeg" }));
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => reject(new Error("\u5716\u7247\u8F09\u5165\u5931\u6557"));
+    img.src = URL.createObjectURL(file);
+  });
+}
+
 // src/ui/button.tsx
 import * as React from "react";
 
@@ -4653,27 +4697,32 @@ function Toolbar({
     }
     editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
   };
-  const handleImageUpload = (e) => {
+  const handleImageUpload = async (e) => {
     const file = e.target.files?.[0];
     if (!file) return;
-    const MAX_SIZE = 5 * 1024 * 1024;
-    if (file.size > MAX_SIZE) {
-      alert("\u5716\u7247\u5927\u5C0F\u4E0D\u53EF\u8D85\u904E 5MB");
-      e.target.value = "";
-      return;
-    }
-    if (onImageUpload) {
-      onImageUpload(file);
-    } else {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const base64 = reader.result;
-        editor.chain().focus().setImage({ src: base64 }).run();
-      };
-      reader.onerror = () => {
-        console.error("\u5716\u7247\u8B80\u53D6\u5931\u6557");
-      };
-      reader.readAsDataURL(file);
+    try {
+      const compressed = await compressImage(file);
+      if (onImageUpload) {
+        const result = onImageUpload(compressed);
+        if (result instanceof Promise) {
+          const url = await result;
+          if (url) {
+            editor.chain().focus().setImage({ src: url }).run();
+          }
+        }
+      } else {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const base64 = reader.result;
+          editor.chain().focus().setImage({ src: base64 }).run();
+        };
+        reader.onerror = () => {
+          console.error("\u5716\u7247\u8B80\u53D6\u5931\u6557");
+        };
+        reader.readAsDataURL(compressed);
+      }
+    } catch (error) {
+      console.error("\u5716\u7247\u8655\u7406\u5931\u6557:", error);
     }
     e.target.value = "";
   };