[#69712] add Modal for editing the commit message

src/myst-git/CommitModal.jsx

@@ -0,0 +1,106 @@
+import { useComputed, useSignal } from "@preact/signals";
+import styled from "styled-components";
+
+export const Popup = styled.div`
+  background-color: white;
+  position: absolute;
+  z-index: 11;
+  border-radius: var(--border-radius);
+`;
+
+const Modal = styled(Popup)`
+  left: 50%;
+  top: 80px;
+  transform: translateX(-160px);
+  box-shadow: 4px 4px 10px var(--gray-600);
+  padding: 20px 15px;
+  width: 600px;
+
+  label,
+  input,
+  textarea {
+    display: block;
+  }
+
+  label {
+    margin-bottom: 10px;
+  }
+
+  textarea,
+  input {
+    padding: 5px 10px;
+    font-family: inherit;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  input {
+    margin-bottom: 20px;
+  }
+
+  #buttons {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      cursor: pointer;
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+      font-family: inherit;
+      border: 1px solid var(--icon-border);
+      background-color: var(--icon-bg);
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0px 15px;
+      margin: 5px;
+      transition: 0.4s ease;
+      border-radius: var(--border-radius);
+
+      &:hover {
+        background-color: var(--icon-selected);
+        border: 1px solid var(--icon-selected);
+      }
+    }
+  }
+`;
+
+const CommitModal = ({ initialSummary = "", onSubmit, onClose }) => {
+  const summary = useSignal(initialSummary);
+  const description = useSignal("");
+  const message = useComputed(() => `${summary.value}\n\n${description.value}`);
+
+  return (
+    <Modal>
+      <form
+        onSubmit={(ev) => {
+          ev.preventDefault();
+          onSubmit({ summary: summary.value, message: message.value });
+        }}
+      >
+        <label htmlFor="summary">Commit summary</label>
+        <input id="summary" type="text" value={summary.value} onChange={(ev) => (summary.value = ev.target.value)} autoFocus />
+        <label htmlFor="description">Commit description</label>
+        <textarea
+          name="description"
+          id="description"
+          value={description.value}
+          onChange={(ev) => (description.value = ev.target.value)}
+          cols={80}
+          rows={5}
+        ></textarea>
+        <div id="buttons">
+          <button type="submit">Commit</button>
+          <button type="button" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default CommitModal;

src/myst-git/MystEditorGit.jsx

@@ -6,6 +6,7 @@ import { createMystState, MystState } from "../mystState";
 import styled, { StyleSheetManager } from "styled-components";
 import Select from "./Select";
 import * as Y from "yjs";
+import CommitModal, { Popup } from "./CommitModal";
 
 const MystContainer = styled.div`
   display: grid;
@@ -84,7 +85,7 @@ const ChangeHistory = styled.div`
   }
 `;
 
-const Toast = styled.div`
+const Toast = styled(Popup)`
   background-color: white;
   position: absolute;
   top: 10px;
@@ -138,6 +139,7 @@ const MystEditorGit = ({
   const mystState = useRef(createMystState({ ...props }));
   const changeHistory = useSignal(initialHistory);
   const toast = useSignal(null);
+  const commitSummary = useSignal(null);
 
   useEffect(() => {
     window.myst_editor[props.id].state = mystState.current;
@@ -155,20 +157,28 @@ const MystEditorGit = ({
 
   const commitButton = {
     text: "Commit",
-    action: async () => {
-      try {
-        mystState.current.options.includeButtons.value = defaultButtons;
-        const { hash, message, webUrl } = await commitChanges();
-        toast.value = { text: "Changes have been commited. ", link: { text: "See in Gitlab", href: webUrl } };
-        switchCommit({ hash, message }, true);
-      } catch (error) {
-        console.error(error);
-        toast.value = { text: `Error occured while commiting: ${error}` };
-        mystState.current.options.includeButtons.value = [...defaultButtons, commitButton];
-      }
-      setTimeout(() => (toast.value = null), 8000);
+    action: () => {
+      mystState.current.options.includeButtons.value = defaultButtons;
+      commitSummary.value = `MyST: update docs ${file.value}`;
     },
   };
+  async function onCommit({ summary, message }) {
+    try {
+      commitSummary.value = null;
+      const { hash, webUrl } = await commitChanges(message);
+      toast.value = { text: "Changes have been commited. ", link: { text: "See in Gitlab", href: webUrl } };
+      switchCommit({ hash, message: summary }, true);
+    } catch (error) {
+      console.error(error);
+      toast.value = { text: `Error occured while commiting: ${error}` };
+      mystState.current.options.includeButtons.value = [...defaultButtons, commitButton];
+    }
+    setTimeout(() => (toast.value = null), 8000);
+  }
+  function onCommitCancel() {
+    commitSummary.value = null;
+    mystState.current.options.includeButtons.value = [...defaultButtons, commitButton];
+  }
   useSignalEffect(() => {
     if (commit.value?.hash == commits.value[0]?.hash) {
       mystState.current.options.includeButtons.value = [...defaultButtons, commitButton];
@@ -375,6 +385,7 @@ const MystEditorGit = ({
               </button>
             </Toast>
           )}
+          {commitSummary.value && <CommitModal initialSummary={commitSummary} onSubmit={onCommit} onClose={onCommitCancel} />}
           <MystState.Provider value={mystState.current}>{room.value && <MystEditorPreact />}</MystState.Provider>
         </MystContainer>
       </StyleSheetManager>