Enhance Interview Wizard Modal with improved nested loop state management and preview functionality

- Reset nested loop state to clear both items and draft when a new item is created.
- Added a "Back to Edit" button in preview mode to facilitate easy navigation back to editing.
- Updated toolbar functionality to only display in edit mode, improving user experience during text editing.
- Enhanced rendering logic to ensure proper display of preview and editing states.

src/ui/InterviewWizardModal.ts

@@ -931,16 +931,25 @@ export class InterviewWizardModal extends Modal {
             // Update answers
             this.state.loopContexts.set(step.key, newState.items);
             
-            // If we just created a new item, reset all nested loop states
+            // If we just created a new item, reset all nested loop states (items AND draft)
             if (wasNewItem) {
               for (const nestedStep of step.items) {
                 if (nestedStep.type === "loop") {
                   const nestedLoopKey = `${step.key}.${nestedStep.key}`;
-                  const nestedLoopState = this.state.loopRuntimeStates.get(nestedLoopKey);
+                  // Reset nested loop state completely: clear items and draft
-                  if (nestedLoopState) {
+                  const resetState = {
-                    const resetState = clearDraft(nestedLoopState);
+                    items: [],
-                    this.state.loopRuntimeStates.set(nestedLoopKey, resetState);
+                    draft: {},
+                    editIndex: null,
+                    activeItemStepIndex: 0,
+                  };
+                  this.state.loopRuntimeStates.set(nestedLoopKey, resetState);
+                  // Also clear preview mode for nested loop fields
+                  const nestedLoopPreviewKeys: string[] = [];
+                  for (const nestedNestedStep of (nestedStep as LoopStep).items) {
+                    nestedLoopPreviewKeys.push(`${nestedLoopKey}.${nestedNestedStep.key}`);
                   }
+                  nestedLoopPreviewKeys.forEach(key => this.previewMode.delete(key));
                 }
               }
             }
@@ -1023,6 +1032,31 @@ export class InterviewWizardModal extends Modal {
       previewContainer.style.borderRadius = "4px";
       previewContainer.style.background = "var(--background-primary)";
       previewContainer.style.overflowY = "auto";
+      previewContainer.style.position = "relative";
+      
+      // Add "Back to Edit" button in preview container
+      if (isPreviewMode) {
+        const backToEditBtn = previewContainer.createEl("button", {
+          text: "✏️ Zurück zum Bearbeiten",
+          cls: "mod-cta",
+        });
+        backToEditBtn.style.position = "absolute";
+        backToEditBtn.style.top = "0.5em";
+        backToEditBtn.style.right = "0.5em";
+        backToEditBtn.style.zIndex = "10";
+        backToEditBtn.onclick = () => {
+          // Get current value from preview (it's already in draft)
+          const currentValue = existingValue;
+          // Update draft with current value
+          onFieldChange(nestedStep.key, currentValue);
+          
+          // Toggle preview mode off
+          this.previewMode.set(previewKey, false);
+          
+          // Re-render to show editor
+          this.renderStep();
+        };
+      }
 
       // Editor container
       const textEditorContainer = editorContainer.createEl("div", {
@@ -1060,29 +1094,31 @@ export class InterviewWizardModal extends Modal {
         text.inputEl.style.boxSizing = "border-box";
       });
 
-      // Add toolbar with preview toggle
+      // Add toolbar with preview toggle (only show in edit mode)
-      setTimeout(() => {
+      if (!isPreviewMode) {
-        const textarea = textEditorContainer.querySelector("textarea");
+        setTimeout(() => {
-        if (textarea) {
+          const textarea = textEditorContainer.querySelector("textarea");
-          const itemToolbar = createMarkdownToolbar(
+          if (textarea) {
-            textarea,
+            const itemToolbar = createMarkdownToolbar(
-            () => {
+              textarea,
-              // Get current value from textarea before toggling
+              () => {
-              const currentValue = textarea.value;
+                // Get current value from textarea before toggling
-              // Update draft with current value
+                const currentValue = textarea.value;
-              onFieldChange(nestedStep.key, currentValue);
+                // Update draft with current value
+                onFieldChange(nestedStep.key, currentValue);
                 
-              // Toggle preview mode
+                // Toggle preview mode
-              const newPreviewMode = !this.previewMode.get(previewKey);
+                const newPreviewMode = !this.previewMode.get(previewKey);
-              this.previewMode.set(previewKey, newPreviewMode);
+                this.previewMode.set(previewKey, newPreviewMode);
                 
-              // Re-render to show/hide preview
+                // Re-render to show/hide preview
-              this.renderStep();
+                this.renderStep();
-            }
+              }
-          );
+            );
-          textEditorContainer.insertBefore(itemToolbar, textEditorContainer.firstChild);
+            textEditorContainer.insertBefore(itemToolbar, textEditorContainer.firstChild);
-        }
+          }
-      }, 10);
+        }, 10);
+      }
 
       // Render preview if in preview mode
       if (isPreviewMode && existingValue) {