feat: split diagram preview into left code pane and right visual container

Author: ThisIs-Developer

index.html

@@ -872,8 +872,15 @@ <h3 class="modal-section-title">Open-source credits</h3>
                 <!-- Preview Container -->
                 <div class="diagram-modal-preview-section">
                   <p class="diagram-modal-preview-title">Preview</p>
-                  <div id="diagram-modal-preview" class="diagram-preview-container">
-                    <!-- Populated dynamically with selected template preview -->
+                  <div class="diagram-modal-preview-split">
+                    <!-- Left: Code -->
+                    <div class="diagram-preview-code-pane">
+                      <textarea id="diagram-modal-preview-code" readonly class="rename-modal-input diagram-preview-textarea" placeholder="Diagram source code..."></textarea>
+                    </div>
+                    <!-- Right: Visual Preview -->
+                    <div id="diagram-modal-preview" class="diagram-preview-container">
+                      <!-- Populated dynamically with selected template preview -->
+                    </div>
                   </div>
                 </div>
               </div>

script.js

@@ -5559,11 +5559,12 @@ document.addEventListener("DOMContentLoaded", async function () {
     const emptyMessage = document.getElementById('diagram-modal-empty');
     const searchInput = document.getElementById('diagram-modal-search');
     const previewContainer = document.getElementById('diagram-modal-preview');
+    const previewCode = document.getElementById('diagram-modal-preview-code');
     const confirmBtn = document.getElementById('diagram-modal-insert');
     const cancelBtn = document.getElementById('diagram-modal-cancel');
     const closeBtn = document.getElementById('diagram-modal-close');
 
-    if (!modal || !sidebar || !grid || !emptyMessage || !searchInput || !previewContainer || !confirmBtn || !cancelBtn || !closeBtn) return;
+    if (!modal || !sidebar || !grid || !emptyMessage || !searchInput || !previewContainer || !previewCode || !confirmBtn || !cancelBtn || !closeBtn) return;
 
     const start = markdownEditor.selectionStart;
     const end = markdownEditor.selectionEnd;
@@ -5574,6 +5575,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     sidebar.textContent = '';
     grid.textContent = '';
     previewContainer.textContent = '';
+    if (previewCode) previewCode.value = '';
     confirmBtn.disabled = true;
 
     const categories = [
@@ -5833,6 +5835,7 @@ document.addEventListener("DOMContentLoaded", async function () {
           card.classList.add('is-selected');
 
           previewContainer.innerHTML = t.svg;
+          if (previewCode) previewCode.value = t.code.trim();
           confirmBtn.disabled = false;
         });
 

styles.css

@@ -4580,16 +4580,48 @@ html[data-theme="dark"] .diagram-card-preview {
   color: var(--text-color);
 }
 
+.diagram-modal-preview-split {
+  display: flex;
+  gap: 16px;
+  height: 200px;
+}
+
+.diagram-preview-code-pane {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+}
+
+.diagram-preview-textarea {
+  width: 100%;
+  height: 100%;
+  resize: none;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.85rem;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--editor-bg, #ffffff);
+  color: var(--text-color);
+  outline: none;
+}
+
+html[data-theme="dark"] .diagram-preview-textarea {
+  background: #1e1e1e;
+}
+
 .diagram-preview-container {
+  flex: 1;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   background: #ffffff;
-  height: 200px;
+  height: 100%;
   overflow: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
+  min-width: 0;
 }
 
 html[data-theme="dark"] .diagram-preview-container {
@@ -4624,7 +4656,15 @@ html[data-theme="dark"] .diagram-preview-container {
   .diagram-modal-box {
     height: 95vh;
   }
+  .diagram-modal-preview-split {
+    flex-direction: column;
+    height: auto;
+    gap: 12px;
+  }
+  .diagram-preview-code-pane {
+    height: 100px;
+  }
   .diagram-preview-container {
-    height: 140px;
+    height: 120px;
   }
 }