@kungal/editor-nuxt 0.25.2 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @kungal/editor-nuxt
 
+## 0.26.0
+
+### Minor Changes
+
+- 945708d: Add an insert-link feature (click to add a URL).
+
+  The `link` mark already existed (so `[text](url)` round-trips and pasted URLs
+  autolink), but there was no click-to-insert UI. Now there is:
+
+  - **editor-core**: `insertLinkCommand` (`{ href, text? }`) — applies the link mark
+    to the selection, or inserts linked text on an empty selection; clears the
+    stored mark afterwards. Re-exported from `@kungal/editor-core/preset`.
+  - **editor-vue**: `KunEditorToolbarApi.insertLink(payload)`; a `link` button in the
+    default toolbar and the selection bubble (both default-on); `'link'` added to
+    `KunToolbarItem` and `KunSelectionItem`. Headless UI prompts for the URL.
+  - **editor-nuxt**: `<KunEditorToolbar>` gains a `link` button — a KunPopover with a
+    KunInput for the URL.
+
+  A link is a **mark** (`[text](url)`), deliberately distinct from the custom-NODE
+  embeds (mention / quote). A future "article card" or custom component would be a
+  node like those (schema + toUrl/fromUrl), not this — a separate mechanism.
+
+  Verified in the docs production build: the KunUI toolbar popover wraps a selection
+  (`[…](https://example.com)`); the selection bubble does too
+  (`[linktext](https://kun.com)`); 4 new core tests (wrap / insert / autolink
+  fallback / blank-href no-op) pass; 0 console errors.
+
+### Patch Changes
+
+- Updated dependencies [945708d]
+  - @kungal/editor-core@0.26.0
+  - @kungal/editor-vue@0.26.0
+
 ## 0.25.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-nuxt",
-  "version": "0.25.2",
+  "version": "0.26.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.25.2",
-    "@kungal/editor-vue": "0.25.2"
+    "@kungal/editor-core": "0.26.0",
+    "@kungal/editor-vue": "0.26.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",

package/runtime/KunEditorToolbar.vue

@@ -58,6 +58,7 @@ const DEFAULT_ITEMS: KunToolbarItem[] = [
   'italic',
   'strike',
   'code',
+  'link',
   '|',
   'bulletList',
   'orderedList',
@@ -79,6 +80,9 @@ const t = computed(() => ({
   italic: en.value ? 'Italic' : '斜体',
   strike: en.value ? 'Strikethrough' : '删除线',
   code: en.value ? 'Inline code' : '行内代码',
+  link: en.value ? 'Link' : '链接',
+  linkPlaceholder: en.value ? 'https://…' : 'https://…',
+  linkApply: en.value ? 'Apply' : '确定',
   bulletList: en.value ? 'Bullet list' : '无序列表',
   orderedList: en.value ? 'Ordered list' : '有序列表',
   quote: en.value ? 'Blockquote' : '引用块',
@@ -117,6 +121,7 @@ const commandButtons = computed<Record<string, Tool>>(() => ({
 type RenderItem =
   | { kind: 'divider' }
   | { kind: 'heading' }
+  | { kind: 'link' }
   | { kind: 'image' }
   | { kind: 'picker' }
   | { kind: 'button'; tool: Tool }
@@ -133,6 +138,7 @@ const resolvedItems = computed<RenderItem[]>(() => {
     .map<RenderItem | null>((it) => {
       if (it === '|') return { kind: 'divider' }
       if (it === 'heading') return { kind: 'heading' }
+      if (it === 'link') return { kind: 'link' }
       if (it === 'image') return { kind: 'image' }
       if (it === 'picker') return { kind: 'picker' }
       const tool = buttons[it]
@@ -172,6 +178,23 @@ const setHeading = (level: number) => {
   headingPopoverEl?.close()
 }
 
+// Link — a KunPopover with a URL input. Applies to the current selection (or
+// inserts the URL as linked text when nothing is selected). The editor keeps its
+// selection while the popover input is focused, so api.insertLink wraps it.
+const linkUrl = ref('')
+let linkPopoverEl: { close: () => void } | null = null
+const setLinkPopover = (el: unknown) => {
+  linkPopoverEl = el as { close: () => void } | null
+}
+const applyLink = () => {
+  const href = linkUrl.value.trim()
+  if (href) {
+    props.insertLink({ href })
+  }
+  linkUrl.value = ''
+  linkPopoverEl?.close()
+}
+
 // Image upload — via api.uploadImage (shows the in-document "uploading…"
 // placeholder). Only rendered when the host supplies uploadImage.
 const canUpload = computed(() => !!props.adapters.uploadImage)
@@ -245,6 +268,40 @@ const insertSticker = (src: string, name: string) =>
         </button>
       </KunPopover>
 
+      <KunPopover
+        v-else-if="item.kind === 'link'"
+        :ref="setLinkPopover"
+        position="bottom-start"
+        :opaque="true"
+        inner-class="w-64 p-2"
+      >
+        <template #trigger>
+          <KunTooltip :text="t.link" :delay-show="300">
+            <KunButton
+              variant="light"
+              size="sm"
+              :is-icon-only="true"
+              :aria-label="t.link"
+            >
+              <KunIcon name="lucide:link" />
+            </KunButton>
+          </KunTooltip>
+        </template>
+        <form class="flex items-center gap-1" @submit.prevent="applyLink">
+          <KunInput
+            v-model="linkUrl"
+            type="url"
+            size="sm"
+            :placeholder="t.linkPlaceholder"
+            :autofocus="true"
+            class="flex-1"
+          />
+          <KunButton type="submit" variant="flat" color="primary" size="sm">
+            {{ t.linkApply }}
+          </KunButton>
+        </form>
+      </KunPopover>
+
       <template v-else-if="item.kind === 'image'">
         <KunTooltip :text="t.image" :delay-show="300">
           <KunButton