@kungal/editor-nuxt 0.30.0 → 0.31.1

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/editor.css +419 -0
  3. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,57 @@
1
1
  # @kungal/editor-nuxt
2
2
 
3
+ ## 0.31.1
4
+
5
+ ### Patch Changes
6
+
7
+ - b7fe837: Fix a long `placeholder` overflowing the editor, and ship the reference
8
+ stylesheet from the layer.
9
+
10
+ The placeholder is a decoration (`.kun-editor__placeholder` +
11
+ `data-placeholder`) rendered by the host's `::before` rule. That rule was
12
+ absolutely positioned with **no positioned ancestor**, so the browser laid it
13
+ out against the viewport: a long placeholder ran past the editor's right edge —
14
+ and could even paint over the toolbar — instead of wrapping inside it. The
15
+ empty block is now the containing block, and the text wraps (`width: 100%` +
16
+ `overflow-wrap: break-word`):
17
+
18
+ ```css
19
+ .kun-editor__placeholder {
20
+ position: relative;
21
+ }
22
+ .kun-editor__placeholder::before {
23
+ content: attr(data-placeholder);
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ overflow-wrap: break-word;
29
+ }
30
+ ```
31
+
32
+ Because that CSS lived only in the docs app, every host had a _copy_ — an
33
+ upstream style fix could never reach them. The reference stylesheet now ships
34
+ with `@kungal/editor-nuxt`, so hosts can import it and get fixes with a version
35
+ bump (copying it still works):
36
+
37
+ ```css
38
+ @import "@kungal/editor-nuxt/editor.css";
39
+ ```
40
+
41
+ `@kungal/editor-vue` is unchanged and still headless (zero CSS).
42
+
43
+ - Updated dependencies [b7fe837]
44
+ - @kungal/editor-core@0.31.1
45
+ - @kungal/editor-vue@0.31.1
46
+
47
+ ## 0.31.0
48
+
49
+ ### Patch Changes
50
+
51
+ - Updated dependencies [6b3a2f7]
52
+ - @kungal/editor-vue@0.31.0
53
+ - @kungal/editor-core@0.31.0
54
+
3
55
  ## 0.30.0
4
56
 
5
57
  ### Minor Changes
package/editor.css ADDED
@@ -0,0 +1,419 @@
1
+ /*
2
+ * KunEditor reference stylesheet.
3
+ *
4
+ * `@kungal/editor-vue` ships ZERO CSS — it only renders stable class hooks
5
+ * (`.kun-editor__*`, `.kun-mention-dropdown*`) and `data-*` state. This file is
6
+ * the canonical styling of those hooks, themed with KunUI design tokens
7
+ * (`--color-*` from `@kungal/ui-tokens`), and it ships with the KunUI layer:
8
+ *
9
+ * @import '@kungal/editor-nuxt/editor.css';
10
+ *
11
+ * Import it (fixes then arrive with a version bump) or copy it into your app and
12
+ * edit freely — it's plain CSS with no build step.
13
+ *
14
+ * It also carries the two structural rules the editor genuinely needs to
15
+ * function: ProseMirror's `white-space` and the popover positioning / show-hide.
16
+ */
17
+
18
+ /* ── Shell + dual-view tabs ─────────────────────────────────────────────── */
19
+ .kun-editor {
20
+ display: flex;
21
+ flex-direction: column;
22
+ gap: 0.5rem;
23
+ }
24
+
25
+ .kun-editor__toolbar {
26
+ display: flex;
27
+ gap: 0.25rem;
28
+ }
29
+
30
+ .kun-editor__tab {
31
+ padding: 0.25rem 0.75rem;
32
+ border: 1px solid var(--color-default-200);
33
+ border-radius: 0.5rem;
34
+ background: transparent;
35
+ font: inherit;
36
+ cursor: pointer;
37
+ }
38
+
39
+ .kun-editor__tab[data-active='true'] {
40
+ background: var(--color-primary);
41
+ border-color: var(--color-primary);
42
+ color: var(--color-primary-foreground, #fff);
43
+ }
44
+
45
+ /* Swap-sides button (split mode) — pushed to the end of the tab row. */
46
+ .kun-editor__swap {
47
+ margin-left: auto;
48
+ }
49
+
50
+ /* ── Split view — editable source + read-only WYSIWYG preview ────────────── */
51
+ /* Stacked on narrow screens; side-by-side (swappable) from md up. The panes
52
+ div is a plain block in non-split modes, so this only affects split. */
53
+ .kun-editor[data-mode='split'] .kun-editor__panes {
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: 0.75rem;
57
+ margin-top: 0.5rem;
58
+ }
59
+ .kun-editor[data-mode='split'] .kun-editor__pane {
60
+ flex: 1 1 0;
61
+ min-width: 0;
62
+ /* Each pane scrolls internally (a bounded height) so scroll sync has something
63
+ to sync. Override --kun-editor-split-height to taste. */
64
+ height: var(--kun-editor-split-height, 60vh);
65
+ }
66
+ /* Make each editor fill + scroll within its pane. */
67
+ .kun-editor[data-mode='split'] .kun-editor__source .cm-editor {
68
+ height: 100%;
69
+ }
70
+ .kun-editor[data-mode='split'] .kun-editor__wysiwyg {
71
+ overflow: auto;
72
+ }
73
+ @media (min-width: 48rem) {
74
+ .kun-editor[data-mode='split'] .kun-editor__panes {
75
+ flex-direction: row;
76
+ align-items: stretch;
77
+ }
78
+ .kun-editor[data-mode='split'] .kun-editor__panes[data-swap='true'] {
79
+ flex-direction: row-reverse;
80
+ }
81
+ }
82
+
83
+ /* ── WYSIWYG surface (ProseMirror) ──────────────────────────────────────── */
84
+ .kun-editor__wysiwyg .milkdown {
85
+ outline: none;
86
+ }
87
+
88
+ .kun-editor__wysiwyg .ProseMirror {
89
+ min-height: 8rem;
90
+ padding: 0.75rem;
91
+ border: 1px solid var(--color-default-200);
92
+ border-radius: 0.5rem;
93
+ outline: none;
94
+ /* ProseMirror REQUIRES a white-space rule; pre-wrap keeps wrapping + spaces. */
95
+ white-space: pre-wrap;
96
+ word-wrap: break-word;
97
+ }
98
+
99
+ /* Placeholder: the editor sets a `data-placeholder` attr + this class on the
100
+ * empty block (a decoration, not real content). Render the text via ::before so
101
+ * it never affects the doc / caret. */
102
+ /* The ::before is absolutely positioned, so it needs a positioned ancestor —
103
+ * without one its containing block is the viewport and a long placeholder is
104
+ * laid out against THAT width, escaping the editor (horizontal overflow). */
105
+ .kun-editor__placeholder {
106
+ position: relative;
107
+ }
108
+
109
+ .kun-editor__placeholder::before {
110
+ content: attr(data-placeholder);
111
+ position: absolute;
112
+ top: 0;
113
+ left: 0;
114
+ /* Wrap inside the block instead of running past the editor's right edge. */
115
+ width: 100%;
116
+ overflow-wrap: break-word;
117
+ color: var(--color-default-400);
118
+ pointer-events: none;
119
+ }
120
+
121
+ /* In-flight "uploading…" placeholder — a decoration widget the editor drops at
122
+ * the caret while `uploadImage` runs (paste / drop / toolbar), replaced by the
123
+ * image when it resolves. */
124
+ .kun-editor__uploading {
125
+ color: var(--color-primary);
126
+ font-size: 0.875rem;
127
+ user-select: none;
128
+ }
129
+
130
+ /* ── Selection bubble toolbar (floats over a text selection) ────────────── */
131
+ /* Positioned by floating-ui (absolute left/top); visibility via data-show. */
132
+ .kun-editor__bubble {
133
+ position: absolute;
134
+ display: flex;
135
+ gap: 0.125rem;
136
+ padding: 0.25rem;
137
+ background: var(--color-background);
138
+ border: 1px solid var(--color-default-200);
139
+ border-radius: 0.5rem;
140
+ box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
141
+ z-index: 40;
142
+ }
143
+ .kun-editor__bubble[data-show='false'] {
144
+ display: none;
145
+ }
146
+ .kun-editor__bubble-btn {
147
+ display: inline-flex;
148
+ align-items: center;
149
+ justify-content: center;
150
+ padding: 0.25rem;
151
+ border: 0;
152
+ border-radius: 0.375rem;
153
+ background: transparent;
154
+ color: var(--color-foreground);
155
+ cursor: pointer;
156
+ }
157
+ .kun-editor__bubble-btn:hover {
158
+ background: var(--color-default-100);
159
+ }
160
+
161
+ /* ── Loading placeholder (WYSIWYG create/hydrate gap) ───────────────────── */
162
+ /* Shown while Milkdown hydrates; reserves height so the area doesn't collapse. */
163
+ .kun-editor__loading {
164
+ padding: 0.75rem 0;
165
+ }
166
+ .kun-editor__skeleton {
167
+ height: 0.85rem;
168
+ margin: 0.6rem 0;
169
+ border-radius: 4px;
170
+ background: linear-gradient(
171
+ 90deg,
172
+ var(--color-default-100) 25%,
173
+ var(--color-default-200) 50%,
174
+ var(--color-default-100) 75%
175
+ );
176
+ background-size: 200% 100%;
177
+ animation: kun-editor-shimmer 1.2s ease-in-out infinite;
178
+ }
179
+ .kun-editor__skeleton:nth-child(2) {
180
+ width: 85%;
181
+ }
182
+ .kun-editor__skeleton:nth-child(3) {
183
+ width: 60%;
184
+ }
185
+ @keyframes kun-editor-shimmer {
186
+ from {
187
+ background-position: 200% 0;
188
+ }
189
+ to {
190
+ background-position: -200% 0;
191
+ }
192
+ }
193
+ @media (prefers-reduced-motion: reduce) {
194
+ .kun-editor__skeleton {
195
+ animation: none;
196
+ }
197
+ }
198
+
199
+ /* ── Formatting toolbar ─────────────────────────────────────────────────── */
200
+ .kun-editor__format-toolbar {
201
+ display: flex;
202
+ flex-wrap: wrap;
203
+ align-items: center;
204
+ gap: 0.125rem;
205
+ }
206
+
207
+ .kun-editor__toolbar-divider {
208
+ width: 1px;
209
+ align-self: stretch;
210
+ margin: 0.25rem;
211
+ background: var(--color-default-200);
212
+ }
213
+
214
+ .kun-editor__tool {
215
+ display: inline-flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ width: 1.75rem;
219
+ height: 1.75rem;
220
+ padding: 0;
221
+ border: none;
222
+ border-radius: 0.375rem;
223
+ background: transparent;
224
+ color: var(--color-foreground);
225
+ cursor: pointer;
226
+ }
227
+
228
+ .kun-editor__tool:hover {
229
+ background: var(--color-default-100);
230
+ }
231
+
232
+ .kun-editor__icon {
233
+ display: inline-flex;
234
+ }
235
+
236
+ /* ── Markdown source (CodeMirror) ───────────────────────────────────────── */
237
+ .kun-editor__source .cm-editor {
238
+ border: 1px solid var(--color-default-200);
239
+ border-radius: 0.5rem;
240
+ overflow: hidden;
241
+ }
242
+
243
+ /* ── @mention dropdown (a slash view; positioned by SlashProvider) ──────── */
244
+ .kun-mention-dropdown {
245
+ position: absolute;
246
+ z-index: 30;
247
+ display: none;
248
+ min-width: 12rem;
249
+ max-width: 20rem;
250
+ max-height: 16rem;
251
+ overflow-y: auto;
252
+ padding: 0.25rem;
253
+ background: var(--color-background);
254
+ border: 1px solid var(--color-default-200);
255
+ border-radius: 0.5rem;
256
+ box-shadow:
257
+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
258
+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
259
+ }
260
+
261
+ .kun-mention-dropdown[data-show='true'] {
262
+ display: block;
263
+ }
264
+
265
+ .kun-mention-dropdown__item {
266
+ display: flex;
267
+ width: 100%;
268
+ align-items: center;
269
+ gap: 0.5rem;
270
+ padding: 0.375rem 0.5rem;
271
+ border: none;
272
+ border-radius: 0.375rem;
273
+ background: transparent;
274
+ font: inherit;
275
+ text-align: left;
276
+ cursor: pointer;
277
+ }
278
+
279
+ .kun-mention-dropdown__item:hover,
280
+ .kun-mention-dropdown__item[data-active='true'] {
281
+ background: var(--color-default-100);
282
+ }
283
+
284
+ .kun-mention-dropdown__avatar {
285
+ width: 1.5rem;
286
+ height: 1.5rem;
287
+ flex-shrink: 0;
288
+ border-radius: 9999px;
289
+ object-fit: cover;
290
+ }
291
+
292
+ .kun-mention-dropdown__avatar--fallback {
293
+ display: flex;
294
+ align-items: center;
295
+ justify-content: center;
296
+ background: var(--color-default-200);
297
+ color: var(--color-default-600);
298
+ font-size: 0.75rem;
299
+ }
300
+
301
+ .kun-mention-dropdown__name {
302
+ overflow: hidden;
303
+ text-overflow: ellipsis;
304
+ white-space: nowrap;
305
+ font-size: 0.875rem;
306
+ }
307
+
308
+ .kun-mention-dropdown__hint {
309
+ padding: 0.375rem 0.5rem;
310
+ color: var(--color-default-400);
311
+ font-size: 0.875rem;
312
+ }
313
+
314
+ /* ── Sticker / emoji picker (toolbar popover) ───────────────────────────── */
315
+ .kun-editor__picker {
316
+ position: relative;
317
+ display: inline-flex;
318
+ }
319
+
320
+ .kun-editor__picker-panel {
321
+ position: absolute;
322
+ top: calc(100% + 0.25rem);
323
+ left: 0;
324
+ z-index: 30;
325
+ width: 18rem;
326
+ padding: 0.5rem;
327
+ background: var(--color-background);
328
+ border: 1px solid var(--color-default-200);
329
+ border-radius: 0.5rem;
330
+ box-shadow:
331
+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
332
+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
333
+ }
334
+
335
+ .kun-editor__picker-tabs {
336
+ display: flex;
337
+ gap: 0.25rem;
338
+ margin-bottom: 0.5rem;
339
+ }
340
+
341
+ .kun-editor__picker-tab {
342
+ flex: 1;
343
+ padding: 0.25rem 0.5rem;
344
+ border: none;
345
+ border-bottom: 2px solid transparent;
346
+ background: transparent;
347
+ font: inherit;
348
+ cursor: pointer;
349
+ }
350
+
351
+ .kun-editor__picker-tab[data-active='true'] {
352
+ border-bottom-color: var(--color-primary);
353
+ color: var(--color-primary);
354
+ }
355
+
356
+ .kun-editor__emoji-grid {
357
+ display: grid;
358
+ grid-template-columns: repeat(8, 1fr);
359
+ gap: 0.125rem;
360
+ max-height: 16rem;
361
+ overflow-y: auto;
362
+ }
363
+
364
+ .kun-editor__emoji {
365
+ aspect-ratio: 1;
366
+ border: none;
367
+ border-radius: 0.375rem;
368
+ background: transparent;
369
+ font-size: 1.25rem;
370
+ line-height: 1;
371
+ cursor: pointer;
372
+ }
373
+
374
+ .kun-editor__emoji:hover {
375
+ background: var(--color-default-100);
376
+ }
377
+
378
+ .kun-editor__sticker-body {
379
+ max-height: 16rem;
380
+ overflow-y: auto;
381
+ }
382
+
383
+ .kun-editor__pack-name {
384
+ padding: 0.25rem 0.125rem;
385
+ color: var(--color-default-500);
386
+ font-size: 0.75rem;
387
+ }
388
+
389
+ .kun-editor__sticker-grid {
390
+ display: grid;
391
+ grid-template-columns: repeat(5, 1fr);
392
+ gap: 0.25rem;
393
+ }
394
+
395
+ .kun-editor__sticker {
396
+ aspect-ratio: 1;
397
+ padding: 0.125rem;
398
+ border: none;
399
+ border-radius: 0.375rem;
400
+ background: transparent;
401
+ cursor: pointer;
402
+ }
403
+
404
+ .kun-editor__sticker:hover {
405
+ background: var(--color-default-100);
406
+ }
407
+
408
+ .kun-editor__sticker img {
409
+ width: 100%;
410
+ height: 100%;
411
+ object-fit: contain;
412
+ }
413
+
414
+ .kun-editor__picker-hint {
415
+ padding: 1rem;
416
+ color: var(--color-default-400);
417
+ font-size: 0.875rem;
418
+ text-align: center;
419
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kungal/editor-nuxt",
3
- "version": "0.30.0",
3
+ "version": "0.31.1",
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": [
@@ -27,12 +27,13 @@
27
27
  "CHANGELOG.md",
28
28
  "app",
29
29
  "runtime",
30
+ "editor.css",
30
31
  "tailwind.css",
31
32
  "nuxt.config.ts"
32
33
  ],
33
34
  "dependencies": {
34
- "@kungal/editor-core": "0.30.0",
35
- "@kungal/editor-vue": "0.30.0"
35
+ "@kungal/editor-core": "0.31.1",
36
+ "@kungal/editor-vue": "0.31.1"
36
37
  },
37
38
  "peerDependencies": {
38
39
  "@kungal/ui-vue": "^2.7.0",