fix(settings): make live preview read-only and hint intentional typo

Closes #7233

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -3755,6 +3755,9 @@ watch(previewRef, async (el) => {
       previewLineNumbersComp.of(buildPreviewLineNumbersExtension(ss.showLineNumbers)),
       highlightActiveLineGutter(),
       previewBasicSetup,
+      EditorState.readOnly.of(true),
+      EditorView.editable.of(false),
+      EditorView.contentAttributes.of({ tabindex: "0" }),
       sql({ dialect: MySQL }),
       themeComp.of(themeExt),
       fontThemeComp.of(editorFontTheme(EditorView, ss.fontSize, ss.fontFamily)),
@@ -3943,6 +3946,9 @@ onUnmounted(() => {
                 <div class="rounded-md border overflow-auto max-w-full" :class="editTheme === 'vscode-light' || editTheme === 'duotone-light' || editTheme === 'xcode' ? 'border-border' : 'border-border/50'">
                   <div ref="previewRef" style="min-width: 100%" />
                 </div>
+                <p v-if="editSqlSemanticDiagnosticsEnabled" class="text-xs text-muted-foreground">
+                  {{ t("settings.previewSyntaxErrorHint") }}
+                </p>
               </div>
 
               <Separator />

apps/desktop/src/components/editor/__tests__/EditorSettingsDialog.previewPosition.spec.ts

@@ -38,4 +38,21 @@ describe("EditorSettingsDialog live preview placement", () => {
     expect(dialogSource).toContain("previewLineNumbersComp.reconfigure(buildPreviewLineNumbersExtension(ss.showLineNumbers))");
     expect(dialogSource).toContain("return buildQueryEditorLineNumbersExtension(previewLineNumbersFactory, enabled");
   });
+
+  it("creates the preview editor as read-only so demo edits cannot desync the Apply buttons", () => {
+    expect(dialogSource).toContain("EditorState.readOnly.of(true)");
+    expect(dialogSource).toContain("EditorView.editable.of(false)");
+    expect(dialogSource).toContain('EditorView.contentAttributes.of({ tabindex: "0" })');
+  });
+
+  it("explains the intentional syntax-error demo below the preview when diagnostics are enabled", () => {
+    const preview = editorSection.indexOf('ref="previewRef"');
+    expect(editorSection).toContain('v-if="editSqlSemanticDiagnosticsEnabled"');
+    expect(editorSection.indexOf('t("settings.previewSyntaxErrorHint")')).toBeGreaterThan(preview);
+  });
+
+  it.each(["en", "zh-CN", "zh-TW", "es", "pt-BR", "it", "ja", "ko"])("locale %s translates settings.previewSyntaxErrorHint", (locale) => {
+    const localeSource = readFileSync(new URL(`../../../i18n/locales/${locale}.ts`, import.meta.url), "utf8");
+    expect(localeSource).toMatch(/previewSyntaxErrorHint: ".+"/);
+  });
 });