@kungal/editor-nuxt 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @kungal/editor-nuxt
 
+## 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
+
+- 8ce8210: The Nuxt layer now preconfigures Vite's dev dependency optimizer, so consumers
+  never hit the micromark/`debug` dev error.
+
+  Under `nuxt dev`, Milkdown's tokenizer (micromark) resolves to its DEV build,
+  which does `import debug from 'debug'`. `debug` is CommonJS; unless Vite
+  pre-bundles it, its browser build is served raw with no `default` export and the
+  editor throws at load — `SyntaxError: 'debug' does not provide an export named
+'default'` (create-tokenizer.js), which also aborts app init. Whether it fires is
+  non-deterministic per app (it depends on whether Vite's dep scan reaches the
+  editor before it evaluates).
+
+  The layer now sets `vite.optimizeDeps.include` for the editor + Milkdown entry
+  points, which Nuxt merges into every consuming app — so esbuild pre-bundles that
+  subgraph and resolves micromark's CJS `debug` inside the bundle. No app needs to
+  configure this itself. Dev-only: the production build strips micromark's debug
+  calls, so `nuxt build` is unaffected. (Plain non-Nuxt Vite apps that use
+  `@kungal/editor-vue` directly still add the same `optimizeDeps.include` manually —
+  a layer can inject Vite config, a plain package cannot.)
+
+### Patch Changes
+
+- @kungal/editor-core@0.13.0
+- @kungal/editor-vue@0.13.0
+
 ## 0.12.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,9 +26,42 @@ export default defineNuxtConfig({
           name: 'KunEditorToolbar',
           filePath: resolve('./runtime/KunEditorToolbar.vue')
         })
+        addComponent({
+          name: 'KunEditorViewSwitch',
+          filePath: resolve('./runtime/KunEditorViewSwitch.vue')
+        })
       }
     })
-  ]
+  ],
+
+  // Under `nuxt dev`, Milkdown's markdown tokenizer (micromark) resolves to its
+  // DEV build, which does `import debug from 'debug'`. `debug` is CommonJS, so
+  // unless Vite pre-bundles it, its browser.js is served raw with no `default`
+  // export and the editor throws at load:
+  //   SyntaxError: … 'debug' does not provide an export named 'default'
+  //   (create-tokenizer.js)
+  // which also aborts app init. Whether it fires is non-deterministic per app —
+  // it depends on whether Vite's dep scan reaches the editor before it evaluates
+  // (the docs happens to get auto-scanned; other consumers don't). So pin it
+  // HERE, in the layer: force-including the editor/milkdown ENTRY points makes
+  // esbuild pre-bundle their whole subgraph and resolve micromark's CJS `debug`
+  // INSIDE the bundle. Merged into every consumer that extends this layer, so no
+  // app configures it. Dev-only: the prod build strips micromark's debug calls.
+  //
+  // NB: include the resolvable ENTRY points, not `'debug'` — under pnpm's
+  // non-hoisted layout `debug` isn't resolvable from the app root, so Vite would
+  // silently skip it. Unresolvable entries below are skipped too (harmless).
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@kungal/editor-vue',
+        '@kungal/editor-core',
+        '@kungal/editor-core/preset',
+        '@milkdown/kit/preset/commonmark',
+        '@milkdown/kit/preset/gfm'
+      ]
+    }
+  }
 })
 
 // NOTE: this layer does NOT own a Tailwind entry or import editor styles. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-nuxt",
-  "version": "0.12.0",
+  "version": "0.14.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": [
@@ -30,8 +30,8 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@kungal/editor-core": "0.12.0",
-    "@kungal/editor-vue": "0.12.0"
+    "@kungal/editor-core": "0.14.0",
+    "@kungal/editor-vue": "0.14.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

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>