@zuilib/text-editor 0.3.0 → 0.3.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.
- package/CHANGELOG.md +20 -0
- package/DRAWING_FORMAT.md +7 -2
- package/README.md +31 -2
- package/dist/index.d.ts +37 -2
- package/dist/index.js +544 -324
- package/dist/styles.css +38 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -275,6 +275,7 @@
|
|
|
275
275
|
/* Tables — artifact-style: rounded outer border, subtle header, tight rules */
|
|
276
276
|
.zui-table {
|
|
277
277
|
width: 100%;
|
|
278
|
+
max-width: 100%;
|
|
278
279
|
margin: 1rem 0;
|
|
279
280
|
border-collapse: separate;
|
|
280
281
|
border-spacing: 0;
|
|
@@ -317,11 +318,42 @@
|
|
|
317
318
|
background: color-mix(in srgb, #6965db 14%, transparent);
|
|
318
319
|
}
|
|
319
320
|
|
|
321
|
+
/*
|
|
322
|
+
* Floating full-width / content-width toggle, straddling the top-right corner
|
|
323
|
+
* of the table the caret is in (positioned within .zui-text-editor-main). It
|
|
324
|
+
* stays inside the table's own top margin so it never covers the previous
|
|
325
|
+
* paragraph. Content width itself is an inline style on the <table> (see
|
|
326
|
+
* tableWidth.ts).
|
|
327
|
+
*/
|
|
328
|
+
.zui-table-width {
|
|
329
|
+
position: absolute;
|
|
330
|
+
z-index: 5;
|
|
331
|
+
display: flex;
|
|
332
|
+
gap: 0.125rem;
|
|
333
|
+
padding: 0.125rem;
|
|
334
|
+
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
|
|
335
|
+
border-radius: 0.5rem;
|
|
336
|
+
background: #ffffff;
|
|
337
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
338
|
+
transform: translateY(-70%);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.dark .zui-table-width {
|
|
342
|
+
background: #232329;
|
|
343
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
344
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
345
|
+
}
|
|
346
|
+
|
|
320
347
|
/* Drawing canvas */
|
|
321
348
|
.zui-drawing {
|
|
322
349
|
margin: 1rem 0;
|
|
323
350
|
}
|
|
324
351
|
|
|
352
|
+
.zui-drawing-canvas.is-content-width {
|
|
353
|
+
width: fit-content;
|
|
354
|
+
max-width: 100%;
|
|
355
|
+
}
|
|
356
|
+
|
|
325
357
|
.zui-drawing-canvas {
|
|
326
358
|
position: relative;
|
|
327
359
|
border-radius: 0.75rem;
|
|
@@ -333,6 +365,7 @@
|
|
|
333
365
|
.zui-drawing-surface {
|
|
334
366
|
display: block;
|
|
335
367
|
width: 100%;
|
|
368
|
+
max-width: 100%;
|
|
336
369
|
touch-action: none;
|
|
337
370
|
background-color: #ffffff;
|
|
338
371
|
background-image: radial-gradient(
|
|
@@ -416,6 +449,11 @@
|
|
|
416
449
|
pointer-events: auto;
|
|
417
450
|
}
|
|
418
451
|
|
|
452
|
+
/* Canvas-level controls (width) sit at the far right of the toolbar row */
|
|
453
|
+
.zui-drawing-toolbar-group-end {
|
|
454
|
+
margin-left: auto;
|
|
455
|
+
}
|
|
456
|
+
|
|
419
457
|
.zui-drawing-tool {
|
|
420
458
|
display: inline-flex;
|
|
421
459
|
align-items: center;
|