@kungal/editor-nuxt 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @kungal/editor-nuxt
 
+## 0.16.0
+
+### Minor Changes
+
+- 4e160ee: `<KunEditorToolbar>`: the emoji/sticker picker tabs are now a
+  `<KunTab variant="underlined" full-width>` instead of two `<KunButton>`s —
+  matching `<KunEditorViewSwitch>` and the forum's picker (keyboard nav, sliding
+  indicator, a11y). Only shown when a `stickerSource` adapter is present.
+
+### Patch Changes
+
+- @kungal/editor-core@0.16.0
+- @kungal/editor-vue@0.16.0
+
+## 0.15.0
+
+### Minor Changes
+
+- a7273bb: Ship `tailwind.css` so the KunUI toolbar/picker/tabs styles render drop-in.
+
+  `<KunEditorToolbar>` / `<KunEditorViewSwitch>` use Tailwind utility classes
+  (grids, aspect, sizes, dividers, menu items). Tailwind v4 doesn't scan
+  `node_modules`, so without registration the sticker/emoji grid collapsed (huge
+  stickers). The package now ships `tailwind.css` containing a path-relative
+  `@source "./runtime"` — the Tailwind-team-recommended pattern for a
+  Tailwind-based library, and pnpm-layout-safe (resolved relative to the file, not
+  the app's `node_modules`). Consumers add one line to their Tailwind entry:
+
+  ```css
+  @import "@kungal/ui-vue/style.css";
+  @import "@kungal/editor-nuxt/tailwind.css";
+  ```
+
+- a7273bb: Toolbar: headings become one "text size" dropdown; remove the formula button.
+
+  - **Headings → a single "text size" control** (Paragraph / H1–H6) instead of
+    three H1/H2/H3 buttons — the modern standard, and it can set Paragraph (reset),
+    which the old toggle buttons couldn't. The headless `EditorToolbar` uses a
+    native `<select>` (new `.kun-editor__heading-select` class hook); the KunUI
+    `<KunEditorToolbar>` uses a `<KunPopover>` with each level shown at its own size
+    (like the forum). Both drive `setHeadingCommand`.
+  - **Remove the math/formula button.** With no selection it inserted an empty
+    inline-math node (a broken formula box). Math is entered via the existing
+    `$…$` / `$$` input rules instead — the ecosystem norm (prosemirror-math). The
+    spoiler button stays.
+
+### Patch Changes
+
+- Updated dependencies [a7273bb]
+- Updated dependencies [a7273bb]
+  - @kungal/editor-core@0.15.0
+  - @kungal/editor-vue@0.15.0
+
 ## 0.14.0
 
 ### Minor Changes

package/nuxt.config.ts

@@ -64,9 +64,9 @@ export default defineNuxtConfig({
   }
 })
 
-// NOTE: this layer does NOT own a Tailwind entry or import editor styles. The
-// consuming app owns one stylesheet and adds `@kungal/editor-vue/style.css`
-// alongside its @kungal/ui-tokens + @kungal/ui-vue setup — the @source scan
-// path is node_modules-layout-specific, so only the app can write it. It also
-// assumes @kungal/ui-nuxt is already extended: <KunEditorToolbar> (and the
-// reference editor styles) render KunUI chrome. See this package's README.
+// NOTE: this layer assumes @kungal/ui-nuxt is already extended (its components
+// render KunUI chrome). For the KunUI toolbar/picker/tabs utility classes to be
+// generated, the consuming app @imports this package's shipped `tailwind.css`
+// (which `@source`s the layer's components, path-relative so it's pnpm-safe) in
+// its Tailwind entry — alongside `@import '@kungal/ui-vue/style.css'`. The
+// headless editor itself is still styled by the app's own stylesheet. See README.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-nuxt",
-  "version": "0.14.0",
+  "version": "0.16.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": [
@@ -27,11 +27,12 @@
     "CHANGELOG.md",
     "app",
     "runtime",
+    "tailwind.css",
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@kungal/editor-core": "0.14.0",
-    "@kungal/editor-vue": "0.14.0"
+    "@kungal/editor-vue": "0.16.0",
+    "@kungal/editor-core": "0.16.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

package/runtime/KunEditorToolbar.vue

@@ -11,8 +11,18 @@
 // KunButton / KunIcon / KunTooltip / KunPopover chrome. It drives the editor
 // purely through the slot API props (KunEditorToolbarApi) — no useInstance.
 //
-// KunButton/KunIcon/KunTooltip/KunPopover are auto-imported by @kungal/ui-nuxt in
+// Headings are ONE "text size" KunPopover (Paragraph / H1–H6, each shown at its
+// own size — like the forum's header menu), driven by setHeadingCommand (absolute
+// set). There is deliberately NO math button — an empty inline-math atom is a
+// broken node; math is entered via the `$…$` / `$$` input rules.
+//
+// The emoji/sticker picker switches tabs with a <KunTab variant="underlined">
+// (matching <KunEditorViewSwitch> and the forum's picker).
+//
+// KunButton/KunIcon/KunTooltip/KunPopover/KunTab are auto-imported by ui-nuxt in
 // the consuming app; icons use the app's iconify set (e.g. lucide via @nuxt/icon).
+// The container/menu utility classes are generated via @kungal/editor-nuxt's
+// shipped tailwind.css (@source) — the consumer @imports it once.
 import { computed, ref } from 'vue'
 import {
   createCodeBlockCommand,
@@ -23,13 +33,12 @@ import {
   toggleStrongCommand,
   wrapInBlockquoteCommand,
   wrapInBulletListCommand,
-  wrapInHeadingCommand,
   wrapInOrderedListCommand
 } from '@milkdown/kit/preset/commonmark'
 import { toggleStrikethroughCommand } from '@milkdown/kit/preset/gfm'
 import {
   insertKunSpoilerCommand,
-  toggleLatexCommand
+  setHeadingCommand
 } from '@kungal/editor-core/preset'
 import { EMOJI } from '@kungal/editor-vue'
 import type { KunEditorToolbarApi, StickerPack } from '@kungal/editor-vue'
@@ -38,20 +47,17 @@ const props = defineProps<KunEditorToolbarApi>()
 
 const en = computed(() => props.locale.toLowerCase().startsWith('en'))
 const t = computed(() => ({
+  textSize: en.value ? 'Text size' : '文本大小',
   bold: en.value ? 'Bold' : '加粗',
   italic: en.value ? 'Italic' : '斜体',
   strike: en.value ? 'Strikethrough' : '删除线',
   code: en.value ? 'Inline code' : '行内代码',
-  h1: en.value ? 'Heading 1' : '一级标题',
-  h2: en.value ? 'Heading 2' : '二级标题',
-  h3: en.value ? 'Heading 3' : '三级标题',
   bulletList: en.value ? 'Bullet list' : '无序列表',
   orderedList: en.value ? 'Ordered list' : '有序列表',
   quote: en.value ? 'Blockquote' : '引用块',
   codeBlock: en.value ? 'Code block' : '代码块',
   hr: en.value ? 'Divider' : '分隔线',
   spoiler: en.value ? 'Spoiler' : '隐藏文本',
-  latex: en.value ? 'Math (LaTeX)' : '公式',
   image: en.value ? 'Upload image' : '上传图片',
   picker: en.value ? 'Emoji & stickers' : '表情与贴纸',
   emoji: en.value ? 'Emoji' : '表情',
@@ -60,14 +66,27 @@ const t = computed(() => ({
   failed: en.value ? 'Failed to load stickers' : '贴纸加载失败'
 }))
 
+// Paragraph (level 0) + H1–H6, each rendered at its own size in the menu.
+const headingOptions = computed(() => {
+  const labels = en.value
+    ? ['Paragraph', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6']
+    : ['正文', '一级标题', '二级标题', '三级标题', '四级标题', '五级标题', '六级标题']
+  const sizes = ['1rem', '1.6rem', '1.4rem', '1.25rem', '1.1rem', '1rem', '0.9rem']
+  return labels.map((label, level) => ({ level, label, size: sizes[level] }))
+})
+const headingPopover = ref<{ close: () => void } | null>(null)
+const setHeading = (level: number) => {
+  props.run(setHeadingCommand.key, level)
+  headingPopover.value?.close()
+}
+
 interface Tool {
   icon: string
   title: string
   run: () => void
 }
 
-// Same command set + grouping as the default toolbar; `.key` is read at click
-// time via api.run (populated once the editor is created).
+// `.key` is read at click time via props.run (populated once the editor exists).
 const groups = computed<Tool[][]>(() => [
   [
     { icon: 'lucide:bold', title: t.value.bold, run: () => props.run(toggleStrongCommand.key) },
@@ -75,11 +94,6 @@ const groups = computed<Tool[][]>(() => [
     { icon: 'lucide:strikethrough', title: t.value.strike, run: () => props.run(toggleStrikethroughCommand.key) },
     { icon: 'lucide:code', title: t.value.code, run: () => props.run(toggleInlineCodeCommand.key) }
   ],
-  [
-    { icon: 'lucide:heading-1', title: t.value.h1, run: () => props.run(wrapInHeadingCommand.key, 1) },
-    { icon: 'lucide:heading-2', title: t.value.h2, run: () => props.run(wrapInHeadingCommand.key, 2) },
-    { icon: 'lucide:heading-3', title: t.value.h3, run: () => props.run(wrapInHeadingCommand.key, 3) }
-  ],
   [
     { icon: 'lucide:list', title: t.value.bulletList, run: () => props.run(wrapInBulletListCommand.key) },
     { icon: 'lucide:list-ordered', title: t.value.orderedList, run: () => props.run(wrapInOrderedListCommand.key) },
@@ -88,8 +102,7 @@ const groups = computed<Tool[][]>(() => [
     { icon: 'lucide:minus', title: t.value.hr, run: () => props.run(insertHrCommand.key) }
   ],
   [
-    { icon: 'lucide:eye-off', title: t.value.spoiler, run: () => props.run(insertKunSpoilerCommand.key) },
-    { icon: 'lucide:sigma', title: t.value.latex, run: () => props.run(toggleLatexCommand.key) }
+    { icon: 'lucide:eye-off', title: t.value.spoiler, run: () => props.run(insertKunSpoilerCommand.key) }
   ]
 ])
 
@@ -116,7 +129,7 @@ const onFileChange = async (e: Event) => {
 const showPicker = computed(() => props.features.sticker !== false)
 const stickerSource = computed(() => props.adapters.stickerSource)
 const hasSticker = computed(() => !!stickerSource.value)
-const tab = ref<'emoji' | 'sticker'>('emoji')
+const tab = ref('emoji') // 'emoji' | 'sticker' — widened to string for KunTab v-model
 const packs = ref<StickerPack[]>([])
 const loaded = ref(false)
 const loadFailed = ref(false)
@@ -136,8 +149,27 @@ const insertSticker = (src: string, name: string) =>
 
 <template>
   <div class="flex flex-wrap items-center gap-0.5">
+    <KunPopover ref="headingPopover" position="bottom-start" :opaque="true" inner-class="min-w-40 p-1">
+      <template #trigger>
+        <KunButton variant="light" size="sm" :aria-label="t.textSize">
+          {{ t.textSize }}
+          <KunIcon name="lucide:chevron-down" />
+        </KunButton>
+      </template>
+      <button
+        v-for="o in headingOptions"
+        :key="o.level"
+        type="button"
+        class="hover:bg-default-100 flex w-full items-center rounded px-3 py-1.5 text-left leading-tight"
+        :style="{ fontSize: o.size }"
+        @click="setHeading(o.level)"
+      >
+        {{ o.label }}
+      </button>
+    </KunPopover>
+
     <template v-for="(group, gi) in groups" :key="gi">
-      <span v-if="gi > 0" class="bg-default-200 mx-1 h-5 w-px" aria-hidden="true" />
+      <span class="bg-default-200 mx-1 h-5 w-px" aria-hidden="true" />
       <KunTooltip v-for="(b, bi) in group" :key="bi" :text="b.title" :delay-show="300">
         <KunButton
           variant="light"
@@ -188,20 +220,18 @@ const insertSticker = (src: string, name: string) =>
           </KunButton>
         </template>
 
-        <div v-if="hasSticker" class="mb-2 flex gap-1">
-          <KunButton
-            :variant="tab === 'emoji' ? 'flat' : 'light'"
-            size="sm"
-            @click="tab = 'emoji'"
-            >{{ t.emoji }}</KunButton
-          >
-          <KunButton
-            :variant="tab === 'sticker' ? 'flat' : 'light'"
-            size="sm"
-            @click="tab = 'sticker'"
-            >{{ t.sticker }}</KunButton
-          >
-        </div>
+        <KunTab
+          v-if="hasSticker"
+          v-model="tab"
+          :items="[
+            { value: 'emoji', textValue: t.emoji },
+            { value: 'sticker', textValue: t.sticker }
+          ]"
+          variant="underlined"
+          color="primary"
+          :full-width="true"
+          class="mb-2"
+        />
 
         <div
           v-show="!hasSticker || tab === 'emoji'"

package/tailwind.css

@@ -0,0 +1,17 @@
+/*
+ * @kungal/editor-nuxt — Tailwind source registration.
+ *
+ * <KunEditorToolbar> / <KunEditorViewSwitch> are built with Tailwind utility
+ * classes (grids, aspect, sizes, dividers, menu items…). Tailwind v4 does NOT
+ * scan node_modules by default, so without this those classes aren't generated
+ * and the toolbar / sticker grid render broken (collapsed cells, huge stickers).
+ *
+ * `@source` resolves relative to THIS file, so it registers the layer's own
+ * components regardless of the consumer's node_modules layout (pnpm-safe). Import
+ * it ONCE in your Tailwind entry, next to `@import '@kungal/ui-vue/style.css'`:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@kungal/ui-vue/style.css';
+ *   @import '@kungal/editor-nuxt/tailwind.css';
+ */
+@source "./runtime";