@kungal/editor-nuxt 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @kungal/editor-nuxt
 
+## 0.19.0
+
+### Minor Changes
+
+- f111b82: Add a desktop **split view** for long-form writing.
+
+  `<KunEditor>` now has a third view mode, `split`, alongside WYSIWYG and Markdown:
+  an editable markdown source pane + a live **read-only WYSIWYG preview**, side by
+  side and left/right swappable. The markdown string stays the single source of
+  truth and the preview is derived — the industry-standard model (VS Code /
+  StackEdit / Dillinger), so there's no two-editor bidirectional-sync problem.
+
+  - **editor-vue**: the view mode gains `'split'`; `KunEditorViewSwitchApi` gains
+    `swap()` / `swapped` and `labels.split` / `labels.swap`. The WYSIWYG becomes a
+    read-only preview in split (its editability now reacts to the `readonly` prop).
+    The default hand-rolled view switch gets a 分栏 tab + a ⇄ swap button.
+  - **editor-nuxt**: `<KunEditorViewSwitch>` gets the 分栏 KunTab + a KunUI swap
+    button (shown in split).
+  - **Headless**: the layout is class hooks only — `.kun-editor__panes` /
+    `.kun-editor__pane` under `[data-mode='split']` (+ `[data-swap]`). Styled by the
+    reference `kun-editor.css`: stacked on narrow screens, side-by-side (swappable)
+    from `md` up. editor-vue still ships zero CSS.
+
+  Verified in the docs production build (headless + KunUI view switches): 分栏 shows
+  both panes side by side, typing markdown in the source updates the preview live,
+  the WYSIWYG preview is `contenteditable=false`, swap reverses the panes; 0 console
+  errors. (Synced scrolling between panes is a possible follow-up.)
+
+### Patch Changes
+
+- Updated dependencies [f111b82]
+  - @kungal/editor-vue@0.19.0
+  - @kungal/editor-core@0.19.0
+
 ## 0.18.0
 
 ### Minor Changes

package/package.json

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

package/runtime/KunEditorViewSwitch.vue

@@ -1,14 +1,15 @@
 <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.
+// KunUI view switch for <KunEditor>'s #view-switch slot — 预览 / Markdown / 分栏
+// as a real <KunTab variant="underlined"> (keyboard nav, sliding indicator, a11y),
+// plus a swap button in split mode. 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.
+// KunTab / KunButton / KunIcon are auto-imported by @kungal/ui-nuxt.
 import { computed } from 'vue'
 import type { KunEditorViewSwitchApi } from '@kungal/editor-vue'
 
@@ -16,21 +17,36 @@ const props = defineProps<KunEditorViewSwitchApi>()
 
 const items = computed(() => [
   { value: 'wysiwyg', textValue: props.labels.wysiwyg },
-  { value: 'source', textValue: props.labels.source }
+  { value: 'source', textValue: props.labels.source },
+  { value: 'split', textValue: props.labels.split }
 ])
 
 const onChange = (value: string) => {
-  props.setMode(value === 'source' ? 'source' : 'wysiwyg')
+  props.setMode(
+    value === 'source' ? 'source' : value === 'split' ? 'split' : 'wysiwyg'
+  )
 }
 </script>
 
 <template>
-  <KunTab
-    :model-value="mode"
-    :items="items"
-    variant="underlined"
-    color="primary"
-    size="sm"
-    @update:model-value="onChange"
-  />
+  <div class="flex items-center gap-1">
+    <KunTab
+      :model-value="mode"
+      :items="items"
+      variant="underlined"
+      color="primary"
+      size="sm"
+      @update:model-value="onChange"
+    />
+    <KunButton
+      v-if="mode === 'split'"
+      variant="light"
+      size="sm"
+      :is-icon-only="true"
+      :aria-label="labels.swap"
+      @click="swap()"
+    >
+      <KunIcon name="lucide:arrow-left-right" />
+    </KunButton>
+  </div>
 </template>