@lumir-company/editor 0.4.15 → 0.4.16
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/README.md +50 -0
- package/dist/index.d.mts +81 -1
- package/dist/index.d.ts +81 -1
- package/dist/index.js +869 -535
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +784 -450
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +17 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -24,7 +24,10 @@ __export(index_exports, {
|
|
|
24
24
|
BACKGROUND_COLORS: () => BACKGROUND_COLORS,
|
|
25
25
|
ContentUtils: () => ContentUtils,
|
|
26
26
|
EditorConfig: () => EditorConfig,
|
|
27
|
+
FONT_SIZE_PRESETS: () => FONT_SIZE_PRESETS,
|
|
27
28
|
FloatingMenu: () => FloatingMenu,
|
|
29
|
+
FontSize: () => FontSize,
|
|
30
|
+
FontSizeButton: () => FontSizeButton2,
|
|
28
31
|
HtmlPreviewBlock: () => HtmlPreviewBlock,
|
|
29
32
|
HtmlPreviewSchema: () => schema,
|
|
30
33
|
LinkPreviewBlock: () => LinkPreviewBlock,
|
|
@@ -35,13 +38,15 @@ __export(index_exports, {
|
|
|
35
38
|
cn: () => cn,
|
|
36
39
|
createS3Uploader: () => createS3Uploader,
|
|
37
40
|
fetchLinkMetadata: () => fetchLinkMetadata,
|
|
38
|
-
getHexFromColorValue: () => getHexFromColorValue
|
|
41
|
+
getHexFromColorValue: () => getHexFromColorValue,
|
|
42
|
+
liftFontSize: () => liftFontSize,
|
|
43
|
+
lowerFontSize: () => lowerFontSize
|
|
39
44
|
});
|
|
40
45
|
module.exports = __toCommonJS(index_exports);
|
|
41
46
|
|
|
42
47
|
// src/components/LumirEditor.tsx
|
|
43
|
-
var
|
|
44
|
-
var
|
|
48
|
+
var import_react34 = require("react");
|
|
49
|
+
var import_react35 = require("@blocknote/react");
|
|
45
50
|
var import_mantine = require("@blocknote/mantine");
|
|
46
51
|
var import_core5 = require("@blocknote/core");
|
|
47
52
|
var import_locales = require("@blocknote/core/locales");
|
|
@@ -280,7 +285,7 @@ var createS3Uploader = (config) => {
|
|
|
280
285
|
};
|
|
281
286
|
|
|
282
287
|
// src/blocks/HtmlPreview.tsx
|
|
283
|
-
var
|
|
288
|
+
var import_react6 = require("@blocknote/react");
|
|
284
289
|
var import_core = require("@blocknote/core");
|
|
285
290
|
|
|
286
291
|
// src/blocks/LinkPreview.tsx
|
|
@@ -1241,9 +1246,32 @@ var VideoBlock = (0, import_react3.createReactBlockSpec)(
|
|
|
1241
1246
|
}
|
|
1242
1247
|
);
|
|
1243
1248
|
|
|
1244
|
-
// src/
|
|
1245
|
-
var
|
|
1249
|
+
// src/styles/FontSizeStyle.tsx
|
|
1250
|
+
var import_react5 = require("@blocknote/react");
|
|
1246
1251
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1252
|
+
var FontSize = (0, import_react5.createReactStyleSpec)(
|
|
1253
|
+
{
|
|
1254
|
+
type: "fontSize",
|
|
1255
|
+
propSchema: "string"
|
|
1256
|
+
},
|
|
1257
|
+
{
|
|
1258
|
+
render: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: props.value }, ref: props.contentRef })
|
|
1259
|
+
}
|
|
1260
|
+
);
|
|
1261
|
+
var FONT_SIZE_PRESETS = [
|
|
1262
|
+
"10px",
|
|
1263
|
+
"12px",
|
|
1264
|
+
"14px",
|
|
1265
|
+
"16px",
|
|
1266
|
+
"18px",
|
|
1267
|
+
"20px",
|
|
1268
|
+
"24px",
|
|
1269
|
+
"28px"
|
|
1270
|
+
];
|
|
1271
|
+
|
|
1272
|
+
// src/blocks/HtmlPreview.tsx
|
|
1273
|
+
var import_react7 = require("react");
|
|
1274
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1247
1275
|
var MIN_HEIGHT = 100;
|
|
1248
1276
|
var MAX_HEIGHT = 1200;
|
|
1249
1277
|
var ensureCharset = (html) => {
|
|
@@ -1281,7 +1309,7 @@ var createSecureBlobUrl = (htmlContent) => {
|
|
|
1281
1309
|
});
|
|
1282
1310
|
return URL.createObjectURL(blob);
|
|
1283
1311
|
};
|
|
1284
|
-
var HtmlPreviewBlock = (0,
|
|
1312
|
+
var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
1285
1313
|
{
|
|
1286
1314
|
type: "htmlPreview",
|
|
1287
1315
|
propSchema: {
|
|
@@ -1299,15 +1327,15 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1299
1327
|
},
|
|
1300
1328
|
{
|
|
1301
1329
|
render: (props) => {
|
|
1302
|
-
const [isExpanded, setIsExpanded] = (0,
|
|
1303
|
-
const [isResizing, setIsResizing] = (0,
|
|
1304
|
-
const [blobUrl, setBlobUrl] = (0,
|
|
1305
|
-
const containerRef = (0,
|
|
1330
|
+
const [isExpanded, setIsExpanded] = (0, import_react7.useState)(true);
|
|
1331
|
+
const [isResizing, setIsResizing] = (0, import_react7.useState)(false);
|
|
1332
|
+
const [blobUrl, setBlobUrl] = (0, import_react7.useState)("");
|
|
1333
|
+
const containerRef = (0, import_react7.useRef)(null);
|
|
1306
1334
|
const htmlContent = props.block.props.htmlContent || "";
|
|
1307
1335
|
const fileName = props.block.props.fileName || "HTML Document";
|
|
1308
1336
|
const savedHeight = props.block.props.height || "400px";
|
|
1309
1337
|
const currentHeight = parseInt(savedHeight, 10) || 400;
|
|
1310
|
-
(0,
|
|
1338
|
+
(0, import_react7.useEffect)(() => {
|
|
1311
1339
|
if (htmlContent) {
|
|
1312
1340
|
const url = createSecureBlobUrl(htmlContent);
|
|
1313
1341
|
setBlobUrl(url);
|
|
@@ -1316,7 +1344,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1316
1344
|
};
|
|
1317
1345
|
}
|
|
1318
1346
|
}, [htmlContent]);
|
|
1319
|
-
const handleResizeStart = (0,
|
|
1347
|
+
const handleResizeStart = (0, import_react7.useCallback)(
|
|
1320
1348
|
(e) => {
|
|
1321
1349
|
e.preventDefault();
|
|
1322
1350
|
e.stopPropagation();
|
|
@@ -1343,7 +1371,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1343
1371
|
},
|
|
1344
1372
|
[currentHeight, props.editor, props.block]
|
|
1345
1373
|
);
|
|
1346
|
-
const handleExport = (0,
|
|
1374
|
+
const handleExport = (0, import_react7.useCallback)(
|
|
1347
1375
|
(e) => {
|
|
1348
1376
|
e.stopPropagation();
|
|
1349
1377
|
const safeFileName = sanitizeFileName(fileName);
|
|
@@ -1364,7 +1392,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1364
1392
|
},
|
|
1365
1393
|
[htmlContent, fileName]
|
|
1366
1394
|
);
|
|
1367
|
-
const handleOpenNewWindow = (0,
|
|
1395
|
+
const handleOpenNewWindow = (0, import_react7.useCallback)(
|
|
1368
1396
|
(e) => {
|
|
1369
1397
|
e.stopPropagation();
|
|
1370
1398
|
if (typeof window === "undefined") return;
|
|
@@ -1378,7 +1406,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1378
1406
|
},
|
|
1379
1407
|
[htmlContent]
|
|
1380
1408
|
);
|
|
1381
|
-
return /* @__PURE__ */ (0,
|
|
1409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1382
1410
|
"div",
|
|
1383
1411
|
{
|
|
1384
1412
|
ref: containerRef,
|
|
@@ -1394,7 +1422,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1394
1422
|
boxShadow: "none"
|
|
1395
1423
|
},
|
|
1396
1424
|
children: [
|
|
1397
|
-
/* @__PURE__ */ (0,
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1398
1426
|
"div",
|
|
1399
1427
|
{
|
|
1400
1428
|
style: {
|
|
@@ -1406,7 +1434,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1406
1434
|
borderBottom: isExpanded ? "1px solid #e0e0e0" : "none"
|
|
1407
1435
|
},
|
|
1408
1436
|
children: [
|
|
1409
|
-
/* @__PURE__ */ (0,
|
|
1437
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1410
1438
|
"div",
|
|
1411
1439
|
{
|
|
1412
1440
|
style: {
|
|
@@ -1418,7 +1446,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1418
1446
|
},
|
|
1419
1447
|
onClick: () => setIsExpanded(!isExpanded),
|
|
1420
1448
|
children: [
|
|
1421
|
-
/* @__PURE__ */ (0,
|
|
1449
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1422
1450
|
"svg",
|
|
1423
1451
|
{
|
|
1424
1452
|
width: "16",
|
|
@@ -1433,15 +1461,15 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1433
1461
|
transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
1434
1462
|
transition: "transform 0.2s"
|
|
1435
1463
|
},
|
|
1436
|
-
children: /* @__PURE__ */ (0,
|
|
1464
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "6 9 12 15 18 9" })
|
|
1437
1465
|
}
|
|
1438
1466
|
),
|
|
1439
|
-
/* @__PURE__ */ (0,
|
|
1467
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 500, fontSize: "14px" }, children: fileName })
|
|
1440
1468
|
]
|
|
1441
1469
|
}
|
|
1442
1470
|
),
|
|
1443
|
-
/* @__PURE__ */ (0,
|
|
1444
|
-
/* @__PURE__ */ (0,
|
|
1471
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
|
|
1472
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1445
1473
|
"button",
|
|
1446
1474
|
{
|
|
1447
1475
|
onClick: handleOpenNewWindow,
|
|
@@ -1464,7 +1492,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1464
1492
|
onMouseLeave: (e) => {
|
|
1465
1493
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1466
1494
|
},
|
|
1467
|
-
children: /* @__PURE__ */ (0,
|
|
1495
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1468
1496
|
"svg",
|
|
1469
1497
|
{
|
|
1470
1498
|
width: "16",
|
|
@@ -1476,15 +1504,15 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1476
1504
|
strokeLinecap: "round",
|
|
1477
1505
|
strokeLinejoin: "round",
|
|
1478
1506
|
children: [
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "15 3 21 3 21 9" }),
|
|
1509
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
|
|
1482
1510
|
]
|
|
1483
1511
|
}
|
|
1484
1512
|
)
|
|
1485
1513
|
}
|
|
1486
1514
|
),
|
|
1487
|
-
/* @__PURE__ */ (0,
|
|
1515
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1488
1516
|
"button",
|
|
1489
1517
|
{
|
|
1490
1518
|
onClick: handleExport,
|
|
@@ -1507,7 +1535,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1507
1535
|
onMouseLeave: (e) => {
|
|
1508
1536
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1509
1537
|
},
|
|
1510
|
-
children: /* @__PURE__ */ (0,
|
|
1538
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1511
1539
|
"svg",
|
|
1512
1540
|
{
|
|
1513
1541
|
width: "16",
|
|
@@ -1519,9 +1547,9 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1519
1547
|
strokeLinecap: "round",
|
|
1520
1548
|
strokeLinejoin: "round",
|
|
1521
1549
|
children: [
|
|
1522
|
-
/* @__PURE__ */ (0,
|
|
1523
|
-
/* @__PURE__ */ (0,
|
|
1524
|
-
/* @__PURE__ */ (0,
|
|
1550
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
1551
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "7 10 12 15 17 10" }),
|
|
1552
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
|
|
1525
1553
|
]
|
|
1526
1554
|
}
|
|
1527
1555
|
)
|
|
@@ -1531,7 +1559,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1531
1559
|
]
|
|
1532
1560
|
}
|
|
1533
1561
|
),
|
|
1534
|
-
isExpanded && /* @__PURE__ */ (0,
|
|
1562
|
+
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1535
1563
|
"div",
|
|
1536
1564
|
{
|
|
1537
1565
|
style: {
|
|
@@ -1540,7 +1568,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1540
1568
|
position: "relative"
|
|
1541
1569
|
},
|
|
1542
1570
|
children: [
|
|
1543
|
-
/* @__PURE__ */ (0,
|
|
1571
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1544
1572
|
"iframe",
|
|
1545
1573
|
{
|
|
1546
1574
|
src: blobUrl || "about:blank",
|
|
@@ -1557,7 +1585,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1557
1585
|
loading: "lazy"
|
|
1558
1586
|
}
|
|
1559
1587
|
),
|
|
1560
|
-
/* @__PURE__ */ (0,
|
|
1588
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1561
1589
|
"div",
|
|
1562
1590
|
{
|
|
1563
1591
|
onMouseDown: handleResizeStart,
|
|
@@ -1582,7 +1610,7 @@ var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
|
1582
1610
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1583
1611
|
}
|
|
1584
1612
|
},
|
|
1585
|
-
children: /* @__PURE__ */ (0,
|
|
1613
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1586
1614
|
"div",
|
|
1587
1615
|
{
|
|
1588
1616
|
style: {
|
|
@@ -1612,64 +1640,68 @@ var schema = import_core.BlockNoteSchema.create({
|
|
|
1612
1640
|
video: VideoBlock
|
|
1613
1641
|
},
|
|
1614
1642
|
inlineContentSpecs: import_core.defaultInlineContentSpecs,
|
|
1615
|
-
styleSpecs:
|
|
1643
|
+
styleSpecs: {
|
|
1644
|
+
...import_core.defaultStyleSpecs,
|
|
1645
|
+
// 인라인 글자 크기. 저장 JSON 직렬화는 형제 키 방식(font-size-serialization.ts) 사용.
|
|
1646
|
+
fontSize: FontSize
|
|
1647
|
+
}
|
|
1616
1648
|
});
|
|
1617
1649
|
|
|
1618
1650
|
// src/components/FloatingMenu/index.tsx
|
|
1619
|
-
var
|
|
1651
|
+
var import_react19 = require("react");
|
|
1620
1652
|
|
|
1621
1653
|
// src/components/FloatingMenu/Icons.tsx
|
|
1622
|
-
var
|
|
1654
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1623
1655
|
var Icons = {
|
|
1624
|
-
undo: /* @__PURE__ */ (0,
|
|
1625
|
-
redo: /* @__PURE__ */ (0,
|
|
1626
|
-
bold: /* @__PURE__ */ (0,
|
|
1627
|
-
italic: /* @__PURE__ */ (0,
|
|
1628
|
-
underline: /* @__PURE__ */ (0,
|
|
1629
|
-
strikethrough: /* @__PURE__ */ (0,
|
|
1630
|
-
alignLeft: /* @__PURE__ */ (0,
|
|
1631
|
-
alignCenter: /* @__PURE__ */ (0,
|
|
1632
|
-
alignRight: /* @__PURE__ */ (0,
|
|
1633
|
-
bulletList: /* @__PURE__ */ (0,
|
|
1634
|
-
numberedList: /* @__PURE__ */ (0,
|
|
1635
|
-
image: /* @__PURE__ */ (0,
|
|
1636
|
-
expandMore: /* @__PURE__ */ (0,
|
|
1637
|
-
textColor: /* @__PURE__ */ (0,
|
|
1638
|
-
bgColor: /* @__PURE__ */ (0,
|
|
1639
|
-
/* @__PURE__ */ (0,
|
|
1640
|
-
/* @__PURE__ */ (0,
|
|
1656
|
+
undo: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }),
|
|
1657
|
+
redo: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }),
|
|
1658
|
+
bold: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }),
|
|
1659
|
+
italic: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }),
|
|
1660
|
+
underline: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }),
|
|
1661
|
+
strikethrough: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }),
|
|
1662
|
+
alignLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
|
|
1663
|
+
alignCenter: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
|
|
1664
|
+
alignRight: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
|
|
1665
|
+
bulletList: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }),
|
|
1666
|
+
numberedList: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
|
|
1667
|
+
image: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }),
|
|
1668
|
+
expandMore: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }),
|
|
1669
|
+
textColor: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z" }) }),
|
|
1670
|
+
bgColor: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1671
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" }),
|
|
1672
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { fillOpacity: ".36", d: "M0 20h24v4H0z" })
|
|
1641
1673
|
] }),
|
|
1642
|
-
link: /* @__PURE__ */ (0,
|
|
1643
|
-
chevronRight: /* @__PURE__ */ (0,
|
|
1644
|
-
chevronLeft: /* @__PURE__ */ (0,
|
|
1645
|
-
table: /* @__PURE__ */ (0,
|
|
1646
|
-
htmlFile: /* @__PURE__ */ (0,
|
|
1674
|
+
link: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }),
|
|
1675
|
+
chevronRight: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }),
|
|
1676
|
+
chevronLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
|
|
1677
|
+
table: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM10 17H5v-2h5v2zm0-4H5v-2h5v2zm0-4H5V7h5v2zm9 8h-7v-2h7v2zm0-4h-7v-2h7v2zm0-4h-7V7h7v2z" }) }),
|
|
1678
|
+
htmlFile: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2v5h5l-5-5zm-4 14H7v-1h2v1zm0-2H7v-1h2v1zm-2-2h2v1H7v-1zm4 4h-2v-1h2v1zm0-2h-2v-1h2v1zm0-2h-2v-1h2v1zm6 4h-4v-1h4v1zm0-2h-4v-1h4v1zm0-2h-4v-1h4v1z" }) })
|
|
1647
1679
|
};
|
|
1648
1680
|
var BlockTypeIcons = {
|
|
1649
|
-
paragraph: /* @__PURE__ */ (0,
|
|
1650
|
-
h1: /* @__PURE__ */ (0,
|
|
1651
|
-
h2: /* @__PURE__ */ (0,
|
|
1652
|
-
h3: /* @__PURE__ */ (0,
|
|
1653
|
-
h4: /* @__PURE__ */ (0,
|
|
1654
|
-
h5: /* @__PURE__ */ (0,
|
|
1655
|
-
h6: /* @__PURE__ */ (0,
|
|
1656
|
-
toggleH1: /* @__PURE__ */ (0,
|
|
1657
|
-
/* @__PURE__ */ (0,
|
|
1658
|
-
/* @__PURE__ */ (0,
|
|
1681
|
+
paragraph: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 5h14v2H5zM5 11h14v2H5zM5 17h10v2H5z" }) }),
|
|
1682
|
+
h1: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lumir-block-icon-text", children: "H1" }),
|
|
1683
|
+
h2: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lumir-block-icon-text", children: "H2" }),
|
|
1684
|
+
h3: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lumir-block-icon-text", children: "H3" }),
|
|
1685
|
+
h4: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lumir-block-icon-text", children: "H4" }),
|
|
1686
|
+
h5: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lumir-block-icon-text", children: "H5" }),
|
|
1687
|
+
h6: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "lumir-block-icon-text", children: "H6" }),
|
|
1688
|
+
toggleH1: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lumir-block-icon-toggle", children: [
|
|
1689
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 5v14l11-7z" }) }),
|
|
1690
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "H1" })
|
|
1659
1691
|
] }),
|
|
1660
|
-
toggleH2: /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1662
|
-
/* @__PURE__ */ (0,
|
|
1692
|
+
toggleH2: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lumir-block-icon-toggle", children: [
|
|
1693
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 5v14l11-7z" }) }),
|
|
1694
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "H2" })
|
|
1663
1695
|
] }),
|
|
1664
|
-
toggleH3: /* @__PURE__ */ (0,
|
|
1665
|
-
/* @__PURE__ */ (0,
|
|
1666
|
-
/* @__PURE__ */ (0,
|
|
1696
|
+
toggleH3: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "lumir-block-icon-toggle", children: [
|
|
1697
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 5v14l11-7z" }) }),
|
|
1698
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "H3" })
|
|
1667
1699
|
] }),
|
|
1668
|
-
quote: /* @__PURE__ */ (0,
|
|
1669
|
-
codeBlock: /* @__PURE__ */ (0,
|
|
1670
|
-
toggleList: /* @__PURE__ */ (0,
|
|
1671
|
-
/* @__PURE__ */ (0,
|
|
1672
|
-
/* @__PURE__ */ (0,
|
|
1700
|
+
quote: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }),
|
|
1701
|
+
codeBlock: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }),
|
|
1702
|
+
toggleList: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1703
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 6h10v2H10zM10 11h10v2H10zM10 16h10v2H10z" }),
|
|
1704
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1673
1705
|
"path",
|
|
1674
1706
|
{
|
|
1675
1707
|
d: "M4 8l4 4-4 4",
|
|
@@ -1681,15 +1713,15 @@ var BlockTypeIcons = {
|
|
|
1681
1713
|
}
|
|
1682
1714
|
)
|
|
1683
1715
|
] }),
|
|
1684
|
-
bulletList: /* @__PURE__ */ (0,
|
|
1685
|
-
/* @__PURE__ */ (0,
|
|
1686
|
-
/* @__PURE__ */ (0,
|
|
1687
|
-
/* @__PURE__ */ (0,
|
|
1688
|
-
/* @__PURE__ */ (0,
|
|
1716
|
+
bulletList: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "4", cy: "6", r: "1.5" }),
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "4", cy: "12", r: "1.5" }),
|
|
1719
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "4", cy: "18", r: "1.5" }),
|
|
1720
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 5h12v2H8zM8 11h12v2H8zM8 17h12v2H8z" })
|
|
1689
1721
|
] }),
|
|
1690
|
-
numberedList: /* @__PURE__ */ (0,
|
|
1691
|
-
checkList: /* @__PURE__ */ (0,
|
|
1692
|
-
/* @__PURE__ */ (0,
|
|
1722
|
+
numberedList: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
|
|
1723
|
+
checkList: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1724
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1693
1725
|
"rect",
|
|
1694
1726
|
{
|
|
1695
1727
|
x: "3",
|
|
@@ -1702,7 +1734,7 @@ var BlockTypeIcons = {
|
|
|
1702
1734
|
strokeWidth: "1.5"
|
|
1703
1735
|
}
|
|
1704
1736
|
),
|
|
1705
|
-
/* @__PURE__ */ (0,
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1706
1738
|
"path",
|
|
1707
1739
|
{
|
|
1708
1740
|
d: "M4.5 7l1.5 1.5 3-3",
|
|
@@ -1713,8 +1745,8 @@ var BlockTypeIcons = {
|
|
|
1713
1745
|
strokeLinejoin: "round"
|
|
1714
1746
|
}
|
|
1715
1747
|
),
|
|
1716
|
-
/* @__PURE__ */ (0,
|
|
1717
|
-
/* @__PURE__ */ (0,
|
|
1748
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 6h8v2h-8z" }),
|
|
1749
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1718
1750
|
"rect",
|
|
1719
1751
|
{
|
|
1720
1752
|
x: "3",
|
|
@@ -1727,37 +1759,37 @@ var BlockTypeIcons = {
|
|
|
1727
1759
|
strokeWidth: "1.5"
|
|
1728
1760
|
}
|
|
1729
1761
|
),
|
|
1730
|
-
/* @__PURE__ */ (0,
|
|
1762
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 16h8v2h-8z" })
|
|
1731
1763
|
] })
|
|
1732
1764
|
};
|
|
1733
1765
|
|
|
1734
1766
|
// src/components/FloatingMenu/components/ToolbarDivider.tsx
|
|
1735
|
-
var
|
|
1736
|
-
var ToolbarDivider = () => /* @__PURE__ */ (0,
|
|
1767
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1768
|
+
var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "lumir-toolbar-divider" });
|
|
1737
1769
|
|
|
1738
1770
|
// src/components/FloatingMenu/components/UndoRedoButtons.tsx
|
|
1739
|
-
var
|
|
1740
|
-
var
|
|
1771
|
+
var import_react8 = require("react");
|
|
1772
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1741
1773
|
var UndoRedoButtons = ({ editor }) => {
|
|
1742
|
-
const handleUndo = (0,
|
|
1774
|
+
const handleUndo = (0, import_react8.useCallback)(() => {
|
|
1743
1775
|
try {
|
|
1744
1776
|
editor?.undo?.();
|
|
1745
1777
|
} catch (err) {
|
|
1746
1778
|
console.error("Undo failed:", err);
|
|
1747
1779
|
}
|
|
1748
1780
|
}, [editor]);
|
|
1749
|
-
const handleRedo = (0,
|
|
1781
|
+
const handleRedo = (0, import_react8.useCallback)(() => {
|
|
1750
1782
|
try {
|
|
1751
1783
|
editor?.redo?.();
|
|
1752
1784
|
} catch (err) {
|
|
1753
1785
|
console.error("Redo failed:", err);
|
|
1754
1786
|
}
|
|
1755
1787
|
}, [editor]);
|
|
1756
|
-
const handleMouseDown = (0,
|
|
1788
|
+
const handleMouseDown = (0, import_react8.useCallback)((e) => {
|
|
1757
1789
|
e.preventDefault();
|
|
1758
1790
|
}, []);
|
|
1759
|
-
return /* @__PURE__ */ (0,
|
|
1760
|
-
/* @__PURE__ */ (0,
|
|
1791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
1792
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1761
1793
|
"button",
|
|
1762
1794
|
{
|
|
1763
1795
|
className: "lumir-toolbar-btn",
|
|
@@ -1768,7 +1800,7 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
1768
1800
|
children: Icons.undo
|
|
1769
1801
|
}
|
|
1770
1802
|
),
|
|
1771
|
-
/* @__PURE__ */ (0,
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1772
1804
|
"button",
|
|
1773
1805
|
{
|
|
1774
1806
|
className: "lumir-toolbar-btn",
|
|
@@ -1783,8 +1815,8 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
1783
1815
|
};
|
|
1784
1816
|
|
|
1785
1817
|
// src/components/FloatingMenu/components/TextStyleButton.tsx
|
|
1786
|
-
var
|
|
1787
|
-
var
|
|
1818
|
+
var import_react9 = require("react");
|
|
1819
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1788
1820
|
var iconMap = {
|
|
1789
1821
|
bold: Icons.bold,
|
|
1790
1822
|
italic: Icons.italic,
|
|
@@ -1810,17 +1842,17 @@ var TextStyleButton = ({
|
|
|
1810
1842
|
}
|
|
1811
1843
|
};
|
|
1812
1844
|
const isActive = getIsActive();
|
|
1813
|
-
const handleClick = (0,
|
|
1845
|
+
const handleClick = (0, import_react9.useCallback)(() => {
|
|
1814
1846
|
try {
|
|
1815
1847
|
editor?.toggleStyles?.({ [style]: true });
|
|
1816
1848
|
} catch (err) {
|
|
1817
1849
|
console.error(`Toggle ${style} failed:`, err);
|
|
1818
1850
|
}
|
|
1819
1851
|
}, [editor, style]);
|
|
1820
|
-
const handleMouseDown = (0,
|
|
1852
|
+
const handleMouseDown = (0, import_react9.useCallback)((e) => {
|
|
1821
1853
|
e.preventDefault();
|
|
1822
1854
|
}, []);
|
|
1823
|
-
return /* @__PURE__ */ (0,
|
|
1855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1824
1856
|
"button",
|
|
1825
1857
|
{
|
|
1826
1858
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -1834,7 +1866,7 @@ var TextStyleButton = ({
|
|
|
1834
1866
|
};
|
|
1835
1867
|
|
|
1836
1868
|
// src/components/FloatingMenu/components/AlignButton.tsx
|
|
1837
|
-
var
|
|
1869
|
+
var import_react10 = require("react");
|
|
1838
1870
|
|
|
1839
1871
|
// src/utils/prosemirror-table-utils.ts
|
|
1840
1872
|
function getSelectedCellPositions(editor) {
|
|
@@ -1895,7 +1927,7 @@ function getFirstSelectedCellAttr(editor, attr) {
|
|
|
1895
1927
|
}
|
|
1896
1928
|
|
|
1897
1929
|
// src/components/FloatingMenu/components/AlignButton.tsx
|
|
1898
|
-
var
|
|
1930
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1899
1931
|
var iconMap2 = {
|
|
1900
1932
|
left: Icons.alignLeft,
|
|
1901
1933
|
center: Icons.alignCenter,
|
|
@@ -1922,7 +1954,7 @@ var AlignButton = ({
|
|
|
1922
1954
|
}
|
|
1923
1955
|
};
|
|
1924
1956
|
const isActive = getCurrentAlignment() === alignment;
|
|
1925
|
-
const handleClick = (0,
|
|
1957
|
+
const handleClick = (0, import_react10.useCallback)(() => {
|
|
1926
1958
|
try {
|
|
1927
1959
|
if (setSelectedCellsAttr(editor, "textAlignment", alignment)) {
|
|
1928
1960
|
return;
|
|
@@ -1935,10 +1967,10 @@ var AlignButton = ({
|
|
|
1935
1967
|
console.error(`Set alignment ${alignment} failed:`, err);
|
|
1936
1968
|
}
|
|
1937
1969
|
}, [editor, alignment]);
|
|
1938
|
-
const handleMouseDown = (0,
|
|
1970
|
+
const handleMouseDown = (0, import_react10.useCallback)((e) => {
|
|
1939
1971
|
e.preventDefault();
|
|
1940
1972
|
}, []);
|
|
1941
|
-
return /* @__PURE__ */ (0,
|
|
1973
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1942
1974
|
"button",
|
|
1943
1975
|
{
|
|
1944
1976
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -1952,8 +1984,8 @@ var AlignButton = ({
|
|
|
1952
1984
|
};
|
|
1953
1985
|
|
|
1954
1986
|
// src/components/FloatingMenu/components/ListButton.tsx
|
|
1955
|
-
var
|
|
1956
|
-
var
|
|
1987
|
+
var import_react11 = require("react");
|
|
1988
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1957
1989
|
var iconMap3 = {
|
|
1958
1990
|
bullet: Icons.bulletList,
|
|
1959
1991
|
numbered: Icons.numberedList
|
|
@@ -1973,7 +2005,7 @@ var ListButton = ({ editor, type }) => {
|
|
|
1973
2005
|
}
|
|
1974
2006
|
};
|
|
1975
2007
|
const isActive = getIsActive();
|
|
1976
|
-
const handleClick = (0,
|
|
2008
|
+
const handleClick = (0, import_react11.useCallback)(() => {
|
|
1977
2009
|
try {
|
|
1978
2010
|
const block = editor?.getTextCursorPosition()?.block;
|
|
1979
2011
|
if (block && editor?.updateBlock) {
|
|
@@ -1985,10 +2017,10 @@ var ListButton = ({ editor, type }) => {
|
|
|
1985
2017
|
console.error(`List toggle failed:`, err);
|
|
1986
2018
|
}
|
|
1987
2019
|
}, [editor, type]);
|
|
1988
|
-
const handleMouseDown = (0,
|
|
2020
|
+
const handleMouseDown = (0, import_react11.useCallback)((e) => {
|
|
1989
2021
|
e.preventDefault();
|
|
1990
2022
|
}, []);
|
|
1991
|
-
return /* @__PURE__ */ (0,
|
|
2023
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1992
2024
|
"button",
|
|
1993
2025
|
{
|
|
1994
2026
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -2002,13 +2034,13 @@ var ListButton = ({ editor, type }) => {
|
|
|
2002
2034
|
};
|
|
2003
2035
|
|
|
2004
2036
|
// src/components/FloatingMenu/components/ImageButton.tsx
|
|
2005
|
-
var
|
|
2006
|
-
var
|
|
2037
|
+
var import_react12 = require("react");
|
|
2038
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2007
2039
|
var ImageButton = ({
|
|
2008
2040
|
editor,
|
|
2009
2041
|
onImageUpload
|
|
2010
2042
|
}) => {
|
|
2011
|
-
const handleClick = (0,
|
|
2043
|
+
const handleClick = (0, import_react12.useCallback)(() => {
|
|
2012
2044
|
if (onImageUpload) {
|
|
2013
2045
|
onImageUpload();
|
|
2014
2046
|
} else {
|
|
@@ -2033,10 +2065,10 @@ var ImageButton = ({
|
|
|
2033
2065
|
input.click();
|
|
2034
2066
|
}
|
|
2035
2067
|
}, [editor, onImageUpload]);
|
|
2036
|
-
const handleMouseDown = (0,
|
|
2068
|
+
const handleMouseDown = (0, import_react12.useCallback)((e) => {
|
|
2037
2069
|
e.preventDefault();
|
|
2038
2070
|
}, []);
|
|
2039
|
-
return /* @__PURE__ */ (0,
|
|
2071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2040
2072
|
"button",
|
|
2041
2073
|
{
|
|
2042
2074
|
className: "lumir-toolbar-btn",
|
|
@@ -2050,7 +2082,7 @@ var ImageButton = ({
|
|
|
2050
2082
|
};
|
|
2051
2083
|
|
|
2052
2084
|
// src/components/FloatingMenu/components/ColorButton.tsx
|
|
2053
|
-
var
|
|
2085
|
+
var import_react13 = require("react");
|
|
2054
2086
|
|
|
2055
2087
|
// src/constants/colors.ts
|
|
2056
2088
|
var TEXT_COLORS = [
|
|
@@ -2084,13 +2116,13 @@ var getHexFromColorValue = (value, type) => {
|
|
|
2084
2116
|
};
|
|
2085
2117
|
|
|
2086
2118
|
// src/components/FloatingMenu/components/ColorButton.tsx
|
|
2087
|
-
var
|
|
2119
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2088
2120
|
var ColorButton = ({ editor, type }) => {
|
|
2089
|
-
const [isOpen, setIsOpen] = (0,
|
|
2090
|
-
const [currentColor, setCurrentColor] = (0,
|
|
2091
|
-
const dropdownRef = (0,
|
|
2121
|
+
const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
|
|
2122
|
+
const [currentColor, setCurrentColor] = (0, import_react13.useState)("default");
|
|
2123
|
+
const dropdownRef = (0, import_react13.useRef)(null);
|
|
2092
2124
|
const colors = type === "text" ? TEXT_COLORS : BACKGROUND_COLORS;
|
|
2093
|
-
const getCurrentColor = (0,
|
|
2125
|
+
const getCurrentColor = (0, import_react13.useCallback)(() => {
|
|
2094
2126
|
try {
|
|
2095
2127
|
if (isInTableCell(editor)) {
|
|
2096
2128
|
const attr = type === "text" ? "textColor" : "backgroundColor";
|
|
@@ -2106,13 +2138,13 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2106
2138
|
}
|
|
2107
2139
|
return "default";
|
|
2108
2140
|
}, [editor, type]);
|
|
2109
|
-
(0,
|
|
2141
|
+
(0, import_react13.useEffect)(() => {
|
|
2110
2142
|
if (isOpen) {
|
|
2111
2143
|
const color = getCurrentColor();
|
|
2112
2144
|
setCurrentColor(color);
|
|
2113
2145
|
}
|
|
2114
2146
|
}, [isOpen, getCurrentColor]);
|
|
2115
|
-
(0,
|
|
2147
|
+
(0, import_react13.useEffect)(() => {
|
|
2116
2148
|
const handleClickOutside = (e) => {
|
|
2117
2149
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2118
2150
|
setIsOpen(false);
|
|
@@ -2121,7 +2153,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2121
2153
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2122
2154
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2123
2155
|
}, []);
|
|
2124
|
-
const handleColorSelect = (0,
|
|
2156
|
+
const handleColorSelect = (0, import_react13.useCallback)(
|
|
2125
2157
|
(color) => {
|
|
2126
2158
|
try {
|
|
2127
2159
|
if (!editor) return;
|
|
@@ -2140,11 +2172,11 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2140
2172
|
},
|
|
2141
2173
|
[editor, type]
|
|
2142
2174
|
);
|
|
2143
|
-
const handleMouseDown = (0,
|
|
2175
|
+
const handleMouseDown = (0, import_react13.useCallback)((e) => {
|
|
2144
2176
|
e.preventDefault();
|
|
2145
2177
|
}, []);
|
|
2146
|
-
return /* @__PURE__ */ (0,
|
|
2147
|
-
/* @__PURE__ */ (0,
|
|
2178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2179
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2148
2180
|
"button",
|
|
2149
2181
|
{
|
|
2150
2182
|
className: "lumir-toolbar-btn lumir-color-btn",
|
|
@@ -2154,7 +2186,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2154
2186
|
type: "button",
|
|
2155
2187
|
children: [
|
|
2156
2188
|
type === "text" ? Icons.textColor : Icons.bgColor,
|
|
2157
|
-
/* @__PURE__ */ (0,
|
|
2189
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2158
2190
|
"span",
|
|
2159
2191
|
{
|
|
2160
2192
|
className: "lumir-color-indicator",
|
|
@@ -2166,7 +2198,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2166
2198
|
]
|
|
2167
2199
|
}
|
|
2168
2200
|
),
|
|
2169
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2201
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "lumir-dropdown-menu lumir-color-menu", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "lumir-color-grid", children: colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2170
2202
|
"button",
|
|
2171
2203
|
{
|
|
2172
2204
|
className: cn(
|
|
@@ -2184,9 +2216,101 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2184
2216
|
] });
|
|
2185
2217
|
};
|
|
2186
2218
|
|
|
2219
|
+
// src/components/FloatingMenu/components/FontSizeButton.tsx
|
|
2220
|
+
var import_react14 = require("react");
|
|
2221
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2222
|
+
var DEFAULT_LABEL = "\uAE30\uBCF8";
|
|
2223
|
+
var toLabel = (size) => size.replace(/px$/, "");
|
|
2224
|
+
var FontSizeButton = ({ editor }) => {
|
|
2225
|
+
const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
|
|
2226
|
+
const dropdownRef = (0, import_react14.useRef)(null);
|
|
2227
|
+
const getCurrentSize = () => {
|
|
2228
|
+
try {
|
|
2229
|
+
return editor?.getActiveStyles?.()?.fontSize || "";
|
|
2230
|
+
} catch {
|
|
2231
|
+
return "";
|
|
2232
|
+
}
|
|
2233
|
+
};
|
|
2234
|
+
const currentSize = getCurrentSize();
|
|
2235
|
+
(0, import_react14.useEffect)(() => {
|
|
2236
|
+
const handleClickOutside = (e) => {
|
|
2237
|
+
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2238
|
+
setIsOpen(false);
|
|
2239
|
+
}
|
|
2240
|
+
};
|
|
2241
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2242
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2243
|
+
}, []);
|
|
2244
|
+
const handleSizeSelect = (0, import_react14.useCallback)(
|
|
2245
|
+
(size) => {
|
|
2246
|
+
try {
|
|
2247
|
+
if (!editor) return;
|
|
2248
|
+
if (size === "") {
|
|
2249
|
+
editor.removeStyles?.({ fontSize: "" });
|
|
2250
|
+
} else {
|
|
2251
|
+
editor.addStyles?.({ fontSize: size });
|
|
2252
|
+
}
|
|
2253
|
+
setIsOpen(false);
|
|
2254
|
+
setTimeout(() => editor.focus?.());
|
|
2255
|
+
} catch (err) {
|
|
2256
|
+
console.error("Font size apply failed:", err);
|
|
2257
|
+
}
|
|
2258
|
+
},
|
|
2259
|
+
[editor]
|
|
2260
|
+
);
|
|
2261
|
+
const handleMouseDown = (0, import_react14.useCallback)((e) => {
|
|
2262
|
+
e.preventDefault();
|
|
2263
|
+
}, []);
|
|
2264
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2265
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2266
|
+
"button",
|
|
2267
|
+
{
|
|
2268
|
+
className: "lumir-dropdown-btn lumir-font-size-btn",
|
|
2269
|
+
onClick: () => setIsOpen(!isOpen),
|
|
2270
|
+
onMouseDown: handleMouseDown,
|
|
2271
|
+
title: "\uAE00\uC790 \uD06C\uAE30",
|
|
2272
|
+
type: "button",
|
|
2273
|
+
children: [
|
|
2274
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "lumir-font-size-label", children: currentSize ? toLabel(currentSize) : DEFAULT_LABEL }),
|
|
2275
|
+
Icons.expandMore
|
|
2276
|
+
]
|
|
2277
|
+
}
|
|
2278
|
+
),
|
|
2279
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "lumir-dropdown-menu lumir-font-size-menu", children: [
|
|
2280
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2281
|
+
"button",
|
|
2282
|
+
{
|
|
2283
|
+
className: cn(
|
|
2284
|
+
"lumir-dropdown-item",
|
|
2285
|
+
currentSize === "" && "is-active"
|
|
2286
|
+
),
|
|
2287
|
+
onClick: () => handleSizeSelect(""),
|
|
2288
|
+
onMouseDown: handleMouseDown,
|
|
2289
|
+
type: "button",
|
|
2290
|
+
children: DEFAULT_LABEL
|
|
2291
|
+
}
|
|
2292
|
+
),
|
|
2293
|
+
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2294
|
+
"button",
|
|
2295
|
+
{
|
|
2296
|
+
className: cn(
|
|
2297
|
+
"lumir-dropdown-item",
|
|
2298
|
+
currentSize === size && "is-active"
|
|
2299
|
+
),
|
|
2300
|
+
onClick: () => handleSizeSelect(size),
|
|
2301
|
+
onMouseDown: handleMouseDown,
|
|
2302
|
+
type: "button",
|
|
2303
|
+
children: toLabel(size)
|
|
2304
|
+
},
|
|
2305
|
+
size
|
|
2306
|
+
))
|
|
2307
|
+
] })
|
|
2308
|
+
] });
|
|
2309
|
+
};
|
|
2310
|
+
|
|
2187
2311
|
// src/components/FloatingMenu/components/LinkButton.tsx
|
|
2188
|
-
var
|
|
2189
|
-
var
|
|
2312
|
+
var import_react15 = require("react");
|
|
2313
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2190
2314
|
var isDangerousProtocol = (url) => {
|
|
2191
2315
|
const trimmedUrl = url.trim().toLowerCase();
|
|
2192
2316
|
const dangerousPatterns = [
|
|
@@ -2212,13 +2336,13 @@ var normalizeUrl = (url) => {
|
|
|
2212
2336
|
return `https://${trimmedUrl}`;
|
|
2213
2337
|
};
|
|
2214
2338
|
var LinkButton = ({ editor }) => {
|
|
2215
|
-
const [isOpen, setIsOpen] = (0,
|
|
2216
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
2217
|
-
const [errorMsg, setErrorMsg] = (0,
|
|
2218
|
-
const dropdownRef = (0,
|
|
2219
|
-
const inputRef = (0,
|
|
2220
|
-
const hasSelectionRef = (0,
|
|
2221
|
-
(0,
|
|
2339
|
+
const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
|
|
2340
|
+
const [linkUrl, setLinkUrl] = (0, import_react15.useState)("");
|
|
2341
|
+
const [errorMsg, setErrorMsg] = (0, import_react15.useState)(null);
|
|
2342
|
+
const dropdownRef = (0, import_react15.useRef)(null);
|
|
2343
|
+
const inputRef = (0, import_react15.useRef)(null);
|
|
2344
|
+
const hasSelectionRef = (0, import_react15.useRef)(false);
|
|
2345
|
+
(0, import_react15.useEffect)(() => {
|
|
2222
2346
|
const handleClickOutside = (e) => {
|
|
2223
2347
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2224
2348
|
setIsOpen(false);
|
|
@@ -2229,7 +2353,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2229
2353
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2230
2354
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2231
2355
|
}, []);
|
|
2232
|
-
(0,
|
|
2356
|
+
(0, import_react15.useEffect)(() => {
|
|
2233
2357
|
if (isOpen && inputRef.current) {
|
|
2234
2358
|
try {
|
|
2235
2359
|
const selectedText = editor?.getSelectedText?.() || "";
|
|
@@ -2240,7 +2364,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2240
2364
|
setTimeout(() => inputRef.current?.focus(), 0);
|
|
2241
2365
|
}
|
|
2242
2366
|
}, [isOpen, editor]);
|
|
2243
|
-
const handleSubmit = (0,
|
|
2367
|
+
const handleSubmit = (0, import_react15.useCallback)(
|
|
2244
2368
|
(e) => {
|
|
2245
2369
|
e?.preventDefault();
|
|
2246
2370
|
setErrorMsg(null);
|
|
@@ -2267,15 +2391,15 @@ var LinkButton = ({ editor }) => {
|
|
|
2267
2391
|
},
|
|
2268
2392
|
[editor, linkUrl]
|
|
2269
2393
|
);
|
|
2270
|
-
const handleCancel = (0,
|
|
2394
|
+
const handleCancel = (0, import_react15.useCallback)(() => {
|
|
2271
2395
|
setIsOpen(false);
|
|
2272
2396
|
setLinkUrl("");
|
|
2273
2397
|
setErrorMsg(null);
|
|
2274
2398
|
}, []);
|
|
2275
|
-
const handleMouseDown = (0,
|
|
2399
|
+
const handleMouseDown = (0, import_react15.useCallback)((e) => {
|
|
2276
2400
|
e.preventDefault();
|
|
2277
2401
|
}, []);
|
|
2278
|
-
const handleKeyDown = (0,
|
|
2402
|
+
const handleKeyDown = (0, import_react15.useCallback)(
|
|
2279
2403
|
(e) => {
|
|
2280
2404
|
if (e.key === "Enter") {
|
|
2281
2405
|
handleSubmit();
|
|
@@ -2285,8 +2409,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2285
2409
|
},
|
|
2286
2410
|
[handleSubmit, handleCancel]
|
|
2287
2411
|
);
|
|
2288
|
-
return /* @__PURE__ */ (0,
|
|
2289
|
-
/* @__PURE__ */ (0,
|
|
2412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2413
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2290
2414
|
"button",
|
|
2291
2415
|
{
|
|
2292
2416
|
className: "lumir-toolbar-btn",
|
|
@@ -2297,8 +2421,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2297
2421
|
children: Icons.link
|
|
2298
2422
|
}
|
|
2299
2423
|
),
|
|
2300
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2424
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "lumir-dropdown-menu lumir-link-menu", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit: handleSubmit, className: "lumir-link-form", children: [
|
|
2425
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2302
2426
|
"input",
|
|
2303
2427
|
{
|
|
2304
2428
|
ref: inputRef,
|
|
@@ -2314,7 +2438,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2314
2438
|
onMouseDown: handleMouseDown
|
|
2315
2439
|
}
|
|
2316
2440
|
),
|
|
2317
|
-
errorMsg && /* @__PURE__ */ (0,
|
|
2441
|
+
errorMsg && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2318
2442
|
"div",
|
|
2319
2443
|
{
|
|
2320
2444
|
style: {
|
|
@@ -2326,8 +2450,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2326
2450
|
children: errorMsg
|
|
2327
2451
|
}
|
|
2328
2452
|
),
|
|
2329
|
-
/* @__PURE__ */ (0,
|
|
2330
|
-
/* @__PURE__ */ (0,
|
|
2453
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "lumir-link-actions", children: [
|
|
2454
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2331
2455
|
"button",
|
|
2332
2456
|
{
|
|
2333
2457
|
type: "button",
|
|
@@ -2337,7 +2461,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2337
2461
|
children: "\uCDE8\uC18C"
|
|
2338
2462
|
}
|
|
2339
2463
|
),
|
|
2340
|
-
/* @__PURE__ */ (0,
|
|
2464
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2341
2465
|
"button",
|
|
2342
2466
|
{
|
|
2343
2467
|
type: "submit",
|
|
@@ -2353,10 +2477,10 @@ var LinkButton = ({ editor }) => {
|
|
|
2353
2477
|
};
|
|
2354
2478
|
|
|
2355
2479
|
// src/components/FloatingMenu/components/TableButton.tsx
|
|
2356
|
-
var
|
|
2357
|
-
var
|
|
2480
|
+
var import_react16 = require("react");
|
|
2481
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2358
2482
|
var TableButton = ({ editor }) => {
|
|
2359
|
-
const handleClick = (0,
|
|
2483
|
+
const handleClick = (0, import_react16.useCallback)(() => {
|
|
2360
2484
|
try {
|
|
2361
2485
|
const block = editor?.getTextCursorPosition()?.block;
|
|
2362
2486
|
if (!block || !editor?.insertBlocks) return;
|
|
@@ -2378,10 +2502,10 @@ var TableButton = ({ editor }) => {
|
|
|
2378
2502
|
console.error("Table insert failed:", err);
|
|
2379
2503
|
}
|
|
2380
2504
|
}, [editor]);
|
|
2381
|
-
const handleMouseDown = (0,
|
|
2505
|
+
const handleMouseDown = (0, import_react16.useCallback)((e) => {
|
|
2382
2506
|
e.preventDefault();
|
|
2383
2507
|
}, []);
|
|
2384
|
-
return /* @__PURE__ */ (0,
|
|
2508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2385
2509
|
"button",
|
|
2386
2510
|
{
|
|
2387
2511
|
className: "lumir-toolbar-btn",
|
|
@@ -2395,13 +2519,13 @@ var TableButton = ({ editor }) => {
|
|
|
2395
2519
|
};
|
|
2396
2520
|
|
|
2397
2521
|
// src/components/FloatingMenu/components/HTMLImportButton.tsx
|
|
2398
|
-
var
|
|
2399
|
-
var
|
|
2522
|
+
var import_react17 = require("react");
|
|
2523
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2400
2524
|
var HTMLImportButton = ({
|
|
2401
2525
|
editor
|
|
2402
2526
|
}) => {
|
|
2403
|
-
const fileInputRef = (0,
|
|
2404
|
-
const handleFileUpload = (0,
|
|
2527
|
+
const fileInputRef = (0, import_react17.useRef)(null);
|
|
2528
|
+
const handleFileUpload = (0, import_react17.useCallback)(
|
|
2405
2529
|
(e) => {
|
|
2406
2530
|
const file = e.target.files?.[0];
|
|
2407
2531
|
if (!file) return;
|
|
@@ -2437,14 +2561,14 @@ var HTMLImportButton = ({
|
|
|
2437
2561
|
},
|
|
2438
2562
|
[editor]
|
|
2439
2563
|
);
|
|
2440
|
-
const handleClick = (0,
|
|
2564
|
+
const handleClick = (0, import_react17.useCallback)(() => {
|
|
2441
2565
|
fileInputRef.current?.click();
|
|
2442
2566
|
}, []);
|
|
2443
|
-
const handleMouseDown = (0,
|
|
2567
|
+
const handleMouseDown = (0, import_react17.useCallback)((e) => {
|
|
2444
2568
|
e.preventDefault();
|
|
2445
2569
|
}, []);
|
|
2446
|
-
return /* @__PURE__ */ (0,
|
|
2447
|
-
/* @__PURE__ */ (0,
|
|
2570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2448
2572
|
"input",
|
|
2449
2573
|
{
|
|
2450
2574
|
ref: fileInputRef,
|
|
@@ -2454,7 +2578,7 @@ var HTMLImportButton = ({
|
|
|
2454
2578
|
style: { display: "none" }
|
|
2455
2579
|
}
|
|
2456
2580
|
),
|
|
2457
|
-
/* @__PURE__ */ (0,
|
|
2581
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2458
2582
|
"button",
|
|
2459
2583
|
{
|
|
2460
2584
|
className: "lumir-toolbar-btn",
|
|
@@ -2469,8 +2593,8 @@ var HTMLImportButton = ({
|
|
|
2469
2593
|
};
|
|
2470
2594
|
|
|
2471
2595
|
// src/components/FloatingMenu/components/BlockTypeSelect.tsx
|
|
2472
|
-
var
|
|
2473
|
-
var
|
|
2596
|
+
var import_react18 = require("react");
|
|
2597
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2474
2598
|
var blockTypeCategories = [
|
|
2475
2599
|
{
|
|
2476
2600
|
category: "Headings",
|
|
@@ -2500,8 +2624,8 @@ var blockTypes = blockTypeCategories.flatMap(
|
|
|
2500
2624
|
(cat) => cat.items
|
|
2501
2625
|
);
|
|
2502
2626
|
var BlockTypeSelect = ({ editor }) => {
|
|
2503
|
-
const [isOpen, setIsOpen] = (0,
|
|
2504
|
-
const dropdownRef = (0,
|
|
2627
|
+
const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
|
|
2628
|
+
const dropdownRef = (0, import_react18.useRef)(null);
|
|
2505
2629
|
const getCurrentBlock = () => {
|
|
2506
2630
|
try {
|
|
2507
2631
|
return editor?.getTextCursorPosition()?.block;
|
|
@@ -2513,7 +2637,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2513
2637
|
const currentType = currentBlock?.type || "paragraph";
|
|
2514
2638
|
const currentLevel = currentBlock?.props?.level;
|
|
2515
2639
|
const isCurrentToggle = currentType === "heading" && currentBlock?.props?.isToggleable === true;
|
|
2516
|
-
(0,
|
|
2640
|
+
(0, import_react18.useEffect)(() => {
|
|
2517
2641
|
const handleClickOutside = (e) => {
|
|
2518
2642
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2519
2643
|
setIsOpen(false);
|
|
@@ -2542,7 +2666,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2542
2666
|
console.error("Block type change failed:", err);
|
|
2543
2667
|
}
|
|
2544
2668
|
};
|
|
2545
|
-
const handleMouseDown = (0,
|
|
2669
|
+
const handleMouseDown = (0, import_react18.useCallback)((e) => {
|
|
2546
2670
|
e.preventDefault();
|
|
2547
2671
|
}, []);
|
|
2548
2672
|
const getCurrentLabel = () => {
|
|
@@ -2573,8 +2697,8 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2573
2697
|
}
|
|
2574
2698
|
return currentType === bt.type;
|
|
2575
2699
|
};
|
|
2576
|
-
return /* @__PURE__ */ (0,
|
|
2577
|
-
/* @__PURE__ */ (0,
|
|
2700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2701
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2578
2702
|
"button",
|
|
2579
2703
|
{
|
|
2580
2704
|
className: "lumir-dropdown-btn lumir-block-type-btn",
|
|
@@ -2582,15 +2706,15 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2582
2706
|
onMouseDown: handleMouseDown,
|
|
2583
2707
|
type: "button",
|
|
2584
2708
|
children: [
|
|
2585
|
-
/* @__PURE__ */ (0,
|
|
2586
|
-
/* @__PURE__ */ (0,
|
|
2709
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lumir-block-icon", children: BlockTypeIcons[getCurrentIcon()] }),
|
|
2710
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lumir-block-label", children: getCurrentLabel() }),
|
|
2587
2711
|
Icons.expandMore
|
|
2588
2712
|
]
|
|
2589
2713
|
}
|
|
2590
2714
|
),
|
|
2591
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2592
|
-
/* @__PURE__ */ (0,
|
|
2593
|
-
category.items.map((bt) => /* @__PURE__ */ (0,
|
|
2715
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "lumir-dropdown-menu lumir-block-menu", children: blockTypeCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-block-category", children: [
|
|
2716
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "lumir-block-category-title", children: category.category }),
|
|
2717
|
+
category.items.map((bt) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2594
2718
|
"button",
|
|
2595
2719
|
{
|
|
2596
2720
|
className: cn(
|
|
@@ -2600,8 +2724,8 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2600
2724
|
onClick: () => handleTypeChange(bt.type, bt.level, bt.isToggle),
|
|
2601
2725
|
onMouseDown: handleMouseDown,
|
|
2602
2726
|
children: [
|
|
2603
|
-
/* @__PURE__ */ (0,
|
|
2604
|
-
/* @__PURE__ */ (0,
|
|
2727
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lumir-block-icon", children: BlockTypeIcons[bt.icon] }),
|
|
2728
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lumir-block-item-title", children: bt.label })
|
|
2605
2729
|
]
|
|
2606
2730
|
},
|
|
2607
2731
|
bt.icon
|
|
@@ -2611,7 +2735,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2611
2735
|
};
|
|
2612
2736
|
|
|
2613
2737
|
// src/components/FloatingMenu/index.tsx
|
|
2614
|
-
var
|
|
2738
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2615
2739
|
var COMPACT_BREAKPOINT = 700;
|
|
2616
2740
|
var MINIMIZED_BREAKPOINT = 400;
|
|
2617
2741
|
var FloatingMenu = ({
|
|
@@ -2620,12 +2744,12 @@ var FloatingMenu = ({
|
|
|
2620
2744
|
className,
|
|
2621
2745
|
onImageUpload
|
|
2622
2746
|
}) => {
|
|
2623
|
-
const wrapperRef = (0,
|
|
2624
|
-
const [isCompact, setIsCompact] = (0,
|
|
2625
|
-
const [isMinimizable, setIsMinimizable] = (0,
|
|
2626
|
-
const [isMinimized, setIsMinimized] = (0,
|
|
2627
|
-
const [, setSelectionTick] = (0,
|
|
2628
|
-
(0,
|
|
2747
|
+
const wrapperRef = (0, import_react19.useRef)(null);
|
|
2748
|
+
const [isCompact, setIsCompact] = (0, import_react19.useState)(false);
|
|
2749
|
+
const [isMinimizable, setIsMinimizable] = (0, import_react19.useState)(false);
|
|
2750
|
+
const [isMinimized, setIsMinimized] = (0, import_react19.useState)(false);
|
|
2751
|
+
const [, setSelectionTick] = (0, import_react19.useState)(0);
|
|
2752
|
+
(0, import_react19.useEffect)(() => {
|
|
2629
2753
|
if (!editor) return;
|
|
2630
2754
|
let debounceTimer = null;
|
|
2631
2755
|
const DEBOUNCE_DELAY = 150;
|
|
@@ -2649,7 +2773,7 @@ var FloatingMenu = ({
|
|
|
2649
2773
|
unsubscribeContent?.();
|
|
2650
2774
|
};
|
|
2651
2775
|
}, [editor]);
|
|
2652
|
-
(0,
|
|
2776
|
+
(0, import_react19.useEffect)(() => {
|
|
2653
2777
|
const checkWidth = () => {
|
|
2654
2778
|
if (wrapperRef.current) {
|
|
2655
2779
|
const width = wrapperRef.current.offsetWidth;
|
|
@@ -2664,8 +2788,8 @@ var FloatingMenu = ({
|
|
|
2664
2788
|
}
|
|
2665
2789
|
return () => resizeObserver.disconnect();
|
|
2666
2790
|
}, []);
|
|
2667
|
-
const MinimizedLayout = () => /* @__PURE__ */ (0,
|
|
2668
|
-
/* @__PURE__ */ (0,
|
|
2791
|
+
const MinimizedLayout = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
2792
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2669
2793
|
"button",
|
|
2670
2794
|
{
|
|
2671
2795
|
className: "lumir-toolbar-button lumir-toggle-button",
|
|
@@ -2676,117 +2800,120 @@ var FloatingMenu = ({
|
|
|
2676
2800
|
children: isMinimized ? Icons.chevronRight : Icons.chevronLeft
|
|
2677
2801
|
}
|
|
2678
2802
|
),
|
|
2679
|
-
!isMinimized && /* @__PURE__ */ (0,
|
|
2680
|
-
/* @__PURE__ */ (0,
|
|
2681
|
-
/* @__PURE__ */ (0,
|
|
2682
|
-
/* @__PURE__ */ (0,
|
|
2683
|
-
/* @__PURE__ */ (0,
|
|
2684
|
-
/* @__PURE__ */ (0,
|
|
2685
|
-
/* @__PURE__ */ (0,
|
|
2686
|
-
/* @__PURE__ */ (0,
|
|
2687
|
-
/* @__PURE__ */ (0,
|
|
2688
|
-
/* @__PURE__ */ (0,
|
|
2689
|
-
/* @__PURE__ */ (0,
|
|
2803
|
+
!isMinimized && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
2804
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2805
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UndoRedoButtons, { editor }),
|
|
2806
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2807
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockTypeSelect, { editor }) }),
|
|
2808
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2809
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2810
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "bold" }),
|
|
2811
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "italic" }),
|
|
2812
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "underline" }),
|
|
2813
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "strike" })
|
|
2690
2814
|
] }),
|
|
2691
|
-
/* @__PURE__ */ (0,
|
|
2692
|
-
/* @__PURE__ */ (0,
|
|
2693
|
-
/* @__PURE__ */ (0,
|
|
2694
|
-
/* @__PURE__ */ (0,
|
|
2695
|
-
/* @__PURE__ */ (0,
|
|
2815
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2816
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2817
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "left" }),
|
|
2818
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "center" }),
|
|
2819
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "right" })
|
|
2696
2820
|
] }),
|
|
2697
|
-
/* @__PURE__ */ (0,
|
|
2698
|
-
/* @__PURE__ */ (0,
|
|
2699
|
-
/* @__PURE__ */ (0,
|
|
2700
|
-
/* @__PURE__ */ (0,
|
|
2821
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2822
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2823
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListButton, { editor, type: "bullet" }),
|
|
2824
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListButton, { editor, type: "numbered" })
|
|
2701
2825
|
] }),
|
|
2702
|
-
/* @__PURE__ */ (0,
|
|
2703
|
-
/* @__PURE__ */ (0,
|
|
2704
|
-
/* @__PURE__ */ (0,
|
|
2705
|
-
/* @__PURE__ */ (0,
|
|
2826
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2827
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2828
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FontSizeButton, { editor }),
|
|
2829
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorButton, { editor, type: "text" }),
|
|
2830
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorButton, { editor, type: "background" })
|
|
2706
2831
|
] }),
|
|
2707
|
-
/* @__PURE__ */ (0,
|
|
2708
|
-
/* @__PURE__ */ (0,
|
|
2709
|
-
/* @__PURE__ */ (0,
|
|
2710
|
-
/* @__PURE__ */ (0,
|
|
2711
|
-
/* @__PURE__ */ (0,
|
|
2712
|
-
/* @__PURE__ */ (0,
|
|
2832
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2833
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2834
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageButton, { editor, onImageUpload }),
|
|
2835
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkButton, { editor }),
|
|
2836
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableButton, { editor }),
|
|
2837
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HTMLImportButton, { editor })
|
|
2713
2838
|
] })
|
|
2714
2839
|
] })
|
|
2715
2840
|
] });
|
|
2716
|
-
const SingleRowLayout = () => /* @__PURE__ */ (0,
|
|
2717
|
-
/* @__PURE__ */ (0,
|
|
2718
|
-
/* @__PURE__ */ (0,
|
|
2719
|
-
/* @__PURE__ */ (0,
|
|
2720
|
-
/* @__PURE__ */ (0,
|
|
2721
|
-
/* @__PURE__ */ (0,
|
|
2722
|
-
/* @__PURE__ */ (0,
|
|
2723
|
-
/* @__PURE__ */ (0,
|
|
2724
|
-
/* @__PURE__ */ (0,
|
|
2725
|
-
/* @__PURE__ */ (0,
|
|
2841
|
+
const SingleRowLayout = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
2842
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UndoRedoButtons, { editor }),
|
|
2843
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2844
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockTypeSelect, { editor }) }),
|
|
2845
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2846
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2847
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "bold" }),
|
|
2848
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "italic" }),
|
|
2849
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "underline" }),
|
|
2850
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "strike" })
|
|
2726
2851
|
] }),
|
|
2727
|
-
/* @__PURE__ */ (0,
|
|
2728
|
-
/* @__PURE__ */ (0,
|
|
2729
|
-
/* @__PURE__ */ (0,
|
|
2730
|
-
/* @__PURE__ */ (0,
|
|
2731
|
-
/* @__PURE__ */ (0,
|
|
2852
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2853
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2854
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "left" }),
|
|
2855
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "center" }),
|
|
2856
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "right" })
|
|
2732
2857
|
] }),
|
|
2733
|
-
/* @__PURE__ */ (0,
|
|
2734
|
-
/* @__PURE__ */ (0,
|
|
2735
|
-
/* @__PURE__ */ (0,
|
|
2736
|
-
/* @__PURE__ */ (0,
|
|
2858
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2859
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2860
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListButton, { editor, type: "bullet" }),
|
|
2861
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListButton, { editor, type: "numbered" })
|
|
2737
2862
|
] }),
|
|
2738
|
-
/* @__PURE__ */ (0,
|
|
2739
|
-
/* @__PURE__ */ (0,
|
|
2740
|
-
/* @__PURE__ */ (0,
|
|
2741
|
-
/* @__PURE__ */ (0,
|
|
2863
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2864
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2865
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FontSizeButton, { editor }),
|
|
2866
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorButton, { editor, type: "text" }),
|
|
2867
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorButton, { editor, type: "background" })
|
|
2742
2868
|
] }),
|
|
2743
|
-
/* @__PURE__ */ (0,
|
|
2744
|
-
/* @__PURE__ */ (0,
|
|
2745
|
-
/* @__PURE__ */ (0,
|
|
2746
|
-
/* @__PURE__ */ (0,
|
|
2747
|
-
/* @__PURE__ */ (0,
|
|
2748
|
-
/* @__PURE__ */ (0,
|
|
2869
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2870
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2871
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageButton, { editor, onImageUpload }),
|
|
2872
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkButton, { editor }),
|
|
2873
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableButton, { editor }),
|
|
2874
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HTMLImportButton, { editor })
|
|
2749
2875
|
] })
|
|
2750
2876
|
] });
|
|
2751
|
-
const TwoRowLayout = () => /* @__PURE__ */ (0,
|
|
2752
|
-
/* @__PURE__ */ (0,
|
|
2753
|
-
/* @__PURE__ */ (0,
|
|
2754
|
-
/* @__PURE__ */ (0,
|
|
2755
|
-
/* @__PURE__ */ (0,
|
|
2756
|
-
/* @__PURE__ */ (0,
|
|
2757
|
-
/* @__PURE__ */ (0,
|
|
2758
|
-
/* @__PURE__ */ (0,
|
|
2759
|
-
/* @__PURE__ */ (0,
|
|
2877
|
+
const TwoRowLayout = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
2878
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-row", children: [
|
|
2879
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UndoRedoButtons, { editor }),
|
|
2880
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2881
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2882
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "bold" }),
|
|
2883
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "italic" }),
|
|
2884
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "underline" }),
|
|
2885
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextStyleButton, { editor, style: "strike" })
|
|
2760
2886
|
] }),
|
|
2761
|
-
/* @__PURE__ */ (0,
|
|
2762
|
-
/* @__PURE__ */ (0,
|
|
2763
|
-
/* @__PURE__ */ (0,
|
|
2764
|
-
/* @__PURE__ */ (0,
|
|
2765
|
-
/* @__PURE__ */ (0,
|
|
2887
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2888
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2889
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "left" }),
|
|
2890
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "center" }),
|
|
2891
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlignButton, { editor, alignment: "right" })
|
|
2766
2892
|
] }),
|
|
2767
|
-
/* @__PURE__ */ (0,
|
|
2768
|
-
/* @__PURE__ */ (0,
|
|
2769
|
-
/* @__PURE__ */ (0,
|
|
2770
|
-
/* @__PURE__ */ (0,
|
|
2893
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2894
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2895
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListButton, { editor, type: "bullet" }),
|
|
2896
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListButton, { editor, type: "numbered" })
|
|
2771
2897
|
] })
|
|
2772
2898
|
] }),
|
|
2773
|
-
/* @__PURE__ */ (0,
|
|
2774
|
-
/* @__PURE__ */ (0,
|
|
2775
|
-
/* @__PURE__ */ (0,
|
|
2776
|
-
/* @__PURE__ */ (0,
|
|
2777
|
-
/* @__PURE__ */ (0,
|
|
2778
|
-
/* @__PURE__ */ (0,
|
|
2899
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-row", children: [
|
|
2900
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockTypeSelect, { editor }) }),
|
|
2901
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2902
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2903
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FontSizeButton, { editor }),
|
|
2904
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorButton, { editor, type: "text" }),
|
|
2905
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColorButton, { editor, type: "background" })
|
|
2779
2906
|
] }),
|
|
2780
|
-
/* @__PURE__ */ (0,
|
|
2781
|
-
/* @__PURE__ */ (0,
|
|
2782
|
-
/* @__PURE__ */ (0,
|
|
2783
|
-
/* @__PURE__ */ (0,
|
|
2784
|
-
/* @__PURE__ */ (0,
|
|
2785
|
-
/* @__PURE__ */ (0,
|
|
2907
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolbarDivider, {}),
|
|
2908
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2909
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageButton, { editor, onImageUpload }),
|
|
2910
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkButton, { editor }),
|
|
2911
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableButton, { editor }),
|
|
2912
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HTMLImportButton, { editor })
|
|
2786
2913
|
] })
|
|
2787
2914
|
] })
|
|
2788
2915
|
] });
|
|
2789
|
-
return /* @__PURE__ */ (0,
|
|
2916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2790
2917
|
"div",
|
|
2791
2918
|
{
|
|
2792
2919
|
ref: wrapperRef,
|
|
@@ -2796,7 +2923,7 @@ var FloatingMenu = ({
|
|
|
2796
2923
|
className
|
|
2797
2924
|
),
|
|
2798
2925
|
"data-position": position,
|
|
2799
|
-
children: /* @__PURE__ */ (0,
|
|
2926
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2800
2927
|
"div",
|
|
2801
2928
|
{
|
|
2802
2929
|
className: cn(
|
|
@@ -2805,7 +2932,7 @@ var FloatingMenu = ({
|
|
|
2805
2932
|
isMinimizable && "is-minimizable",
|
|
2806
2933
|
isMinimized && "is-minimized"
|
|
2807
2934
|
),
|
|
2808
|
-
children: isMinimizable ? /* @__PURE__ */ (0,
|
|
2935
|
+
children: isMinimizable ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MinimizedLayout, {}) : isCompact ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TwoRowLayout, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SingleRowLayout, {})
|
|
2809
2936
|
}
|
|
2810
2937
|
)
|
|
2811
2938
|
}
|
|
@@ -2937,18 +3064,18 @@ var VerticalAlignmentExtension = import_core2.Extension.create({
|
|
|
2937
3064
|
});
|
|
2938
3065
|
|
|
2939
3066
|
// src/components/CustomFormattingToolbar.tsx
|
|
2940
|
-
var
|
|
3067
|
+
var import_react28 = require("@blocknote/react");
|
|
2941
3068
|
|
|
2942
3069
|
// src/components/TextAlignButtonWithVA.tsx
|
|
2943
3070
|
var import_core3 = require("@blocknote/core");
|
|
2944
|
-
var
|
|
2945
|
-
var
|
|
2946
|
-
var
|
|
3071
|
+
var import_react20 = require("react");
|
|
3072
|
+
var import_react21 = require("@blocknote/react");
|
|
3073
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2947
3074
|
var icons = {
|
|
2948
|
-
left: /* @__PURE__ */ (0,
|
|
2949
|
-
center: /* @__PURE__ */ (0,
|
|
2950
|
-
right: /* @__PURE__ */ (0,
|
|
2951
|
-
justify: /* @__PURE__ */ (0,
|
|
3075
|
+
left: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
|
|
3076
|
+
center: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
|
|
3077
|
+
right: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
|
|
3078
|
+
justify: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }) })
|
|
2952
3079
|
};
|
|
2953
3080
|
var tooltipMap = {
|
|
2954
3081
|
left: "\uC67C\uCABD \uC815\uB82C",
|
|
@@ -2957,10 +3084,10 @@ var tooltipMap = {
|
|
|
2957
3084
|
justify: "\uC591\uCABD \uC815\uB82C"
|
|
2958
3085
|
};
|
|
2959
3086
|
var TextAlignButtonWithVA = (props) => {
|
|
2960
|
-
const Components = (0,
|
|
2961
|
-
const editor = (0,
|
|
2962
|
-
const selectedBlocks = (0,
|
|
2963
|
-
const textAlignment = (0,
|
|
3087
|
+
const Components = (0, import_react21.useComponentsContext)();
|
|
3088
|
+
const editor = (0, import_react21.useBlockNoteEditor)();
|
|
3089
|
+
const selectedBlocks = (0, import_react21.useSelectedBlocks)(editor);
|
|
3090
|
+
const textAlignment = (0, import_react20.useMemo)(() => {
|
|
2964
3091
|
const block = selectedBlocks[0];
|
|
2965
3092
|
if ((0, import_core3.checkBlockHasDefaultProp)("textAlignment", block, editor)) {
|
|
2966
3093
|
return block.props.textAlignment;
|
|
@@ -2982,7 +3109,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
2982
3109
|
}
|
|
2983
3110
|
return;
|
|
2984
3111
|
}, [editor, selectedBlocks]);
|
|
2985
|
-
const setTextAlignment = (0,
|
|
3112
|
+
const setTextAlignment = (0, import_react20.useCallback)(
|
|
2986
3113
|
(newAlignment) => {
|
|
2987
3114
|
editor.focus();
|
|
2988
3115
|
for (const block of selectedBlocks) {
|
|
@@ -3012,7 +3139,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
3012
3139
|
},
|
|
3013
3140
|
[editor, selectedBlocks]
|
|
3014
3141
|
);
|
|
3015
|
-
const show = (0,
|
|
3142
|
+
const show = (0, import_react20.useMemo)(() => {
|
|
3016
3143
|
return !!selectedBlocks.find(
|
|
3017
3144
|
(block) => "textAlignment" in block.props || block.type === "table" && block.children
|
|
3018
3145
|
);
|
|
@@ -3020,7 +3147,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
3020
3147
|
if (!show || !editor.isEditable) {
|
|
3021
3148
|
return null;
|
|
3022
3149
|
}
|
|
3023
|
-
return /* @__PURE__ */ (0,
|
|
3150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3024
3151
|
Components.FormattingToolbar.Button,
|
|
3025
3152
|
{
|
|
3026
3153
|
className: "bn-button",
|
|
@@ -3035,21 +3162,21 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
3035
3162
|
};
|
|
3036
3163
|
|
|
3037
3164
|
// src/components/VerticalAlignButton.tsx
|
|
3038
|
-
var
|
|
3039
|
-
var
|
|
3040
|
-
var
|
|
3165
|
+
var import_react22 = require("react");
|
|
3166
|
+
var import_react23 = require("@blocknote/react");
|
|
3167
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3041
3168
|
var icons2 = {
|
|
3042
|
-
top: /* @__PURE__ */ (0,
|
|
3043
|
-
/* @__PURE__ */ (0,
|
|
3044
|
-
/* @__PURE__ */ (0,
|
|
3169
|
+
top: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
3170
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
3171
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "5", y1: "5", x2: "11", y2: "5" })
|
|
3045
3172
|
] }),
|
|
3046
|
-
middle: /* @__PURE__ */ (0,
|
|
3047
|
-
/* @__PURE__ */ (0,
|
|
3048
|
-
/* @__PURE__ */ (0,
|
|
3173
|
+
middle: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
3174
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
3175
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "5", y1: "8", x2: "11", y2: "8" })
|
|
3049
3176
|
] }),
|
|
3050
|
-
bottom: /* @__PURE__ */ (0,
|
|
3051
|
-
/* @__PURE__ */ (0,
|
|
3052
|
-
/* @__PURE__ */ (0,
|
|
3177
|
+
bottom: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
3178
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
3179
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "5", y1: "11", x2: "11", y2: "11" })
|
|
3053
3180
|
] })
|
|
3054
3181
|
};
|
|
3055
3182
|
var tooltips = {
|
|
@@ -3071,13 +3198,13 @@ function getCurrentVerticalAlignment(editor) {
|
|
|
3071
3198
|
return alignments.every((a) => a === first) ? first : void 0;
|
|
3072
3199
|
}
|
|
3073
3200
|
var VerticalAlignButton = (props) => {
|
|
3074
|
-
const Components = (0,
|
|
3075
|
-
const editor = (0,
|
|
3076
|
-
const selectedBlocks = (0,
|
|
3077
|
-
const currentAlignment = (0,
|
|
3201
|
+
const Components = (0, import_react23.useComponentsContext)();
|
|
3202
|
+
const editor = (0, import_react23.useBlockNoteEditor)();
|
|
3203
|
+
const selectedBlocks = (0, import_react23.useSelectedBlocks)(editor);
|
|
3204
|
+
const currentAlignment = (0, import_react22.useMemo)(() => {
|
|
3078
3205
|
return getCurrentVerticalAlignment(editor);
|
|
3079
3206
|
}, [editor, selectedBlocks]);
|
|
3080
|
-
const setVerticalAlignment = (0,
|
|
3207
|
+
const setVerticalAlignment = (0, import_react22.useCallback)(
|
|
3081
3208
|
(alignment) => {
|
|
3082
3209
|
const tiptap = editor._tiptapEditor;
|
|
3083
3210
|
if (!tiptap) return;
|
|
@@ -3099,13 +3226,13 @@ var VerticalAlignButton = (props) => {
|
|
|
3099
3226
|
},
|
|
3100
3227
|
[editor]
|
|
3101
3228
|
);
|
|
3102
|
-
const isInTable = (0,
|
|
3229
|
+
const isInTable = (0, import_react22.useMemo)(() => {
|
|
3103
3230
|
return selectedBlocks.some((block) => block.type === "table");
|
|
3104
3231
|
}, [selectedBlocks]);
|
|
3105
3232
|
if (!isInTable || !editor.isEditable) {
|
|
3106
3233
|
return null;
|
|
3107
3234
|
}
|
|
3108
|
-
return /* @__PURE__ */ (0,
|
|
3235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3109
3236
|
Components.FormattingToolbar.Button,
|
|
3110
3237
|
{
|
|
3111
3238
|
className: "bn-button",
|
|
@@ -3119,11 +3246,107 @@ var VerticalAlignButton = (props) => {
|
|
|
3119
3246
|
);
|
|
3120
3247
|
};
|
|
3121
3248
|
|
|
3249
|
+
// src/components/FontSizeButton.tsx
|
|
3250
|
+
var import_react24 = require("@blocknote/react");
|
|
3251
|
+
var import_react25 = require("react");
|
|
3252
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3253
|
+
var DEFAULT_LABEL2 = "\uAE30\uBCF8";
|
|
3254
|
+
var toLabel2 = (size) => size.replace(/px$/, "");
|
|
3255
|
+
function FontSizeIcon({ size }) {
|
|
3256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3257
|
+
"span",
|
|
3258
|
+
{
|
|
3259
|
+
style: {
|
|
3260
|
+
pointerEvents: "none",
|
|
3261
|
+
fontSize: "12px",
|
|
3262
|
+
fontWeight: 600,
|
|
3263
|
+
lineHeight: "20px",
|
|
3264
|
+
whiteSpace: "nowrap"
|
|
3265
|
+
},
|
|
3266
|
+
children: size ? toLabel2(size) : "\uAC00A"
|
|
3267
|
+
}
|
|
3268
|
+
);
|
|
3269
|
+
}
|
|
3270
|
+
function FontSizeButton2() {
|
|
3271
|
+
const Components = (0, import_react24.useComponentsContext)();
|
|
3272
|
+
const editor = (0, import_react24.useBlockNoteEditor)();
|
|
3273
|
+
const ed = editor;
|
|
3274
|
+
const styleSchema = editor.schema.styleSchema;
|
|
3275
|
+
const fontSizeInSchema = styleSchema.fontSize?.type === "fontSize" && styleSchema.fontSize?.propSchema === "string";
|
|
3276
|
+
const selectedBlocks = (0, import_react24.useSelectedBlocks)(editor);
|
|
3277
|
+
const [currentSize, setCurrentSize] = (0, import_react25.useState)(
|
|
3278
|
+
fontSizeInSchema ? ed.getActiveStyles().fontSize || "" : ""
|
|
3279
|
+
);
|
|
3280
|
+
(0, import_react24.useEditorContentOrSelectionChange)(() => {
|
|
3281
|
+
if (fontSizeInSchema) {
|
|
3282
|
+
setCurrentSize(ed.getActiveStyles().fontSize || "");
|
|
3283
|
+
}
|
|
3284
|
+
}, editor);
|
|
3285
|
+
const setFontSize = (0, import_react25.useCallback)(
|
|
3286
|
+
(size) => {
|
|
3287
|
+
size === "" ? ed.removeStyles({ fontSize: "" }) : ed.addStyles({ fontSize: size });
|
|
3288
|
+
setTimeout(() => editor.focus());
|
|
3289
|
+
},
|
|
3290
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3291
|
+
[editor]
|
|
3292
|
+
);
|
|
3293
|
+
const show = (0, import_react25.useMemo)(() => {
|
|
3294
|
+
if (!fontSizeInSchema) {
|
|
3295
|
+
return false;
|
|
3296
|
+
}
|
|
3297
|
+
for (const block of selectedBlocks) {
|
|
3298
|
+
if (block.content !== void 0) {
|
|
3299
|
+
return true;
|
|
3300
|
+
}
|
|
3301
|
+
}
|
|
3302
|
+
return false;
|
|
3303
|
+
}, [fontSizeInSchema, selectedBlocks]);
|
|
3304
|
+
if (!show || !editor.isEditable) {
|
|
3305
|
+
return null;
|
|
3306
|
+
}
|
|
3307
|
+
const tooltip = "\uAE00\uC790 \uD06C\uAE30";
|
|
3308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Components.Generic.Menu.Root, { children: [
|
|
3309
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3310
|
+
Components.FormattingToolbar.Button,
|
|
3311
|
+
{
|
|
3312
|
+
className: "bn-button",
|
|
3313
|
+
"data-test": "font-size",
|
|
3314
|
+
label: tooltip,
|
|
3315
|
+
mainTooltip: tooltip,
|
|
3316
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FontSizeIcon, { size: currentSize })
|
|
3317
|
+
}
|
|
3318
|
+
) }),
|
|
3319
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Components.Generic.Menu.Dropdown, { className: "bn-menu-dropdown", children: [
|
|
3320
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Components.Generic.Menu.Label, { children: "\uAE00\uC790 \uD06C\uAE30" }),
|
|
3321
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3322
|
+
Components.Generic.Menu.Item,
|
|
3323
|
+
{
|
|
3324
|
+
onClick: () => setFontSize(""),
|
|
3325
|
+
checked: currentSize === "",
|
|
3326
|
+
"data-test": "font-size-default",
|
|
3327
|
+
children: DEFAULT_LABEL2
|
|
3328
|
+
},
|
|
3329
|
+
"font-size-default"
|
|
3330
|
+
),
|
|
3331
|
+
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3332
|
+
Components.Generic.Menu.Item,
|
|
3333
|
+
{
|
|
3334
|
+
onClick: () => setFontSize(size),
|
|
3335
|
+
checked: currentSize === size,
|
|
3336
|
+
"data-test": "font-size-" + toLabel2(size),
|
|
3337
|
+
children: toLabel2(size)
|
|
3338
|
+
},
|
|
3339
|
+
"font-size-" + size
|
|
3340
|
+
))
|
|
3341
|
+
] })
|
|
3342
|
+
] });
|
|
3343
|
+
}
|
|
3344
|
+
|
|
3122
3345
|
// src/components/color/LumirColorControls.tsx
|
|
3123
3346
|
var import_core4 = require("@blocknote/core");
|
|
3124
|
-
var
|
|
3125
|
-
var
|
|
3126
|
-
var
|
|
3347
|
+
var import_react26 = require("@blocknote/react");
|
|
3348
|
+
var import_react27 = require("react");
|
|
3349
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3127
3350
|
var COLORS = [
|
|
3128
3351
|
"default",
|
|
3129
3352
|
"gray",
|
|
@@ -3140,7 +3363,7 @@ function ColorIcon(props) {
|
|
|
3140
3363
|
const textColor = props.textColor || "default";
|
|
3141
3364
|
const backgroundColor = props.backgroundColor || "default";
|
|
3142
3365
|
const size = props.size || 16;
|
|
3143
|
-
return /* @__PURE__ */ (0,
|
|
3366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3144
3367
|
"div",
|
|
3145
3368
|
{
|
|
3146
3369
|
className: "bn-color-icon",
|
|
@@ -3159,7 +3382,7 @@ function ColorIcon(props) {
|
|
|
3159
3382
|
);
|
|
3160
3383
|
}
|
|
3161
3384
|
function CellFillIcon({ size = 18 }) {
|
|
3162
|
-
return /* @__PURE__ */ (0,
|
|
3385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3163
3386
|
"svg",
|
|
3164
3387
|
{
|
|
3165
3388
|
width: size,
|
|
@@ -3168,17 +3391,17 @@ function CellFillIcon({ size = 18 }) {
|
|
|
3168
3391
|
fill: "currentColor",
|
|
3169
3392
|
style: { pointerEvents: "none" },
|
|
3170
3393
|
"aria-hidden": "true",
|
|
3171
|
-
children: /* @__PURE__ */ (0,
|
|
3394
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M16.56 8.94 7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" })
|
|
3172
3395
|
}
|
|
3173
3396
|
);
|
|
3174
3397
|
}
|
|
3175
3398
|
function LumirColorPicker(props) {
|
|
3176
|
-
const Components = (0,
|
|
3177
|
-
const dict = (0,
|
|
3178
|
-
return /* @__PURE__ */ (0,
|
|
3179
|
-
props.text ? /* @__PURE__ */ (0,
|
|
3180
|
-
/* @__PURE__ */ (0,
|
|
3181
|
-
COLORS.map((color) => /* @__PURE__ */ (0,
|
|
3399
|
+
const Components = (0, import_react26.useComponentsContext)();
|
|
3400
|
+
const dict = (0, import_react26.useDictionary)();
|
|
3401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
3402
|
+
props.text ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
3403
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
|
|
3404
|
+
COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3182
3405
|
Components.Generic.Menu.Item,
|
|
3183
3406
|
{
|
|
3184
3407
|
onClick: () => {
|
|
@@ -3186,16 +3409,16 @@ function LumirColorPicker(props) {
|
|
|
3186
3409
|
props.text.setColor(color);
|
|
3187
3410
|
},
|
|
3188
3411
|
"data-test": "text-color-" + color,
|
|
3189
|
-
icon: /* @__PURE__ */ (0,
|
|
3412
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorIcon, { textColor: color, size: props.iconSize }),
|
|
3190
3413
|
checked: props.text.color === color,
|
|
3191
3414
|
children: dict.color_picker.colors[color]
|
|
3192
3415
|
},
|
|
3193
3416
|
"text-color-" + color
|
|
3194
3417
|
))
|
|
3195
3418
|
] }) : null,
|
|
3196
|
-
props.background ? /* @__PURE__ */ (0,
|
|
3197
|
-
/* @__PURE__ */ (0,
|
|
3198
|
-
COLORS.map((color) => /* @__PURE__ */ (0,
|
|
3419
|
+
props.background ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
3420
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
|
|
3421
|
+
COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3199
3422
|
Components.Generic.Menu.Item,
|
|
3200
3423
|
{
|
|
3201
3424
|
onClick: () => {
|
|
@@ -3203,7 +3426,7 @@ function LumirColorPicker(props) {
|
|
|
3203
3426
|
props.background.setColor(color);
|
|
3204
3427
|
},
|
|
3205
3428
|
"data-test": "background-color-" + color,
|
|
3206
|
-
icon: /* @__PURE__ */ (0,
|
|
3429
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorIcon, { backgroundColor: color, size: props.iconSize }),
|
|
3207
3430
|
checked: props.background.color === color,
|
|
3208
3431
|
children: dict.color_picker.colors[color]
|
|
3209
3432
|
},
|
|
@@ -3213,20 +3436,20 @@ function LumirColorPicker(props) {
|
|
|
3213
3436
|
] });
|
|
3214
3437
|
}
|
|
3215
3438
|
function LumirColorStyleButton() {
|
|
3216
|
-
const Components = (0,
|
|
3217
|
-
const editor = (0,
|
|
3439
|
+
const Components = (0, import_react26.useComponentsContext)();
|
|
3440
|
+
const editor = (0, import_react26.useBlockNoteEditor)();
|
|
3218
3441
|
const ed = editor;
|
|
3219
3442
|
const styleSchema = editor.schema.styleSchema;
|
|
3220
3443
|
const textColorInSchema = styleSchema.textColor?.type === "textColor" && styleSchema.textColor?.propSchema === "string";
|
|
3221
3444
|
const backgroundColorInSchema = styleSchema.backgroundColor?.type === "backgroundColor" && styleSchema.backgroundColor?.propSchema === "string";
|
|
3222
|
-
const selectedBlocks = (0,
|
|
3223
|
-
const [currentTextColor, setCurrentTextColor] = (0,
|
|
3445
|
+
const selectedBlocks = (0, import_react26.useSelectedBlocks)(editor);
|
|
3446
|
+
const [currentTextColor, setCurrentTextColor] = (0, import_react27.useState)(
|
|
3224
3447
|
textColorInSchema ? ed.getActiveStyles().textColor || "default" : "default"
|
|
3225
3448
|
);
|
|
3226
|
-
const [currentBackgroundColor, setCurrentBackgroundColor] = (0,
|
|
3449
|
+
const [currentBackgroundColor, setCurrentBackgroundColor] = (0, import_react27.useState)(
|
|
3227
3450
|
backgroundColorInSchema ? ed.getActiveStyles().backgroundColor || "default" : "default"
|
|
3228
3451
|
);
|
|
3229
|
-
(0,
|
|
3452
|
+
(0, import_react26.useEditorContentOrSelectionChange)(() => {
|
|
3230
3453
|
const active = ed.getActiveStyles();
|
|
3231
3454
|
if (textColorInSchema) {
|
|
3232
3455
|
setCurrentTextColor(active.textColor || "default");
|
|
@@ -3235,7 +3458,7 @@ function LumirColorStyleButton() {
|
|
|
3235
3458
|
setCurrentBackgroundColor(active.backgroundColor || "default");
|
|
3236
3459
|
}
|
|
3237
3460
|
}, editor);
|
|
3238
|
-
const setTextColor = (0,
|
|
3461
|
+
const setTextColor = (0, import_react27.useCallback)(
|
|
3239
3462
|
(color) => {
|
|
3240
3463
|
color === "default" ? ed.removeStyles({ textColor: color }) : ed.addStyles({ textColor: color });
|
|
3241
3464
|
setTimeout(() => editor.focus());
|
|
@@ -3243,7 +3466,7 @@ function LumirColorStyleButton() {
|
|
|
3243
3466
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3244
3467
|
[editor]
|
|
3245
3468
|
);
|
|
3246
|
-
const setBackgroundColor = (0,
|
|
3469
|
+
const setBackgroundColor = (0, import_react27.useCallback)(
|
|
3247
3470
|
(color) => {
|
|
3248
3471
|
color === "default" ? ed.removeStyles({ backgroundColor: color }) : ed.addStyles({ backgroundColor: color });
|
|
3249
3472
|
setTimeout(() => editor.focus());
|
|
@@ -3251,7 +3474,7 @@ function LumirColorStyleButton() {
|
|
|
3251
3474
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3252
3475
|
[editor]
|
|
3253
3476
|
);
|
|
3254
|
-
const show = (0,
|
|
3477
|
+
const show = (0, import_react27.useMemo)(() => {
|
|
3255
3478
|
if (!textColorInSchema && !backgroundColorInSchema) {
|
|
3256
3479
|
return false;
|
|
3257
3480
|
}
|
|
@@ -3266,15 +3489,15 @@ function LumirColorStyleButton() {
|
|
|
3266
3489
|
return null;
|
|
3267
3490
|
}
|
|
3268
3491
|
const tooltip = "\uD14D\uC2A4\uD2B8 \uC0C9\xB7\uBC30\uACBD";
|
|
3269
|
-
return /* @__PURE__ */ (0,
|
|
3270
|
-
/* @__PURE__ */ (0,
|
|
3492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Components.Generic.Menu.Root, { children: [
|
|
3493
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3271
3494
|
Components.FormattingToolbar.Button,
|
|
3272
3495
|
{
|
|
3273
3496
|
className: "bn-button",
|
|
3274
3497
|
"data-test": "colors",
|
|
3275
3498
|
label: tooltip,
|
|
3276
3499
|
mainTooltip: tooltip,
|
|
3277
|
-
icon: /* @__PURE__ */ (0,
|
|
3500
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3278
3501
|
ColorIcon,
|
|
3279
3502
|
{
|
|
3280
3503
|
textColor: currentTextColor,
|
|
@@ -3284,11 +3507,11 @@ function LumirColorStyleButton() {
|
|
|
3284
3507
|
)
|
|
3285
3508
|
}
|
|
3286
3509
|
) }),
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3510
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3288
3511
|
Components.Generic.Menu.Dropdown,
|
|
3289
3512
|
{
|
|
3290
3513
|
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
3291
|
-
children: /* @__PURE__ */ (0,
|
|
3514
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3292
3515
|
LumirColorPicker,
|
|
3293
3516
|
{
|
|
3294
3517
|
textTitle: "\uD14D\uC2A4\uD2B8 \uC0C9",
|
|
@@ -3302,18 +3525,18 @@ function LumirColorStyleButton() {
|
|
|
3302
3525
|
] });
|
|
3303
3526
|
}
|
|
3304
3527
|
function LumirCellColorToolbarButton() {
|
|
3305
|
-
const Components = (0,
|
|
3306
|
-
const editor = (0,
|
|
3307
|
-
const selectedBlocks = (0,
|
|
3308
|
-
const isMultiCell = (0,
|
|
3528
|
+
const Components = (0, import_react26.useComponentsContext)();
|
|
3529
|
+
const editor = (0, import_react26.useBlockNoteEditor)();
|
|
3530
|
+
const selectedBlocks = (0, import_react26.useSelectedBlocks)(editor);
|
|
3531
|
+
const isMultiCell = (0, import_react27.useMemo)(() => {
|
|
3309
3532
|
if (selectedBlocks.length !== 1 || selectedBlocks[0].type !== "table") {
|
|
3310
3533
|
return false;
|
|
3311
3534
|
}
|
|
3312
3535
|
const cs = editor.tableHandles?.getCellSelection();
|
|
3313
3536
|
return !!cs && cs.cells.length > 1;
|
|
3314
3537
|
}, [editor, selectedBlocks]);
|
|
3315
|
-
const stashRef = (0,
|
|
3316
|
-
const applyBackground = (0,
|
|
3538
|
+
const stashRef = (0, import_react27.useRef)([]);
|
|
3539
|
+
const applyBackground = (0, import_react27.useCallback)(
|
|
3317
3540
|
(color) => {
|
|
3318
3541
|
const live = getSelectedCellPositions(editor);
|
|
3319
3542
|
const positions = live.length > 0 ? live : stashRef.current;
|
|
@@ -3326,7 +3549,7 @@ function LumirCellColorToolbarButton() {
|
|
|
3326
3549
|
return null;
|
|
3327
3550
|
}
|
|
3328
3551
|
const tooltip = "\uC140 \uBC30\uACBD\uC0C9";
|
|
3329
|
-
return /* @__PURE__ */ (0,
|
|
3552
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
3330
3553
|
Components.Generic.Menu.Root,
|
|
3331
3554
|
{
|
|
3332
3555
|
onOpenChange: (open) => {
|
|
@@ -3335,21 +3558,21 @@ function LumirCellColorToolbarButton() {
|
|
|
3335
3558
|
}
|
|
3336
3559
|
},
|
|
3337
3560
|
children: [
|
|
3338
|
-
/* @__PURE__ */ (0,
|
|
3561
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3339
3562
|
Components.FormattingToolbar.Button,
|
|
3340
3563
|
{
|
|
3341
3564
|
className: "bn-button",
|
|
3342
3565
|
"data-test": "cell-colors",
|
|
3343
3566
|
label: tooltip,
|
|
3344
3567
|
mainTooltip: tooltip,
|
|
3345
|
-
icon: /* @__PURE__ */ (0,
|
|
3568
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CellFillIcon, { size: 18 })
|
|
3346
3569
|
}
|
|
3347
3570
|
) }),
|
|
3348
|
-
/* @__PURE__ */ (0,
|
|
3571
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3349
3572
|
Components.Generic.Menu.Dropdown,
|
|
3350
3573
|
{
|
|
3351
3574
|
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
3352
|
-
children: /* @__PURE__ */ (0,
|
|
3575
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3353
3576
|
LumirColorPicker,
|
|
3354
3577
|
{
|
|
3355
3578
|
backgroundTitle: "\uC140 \uBC30\uACBD",
|
|
@@ -3363,8 +3586,8 @@ function LumirCellColorToolbarButton() {
|
|
|
3363
3586
|
);
|
|
3364
3587
|
}
|
|
3365
3588
|
function LumirCellColorPickerButton(props) {
|
|
3366
|
-
const Components = (0,
|
|
3367
|
-
const editor = (0,
|
|
3589
|
+
const Components = (0, import_react26.useComponentsContext)();
|
|
3590
|
+
const editor = (0, import_react26.useBlockNoteEditor)();
|
|
3368
3591
|
const updateColor = (color, type) => {
|
|
3369
3592
|
const newTable = props.block.content.rows.map((row) => ({
|
|
3370
3593
|
...row,
|
|
@@ -3385,14 +3608,14 @@ function LumirCellColorPickerButton(props) {
|
|
|
3385
3608
|
if (!currentCell || editor.settings.tables.cellTextColor === false && editor.settings.tables.cellBackgroundColor === false) {
|
|
3386
3609
|
return null;
|
|
3387
3610
|
}
|
|
3388
|
-
return /* @__PURE__ */ (0,
|
|
3389
|
-
/* @__PURE__ */ (0,
|
|
3390
|
-
/* @__PURE__ */ (0,
|
|
3611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
|
|
3612
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
|
|
3613
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3391
3614
|
Components.Generic.Menu.Dropdown,
|
|
3392
3615
|
{
|
|
3393
3616
|
sub: true,
|
|
3394
3617
|
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
3395
|
-
children: /* @__PURE__ */ (0,
|
|
3618
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3396
3619
|
LumirColorPicker,
|
|
3397
3620
|
{
|
|
3398
3621
|
iconSize: 18,
|
|
@@ -3413,21 +3636,21 @@ function LumirCellColorPickerButton(props) {
|
|
|
3413
3636
|
] });
|
|
3414
3637
|
}
|
|
3415
3638
|
function LumirTableCellMenu(props) {
|
|
3416
|
-
const Components = (0,
|
|
3417
|
-
return /* @__PURE__ */ (0,
|
|
3639
|
+
const Components = (0, import_react26.useComponentsContext)();
|
|
3640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3418
3641
|
Components.Generic.Menu.Dropdown,
|
|
3419
3642
|
{
|
|
3420
3643
|
className: "bn-menu-dropdown bn-drag-handle-menu",
|
|
3421
|
-
children: props.children || /* @__PURE__ */ (0,
|
|
3422
|
-
/* @__PURE__ */ (0,
|
|
3423
|
-
|
|
3644
|
+
children: props.children || /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
3645
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3646
|
+
import_react26.SplitButton,
|
|
3424
3647
|
{
|
|
3425
3648
|
block: props.block,
|
|
3426
3649
|
rowIndex: props.rowIndex,
|
|
3427
3650
|
colIndex: props.colIndex
|
|
3428
3651
|
}
|
|
3429
3652
|
),
|
|
3430
|
-
/* @__PURE__ */ (0,
|
|
3653
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3431
3654
|
LumirCellColorPickerButton,
|
|
3432
3655
|
{
|
|
3433
3656
|
block: props.block,
|
|
@@ -3441,95 +3664,96 @@ function LumirTableCellMenu(props) {
|
|
|
3441
3664
|
}
|
|
3442
3665
|
|
|
3443
3666
|
// src/components/CustomFormattingToolbar.tsx
|
|
3444
|
-
var
|
|
3667
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3445
3668
|
var CustomFormattingToolbar = () => {
|
|
3446
|
-
return /* @__PURE__ */ (0,
|
|
3447
|
-
/* @__PURE__ */ (0,
|
|
3448
|
-
/* @__PURE__ */ (0,
|
|
3449
|
-
/* @__PURE__ */ (0,
|
|
3450
|
-
/* @__PURE__ */ (0,
|
|
3451
|
-
/* @__PURE__ */ (0,
|
|
3452
|
-
/* @__PURE__ */ (0,
|
|
3453
|
-
/* @__PURE__ */ (0,
|
|
3454
|
-
/* @__PURE__ */ (0,
|
|
3455
|
-
/* @__PURE__ */ (0,
|
|
3456
|
-
/* @__PURE__ */ (0,
|
|
3457
|
-
|
|
3669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react28.FormattingToolbar, { children: [
|
|
3670
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.BlockTypeSelect, {}, "blockTypeSelect"),
|
|
3671
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.TableCellMergeButton, {}, "tableCellMergeButton"),
|
|
3672
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.FileCaptionButton, {}, "fileCaptionButton"),
|
|
3673
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.FileReplaceButton, {}, "replaceFileButton"),
|
|
3674
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.FileRenameButton, {}, "fileRenameButton"),
|
|
3675
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.FileDeleteButton, {}, "fileDeleteButton"),
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.FileDownloadButton, {}, "fileDownloadButton"),
|
|
3677
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.FilePreviewButton, {}, "filePreviewButton"),
|
|
3678
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
|
|
3679
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3680
|
+
import_react28.BasicTextStyleButton,
|
|
3458
3681
|
{
|
|
3459
3682
|
basicTextStyle: "italic"
|
|
3460
3683
|
},
|
|
3461
3684
|
"italicStyleButton"
|
|
3462
3685
|
),
|
|
3463
|
-
/* @__PURE__ */ (0,
|
|
3464
|
-
|
|
3686
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3687
|
+
import_react28.BasicTextStyleButton,
|
|
3465
3688
|
{
|
|
3466
3689
|
basicTextStyle: "underline"
|
|
3467
3690
|
},
|
|
3468
3691
|
"underlineStyleButton"
|
|
3469
3692
|
),
|
|
3470
|
-
/* @__PURE__ */ (0,
|
|
3471
|
-
|
|
3693
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3694
|
+
import_react28.BasicTextStyleButton,
|
|
3472
3695
|
{
|
|
3473
3696
|
basicTextStyle: "strike"
|
|
3474
3697
|
},
|
|
3475
3698
|
"strikeStyleButton"
|
|
3476
3699
|
),
|
|
3477
|
-
/* @__PURE__ */ (0,
|
|
3478
|
-
/* @__PURE__ */ (0,
|
|
3700
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
|
|
3701
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3479
3702
|
TextAlignButtonWithVA,
|
|
3480
3703
|
{
|
|
3481
3704
|
textAlignment: "center"
|
|
3482
3705
|
},
|
|
3483
3706
|
"textAlignCenterButton"
|
|
3484
3707
|
),
|
|
3485
|
-
/* @__PURE__ */ (0,
|
|
3486
|
-
/* @__PURE__ */ (0,
|
|
3708
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
|
|
3709
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3487
3710
|
VerticalAlignButton,
|
|
3488
3711
|
{
|
|
3489
3712
|
verticalAlignment: "top"
|
|
3490
3713
|
},
|
|
3491
3714
|
"verticalAlignTop"
|
|
3492
3715
|
),
|
|
3493
|
-
/* @__PURE__ */ (0,
|
|
3716
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3494
3717
|
VerticalAlignButton,
|
|
3495
3718
|
{
|
|
3496
3719
|
verticalAlignment: "middle"
|
|
3497
3720
|
},
|
|
3498
3721
|
"verticalAlignMiddle"
|
|
3499
3722
|
),
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3723
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3501
3724
|
VerticalAlignButton,
|
|
3502
3725
|
{
|
|
3503
3726
|
verticalAlignment: "bottom"
|
|
3504
3727
|
},
|
|
3505
3728
|
"verticalAlignBottom"
|
|
3506
3729
|
),
|
|
3507
|
-
/* @__PURE__ */ (0,
|
|
3508
|
-
/* @__PURE__ */ (0,
|
|
3509
|
-
/* @__PURE__ */ (0,
|
|
3510
|
-
/* @__PURE__ */ (0,
|
|
3511
|
-
/* @__PURE__ */ (0,
|
|
3730
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FontSizeButton2, {}, "fontSizeButton"),
|
|
3731
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LumirColorStyleButton, {}, "colorStyleButton"),
|
|
3732
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LumirCellColorToolbarButton, {}, "cellColorButton"),
|
|
3733
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.NestBlockButton, {}, "nestBlockButton"),
|
|
3734
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.UnnestBlockButton, {}, "unnestBlockButton"),
|
|
3735
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react28.CreateLinkButton, {}, "createLinkButton")
|
|
3512
3736
|
] });
|
|
3513
3737
|
};
|
|
3514
3738
|
|
|
3515
3739
|
// src/components/LumirTableHandlesController.tsx
|
|
3516
|
-
var
|
|
3517
|
-
var
|
|
3518
|
-
var
|
|
3740
|
+
var import_react31 = require("@blocknote/react");
|
|
3741
|
+
var import_react32 = require("@floating-ui/react");
|
|
3742
|
+
var import_react33 = require("react");
|
|
3519
3743
|
|
|
3520
3744
|
// src/components/hooks/useFocusedCellHandlePositioning.ts
|
|
3521
|
-
var
|
|
3522
|
-
var
|
|
3745
|
+
var import_react29 = require("@floating-ui/react");
|
|
3746
|
+
var import_react30 = require("react");
|
|
3523
3747
|
function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
3524
|
-
const { refs, floatingStyles, context } = (0,
|
|
3748
|
+
const { refs, floatingStyles, context } = (0, import_react29.useFloating)({
|
|
3525
3749
|
open: show,
|
|
3526
3750
|
placement: orientation === "row" ? "left" : orientation === "col" ? "top" : "right",
|
|
3527
3751
|
// col/row: 가장자리 선(zero-size)에, cell: 셀 우측 보더에 14px hit-area 중앙 정렬(-7).
|
|
3528
|
-
middleware: [(0,
|
|
3529
|
-
whileElementsMounted:
|
|
3752
|
+
middleware: [(0, import_react29.offset)(-7)],
|
|
3753
|
+
whileElementsMounted: import_react29.autoUpdate
|
|
3530
3754
|
});
|
|
3531
|
-
const { isMounted, styles } = (0,
|
|
3532
|
-
(0,
|
|
3755
|
+
const { isMounted, styles } = (0, import_react29.useTransitionStyles)(context);
|
|
3756
|
+
(0, import_react30.useEffect)(() => {
|
|
3533
3757
|
if (!cellEl) {
|
|
3534
3758
|
refs.setReference(null);
|
|
3535
3759
|
return;
|
|
@@ -3549,7 +3773,7 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
|
3549
3773
|
}
|
|
3550
3774
|
});
|
|
3551
3775
|
}, [cellEl, tbodyEl, orientation, refs]);
|
|
3552
|
-
return (0,
|
|
3776
|
+
return (0, import_react30.useMemo)(
|
|
3553
3777
|
() => ({
|
|
3554
3778
|
isMounted,
|
|
3555
3779
|
ref: refs.setFloating,
|
|
@@ -3564,7 +3788,7 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
|
3564
3788
|
}
|
|
3565
3789
|
|
|
3566
3790
|
// src/components/LumirTableHandlesController.tsx
|
|
3567
|
-
var
|
|
3791
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3568
3792
|
function syncCoreHoverToFocusedCell(cellEl) {
|
|
3569
3793
|
const r = cellEl.getBoundingClientRect();
|
|
3570
3794
|
cellEl.dispatchEvent(
|
|
@@ -3578,15 +3802,15 @@ function syncCoreHoverToFocusedCell(cellEl) {
|
|
|
3578
3802
|
);
|
|
3579
3803
|
}
|
|
3580
3804
|
function LumirTableHandlesController() {
|
|
3581
|
-
const editor = (0,
|
|
3582
|
-
const [focused, setFocused] = (0,
|
|
3583
|
-
const [menuContainerRef, setMenuContainerRef] = (0,
|
|
3584
|
-
const [overlayEl, setOverlayEl] = (0,
|
|
3585
|
-
const [openMenu, setOpenMenu] = (0,
|
|
3586
|
-
const frozenRef = (0,
|
|
3587
|
-
const menuOpenRef = (0,
|
|
3588
|
-
const draggingRef = (0,
|
|
3589
|
-
const recompute = (0,
|
|
3805
|
+
const editor = (0, import_react31.useBlockNoteEditor)();
|
|
3806
|
+
const [focused, setFocused] = (0, import_react33.useState)(null);
|
|
3807
|
+
const [menuContainerRef, setMenuContainerRef] = (0, import_react33.useState)(null);
|
|
3808
|
+
const [overlayEl, setOverlayEl] = (0, import_react33.useState)(null);
|
|
3809
|
+
const [openMenu, setOpenMenu] = (0, import_react33.useState)(null);
|
|
3810
|
+
const frozenRef = (0, import_react33.useRef)(false);
|
|
3811
|
+
const menuOpenRef = (0, import_react33.useRef)(false);
|
|
3812
|
+
const draggingRef = (0, import_react33.useRef)(false);
|
|
3813
|
+
const recompute = (0, import_react33.useCallback)(() => {
|
|
3590
3814
|
if (frozenRef.current) {
|
|
3591
3815
|
return;
|
|
3592
3816
|
}
|
|
@@ -3634,11 +3858,11 @@ function LumirTableHandlesController() {
|
|
|
3634
3858
|
widgetContainer
|
|
3635
3859
|
});
|
|
3636
3860
|
}, [editor]);
|
|
3637
|
-
(0,
|
|
3638
|
-
(0,
|
|
3861
|
+
(0, import_react31.useEditorContentOrSelectionChange)(recompute, editor);
|
|
3862
|
+
(0, import_react33.useEffect)(() => {
|
|
3639
3863
|
recompute();
|
|
3640
3864
|
}, [recompute]);
|
|
3641
|
-
(0,
|
|
3865
|
+
(0, import_react33.useEffect)(() => {
|
|
3642
3866
|
const onUp = () => {
|
|
3643
3867
|
requestAnimationFrame(() => {
|
|
3644
3868
|
if (!menuOpenRef.current && !draggingRef.current && frozenRef.current) {
|
|
@@ -3650,7 +3874,7 @@ function LumirTableHandlesController() {
|
|
|
3650
3874
|
window.addEventListener("pointerup", onUp);
|
|
3651
3875
|
return () => window.removeEventListener("pointerup", onUp);
|
|
3652
3876
|
}, [recompute]);
|
|
3653
|
-
(0,
|
|
3877
|
+
(0, import_react33.useEffect)(() => {
|
|
3654
3878
|
const f = focused;
|
|
3655
3879
|
if (!f || !overlayEl) {
|
|
3656
3880
|
return;
|
|
@@ -3675,7 +3899,7 @@ function LumirTableHandlesController() {
|
|
|
3675
3899
|
overlayEl.style.height = `${bottom - top}px`;
|
|
3676
3900
|
};
|
|
3677
3901
|
update();
|
|
3678
|
-
return (0,
|
|
3902
|
+
return (0, import_react32.autoUpdate)(f.cellEl, overlayEl, update);
|
|
3679
3903
|
}, [focused, overlayEl, openMenu]);
|
|
3680
3904
|
const cellEl = focused?.cellEl ?? null;
|
|
3681
3905
|
const tbodyEl = focused?.tbodyEl ?? null;
|
|
@@ -3689,21 +3913,21 @@ function LumirTableHandlesController() {
|
|
|
3689
3913
|
show
|
|
3690
3914
|
);
|
|
3691
3915
|
const th = editor.tableHandles;
|
|
3692
|
-
const coreState = (0,
|
|
3916
|
+
const coreState = (0, import_react31.useUIPluginState)(
|
|
3693
3917
|
editor.tableHandles.onUpdate.bind(editor.tableHandles)
|
|
3694
3918
|
);
|
|
3695
|
-
const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = (0,
|
|
3919
|
+
const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = (0, import_react31.useExtendButtonsPositioning)(
|
|
3696
3920
|
coreState?.showAddOrRemoveColumnsButton || false,
|
|
3697
3921
|
coreState?.showAddOrRemoveRowsButton || false,
|
|
3698
3922
|
coreState?.referencePosTable || null
|
|
3699
3923
|
);
|
|
3700
|
-
const onStartExtend = (0,
|
|
3924
|
+
const onStartExtend = (0, import_react33.useCallback)(() => {
|
|
3701
3925
|
editor.tableHandles?.freezeHandles();
|
|
3702
3926
|
}, [editor]);
|
|
3703
|
-
const onEndExtend = (0,
|
|
3927
|
+
const onEndExtend = (0, import_react33.useCallback)(() => {
|
|
3704
3928
|
editor.tableHandles?.unfreezeHandles();
|
|
3705
3929
|
}, [editor]);
|
|
3706
|
-
const menuHandlers = (0,
|
|
3930
|
+
const menuHandlers = (0, import_react33.useMemo)(() => {
|
|
3707
3931
|
const mk = (kind) => ({
|
|
3708
3932
|
freeze: () => {
|
|
3709
3933
|
menuOpenRef.current = true;
|
|
@@ -3721,10 +3945,10 @@ function LumirTableHandlesController() {
|
|
|
3721
3945
|
});
|
|
3722
3946
|
return { col: mk("col"), row: mk("row"), cell: mk("cell") };
|
|
3723
3947
|
}, [editor, recompute]);
|
|
3724
|
-
const onGutterPointerDown = (0,
|
|
3948
|
+
const onGutterPointerDown = (0, import_react33.useCallback)(() => {
|
|
3725
3949
|
frozenRef.current = true;
|
|
3726
3950
|
}, []);
|
|
3727
|
-
const onGutterPointerEnter = (0,
|
|
3951
|
+
const onGutterPointerEnter = (0, import_react33.useCallback)(
|
|
3728
3952
|
(e) => {
|
|
3729
3953
|
if (e.buttons === 0 && focused) {
|
|
3730
3954
|
syncCoreHoverToFocusedCell(focused.cellEl);
|
|
@@ -3732,7 +3956,7 @@ function LumirTableHandlesController() {
|
|
|
3732
3956
|
},
|
|
3733
3957
|
[focused]
|
|
3734
3958
|
);
|
|
3735
|
-
const makeDragStart = (0,
|
|
3959
|
+
const makeDragStart = (0, import_react33.useCallback)(
|
|
3736
3960
|
(dir) => (e) => {
|
|
3737
3961
|
draggingRef.current = true;
|
|
3738
3962
|
frozenRef.current = true;
|
|
@@ -3744,19 +3968,19 @@ function LumirTableHandlesController() {
|
|
|
3744
3968
|
},
|
|
3745
3969
|
[editor]
|
|
3746
3970
|
);
|
|
3747
|
-
const onDragEnd = (0,
|
|
3971
|
+
const onDragEnd = (0, import_react33.useCallback)(() => {
|
|
3748
3972
|
editor.tableHandles?.dragEnd();
|
|
3749
3973
|
draggingRef.current = false;
|
|
3750
3974
|
frozenRef.current = false;
|
|
3751
3975
|
recompute();
|
|
3752
3976
|
}, [editor, recompute]);
|
|
3753
|
-
const noop = (0,
|
|
3977
|
+
const noop = (0, import_react33.useCallback)(() => {
|
|
3754
3978
|
}, []);
|
|
3755
|
-
return /* @__PURE__ */ (0,
|
|
3756
|
-
/* @__PURE__ */ (0,
|
|
3757
|
-
th && focused && menuContainerRef && /* @__PURE__ */ (0,
|
|
3758
|
-
/* @__PURE__ */ (0,
|
|
3759
|
-
colHandle.isMounted && /* @__PURE__ */ (0,
|
|
3979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
3980
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: setMenuContainerRef }),
|
|
3981
|
+
th && focused && menuContainerRef && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react32.FloatingPortal, { root: focused.widgetContainer, children: [
|
|
3982
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
|
|
3983
|
+
colHandle.isMounted && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
3760
3984
|
"div",
|
|
3761
3985
|
{
|
|
3762
3986
|
ref: colHandle.ref,
|
|
@@ -3765,9 +3989,9 @@ function LumirTableHandlesController() {
|
|
|
3765
3989
|
onPointerEnter: onGutterPointerEnter,
|
|
3766
3990
|
onPointerDown: onGutterPointerDown,
|
|
3767
3991
|
children: [
|
|
3768
|
-
/* @__PURE__ */ (0,
|
|
3769
|
-
/* @__PURE__ */ (0,
|
|
3770
|
-
|
|
3992
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "lumir-tbl-gutter" }),
|
|
3993
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3994
|
+
import_react31.TableHandle,
|
|
3771
3995
|
{
|
|
3772
3996
|
editor,
|
|
3773
3997
|
orientation: "column",
|
|
@@ -3785,7 +4009,7 @@ function LumirTableHandlesController() {
|
|
|
3785
4009
|
]
|
|
3786
4010
|
}
|
|
3787
4011
|
),
|
|
3788
|
-
rowHandle.isMounted && /* @__PURE__ */ (0,
|
|
4012
|
+
rowHandle.isMounted && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
3789
4013
|
"div",
|
|
3790
4014
|
{
|
|
3791
4015
|
ref: rowHandle.ref,
|
|
@@ -3794,9 +4018,9 @@ function LumirTableHandlesController() {
|
|
|
3794
4018
|
onPointerEnter: onGutterPointerEnter,
|
|
3795
4019
|
onPointerDown: onGutterPointerDown,
|
|
3796
4020
|
children: [
|
|
3797
|
-
/* @__PURE__ */ (0,
|
|
3798
|
-
/* @__PURE__ */ (0,
|
|
3799
|
-
|
|
4021
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "lumir-tbl-gutter" }),
|
|
4022
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4023
|
+
import_react31.TableHandle,
|
|
3800
4024
|
{
|
|
3801
4025
|
editor,
|
|
3802
4026
|
orientation: "row",
|
|
@@ -3814,7 +4038,7 @@ function LumirTableHandlesController() {
|
|
|
3814
4038
|
]
|
|
3815
4039
|
}
|
|
3816
4040
|
),
|
|
3817
|
-
cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ (0,
|
|
4041
|
+
cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
3818
4042
|
"div",
|
|
3819
4043
|
{
|
|
3820
4044
|
ref: cellHandle.ref,
|
|
@@ -3822,9 +4046,9 @@ function LumirTableHandlesController() {
|
|
|
3822
4046
|
className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--cell" + (openMenu === "cell" ? " lumir-tbl-gutter-wrap--active" : ""),
|
|
3823
4047
|
onPointerDown: onGutterPointerDown,
|
|
3824
4048
|
children: [
|
|
3825
|
-
/* @__PURE__ */ (0,
|
|
3826
|
-
/* @__PURE__ */ (0,
|
|
3827
|
-
|
|
4049
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "lumir-tbl-gutter" }),
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4051
|
+
import_react31.TableCellButton,
|
|
3828
4052
|
{
|
|
3829
4053
|
editor,
|
|
3830
4054
|
rowIndex: focused.rowIndex,
|
|
@@ -3840,9 +4064,9 @@ function LumirTableHandlesController() {
|
|
|
3840
4064
|
}
|
|
3841
4065
|
)
|
|
3842
4066
|
] }),
|
|
3843
|
-
th && coreState?.widgetContainer && /* @__PURE__ */ (0,
|
|
3844
|
-
/* @__PURE__ */ (0,
|
|
3845
|
-
|
|
4067
|
+
th && coreState?.widgetContainer && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react32.FloatingPortal, { root: coreState.widgetContainer, children: [
|
|
4068
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4069
|
+
import_react31.ExtendButton,
|
|
3846
4070
|
{
|
|
3847
4071
|
editor,
|
|
3848
4072
|
orientation: "addOrRemoveRows",
|
|
@@ -3851,13 +4075,13 @@ function LumirTableHandlesController() {
|
|
|
3851
4075
|
onMouseUp: onEndExtend
|
|
3852
4076
|
}
|
|
3853
4077
|
) }),
|
|
3854
|
-
/* @__PURE__ */ (0,
|
|
4078
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3855
4079
|
"div",
|
|
3856
4080
|
{
|
|
3857
4081
|
ref: addOrRemoveColumnsButton.ref,
|
|
3858
4082
|
style: addOrRemoveColumnsButton.style,
|
|
3859
|
-
children: /* @__PURE__ */ (0,
|
|
3860
|
-
|
|
4083
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4084
|
+
import_react31.ExtendButton,
|
|
3861
4085
|
{
|
|
3862
4086
|
editor,
|
|
3863
4087
|
orientation: "addOrRemoveColumns",
|
|
@@ -3954,6 +4178,90 @@ function patchBlocks(blocks, tableVAMap) {
|
|
|
3954
4178
|
});
|
|
3955
4179
|
}
|
|
3956
4180
|
|
|
4181
|
+
// src/utils/font-size-serialization.ts
|
|
4182
|
+
function mapPreservingRef(arr, fn) {
|
|
4183
|
+
let changed = false;
|
|
4184
|
+
const next = arr.map((item) => {
|
|
4185
|
+
const mapped = fn(item);
|
|
4186
|
+
if (mapped !== item) changed = true;
|
|
4187
|
+
return mapped;
|
|
4188
|
+
});
|
|
4189
|
+
return changed ? next : arr;
|
|
4190
|
+
}
|
|
4191
|
+
function mapStyledItem(item, dir) {
|
|
4192
|
+
if (!item || typeof item !== "object" || item.type !== "text") {
|
|
4193
|
+
return item;
|
|
4194
|
+
}
|
|
4195
|
+
if (dir === "lower") {
|
|
4196
|
+
const fs2 = item.styles?.fontSize;
|
|
4197
|
+
if (fs2 == null) return item;
|
|
4198
|
+
const { fontSize: _removed, ...restStyles } = item.styles;
|
|
4199
|
+
return { ...item, styles: restStyles, fontSize: fs2 };
|
|
4200
|
+
}
|
|
4201
|
+
const fs = item.fontSize;
|
|
4202
|
+
if (fs == null) return item;
|
|
4203
|
+
const { fontSize: _lifted, ...rest } = item;
|
|
4204
|
+
return { ...rest, styles: { ...item.styles ?? {}, fontSize: fs } };
|
|
4205
|
+
}
|
|
4206
|
+
function mapInlineItem(node, dir) {
|
|
4207
|
+
if (!node || typeof node !== "object") return node;
|
|
4208
|
+
if (node.type === "link" && Array.isArray(node.content)) {
|
|
4209
|
+
const content = mapPreservingRef(
|
|
4210
|
+
node.content,
|
|
4211
|
+
(n) => mapStyledItem(n, dir)
|
|
4212
|
+
);
|
|
4213
|
+
return content === node.content ? node : { ...node, content };
|
|
4214
|
+
}
|
|
4215
|
+
return mapStyledItem(node, dir);
|
|
4216
|
+
}
|
|
4217
|
+
function mapCell(cell, dir) {
|
|
4218
|
+
if (cell && typeof cell === "object" && cell.type === "tableCell") {
|
|
4219
|
+
if (!Array.isArray(cell.content)) return cell;
|
|
4220
|
+
const content = mapPreservingRef(
|
|
4221
|
+
cell.content,
|
|
4222
|
+
(n) => mapInlineItem(n, dir)
|
|
4223
|
+
);
|
|
4224
|
+
return content === cell.content ? cell : { ...cell, content };
|
|
4225
|
+
}
|
|
4226
|
+
if (Array.isArray(cell)) {
|
|
4227
|
+
return mapPreservingRef(cell, (n) => mapInlineItem(n, dir));
|
|
4228
|
+
}
|
|
4229
|
+
return cell;
|
|
4230
|
+
}
|
|
4231
|
+
function mapBlock(block, dir) {
|
|
4232
|
+
if (!block || typeof block !== "object") return block;
|
|
4233
|
+
let next = block;
|
|
4234
|
+
const content = block.content;
|
|
4235
|
+
if (Array.isArray(content)) {
|
|
4236
|
+
const mapped = mapPreservingRef(content, (n) => mapInlineItem(n, dir));
|
|
4237
|
+
if (mapped !== content) next = { ...next, content: mapped };
|
|
4238
|
+
} else if (content && typeof content === "object" && content.type === "tableContent" && Array.isArray(content.rows)) {
|
|
4239
|
+
const rows = mapPreservingRef(content.rows, (row) => {
|
|
4240
|
+
if (!row || !Array.isArray(row.cells)) return row;
|
|
4241
|
+
const cells = mapPreservingRef(
|
|
4242
|
+
row.cells,
|
|
4243
|
+
(cell) => mapCell(cell, dir)
|
|
4244
|
+
);
|
|
4245
|
+
return cells === row.cells ? row : { ...row, cells };
|
|
4246
|
+
});
|
|
4247
|
+
if (rows !== content.rows) next = { ...next, content: { ...content, rows } };
|
|
4248
|
+
}
|
|
4249
|
+
if (Array.isArray(block.children) && block.children.length > 0) {
|
|
4250
|
+
const children = mapPreservingRef(
|
|
4251
|
+
block.children,
|
|
4252
|
+
(b) => mapBlock(b, dir)
|
|
4253
|
+
);
|
|
4254
|
+
if (children !== block.children) next = { ...next, children };
|
|
4255
|
+
}
|
|
4256
|
+
return next;
|
|
4257
|
+
}
|
|
4258
|
+
function lowerFontSize(blocks) {
|
|
4259
|
+
return mapPreservingRef(blocks, (b) => mapBlock(b, "lower"));
|
|
4260
|
+
}
|
|
4261
|
+
function liftFontSize(blocks) {
|
|
4262
|
+
return mapPreservingRef(blocks, (b) => mapBlock(b, "lift"));
|
|
4263
|
+
}
|
|
4264
|
+
|
|
3957
4265
|
// src/utils/excel-paste.ts
|
|
3958
4266
|
var NAMED_COLORS = {
|
|
3959
4267
|
black: "#000000",
|
|
@@ -4202,7 +4510,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
|
|
|
4202
4510
|
];
|
|
4203
4511
|
|
|
4204
4512
|
// src/components/LumirEditor.tsx
|
|
4205
|
-
var
|
|
4513
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4206
4514
|
var DEBUG_LOG = (loc, msg, data) => {
|
|
4207
4515
|
const p = fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
|
|
4208
4516
|
method: "POST",
|
|
@@ -4367,6 +4675,12 @@ var isVideoFile = (file, maxSize) => {
|
|
|
4367
4675
|
});
|
|
4368
4676
|
return result;
|
|
4369
4677
|
};
|
|
4678
|
+
var isSuppressiblePopupSelection = (editor, selection) => {
|
|
4679
|
+
if (!selection) return false;
|
|
4680
|
+
if (selection.node) return false;
|
|
4681
|
+
if (isInTableCell(editor)) return false;
|
|
4682
|
+
return true;
|
|
4683
|
+
};
|
|
4370
4684
|
var isHtmlFile = (file) => {
|
|
4371
4685
|
return file.size > 0 && (file.type === "text/html" || file.name?.toLowerCase().endsWith(".html") || file.name?.toLowerCase().endsWith(".htm"));
|
|
4372
4686
|
};
|
|
@@ -4427,9 +4741,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
|
|
|
4427
4741
|
return null;
|
|
4428
4742
|
};
|
|
4429
4743
|
var ConvertToPreviewButton = ({ url }) => {
|
|
4430
|
-
const editor = (0,
|
|
4431
|
-
const Components = (0,
|
|
4432
|
-
return /* @__PURE__ */ (0,
|
|
4744
|
+
const editor = (0, import_react35.useBlockNoteEditor)();
|
|
4745
|
+
const Components = (0, import_react35.useComponentsContext)();
|
|
4746
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4433
4747
|
Components.LinkToolbar.Button,
|
|
4434
4748
|
{
|
|
4435
4749
|
className: "bn-button",
|
|
@@ -4448,29 +4762,29 @@ var ConvertToPreviewButton = ({ url }) => {
|
|
|
4448
4762
|
console.error("Convert to link preview failed:", err);
|
|
4449
4763
|
}
|
|
4450
4764
|
},
|
|
4451
|
-
icon: /* @__PURE__ */ (0,
|
|
4452
|
-
/* @__PURE__ */ (0,
|
|
4453
|
-
/* @__PURE__ */ (0,
|
|
4454
|
-
/* @__PURE__ */ (0,
|
|
4765
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
4766
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
|
|
4767
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
4768
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
|
|
4455
4769
|
] })
|
|
4456
4770
|
}
|
|
4457
4771
|
);
|
|
4458
4772
|
};
|
|
4459
4773
|
var CustomLinkToolbar = (props) => {
|
|
4460
|
-
const editor = (0,
|
|
4461
|
-
const Components = (0,
|
|
4774
|
+
const editor = (0, import_react35.useBlockNoteEditor)();
|
|
4775
|
+
const Components = (0, import_react35.useComponentsContext)();
|
|
4462
4776
|
const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
|
|
4463
|
-
return /* @__PURE__ */ (0,
|
|
4777
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
4464
4778
|
Components.LinkToolbar.Root,
|
|
4465
4779
|
{
|
|
4466
4780
|
className: "bn-toolbar bn-link-toolbar",
|
|
4467
4781
|
onMouseEnter: props.stopHideTimer,
|
|
4468
4782
|
onMouseLeave: props.startHideTimer,
|
|
4469
4783
|
children: [
|
|
4470
|
-
/* @__PURE__ */ (0,
|
|
4471
|
-
/* @__PURE__ */ (0,
|
|
4472
|
-
/* @__PURE__ */ (0,
|
|
4473
|
-
hasLinkPreview && /* @__PURE__ */ (0,
|
|
4784
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
|
|
4785
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.OpenLinkButton, { url: props.url }),
|
|
4786
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.DeleteLinkButton, { deleteLink: props.deleteLink }),
|
|
4787
|
+
hasLinkPreview && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ConvertToPreviewButton, { url: props.url })
|
|
4474
4788
|
]
|
|
4475
4789
|
}
|
|
4476
4790
|
);
|
|
@@ -4514,13 +4828,13 @@ function LumirEditor({
|
|
|
4514
4828
|
onError,
|
|
4515
4829
|
onImageDelete
|
|
4516
4830
|
}) {
|
|
4517
|
-
const [isUploading, setIsUploading] = (0,
|
|
4518
|
-
const [uploadProgress, setUploadProgress] = (0,
|
|
4519
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
4520
|
-
const floatingMenuFileInputRef = (0,
|
|
4521
|
-
const floatingMenuBlockRef = (0,
|
|
4522
|
-
const floatingMenuUploadStartTimeRef = (0,
|
|
4523
|
-
const handleError = (0,
|
|
4831
|
+
const [isUploading, setIsUploading] = (0, import_react34.useState)(false);
|
|
4832
|
+
const [uploadProgress, setUploadProgress] = (0, import_react34.useState)(null);
|
|
4833
|
+
const [errorMessage, setErrorMessage] = (0, import_react34.useState)(null);
|
|
4834
|
+
const floatingMenuFileInputRef = (0, import_react34.useRef)(null);
|
|
4835
|
+
const floatingMenuBlockRef = (0, import_react34.useRef)(null);
|
|
4836
|
+
const floatingMenuUploadStartTimeRef = (0, import_react34.useRef)(0);
|
|
4837
|
+
const handleError = (0, import_react34.useCallback)(
|
|
4524
4838
|
(error) => {
|
|
4525
4839
|
onError?.(error);
|
|
4526
4840
|
setErrorMessage(error.getUserMessage());
|
|
@@ -4528,10 +4842,12 @@ function LumirEditor({
|
|
|
4528
4842
|
},
|
|
4529
4843
|
[onError]
|
|
4530
4844
|
);
|
|
4531
|
-
const validatedContent = (0,
|
|
4532
|
-
return
|
|
4845
|
+
const validatedContent = (0, import_react34.useMemo)(() => {
|
|
4846
|
+
return liftFontSize(
|
|
4847
|
+
ContentUtils.validateContent(initialContent, initialEmptyBlocks)
|
|
4848
|
+
);
|
|
4533
4849
|
}, [initialContent, initialEmptyBlocks]);
|
|
4534
|
-
const tableConfig = (0,
|
|
4850
|
+
const tableConfig = (0, import_react34.useMemo)(() => {
|
|
4535
4851
|
return EditorConfig.getDefaultTableConfig(tables);
|
|
4536
4852
|
}, [
|
|
4537
4853
|
tables?.splitCells,
|
|
@@ -4539,10 +4855,10 @@ function LumirEditor({
|
|
|
4539
4855
|
tables?.cellTextColor,
|
|
4540
4856
|
tables?.headers
|
|
4541
4857
|
]);
|
|
4542
|
-
const headingConfig = (0,
|
|
4858
|
+
const headingConfig = (0, import_react34.useMemo)(() => {
|
|
4543
4859
|
return EditorConfig.getDefaultHeadingConfig(heading);
|
|
4544
4860
|
}, [heading?.levels?.join(",") ?? ""]);
|
|
4545
|
-
const disabledExtensions = (0,
|
|
4861
|
+
const disabledExtensions = (0, import_react34.useMemo)(() => {
|
|
4546
4862
|
return EditorConfig.getDisabledExtensions(
|
|
4547
4863
|
disableExtensions,
|
|
4548
4864
|
allowVideoUpload,
|
|
@@ -4550,18 +4866,18 @@ function LumirEditor({
|
|
|
4550
4866
|
allowFileUpload
|
|
4551
4867
|
);
|
|
4552
4868
|
}, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
|
|
4553
|
-
(0,
|
|
4869
|
+
(0, import_react34.useEffect)(() => {
|
|
4554
4870
|
DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
|
|
4555
4871
|
allowVideoUpload,
|
|
4556
4872
|
hasVideoInDisabled: disabledExtensions.includes("video"),
|
|
4557
4873
|
disabledList: disabledExtensions.slice(0, 15)
|
|
4558
4874
|
});
|
|
4559
4875
|
}, [allowVideoUpload, disabledExtensions]);
|
|
4560
|
-
const fileNameTransformRef = (0,
|
|
4561
|
-
(0,
|
|
4876
|
+
const fileNameTransformRef = (0, import_react34.useRef)(s3Upload?.fileNameTransform);
|
|
4877
|
+
(0, import_react34.useEffect)(() => {
|
|
4562
4878
|
fileNameTransformRef.current = s3Upload?.fileNameTransform;
|
|
4563
4879
|
}, [s3Upload?.fileNameTransform]);
|
|
4564
|
-
const memoizedS3Upload = (0,
|
|
4880
|
+
const memoizedS3Upload = (0, import_react34.useMemo)(() => {
|
|
4565
4881
|
if (!s3Upload) return void 0;
|
|
4566
4882
|
return {
|
|
4567
4883
|
apiEndpoint: s3Upload.apiEndpoint,
|
|
@@ -4590,7 +4906,7 @@ function LumirEditor({
|
|
|
4590
4906
|
s3Upload?.maxRetries,
|
|
4591
4907
|
s3Upload?.onProgress
|
|
4592
4908
|
]);
|
|
4593
|
-
const editor = (0,
|
|
4909
|
+
const editor = (0, import_react35.useCreateBlockNote)(
|
|
4594
4910
|
{
|
|
4595
4911
|
// HTML 미리보기 블록이 포함된 커스텀 스키마 사용
|
|
4596
4912
|
schema,
|
|
@@ -4794,27 +5110,40 @@ function LumirEditor({
|
|
|
4794
5110
|
if (editor && linkPreview?.apiEndpoint) {
|
|
4795
5111
|
editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
|
|
4796
5112
|
}
|
|
4797
|
-
(0,
|
|
5113
|
+
(0, import_react34.useEffect)(() => {
|
|
4798
5114
|
if (editor) {
|
|
4799
5115
|
editor.isEditable = editable;
|
|
4800
5116
|
}
|
|
4801
5117
|
}, [editor, editable]);
|
|
4802
|
-
(0,
|
|
5118
|
+
(0, import_react34.useEffect)(() => {
|
|
5119
|
+
if (!editor || !floatingMenu) return;
|
|
5120
|
+
const ft = editor.formattingToolbar;
|
|
5121
|
+
if (!ft?.onUpdate) return;
|
|
5122
|
+
const unsubscribe = ft.onUpdate((state) => {
|
|
5123
|
+
if (!state?.show) return;
|
|
5124
|
+
const selection = editor._tiptapEditor?.state?.selection;
|
|
5125
|
+
if (isSuppressiblePopupSelection(editor, selection)) {
|
|
5126
|
+
ft.closeMenu();
|
|
5127
|
+
}
|
|
5128
|
+
});
|
|
5129
|
+
return unsubscribe;
|
|
5130
|
+
}, [editor, floatingMenu]);
|
|
5131
|
+
(0, import_react34.useEffect)(() => {
|
|
4803
5132
|
if (!editor || !onContentChange) return;
|
|
4804
5133
|
const handleContentChange = () => {
|
|
4805
5134
|
const blocks = editor.topLevelBlocks;
|
|
4806
|
-
const patched = injectVerticalAlignment(blocks, editor);
|
|
5135
|
+
const patched = lowerFontSize(injectVerticalAlignment(blocks, editor));
|
|
4807
5136
|
onContentChange(patched);
|
|
4808
5137
|
};
|
|
4809
5138
|
return editor.onEditorContentChange(handleContentChange);
|
|
4810
5139
|
}, [editor, onContentChange]);
|
|
4811
|
-
const previousMediaUrlsRef = (0,
|
|
4812
|
-
(0,
|
|
5140
|
+
const previousMediaUrlsRef = (0, import_react34.useRef)(/* @__PURE__ */ new Set());
|
|
5141
|
+
(0, import_react34.useEffect)(() => {
|
|
4813
5142
|
if (!editor) return;
|
|
4814
5143
|
const initialBlocks = editor.topLevelBlocks;
|
|
4815
5144
|
previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
|
|
4816
5145
|
}, [editor]);
|
|
4817
|
-
(0,
|
|
5146
|
+
(0, import_react34.useEffect)(() => {
|
|
4818
5147
|
if (!editor || !onImageDelete) return;
|
|
4819
5148
|
const handleMediaDeleteCheck = () => {
|
|
4820
5149
|
const currentBlocks = editor.topLevelBlocks;
|
|
@@ -4828,7 +5157,7 @@ function LumirEditor({
|
|
|
4828
5157
|
};
|
|
4829
5158
|
return editor.onEditorContentChange(handleMediaDeleteCheck);
|
|
4830
5159
|
}, [editor, onImageDelete]);
|
|
4831
|
-
(0,
|
|
5160
|
+
(0, import_react34.useEffect)(() => {
|
|
4832
5161
|
const el = editor?.domElement;
|
|
4833
5162
|
if (!el) return;
|
|
4834
5163
|
const handleDragOver = (e) => {
|
|
@@ -4959,20 +5288,20 @@ function LumirEditor({
|
|
|
4959
5288
|
el.removeEventListener("drop", handleDrop, { capture: true });
|
|
4960
5289
|
};
|
|
4961
5290
|
}, [editor, allowVideoUpload]);
|
|
4962
|
-
const computedSideMenu = (0,
|
|
5291
|
+
const computedSideMenu = (0, import_react34.useMemo)(() => {
|
|
4963
5292
|
return sideMenuAddButton ? sideMenu : false;
|
|
4964
5293
|
}, [sideMenuAddButton, sideMenu]);
|
|
4965
|
-
const DragHandleOnlySideMenu = (0,
|
|
4966
|
-
return (props) => /* @__PURE__ */ (0,
|
|
5294
|
+
const DragHandleOnlySideMenu = (0, import_react34.useMemo)(() => {
|
|
5295
|
+
return (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.DragHandleButton, { ...props }) });
|
|
4967
5296
|
}, []);
|
|
4968
|
-
return /* @__PURE__ */ (0,
|
|
5297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
4969
5298
|
"div",
|
|
4970
5299
|
{
|
|
4971
5300
|
className: cn("lumirEditor", className),
|
|
4972
5301
|
style: { position: "relative", display: "flex", flexDirection: "column" },
|
|
4973
5302
|
children: [
|
|
4974
|
-
floatingMenu && editor && /* @__PURE__ */ (0,
|
|
4975
|
-
/* @__PURE__ */ (0,
|
|
5303
|
+
floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
5304
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
4976
5305
|
"input",
|
|
4977
5306
|
{
|
|
4978
5307
|
ref: floatingMenuFileInputRef,
|
|
@@ -5043,7 +5372,7 @@ function LumirEditor({
|
|
|
5043
5372
|
}
|
|
5044
5373
|
}
|
|
5045
5374
|
),
|
|
5046
|
-
/* @__PURE__ */ (0,
|
|
5375
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5047
5376
|
FloatingMenu,
|
|
5048
5377
|
{
|
|
5049
5378
|
editor,
|
|
@@ -5075,7 +5404,7 @@ function LumirEditor({
|
|
|
5075
5404
|
}
|
|
5076
5405
|
)
|
|
5077
5406
|
] }),
|
|
5078
|
-
/* @__PURE__ */ (0,
|
|
5407
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5079
5408
|
import_mantine.BlockNoteView,
|
|
5080
5409
|
{
|
|
5081
5410
|
editor,
|
|
@@ -5090,21 +5419,21 @@ function LumirEditor({
|
|
|
5090
5419
|
tableHandles: false,
|
|
5091
5420
|
onSelectionChange,
|
|
5092
5421
|
children: [
|
|
5093
|
-
tableHandles && /* @__PURE__ */ (0,
|
|
5094
|
-
formattingToolbar && /* @__PURE__ */ (0,
|
|
5095
|
-
|
|
5422
|
+
tableHandles && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LumirTableHandlesController, {}),
|
|
5423
|
+
formattingToolbar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5424
|
+
import_react35.FormattingToolbarController,
|
|
5096
5425
|
{
|
|
5097
5426
|
formattingToolbar: CustomFormattingToolbar
|
|
5098
5427
|
}
|
|
5099
5428
|
),
|
|
5100
|
-
linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0,
|
|
5101
|
-
/* @__PURE__ */ (0,
|
|
5102
|
-
|
|
5429
|
+
linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.LinkToolbarController, {})),
|
|
5430
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5431
|
+
import_react35.SuggestionMenuController,
|
|
5103
5432
|
{
|
|
5104
5433
|
triggerCharacter: "/",
|
|
5105
|
-
getItems: (0,
|
|
5434
|
+
getItems: (0, import_react34.useCallback)(
|
|
5106
5435
|
async (query) => {
|
|
5107
|
-
const items = (0,
|
|
5436
|
+
const items = (0, import_react35.getDefaultReactSlashMenuItems)(editor);
|
|
5108
5437
|
const filtered = items.filter((item) => {
|
|
5109
5438
|
const key = (item?.key || "").toString().toLowerCase();
|
|
5110
5439
|
const title = (item?.title || "").toString().toLowerCase();
|
|
@@ -5146,7 +5475,7 @@ function LumirEditor({
|
|
|
5146
5475
|
},
|
|
5147
5476
|
aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
|
|
5148
5477
|
group: "Embeds",
|
|
5149
|
-
icon: /* @__PURE__ */ (0,
|
|
5478
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5150
5479
|
"svg",
|
|
5151
5480
|
{
|
|
5152
5481
|
width: "18",
|
|
@@ -5158,8 +5487,8 @@ function LumirEditor({
|
|
|
5158
5487
|
strokeLinecap: "round",
|
|
5159
5488
|
strokeLinejoin: "round",
|
|
5160
5489
|
children: [
|
|
5161
|
-
/* @__PURE__ */ (0,
|
|
5162
|
-
/* @__PURE__ */ (0,
|
|
5490
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("polyline", { points: "16 18 22 12 16 6" }),
|
|
5491
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("polyline", { points: "8 6 2 12 8 18" })
|
|
5163
5492
|
]
|
|
5164
5493
|
}
|
|
5165
5494
|
),
|
|
@@ -5184,7 +5513,7 @@ function LumirEditor({
|
|
|
5184
5513
|
"\uD504\uB9AC\uBDF0"
|
|
5185
5514
|
],
|
|
5186
5515
|
group: "Embeds",
|
|
5187
|
-
icon: /* @__PURE__ */ (0,
|
|
5516
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5188
5517
|
"svg",
|
|
5189
5518
|
{
|
|
5190
5519
|
width: "18",
|
|
@@ -5196,8 +5525,8 @@ function LumirEditor({
|
|
|
5196
5525
|
strokeLinecap: "round",
|
|
5197
5526
|
strokeLinejoin: "round",
|
|
5198
5527
|
children: [
|
|
5199
|
-
/* @__PURE__ */ (0,
|
|
5200
|
-
/* @__PURE__ */ (0,
|
|
5528
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
5529
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
5201
5530
|
]
|
|
5202
5531
|
}
|
|
5203
5532
|
),
|
|
@@ -5233,21 +5562,21 @@ function LumirEditor({
|
|
|
5233
5562
|
)
|
|
5234
5563
|
}
|
|
5235
5564
|
),
|
|
5236
|
-
!sideMenuAddButton && /* @__PURE__ */ (0,
|
|
5565
|
+
!sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react35.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
|
|
5237
5566
|
]
|
|
5238
5567
|
}
|
|
5239
5568
|
),
|
|
5240
|
-
isUploading && /* @__PURE__ */ (0,
|
|
5241
|
-
/* @__PURE__ */ (0,
|
|
5242
|
-
uploadProgress !== null && /* @__PURE__ */ (0,
|
|
5569
|
+
isUploading && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
|
|
5570
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "lumirEditor-spinner" }),
|
|
5571
|
+
uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
|
|
5243
5572
|
uploadProgress,
|
|
5244
5573
|
"%"
|
|
5245
5574
|
] })
|
|
5246
5575
|
] }),
|
|
5247
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
5248
|
-
/* @__PURE__ */ (0,
|
|
5249
|
-
/* @__PURE__ */ (0,
|
|
5250
|
-
/* @__PURE__ */ (0,
|
|
5576
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "lumirEditor-error-toast", children: [
|
|
5577
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
|
|
5578
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),
|
|
5579
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5251
5580
|
"button",
|
|
5252
5581
|
{
|
|
5253
5582
|
className: "lumirEditor-error-close",
|
|
@@ -5266,7 +5595,10 @@ function LumirEditor({
|
|
|
5266
5595
|
BACKGROUND_COLORS,
|
|
5267
5596
|
ContentUtils,
|
|
5268
5597
|
EditorConfig,
|
|
5598
|
+
FONT_SIZE_PRESETS,
|
|
5269
5599
|
FloatingMenu,
|
|
5600
|
+
FontSize,
|
|
5601
|
+
FontSizeButton,
|
|
5270
5602
|
HtmlPreviewBlock,
|
|
5271
5603
|
HtmlPreviewSchema,
|
|
5272
5604
|
LinkPreviewBlock,
|
|
@@ -5277,6 +5609,8 @@ function LumirEditor({
|
|
|
5277
5609
|
cn,
|
|
5278
5610
|
createS3Uploader,
|
|
5279
5611
|
fetchLinkMetadata,
|
|
5280
|
-
getHexFromColorValue
|
|
5612
|
+
getHexFromColorValue,
|
|
5613
|
+
liftFontSize,
|
|
5614
|
+
lowerFontSize
|
|
5281
5615
|
});
|
|
5282
5616
|
//# sourceMappingURL=index.js.map
|