style / tools optis & new tools calculator

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

@@ -1,10 +1,13 @@
 import { useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { parseColonImportLines } from "./textImport.js";
 
 export function LinksModule({ toolboxId, moduleId, context, editing }) {
   const data = context.normalizeLinksData(context.getModuleData(toolboxId, moduleId, { links: [] }));
+  const textContent = context.moduleText?.links || {};
   const [title, setTitle] = useState("");
   const [url, setUrl] = useState("");
+  const [textImport, setTextImport] = useState("");
   const [copiedId, setCopiedId] = useState("");
 
   function save(links) {
@@ -28,6 +31,20 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
     setUrl("");
   }
 
+  function importLinks(event) {
+    event.preventDefault();
+    const imported = parseColonImportLines(textImport)
+      .map((entry) => ({
+        id: context.uid("link"),
+        title: entry.label,
+        url: context.normalizeUrl(entry.value)
+      }))
+      .filter((link) => link.url);
+    if (!imported.length) return;
+    save([...data.links, ...imported]);
+    setTextImport("");
+  }
+
   async function copyUrl(link) {
     const copied = await context.copyText(link.url);
     if (!copied) return;
@@ -38,11 +55,22 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
   return (
     <>
       {editing && (
-        <form className="inline-form links-add-form module-add-panel" onSubmit={addLink}>
-          <input name="title" placeholder="Nom du lien" value={title} onChange={(event) => setTitle(event.target.value)} />
-          <input name="url" placeholder="https://..." value={url} onChange={(event) => setUrl(event.target.value)} />
-          <button className="primary">Ajouter</button>
-        </form>
+        <div className="module-add-panel">
+          <form className="inline-form links-add-form" onSubmit={addLink}>
+            <input name="title" placeholder={textContent.titlePlaceholder || "Nom du lien"} value={title} onChange={(event) => setTitle(event.target.value)} />
+            <input name="url" placeholder={textContent.urlPlaceholder || "https://..."} value={url} onChange={(event) => setUrl(event.target.value)} />
+            <button className="primary">Ajouter</button>
+          </form>
+          <form className="text-import-form" onSubmit={importLinks}>
+            <textarea
+              value={textImport}
+              onChange={(event) => setTextImport(event.target.value)}
+              placeholder={textContent.importPlaceholder || "Importer plusieurs liens...\nBuild:https://example.com/build?class=rogue\nMap:https://example.com/map"}
+              rows={3}
+            />
+            <button type="submit">Importer le texte</button>
+          </form>
+        </div>
       )}
       <ul className="links-list">
         {data.links.map((link) => (