@kungal/editor-nuxt 0.32.1 → 0.33.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 +51 -0
- package/editor.css +29 -3
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,56 @@
|
|
|
1
1
|
# @kungal/editor-nuxt
|
|
2
2
|
|
|
3
|
+
## 0.33.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 9294ba2: Insert a link from the selection bubble without a native `prompt`
|
|
8
|
+
|
|
9
|
+
Selecting text → 「链接」 used to pop `window.prompt`. The bubble now asks for the
|
|
10
|
+
URL **in place**: the button row swaps for a URL input (`data-mode="link"`),
|
|
11
|
+
Enter applies, Esc cancels, and the row comes back. If the selection is already
|
|
12
|
+
a link its href is prefilled (and selected), so editing a URL is the same flow.
|
|
13
|
+
|
|
14
|
+
Why in place, and not a popover/dialog: the bubble is a Milkdown tooltip whose
|
|
15
|
+
`shouldShow` keeps it alive only while focus is in the editor **or inside the
|
|
16
|
+
bubble element**. Any popover teleports its panel to `<body>` — outside that
|
|
17
|
+
element — so the bubble would hide the moment the panel's input took focus. An
|
|
18
|
+
input in our own DOM keeps the bubble put, and the ProseMirror selection
|
|
19
|
+
survives the DOM blur, so the link wraps exactly what was selected.
|
|
20
|
+
|
|
21
|
+
Still headless: a plain `<input>` plus one new class hook.
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
.kun-editor__bubble[data-mode="link"] {
|
|
25
|
+
/* the URL-entry state */
|
|
26
|
+
}
|
|
27
|
+
.kun-editor__bubble-input {
|
|
28
|
+
/* the input itself */
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Hosts that want their own UI keep the escape hatch — the `linkPrompt` adapter
|
|
33
|
+
takes precedence over the inline input, exactly as it does over the KunUI
|
|
34
|
+
toolbar's popover.
|
|
35
|
+
|
|
36
|
+
Also in the shipped reference stylesheet (`@kungal/editor-nuxt/editor.css`): the
|
|
37
|
+
selection bubble, the @mention dropdown and the sticker/emoji picker painted
|
|
38
|
+
themselves with `--color-background` — KunUI's _glassy page_ tint (0.7 alpha) —
|
|
39
|
+
so document text showed through a panel floating over it. They now use the
|
|
40
|
+
RAISED surface token the KunUI popovers use, via one overridable var:
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
:root {
|
|
44
|
+
--kun-editor-surface: var(--color-content1, var(--color-background));
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Patch Changes
|
|
49
|
+
|
|
50
|
+
- Updated dependencies [9294ba2]
|
|
51
|
+
- @kungal/editor-core@0.33.0
|
|
52
|
+
- @kungal/editor-vue@0.33.0
|
|
53
|
+
|
|
3
54
|
## 0.32.1
|
|
4
55
|
|
|
5
56
|
### 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);
|
|
@@ -157,6 +166,23 @@
|
|
|
157
166
|
.kun-editor__bubble-btn:hover {
|
|
158
167
|
background: var(--color-default-100);
|
|
159
168
|
}
|
|
169
|
+
/* Link entry: the bubble swaps its button row for this URL input in place
|
|
170
|
+
(data-mode="link"), so no second floating layer is involved. */
|
|
171
|
+
.kun-editor__bubble-input {
|
|
172
|
+
width: 14rem;
|
|
173
|
+
min-width: 0;
|
|
174
|
+
padding: 0.25rem 0.5rem;
|
|
175
|
+
border: 1px solid var(--color-default-200);
|
|
176
|
+
border-radius: 0.375rem;
|
|
177
|
+
background: transparent;
|
|
178
|
+
color: var(--color-foreground);
|
|
179
|
+
font: inherit;
|
|
180
|
+
font-size: 0.875rem;
|
|
181
|
+
outline: none;
|
|
182
|
+
}
|
|
183
|
+
.kun-editor__bubble-input:focus {
|
|
184
|
+
border-color: var(--color-primary);
|
|
185
|
+
}
|
|
160
186
|
|
|
161
187
|
/* ── Loading placeholder (WYSIWYG create/hydrate gap) ───────────────────── */
|
|
162
188
|
/* Shown while Milkdown hydrates; reserves height so the area doesn't collapse. */
|
|
@@ -261,7 +287,7 @@
|
|
|
261
287
|
max-height: 16rem;
|
|
262
288
|
overflow-y: auto;
|
|
263
289
|
padding: 0.25rem;
|
|
264
|
-
background: var(--
|
|
290
|
+
background: var(--kun-editor-surface);
|
|
265
291
|
border: 1px solid var(--color-default-200);
|
|
266
292
|
border-radius: 0.5rem;
|
|
267
293
|
box-shadow:
|
|
@@ -335,7 +361,7 @@
|
|
|
335
361
|
z-index: 30;
|
|
336
362
|
width: 18rem;
|
|
337
363
|
padding: 0.5rem;
|
|
338
|
-
background: var(--
|
|
364
|
+
background: var(--kun-editor-surface);
|
|
339
365
|
border: 1px solid var(--color-default-200);
|
|
340
366
|
border-radius: 0.5rem;
|
|
341
367
|
box-shadow:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kungal/editor-nuxt",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.33.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.33.0",
|
|
36
|
+
"@kungal/editor-vue": "0.33.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@kungal/ui-vue": "^2.7.0",
|