wysimark-lite 0.25.0 → 0.25.1

package/dist/index.mjs

@@ -1615,6 +1615,7 @@ var translations = {
     selectFile: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E",
     uploading: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D...",
     saving: "\u4FDD\u5B58\u4E2D...",
+    uploadComplete: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u5B8C\u4E86",
     vaultPath: "\u4FDD\u5B58\u5148\u30D1\u30B9\uFF1A",
     vaultPathHint: "vault\u5185\u306E\u4FDD\u5B58\u5148\u30D1\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"
   },
@@ -1666,6 +1667,7 @@ var translations = {
     selectFile: "Select File",
     uploading: "Uploading...",
     saving: "Saving...",
+    uploadComplete: "Upload Complete",
     vaultPath: "Save Path:",
     vaultPathHint: "Enter the path within the vault to save the file"
   }
@@ -8386,16 +8388,15 @@ function ImageUrlDialog({
     setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
   }, []);
   const savedState = editor.wysimark?.imageDialogState;
-  const hasOnImageSave = !!editor.wysimark?.onImageSave;
+  const hasOnImageChange = !!editor.wysimark?.onImageChange;
   const [url, setUrl] = useState9(savedState?.url ?? "");
   const [alt, setAlt] = useState9(savedState?.alt ?? "");
   const [title, setTitle] = useState9(savedState?.title ?? "");
   const [titleManuallyEdited, setTitleManuallyEdited] = useState9(false);
-  const [imageSource, setImageSource] = useState9(savedState?.imageSource ?? (hasOnImageSave ? "file" : "url"));
-  const [vaultPath, setVaultPath] = useState9(savedState?.vaultPath ?? "");
-  const [selectedFile, setSelectedFile] = useState9(savedState?.selectedFile);
-  const [isSaving, setIsSaving] = useState9(false);
-  const [previewUrl, setPreviewUrl] = useState9(null);
+  const [imageSource, setImageSource] = useState9(savedState?.imageSource ?? (hasOnImageChange ? "file" : "url"));
+  const [isUploading, setIsUploading] = useState9(false);
+  const [uploadedUrl, setUploadedUrl] = useState9(savedState?.uploadedUrl ?? "");
+  const [uploadedFileName, setUploadedFileName] = useState9("");
   const handleAltChange = useCallback14((e) => {
     const newAlt = e.target.value;
     setAlt(newAlt);
@@ -8407,20 +8408,11 @@ function ImageUrlDialog({
     setTitle(e.target.value);
     setTitleManuallyEdited(true);
   }, []);
-  useEffect7(() => {
-    if (selectedFile) {
-      const url2 = URL.createObjectURL(selectedFile);
-      setPreviewUrl(url2);
-      return () => URL.revokeObjectURL(url2);
-    } else {
-      setPreviewUrl(null);
-    }
-  }, [selectedFile]);
   useEffect7(() => {
     if (editor.wysimark) {
-      editor.wysimark.imageDialogState = { url, alt, title, imageSource, vaultPath, selectedFile };
+      editor.wysimark.imageDialogState = { url, alt, title, imageSource, uploadedUrl };
     }
-  }, [url, alt, title, imageSource, vaultPath, selectedFile]);
+  }, [url, alt, title, imageSource, uploadedUrl]);
   const clearState = () => {
     if (editor.wysimark) {
       editor.wysimark.imageDialogState = void 0;
@@ -8445,51 +8437,44 @@ function ImageUrlDialog({
     left: baseStyle.left + dragOffset.x,
     top: baseStyle.top + dragOffset.y
   };
-  async function handleSubmit(e) {
+  function handleSubmit(e) {
     e.preventDefault();
-    if (imageSource === "file" && selectedFile && editor.wysimark?.onImageSave) {
-      if (vaultPath.trim() === "")
-        return;
-      setIsSaving(true);
-      try {
-        const resultPath = await editor.wysimark.onImageSave(selectedFile, vaultPath);
-        editor.image.insertImageFromUrl(resultPath, alt, title);
-        clearState();
-        close();
-      } finally {
-        setIsSaving(false);
-      }
-    } else if (imageSource === "url") {
-      if (url.trim() === "")
-        return;
-      editor.image.insertImageFromUrl(url, alt, title);
-      clearState();
-      close();
-    }
+    const finalUrl = imageSource === "file" ? uploadedUrl : url;
+    if (finalUrl.trim() === "")
+      return;
+    editor.image.insertImageFromUrl(finalUrl, alt, title);
+    clearState();
+    close();
   }
   function handleCancel() {
     clearState();
     close();
   }
-  function handleFileSelect(e) {
+  async function handleFileSelect(e) {
     const file = e.target.files?.[0];
-    if (!file)
+    if (!file || !editor.wysimark?.onImageChange)
       return;
-    setSelectedFile(file);
-    if (!vaultPath) {
-      setVaultPath(`attachments/${file.name}`);
+    setUploadedFileName(file.name);
+    setIsUploading(true);
+    try {
+      const resultUrl = await editor.wysimark.onImageChange(file);
+      setUploadedUrl(resultUrl);
+    } catch (error) {
+      console.error("Failed to upload image:", error);
+    } finally {
+      setIsUploading(false);
     }
   }
   function handleSelectFileClick() {
     fileInputRef.current?.click();
   }
-  const isSubmitDisabled = imageSource === "file" ? !selectedFile || vaultPath.trim() === "" || isSaving : url.trim() === "";
+  const isSubmitDisabled = imageSource === "file" ? uploadedUrl.trim() === "" || isUploading : url.trim() === "";
   return /* @__PURE__ */ jsxs29(Fragment8, { children: [
     /* @__PURE__ */ jsx61(CloseMask, { close }),
     /* @__PURE__ */ jsxs29($FileDialog, { ref, style, children: [
       /* @__PURE__ */ jsx61(DraggableHeader, { onDrag: handleDrag }),
       /* @__PURE__ */ jsxs29("form", { onSubmit: (e) => void handleSubmit(e), style: { padding: "8px" }, children: [
-        hasOnImageSave && /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "12px" }, children: [
+        hasOnImageChange && /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
             /* @__PURE__ */ jsx61(
               "input",
@@ -8546,7 +8531,7 @@ function ImageUrlDialog({
               ref: fileInputRef,
               type: "file",
               accept: "image/*",
-              onChange: handleFileSelect,
+              onChange: (e) => void handleFileSelect(e),
               style: { display: "none" }
             }
           ),
@@ -8555,76 +8540,26 @@ function ImageUrlDialog({
             {
               type: "button",
               onClick: handleSelectFileClick,
-              disabled: isSaving,
+              disabled: isUploading,
               style: {
                 padding: "8px 16px",
-                backgroundColor: isSaving ? "#ccc" : "#0078d4",
-                color: isSaving ? "#666" : "white",
+                backgroundColor: isUploading ? "#ccc" : "#0078d4",
+                color: isUploading ? "#666" : "white",
                 border: "none",
                 borderRadius: "4px",
-                cursor: isSaving ? "not-allowed" : "pointer",
+                cursor: isUploading ? "not-allowed" : "pointer",
                 marginBottom: "8px",
                 fontWeight: "bold"
               },
-              children: t("selectFile")
+              children: isUploading ? t("uploading") : t("selectFile")
             }
           ),
-          selectedFile && /* @__PURE__ */ jsxs29("div", { style: { marginTop: "8px" }, children: [
-            /* @__PURE__ */ jsxs29("div", { style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              padding: "8px",
-              backgroundColor: "var(--shade-100)",
-              borderRadius: "4px",
-              marginBottom: "8px"
-            }, children: [
-              previewUrl && /* @__PURE__ */ jsx61(
-                "img",
-                {
-                  src: previewUrl,
-                  alt: "Preview",
-                  style: {
-                    maxWidth: "60px",
-                    maxHeight: "60px",
-                    objectFit: "contain",
-                    borderRadius: "4px"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxs29("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx61("div", { style: {
-                  fontWeight: "bold",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }, children: selectedFile.name }),
-                /* @__PURE__ */ jsxs29("div", { style: { fontSize: "12px", color: "var(--shade-500)" }, children: [
-                  (selectedFile.size / 1024).toFixed(1),
-                  " KB"
-                ] })
-              ] })
+          uploadedUrl && /* @__PURE__ */ jsxs29("div", { style: { marginTop: "8px", padding: "8px", backgroundColor: "var(--shade-100)", borderRadius: "4px" }, children: [
+            /* @__PURE__ */ jsxs29("div", { style: { color: "green", marginBottom: "4px" }, children: [
+              "\u2713 ",
+              t("uploadComplete")
             ] }),
-            /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("vaultPath") }),
-            /* @__PURE__ */ jsx61(
-              "input",
-              {
-                type: "text",
-                value: vaultPath,
-                onChange: (e) => setVaultPath(e.target.value),
-                style: {
-                  width: "100%",
-                  padding: "6px",
-                  boxSizing: "border-box",
-                  border: "1px solid var(--shade-300)",
-                  borderRadius: "4px",
-                  backgroundColor: "var(--shade-50)",
-                  color: "var(--shade-700)"
-                },
-                placeholder: "attachments/image.png"
-              }
-            ),
-            /* @__PURE__ */ jsx61("div", { style: { fontSize: "12px", color: "var(--shade-500)", marginTop: "4px" }, children: t("vaultPathHint") })
+            uploadedFileName && /* @__PURE__ */ jsx61("div", { style: { fontSize: "12px", color: "var(--shade-500)" }, children: uploadedFileName })
           ] })
         ] }),
         /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
@@ -8686,7 +8621,7 @@ function ImageUrlDialog({
                 cursor: isSubmitDisabled ? "not-allowed" : "pointer",
                 fontWeight: "bold"
               },
-              children: isSaving ? t("saving") : t("register")
+              children: t("register")
             }
           ),
           /* @__PURE__ */ jsx61(