improves MML live code editor UI

TheCodeTherapy · Oct 9, 2024 · f74643a · f74643a
1 parent ecb8889
commit f74643a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 5 deletions.
diff --git a/...3d-web-client-editor/src/editor-ui/components/EditorPanel/EditorPanelComponent.module.css b/...3d-web-client-editor/src/editor-ui/components/EditorPanel/EditorPanelComponent.module.css
@@ -127,6 +127,31 @@
   height: 30px;
   padding: 0px 0px 0px 12px;
   line-height: 30px;
+  display: inline-flex;
+  flex-direction: row;
+}
+
+.controls {
+  margin: 0px 3px 0px auto;
+}
+
+.button {
+  color: #dde;
+  cursor: pointer;
+  background-color: rgba(30, 30, 30, 0.3);
+  border: none;
+  border-radius: 5px;
+  transition: all .3s ease-in-out;
+  padding: 4px;
+}
+
+.button:hover {
+  background-color: rgba(119, 170, 255, 0.9);
+}
+
+.actionText {
+  font-weight: 900;
+  color: white;
 }
 
 .headerTitle {

diff --git a/packages/3d-web-client-editor/src/editor-ui/components/EditorPanel/EditorPanelComponent.tsx b/packages/3d-web-client-editor/src/editor-ui/components/EditorPanel/EditorPanelComponent.tsx
@@ -33,6 +33,8 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
   const [documentsWithCopies, setDocumentsWithCopies] = useState<string[]>([]);
   const [selectedDocument, setSelectedDocument] = useState<string>(""); // Controls currently selected doc
   const [fetching, setFetching] = useState<boolean>(true);
+  const [fetchedValue, setFetchedValue] = useState<string>("");
+  const [canApply, setCanApply] = useState<boolean>(false);
 
   const { onUpdate } = props;
 
@@ -48,8 +50,9 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
       setFetching(true);
       const response = await fetch(`/mml-documents/${docName}`);
       const data = await response.json();
+      setFetchedValue(data.content);
       setEditorValue(data.content);
-      setSelectedDocument(docName); // Mark this document as selected
+      setSelectedDocument(docName);
       setFetching(false);
     } catch (error) {
       setFetching(false);
@@ -85,6 +88,9 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
   // Save the document content
   const saveDocument = useCallback(
     async (content: string, docName: string) => {
+      if (content === fetchedValue) {
+        return;
+      }
       try {
         const response = await fetch(`/mml-documents/${docName}`, {
           method: "POST",
@@ -98,12 +104,14 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
         // Refresh document list and content after save
         await fetchDocumentList();
         await fetchDocumentContent(docName);
+        setFetchedValue(content);
+        setCanApply(false);
       } catch (error) {
         setFetching(false);
         console.error("Error saving document:", error);
       }
     },
-    [fetchDocumentList],
+    [fetchDocumentList, fetchedValue],
   );
 
   // Restore the original document from its copy
@@ -188,13 +196,13 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
               <li
                 key={docName}
                 className={selectedDocument === docName ? styles.selectedDocument : ""}
-                onClick={() => fetchDocumentContent(docName)} // Moved onClick here
+                onClick={() => fetchDocumentContent(docName)}
               >
                 <span>{docName}</span>
                 {documentsWithCopies.includes(docName) && (
                   <button
                     onClick={(e) => {
-                      e.stopPropagation(); // Prevent triggering document load
+                      e.stopPropagation();
                       restoreDocument(docName);
                     }}
                     title="Restore original"
@@ -214,6 +222,23 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
             Editing: {selectedDocument}{" "}
             {documentsWithCopies.includes(selectedDocument) ? "(modified)" : ""}{" "}
           </span>
+          <div className={styles.controls}>
+            <div className={styles.applyChanges}>
+              {canApply && (
+                <button
+                  className={styles.button}
+                  onClick={() => {
+                    const trimmedValue = editorValue.trim();
+                    onUpdate(trimmedValue);
+                    saveDocument(trimmedValue, selectedDocument);
+                  }}
+                  title="Apply changes"
+                >
+                  <span className={styles.actionText}>Apply</span> (Alt+Enter)
+                </button>
+              )}
+            </div>
+          </div>
         </div>
         <div id="editor-body" className={styles.editorBody}>
           <CodeMirror
@@ -222,7 +247,10 @@ const EditorPanelComponent = (props: EditorPanelProps, ref: ForwardedRef<EditorP
             basicSetup={setup}
             extensions={defaultEditorExtensions}
             theme={editorTheme}
-            onChange={(val) => setEditorValue(val)}
+            onChange={(val) => {
+              setCanApply(val !== fetchedValue);
+              setEditorValue(val);
+            }}
             autoFocus={true}
           />
         </div>