Migrate to React/Vite & Sass

website/src/features/toolboxes/modules/ScreenshotsModule.jsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+
+export function ScreenshotsModule({ toolboxId, moduleId, context }) {
+  const data = context.getModuleData(toolboxId, moduleId, { shots: [] });
+  const [dragOver, setDragOver] = useState(false);
+
+  async function addFiles(files) {
+    if (await context.addScreenshotFiles(toolboxId, moduleId, files)) {
+      setDragOver(false);
+    }
+  }
+
+  return (
+    <>
+      <label
+        className={`dropzone ${dragOver ? "is-drag-over" : ""}`}
+        onDragOver={(event) => {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "copy";
+          setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(event) => {
+          event.preventDefault();
+          addFiles(event.dataTransfer.files);
+        }}
+      >
+        <input type="file" accept="image/*" multiple hidden onChange={(event) => addFiles(event.target.files)} />
+        Ajouter des screenshots
+      </label>
+      <div
+        className="paste-target"
+        contentEditable
+        suppressContentEditableWarning
+        role="textbox"
+        aria-label="Coller une image depuis le presse-papiers"
+        onFocus={(event) => {
+          if (event.currentTarget.textContent.trim() === "Coller une image ici") event.currentTarget.textContent = "";
+        }}
+        onBlur={(event) => {
+          if (!event.currentTarget.textContent.trim()) event.currentTarget.textContent = "Coller une image ici";
+        }}
+        onPaste={(event) => {
+          const files = [...(event.clipboardData?.items || [])]
+            .filter((item) => item.type.startsWith("image/"))
+            .map((item) => item.getAsFile())
+            .filter(Boolean);
+          if (!files.length) return;
+          event.preventDefault();
+          event.currentTarget.textContent = "Coller une image ici";
+          addFiles(files);
+        }}
+      >
+        Coller une image ici
+      </div>
+      <div className="shots">
+        {data.shots.map((shot) => (
+          <figure key={shot.id}>
+            <button className="shot-preview" onClick={() => context.setScreenshot(shot)} aria-label="Agrandir le screenshot">
+              <img src={shot.dataUrl} alt="Screenshot" />
+            </button>
+            <button className="shot-delete-button danger" onClick={() => {
+              context.setModuleData(toolboxId, moduleId, { shots: data.shots.filter((item) => item.id !== shot.id) });
+            }} aria-label="Supprimer le screenshot" title="Supprimer">
+              <span className="ui-icon ui-icon-trash" aria-hidden="true" />
+            </button>
+          </figure>
+        ))}
+      </div>
+    </>
+  );
+}