@dotit/editor 1.1.0 → 1.2.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/dist/DocsToolbar.d.ts +12 -2
- package/dist/Ruler.d.ts +16 -2
- package/dist/TrustControl.d.ts +13 -0
- package/dist/index.cjs +22 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +1806 -1324
- package/dist/index.mjs.map +1 -1
- package/dist/line-keymap.d.ts +2 -0
- package/dist/page-geometry.d.ts +7 -0
- package/dist/print.d.ts +3 -0
- package/dist/style.css +257 -0
- package/package.json +3 -3
package/dist/page-geometry.d.ts
CHANGED
|
@@ -21,5 +21,12 @@ export interface PageGeometry {
|
|
|
21
21
|
}
|
|
22
22
|
/** Compute the page geometry from `.it` source (its page:/header:/footer: blocks). */
|
|
23
23
|
export declare function getPageGeometry(source: string): PageGeometry;
|
|
24
|
+
/**
|
|
25
|
+
* Set (or replace) the `margin:` property on the document's `page:` block.
|
|
26
|
+
* Idempotent: replaces any existing margin/margins prop rather than appending,
|
|
27
|
+
* so repeated ruler drags never accumulate duplicate pipe segments. Inserts a
|
|
28
|
+
* `page:` block (after the meta/title preamble) when the document has none.
|
|
29
|
+
*/
|
|
30
|
+
export declare function setPageMargin(source: string, marginValue: string): string;
|
|
24
31
|
/** Resolve {{page}}/{{pages}} tokens for on-screen display. */
|
|
25
32
|
export declare function resolvePageTokens(text: string, page: number, pages: number): string;
|
package/dist/print.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export type PrintMode = "normal" | "minimal-ink";
|
|
2
2
|
/** Print / save-as-PDF via the browser's print dialog. Browser-only. */
|
|
3
3
|
export declare function exportDocumentPDF(content: string, theme: string, printMode?: PrintMode): void;
|
|
4
|
+
/** Download the raw `.it` source as a file. This is the editor's "Save".
|
|
5
|
+
* Derives a filename from the document's meta id / title when available. */
|
|
6
|
+
export declare function downloadItFile(content: string, filename?: string): void;
|
|
4
7
|
/** Download the print-ready HTML document. Browser-only. */
|
|
5
8
|
export declare function exportDocumentHTML(content: string, theme: string, printMode?: PrintMode): void;
|
|
6
9
|
/** Built-in theme ids — for the ribbon's theme select. */
|
package/dist/style.css
CHANGED
|
@@ -1116,6 +1116,38 @@
|
|
|
1116
1116
|
color: #1d4ed8;
|
|
1117
1117
|
}
|
|
1118
1118
|
|
|
1119
|
+
/* ─── Info callout — quiet variant (parity with core .intent-info) ───
|
|
1120
|
+
The Plain Writing Overrides above flatten every callout; info is the
|
|
1121
|
+
exception — a soft gray panel with an italic body and an ⓘ marker (no loud
|
|
1122
|
+
"NOTE" label), exactly matching core's document-css.ts so editor == print.
|
|
1123
|
+
Declared AFTER the overrides so it wins. */
|
|
1124
|
+
.docs-page .tiptap .it-doc-callout[data-variant="info"] {
|
|
1125
|
+
display: block;
|
|
1126
|
+
margin: 10px 0;
|
|
1127
|
+
padding: 8px 14px 8px 12px;
|
|
1128
|
+
background: #f5f6f8;
|
|
1129
|
+
border: none;
|
|
1130
|
+
border-inline-start: 3px solid #c7ccd3;
|
|
1131
|
+
border-radius: 0 3px 3px 0;
|
|
1132
|
+
}
|
|
1133
|
+
.docs-page .tiptap .it-doc-callout[data-variant="info"] .it-doc-callout-icon {
|
|
1134
|
+
display: none;
|
|
1135
|
+
}
|
|
1136
|
+
.docs-page .tiptap .it-doc-callout[data-variant="info"] .it-doc-callout-text {
|
|
1137
|
+
display: inline;
|
|
1138
|
+
font-style: italic;
|
|
1139
|
+
color: #4f4f4f;
|
|
1140
|
+
}
|
|
1141
|
+
.docs-page
|
|
1142
|
+
.tiptap
|
|
1143
|
+
.it-doc-callout[data-variant="info"]
|
|
1144
|
+
.it-doc-callout-text::before {
|
|
1145
|
+
content: "ⓘ ";
|
|
1146
|
+
font-style: normal;
|
|
1147
|
+
font-weight: 600;
|
|
1148
|
+
color: #6e6e6e;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1119
1151
|
/* ═══════════════════════════════════════════════════════════════
|
|
1120
1152
|
Ribbon — ONE compact Docs-style toolbar row
|
|
1121
1153
|
(Edit | File | Text | Paragraph | Insert | Trust)
|
|
@@ -1386,6 +1418,231 @@
|
|
|
1386
1418
|
font-variant-numeric: tabular-nums;
|
|
1387
1419
|
}
|
|
1388
1420
|
|
|
1421
|
+
/* Draggable margin stops (Google-Docs blue markers). */
|
|
1422
|
+
.docs-ruler--draggable .docs-ruler-stop {
|
|
1423
|
+
position: absolute;
|
|
1424
|
+
z-index: 2;
|
|
1425
|
+
}
|
|
1426
|
+
.docs-ruler-stop--h {
|
|
1427
|
+
top: 2px;
|
|
1428
|
+
width: 9px;
|
|
1429
|
+
height: 9px;
|
|
1430
|
+
margin-left: -4.5px;
|
|
1431
|
+
cursor: ew-resize;
|
|
1432
|
+
border-left: 4px solid transparent;
|
|
1433
|
+
border-right: 4px solid transparent;
|
|
1434
|
+
border-top: 7px solid #5b6b8c;
|
|
1435
|
+
}
|
|
1436
|
+
.docs-ruler-stop--h:hover,
|
|
1437
|
+
.docs-ruler-stop--h.dragging {
|
|
1438
|
+
border-top-color: #1a73e8;
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
/* ═══════════════════════════════════════════════════════════════
|
|
1442
|
+
Canvas row — left vertical ruler + the scrollable canvas
|
|
1443
|
+
═══════════════════════════════════════════════════════════════ */
|
|
1444
|
+
.docs-canvas-row {
|
|
1445
|
+
flex: 1;
|
|
1446
|
+
min-height: 0;
|
|
1447
|
+
display: flex;
|
|
1448
|
+
}
|
|
1449
|
+
.docs-canvas-row .docs-canvas {
|
|
1450
|
+
flex: 1;
|
|
1451
|
+
min-width: 0;
|
|
1452
|
+
}
|
|
1453
|
+
|
|
1454
|
+
.docs-ruler-v {
|
|
1455
|
+
flex-shrink: 0;
|
|
1456
|
+
width: 20px;
|
|
1457
|
+
background: #fff;
|
|
1458
|
+
border-right: 1px solid #dadce0;
|
|
1459
|
+
overflow: hidden;
|
|
1460
|
+
user-select: none;
|
|
1461
|
+
}
|
|
1462
|
+
.docs-ruler-v-track {
|
|
1463
|
+
position: relative;
|
|
1464
|
+
width: 100%;
|
|
1465
|
+
margin: 14px auto 0; /* matches .docs-canvas top padding so 0 aligns to sheet top */
|
|
1466
|
+
}
|
|
1467
|
+
.docs-ruler-margin--v {
|
|
1468
|
+
position: absolute;
|
|
1469
|
+
left: 0;
|
|
1470
|
+
right: 0;
|
|
1471
|
+
top: auto;
|
|
1472
|
+
bottom: auto;
|
|
1473
|
+
width: auto;
|
|
1474
|
+
background: rgba(60, 64, 67, 0.1);
|
|
1475
|
+
}
|
|
1476
|
+
.docs-ruler-tick--v {
|
|
1477
|
+
bottom: auto;
|
|
1478
|
+
left: auto;
|
|
1479
|
+
right: 4px;
|
|
1480
|
+
width: 4px;
|
|
1481
|
+
height: 1px;
|
|
1482
|
+
}
|
|
1483
|
+
.docs-ruler-tick--v.docs-ruler-tick--major {
|
|
1484
|
+
width: 7px;
|
|
1485
|
+
}
|
|
1486
|
+
.docs-ruler-num--v {
|
|
1487
|
+
top: auto;
|
|
1488
|
+
left: 50%;
|
|
1489
|
+
transform: translate(-50%, -50%);
|
|
1490
|
+
writing-mode: vertical-rl;
|
|
1491
|
+
}
|
|
1492
|
+
.docs-ruler-stop--v {
|
|
1493
|
+
position: absolute;
|
|
1494
|
+
z-index: 2;
|
|
1495
|
+
left: 2px;
|
|
1496
|
+
width: 9px;
|
|
1497
|
+
height: 9px;
|
|
1498
|
+
margin-top: -4.5px;
|
|
1499
|
+
cursor: ns-resize;
|
|
1500
|
+
border-top: 4px solid transparent;
|
|
1501
|
+
border-bottom: 4px solid transparent;
|
|
1502
|
+
border-left: 7px solid #5b6b8c;
|
|
1503
|
+
}
|
|
1504
|
+
.docs-ruler-stop--v:hover,
|
|
1505
|
+
.docs-ruler-stop--v.dragging {
|
|
1506
|
+
border-left-color: #1a73e8;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
/* ═══════════════════════════════════════════════════════════════
|
|
1510
|
+
Trust control — one self-explanatory state button + popover
|
|
1511
|
+
═══════════════════════════════════════════════════════════════ */
|
|
1512
|
+
.trust-control {
|
|
1513
|
+
position: relative;
|
|
1514
|
+
}
|
|
1515
|
+
.trust-face {
|
|
1516
|
+
gap: 5px;
|
|
1517
|
+
}
|
|
1518
|
+
.trust-face__icon {
|
|
1519
|
+
display: inline-flex;
|
|
1520
|
+
}
|
|
1521
|
+
.trust-face__ok {
|
|
1522
|
+
color: #188038;
|
|
1523
|
+
font-weight: 700;
|
|
1524
|
+
}
|
|
1525
|
+
.trust-face--draft {
|
|
1526
|
+
color: #5f6368;
|
|
1527
|
+
}
|
|
1528
|
+
.trust-face--signed {
|
|
1529
|
+
color: #1a73e8;
|
|
1530
|
+
}
|
|
1531
|
+
.trust-face--sealed {
|
|
1532
|
+
color: #188038;
|
|
1533
|
+
}
|
|
1534
|
+
.trust-face--broken {
|
|
1535
|
+
color: #d93025;
|
|
1536
|
+
}
|
|
1537
|
+
.trust-popover {
|
|
1538
|
+
position: absolute;
|
|
1539
|
+
top: calc(100% + 6px);
|
|
1540
|
+
right: 0;
|
|
1541
|
+
z-index: 50;
|
|
1542
|
+
width: 280px;
|
|
1543
|
+
background: #fff;
|
|
1544
|
+
border: 1px solid #dadce0;
|
|
1545
|
+
border-radius: 10px;
|
|
1546
|
+
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
|
|
1547
|
+
padding: 12px;
|
|
1548
|
+
font-size: 13px;
|
|
1549
|
+
}
|
|
1550
|
+
.trust-popover__state strong {
|
|
1551
|
+
display: block;
|
|
1552
|
+
font-size: 14px;
|
|
1553
|
+
margin-bottom: 2px;
|
|
1554
|
+
}
|
|
1555
|
+
.trust-popover__meta {
|
|
1556
|
+
color: #5f6368;
|
|
1557
|
+
font-size: 12px;
|
|
1558
|
+
line-height: 1.4;
|
|
1559
|
+
}
|
|
1560
|
+
.trust-popover__divider {
|
|
1561
|
+
height: 1px;
|
|
1562
|
+
background: #ececec;
|
|
1563
|
+
margin: 10px 0;
|
|
1564
|
+
}
|
|
1565
|
+
.trust-popover__action {
|
|
1566
|
+
display: flex;
|
|
1567
|
+
align-items: center;
|
|
1568
|
+
gap: 8px;
|
|
1569
|
+
width: 100%;
|
|
1570
|
+
padding: 8px 10px;
|
|
1571
|
+
margin-top: 4px;
|
|
1572
|
+
border: 1px solid #dadce0;
|
|
1573
|
+
border-radius: 7px;
|
|
1574
|
+
background: #fff;
|
|
1575
|
+
cursor: pointer;
|
|
1576
|
+
font-size: 13px;
|
|
1577
|
+
color: #202124;
|
|
1578
|
+
text-align: left;
|
|
1579
|
+
}
|
|
1580
|
+
.trust-popover__action:hover {
|
|
1581
|
+
background: #f1f3f4;
|
|
1582
|
+
}
|
|
1583
|
+
.trust-popover__action:disabled {
|
|
1584
|
+
opacity: 0.5;
|
|
1585
|
+
cursor: default;
|
|
1586
|
+
}
|
|
1587
|
+
.trust-popover__action--primary {
|
|
1588
|
+
background: #1a73e8;
|
|
1589
|
+
border-color: #1a73e8;
|
|
1590
|
+
color: #fff;
|
|
1591
|
+
}
|
|
1592
|
+
.trust-popover__action--primary:hover {
|
|
1593
|
+
background: #1666c8;
|
|
1594
|
+
}
|
|
1595
|
+
.trust-popover__action--warn {
|
|
1596
|
+
color: #b06000;
|
|
1597
|
+
}
|
|
1598
|
+
.trust-popover__verify {
|
|
1599
|
+
font-size: 12px;
|
|
1600
|
+
margin-bottom: 6px;
|
|
1601
|
+
}
|
|
1602
|
+
.trust-verify--ok {
|
|
1603
|
+
color: #188038;
|
|
1604
|
+
}
|
|
1605
|
+
.trust-verify--bad {
|
|
1606
|
+
color: #d93025;
|
|
1607
|
+
}
|
|
1608
|
+
.trust-popover__hash {
|
|
1609
|
+
margin-top: 6px;
|
|
1610
|
+
}
|
|
1611
|
+
.trust-popover__hash summary {
|
|
1612
|
+
cursor: pointer;
|
|
1613
|
+
color: #5f6368;
|
|
1614
|
+
}
|
|
1615
|
+
.trust-popover__hash code {
|
|
1616
|
+
display: block;
|
|
1617
|
+
margin-top: 4px;
|
|
1618
|
+
word-break: break-all;
|
|
1619
|
+
font-size: 11px;
|
|
1620
|
+
color: #5f6368;
|
|
1621
|
+
}
|
|
1622
|
+
.trust-sign-form {
|
|
1623
|
+
display: flex;
|
|
1624
|
+
flex-direction: column;
|
|
1625
|
+
gap: 6px;
|
|
1626
|
+
}
|
|
1627
|
+
.trust-sign-input {
|
|
1628
|
+
width: 100%;
|
|
1629
|
+
padding: 7px 9px;
|
|
1630
|
+
border: 1px solid #dadce0;
|
|
1631
|
+
border-radius: 6px;
|
|
1632
|
+
font-size: 13px;
|
|
1633
|
+
}
|
|
1634
|
+
.trust-sign-input:focus {
|
|
1635
|
+
outline: none;
|
|
1636
|
+
border-color: #1a73e8;
|
|
1637
|
+
}
|
|
1638
|
+
.trust-sign-actions {
|
|
1639
|
+
display: flex;
|
|
1640
|
+
gap: 6px;
|
|
1641
|
+
}
|
|
1642
|
+
.trust-sign-actions .trust-popover__action {
|
|
1643
|
+
margin-top: 2px;
|
|
1644
|
+
}
|
|
1645
|
+
|
|
1389
1646
|
/* ─── Mobile ──────────────────────────────────────────────── */
|
|
1390
1647
|
|
|
1391
1648
|
@media (max-width: 768px) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dotit/editor",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Embeddable WYSIWYG visual editor for IntentText (.it) documents — Word-like pages, ribbon, trust banner, and WYSIWYG PDF/HTML export. Drop it into any React app (ERPs, portals, back offices).",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@tiptap/react": "^3.20.1",
|
|
64
64
|
"@tiptap/starter-kit": "^3.20.1",
|
|
65
65
|
"lucide-react": "^0.577.0",
|
|
66
|
-
"@dotit/core": "^1.
|
|
66
|
+
"@dotit/core": "^1.2.0"
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@types/react": "^19.2.14",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
},
|
|
77
77
|
"scripts": {
|
|
78
78
|
"build:core": "pnpm --filter @dotit/core build",
|
|
79
|
-
"build": "pnpm run build:core && rm -rf dist && vite build && tsc && cp src/styles.css dist/style.css",
|
|
79
|
+
"build": "pnpm run build:core && rm -rf dist && vite build && tsc -p tsconfig.build.json && cp src/styles.css dist/style.css",
|
|
80
80
|
"dev": "vite build --watch"
|
|
81
81
|
}
|
|
82
82
|
}
|