キーワードを更新できるようにする

Closes #7

Author: AsaiToshiya

Diff for: public/style.css

@@ -21,8 +21,8 @@ textarea {
   margin: auto 8px;
 }
 
-.keyword:after {
-  content: " X";
+.keyword {
+  white-space: nowrap;
 }
 
 .row {

Diff for: src/App.jsx

@@ -73,6 +73,15 @@ function App() {
     await save();
   };
 
+  const handleUpdate = (key, keyword, index) => {
+    const keywords = keyword.split(",").map((keyword) => keyword.trim());
+    setData(key, "keywords", (prev) => [
+      ...prev.slice(0, index),
+      ...keywords,
+      ...prev.slice(index + 1),
+    ]);
+  };
+
   return (
     <>
       <h1>Prompter</h1>
@@ -90,6 +99,9 @@ function App() {
             onAdd={(keyword) => handleAdd("prompt", keyword)}
             onClear={() => handleClear("prompt")}
             onRemove={(index) => handleRemove("prompt", index)}
+            onUpdate={(keyword, index) =>
+              handleUpdate("prompt", keyword, index)
+            }
           />
         )}
       </For>
@@ -102,6 +114,9 @@ function App() {
             onAdd={(keyword) => handleAdd("negativePrompt", keyword)}
             onClear={() => handleClear("negativePrompt")}
             onRemove={(index) => handleRemove("negativePrompt", index)}
+            onUpdate={(keyword, index) =>
+              handleUpdate("negativePrompt", keyword, index)
+            }
           />
         )}
       </For>

Diff for: src/components/Prompt.jsx

@@ -1,14 +1,26 @@
 import { createSignal, createMemo, Index } from "solid-js";
 
 function Prompt(props) {
+  const [index, setIndex] = createSignal(-1);
   const [keyword, setKeyword] = createSignal("");
   const result = createMemo(() => props.keywords.join(", "));
+  const isAdd = createMemo(() => index() < 0);
 
   const handleAdd = () => {
     props.onAdd?.(keyword());
     setKeyword("");
   };
 
+  const handleCancel = (keyword, index) => {
+    setKeyword("");
+    setIndex(-1);
+  };
+
+  const handleChange = (keyword, index) => {
+    setKeyword(keyword);
+    setIndex(index);
+  };
+
   const handleCopy = () => {
     navigator.clipboard.writeText(result());
   };
@@ -21,6 +33,12 @@ function Prompt(props) {
     setKeyword((prev) => `(${prev})`);
   };
 
+  const handleUpdate = () => {
+    props.onUpdate?.(keyword(), index());
+    setKeyword("");
+    setIndex(-1);
+  };
+
   return (
     <>
       Keyword:
@@ -35,7 +53,17 @@ function Prompt(props) {
         &nbsp;
         <button onclick={handleDecreaseAttention}>Decrease Attention</button>
         &nbsp;
-        <button onClick={handleAdd}>Add</button>
+        <button onClick={handleAdd} disabled={!isAdd()}>
+          Add
+        </button>
+        &nbsp;
+        <button onClick={handleUpdate} disabled={isAdd()}>
+          Update
+        </button>
+        &nbsp;
+        <button onClick={handleCancel} disabled={isAdd()}>
+          Cancel
+        </button>
       </div>
       <br />
       Keywords:
@@ -44,9 +72,13 @@ function Prompt(props) {
           <Index each={props.keywords}>
             {(keyword, i) => (
               <>
-                <button class="keyword" onClick={[props.onRemove, i]}>
-                  {keyword()}
-                </button>
+                <span class="keyword">
+                  <button onClick={() => handleChange(keyword(), i)}>
+                    {keyword()}
+                  </button>
+                  {"\n"}
+                  <button onClick={[props.onRemove, i]}>X</button>
+                </span>
                 {"\n"}
               </>
             )}