From 0df5d7c6e90ad3091f42bf5036b2661d7428f835 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 16:52:00 +0100
Subject: [PATCH] feat: improve code editor formatting behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Disable auto-formatting while in editing mode
- Format CSS only when exiting editing mode
- Auto-disable editing mode when switching tabs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/StylesheetViewer.vue | 20 +++++++++++++++++++-
 src/stores/stylesheet.js            |  6 ++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/StylesheetViewer.vue b/src/components/StylesheetViewer.vue
index e8bc63d..4cd72d6 100644
--- a/src/components/StylesheetViewer.vue
+++ b/src/components/StylesheetViewer.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
@@ -33,6 +33,7 @@ import 'highlight.js/styles/atom-one-dark.css';
 hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
+const activeTab = inject('activeTab');
 const isEditable = ref(false);
 let debounceTimer = null;
 
@@ -52,6 +53,23 @@ const handleInput = (event) => {
     stylesheetStore.content = newContent;
   }, 500);
 };
+
+// Sync editing mode with store
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
+});
+
+// Disable editing mode when changing tabs
+watch(activeTab, (newTab) => {
+  if (newTab !== 'code' && isEditable.value) {
+    isEditable.value = false;
+  }
+});
 </script>
 
 <style scoped>
diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js
index d1b3408..d2475e9 100644
--- a/src/stores/stylesheet.js
+++ b/src/stores/stylesheet.js
@@ -6,6 +6,7 @@ import parserPostcss from 'prettier/plugins/postcss';
 
 export const useStylesheetStore = defineStore('stylesheet', () => {
   const content = ref('');
+  const isEditing = ref(false);
   let formatTimer = null;
   let isFormatting = false;
 
@@ -30,9 +31,9 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     }
   };
 
-  // Watch content and format after 500ms of inactivity
+  // Watch content and format after 500ms of inactivity (only when not editing)
   watch(content, () => {
-    if (isFormatting) return;
+    if (isFormatting || isEditing.value) return;
 
     clearTimeout(formatTimer);
     formatTimer = setTimeout(() => {
@@ -65,6 +66,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
 
   return {
     content,
+    isEditing,
     loadStylesheet,
     updateProperty,
     extractValue,