@kungal/editor-nuxt 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @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
+
+- 6545866: Toolbar image upload now shows an in-document "uploading…" placeholder.
+
+  Previously only paste/drop showed the in-flight placeholder (Milkdown's `upload`
+  plugin); the toolbar image button uploaded silently — the image just popped in
+  when the adapter resolved. Now the toolbar path uses the same placeholder UX
+  (ProseMirror's official upload-example pattern).
+
+  - **editor-core**: `startImageUpload(view, file, { uploadImage, notify, locale })`
+    - the `imageUploadPlaceholder` decoration plugin (exported from `/preset`;
+      wired by the preset when `uploadImage` is present). Inserts a
+      `.kun-editor__uploading` widget at the caret, uploads, then replaces it with the
+      image (or removes it + notifies on failure); not an undo step. The paste/drop
+      placeholder now uses the same `.kun-editor__uploading` class so both look
+      identical.
+  - **editor-vue**: `KunEditorToolbarApi` gains `uploadImage(file)`; both the
+    headless `EditorToolbar` and the `#toolbar` slot API route uploads through
+    `startImageUpload`.
+  - **editor-nuxt**: `<KunEditorToolbar>`'s image button uses it.
+  - **Headless kept**: the placeholder is a class + widget hook only; style it via
+    `.kun-editor__uploading` in the reference `kun-editor.css` (primary-colored).
+
+  Customizable: style the placeholder via `.kun-editor__uploading`; the text is
+  localized (zh/en). Verified in the docs production build: uploading via either
+  toolbar inserts the image; the unit tests confirm the placeholder shows during a
+  pending upload and is replaced on success / removed on failure.
+
+### Patch Changes
+
+- Updated dependencies [6545866]
+  - @kungal/editor-core@0.18.0
+  - @kungal/editor-vue@0.18.0
+
 ## 0.17.0
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-nuxt",
-  "version": "0.17.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.17.0",
-    "@kungal/editor-vue": "0.17.0"
+    "@kungal/editor-core": "0.19.0",
+    "@kungal/editor-vue": "0.19.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

package/runtime/KunEditorToolbar.vue

@@ -106,22 +106,18 @@ const groups = computed<Tool[][]>(() => [
   ]
 ])
 
-// Image upload — only when the host supplies uploadImage. Same adapter as
-// paste/drop; on success inserts an image node at the cursor.
-const uploadImage = computed(() => props.adapters.uploadImage)
+// Image upload button — shown only when the host supplies uploadImage. The
+// upload itself goes through api.uploadImage, which shows an in-document
+// "uploading…" placeholder at the caret (same UX as paste/drop).
+const canUpload = computed(() => !!props.adapters.uploadImage)
 const fileInput = ref<HTMLInputElement | null>(null)
 const pickImage = () => fileInput.value?.click()
-const onFileChange = async (e: Event) => {
+const onFileChange = (e: Event) => {
   const input = e.target as HTMLInputElement
   const file = input.files?.[0]
   input.value = ''
-  const upload = uploadImage.value
-  if (!file || !upload) return
-  try {
-    const src = await upload(file)
-    props.run(insertImageCommand.key, { src, title: file.name, alt: file.name })
-  } catch {
-    props.adapters.notify?.(en.value ? 'Image upload failed' : '图片上传失败', 'error')
+  if (file) {
+    props.uploadImage(file)
   }
 }
 
@@ -183,7 +179,7 @@ const insertSticker = (src: string, name: string) =>
       </KunTooltip>
     </template>
 
-    <template v-if="uploadImage">
+    <template v-if="canUpload">
       <span class="bg-default-200 mx-1 h-5 w-px" aria-hidden="true" />
       <KunTooltip :text="t.image" :delay-show="300">
         <KunButton

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>