@blinkk/root-cms 1.0.0-beta.57 → 1.0.0-beta.58

package/dist/ui/ui.css

@@ -834,6 +834,13 @@
   flex-direction: column;
   gap: 24px;
 }
+.DocEditor__ImageField {
+  padding: 10px;
+  margin: -10px;
+}
+.DocEditor__ImageField.dragging {
+  outline: 2px dashed black;
+}
 .DocEditor__ImageField__imagePreview {
   margin-bottom: 10px;
 }
@@ -873,7 +880,7 @@
 }
 .DocEditor__ImageField__noImage {
   font-family: var(--font-family-mono);
-  margin: 10px 0;
+  margin-bottom: 10px;
 }
 .DocEditor__ImageField__uploadButton {
   display: inline-flex;
@@ -896,12 +903,24 @@
 .DocEditor__ImageField__uploadButton__icon {
   margin-right: 10px;
 }
+.DocEditor__FileField {
+  padding: 10px;
+  margin: -10px;
+}
+.DocEditor__FileField.dragging {
+  outline: 2px dashed black;
+}
+.DocEditor__FileField__controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+}
 .DocEditor__FileField__file {
   margin-bottom: 10px;
 }
 .DocEditor__FileField__noFile {
   font-family: var(--font-family-mono);
-  margin: 10px 0;
+  margin-bottom: 10px;
 }
 .DocEditor__FileField__uploadButton {
   display: inline-flex;

package/dist/ui/ui.js

@@ -39859,7 +39859,7 @@ ${this.customData.serverResponse}`;
   // package.json
   var package_default = {
     name: "@blinkk/root-cms",
-    version: "1.0.0-beta.57",
+    version: "1.0.0-beta.58",
     author: "s@blinkk.com",
     license: "MIT",
     engines: {
@@ -39962,7 +39962,7 @@ ${this.customData.serverResponse}`;
       vitest: "^0.18.1"
     },
     peerDependencies: {
-      "@blinkk/root": "1.0.0-beta.57",
+      "@blinkk/root": "1.0.0-beta.58",
       "firebase-admin": ">=11",
       "firebase-functions": ">=4",
       preact: "10.x",
@@ -43859,28 +43859,24 @@ ${content}</tr>
       reader.readAsDataURL(file);
     });
   }
+  var IMAGE_MIMETYPES = [
+    "image/png",
+    "image/jpeg",
+    "image/svg+xml",
+    "image/webp"
+  ];
   DocEditor.ImageField = (props) => {
     const field = props.field;
     const [img, setImg] = y2({});
-    const inputRef = A2(null);
     const [loading, setLoading] = y2(false);
-    s2(() => {
-      const unsubscribe = props.draft.subscribe(
-        props.deepKey,
-        (newValue) => {
-          setImg(newValue);
-        }
-      );
-      return unsubscribe;
-    }, []);
-    const exts = field.exts ?? [".png", ".jpg", ".jpeg", ".svg"];
+    const [isDragging, setIsDragging] = y2(false);
+    const inputRef = A2(null);
+    const ref2 = A2(null);
+    const exts = field.exts ?? IMAGE_MIMETYPES;
     const accept = exts.join(", ");
-    async function onFileChange(e3) {
+    async function uploadFile(file) {
+      setLoading(true);
       try {
-        setLoading(true);
-        const inputEl = e3.target;
-        const files = inputEl.files || [];
-        const file = files[0];
         const uploadedImage = await uploadFileToGCS(file);
         setImg((currentImg) => {
           const newImage = Object.assign({}, uploadedImage, {
@@ -43906,6 +43902,14 @@ ${content}</tr>
         inputEl.value = "";
       }
     }
+    function onFileChange(e3) {
+      const inputEl = e3.target;
+      const files = inputEl.files || [];
+      const file = files[0];
+      if (file) {
+        uploadFile(file);
+      }
+    }
     async function setAltText(newValue) {
       setImg((currentImg) => {
         return Object.assign({}, currentImg, { alt: newValue });
@@ -43916,97 +43920,149 @@ ${content}</tr>
       setImg({});
       props.draft.removeKey(props.deepKey);
     }
-    return /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField", children: [
-      img && img.src ? /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview", children: [
-        /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview__controls", children: /* @__PURE__ */ o4(Tooltip, { label: "Remove image", children: /* @__PURE__ */ o4(
-          ActionIcon,
-          {
-            className: "DocEditor__ImageField__imagePreview__controls__trash",
-            onClick: () => removeImage(),
-            children: /* @__PURE__ */ o4(IconTrash, { size: 16 })
-          }
-        ) }) }),
-        /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview__image", children: [
-          /* @__PURE__ */ o4(
-            "img",
-            {
-              src: img.gciUrl || img.src,
-              width: img.width,
-              height: img.height
-            }
-          ),
-          /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview__dimens", children: `${img.width}x${img.height}` })
-        ] }),
-        /* @__PURE__ */ o4(
-          TextInput,
-          {
-            className: "DocEditor__ImageField__imagePreview__image__url",
-            size: "xs",
-            radius: 0,
-            value: img.gciUrl || img.src,
-            disabled: true
-          }
+    const handleDragEnter = (e3) => {
+      e3.preventDefault();
+      setIsDragging(true);
+    };
+    const handleDragLeave = (e3) => {
+      e3.preventDefault();
+      setIsDragging(false);
+    };
+    const handleDrop = (e3) => {
+      e3.preventDefault();
+      setIsDragging(false);
+      const files = e3.dataTransfer?.files || [];
+      const file = files[0];
+      if (file) {
+        console.log(`file dropped ("${props.deepKey}"):`, file);
+        uploadFile(file);
+      }
+    };
+    s2(() => {
+      const unsubscribe = props.draft.subscribe(
+        props.deepKey,
+        (newValue) => {
+          setImg(newValue);
+        }
+      );
+      const dropzone = ref2.current;
+      document.addEventListener("dragenter", handleDragEnter);
+      document.addEventListener("dragover", handleDragEnter);
+      document.addEventListener("dragleave", handleDragLeave);
+      document.addEventListener("drop", handleDragLeave);
+      if (dropzone) {
+        dropzone.addEventListener("drop", handleDrop);
+      }
+      return () => {
+        unsubscribe();
+        document.removeEventListener("dragenter", handleDragEnter);
+        document.removeEventListener("dragover", handleDragEnter);
+        document.removeEventListener("dragleave", handleDragLeave);
+        document.removeEventListener("drop", handleDragLeave);
+        if (dropzone) {
+          dropzone.removeEventListener("drop", handleDrop);
+        }
+      };
+    }, []);
+    return /* @__PURE__ */ o4(
+      "div",
+      {
+        className: joinClassNames(
+          "DocEditor__ImageField",
+          isDragging && "dragging"
         ),
-        /* @__PURE__ */ o4(
-          TextInput,
-          {
-            className: "DocEditor__ImageField__imagePreview__image__alt",
-            size: "xs",
-            radius: 0,
-            value: img.alt,
-            label: "Alt text",
-            onChange: (e3) => {
-              setAltText(e3.currentTarget.value);
-            }
-          }
-        )
-      ] }) : /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__noImage", children: "No image" }),
-      /* @__PURE__ */ o4(
-        "label",
-        {
-          className: "DocEditor__ImageField__uploadButton",
-          role: "button",
-          "aria-disabled": loading,
-          children: [
+        ref: ref2,
+        children: [
+          img && img.src ? /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview", children: [
+            /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview__controls", children: /* @__PURE__ */ o4(Tooltip, { label: "Remove image", children: /* @__PURE__ */ o4(
+              ActionIcon,
+              {
+                className: "DocEditor__ImageField__imagePreview__controls__trash",
+                onClick: () => removeImage(),
+                children: /* @__PURE__ */ o4(IconTrash, { size: 16 })
+              }
+            ) }) }),
+            /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview__image", children: [
+              /* @__PURE__ */ o4(
+                "img",
+                {
+                  src: img.gciUrl || img.src,
+                  width: img.width,
+                  height: img.height
+                }
+              ),
+              /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__imagePreview__dimens", children: `${img.width}x${img.height}` })
+            ] }),
             /* @__PURE__ */ o4(
-              "input",
+              TextInput,
               {
-                type: "file",
-                accept,
-                onChange: onFileChange,
-                ref: inputRef
+                className: "DocEditor__ImageField__imagePreview__image__url",
+                size: "xs",
+                radius: 0,
+                value: img.gciUrl || img.src,
+                disabled: true
               }
             ),
-            /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__uploadButton__icon", children: /* @__PURE__ */ o4(IconPhotoUp, { size: 16 }) }),
-            /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__uploadButton__label", children: "Upload image" })
-          ]
-        }
-      )
-    ] });
+            /* @__PURE__ */ o4(
+              TextInput,
+              {
+                className: "DocEditor__ImageField__imagePreview__image__alt",
+                size: "xs",
+                radius: 0,
+                value: img.alt,
+                label: "Alt text",
+                onChange: (e3) => {
+                  setAltText(e3.currentTarget.value);
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__noImage", children: "No image" }),
+          /* @__PURE__ */ o4(
+            "label",
+            {
+              className: "DocEditor__ImageField__uploadButton",
+              role: "button",
+              "aria-disabled": loading,
+              children: [
+                /* @__PURE__ */ o4(
+                  "input",
+                  {
+                    type: "file",
+                    accept,
+                    onChange: onFileChange,
+                    ref: inputRef
+                  }
+                ),
+                /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__uploadButton__icon", children: /* @__PURE__ */ o4(IconPhotoUp, { size: 16 }) }),
+                /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__uploadButton__label", children: loading ? "Uploading..." : "Upload image" })
+              ]
+            }
+          )
+        ]
+      }
+    );
   };
   DocEditor.FileField = (props) => {
     const field = props.field;
     const [file, setFile] = y2({});
-    const inputRef = A2(null);
     const [loading, setLoading] = y2(false);
-    s2(() => {
-      const unsubscribe = props.draft.subscribe(
-        props.deepKey,
-        (newValue) => {
-          setFile(newValue);
-        }
-      );
-      return unsubscribe;
-    }, []);
-    async function onFileChange(e3) {
+    const [isDragging, setIsDragging] = y2(false);
+    const inputRef = A2(null);
+    const ref2 = A2(null);
+    let accept = void 0;
+    if (field.exts) {
+      accept = field.exts.join(",");
+    }
+    async function removeFile() {
+      setFile({});
+      props.draft.removeKey(props.deepKey);
+    }
+    async function uploadFile(file2) {
+      setLoading(true);
       try {
-        setLoading(true);
-        const inputEl = e3.target;
-        const files = inputEl.files || [];
-        const uploadedFile = files[0];
-        const file2 = await uploadFileToGCS(uploadedFile);
-        props.draft.updateKey(props.deepKey, file2);
-        setFile(file2);
+        const uploadedFile = await uploadFileToGCS(file2);
+        props.draft.updateKey(props.deepKey, uploadedFile);
+        setFile(uploadedFile);
         setLoading(false);
       } catch (err) {
         console.error("file upload failed");
@@ -44024,43 +44080,109 @@ ${content}</tr>
         inputEl.value = "";
       }
     }
-    let accept = void 0;
-    if (field.exts) {
-      accept = field.exts.join(",");
+    function onFileChange(e3) {
+      const inputEl = e3.target;
+      const files = inputEl.files || [];
+      const file2 = files[0];
+      if (file2) {
+        uploadFile(file2);
+      }
     }
-    return /* @__PURE__ */ o4("div", { className: "DocEditor__FileField", children: [
-      file && file.src ? /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__file", children: /* @__PURE__ */ o4(
-        TextInput,
-        {
-          className: "DocEditor__FileField__file__url",
-          size: "xs",
-          radius: 0,
-          value: file.src,
-          disabled: true
+    const handleDragEnter = (e3) => {
+      e3.preventDefault();
+      setIsDragging(true);
+    };
+    const handleDragLeave = (e3) => {
+      e3.preventDefault();
+      setIsDragging(false);
+    };
+    const handleDrop = (e3) => {
+      e3.preventDefault();
+      setIsDragging(false);
+      const files = e3.dataTransfer?.files || [];
+      const file2 = files[0];
+      if (file2) {
+        console.log(`file dropped ("${props.deepKey}"):`, file2);
+        uploadFile(file2);
+      }
+    };
+    s2(() => {
+      const unsubscribe = props.draft.subscribe(
+        props.deepKey,
+        (newValue) => {
+          setFile(newValue);
         }
-      ) }) : /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__noFile", children: "No file" }),
-      /* @__PURE__ */ o4(
-        "label",
-        {
-          className: "DocEditor__FileField__uploadButton",
-          role: "button",
-          "aria-disabled": loading,
-          children: [
-            /* @__PURE__ */ o4(
-              "input",
-              {
-                type: "file",
-                accept,
-                onChange: onFileChange,
-                ref: inputRef
-              }
-            ),
-            /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__uploadButton__icon", children: /* @__PURE__ */ o4(IconFileUpload, { size: 16 }) }),
-            /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__uploadButton__label", children: "Upload file" })
-          ]
+      );
+      const dropzone = ref2.current;
+      document.addEventListener("dragenter", handleDragEnter);
+      document.addEventListener("dragover", handleDragEnter);
+      document.addEventListener("dragleave", handleDragLeave);
+      document.addEventListener("drop", handleDragLeave);
+      if (dropzone) {
+        dropzone.addEventListener("drop", handleDrop);
+      }
+      return () => {
+        unsubscribe();
+        document.removeEventListener("dragenter", handleDragEnter);
+        document.removeEventListener("dragover", handleDragEnter);
+        document.removeEventListener("dragleave", handleDragLeave);
+        document.removeEventListener("drop", handleDragLeave);
+        if (dropzone) {
+          dropzone.removeEventListener("drop", handleDrop);
         }
-      )
-    ] });
+      };
+    }, []);
+    return /* @__PURE__ */ o4(
+      "div",
+      {
+        className: joinClassNames(
+          "DocEditor__FileField",
+          isDragging && "dragging"
+        ),
+        ref: ref2,
+        children: [
+          file && file.src && /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__controls", children: /* @__PURE__ */ o4(Tooltip, { label: "Remove file", children: /* @__PURE__ */ o4(
+            ActionIcon,
+            {
+              className: "DocEditor__FileField__controls__trash",
+              onClick: () => removeFile(),
+              children: /* @__PURE__ */ o4(IconTrash, { size: 16 })
+            }
+          ) }) }),
+          file && file.src ? /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__file", children: /* @__PURE__ */ o4(
+            TextInput,
+            {
+              className: "DocEditor__FileField__file__url",
+              size: "xs",
+              radius: 0,
+              value: file.src,
+              disabled: true
+            }
+          ) }) : /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__noFile", children: "No file" }),
+          /* @__PURE__ */ o4(
+            "label",
+            {
+              className: "DocEditor__FileField__uploadButton",
+              role: "button",
+              "aria-disabled": loading,
+              children: [
+                /* @__PURE__ */ o4(
+                  "input",
+                  {
+                    type: "file",
+                    accept,
+                    onChange: onFileChange,
+                    ref: inputRef
+                  }
+                ),
+                /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__uploadButton__icon", children: /* @__PURE__ */ o4(IconFileUpload, { size: 16 }) }),
+                /* @__PURE__ */ o4("div", { className: "DocEditor__FileField__uploadButton__label", children: loading ? "Uploading..." : "Upload file" })
+              ]
+            }
+          )
+        ]
+      }
+    );
   };
   DocEditor.ObjectField = (props) => {
     const field = props.field;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blinkk/root-cms",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.58",
   "author": "s@blinkk.com",
   "license": "MIT",
   "engines": {
@@ -56,7 +56,7 @@
   "//": "NOTE(stevenle): due to compat issues with mantine and preact, mantine is pinned to v4.2.12",
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@blinkk/root": "1.0.0-beta.57",
+    "@blinkk/root": "1.0.0-beta.58",
     "@emotion/react": "^11.10.5",
     "@firebase/app-compat": "^0.1.33",
     "@firebase/app-types": "^0.7.0",
@@ -90,7 +90,7 @@
     "vitest": "^0.18.1"
   },
   "peerDependencies": {
-    "@blinkk/root": "1.0.0-beta.57",
+    "@blinkk/root": "1.0.0-beta.58",
     "firebase-admin": ">=11",
     "firebase-functions": ">=4",
     "preact": "10.x",