feat: add editable CSS in StylesheetViewer and ElementPopup

- Make stylesheet fully editable via textarea with 1s debounce
- Allow editing CSS blocks in ElementPopup with live updates
- Replace syntax highlighting with plain textarea for better editing UX
- Updates reflect in PagedJS preview after debounce timeout

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/ElementPopup.vue

@@ -23,7 +23,11 @@
         <p v-else class="no-styles">Aucun style éditable</p>
       </div>
       <div class="popup-css">
-        <pre><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+        <textarea
+          :value="elementCss"
+          @input="handleCssInput"
+          spellcheck="false"
+        ></textarea>
       </div>
     </div>
   </div>
@@ -32,11 +36,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
-import hljs from 'highlight.js/lib/core';
-import css from 'highlight.js/lib/languages/css';
-import 'highlight.js/styles/github.css';
-
-hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
 
@@ -94,11 +93,6 @@ const fontSizeData = computed(() => {
   return stylesheetStore.extractValue(selector.value, 'font-size');
 });
 
-const highlightedCss = computed(() => {
-  if (!elementCss.value) return '<span class="no-css">Aucun style défini</span>';
-  return hljs.highlight(elementCss.value, { language: 'css' }).value;
-});
-
 const updateFontSize = (value) => {
   if (!fontSizeData.value) return;
   stylesheetStore.updateProperty(
@@ -109,6 +103,21 @@ const updateFontSize = (value) => {
   );
 };
 
+let cssDebounceTimer = null;
+
+const handleCssInput = (event) => {
+  const newCss = event.target.value;
+
+  if (cssDebounceTimer) {
+    clearTimeout(cssDebounceTimer);
+  }
+
+  cssDebounceTimer = setTimeout(() => {
+    const oldBlock = elementCss.value;
+    stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
+  }, 1000);
+};
+
 defineExpose({ handleIframeClick });
 </script>
 
@@ -157,21 +166,22 @@ defineExpose({ handleIframeClick });
 
 .popup-css {
   flex: 1;
-  padding: 0.75rem;
   background: #1e1e1e;
-  max-height: 200px;
+  display: flex;
-  overflow-y: auto;
 }
 
-.popup-css pre {
+.popup-css textarea {
-  margin: 0;
+  width: 100%;
+  height: 200px;
+  background: #1e1e1e;
+  color: #abb2bf;
+  border: none;
+  padding: 0.75rem;
+  font-family: 'Courier New', Courier, monospace;
   font-size: 0.75rem;
   line-height: 1.4;
-}
+  resize: none;
-
+  outline: none;
-.popup-css code {
-  background: transparent;
-  color: #fff;
 }
 
 .control {

src/components/StylesheetViewer.vue

@@ -1,26 +1,31 @@
 <template>
   <aside id="stylesheet-viewer">
     <h3>Stylesheet</h3>
-    <pre><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+    <textarea
+      :value="stylesheetStore.content"
+      @input="handleInput"
+      spellcheck="false"
+    ></textarea>
   </aside>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { useStylesheetStore } from '../stores/stylesheet';
-import hljs from 'highlight.js/lib/core';
-import css from 'highlight.js/lib/languages/css';
-import 'highlight.js/styles/github.css';
 
-hljs.registerLanguage('css', css);
+const stylesheetStore = useStylesheetStore();
+let debounceTimer = null;
 
-const props = defineProps({
+const handleInput = (event) => {
-  stylesheet: String
+  const newContent = event.target.value;
-});
 
-const highlightedCss = computed(() => {
+  if (debounceTimer) {
-  if (!props.stylesheet) return '';
+    clearTimeout(debounceTimer);
-  return hljs.highlight(props.stylesheet, { language: 'css' }).value;
+  }
-});
+
+  debounceTimer = setTimeout(() => {
+    stylesheetStore.content = newContent;
+  }, 1000);
+};
 </script>
 
 <style scoped>
@@ -30,10 +35,10 @@ const highlightedCss = computed(() => {
   right: 0;
   width: 350px;
   height: 100vh;
-  background: #1e1e1e;
   padding: 1rem;
   box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
   overflow-y: auto;
+  background: #282c34;
   color: #fff;
 }
 
@@ -42,13 +47,17 @@ h3 {
   color: #fff;
 }
 
-pre {
+textarea {
-  margin: 0;
+  width: 100%;
-  font-size: 0.75rem;
+  height: calc(100vh - 4rem);
-  line-height: 1.4;
+  background: #1e1e1e;
-}
+  color: #abb2bf;
-
+  border: none;
-code {
+  padding: 0.5rem;
-  background: transparent;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
 }
 </style>