@kungal/editor-nuxt 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @kungal/editor-nuxt
 
+## 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
+
+- 506813b: Add a `#view-switch` slot and a KunUI view switch — the Preview/Markdown tabs are
+  now a swappable layer too.
+
+  `<KunEditor>` exposes a `#view-switch` scoped slot whose props are
+  `KunEditorViewSwitchApi` (`mode` / `setMode` / `labels`). The hand-rolled tabs
+  are the slot's fallback — omit the slot and nothing changes. This lets a host
+  render a real component (or anything) for the view switch and drive the editor
+  via `setMode`, without reaching into internals.
+
+  `@kungal/editor-nuxt` ships `<KunEditorViewSwitch>` (auto-imported): the tabs as a
+  real `<KunTab variant="underlined">` (keyboard nav, sliding indicator, a11y):
+
+  ```vue
+  <KunEditor v-model="md">
+    <template #view-switch="s"><KunEditorViewSwitch v-bind="s" /></template>
+    <template #toolbar="api"><KunEditorToolbar v-bind="api" /></template>
+  </KunEditor>
+  ```
+
+  Same "headless core + optional KunUI layer" pattern as `#toolbar` /
+  `<KunEditorToolbar>`: `@kungal/editor-vue` stays UI-kit-free (default tabs), the
+  KunUI ecosystem gets native chrome. Exports `KunEditorViewSwitchApi`.
+
+### Patch Changes
+
+- Updated dependencies [506813b]
+  - @kungal/editor-vue@0.14.0
+  - @kungal/editor-core@0.14.0
+
 ## 0.13.0
 
 ### Minor Changes

package/nuxt.config.ts

@@ -5,10 +5,12 @@ import { defineNuxtModule, addComponent, createResolver } from '@nuxt/kit'
 // downstream templates use `<KunEditor>` with no import (and Nuxt generates its
 // types, keeping the tag type-checked in consumer templates).
 //
-// It also ships <KunEditorToolbar>: the KunUI-built toolbar for <KunEditor>'s
-// #toolbar slot. It belongs HERE (this layer already assumes @kungal/ui-nuxt),
-// not in headless @kungal/editor-vue — so editor-vue stays UI-kit-free while the
-// KunUI ecosystem gets native chrome. Same shape as TipTap's optional UI pkg.
+// It also ships the KunUI chrome for <KunEditor>'s slots — <KunEditorToolbar>
+// (#toolbar) and <KunEditorViewSwitch> (#view-switch, the Preview/Markdown tabs
+// as a real <KunTab>). They belong HERE (this layer already assumes
+// @kungal/ui-nuxt), not in headless @kungal/editor-vue — so editor-vue stays
+// UI-kit-free while the KunUI ecosystem gets native chrome. Same shape as
+// TipTap's optional UI package.
 export default defineNuxtConfig({
   modules: [
     defineNuxtModule({
@@ -24,6 +26,10 @@ export default defineNuxtConfig({
           name: 'KunEditorToolbar',
           filePath: resolve('./runtime/KunEditorToolbar.vue')
         })
+        addComponent({
+          name: 'KunEditorViewSwitch',
+          filePath: resolve('./runtime/KunEditorViewSwitch.vue')
+        })
       }
     })
   ],
@@ -58,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.13.0",
+  "version": "0.15.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.13.0",
-    "@kungal/editor-vue": "0.13.0"
+    "@kungal/editor-core": "0.15.0",
+    "@kungal/editor-vue": "0.15.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

package/runtime/KunEditorToolbar.vue

@@ -11,8 +11,15 @@
 // KunButton / KunIcon / KunTooltip / KunPopover chrome. It drives the editor
 // purely through the slot API props (KunEditorToolbarApi) — no useInstance.
 //
+// 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.
+//
 // KunButton/KunIcon/KunTooltip/KunPopover are auto-imported by @kungal/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 +30,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 +44,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 +63,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 +91,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 +99,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) }
   ]
 ])
 
@@ -136,8 +146,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"

package/runtime/KunEditorViewSwitch.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// KunUI view switch for <KunEditor>'s #view-switch slot — the Preview/Markdown
+// tabs as a real <KunTab variant="underlined"> (keyboard nav, sliding indicator,
+// a11y). Same pattern as <KunEditorToolbar>: it lives in this ui-nuxt-assuming
+// layer (not headless editor-vue) and is driven purely by the slot API.
+//
+//   <KunEditor v-model="md">
+//     <template #view-switch="s"><KunEditorViewSwitch v-bind="s" /></template>
+//   </KunEditor>
+//
+// KunTab is auto-imported by @kungal/ui-nuxt in the consuming app.
+import { computed } from 'vue'
+import type { KunEditorViewSwitchApi } from '@kungal/editor-vue'
+
+const props = defineProps<KunEditorViewSwitchApi>()
+
+const items = computed(() => [
+  { value: 'wysiwyg', textValue: props.labels.wysiwyg },
+  { value: 'source', textValue: props.labels.source }
+])
+
+const onChange = (value: string) => {
+  props.setMode(value === 'source' ? 'source' : 'wysiwyg')
+}
+</script>
+
+<template>
+  <KunTab
+    :model-value="mode"
+    :items="items"
+    variant="underlined"
+    color="primary"
+    size="sm"
+    @update:model-value="onChange"
+  />
+</template>

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";