wysimark-lite 0.25.11 → 0.25.13

package/dist/index.mjs

@@ -1700,6 +1700,7 @@ var translations = {
     uploading: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D...",
     saving: "\u4FDD\u5B58\u4E2D...",
     uploadComplete: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u5B8C\u4E86",
+    imageSourceSelect: "\u30D5\u30A1\u30A4\u30EB\u9078\u629E",
     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"
   },
@@ -1753,6 +1754,7 @@ var translations = {
     uploading: "Uploading...",
     saving: "Saving...",
     uploadComplete: "Upload Complete",
+    imageSourceSelect: "Select File",
     vaultPath: "Save Path:",
     vaultPathHint: "Enter the path within the vault to save the file"
   }
@@ -8264,7 +8266,6 @@ function TableDialog({
 }
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
-import debounce from "lodash.debounce";
 import { useEffect as useEffect9, useRef as useRef13, useState as useState11 } from "react";
 import { useSlateStatic as useSlateStatic20 } from "slate-react";
 
@@ -8404,13 +8405,20 @@ function ImageUrlDialog({
   }, []);
   const savedState = editor.wysimark?.imageDialogState;
   const hasOnImageChange = !!editor.wysimark?.onImageChange;
+  const hasOnFileSelect = !!editor.wysimark?.onFileSelect;
+  const defaultSource = savedState?.imageSource ?? (hasOnFileSelect ? "select" : hasOnImageChange ? "file" : "url");
   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 ?? (hasOnImageChange ? "file" : "url"));
+  const [imageSource, setImageSource] = useState9(defaultSource);
   const [isUploading, setIsUploading] = useState9(false);
   const [uploadedUrl, setUploadedUrl] = useState9(savedState?.uploadedUrl ?? "");
+  const handleImageSourceChange = (source) => {
+    setImageSource(source);
+    setUploadedUrl("");
+    setUploadedFileName("");
+  };
   const [uploadedFileName, setUploadedFileName] = useState9("");
   const handleAltChange = useCallback14((e) => {
     const newAlt = e.target.value;
@@ -8427,7 +8435,7 @@ function ImageUrlDialog({
     if (editor.wysimark) {
       editor.wysimark.imageDialogState = { url, alt, title, imageSource, uploadedUrl };
     }
-  }, [url, alt, title, imageSource, uploadedUrl]);
+  }, [editor, url, alt, title, imageSource, uploadedUrl]);
   const clearState = () => {
     if (editor.wysimark) {
       editor.wysimark.imageDialogState = void 0;
@@ -8454,7 +8462,7 @@ function ImageUrlDialog({
   };
   function handleSubmit(e) {
     e.preventDefault();
-    const finalUrl = imageSource === "file" ? uploadedUrl : url;
+    const finalUrl = imageSource === "file" || imageSource === "select" ? uploadedUrl : url;
     if (finalUrl.trim() === "") return;
     editor.image.insertImageFromUrl(finalUrl, alt, title);
     clearState();
@@ -8481,14 +8489,42 @@ function ImageUrlDialog({
   function handleSelectFileClick() {
     fileInputRef.current?.click();
   }
-  const isSubmitDisabled = imageSource === "file" ? uploadedUrl.trim() === "" || isUploading : url.trim() === "";
+  async function handleFileSelectFromPicker() {
+    if (!editor.wysimark?.onFileSelect) return;
+    setIsUploading(true);
+    try {
+      const resultUrl = await editor.wysimark.onFileSelect();
+      if (resultUrl) {
+        setUploadedUrl(resultUrl);
+      }
+    } catch (error) {
+      void error;
+    } finally {
+      setIsUploading(false);
+    }
+  }
+  const isSubmitDisabled = imageSource === "file" || imageSource === "select" ? uploadedUrl.trim() === "" || isUploading : url.trim() === "";
   return /* @__PURE__ */ jsxs29(Fragment9, { 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: [
-        hasOnImageChange && /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "12px" }, children: [
-          /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
+        (hasOnImageChange || hasOnFileSelect) && /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "12px" }, children: [
+          hasOnFileSelect && /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx61(
+              "input",
+              {
+                type: "radio",
+                name: "imageSource",
+                value: "select",
+                checked: imageSource === "select",
+                onChange: () => handleImageSourceChange("select"),
+                style: { marginRight: "4px" }
+              }
+            ),
+            t("imageSourceSelect")
+          ] }),
+          hasOnImageChange && /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
             /* @__PURE__ */ jsx61(
               "input",
               {
@@ -8496,7 +8532,7 @@ function ImageUrlDialog({
                 name: "imageSource",
                 value: "file",
                 checked: imageSource === "file",
-                onChange: () => setImageSource("file"),
+                onChange: () => handleImageSourceChange("file"),
                 style: { marginRight: "4px" }
               }
             ),
@@ -8510,7 +8546,7 @@ function ImageUrlDialog({
                 name: "imageSource",
                 value: "url",
                 checked: imageSource === "url",
-                onChange: () => setImageSource("url"),
+                onChange: () => handleImageSourceChange("url"),
                 style: { marginRight: "4px" }
               }
             ),
@@ -8537,6 +8573,30 @@ function ImageUrlDialog({
               placeholder: "https://example.com/image.jpg"
             }
           )
+        ] }) : imageSource === "select" ? /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              type: "button",
+              onClick: () => void handleFileSelectFromPicker(),
+              disabled: isUploading,
+              style: {
+                padding: "8px 16px",
+                backgroundColor: isUploading ? "#ccc" : "#0078d4",
+                color: isUploading ? "#666" : "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: isUploading ? "not-allowed" : "pointer",
+                marginBottom: "8px",
+                fontWeight: "bold"
+              },
+              children: isUploading ? t("uploading") : t("imageSourceSelect")
+            }
+          ),
+          uploadedUrl && /* @__PURE__ */ jsx61("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__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
           /* @__PURE__ */ jsx61(
             "input",
@@ -9189,14 +9249,14 @@ function measureItemSetWidth(items, buttonWidth, dividerWidth) {
   }
   return width;
 }
-var WIDTH_BUFFER_PX = 48;
+var WIDTH_BUFFER_PX = 4;
 function Toolbar() {
   const ref = useRef13(null);
   const [items, setItems] = useState11(initialItems);
   useEffect9(() => {
+    const toolbar = ref.current;
+    if (!toolbar) return;
     const refresh = () => {
-      const toolbar = ref.current;
-      if (!toolbar) throw new Error("Toolbar not found");
       const widths = getWidths(toolbar);
       if (!widths) return;
       for (let i = 0; i < itemSets.length - 1; i++) {
@@ -9212,13 +9272,10 @@ function Toolbar() {
       }
       setItems(itemSets[itemSets.length - 1]);
     };
-    const debouncedRefresh = debounce(refresh, 150);
-    const timeoutId = setTimeout(refresh, 0);
-    window.addEventListener("resize", debouncedRefresh);
+    const observer = new ResizeObserver(refresh);
+    observer.observe(toolbar);
     return () => {
-      clearTimeout(timeoutId);
-      debouncedRefresh.cancel();
-      window.removeEventListener("resize", debouncedRefresh);
+      observer.disconnect();
     };
   }, []);
   return /* @__PURE__ */ jsx64($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx64($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx64(
@@ -9476,7 +9533,8 @@ function Editable2({
   placeholder,
   className,
   style,
-  onImageChange
+  onImageChange,
+  onFileSelect
 }) {
   const [isRawMode, setIsRawMode] = useState13(false);
   const [rawText, setRawText] = useState13(value);
@@ -9499,7 +9557,6 @@ function Editable2({
       throttleInMs,
       { leading: false, trailing: true }
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [editor, throttleInMs]
   );
   const onSlateChange = useCallback18(() => {
@@ -9564,6 +9621,7 @@ function Editable2({
     setIsRawMode(!isRawMode);
   };
   editor.wysimark.onImageChange = onImageChange;
+  editor.wysimark.onFileSelect = onFileSelect;
   editor.wysimark.onChange = onChange;
   const disableRawMode = editor.wysimark.disableRawMode;
   return /* @__PURE__ */ jsxs33("div", { style: { position: "relative" }, children: [