Enhance WYSIWYG editor: clear toolbar and context on re-init, improve…

frontend/wysiwyg-editor.js

@@ -713,6 +713,10 @@ export const initWysiwyg = (textareaId) => {
   const editorEl = wrapper.querySelector(".wysiwyg-editor__body");
   if (!toolbarEl || !editorEl) return null;
 
+  /* Ensure toolbar is empty and remove any previous table-context bar after re-init (e.g. Fill demo content) to avoid duplicate bars */
+  toolbarEl.innerHTML = "";
+  wrapper.querySelectorAll(".wysiwyg-table-context").forEach((el) => el.remove());
+
   const rawContent = textarea.value ? textarea.value.trim() : "";
   const isHtml = rawContent.startsWith("<") && rawContent.includes(">");
   let initialContent = rawContent;

static/css/v3/wysiwyg-editor.css

@@ -3,6 +3,24 @@
   width: 100%;
 }
 
+/* Active/focus state: single unified box */
+.wysiwyg-v3:focus-within {
+  border-radius: var(--xl, 12px);
+  border: 1px solid var(--Stroke-Strong, rgba(5, 8, 22, 0.25));
+  background: var(--Surface-Mid, #F7F7F8);
+  overflow: hidden;
+}
+
+.wysiwyg-v3:focus-within .wysiwyg-editor__toolbar {
+  border: none;
+  background: transparent;
+}
+
+.wysiwyg-v3:focus-within .wysiwyg-editor__body {
+  border: none;
+  background: transparent;
+}
+
 .wysiwyg-editor__toolbar {
   display: flex;
   align-items: center;
@@ -13,6 +31,9 @@
   border: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.1));
   border-radius: var(--border-radius-xl, 12px) var(--border-radius-xl, 12px) 0 0;
   background: var(--color-surface-weak, #fff);
+  min-width: 0; /* allow shrinking so content can wrap */
+  overflow-x: auto; /* fallback: scroll on very narrow viewports */
+  -webkit-overflow-scrolling: touch;
 }
 
 /* When in markdown mode, hide all formatting controls except the MD toggle */
@@ -24,7 +45,13 @@
 .wysiwyg-toolbar__right {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: var(--space-default, 8px);
+  min-width: 0;
+}
+
+.wysiwyg-toolbar__left {
+  flex: 1 1 auto; /* grow and shrink, allow wrapping to next row when needed */
 }
 .wysiwyg-editor__body code {
   font-family: var(--font-mono);
@@ -211,7 +238,6 @@
 }
 
 .wysiwyg-editor__body:focus-within {
-  border-color: var(--color-stroke-mid, #0508162B);
   outline: none;
 }
 

static/js/code-block.js

@@ -91,9 +91,10 @@
     const CppHighlight = typeof window !== "undefined" && window.CppHighlight;
     if (!CppHighlight) return
     // Selectors for C++ code blocks that highlight.js has already processed
+    // + in class names must be escaped in CSS selectors (\+), so language-c\+\+ in selector
     const cppSelectors = [
       'code.language-cpp.hljs',
-      'code.language-c++.hljs',
+      'code.language-c\\+\\+.hljs',
       'code[data-lang="cpp"].hljs',
       'code[data-lang="c++"].hljs',
       '.doc pre.highlight code[data-lang="cpp"].hljs',

templates/v3/examples/_v3_example_section_wysiwyg.html

@@ -180,5 +180,8 @@ <h3>WYSIWYG editor</h3>
     ta.value = '';
     resetEditor(ta);
   });
+
+  // Load and init WYSIWYG on page load so the editor is ready without clicking Fill demo content
+  import('/static/js/v3/wysiwyg-editor.js').then(m => m.initWysiwyg('id_demo_content'));
   </script>
 </div>