@kungal/editor-nuxt 0.32.1 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +93 -0
- package/editor.css +56 -3
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,98 @@
|
|
|
1
1
|
# @kungal/editor-nuxt
|
|
2
2
|
|
|
3
|
+
## 0.34.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- ab7fbc2: No native `prompt` left: the headless toolbar gets a link URL panel too
|
|
8
|
+
|
|
9
|
+
0.33.0 gave the selection bubble an inline URL input; the fixed (headless)
|
|
10
|
+
toolbar still popped `window.prompt`. It now opens a small panel under the link
|
|
11
|
+
button — Enter applies, Esc cancels, clicking outside closes, and the editor
|
|
12
|
+
gets focus back. Same behaviour as the bubble otherwise: an existing href is
|
|
13
|
+
prefilled (and selected), and with nothing selected the URL is inserted as
|
|
14
|
+
linked text. A panel rather than an in-place swap because a fixed toolbar row
|
|
15
|
+
that rearranges itself is jarring; the bubble is already a floating layer, so
|
|
16
|
+
there the swap is the right shape.
|
|
17
|
+
|
|
18
|
+
**Breaking (CSS hook, one version old):** `.kun-editor__bubble-input` →
|
|
19
|
+
`.kun-editor__link-input`. Both entry points render the same input, so the hook
|
|
20
|
+
is named after the thing, not the place. Hosts importing
|
|
21
|
+
`@kungal/editor-nuxt/editor.css` need no change; a copied stylesheet wants the
|
|
22
|
+
rename plus the two new hooks:
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
.kun-editor__link {
|
|
26
|
+
position: relative;
|
|
27
|
+
} /* structural */
|
|
28
|
+
.kun-editor__link-panel {
|
|
29
|
+
position: absolute;
|
|
30
|
+
} /* structural */
|
|
31
|
+
.kun-editor__link-input {
|
|
32
|
+
/* shared by the toolbar panel and the bubble */
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
`linkPrompt` keeps taking precedence over all three built-in entries (bubble
|
|
37
|
+
input, toolbar panel, KunUI popover), so a host modal is still one override.
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- Updated dependencies [ab7fbc2]
|
|
42
|
+
- @kungal/editor-core@0.34.0
|
|
43
|
+
- @kungal/editor-vue@0.34.0
|
|
44
|
+
|
|
45
|
+
## 0.33.0
|
|
46
|
+
|
|
47
|
+
### Minor Changes
|
|
48
|
+
|
|
49
|
+
- 9294ba2: Insert a link from the selection bubble without a native `prompt`
|
|
50
|
+
|
|
51
|
+
Selecting text → 「链接」 used to pop `window.prompt`. The bubble now asks for the
|
|
52
|
+
URL **in place**: the button row swaps for a URL input (`data-mode="link"`),
|
|
53
|
+
Enter applies, Esc cancels, and the row comes back. If the selection is already
|
|
54
|
+
a link its href is prefilled (and selected), so editing a URL is the same flow.
|
|
55
|
+
|
|
56
|
+
Why in place, and not a popover/dialog: the bubble is a Milkdown tooltip whose
|
|
57
|
+
`shouldShow` keeps it alive only while focus is in the editor **or inside the
|
|
58
|
+
bubble element**. Any popover teleports its panel to `<body>` — outside that
|
|
59
|
+
element — so the bubble would hide the moment the panel's input took focus. An
|
|
60
|
+
input in our own DOM keeps the bubble put, and the ProseMirror selection
|
|
61
|
+
survives the DOM blur, so the link wraps exactly what was selected.
|
|
62
|
+
|
|
63
|
+
Still headless: a plain `<input>` plus one new class hook.
|
|
64
|
+
|
|
65
|
+
```css
|
|
66
|
+
.kun-editor__bubble[data-mode="link"] {
|
|
67
|
+
/* the URL-entry state */
|
|
68
|
+
}
|
|
69
|
+
.kun-editor__bubble-input {
|
|
70
|
+
/* the input itself */
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Hosts that want their own UI keep the escape hatch — the `linkPrompt` adapter
|
|
75
|
+
takes precedence over the inline input, exactly as it does over the KunUI
|
|
76
|
+
toolbar's popover.
|
|
77
|
+
|
|
78
|
+
Also in the shipped reference stylesheet (`@kungal/editor-nuxt/editor.css`): the
|
|
79
|
+
selection bubble, the @mention dropdown and the sticker/emoji picker painted
|
|
80
|
+
themselves with `--color-background` — KunUI's _glassy page_ tint (0.7 alpha) —
|
|
81
|
+
so document text showed through a panel floating over it. They now use the
|
|
82
|
+
RAISED surface token the KunUI popovers use, via one overridable var:
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
:root {
|
|
86
|
+
--kun-editor-surface: var(--color-content1, var(--color-background));
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Patch Changes
|
|
91
|
+
|
|
92
|
+
- Updated dependencies [9294ba2]
|
|
93
|
+
- @kungal/editor-core@0.33.0
|
|
94
|
+
- @kungal/editor-vue@0.33.0
|
|
95
|
+
|
|
3
96
|
## 0.32.1
|
|
4
97
|
|
|
5
98
|
### Patch Changes
|
package/editor.css
CHANGED
|
@@ -15,6 +15,15 @@
|
|
|
15
15
|
* function: ProseMirror's `white-space` and the popover positioning / show-hide.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
+
/* The surface every floating panel sits on (selection bubble, @mention dropdown,
|
|
19
|
+
* sticker/emoji picker). KunUI's `--color-content1` is the RAISED surface token —
|
|
20
|
+
* opaque by default, the same one KunPopover / KunDropdown use. `--color-background`
|
|
21
|
+
* is the glassy page tint (0.7 alpha), so a panel floating OVER text would show
|
|
22
|
+
* that text through it. Override this one var to restyle all three. */
|
|
23
|
+
:root {
|
|
24
|
+
--kun-editor-surface: var(--color-content1, var(--color-background));
|
|
25
|
+
}
|
|
26
|
+
|
|
18
27
|
/* ── Shell + dual-view tabs ─────────────────────────────────────────────── */
|
|
19
28
|
.kun-editor {
|
|
20
29
|
display: flex;
|
|
@@ -134,7 +143,7 @@
|
|
|
134
143
|
display: flex;
|
|
135
144
|
gap: 0.125rem;
|
|
136
145
|
padding: 0.25rem;
|
|
137
|
-
background: var(--
|
|
146
|
+
background: var(--kun-editor-surface);
|
|
138
147
|
border: 1px solid var(--color-default-200);
|
|
139
148
|
border-radius: 0.5rem;
|
|
140
149
|
box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
|
|
@@ -244,6 +253,50 @@
|
|
|
244
253
|
display: inline-flex;
|
|
245
254
|
}
|
|
246
255
|
|
|
256
|
+
/* ── Link URL entry ─────────────────────────────────────────────────────── */
|
|
257
|
+
/* Two shapes, one input hook. The selection bubble swaps its button row for the
|
|
258
|
+
input IN PLACE (it is itself a floating tooltip — see `[data-mode='link']`);
|
|
259
|
+
the fixed toolbar, being a static row, opens this small panel under its
|
|
260
|
+
button instead. */
|
|
261
|
+
.kun-editor__link {
|
|
262
|
+
position: relative;
|
|
263
|
+
display: inline-flex;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.kun-editor__link-panel {
|
|
267
|
+
position: absolute;
|
|
268
|
+
top: calc(100% + 0.25rem);
|
|
269
|
+
left: 0;
|
|
270
|
+
z-index: 30;
|
|
271
|
+
display: flex;
|
|
272
|
+
align-items: center;
|
|
273
|
+
gap: 0.25rem;
|
|
274
|
+
padding: 0.375rem;
|
|
275
|
+
background: var(--kun-editor-surface);
|
|
276
|
+
border: 1px solid var(--color-default-200);
|
|
277
|
+
border-radius: 0.5rem;
|
|
278
|
+
box-shadow:
|
|
279
|
+
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
280
|
+
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.kun-editor__link-input {
|
|
284
|
+
width: 14rem;
|
|
285
|
+
min-width: 0;
|
|
286
|
+
padding: 0.25rem 0.5rem;
|
|
287
|
+
border: 1px solid var(--color-default-200);
|
|
288
|
+
border-radius: 0.375rem;
|
|
289
|
+
background: transparent;
|
|
290
|
+
color: var(--color-foreground);
|
|
291
|
+
font: inherit;
|
|
292
|
+
font-size: 0.875rem;
|
|
293
|
+
outline: none;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.kun-editor__link-input:focus {
|
|
297
|
+
border-color: var(--color-primary);
|
|
298
|
+
}
|
|
299
|
+
|
|
247
300
|
/* ── Markdown source (CodeMirror) ───────────────────────────────────────── */
|
|
248
301
|
.kun-editor__source .cm-editor {
|
|
249
302
|
border: 1px solid var(--color-default-200);
|
|
@@ -261,7 +314,7 @@
|
|
|
261
314
|
max-height: 16rem;
|
|
262
315
|
overflow-y: auto;
|
|
263
316
|
padding: 0.25rem;
|
|
264
|
-
background: var(--
|
|
317
|
+
background: var(--kun-editor-surface);
|
|
265
318
|
border: 1px solid var(--color-default-200);
|
|
266
319
|
border-radius: 0.5rem;
|
|
267
320
|
box-shadow:
|
|
@@ -335,7 +388,7 @@
|
|
|
335
388
|
z-index: 30;
|
|
336
389
|
width: 18rem;
|
|
337
390
|
padding: 0.5rem;
|
|
338
|
-
background: var(--
|
|
391
|
+
background: var(--kun-editor-surface);
|
|
339
392
|
border: 1px solid var(--color-default-200);
|
|
340
393
|
border-radius: 0.5rem;
|
|
341
394
|
box-shadow:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kungal/editor-nuxt",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"description": "KunEditor Nuxt Layer — wraps @kungal/editor-vue and auto-imports <KunEditor> so an existing Nuxt app keeps its exact DX (no import needed).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"nuxt.config.ts"
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@kungal/editor-core": "0.
|
|
36
|
-
"@kungal/editor-vue": "0.
|
|
35
|
+
"@kungal/editor-core": "0.34.0",
|
|
36
|
+
"@kungal/editor-vue": "0.34.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@kungal/ui-vue": "^2.7.0",
|