@kungal/editor-nuxt 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @kungal/editor-nuxt
 
+## 0.20.0
+
+### Minor Changes
+
+- 62e14f5: Split view: sync scrolling between the panes, with an off switch.
+
+  Scrolling the markdown source pane now scrolls the WYSIWYG preview to the same
+  position (and vice-versa) — proportional/percentage sync (source↔preview line
+  mapping is impractical across two separate renderers), with an active-pane +
+  idle-timeout guard so the echoed scroll doesn't feed back into a loop.
+
+  Turn it off two ways (for downstream customization):
+
+  - **`scrollSync` prop** on `<KunEditor>` (default `true`) — pass
+    `:scroll-sync="false"` to disable entirely.
+  - **A runtime toggle** in the view switch: `KunEditorViewSwitchApi` gains
+    `scrollSync` / `toggleScrollSync()` (+ `labels.scrollSync`). The default view
+    switch shows a 同步滚动 toggle in split mode; `<KunEditorViewSwitch>` (editor-nuxt)
+    shows a KunUI link/unlink toggle button. Or replace the whole control via the
+    `#view-switch` slot.
+
+  Sync needs each pane to scroll internally, so the reference `kun-editor.css` now
+  gives split panes a bounded height (`--kun-editor-split-height`, default `60vh`,
+  overridable) with `overflow: auto`. editor-vue still ships zero CSS.
+
+  Verified in the docs production build (headless + KunUI view switches): with the
+  panes overflowing, scrolling the source drives the preview to the same ratio;
+  toggling off makes them scroll independently; toggling on resumes; 0 console
+  errors.
+
+### Patch Changes
+
+- Updated dependencies [62e14f5]
+  - @kungal/editor-vue@0.20.0
+  - @kungal/editor-core@0.20.0
+
+## 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.20.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.20.0",
+    "@kungal/editor-vue": "0.20.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,48 @@ 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"
+    />
+    <template v-if="mode === 'split'">
+      <KunButton
+        variant="light"
+        size="sm"
+        :is-icon-only="true"
+        :aria-label="labels.swap"
+        @click="swap()"
+      >
+        <KunIcon name="lucide:arrow-left-right" />
+      </KunButton>
+      <KunButton
+        :variant="scrollSync ? 'flat' : 'light'"
+        :color="scrollSync ? 'primary' : 'default'"
+        size="sm"
+        :is-icon-only="true"
+        :aria-label="labels.scrollSync"
+        :aria-pressed="scrollSync"
+        @click="toggleScrollSync()"
+      >
+        <KunIcon :name="scrollSync ? 'lucide:link' : 'lucide:unlink'" />
+      </KunButton>
+    </template>
+  </div>
 </template>