Enhance Interview Wizard Modal with improved nested loop state management and preview functionality
Some checks are pending
Node.js build / build (20.x) (push) Waiting to run
Node.js build / build (22.x) (push) Waiting to run

- 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.
This commit is contained in:
Lars 2026-01-16 20:57:27 +01:00
parent c3357a784b
commit 611ad37c42

View File

@ -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);
if (nestedLoopState) {
const resetState = clearDraft(nestedLoopState);
this.state.loopRuntimeStates.set(nestedLoopKey, resetState);
// Reset nested loop state completely: clear items and draft
const resetState = {
items: [],
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
setTimeout(() => {
const textarea = textEditorContainer.querySelector("textarea");
if (textarea) {
const itemToolbar = createMarkdownToolbar(
textarea,
() => {
// Get current value from textarea before toggling
const currentValue = textarea.value;
// Update draft with current value
onFieldChange(nestedStep.key, currentValue);
// Toggle preview mode
const newPreviewMode = !this.previewMode.get(previewKey);
this.previewMode.set(previewKey, newPreviewMode);
// Re-render to show/hide preview
this.renderStep();
}
);
textEditorContainer.insertBefore(itemToolbar, textEditorContainer.firstChild);
}
}, 10);
// Add toolbar with preview toggle (only show in edit mode)
if (!isPreviewMode) {
setTimeout(() => {
const textarea = textEditorContainer.querySelector("textarea");
if (textarea) {
const itemToolbar = createMarkdownToolbar(
textarea,
() => {
// Get current value from textarea before toggling
const currentValue = textarea.value;
// Update draft with current value
onFieldChange(nestedStep.key, currentValue);
// Toggle preview mode
const newPreviewMode = !this.previewMode.get(previewKey);
this.previewMode.set(previewKey, newPreviewMode);
// Re-render to show/hide preview
this.renderStep();
}
);
textEditorContainer.insertBefore(itemToolbar, textEditorContainer.firstChild);
}
}, 10);
}
// Render preview if in preview mode
if (isPreviewMode && existingValue) {