From 7806cd5aef9fb0505b2c642ef70599a403cf14ba Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 6 Mar 2026 20:00:12 -0600
Subject: [PATCH] feat: use CodeMirror editor for HTML source view, hide save
 in preview mode

- HTML preview (iframe) no longer shows Edit/Save toolbar buttons
- Clicking Source toggle opens CodeMirror editor with syntax highlighting
- Save button appears only in source mode, using saveCodeFile()
- Ctrl+S saving supported via CodeMirror keybinding
---
 src/lib/components/chat/FileNav.svelte        | 55 +++++++++++++------
 .../chat/FileNav/FilePreview.svelte           |  9 +++
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index fbc7568f80..80285c976b 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -709,24 +709,43 @@
 				</Tooltip>
 			{/if}
 			{#if isTextFile}
-				{#if isCode}
-					<Tooltip content={$i18n.t('Save')}>
-						<button
-							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
-							on:click={() => filePreviewRef?.saveCodeFile()}
-							disabled={saving}
-							aria-label={$i18n.t('Save')}
-						>
-							{#if saving}
-								<Spinner className="size-3.5" />
-							{:else}
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
-									<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
-								</svg>
-							{/if}
-						</button>
-					</Tooltip>
-				{:else if editing}
+			{#if isHtml && showRaw}
+				<Tooltip content={$i18n.t('Save')}>
+					<button
+						class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+						on:click={() => filePreviewRef?.saveCodeFile()}
+						disabled={saving}
+						aria-label={$i18n.t('Save')}
+					>
+						{#if saving}
+							<Spinner className="size-3.5" />
+						{:else}
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+								<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+							</svg>
+						{/if}
+					</button>
+				</Tooltip>
+			{:else if isHtml}
+				<!-- HTML preview mode: no edit/save buttons -->
+			{:else if isCode}
+				<Tooltip content={$i18n.t('Save')}>
+					<button
+						class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+						on:click={() => filePreviewRef?.saveCodeFile()}
+						disabled={saving}
+						aria-label={$i18n.t('Save')}
+					>
+						{#if saving}
+							<Spinner className="size-3.5" />
+						{:else}
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+								<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+							</svg>
+						{/if}
+					</button>
+				</Tooltip>
+			{:else if editing}
 					<Tooltip content={$i18n.t('Cancel')}>
 						<button
 							class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
diff --git a/src/lib/components/chat/FileNav/FilePreview.svelte b/src/lib/components/chat/FileNav/FilePreview.svelte
index 0230017814..8159677a42 100644
--- a/src/lib/components/chat/FileNav/FilePreview.svelte
+++ b/src/lib/components/chat/FileNav/FilePreview.svelte
@@ -388,6 +388,15 @@
 				class="w-full h-full border-none bg-white"
 				title="HTML Preview"
 			/>
+		{:else if isHtml && showRaw}
+			<div class="h-full">
+				<FileCodeEditor
+					bind:this={fileCodeEditorRef}
+					value={fileContent ?? ''}
+					filePath={selectedFile}
+					{onSave}
+				/>
+			</div>
 		{:else if isMarkdown && !showRaw}
 			<div bind:this={markdownEl} class="prose dark:prose-invert max-w-full text-sm p-3">
 				{@html renderedHtml}