@kungal/editor-nuxt 0.31.1 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @kungal/editor-nuxt
 
+## 0.32.0
+
+### Minor Changes
+
+- 7dd7f71: Show an active state on the toolbar's toggle marks (bold / italic /
+  strikethrough / inline code).
+
+  The toolbar buttons ran the toggle commands but never reflected whether the
+  mark was on, so a user could not tell if bold (etc.) was engaged. The
+  `#toolbar` slot API now exposes a reactive `activeMarks` map (bold / italic /
+  strike / code), recomputed from the ProseMirror selection on selection and doc
+  changes and immediately after each command. `<KunEditorToolbar>` renders the
+  pressed buttons with the primary "active" look (same as hover) and sets
+  `aria-pressed`; the headless `EditorToolbar` sets `data-active` for the
+  `.kun-editor__tool[data-active='true']` style.
+
+### Patch Changes
+
+- Updated dependencies [7dd7f71]
+- Updated dependencies [35bc140]
+  - @kungal/editor-vue@0.32.0
+  - @kungal/editor-core@0.32.0
+
 ## 0.31.1
 
 ### Patch Changes

package/editor.css

@@ -229,6 +229,15 @@
   background: var(--color-default-100);
 }
 
+.kun-editor__tool[data-active='true'] {
+  background: var(--color-primary);
+  color: var(--color-primary-contrast, #fff);
+}
+
+.kun-editor__tool[data-active='true']:hover {
+  background: var(--color-primary);
+}
+
 .kun-editor__icon {
   display: inline-flex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-nuxt",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "KunEditor Nuxt Layer — wraps @kungal/editor-vue and auto-imports <KunEditor> so an existing Nuxt app keeps its exact DX (no import needed).",
   "type": "module",
   "keywords": [
@@ -32,8 +32,8 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@kungal/editor-core": "0.31.1",
-    "@kungal/editor-vue": "0.31.1"
+    "@kungal/editor-core": "0.32.0",
+    "@kungal/editor-vue": "0.32.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

package/runtime/KunEditorToolbar.vue

@@ -40,6 +40,7 @@ import {
 import { EMOJI } from '@kungal/editor-vue'
 import type {
   KunEditorToolbarApi,
+  KunToggleMark,
   KunToolbarItem,
   StickerPack
 } from '@kungal/editor-vue'
@@ -101,15 +102,18 @@ interface Tool {
   icon: string
   title: string
   run: () => void
+  // The toggle mark this button flips, when any. Buttons with a mark render a
+  // pressed/active state (see the template) driven by `api.activeMarks`.
+  mark?: KunToggleMark
 }
 
 // The plain command buttons (everything except heading / image / picker).
 // `.key` is read at click time via props.run (populated once the editor exists).
 const commandButtons = computed<Record<string, Tool>>(() => ({
-  bold: { icon: 'lucide:bold', title: t.value.bold, run: () => props.run(toggleStrongCommand.key) },
-  italic: { icon: 'lucide:italic', title: t.value.italic, run: () => props.run(toggleEmphasisCommand.key) },
-  strike: { icon: 'lucide:strikethrough', title: t.value.strike, run: () => props.run(toggleStrikethroughCommand.key) },
-  code: { icon: 'lucide:code', title: t.value.code, run: () => props.run(toggleInlineCodeCommand.key) },
+  bold: { icon: 'lucide:bold', title: t.value.bold, run: () => props.run(toggleStrongCommand.key), mark: 'bold' },
+  italic: { icon: 'lucide:italic', title: t.value.italic, run: () => props.run(toggleEmphasisCommand.key), mark: 'italic' },
+  strike: { icon: 'lucide:strikethrough', title: t.value.strike, run: () => props.run(toggleStrikethroughCommand.key), mark: 'strike' },
+  code: { icon: 'lucide:code', title: t.value.code, run: () => props.run(toggleInlineCodeCommand.key), mark: 'code' },
   bulletList: { icon: 'lucide:list', title: t.value.bulletList, run: () => props.run(wrapInBulletListCommand.key) },
   orderedList: { icon: 'lucide:list-ordered', title: t.value.orderedList, run: () => props.run(wrapInOrderedListCommand.key) },
   quote: { icon: 'lucide:text-quote', title: t.value.quote, run: () => props.run(wrapInBlockquoteCommand.key) },
@@ -427,10 +431,20 @@ const insertSticker = (src: string, name: string) =>
         :delay-show="300"
       >
         <KunButton
-          variant="light"
+          :variant="
+            item.tool.mark && props.activeMarks[item.tool.mark]
+              ? 'flat'
+              : 'light'
+          "
+          :color="
+            item.tool.mark && props.activeMarks[item.tool.mark]
+              ? 'primary'
+              : 'default'
+          "
           size="sm"
           :is-icon-only="true"
           :aria-label="item.tool.title"
+          :aria-pressed="item.tool.mark ? props.activeMarks[item.tool.mark] : undefined"
           @click="item.tool.run()"
         >
           <KunIcon :name="item.tool.icon" />