kempo-ui 0.4.20 → 0.4.22

package/docs/components/code-editor.html

@@ -505,7 +505,8 @@
         <a href="#controlsExample">Built-in Controls</a><br />
         <a href="#customControls">Custom Controls</a><br />
         <a href="#height">Setting Height</a><br />
-        <a href="#disabled">Disabled / Read-only</a><br />
+        <a href="#formIntegration">Form Integration</a><br />
+        <a href="#disabled">Disabled</a><br />
         <a href="#jsApi">JavaScript API</a><br />
 
         <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -562,7 +563,7 @@ console.log(sorted);"></k-code-editor>
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&#x27;html&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-format-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-format-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-copy-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-copy-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-editor-theme</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-editor-theme</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-fullscreen</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-fullscreen</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&#x27;html&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-copy-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-copy-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-editor-theme</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-editor-theme</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-fullscreen</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-fullscreen</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -571,10 +572,10 @@ console.log(sorted);"></k-code-editor>
   <h1>Hello World</h1>
   <p>This is a paragraph.</p>
 </div>">
-            <k-cec-format-code slot="toolbar-top-left"></k-cec-format-code>
-            <k-cec-copy-code slot="toolbar-top-left"></k-cec-copy-code>
-            <k-cec-editor-theme slot="toolbar-top-right"></k-cec-editor-theme>
-            <k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
+            <kc-format-code slot="toolbar-top-left"></kc-format-code>
+            <kc-copy-code slot="toolbar-top-left"></kc-copy-code>
+            <kc-editor-theme slot="toolbar-top-right"></kc-editor-theme>
+            <kc-fullscreen slot="toolbar-top-right"></kc-fullscreen>
           </k-code-editor>
         </k-card>
       </div>
@@ -597,12 +598,38 @@ console.log(x);"></k-code-editor>
       </div>
     </div>
 
-    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled / Read-only</a></h3>
-    <p>The <code>disabled</code> attribute makes the editor non-interactive (Monaco is set to <code>readOnly</code>), mutes the toolbar, fades the host, and excludes the field from form submission. The <code>readonly</code> attribute lets the user select and copy text but not edit; the value is still submitted with the form.</p>
+    <h3 id="formIntegration"><a href="#formIntegration" class="no-link">Form Integration</a></h3>
+    <p>The code editor supports form association. Add a <code>name</code> attribute so the value is submitted with the form, and use <code>required</code> to enforce validation:</p>
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&#x27;codeForm&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&#x27;code&#x27;</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&#x27;javascript&#x27;</span> <span class="hljs-attr">required</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;b r&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&#x27;submit&#x27;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;btn mt&#x27;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&#x27;formOutput&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;codeForm&#x27;</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;submit&#x27;</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {<br>    e.<span class="hljs-title function_">preventDefault</span>();<br>    <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormData</span>(e.<span class="hljs-property">target</span>);<br>    <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;formOutput&#x27;</span>).<span class="hljs-property">textContent</span> = data.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;code&#x27;</span>);<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <form id="codeForm">
+            <k-code-editor name="code" language="javascript" required class="b r" style="height: 200px" value="console.log('hello');"></k-code-editor>
+            <button type="submit" class="btn mt">Submit</button>
+          </form>
+          <pre id="formOutput" class="mt b r p" style="min-height: 2rem;"></pre>
+          <script>
+            document.getElementById('codeForm').addEventListener('submit', e => {
+              e.preventDefault();
+              const data = new FormData(e.target);
+              document.getElementById('formOutput').textContent = data.get('code');
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>The <code>disabled</code> attribute makes the editor non-interactive (Monaco is set to <code>readOnly</code>), mutes the toolbar, fades the host, and excludes the field from form submission.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-code-editor</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-code-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -610,18 +637,9 @@ console.log(x);"></k-code-editor>
           <k-code-editor
             disabled
             language="javascript"
-            class="b r mb"
-            style="height: 160px"
-            value="// This editor is disabled — toolbar is muted, content is locked.
-const x = 42;
-console.log(x);"
-          ></k-code-editor>
-          <k-code-editor
-            readonly
-            language="javascript"
             class="b r"
             style="height: 160px"
-            value="// This editor is read-only — select and copy, just not edit.
+            value="// This editor is disabled — toolbar is muted, content is locked.
 const x = 42;
 console.log(x);"
           ></k-code-editor>
@@ -657,7 +675,6 @@ console.log(x);"
         <tr><td><code>monacoSrc</code></td><td><code>monaco-src</code></td><td>String</td><td><code>''</code></td><td>Custom Monaco CDN base URL</td></tr>
         <tr><td><code>editorTheme</code></td><td><code>editor-theme</code></td><td>String</td><td><code>'auto'</code></td><td>Theme override: <code>'auto'</code> (matches site theme), <code>'light'</code>, or <code>'dark'</code></td></tr>
         <tr><td><code>disabled</code></td><td><code>disabled</code></td><td>Boolean</td><td><code>false</code></td><td>Editor is non-interactive (Monaco set to <code>readOnly</code>), toolbar is muted, host fades, and the field is excluded from form submission</td></tr>
-        <tr><td><code>readonly</code></td><td><code>readonly</code></td><td>Boolean</td><td><code>false</code></td><td>User can select and copy text but not edit (Monaco set to <code>readOnly</code>); value still submitted with the form</td></tr>
         <tr><td><code>required</code></td><td><code>required</code></td><td>Boolean</td><td><code>false</code></td><td>When <code>true</code> and the editor is empty, the element reports a <code>valueMissing</code> validity error</td></tr>
       </tbody>
     </table>
@@ -729,38 +746,42 @@ console.log(x);"
         <tr><th>Element</th><th>Description</th></tr>
       </thead>
       <tbody>
-        <tr><td><code>&lt;k-cec-format-code&gt;</code></td><td>Formats the code using Monaco's built-in formatter</td></tr>
-        <tr><td><code>&lt;k-cec-copy-code&gt;</code></td><td>Copies the editor content to the clipboard</td></tr>
-        <tr><td><code>&lt;k-cec-undo&gt;</code></td><td>Undoes the last edit</td></tr>
-        <tr><td><code>&lt;k-cec-redo&gt;</code></td><td>Redoes the last undone edit</td></tr>
-        <tr><td><code>&lt;k-cec-word-wrap&gt;</code></td><td>Toggles word wrapping on/off</td></tr>
-        <tr><td><code>&lt;k-cec-minimap&gt;</code></td><td>Toggles the minimap on/off</td></tr>
-        <tr><td><code>&lt;k-cec-find-replace&gt;</code></td><td>Opens Monaco's Find &amp; Replace dialog</td></tr>
-        <tr><td><code>&lt;k-cec-font-size&gt;</code></td><td>Increase/decrease font size buttons</td></tr>
-        <tr><td><code>&lt;k-cec-fold-all&gt;</code></td><td>Toggles fold/unfold all code regions</td></tr>
-        <tr><td><code>&lt;k-cec-fullscreen&gt;</code></td><td>Toggles the editor in and out of fullscreen — visible in all modes</td></tr>
-        <tr><td><code>&lt;k-cec-language&gt;</code></td><td>Select dropdown to change the syntax language</td></tr>
-        <tr><td><code>&lt;k-cec-editor-theme&gt;</code></td><td>Select dropdown to switch between auto, light, and dark editor themes</td></tr>
-        <tr><td><code>&lt;k-cec-group&gt;</code></td><td>Groups controls visually with shared borders</td></tr>
-        <tr><td><code>&lt;k-cec-spacer&gt;</code></td><td>Flexible spacer to push controls apart</td></tr>
+        <tr><td><code>&lt;kc-format-code&gt;</code></td><td>Formats the code using Monaco's built-in formatter</td></tr>
+        <tr><td><code>&lt;kc-copy-code&gt;</code></td><td>Copies the editor content to the clipboard</td></tr>
+        <tr><td><code>&lt;kc-undo&gt;</code></td><td>Undoes the last edit</td></tr>
+        <tr><td><code>&lt;kc-redo&gt;</code></td><td>Redoes the last undone edit</td></tr>
+        <tr><td><code>&lt;kc-word-wrap&gt;</code></td><td>Toggles word wrapping on/off</td></tr>
+        <tr><td><code>&lt;kc-minimap&gt;</code></td><td>Toggles the minimap on/off</td></tr>
+        <tr><td><code>&lt;kc-find-replace&gt;</code></td><td>Opens Monaco's Find &amp; Replace dialog</td></tr>
+        <tr><td><code>&lt;kc-font-size&gt;</code></td><td>Container for increase/decrease font size buttons</td></tr>
+        <tr><td><code>&lt;kc-font-size-decrease&gt;</code></td><td>Decreases the editor font size</td></tr>
+        <tr><td><code>&lt;kc-font-size-increase&gt;</code></td><td>Increases the editor font size</td></tr>
+        <tr><td><code>&lt;kc-fold-all&gt;</code></td><td>Toggles fold/unfold all code regions</td></tr>
+        <tr><td><code>&lt;kc-fullscreen&gt;</code></td><td>Toggles the editor in and out of fullscreen — visible in all modes</td></tr>
+        <tr><td><code>&lt;kc-language&gt;</code></td><td>Select dropdown to change the syntax language</td></tr>
+        <tr><td><code>&lt;kc-editor-theme&gt;</code></td><td>Select dropdown to switch between auto, light, and dark editor themes</td></tr>
+        <tr><td><code>&lt;k-control-group&gt;</code></td><td>Groups controls visually with shared borders</td></tr>
+        <tr><td><code>&lt;kc-spacer&gt;</code></td><td>Flexible spacer to push controls apart</td></tr>
       </tbody>
     </table>
 
     <script type="module" src="../src/components/CodeEditor.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FormatCode.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/CopyCode.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/EditorTheme.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Undo.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Redo.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/WordWrap.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Minimap.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FindReplace.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FontSize.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/FoldAll.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/LanguageSelect.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/Fullscreen.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/ControlGroup.js"></script>
-    <script type="module" src="../src/components/codeEditorControls/ControlSpacer.js"></script>
+    <script type="module" src="../src/components/controls/FormatCode.js"></script>
+    <script type="module" src="../src/components/controls/CopyCode.js"></script>
+    <script type="module" src="../src/components/controls/EditorTheme.js"></script>
+    <script type="module" src="../src/components/controls/Undo.js"></script>
+    <script type="module" src="../src/components/controls/Redo.js"></script>
+    <script type="module" src="../src/components/controls/WordWrap.js"></script>
+    <script type="module" src="../src/components/controls/Minimap.js"></script>
+    <script type="module" src="../src/components/controls/FindReplace.js"></script>
+    <script type="module" src="../src/components/controls/FontSize.js"></script>
+    <script type="module" src="../src/components/controls/FontSizeDecrease.js"></script>
+    <script type="module" src="../src/components/controls/FontSizeIncrease.js"></script>
+    <script type="module" src="../src/components/controls/FoldAll.js"></script>
+    <script type="module" src="../src/components/controls/Language.js"></script>
+    <script type="module" src="../src/components/controls/Fullscreen.js"></script>
+    <script type="module" src="../src/components/ControlGroup.js"></script>
+    <script type="module" src="../src/components/controls/Spacer.js"></script>
     <script type="module" src="../src/components/Accordion.js"></script>
     <script type="module" src="../src/components/Card.js"></script>
   

package/docs/components/html-editor.html

@@ -534,7 +534,7 @@
       >Complete Editor Example</a></h3>
     <p>A fully-featured editor with all controls. Copy and paste this example to get started quickly:</p>
     <k-card label="HTML">
-      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&#x27;content&#x27;</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Text formatting --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-bold</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-underline</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-underline</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-strikethrough</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-strikethrough</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-inline-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-inline-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-dropdown</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;icon&#x27;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#x27;...&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;label&#x27;</span>&gt;</span>Text Style<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;p&#x27;</span>&gt;</span>Paragraph<span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;h1&#x27;</span>&gt;</span>Heading 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;h2&#x27;</span>&gt;</span>Heading 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;h3&#x27;</span>&gt;</span>Heading 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-code-block</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-code-block</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-dropdown</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Lists, alignment, colors, link, table --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-bullet-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-bullet-list</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-number-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-number-list</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-align-left</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-align-left</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-align-center</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-align-center</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-align-right</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-align-right</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-align-justify</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-align-justify</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-text-color</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-text-color</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-text-background-color</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-text-background-color</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-clear-formatting</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-clear-formatting</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-create-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-create-link</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-insert-table</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-insert-table</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-group</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Mode toggle + format code --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-format-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-format-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-cec-fullscreen</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-cec-fullscreen</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Bottom toolbar stats --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-word-count</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-bottom-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-word-count</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-character-count</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-bottom-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-character-count</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+      <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&#x27;content&#x27;</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Text formatting --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-control-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-bold</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-underline</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-underline</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-strikethrough</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-strikethrough</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-control-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-inline-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-inline-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-menu</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;icon&#x27;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#x27;...&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;label&#x27;</span>&gt;</span>Text Style<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;p&#x27;</span>&gt;</span>Paragraph<span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;h1&#x27;</span>&gt;</span>Heading 1<span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;h2&#x27;</span>&gt;</span>Heading 2<span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&#x27;h3&#x27;</span>&gt;</span>Heading 3<span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-code-block</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-code-block</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">kc-menu</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Lists, alignment, colors, link, table --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-control-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-bullet-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-bullet-list</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-number-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-number-list</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-control-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-control-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-align-left</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-align-left</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-align-center</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-align-center</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-align-right</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-align-right</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-align-justify</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-align-justify</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-control-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-control-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-text-color</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-text-color</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-text-background-color</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-text-background-color</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-control-group</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-clear-formatting</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-clear-formatting</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-control-group</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-left&#x27;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-create-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-create-link</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-insert-table</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-insert-table</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-control-group</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Mode toggle + format code --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-mode</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-code</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-code</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-fullscreen</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-fullscreen</span>&gt;</span><br>  <span class="hljs-comment">&lt;!-- Bottom toolbar stats --&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-word-count</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-bottom-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-word-count</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-character-count</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-bottom-left&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-character-count</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
     </k-card>
     <k-card label="Output">
       <k-html-editor
@@ -542,48 +542,49 @@
         value="<h3>Welcome to the HTML Editor</h3><p>This editor includes all formatting controls. Try selecting text and using the toolbar:</p><ul><li><b>Bold</b>, <i>italic</i>, <u>underline</u>, and <s>strikethrough</s></li><li>Text <span style='color: #e60000;'>colors</span> and <span style='background-color: #ffffcc;'>backgrounds</span></li><li>Lists, alignment, and <a href='#'>links</a></li><li>Format as <code>inline code</code> or code blocks</li></ul><p>Use the mode toggle to switch between visual and code editing.</p>"
         style="height: 600px"
       >
-        <k-hec-group slot="toolbar-top-left">
-          <k-hec-bold></k-hec-bold>
-          <k-hec-italic></k-hec-italic>
-          <k-hec-underline></k-hec-underline>
-          <k-hec-strikethrough></k-hec-strikethrough>
-        </k-hec-group>
-        <k-hec-inline-code slot="toolbar-top-left"></k-hec-inline-code>
-        <k-hec-dropdown slot="toolbar-top-left">
+        <k-control-group slot="toolbar-top-left">
+          <kc-bold></kc-bold>
+          <kc-italic></kc-italic>
+          <kc-underline></kc-underline>
+          <kc-strikethrough></kc-strikethrough>
+        </k-control-group>
+        <kc-inline-code slot="toolbar-top-left"></kc-inline-code>
+        <kc-menu slot="toolbar-top-left">
           <k-icon
             slot="icon"
             name="format_paragraph"
           ></k-icon>
-          <k-hec-format-block tag="p">Paragraph</k-hec-format-block>
-          <k-hec-format-block tag="h1">Heading 1</k-hec-format-block>
-          <k-hec-format-block tag="h2">Heading 2</k-hec-format-block>
-          <k-hec-format-block tag="h3">Heading 3</k-hec-format-block>
-          <k-hec-code-block>Code Block</k-hec-code-block>
-        </k-hec-dropdown>
-        <k-hec-group slot="toolbar-top-left">
-          <k-hec-bullet-list></k-hec-bullet-list>
-          <k-hec-number-list></k-hec-number-list>
-        </k-hec-group>
-        <k-hec-group slot="toolbar-top-left">
-          <k-hec-align-left></k-hec-align-left>
-          <k-hec-align-center></k-hec-align-center>
-          <k-hec-align-right></k-hec-align-right>
-          <k-hec-align-justify></k-hec-align-justify>
-        </k-hec-group>
-        <k-hec-group slot="toolbar-top-left">
-          <k-hec-text-color></k-hec-text-color>
-          <k-hec-text-background-color></k-hec-text-background-color>
-        </k-hec-group>
-        <k-hec-clear-formatting slot="toolbar-top-left"></k-hec-clear-formatting>
-        <k-hec-group slot="toolbar-top-left">
-          <k-hec-create-link></k-hec-create-link>
-          <k-hec-insert-table></k-hec-insert-table>
-        </k-hec-group>
-        <k-cec-format-code slot="toolbar-top-right"></k-cec-format-code>
-        <k-hec-mode slot="toolbar-top-right"></k-hec-mode>
-        <k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
-        <k-hec-word-count slot="toolbar-bottom-left"></k-hec-word-count>
-        <k-hec-character-count slot="toolbar-bottom-left"></k-hec-character-count>
+          <span slot="label">Text Style</span>
+          <kc-format-block tag="p">Paragraph</kc-format-block>
+          <kc-format-block tag="h1">Heading 1</kc-format-block>
+          <kc-format-block tag="h2">Heading 2</kc-format-block>
+          <kc-format-block tag="h3">Heading 3</kc-format-block>
+          <kc-code-block>Code Block</kc-code-block>
+        </kc-menu>
+        <k-control-group slot="toolbar-top-left">
+          <kc-bullet-list></kc-bullet-list>
+          <kc-number-list></kc-number-list>
+        </k-control-group>
+        <k-control-group slot="toolbar-top-left">
+          <kc-align-left></kc-align-left>
+          <kc-align-center></kc-align-center>
+          <kc-align-right></kc-align-right>
+          <kc-align-justify></kc-align-justify>
+        </k-control-group>
+        <k-control-group slot="toolbar-top-left">
+          <kc-text-color></kc-text-color>
+          <kc-text-background-color></kc-text-background-color>
+        </k-control-group>
+        <kc-clear-formatting slot="toolbar-top-left"></kc-clear-formatting>
+        <k-control-group slot="toolbar-top-left">
+          <kc-create-link></kc-create-link>
+          <kc-insert-table></kc-insert-table>
+        </k-control-group>
+        <kc-format-code slot="toolbar-top-right"></kc-format-code>
+        <kc-mode slot="toolbar-top-right"></kc-mode>
+        <kc-fullscreen slot="toolbar-top-right"></kc-fullscreen>
+        <kc-word-count slot="toolbar-bottom-left"></kc-word-count>
+        <kc-character-count slot="toolbar-bottom-left"></kc-character-count>
       </k-html-editor>
     </k-card>
 
@@ -600,7 +601,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">id</span>=<span class="hljs-string">svgEditor</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">id</span>=<span class="hljs-string">svgEditor</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -610,7 +611,7 @@
             class="b r"
             value="<p>This value contains an inline SVG which Lexical does not support:</p><svg width='120' height='60' xmlns='http://www.w3.org/2000/svg'><rect width='120' height='60' rx='8' fill='#4a90d9'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='14'>SVG</text></svg><p>The editor detected incompatible content and defaulted to code mode automatically.</p>"
           >
-            <k-hec-mode slot="toolbar-top-right"></k-hec-mode>
+            <kc-mode slot="toolbar-top-right"></kc-mode>
           </k-html-editor>
         </k-card>
       </div>
@@ -628,7 +629,7 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Import the HtmlComment node --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&#x27;module&#x27;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#x27;src/components/htmlEditorNodes/HtmlComment.js&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-comment">&lt;!-- Register the node with nodes attribute --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">nodes</span>=<span class="hljs-string">&#x27;HtmlComment&#x27;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#x27;&lt;p&gt;This paragraph has an &lt;!-- important note --&gt; inline comment.&lt;/p&gt;&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-hec-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-hec-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- Import the HtmlComment node --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&#x27;module&#x27;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#x27;src/components/htmlEditorNodes/HtmlComment.js&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-comment">&lt;!-- Register the node with nodes attribute --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-html-editor</span> <span class="hljs-attr">nodes</span>=<span class="hljs-string">&#x27;HtmlComment&#x27;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&#x27;&lt;p&gt;This paragraph has an &lt;!-- important note --&gt; inline comment.&lt;/p&gt;&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-mode</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;toolbar-top-right&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-mode</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-html-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -643,7 +644,7 @@
             nodes="HtmlComment"
             value="<p>This paragraph has an <!-- important note --> inline comment.</p>"
           >
-            <k-hec-mode slot="toolbar-top-right"></k-hec-mode>
+            <kc-mode slot="toolbar-top-right"></kc-mode>
           </k-html-editor>
         </k-card>
       </div>
@@ -1202,107 +1203,107 @@
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/Bold.js"
+      src="../src/components/controls/Bold.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/Italic.js"
+      src="../src/components/controls/Italic.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/Underline.js"
+      src="../src/components/controls/Underline.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/Strikethrough.js"
+      src="../src/components/controls/Strikethrough.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/BulletList.js"
+      src="../src/components/controls/BulletList.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/NumberList.js"
+      src="../src/components/controls/NumberList.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/AlignLeft.js"
+      src="../src/components/controls/AlignLeft.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/AlignCenter.js"
+      src="../src/components/controls/AlignCenter.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/AlignRight.js"
+      src="../src/components/controls/AlignRight.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/AlignJustify.js"
+      src="../src/components/controls/AlignJustify.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/CreateLink.js"
+      src="../src/components/controls/CreateLink.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/Mode.js"
+      src="../src/components/controls/Mode.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/DropdownControl.js"
+      src="../src/components/controls/Menu.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/FormatBlock.js"
+      src="../src/components/controls/FormatBlock.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/InlineCode.js"
+      src="../src/components/controls/InlineCode.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/CodeBlock.js"
+      src="../src/components/controls/CodeBlock.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/ControlGroup.js"
+      src="../src/components/ControlGroup.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/ControlSpacer.js"
+      src="../src/components/controls/Spacer.js"
     ></script>
     <script
       type="module"
-      src="../src/components/codeEditorControls/FormatCode.js"
+      src="../src/components/controls/FormatCode.js"
     ></script>
     <script
       type="module"
-      src="../src/components/codeEditorControls/Fullscreen.js"
+      src="../src/components/controls/Fullscreen.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/TextColor.js"
+      src="../src/components/controls/TextColor.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/TextBackgroundColor.js"
+      src="../src/components/controls/TextBackgroundColor.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/ClearFormatting.js"
+      src="../src/components/controls/ClearFormatting.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/WordCount.js"
+      src="../src/components/controls/WordCount.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/CharacterCount.js"
+      src="../src/components/controls/CharacterCount.js"
     ></script>
     <script
       type="module"
-      src="../src/components/htmlEditorControls/InsertTable.js"
+      src="../src/components/controls/InsertTable.js"
     ></script>
     <script
       type="module"