@lumir-company/editor 0.4.14 → 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 +135 -8
- package/dist/index.d.mts +81 -1
- package/dist/index.d.ts +81 -1
- package/dist/index.js +1548 -457
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1492 -379
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +258 -41
- package/package.json +4 -2
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/components/LumirEditor.tsx
|
|
4
|
-
import { useEffect as
|
|
4
|
+
import { useEffect as useEffect11, useMemo as useMemo7, useCallback as useCallback20, useState as useState12, useRef as useRef12 } from "react";
|
|
5
5
|
import {
|
|
6
6
|
useCreateBlockNote,
|
|
7
7
|
SideMenu as BlockSideMenu,
|
|
@@ -11,14 +11,15 @@ import {
|
|
|
11
11
|
getDefaultReactSlashMenuItems,
|
|
12
12
|
LinkToolbarController,
|
|
13
13
|
FormattingToolbarController,
|
|
14
|
-
useBlockNoteEditor as
|
|
15
|
-
useComponentsContext as
|
|
14
|
+
useBlockNoteEditor as useBlockNoteEditor6,
|
|
15
|
+
useComponentsContext as useComponentsContext5,
|
|
16
16
|
EditLinkButton,
|
|
17
17
|
OpenLinkButton,
|
|
18
18
|
DeleteLinkButton
|
|
19
19
|
} from "@blocknote/react";
|
|
20
20
|
import { BlockNoteView } from "@blocknote/mantine";
|
|
21
21
|
import { insertOrUpdateBlock } from "@blocknote/core";
|
|
22
|
+
import { ko, en } from "@blocknote/core/locales";
|
|
22
23
|
|
|
23
24
|
// src/utils/cn.ts
|
|
24
25
|
function cn(...inputs) {
|
|
@@ -1220,9 +1221,32 @@ var VideoBlock = createReactBlockSpec2(
|
|
|
1220
1221
|
}
|
|
1221
1222
|
);
|
|
1222
1223
|
|
|
1224
|
+
// src/styles/FontSizeStyle.tsx
|
|
1225
|
+
import { createReactStyleSpec } from "@blocknote/react";
|
|
1226
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
1227
|
+
var FontSize = createReactStyleSpec(
|
|
1228
|
+
{
|
|
1229
|
+
type: "fontSize",
|
|
1230
|
+
propSchema: "string"
|
|
1231
|
+
},
|
|
1232
|
+
{
|
|
1233
|
+
render: (props) => /* @__PURE__ */ jsx3("span", { style: { fontSize: props.value }, ref: props.contentRef })
|
|
1234
|
+
}
|
|
1235
|
+
);
|
|
1236
|
+
var FONT_SIZE_PRESETS = [
|
|
1237
|
+
"10px",
|
|
1238
|
+
"12px",
|
|
1239
|
+
"14px",
|
|
1240
|
+
"16px",
|
|
1241
|
+
"18px",
|
|
1242
|
+
"20px",
|
|
1243
|
+
"24px",
|
|
1244
|
+
"28px"
|
|
1245
|
+
];
|
|
1246
|
+
|
|
1223
1247
|
// src/blocks/HtmlPreview.tsx
|
|
1224
1248
|
import { useState as useState3, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect3 } from "react";
|
|
1225
|
-
import { jsx as
|
|
1249
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1226
1250
|
var MIN_HEIGHT = 100;
|
|
1227
1251
|
var MAX_HEIGHT = 1200;
|
|
1228
1252
|
var ensureCharset = (html) => {
|
|
@@ -1397,7 +1421,7 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1397
1421
|
},
|
|
1398
1422
|
onClick: () => setIsExpanded(!isExpanded),
|
|
1399
1423
|
children: [
|
|
1400
|
-
/* @__PURE__ */
|
|
1424
|
+
/* @__PURE__ */ jsx4(
|
|
1401
1425
|
"svg",
|
|
1402
1426
|
{
|
|
1403
1427
|
width: "16",
|
|
@@ -1412,15 +1436,15 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1412
1436
|
transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
1413
1437
|
transition: "transform 0.2s"
|
|
1414
1438
|
},
|
|
1415
|
-
children: /* @__PURE__ */
|
|
1439
|
+
children: /* @__PURE__ */ jsx4("polyline", { points: "6 9 12 15 18 9" })
|
|
1416
1440
|
}
|
|
1417
1441
|
),
|
|
1418
|
-
/* @__PURE__ */
|
|
1442
|
+
/* @__PURE__ */ jsx4("span", { style: { fontWeight: 500, fontSize: "14px" }, children: fileName })
|
|
1419
1443
|
]
|
|
1420
1444
|
}
|
|
1421
1445
|
),
|
|
1422
1446
|
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
|
|
1423
|
-
/* @__PURE__ */
|
|
1447
|
+
/* @__PURE__ */ jsx4(
|
|
1424
1448
|
"button",
|
|
1425
1449
|
{
|
|
1426
1450
|
onClick: handleOpenNewWindow,
|
|
@@ -1455,15 +1479,15 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1455
1479
|
strokeLinecap: "round",
|
|
1456
1480
|
strokeLinejoin: "round",
|
|
1457
1481
|
children: [
|
|
1458
|
-
/* @__PURE__ */
|
|
1459
|
-
/* @__PURE__ */
|
|
1460
|
-
/* @__PURE__ */
|
|
1482
|
+
/* @__PURE__ */ jsx4("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
|
|
1483
|
+
/* @__PURE__ */ jsx4("polyline", { points: "15 3 21 3 21 9" }),
|
|
1484
|
+
/* @__PURE__ */ jsx4("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
|
|
1461
1485
|
]
|
|
1462
1486
|
}
|
|
1463
1487
|
)
|
|
1464
1488
|
}
|
|
1465
1489
|
),
|
|
1466
|
-
/* @__PURE__ */
|
|
1490
|
+
/* @__PURE__ */ jsx4(
|
|
1467
1491
|
"button",
|
|
1468
1492
|
{
|
|
1469
1493
|
onClick: handleExport,
|
|
@@ -1498,9 +1522,9 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1498
1522
|
strokeLinecap: "round",
|
|
1499
1523
|
strokeLinejoin: "round",
|
|
1500
1524
|
children: [
|
|
1501
|
-
/* @__PURE__ */
|
|
1502
|
-
/* @__PURE__ */
|
|
1503
|
-
/* @__PURE__ */
|
|
1525
|
+
/* @__PURE__ */ jsx4("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
1526
|
+
/* @__PURE__ */ jsx4("polyline", { points: "7 10 12 15 17 10" }),
|
|
1527
|
+
/* @__PURE__ */ jsx4("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
|
|
1504
1528
|
]
|
|
1505
1529
|
}
|
|
1506
1530
|
)
|
|
@@ -1519,7 +1543,7 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1519
1543
|
position: "relative"
|
|
1520
1544
|
},
|
|
1521
1545
|
children: [
|
|
1522
|
-
/* @__PURE__ */
|
|
1546
|
+
/* @__PURE__ */ jsx4(
|
|
1523
1547
|
"iframe",
|
|
1524
1548
|
{
|
|
1525
1549
|
src: blobUrl || "about:blank",
|
|
@@ -1536,7 +1560,7 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1536
1560
|
loading: "lazy"
|
|
1537
1561
|
}
|
|
1538
1562
|
),
|
|
1539
|
-
/* @__PURE__ */
|
|
1563
|
+
/* @__PURE__ */ jsx4(
|
|
1540
1564
|
"div",
|
|
1541
1565
|
{
|
|
1542
1566
|
onMouseDown: handleResizeStart,
|
|
@@ -1561,7 +1585,7 @@ var HtmlPreviewBlock = createReactBlockSpec3(
|
|
|
1561
1585
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1562
1586
|
}
|
|
1563
1587
|
},
|
|
1564
|
-
children: /* @__PURE__ */
|
|
1588
|
+
children: /* @__PURE__ */ jsx4(
|
|
1565
1589
|
"div",
|
|
1566
1590
|
{
|
|
1567
1591
|
style: {
|
|
@@ -1591,64 +1615,68 @@ var schema = BlockNoteSchema.create({
|
|
|
1591
1615
|
video: VideoBlock
|
|
1592
1616
|
},
|
|
1593
1617
|
inlineContentSpecs: defaultInlineContentSpecs,
|
|
1594
|
-
styleSpecs:
|
|
1618
|
+
styleSpecs: {
|
|
1619
|
+
...defaultStyleSpecs,
|
|
1620
|
+
// 인라인 글자 크기. 저장 JSON 직렬화는 형제 키 방식(font-size-serialization.ts) 사용.
|
|
1621
|
+
fontSize: FontSize
|
|
1622
|
+
}
|
|
1595
1623
|
});
|
|
1596
1624
|
|
|
1597
1625
|
// src/components/FloatingMenu/index.tsx
|
|
1598
|
-
import { useState as
|
|
1626
|
+
import { useState as useState8, useEffect as useEffect8, useRef as useRef9 } from "react";
|
|
1599
1627
|
|
|
1600
1628
|
// src/components/FloatingMenu/Icons.tsx
|
|
1601
|
-
import { jsx as
|
|
1629
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1602
1630
|
var Icons = {
|
|
1603
|
-
undo: /* @__PURE__ */
|
|
1604
|
-
redo: /* @__PURE__ */
|
|
1605
|
-
bold: /* @__PURE__ */
|
|
1606
|
-
italic: /* @__PURE__ */
|
|
1607
|
-
underline: /* @__PURE__ */
|
|
1608
|
-
strikethrough: /* @__PURE__ */
|
|
1609
|
-
alignLeft: /* @__PURE__ */
|
|
1610
|
-
alignCenter: /* @__PURE__ */
|
|
1611
|
-
alignRight: /* @__PURE__ */
|
|
1612
|
-
bulletList: /* @__PURE__ */
|
|
1613
|
-
numberedList: /* @__PURE__ */
|
|
1614
|
-
image: /* @__PURE__ */
|
|
1615
|
-
expandMore: /* @__PURE__ */
|
|
1616
|
-
textColor: /* @__PURE__ */
|
|
1631
|
+
undo: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1632
|
+
redo: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1633
|
+
bold: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1634
|
+
italic: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }),
|
|
1635
|
+
underline: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1636
|
+
strikethrough: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }),
|
|
1637
|
+
alignLeft: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
|
|
1638
|
+
alignCenter: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
|
|
1639
|
+
alignRight: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
|
|
1640
|
+
bulletList: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1641
|
+
numberedList: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
|
|
1642
|
+
image: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1643
|
+
expandMore: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx5("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }),
|
|
1644
|
+
textColor: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z" }) }),
|
|
1617
1645
|
bgColor: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1618
|
-
/* @__PURE__ */
|
|
1619
|
-
/* @__PURE__ */
|
|
1646
|
+
/* @__PURE__ */ jsx5("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" }),
|
|
1647
|
+
/* @__PURE__ */ jsx5("path", { fillOpacity: ".36", d: "M0 20h24v4H0z" })
|
|
1620
1648
|
] }),
|
|
1621
|
-
link: /* @__PURE__ */
|
|
1622
|
-
chevronRight: /* @__PURE__ */
|
|
1623
|
-
chevronLeft: /* @__PURE__ */
|
|
1624
|
-
table: /* @__PURE__ */
|
|
1625
|
-
htmlFile: /* @__PURE__ */
|
|
1649
|
+
link: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1650
|
+
chevronRight: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }),
|
|
1651
|
+
chevronLeft: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
|
|
1652
|
+
table: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1653
|
+
htmlFile: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) })
|
|
1626
1654
|
};
|
|
1627
1655
|
var BlockTypeIcons = {
|
|
1628
|
-
paragraph: /* @__PURE__ */
|
|
1629
|
-
h1: /* @__PURE__ */
|
|
1630
|
-
h2: /* @__PURE__ */
|
|
1631
|
-
h3: /* @__PURE__ */
|
|
1632
|
-
h4: /* @__PURE__ */
|
|
1633
|
-
h5: /* @__PURE__ */
|
|
1634
|
-
h6: /* @__PURE__ */
|
|
1656
|
+
paragraph: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M5 5h14v2H5zM5 11h14v2H5zM5 17h10v2H5z" }) }),
|
|
1657
|
+
h1: /* @__PURE__ */ jsx5("span", { className: "lumir-block-icon-text", children: "H1" }),
|
|
1658
|
+
h2: /* @__PURE__ */ jsx5("span", { className: "lumir-block-icon-text", children: "H2" }),
|
|
1659
|
+
h3: /* @__PURE__ */ jsx5("span", { className: "lumir-block-icon-text", children: "H3" }),
|
|
1660
|
+
h4: /* @__PURE__ */ jsx5("span", { className: "lumir-block-icon-text", children: "H4" }),
|
|
1661
|
+
h5: /* @__PURE__ */ jsx5("span", { className: "lumir-block-icon-text", children: "H5" }),
|
|
1662
|
+
h6: /* @__PURE__ */ jsx5("span", { className: "lumir-block-icon-text", children: "H6" }),
|
|
1635
1663
|
toggleH1: /* @__PURE__ */ jsxs4("span", { className: "lumir-block-icon-toggle", children: [
|
|
1636
|
-
/* @__PURE__ */
|
|
1637
|
-
/* @__PURE__ */
|
|
1664
|
+
/* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx5("path", { d: "M8 5v14l11-7z" }) }),
|
|
1665
|
+
/* @__PURE__ */ jsx5("span", { children: "H1" })
|
|
1638
1666
|
] }),
|
|
1639
1667
|
toggleH2: /* @__PURE__ */ jsxs4("span", { className: "lumir-block-icon-toggle", children: [
|
|
1640
|
-
/* @__PURE__ */
|
|
1641
|
-
/* @__PURE__ */
|
|
1668
|
+
/* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx5("path", { d: "M8 5v14l11-7z" }) }),
|
|
1669
|
+
/* @__PURE__ */ jsx5("span", { children: "H2" })
|
|
1642
1670
|
] }),
|
|
1643
1671
|
toggleH3: /* @__PURE__ */ jsxs4("span", { className: "lumir-block-icon-toggle", children: [
|
|
1644
|
-
/* @__PURE__ */
|
|
1645
|
-
/* @__PURE__ */
|
|
1672
|
+
/* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx5("path", { d: "M8 5v14l11-7z" }) }),
|
|
1673
|
+
/* @__PURE__ */ jsx5("span", { children: "H3" })
|
|
1646
1674
|
] }),
|
|
1647
|
-
quote: /* @__PURE__ */
|
|
1648
|
-
codeBlock: /* @__PURE__ */
|
|
1675
|
+
quote: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }),
|
|
1676
|
+
codeBlock: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("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" }) }),
|
|
1649
1677
|
toggleList: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1650
|
-
/* @__PURE__ */
|
|
1651
|
-
/* @__PURE__ */
|
|
1678
|
+
/* @__PURE__ */ jsx5("path", { d: "M10 6h10v2H10zM10 11h10v2H10zM10 16h10v2H10z" }),
|
|
1679
|
+
/* @__PURE__ */ jsx5(
|
|
1652
1680
|
"path",
|
|
1653
1681
|
{
|
|
1654
1682
|
d: "M4 8l4 4-4 4",
|
|
@@ -1661,14 +1689,14 @@ var BlockTypeIcons = {
|
|
|
1661
1689
|
)
|
|
1662
1690
|
] }),
|
|
1663
1691
|
bulletList: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1664
|
-
/* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1667
|
-
/* @__PURE__ */
|
|
1692
|
+
/* @__PURE__ */ jsx5("circle", { cx: "4", cy: "6", r: "1.5" }),
|
|
1693
|
+
/* @__PURE__ */ jsx5("circle", { cx: "4", cy: "12", r: "1.5" }),
|
|
1694
|
+
/* @__PURE__ */ jsx5("circle", { cx: "4", cy: "18", r: "1.5" }),
|
|
1695
|
+
/* @__PURE__ */ jsx5("path", { d: "M8 5h12v2H8zM8 11h12v2H8zM8 17h12v2H8z" })
|
|
1668
1696
|
] }),
|
|
1669
|
-
numberedList: /* @__PURE__ */
|
|
1697
|
+
numberedList: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx5("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
|
|
1670
1698
|
checkList: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
1671
|
-
/* @__PURE__ */
|
|
1699
|
+
/* @__PURE__ */ jsx5(
|
|
1672
1700
|
"rect",
|
|
1673
1701
|
{
|
|
1674
1702
|
x: "3",
|
|
@@ -1681,7 +1709,7 @@ var BlockTypeIcons = {
|
|
|
1681
1709
|
strokeWidth: "1.5"
|
|
1682
1710
|
}
|
|
1683
1711
|
),
|
|
1684
|
-
/* @__PURE__ */
|
|
1712
|
+
/* @__PURE__ */ jsx5(
|
|
1685
1713
|
"path",
|
|
1686
1714
|
{
|
|
1687
1715
|
d: "M4.5 7l1.5 1.5 3-3",
|
|
@@ -1692,8 +1720,8 @@ var BlockTypeIcons = {
|
|
|
1692
1720
|
strokeLinejoin: "round"
|
|
1693
1721
|
}
|
|
1694
1722
|
),
|
|
1695
|
-
/* @__PURE__ */
|
|
1696
|
-
/* @__PURE__ */
|
|
1723
|
+
/* @__PURE__ */ jsx5("path", { d: "M12 6h8v2h-8z" }),
|
|
1724
|
+
/* @__PURE__ */ jsx5(
|
|
1697
1725
|
"rect",
|
|
1698
1726
|
{
|
|
1699
1727
|
x: "3",
|
|
@@ -1706,17 +1734,17 @@ var BlockTypeIcons = {
|
|
|
1706
1734
|
strokeWidth: "1.5"
|
|
1707
1735
|
}
|
|
1708
1736
|
),
|
|
1709
|
-
/* @__PURE__ */
|
|
1737
|
+
/* @__PURE__ */ jsx5("path", { d: "M12 16h8v2h-8z" })
|
|
1710
1738
|
] })
|
|
1711
1739
|
};
|
|
1712
1740
|
|
|
1713
1741
|
// src/components/FloatingMenu/components/ToolbarDivider.tsx
|
|
1714
|
-
import { jsx as
|
|
1715
|
-
var ToolbarDivider = () => /* @__PURE__ */
|
|
1742
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
1743
|
+
var ToolbarDivider = () => /* @__PURE__ */ jsx6("div", { className: "lumir-toolbar-divider" });
|
|
1716
1744
|
|
|
1717
1745
|
// src/components/FloatingMenu/components/UndoRedoButtons.tsx
|
|
1718
1746
|
import { useCallback as useCallback4 } from "react";
|
|
1719
|
-
import { jsx as
|
|
1747
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1720
1748
|
var UndoRedoButtons = ({ editor }) => {
|
|
1721
1749
|
const handleUndo = useCallback4(() => {
|
|
1722
1750
|
try {
|
|
@@ -1736,7 +1764,7 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
1736
1764
|
e.preventDefault();
|
|
1737
1765
|
}, []);
|
|
1738
1766
|
return /* @__PURE__ */ jsxs5("div", { className: "lumir-toolbar-group", children: [
|
|
1739
|
-
/* @__PURE__ */
|
|
1767
|
+
/* @__PURE__ */ jsx7(
|
|
1740
1768
|
"button",
|
|
1741
1769
|
{
|
|
1742
1770
|
className: "lumir-toolbar-btn",
|
|
@@ -1747,7 +1775,7 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
1747
1775
|
children: Icons.undo
|
|
1748
1776
|
}
|
|
1749
1777
|
),
|
|
1750
|
-
/* @__PURE__ */
|
|
1778
|
+
/* @__PURE__ */ jsx7(
|
|
1751
1779
|
"button",
|
|
1752
1780
|
{
|
|
1753
1781
|
className: "lumir-toolbar-btn",
|
|
@@ -1763,7 +1791,7 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
1763
1791
|
|
|
1764
1792
|
// src/components/FloatingMenu/components/TextStyleButton.tsx
|
|
1765
1793
|
import { useCallback as useCallback5 } from "react";
|
|
1766
|
-
import { jsx as
|
|
1794
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
1767
1795
|
var iconMap = {
|
|
1768
1796
|
bold: Icons.bold,
|
|
1769
1797
|
italic: Icons.italic,
|
|
@@ -1799,7 +1827,7 @@ var TextStyleButton = ({
|
|
|
1799
1827
|
const handleMouseDown = useCallback5((e) => {
|
|
1800
1828
|
e.preventDefault();
|
|
1801
1829
|
}, []);
|
|
1802
|
-
return /* @__PURE__ */
|
|
1830
|
+
return /* @__PURE__ */ jsx8(
|
|
1803
1831
|
"button",
|
|
1804
1832
|
{
|
|
1805
1833
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -1814,7 +1842,67 @@ var TextStyleButton = ({
|
|
|
1814
1842
|
|
|
1815
1843
|
// src/components/FloatingMenu/components/AlignButton.tsx
|
|
1816
1844
|
import { useCallback as useCallback6 } from "react";
|
|
1817
|
-
|
|
1845
|
+
|
|
1846
|
+
// src/utils/prosemirror-table-utils.ts
|
|
1847
|
+
function getSelectedCellPositions(editor) {
|
|
1848
|
+
const tiptap = editor._tiptapEditor;
|
|
1849
|
+
if (!tiptap) return [];
|
|
1850
|
+
const { state } = tiptap;
|
|
1851
|
+
const { selection } = state;
|
|
1852
|
+
if (typeof selection.forEachCell === "function") {
|
|
1853
|
+
const positions = [];
|
|
1854
|
+
selection.forEachCell((_node, pos) => {
|
|
1855
|
+
positions.push(pos);
|
|
1856
|
+
});
|
|
1857
|
+
return positions;
|
|
1858
|
+
}
|
|
1859
|
+
const $pos = selection.$from;
|
|
1860
|
+
for (let depth = $pos.depth; depth > 0; depth--) {
|
|
1861
|
+
const node = $pos.node(depth);
|
|
1862
|
+
if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
|
|
1863
|
+
return [$pos.before(depth)];
|
|
1864
|
+
}
|
|
1865
|
+
}
|
|
1866
|
+
return [];
|
|
1867
|
+
}
|
|
1868
|
+
function setCellAttrAtPositions(editor, positions, attr, value) {
|
|
1869
|
+
const tiptap = editor?._tiptapEditor;
|
|
1870
|
+
if (!tiptap || positions.length === 0) return false;
|
|
1871
|
+
let tr = tiptap.state.tr;
|
|
1872
|
+
let changed = false;
|
|
1873
|
+
for (const pos of positions) {
|
|
1874
|
+
const node = tr.doc.nodeAt(pos);
|
|
1875
|
+
if (node && (node.type.name === "tableCell" || node.type.name === "tableHeader")) {
|
|
1876
|
+
tr = tr.setNodeMarkup(pos, void 0, { ...node.attrs, [attr]: value });
|
|
1877
|
+
changed = true;
|
|
1878
|
+
}
|
|
1879
|
+
}
|
|
1880
|
+
if (changed) {
|
|
1881
|
+
tiptap.view?.dispatch(tr);
|
|
1882
|
+
}
|
|
1883
|
+
return changed;
|
|
1884
|
+
}
|
|
1885
|
+
function setSelectedCellsAttr(editor, attr, value) {
|
|
1886
|
+
return setCellAttrAtPositions(
|
|
1887
|
+
editor,
|
|
1888
|
+
getSelectedCellPositions(editor),
|
|
1889
|
+
attr,
|
|
1890
|
+
value
|
|
1891
|
+
);
|
|
1892
|
+
}
|
|
1893
|
+
function isInTableCell(editor) {
|
|
1894
|
+
return getSelectedCellPositions(editor).length > 0;
|
|
1895
|
+
}
|
|
1896
|
+
function getFirstSelectedCellAttr(editor, attr) {
|
|
1897
|
+
const tiptap = editor?._tiptapEditor;
|
|
1898
|
+
const positions = getSelectedCellPositions(editor);
|
|
1899
|
+
if (!tiptap || positions.length === 0) return void 0;
|
|
1900
|
+
const node = tiptap.state.doc.nodeAt(positions[0]);
|
|
1901
|
+
return node?.attrs?.[attr];
|
|
1902
|
+
}
|
|
1903
|
+
|
|
1904
|
+
// src/components/FloatingMenu/components/AlignButton.tsx
|
|
1905
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
1818
1906
|
var iconMap2 = {
|
|
1819
1907
|
left: Icons.alignLeft,
|
|
1820
1908
|
center: Icons.alignCenter,
|
|
@@ -1831,6 +1919,9 @@ var AlignButton = ({
|
|
|
1831
1919
|
}) => {
|
|
1832
1920
|
const getCurrentAlignment = () => {
|
|
1833
1921
|
try {
|
|
1922
|
+
if (isInTableCell(editor)) {
|
|
1923
|
+
return getFirstSelectedCellAttr(editor, "textAlignment") || "left";
|
|
1924
|
+
}
|
|
1834
1925
|
const block = editor?.getTextCursorPosition()?.block;
|
|
1835
1926
|
return block?.props?.textAlignment || "left";
|
|
1836
1927
|
} catch {
|
|
@@ -1840,6 +1931,9 @@ var AlignButton = ({
|
|
|
1840
1931
|
const isActive = getCurrentAlignment() === alignment;
|
|
1841
1932
|
const handleClick = useCallback6(() => {
|
|
1842
1933
|
try {
|
|
1934
|
+
if (setSelectedCellsAttr(editor, "textAlignment", alignment)) {
|
|
1935
|
+
return;
|
|
1936
|
+
}
|
|
1843
1937
|
const block = editor?.getTextCursorPosition()?.block;
|
|
1844
1938
|
if (block && editor?.updateBlock) {
|
|
1845
1939
|
editor.updateBlock(block, { props: { textAlignment: alignment } });
|
|
@@ -1851,7 +1945,7 @@ var AlignButton = ({
|
|
|
1851
1945
|
const handleMouseDown = useCallback6((e) => {
|
|
1852
1946
|
e.preventDefault();
|
|
1853
1947
|
}, []);
|
|
1854
|
-
return /* @__PURE__ */
|
|
1948
|
+
return /* @__PURE__ */ jsx9(
|
|
1855
1949
|
"button",
|
|
1856
1950
|
{
|
|
1857
1951
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -1866,7 +1960,7 @@ var AlignButton = ({
|
|
|
1866
1960
|
|
|
1867
1961
|
// src/components/FloatingMenu/components/ListButton.tsx
|
|
1868
1962
|
import { useCallback as useCallback7 } from "react";
|
|
1869
|
-
import { jsx as
|
|
1963
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
1870
1964
|
var iconMap3 = {
|
|
1871
1965
|
bullet: Icons.bulletList,
|
|
1872
1966
|
numbered: Icons.numberedList
|
|
@@ -1901,7 +1995,7 @@ var ListButton = ({ editor, type }) => {
|
|
|
1901
1995
|
const handleMouseDown = useCallback7((e) => {
|
|
1902
1996
|
e.preventDefault();
|
|
1903
1997
|
}, []);
|
|
1904
|
-
return /* @__PURE__ */
|
|
1998
|
+
return /* @__PURE__ */ jsx10(
|
|
1905
1999
|
"button",
|
|
1906
2000
|
{
|
|
1907
2001
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -1916,7 +2010,7 @@ var ListButton = ({ editor, type }) => {
|
|
|
1916
2010
|
|
|
1917
2011
|
// src/components/FloatingMenu/components/ImageButton.tsx
|
|
1918
2012
|
import { useCallback as useCallback8 } from "react";
|
|
1919
|
-
import { jsx as
|
|
2013
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1920
2014
|
var ImageButton = ({
|
|
1921
2015
|
editor,
|
|
1922
2016
|
onImageUpload
|
|
@@ -1949,7 +2043,7 @@ var ImageButton = ({
|
|
|
1949
2043
|
const handleMouseDown = useCallback8((e) => {
|
|
1950
2044
|
e.preventDefault();
|
|
1951
2045
|
}, []);
|
|
1952
|
-
return /* @__PURE__ */
|
|
2046
|
+
return /* @__PURE__ */ jsx11(
|
|
1953
2047
|
"button",
|
|
1954
2048
|
{
|
|
1955
2049
|
className: "lumir-toolbar-btn",
|
|
@@ -1997,7 +2091,7 @@ var getHexFromColorValue = (value, type) => {
|
|
|
1997
2091
|
};
|
|
1998
2092
|
|
|
1999
2093
|
// src/components/FloatingMenu/components/ColorButton.tsx
|
|
2000
|
-
import { jsx as
|
|
2094
|
+
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2001
2095
|
var ColorButton = ({ editor, type }) => {
|
|
2002
2096
|
const [isOpen, setIsOpen] = useState4(false);
|
|
2003
2097
|
const [currentColor, setCurrentColor] = useState4("default");
|
|
@@ -2005,6 +2099,10 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2005
2099
|
const colors = type === "text" ? TEXT_COLORS : BACKGROUND_COLORS;
|
|
2006
2100
|
const getCurrentColor = useCallback9(() => {
|
|
2007
2101
|
try {
|
|
2102
|
+
if (isInTableCell(editor)) {
|
|
2103
|
+
const attr = type === "text" ? "textColor" : "backgroundColor";
|
|
2104
|
+
return getFirstSelectedCellAttr(editor, attr) || "default";
|
|
2105
|
+
}
|
|
2008
2106
|
const activeStyles = editor?.getActiveStyles?.() || {};
|
|
2009
2107
|
if (type === "text" && activeStyles.textColor) {
|
|
2010
2108
|
return activeStyles.textColor;
|
|
@@ -2034,13 +2132,15 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2034
2132
|
(color) => {
|
|
2035
2133
|
try {
|
|
2036
2134
|
if (!editor) return;
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2135
|
+
const attr = type === "text" ? "textColor" : "backgroundColor";
|
|
2136
|
+
if (!setSelectedCellsAttr(editor, attr, color)) {
|
|
2137
|
+
editor.toggleStyles(
|
|
2138
|
+
type === "text" ? { textColor: color } : { backgroundColor: color }
|
|
2139
|
+
);
|
|
2041
2140
|
}
|
|
2042
2141
|
setCurrentColor(color);
|
|
2043
2142
|
setIsOpen(false);
|
|
2143
|
+
setTimeout(() => editor.focus?.());
|
|
2044
2144
|
} catch (err) {
|
|
2045
2145
|
console.error(`Color apply failed:`, err);
|
|
2046
2146
|
}
|
|
@@ -2061,7 +2161,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2061
2161
|
type: "button",
|
|
2062
2162
|
children: [
|
|
2063
2163
|
type === "text" ? Icons.textColor : Icons.bgColor,
|
|
2064
|
-
/* @__PURE__ */
|
|
2164
|
+
/* @__PURE__ */ jsx12(
|
|
2065
2165
|
"span",
|
|
2066
2166
|
{
|
|
2067
2167
|
className: "lumir-color-indicator",
|
|
@@ -2073,7 +2173,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2073
2173
|
]
|
|
2074
2174
|
}
|
|
2075
2175
|
),
|
|
2076
|
-
isOpen && /* @__PURE__ */
|
|
2176
|
+
isOpen && /* @__PURE__ */ jsx12("div", { className: "lumir-dropdown-menu lumir-color-menu", children: /* @__PURE__ */ jsx12("div", { className: "lumir-color-grid", children: colors.map((color) => /* @__PURE__ */ jsx12(
|
|
2077
2177
|
"button",
|
|
2078
2178
|
{
|
|
2079
2179
|
className: cn(
|
|
@@ -2091,9 +2191,101 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2091
2191
|
] });
|
|
2092
2192
|
};
|
|
2093
2193
|
|
|
2094
|
-
// src/components/FloatingMenu/components/
|
|
2194
|
+
// src/components/FloatingMenu/components/FontSizeButton.tsx
|
|
2095
2195
|
import { useState as useState5, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback10 } from "react";
|
|
2096
|
-
import { jsx as
|
|
2196
|
+
import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2197
|
+
var DEFAULT_LABEL = "\uAE30\uBCF8";
|
|
2198
|
+
var toLabel = (size) => size.replace(/px$/, "");
|
|
2199
|
+
var FontSizeButton = ({ editor }) => {
|
|
2200
|
+
const [isOpen, setIsOpen] = useState5(false);
|
|
2201
|
+
const dropdownRef = useRef5(null);
|
|
2202
|
+
const getCurrentSize = () => {
|
|
2203
|
+
try {
|
|
2204
|
+
return editor?.getActiveStyles?.()?.fontSize || "";
|
|
2205
|
+
} catch {
|
|
2206
|
+
return "";
|
|
2207
|
+
}
|
|
2208
|
+
};
|
|
2209
|
+
const currentSize = getCurrentSize();
|
|
2210
|
+
useEffect5(() => {
|
|
2211
|
+
const handleClickOutside = (e) => {
|
|
2212
|
+
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2213
|
+
setIsOpen(false);
|
|
2214
|
+
}
|
|
2215
|
+
};
|
|
2216
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2217
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2218
|
+
}, []);
|
|
2219
|
+
const handleSizeSelect = useCallback10(
|
|
2220
|
+
(size) => {
|
|
2221
|
+
try {
|
|
2222
|
+
if (!editor) return;
|
|
2223
|
+
if (size === "") {
|
|
2224
|
+
editor.removeStyles?.({ fontSize: "" });
|
|
2225
|
+
} else {
|
|
2226
|
+
editor.addStyles?.({ fontSize: size });
|
|
2227
|
+
}
|
|
2228
|
+
setIsOpen(false);
|
|
2229
|
+
setTimeout(() => editor.focus?.());
|
|
2230
|
+
} catch (err) {
|
|
2231
|
+
console.error("Font size apply failed:", err);
|
|
2232
|
+
}
|
|
2233
|
+
},
|
|
2234
|
+
[editor]
|
|
2235
|
+
);
|
|
2236
|
+
const handleMouseDown = useCallback10((e) => {
|
|
2237
|
+
e.preventDefault();
|
|
2238
|
+
}, []);
|
|
2239
|
+
return /* @__PURE__ */ jsxs7("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2240
|
+
/* @__PURE__ */ jsxs7(
|
|
2241
|
+
"button",
|
|
2242
|
+
{
|
|
2243
|
+
className: "lumir-dropdown-btn lumir-font-size-btn",
|
|
2244
|
+
onClick: () => setIsOpen(!isOpen),
|
|
2245
|
+
onMouseDown: handleMouseDown,
|
|
2246
|
+
title: "\uAE00\uC790 \uD06C\uAE30",
|
|
2247
|
+
type: "button",
|
|
2248
|
+
children: [
|
|
2249
|
+
/* @__PURE__ */ jsx13("span", { className: "lumir-font-size-label", children: currentSize ? toLabel(currentSize) : DEFAULT_LABEL }),
|
|
2250
|
+
Icons.expandMore
|
|
2251
|
+
]
|
|
2252
|
+
}
|
|
2253
|
+
),
|
|
2254
|
+
isOpen && /* @__PURE__ */ jsxs7("div", { className: "lumir-dropdown-menu lumir-font-size-menu", children: [
|
|
2255
|
+
/* @__PURE__ */ jsx13(
|
|
2256
|
+
"button",
|
|
2257
|
+
{
|
|
2258
|
+
className: cn(
|
|
2259
|
+
"lumir-dropdown-item",
|
|
2260
|
+
currentSize === "" && "is-active"
|
|
2261
|
+
),
|
|
2262
|
+
onClick: () => handleSizeSelect(""),
|
|
2263
|
+
onMouseDown: handleMouseDown,
|
|
2264
|
+
type: "button",
|
|
2265
|
+
children: DEFAULT_LABEL
|
|
2266
|
+
}
|
|
2267
|
+
),
|
|
2268
|
+
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ jsx13(
|
|
2269
|
+
"button",
|
|
2270
|
+
{
|
|
2271
|
+
className: cn(
|
|
2272
|
+
"lumir-dropdown-item",
|
|
2273
|
+
currentSize === size && "is-active"
|
|
2274
|
+
),
|
|
2275
|
+
onClick: () => handleSizeSelect(size),
|
|
2276
|
+
onMouseDown: handleMouseDown,
|
|
2277
|
+
type: "button",
|
|
2278
|
+
children: toLabel(size)
|
|
2279
|
+
},
|
|
2280
|
+
size
|
|
2281
|
+
))
|
|
2282
|
+
] })
|
|
2283
|
+
] });
|
|
2284
|
+
};
|
|
2285
|
+
|
|
2286
|
+
// src/components/FloatingMenu/components/LinkButton.tsx
|
|
2287
|
+
import { useState as useState6, useEffect as useEffect6, useRef as useRef6, useCallback as useCallback11 } from "react";
|
|
2288
|
+
import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2097
2289
|
var isDangerousProtocol = (url) => {
|
|
2098
2290
|
const trimmedUrl = url.trim().toLowerCase();
|
|
2099
2291
|
const dangerousPatterns = [
|
|
@@ -2119,13 +2311,13 @@ var normalizeUrl = (url) => {
|
|
|
2119
2311
|
return `https://${trimmedUrl}`;
|
|
2120
2312
|
};
|
|
2121
2313
|
var LinkButton = ({ editor }) => {
|
|
2122
|
-
const [isOpen, setIsOpen] =
|
|
2123
|
-
const [linkUrl, setLinkUrl] =
|
|
2124
|
-
const [errorMsg, setErrorMsg] =
|
|
2125
|
-
const dropdownRef =
|
|
2126
|
-
const inputRef =
|
|
2127
|
-
const hasSelectionRef =
|
|
2128
|
-
|
|
2314
|
+
const [isOpen, setIsOpen] = useState6(false);
|
|
2315
|
+
const [linkUrl, setLinkUrl] = useState6("");
|
|
2316
|
+
const [errorMsg, setErrorMsg] = useState6(null);
|
|
2317
|
+
const dropdownRef = useRef6(null);
|
|
2318
|
+
const inputRef = useRef6(null);
|
|
2319
|
+
const hasSelectionRef = useRef6(false);
|
|
2320
|
+
useEffect6(() => {
|
|
2129
2321
|
const handleClickOutside = (e) => {
|
|
2130
2322
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2131
2323
|
setIsOpen(false);
|
|
@@ -2136,7 +2328,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2136
2328
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2137
2329
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2138
2330
|
}, []);
|
|
2139
|
-
|
|
2331
|
+
useEffect6(() => {
|
|
2140
2332
|
if (isOpen && inputRef.current) {
|
|
2141
2333
|
try {
|
|
2142
2334
|
const selectedText = editor?.getSelectedText?.() || "";
|
|
@@ -2147,7 +2339,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2147
2339
|
setTimeout(() => inputRef.current?.focus(), 0);
|
|
2148
2340
|
}
|
|
2149
2341
|
}, [isOpen, editor]);
|
|
2150
|
-
const handleSubmit =
|
|
2342
|
+
const handleSubmit = useCallback11(
|
|
2151
2343
|
(e) => {
|
|
2152
2344
|
e?.preventDefault();
|
|
2153
2345
|
setErrorMsg(null);
|
|
@@ -2174,15 +2366,15 @@ var LinkButton = ({ editor }) => {
|
|
|
2174
2366
|
},
|
|
2175
2367
|
[editor, linkUrl]
|
|
2176
2368
|
);
|
|
2177
|
-
const handleCancel =
|
|
2369
|
+
const handleCancel = useCallback11(() => {
|
|
2178
2370
|
setIsOpen(false);
|
|
2179
2371
|
setLinkUrl("");
|
|
2180
2372
|
setErrorMsg(null);
|
|
2181
2373
|
}, []);
|
|
2182
|
-
const handleMouseDown =
|
|
2374
|
+
const handleMouseDown = useCallback11((e) => {
|
|
2183
2375
|
e.preventDefault();
|
|
2184
2376
|
}, []);
|
|
2185
|
-
const handleKeyDown =
|
|
2377
|
+
const handleKeyDown = useCallback11(
|
|
2186
2378
|
(e) => {
|
|
2187
2379
|
if (e.key === "Enter") {
|
|
2188
2380
|
handleSubmit();
|
|
@@ -2192,8 +2384,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2192
2384
|
},
|
|
2193
2385
|
[handleSubmit, handleCancel]
|
|
2194
2386
|
);
|
|
2195
|
-
return /* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */
|
|
2387
|
+
return /* @__PURE__ */ jsxs8("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2388
|
+
/* @__PURE__ */ jsx14(
|
|
2197
2389
|
"button",
|
|
2198
2390
|
{
|
|
2199
2391
|
className: "lumir-toolbar-btn",
|
|
@@ -2204,8 +2396,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2204
2396
|
children: Icons.link
|
|
2205
2397
|
}
|
|
2206
2398
|
),
|
|
2207
|
-
isOpen && /* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2399
|
+
isOpen && /* @__PURE__ */ jsx14("div", { className: "lumir-dropdown-menu lumir-link-menu", children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "lumir-link-form", children: [
|
|
2400
|
+
/* @__PURE__ */ jsx14(
|
|
2209
2401
|
"input",
|
|
2210
2402
|
{
|
|
2211
2403
|
ref: inputRef,
|
|
@@ -2221,7 +2413,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2221
2413
|
onMouseDown: handleMouseDown
|
|
2222
2414
|
}
|
|
2223
2415
|
),
|
|
2224
|
-
errorMsg && /* @__PURE__ */
|
|
2416
|
+
errorMsg && /* @__PURE__ */ jsx14(
|
|
2225
2417
|
"div",
|
|
2226
2418
|
{
|
|
2227
2419
|
style: {
|
|
@@ -2233,8 +2425,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2233
2425
|
children: errorMsg
|
|
2234
2426
|
}
|
|
2235
2427
|
),
|
|
2236
|
-
/* @__PURE__ */
|
|
2237
|
-
/* @__PURE__ */
|
|
2428
|
+
/* @__PURE__ */ jsxs8("div", { className: "lumir-link-actions", children: [
|
|
2429
|
+
/* @__PURE__ */ jsx14(
|
|
2238
2430
|
"button",
|
|
2239
2431
|
{
|
|
2240
2432
|
type: "button",
|
|
@@ -2244,7 +2436,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2244
2436
|
children: "\uCDE8\uC18C"
|
|
2245
2437
|
}
|
|
2246
2438
|
),
|
|
2247
|
-
/* @__PURE__ */
|
|
2439
|
+
/* @__PURE__ */ jsx14(
|
|
2248
2440
|
"button",
|
|
2249
2441
|
{
|
|
2250
2442
|
type: "submit",
|
|
@@ -2260,10 +2452,10 @@ var LinkButton = ({ editor }) => {
|
|
|
2260
2452
|
};
|
|
2261
2453
|
|
|
2262
2454
|
// src/components/FloatingMenu/components/TableButton.tsx
|
|
2263
|
-
import { useCallback as
|
|
2264
|
-
import { jsx as
|
|
2455
|
+
import { useCallback as useCallback12 } from "react";
|
|
2456
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
2265
2457
|
var TableButton = ({ editor }) => {
|
|
2266
|
-
const handleClick =
|
|
2458
|
+
const handleClick = useCallback12(() => {
|
|
2267
2459
|
try {
|
|
2268
2460
|
const block = editor?.getTextCursorPosition()?.block;
|
|
2269
2461
|
if (!block || !editor?.insertBlocks) return;
|
|
@@ -2285,10 +2477,10 @@ var TableButton = ({ editor }) => {
|
|
|
2285
2477
|
console.error("Table insert failed:", err);
|
|
2286
2478
|
}
|
|
2287
2479
|
}, [editor]);
|
|
2288
|
-
const handleMouseDown =
|
|
2480
|
+
const handleMouseDown = useCallback12((e) => {
|
|
2289
2481
|
e.preventDefault();
|
|
2290
2482
|
}, []);
|
|
2291
|
-
return /* @__PURE__ */
|
|
2483
|
+
return /* @__PURE__ */ jsx15(
|
|
2292
2484
|
"button",
|
|
2293
2485
|
{
|
|
2294
2486
|
className: "lumir-toolbar-btn",
|
|
@@ -2302,13 +2494,13 @@ var TableButton = ({ editor }) => {
|
|
|
2302
2494
|
};
|
|
2303
2495
|
|
|
2304
2496
|
// src/components/FloatingMenu/components/HTMLImportButton.tsx
|
|
2305
|
-
import { useCallback as
|
|
2306
|
-
import { Fragment as Fragment3, jsx as
|
|
2497
|
+
import { useCallback as useCallback13, useRef as useRef7 } from "react";
|
|
2498
|
+
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2307
2499
|
var HTMLImportButton = ({
|
|
2308
2500
|
editor
|
|
2309
2501
|
}) => {
|
|
2310
|
-
const fileInputRef =
|
|
2311
|
-
const handleFileUpload =
|
|
2502
|
+
const fileInputRef = useRef7(null);
|
|
2503
|
+
const handleFileUpload = useCallback13(
|
|
2312
2504
|
(e) => {
|
|
2313
2505
|
const file = e.target.files?.[0];
|
|
2314
2506
|
if (!file) return;
|
|
@@ -2344,14 +2536,14 @@ var HTMLImportButton = ({
|
|
|
2344
2536
|
},
|
|
2345
2537
|
[editor]
|
|
2346
2538
|
);
|
|
2347
|
-
const handleClick =
|
|
2539
|
+
const handleClick = useCallback13(() => {
|
|
2348
2540
|
fileInputRef.current?.click();
|
|
2349
2541
|
}, []);
|
|
2350
|
-
const handleMouseDown =
|
|
2542
|
+
const handleMouseDown = useCallback13((e) => {
|
|
2351
2543
|
e.preventDefault();
|
|
2352
2544
|
}, []);
|
|
2353
|
-
return /* @__PURE__ */
|
|
2354
|
-
/* @__PURE__ */
|
|
2545
|
+
return /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
2546
|
+
/* @__PURE__ */ jsx16(
|
|
2355
2547
|
"input",
|
|
2356
2548
|
{
|
|
2357
2549
|
ref: fileInputRef,
|
|
@@ -2361,7 +2553,7 @@ var HTMLImportButton = ({
|
|
|
2361
2553
|
style: { display: "none" }
|
|
2362
2554
|
}
|
|
2363
2555
|
),
|
|
2364
|
-
/* @__PURE__ */
|
|
2556
|
+
/* @__PURE__ */ jsx16(
|
|
2365
2557
|
"button",
|
|
2366
2558
|
{
|
|
2367
2559
|
className: "lumir-toolbar-btn",
|
|
@@ -2376,8 +2568,8 @@ var HTMLImportButton = ({
|
|
|
2376
2568
|
};
|
|
2377
2569
|
|
|
2378
2570
|
// src/components/FloatingMenu/components/BlockTypeSelect.tsx
|
|
2379
|
-
import { useState as
|
|
2380
|
-
import { jsx as
|
|
2571
|
+
import { useState as useState7, useEffect as useEffect7, useRef as useRef8, useCallback as useCallback14 } from "react";
|
|
2572
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
2381
2573
|
var blockTypeCategories = [
|
|
2382
2574
|
{
|
|
2383
2575
|
category: "Headings",
|
|
@@ -2407,8 +2599,8 @@ var blockTypes = blockTypeCategories.flatMap(
|
|
|
2407
2599
|
(cat) => cat.items
|
|
2408
2600
|
);
|
|
2409
2601
|
var BlockTypeSelect = ({ editor }) => {
|
|
2410
|
-
const [isOpen, setIsOpen] =
|
|
2411
|
-
const dropdownRef =
|
|
2602
|
+
const [isOpen, setIsOpen] = useState7(false);
|
|
2603
|
+
const dropdownRef = useRef8(null);
|
|
2412
2604
|
const getCurrentBlock = () => {
|
|
2413
2605
|
try {
|
|
2414
2606
|
return editor?.getTextCursorPosition()?.block;
|
|
@@ -2420,7 +2612,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2420
2612
|
const currentType = currentBlock?.type || "paragraph";
|
|
2421
2613
|
const currentLevel = currentBlock?.props?.level;
|
|
2422
2614
|
const isCurrentToggle = currentType === "heading" && currentBlock?.props?.isToggleable === true;
|
|
2423
|
-
|
|
2615
|
+
useEffect7(() => {
|
|
2424
2616
|
const handleClickOutside = (e) => {
|
|
2425
2617
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2426
2618
|
setIsOpen(false);
|
|
@@ -2449,7 +2641,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2449
2641
|
console.error("Block type change failed:", err);
|
|
2450
2642
|
}
|
|
2451
2643
|
};
|
|
2452
|
-
const handleMouseDown =
|
|
2644
|
+
const handleMouseDown = useCallback14((e) => {
|
|
2453
2645
|
e.preventDefault();
|
|
2454
2646
|
}, []);
|
|
2455
2647
|
const getCurrentLabel = () => {
|
|
@@ -2480,8 +2672,8 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2480
2672
|
}
|
|
2481
2673
|
return currentType === bt.type;
|
|
2482
2674
|
};
|
|
2483
|
-
return /* @__PURE__ */
|
|
2484
|
-
/* @__PURE__ */
|
|
2675
|
+
return /* @__PURE__ */ jsxs10("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2676
|
+
/* @__PURE__ */ jsxs10(
|
|
2485
2677
|
"button",
|
|
2486
2678
|
{
|
|
2487
2679
|
className: "lumir-dropdown-btn lumir-block-type-btn",
|
|
@@ -2489,15 +2681,15 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2489
2681
|
onMouseDown: handleMouseDown,
|
|
2490
2682
|
type: "button",
|
|
2491
2683
|
children: [
|
|
2492
|
-
/* @__PURE__ */
|
|
2493
|
-
/* @__PURE__ */
|
|
2684
|
+
/* @__PURE__ */ jsx17("span", { className: "lumir-block-icon", children: BlockTypeIcons[getCurrentIcon()] }),
|
|
2685
|
+
/* @__PURE__ */ jsx17("span", { className: "lumir-block-label", children: getCurrentLabel() }),
|
|
2494
2686
|
Icons.expandMore
|
|
2495
2687
|
]
|
|
2496
2688
|
}
|
|
2497
2689
|
),
|
|
2498
|
-
isOpen && /* @__PURE__ */
|
|
2499
|
-
/* @__PURE__ */
|
|
2500
|
-
category.items.map((bt) => /* @__PURE__ */
|
|
2690
|
+
isOpen && /* @__PURE__ */ jsx17("div", { className: "lumir-dropdown-menu lumir-block-menu", children: blockTypeCategories.map((category) => /* @__PURE__ */ jsxs10("div", { className: "lumir-block-category", children: [
|
|
2691
|
+
/* @__PURE__ */ jsx17("div", { className: "lumir-block-category-title", children: category.category }),
|
|
2692
|
+
category.items.map((bt) => /* @__PURE__ */ jsxs10(
|
|
2501
2693
|
"button",
|
|
2502
2694
|
{
|
|
2503
2695
|
className: cn(
|
|
@@ -2507,8 +2699,8 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2507
2699
|
onClick: () => handleTypeChange(bt.type, bt.level, bt.isToggle),
|
|
2508
2700
|
onMouseDown: handleMouseDown,
|
|
2509
2701
|
children: [
|
|
2510
|
-
/* @__PURE__ */
|
|
2511
|
-
/* @__PURE__ */
|
|
2702
|
+
/* @__PURE__ */ jsx17("span", { className: "lumir-block-icon", children: BlockTypeIcons[bt.icon] }),
|
|
2703
|
+
/* @__PURE__ */ jsx17("span", { className: "lumir-block-item-title", children: bt.label })
|
|
2512
2704
|
]
|
|
2513
2705
|
},
|
|
2514
2706
|
bt.icon
|
|
@@ -2518,7 +2710,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2518
2710
|
};
|
|
2519
2711
|
|
|
2520
2712
|
// src/components/FloatingMenu/index.tsx
|
|
2521
|
-
import { Fragment as Fragment4, jsx as
|
|
2713
|
+
import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
2522
2714
|
var COMPACT_BREAKPOINT = 700;
|
|
2523
2715
|
var MINIMIZED_BREAKPOINT = 400;
|
|
2524
2716
|
var FloatingMenu = ({
|
|
@@ -2527,12 +2719,12 @@ var FloatingMenu = ({
|
|
|
2527
2719
|
className,
|
|
2528
2720
|
onImageUpload
|
|
2529
2721
|
}) => {
|
|
2530
|
-
const wrapperRef =
|
|
2531
|
-
const [isCompact, setIsCompact] =
|
|
2532
|
-
const [isMinimizable, setIsMinimizable] =
|
|
2533
|
-
const [isMinimized, setIsMinimized] =
|
|
2534
|
-
const [, setSelectionTick] =
|
|
2535
|
-
|
|
2722
|
+
const wrapperRef = useRef9(null);
|
|
2723
|
+
const [isCompact, setIsCompact] = useState8(false);
|
|
2724
|
+
const [isMinimizable, setIsMinimizable] = useState8(false);
|
|
2725
|
+
const [isMinimized, setIsMinimized] = useState8(false);
|
|
2726
|
+
const [, setSelectionTick] = useState8(0);
|
|
2727
|
+
useEffect8(() => {
|
|
2536
2728
|
if (!editor) return;
|
|
2537
2729
|
let debounceTimer = null;
|
|
2538
2730
|
const DEBOUNCE_DELAY = 150;
|
|
@@ -2556,7 +2748,7 @@ var FloatingMenu = ({
|
|
|
2556
2748
|
unsubscribeContent?.();
|
|
2557
2749
|
};
|
|
2558
2750
|
}, [editor]);
|
|
2559
|
-
|
|
2751
|
+
useEffect8(() => {
|
|
2560
2752
|
const checkWidth = () => {
|
|
2561
2753
|
if (wrapperRef.current) {
|
|
2562
2754
|
const width = wrapperRef.current.offsetWidth;
|
|
@@ -2571,8 +2763,8 @@ var FloatingMenu = ({
|
|
|
2571
2763
|
}
|
|
2572
2764
|
return () => resizeObserver.disconnect();
|
|
2573
2765
|
}, []);
|
|
2574
|
-
const MinimizedLayout = () => /* @__PURE__ */
|
|
2575
|
-
/* @__PURE__ */
|
|
2766
|
+
const MinimizedLayout = () => /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
2767
|
+
/* @__PURE__ */ jsx18(
|
|
2576
2768
|
"button",
|
|
2577
2769
|
{
|
|
2578
2770
|
className: "lumir-toolbar-button lumir-toggle-button",
|
|
@@ -2583,117 +2775,120 @@ var FloatingMenu = ({
|
|
|
2583
2775
|
children: isMinimized ? Icons.chevronRight : Icons.chevronLeft
|
|
2584
2776
|
}
|
|
2585
2777
|
),
|
|
2586
|
-
!isMinimized && /* @__PURE__ */
|
|
2587
|
-
/* @__PURE__ */
|
|
2588
|
-
/* @__PURE__ */
|
|
2589
|
-
/* @__PURE__ */
|
|
2590
|
-
/* @__PURE__ */
|
|
2591
|
-
/* @__PURE__ */
|
|
2592
|
-
/* @__PURE__ */
|
|
2593
|
-
/* @__PURE__ */
|
|
2594
|
-
/* @__PURE__ */
|
|
2595
|
-
/* @__PURE__ */
|
|
2596
|
-
/* @__PURE__ */
|
|
2778
|
+
!isMinimized && /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
2779
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2780
|
+
/* @__PURE__ */ jsx18(UndoRedoButtons, { editor }),
|
|
2781
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2782
|
+
/* @__PURE__ */ jsx18("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx18(BlockTypeSelect, { editor }) }),
|
|
2783
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2784
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2785
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "bold" }),
|
|
2786
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "italic" }),
|
|
2787
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "underline" }),
|
|
2788
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "strike" })
|
|
2597
2789
|
] }),
|
|
2598
|
-
/* @__PURE__ */
|
|
2599
|
-
/* @__PURE__ */
|
|
2600
|
-
/* @__PURE__ */
|
|
2601
|
-
/* @__PURE__ */
|
|
2602
|
-
/* @__PURE__ */
|
|
2790
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2791
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2792
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "left" }),
|
|
2793
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "center" }),
|
|
2794
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "right" })
|
|
2603
2795
|
] }),
|
|
2604
|
-
/* @__PURE__ */
|
|
2605
|
-
/* @__PURE__ */
|
|
2606
|
-
/* @__PURE__ */
|
|
2607
|
-
/* @__PURE__ */
|
|
2796
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2797
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2798
|
+
/* @__PURE__ */ jsx18(ListButton, { editor, type: "bullet" }),
|
|
2799
|
+
/* @__PURE__ */ jsx18(ListButton, { editor, type: "numbered" })
|
|
2608
2800
|
] }),
|
|
2609
|
-
/* @__PURE__ */
|
|
2610
|
-
/* @__PURE__ */
|
|
2611
|
-
/* @__PURE__ */
|
|
2612
|
-
/* @__PURE__ */
|
|
2801
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2802
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2803
|
+
/* @__PURE__ */ jsx18(FontSizeButton, { editor }),
|
|
2804
|
+
/* @__PURE__ */ jsx18(ColorButton, { editor, type: "text" }),
|
|
2805
|
+
/* @__PURE__ */ jsx18(ColorButton, { editor, type: "background" })
|
|
2613
2806
|
] }),
|
|
2614
|
-
/* @__PURE__ */
|
|
2615
|
-
/* @__PURE__ */
|
|
2616
|
-
/* @__PURE__ */
|
|
2617
|
-
/* @__PURE__ */
|
|
2618
|
-
/* @__PURE__ */
|
|
2619
|
-
/* @__PURE__ */
|
|
2807
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2808
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2809
|
+
/* @__PURE__ */ jsx18(ImageButton, { editor, onImageUpload }),
|
|
2810
|
+
/* @__PURE__ */ jsx18(LinkButton, { editor }),
|
|
2811
|
+
/* @__PURE__ */ jsx18(TableButton, { editor }),
|
|
2812
|
+
/* @__PURE__ */ jsx18(HTMLImportButton, { editor })
|
|
2620
2813
|
] })
|
|
2621
2814
|
] })
|
|
2622
2815
|
] });
|
|
2623
|
-
const SingleRowLayout = () => /* @__PURE__ */
|
|
2624
|
-
/* @__PURE__ */
|
|
2625
|
-
/* @__PURE__ */
|
|
2626
|
-
/* @__PURE__ */
|
|
2627
|
-
/* @__PURE__ */
|
|
2628
|
-
/* @__PURE__ */
|
|
2629
|
-
/* @__PURE__ */
|
|
2630
|
-
/* @__PURE__ */
|
|
2631
|
-
/* @__PURE__ */
|
|
2632
|
-
/* @__PURE__ */
|
|
2816
|
+
const SingleRowLayout = () => /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
2817
|
+
/* @__PURE__ */ jsx18(UndoRedoButtons, { editor }),
|
|
2818
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2819
|
+
/* @__PURE__ */ jsx18("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx18(BlockTypeSelect, { editor }) }),
|
|
2820
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2821
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2822
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "bold" }),
|
|
2823
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "italic" }),
|
|
2824
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "underline" }),
|
|
2825
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "strike" })
|
|
2633
2826
|
] }),
|
|
2634
|
-
/* @__PURE__ */
|
|
2635
|
-
/* @__PURE__ */
|
|
2636
|
-
/* @__PURE__ */
|
|
2637
|
-
/* @__PURE__ */
|
|
2638
|
-
/* @__PURE__ */
|
|
2827
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2828
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2829
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "left" }),
|
|
2830
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "center" }),
|
|
2831
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "right" })
|
|
2639
2832
|
] }),
|
|
2640
|
-
/* @__PURE__ */
|
|
2641
|
-
/* @__PURE__ */
|
|
2642
|
-
/* @__PURE__ */
|
|
2643
|
-
/* @__PURE__ */
|
|
2833
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2834
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2835
|
+
/* @__PURE__ */ jsx18(ListButton, { editor, type: "bullet" }),
|
|
2836
|
+
/* @__PURE__ */ jsx18(ListButton, { editor, type: "numbered" })
|
|
2644
2837
|
] }),
|
|
2645
|
-
/* @__PURE__ */
|
|
2646
|
-
/* @__PURE__ */
|
|
2647
|
-
/* @__PURE__ */
|
|
2648
|
-
/* @__PURE__ */
|
|
2838
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2839
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2840
|
+
/* @__PURE__ */ jsx18(FontSizeButton, { editor }),
|
|
2841
|
+
/* @__PURE__ */ jsx18(ColorButton, { editor, type: "text" }),
|
|
2842
|
+
/* @__PURE__ */ jsx18(ColorButton, { editor, type: "background" })
|
|
2649
2843
|
] }),
|
|
2650
|
-
/* @__PURE__ */
|
|
2651
|
-
/* @__PURE__ */
|
|
2652
|
-
/* @__PURE__ */
|
|
2653
|
-
/* @__PURE__ */
|
|
2654
|
-
/* @__PURE__ */
|
|
2655
|
-
/* @__PURE__ */
|
|
2844
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2845
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2846
|
+
/* @__PURE__ */ jsx18(ImageButton, { editor, onImageUpload }),
|
|
2847
|
+
/* @__PURE__ */ jsx18(LinkButton, { editor }),
|
|
2848
|
+
/* @__PURE__ */ jsx18(TableButton, { editor }),
|
|
2849
|
+
/* @__PURE__ */ jsx18(HTMLImportButton, { editor })
|
|
2656
2850
|
] })
|
|
2657
2851
|
] });
|
|
2658
|
-
const TwoRowLayout = () => /* @__PURE__ */
|
|
2659
|
-
/* @__PURE__ */
|
|
2660
|
-
/* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2662
|
-
/* @__PURE__ */
|
|
2663
|
-
/* @__PURE__ */
|
|
2664
|
-
/* @__PURE__ */
|
|
2665
|
-
/* @__PURE__ */
|
|
2666
|
-
/* @__PURE__ */
|
|
2852
|
+
const TwoRowLayout = () => /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
2853
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-row", children: [
|
|
2854
|
+
/* @__PURE__ */ jsx18(UndoRedoButtons, { editor }),
|
|
2855
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2856
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2857
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "bold" }),
|
|
2858
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "italic" }),
|
|
2859
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "underline" }),
|
|
2860
|
+
/* @__PURE__ */ jsx18(TextStyleButton, { editor, style: "strike" })
|
|
2667
2861
|
] }),
|
|
2668
|
-
/* @__PURE__ */
|
|
2669
|
-
/* @__PURE__ */
|
|
2670
|
-
/* @__PURE__ */
|
|
2671
|
-
/* @__PURE__ */
|
|
2672
|
-
/* @__PURE__ */
|
|
2862
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2863
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2864
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "left" }),
|
|
2865
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "center" }),
|
|
2866
|
+
/* @__PURE__ */ jsx18(AlignButton, { editor, alignment: "right" })
|
|
2673
2867
|
] }),
|
|
2674
|
-
/* @__PURE__ */
|
|
2675
|
-
/* @__PURE__ */
|
|
2676
|
-
/* @__PURE__ */
|
|
2677
|
-
/* @__PURE__ */
|
|
2868
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2869
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2870
|
+
/* @__PURE__ */ jsx18(ListButton, { editor, type: "bullet" }),
|
|
2871
|
+
/* @__PURE__ */ jsx18(ListButton, { editor, type: "numbered" })
|
|
2678
2872
|
] })
|
|
2679
2873
|
] }),
|
|
2680
|
-
/* @__PURE__ */
|
|
2681
|
-
/* @__PURE__ */
|
|
2682
|
-
/* @__PURE__ */
|
|
2683
|
-
/* @__PURE__ */
|
|
2684
|
-
/* @__PURE__ */
|
|
2685
|
-
/* @__PURE__ */
|
|
2874
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-row", children: [
|
|
2875
|
+
/* @__PURE__ */ jsx18("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx18(BlockTypeSelect, { editor }) }),
|
|
2876
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2877
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2878
|
+
/* @__PURE__ */ jsx18(FontSizeButton, { editor }),
|
|
2879
|
+
/* @__PURE__ */ jsx18(ColorButton, { editor, type: "text" }),
|
|
2880
|
+
/* @__PURE__ */ jsx18(ColorButton, { editor, type: "background" })
|
|
2686
2881
|
] }),
|
|
2687
|
-
/* @__PURE__ */
|
|
2688
|
-
/* @__PURE__ */
|
|
2689
|
-
/* @__PURE__ */
|
|
2690
|
-
/* @__PURE__ */
|
|
2691
|
-
/* @__PURE__ */
|
|
2692
|
-
/* @__PURE__ */
|
|
2882
|
+
/* @__PURE__ */ jsx18(ToolbarDivider, {}),
|
|
2883
|
+
/* @__PURE__ */ jsxs11("div", { className: "lumir-toolbar-group", children: [
|
|
2884
|
+
/* @__PURE__ */ jsx18(ImageButton, { editor, onImageUpload }),
|
|
2885
|
+
/* @__PURE__ */ jsx18(LinkButton, { editor }),
|
|
2886
|
+
/* @__PURE__ */ jsx18(TableButton, { editor }),
|
|
2887
|
+
/* @__PURE__ */ jsx18(HTMLImportButton, { editor })
|
|
2693
2888
|
] })
|
|
2694
2889
|
] })
|
|
2695
2890
|
] });
|
|
2696
|
-
return /* @__PURE__ */
|
|
2891
|
+
return /* @__PURE__ */ jsx18(
|
|
2697
2892
|
"div",
|
|
2698
2893
|
{
|
|
2699
2894
|
ref: wrapperRef,
|
|
@@ -2703,7 +2898,7 @@ var FloatingMenu = ({
|
|
|
2703
2898
|
className
|
|
2704
2899
|
),
|
|
2705
2900
|
"data-position": position,
|
|
2706
|
-
children: /* @__PURE__ */
|
|
2901
|
+
children: /* @__PURE__ */ jsx18(
|
|
2707
2902
|
"div",
|
|
2708
2903
|
{
|
|
2709
2904
|
className: cn(
|
|
@@ -2712,7 +2907,7 @@ var FloatingMenu = ({
|
|
|
2712
2907
|
isMinimizable && "is-minimizable",
|
|
2713
2908
|
isMinimized && "is-minimized"
|
|
2714
2909
|
),
|
|
2715
|
-
children: isMinimizable ? /* @__PURE__ */
|
|
2910
|
+
children: isMinimizable ? /* @__PURE__ */ jsx18(MinimizedLayout, {}) : isCompact ? /* @__PURE__ */ jsx18(TwoRowLayout, {}) : /* @__PURE__ */ jsx18(SingleRowLayout, {})
|
|
2716
2911
|
}
|
|
2717
2912
|
)
|
|
2718
2913
|
}
|
|
@@ -2847,7 +3042,6 @@ var VerticalAlignmentExtension = Extension.create({
|
|
|
2847
3042
|
import {
|
|
2848
3043
|
BasicTextStyleButton,
|
|
2849
3044
|
BlockTypeSelect as BlockTypeSelect2,
|
|
2850
|
-
ColorStyleButton,
|
|
2851
3045
|
CreateLinkButton,
|
|
2852
3046
|
FileCaptionButton,
|
|
2853
3047
|
FileDeleteButton,
|
|
@@ -2867,43 +3061,18 @@ import {
|
|
|
2867
3061
|
checkBlockTypeHasDefaultProp,
|
|
2868
3062
|
mapTableCell
|
|
2869
3063
|
} from "@blocknote/core";
|
|
2870
|
-
import { useCallback as
|
|
3064
|
+
import { useCallback as useCallback15, useMemo } from "react";
|
|
2871
3065
|
import {
|
|
2872
3066
|
useComponentsContext,
|
|
2873
3067
|
useBlockNoteEditor,
|
|
2874
3068
|
useSelectedBlocks
|
|
2875
3069
|
} from "@blocknote/react";
|
|
2876
|
-
|
|
2877
|
-
// src/utils/prosemirror-table-utils.ts
|
|
2878
|
-
function getSelectedCellPositions(editor) {
|
|
2879
|
-
const tiptap = editor._tiptapEditor;
|
|
2880
|
-
if (!tiptap) return [];
|
|
2881
|
-
const { state } = tiptap;
|
|
2882
|
-
const { selection } = state;
|
|
2883
|
-
if (typeof selection.forEachCell === "function") {
|
|
2884
|
-
const positions = [];
|
|
2885
|
-
selection.forEachCell((_node, pos) => {
|
|
2886
|
-
positions.push(pos);
|
|
2887
|
-
});
|
|
2888
|
-
return positions;
|
|
2889
|
-
}
|
|
2890
|
-
const $pos = selection.$from;
|
|
2891
|
-
for (let depth = $pos.depth; depth > 0; depth--) {
|
|
2892
|
-
const node = $pos.node(depth);
|
|
2893
|
-
if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
|
|
2894
|
-
return [$pos.before(depth)];
|
|
2895
|
-
}
|
|
2896
|
-
}
|
|
2897
|
-
return [];
|
|
2898
|
-
}
|
|
2899
|
-
|
|
2900
|
-
// src/components/TextAlignButtonWithVA.tsx
|
|
2901
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
3070
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
2902
3071
|
var icons = {
|
|
2903
|
-
left: /* @__PURE__ */
|
|
2904
|
-
center: /* @__PURE__ */
|
|
2905
|
-
right: /* @__PURE__ */
|
|
2906
|
-
justify: /* @__PURE__ */
|
|
3072
|
+
left: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
|
|
3073
|
+
center: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
|
|
3074
|
+
right: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
|
|
3075
|
+
justify: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }) })
|
|
2907
3076
|
};
|
|
2908
3077
|
var tooltipMap = {
|
|
2909
3078
|
left: "\uC67C\uCABD \uC815\uB82C",
|
|
@@ -2937,7 +3106,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
2937
3106
|
}
|
|
2938
3107
|
return;
|
|
2939
3108
|
}, [editor, selectedBlocks]);
|
|
2940
|
-
const setTextAlignment =
|
|
3109
|
+
const setTextAlignment = useCallback15(
|
|
2941
3110
|
(newAlignment) => {
|
|
2942
3111
|
editor.focus();
|
|
2943
3112
|
for (const block of selectedBlocks) {
|
|
@@ -2975,7 +3144,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
2975
3144
|
if (!show || !editor.isEditable) {
|
|
2976
3145
|
return null;
|
|
2977
3146
|
}
|
|
2978
|
-
return /* @__PURE__ */
|
|
3147
|
+
return /* @__PURE__ */ jsx19(
|
|
2979
3148
|
Components.FormattingToolbar.Button,
|
|
2980
3149
|
{
|
|
2981
3150
|
className: "bn-button",
|
|
@@ -2990,25 +3159,25 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
2990
3159
|
};
|
|
2991
3160
|
|
|
2992
3161
|
// src/components/VerticalAlignButton.tsx
|
|
2993
|
-
import { useCallback as
|
|
3162
|
+
import { useCallback as useCallback16, useMemo as useMemo2 } from "react";
|
|
2994
3163
|
import {
|
|
2995
3164
|
useBlockNoteEditor as useBlockNoteEditor2,
|
|
2996
3165
|
useComponentsContext as useComponentsContext2,
|
|
2997
3166
|
useSelectedBlocks as useSelectedBlocks2
|
|
2998
3167
|
} from "@blocknote/react";
|
|
2999
|
-
import { jsx as
|
|
3168
|
+
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3000
3169
|
var icons2 = {
|
|
3001
|
-
top: /* @__PURE__ */
|
|
3002
|
-
/* @__PURE__ */
|
|
3003
|
-
/* @__PURE__ */
|
|
3170
|
+
top: /* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
3171
|
+
/* @__PURE__ */ jsx20("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
3172
|
+
/* @__PURE__ */ jsx20("line", { x1: "5", y1: "5", x2: "11", y2: "5" })
|
|
3004
3173
|
] }),
|
|
3005
|
-
middle: /* @__PURE__ */
|
|
3006
|
-
/* @__PURE__ */
|
|
3007
|
-
/* @__PURE__ */
|
|
3174
|
+
middle: /* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
3175
|
+
/* @__PURE__ */ jsx20("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
3176
|
+
/* @__PURE__ */ jsx20("line", { x1: "5", y1: "8", x2: "11", y2: "8" })
|
|
3008
3177
|
] }),
|
|
3009
|
-
bottom: /* @__PURE__ */
|
|
3010
|
-
/* @__PURE__ */
|
|
3011
|
-
/* @__PURE__ */
|
|
3178
|
+
bottom: /* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
3179
|
+
/* @__PURE__ */ jsx20("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
3180
|
+
/* @__PURE__ */ jsx20("line", { x1: "5", y1: "11", x2: "11", y2: "11" })
|
|
3012
3181
|
] })
|
|
3013
3182
|
};
|
|
3014
3183
|
var tooltips = {
|
|
@@ -3036,7 +3205,7 @@ var VerticalAlignButton = (props) => {
|
|
|
3036
3205
|
const currentAlignment = useMemo2(() => {
|
|
3037
3206
|
return getCurrentVerticalAlignment(editor);
|
|
3038
3207
|
}, [editor, selectedBlocks]);
|
|
3039
|
-
const setVerticalAlignment =
|
|
3208
|
+
const setVerticalAlignment = useCallback16(
|
|
3040
3209
|
(alignment) => {
|
|
3041
3210
|
const tiptap = editor._tiptapEditor;
|
|
3042
3211
|
if (!tiptap) return;
|
|
@@ -3064,7 +3233,7 @@ var VerticalAlignButton = (props) => {
|
|
|
3064
3233
|
if (!isInTable || !editor.isEditable) {
|
|
3065
3234
|
return null;
|
|
3066
3235
|
}
|
|
3067
|
-
return /* @__PURE__ */
|
|
3236
|
+
return /* @__PURE__ */ jsx20(
|
|
3068
3237
|
Components.FormattingToolbar.Button,
|
|
3069
3238
|
{
|
|
3070
3239
|
className: "bn-button",
|
|
@@ -3078,77 +3247,884 @@ var VerticalAlignButton = (props) => {
|
|
|
3078
3247
|
);
|
|
3079
3248
|
};
|
|
3080
3249
|
|
|
3250
|
+
// src/components/FontSizeButton.tsx
|
|
3251
|
+
import {
|
|
3252
|
+
useBlockNoteEditor as useBlockNoteEditor3,
|
|
3253
|
+
useComponentsContext as useComponentsContext3,
|
|
3254
|
+
useEditorContentOrSelectionChange,
|
|
3255
|
+
useSelectedBlocks as useSelectedBlocks3
|
|
3256
|
+
} from "@blocknote/react";
|
|
3257
|
+
import { useCallback as useCallback17, useMemo as useMemo3, useState as useState9 } from "react";
|
|
3258
|
+
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3259
|
+
var DEFAULT_LABEL2 = "\uAE30\uBCF8";
|
|
3260
|
+
var toLabel2 = (size) => size.replace(/px$/, "");
|
|
3261
|
+
function FontSizeIcon({ size }) {
|
|
3262
|
+
return /* @__PURE__ */ jsx21(
|
|
3263
|
+
"span",
|
|
3264
|
+
{
|
|
3265
|
+
style: {
|
|
3266
|
+
pointerEvents: "none",
|
|
3267
|
+
fontSize: "12px",
|
|
3268
|
+
fontWeight: 600,
|
|
3269
|
+
lineHeight: "20px",
|
|
3270
|
+
whiteSpace: "nowrap"
|
|
3271
|
+
},
|
|
3272
|
+
children: size ? toLabel2(size) : "\uAC00A"
|
|
3273
|
+
}
|
|
3274
|
+
);
|
|
3275
|
+
}
|
|
3276
|
+
function FontSizeButton2() {
|
|
3277
|
+
const Components = useComponentsContext3();
|
|
3278
|
+
const editor = useBlockNoteEditor3();
|
|
3279
|
+
const ed = editor;
|
|
3280
|
+
const styleSchema = editor.schema.styleSchema;
|
|
3281
|
+
const fontSizeInSchema = styleSchema.fontSize?.type === "fontSize" && styleSchema.fontSize?.propSchema === "string";
|
|
3282
|
+
const selectedBlocks = useSelectedBlocks3(editor);
|
|
3283
|
+
const [currentSize, setCurrentSize] = useState9(
|
|
3284
|
+
fontSizeInSchema ? ed.getActiveStyles().fontSize || "" : ""
|
|
3285
|
+
);
|
|
3286
|
+
useEditorContentOrSelectionChange(() => {
|
|
3287
|
+
if (fontSizeInSchema) {
|
|
3288
|
+
setCurrentSize(ed.getActiveStyles().fontSize || "");
|
|
3289
|
+
}
|
|
3290
|
+
}, editor);
|
|
3291
|
+
const setFontSize = useCallback17(
|
|
3292
|
+
(size) => {
|
|
3293
|
+
size === "" ? ed.removeStyles({ fontSize: "" }) : ed.addStyles({ fontSize: size });
|
|
3294
|
+
setTimeout(() => editor.focus());
|
|
3295
|
+
},
|
|
3296
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3297
|
+
[editor]
|
|
3298
|
+
);
|
|
3299
|
+
const show = useMemo3(() => {
|
|
3300
|
+
if (!fontSizeInSchema) {
|
|
3301
|
+
return false;
|
|
3302
|
+
}
|
|
3303
|
+
for (const block of selectedBlocks) {
|
|
3304
|
+
if (block.content !== void 0) {
|
|
3305
|
+
return true;
|
|
3306
|
+
}
|
|
3307
|
+
}
|
|
3308
|
+
return false;
|
|
3309
|
+
}, [fontSizeInSchema, selectedBlocks]);
|
|
3310
|
+
if (!show || !editor.isEditable) {
|
|
3311
|
+
return null;
|
|
3312
|
+
}
|
|
3313
|
+
const tooltip = "\uAE00\uC790 \uD06C\uAE30";
|
|
3314
|
+
return /* @__PURE__ */ jsxs13(Components.Generic.Menu.Root, { children: [
|
|
3315
|
+
/* @__PURE__ */ jsx21(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx21(
|
|
3316
|
+
Components.FormattingToolbar.Button,
|
|
3317
|
+
{
|
|
3318
|
+
className: "bn-button",
|
|
3319
|
+
"data-test": "font-size",
|
|
3320
|
+
label: tooltip,
|
|
3321
|
+
mainTooltip: tooltip,
|
|
3322
|
+
icon: /* @__PURE__ */ jsx21(FontSizeIcon, { size: currentSize })
|
|
3323
|
+
}
|
|
3324
|
+
) }),
|
|
3325
|
+
/* @__PURE__ */ jsxs13(Components.Generic.Menu.Dropdown, { className: "bn-menu-dropdown", children: [
|
|
3326
|
+
/* @__PURE__ */ jsx21(Components.Generic.Menu.Label, { children: "\uAE00\uC790 \uD06C\uAE30" }),
|
|
3327
|
+
/* @__PURE__ */ jsx21(
|
|
3328
|
+
Components.Generic.Menu.Item,
|
|
3329
|
+
{
|
|
3330
|
+
onClick: () => setFontSize(""),
|
|
3331
|
+
checked: currentSize === "",
|
|
3332
|
+
"data-test": "font-size-default",
|
|
3333
|
+
children: DEFAULT_LABEL2
|
|
3334
|
+
},
|
|
3335
|
+
"font-size-default"
|
|
3336
|
+
),
|
|
3337
|
+
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ jsx21(
|
|
3338
|
+
Components.Generic.Menu.Item,
|
|
3339
|
+
{
|
|
3340
|
+
onClick: () => setFontSize(size),
|
|
3341
|
+
checked: currentSize === size,
|
|
3342
|
+
"data-test": "font-size-" + toLabel2(size),
|
|
3343
|
+
children: toLabel2(size)
|
|
3344
|
+
},
|
|
3345
|
+
"font-size-" + size
|
|
3346
|
+
))
|
|
3347
|
+
] })
|
|
3348
|
+
] });
|
|
3349
|
+
}
|
|
3350
|
+
|
|
3351
|
+
// src/components/color/LumirColorControls.tsx
|
|
3352
|
+
import {
|
|
3353
|
+
isTableCell,
|
|
3354
|
+
mapTableCell as mapTableCell2
|
|
3355
|
+
} from "@blocknote/core";
|
|
3356
|
+
import {
|
|
3357
|
+
SplitButton,
|
|
3358
|
+
useBlockNoteEditor as useBlockNoteEditor4,
|
|
3359
|
+
useComponentsContext as useComponentsContext4,
|
|
3360
|
+
useDictionary,
|
|
3361
|
+
useEditorContentOrSelectionChange as useEditorContentOrSelectionChange2,
|
|
3362
|
+
useSelectedBlocks as useSelectedBlocks4
|
|
3363
|
+
} from "@blocknote/react";
|
|
3364
|
+
import { useCallback as useCallback18, useMemo as useMemo4, useRef as useRef10, useState as useState10 } from "react";
|
|
3365
|
+
import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3366
|
+
var COLORS = [
|
|
3367
|
+
"default",
|
|
3368
|
+
"gray",
|
|
3369
|
+
"brown",
|
|
3370
|
+
"red",
|
|
3371
|
+
"orange",
|
|
3372
|
+
"yellow",
|
|
3373
|
+
"green",
|
|
3374
|
+
"blue",
|
|
3375
|
+
"purple",
|
|
3376
|
+
"pink"
|
|
3377
|
+
];
|
|
3378
|
+
function ColorIcon(props) {
|
|
3379
|
+
const textColor = props.textColor || "default";
|
|
3380
|
+
const backgroundColor = props.backgroundColor || "default";
|
|
3381
|
+
const size = props.size || 16;
|
|
3382
|
+
return /* @__PURE__ */ jsx22(
|
|
3383
|
+
"div",
|
|
3384
|
+
{
|
|
3385
|
+
className: "bn-color-icon",
|
|
3386
|
+
"data-background-color": backgroundColor,
|
|
3387
|
+
"data-text-color": textColor,
|
|
3388
|
+
style: {
|
|
3389
|
+
pointerEvents: "none",
|
|
3390
|
+
fontSize: `${size * 0.75}px`,
|
|
3391
|
+
height: `${size}px`,
|
|
3392
|
+
lineHeight: `${size}px`,
|
|
3393
|
+
textAlign: "center",
|
|
3394
|
+
width: `${size}px`
|
|
3395
|
+
},
|
|
3396
|
+
children: "A"
|
|
3397
|
+
}
|
|
3398
|
+
);
|
|
3399
|
+
}
|
|
3400
|
+
function CellFillIcon({ size = 18 }) {
|
|
3401
|
+
return /* @__PURE__ */ jsx22(
|
|
3402
|
+
"svg",
|
|
3403
|
+
{
|
|
3404
|
+
width: size,
|
|
3405
|
+
height: size,
|
|
3406
|
+
viewBox: "0 0 24 24",
|
|
3407
|
+
fill: "currentColor",
|
|
3408
|
+
style: { pointerEvents: "none" },
|
|
3409
|
+
"aria-hidden": "true",
|
|
3410
|
+
children: /* @__PURE__ */ jsx22("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" })
|
|
3411
|
+
}
|
|
3412
|
+
);
|
|
3413
|
+
}
|
|
3414
|
+
function LumirColorPicker(props) {
|
|
3415
|
+
const Components = useComponentsContext4();
|
|
3416
|
+
const dict = useDictionary();
|
|
3417
|
+
return /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
3418
|
+
props.text ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
3419
|
+
/* @__PURE__ */ jsx22(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
|
|
3420
|
+
COLORS.map((color) => /* @__PURE__ */ jsx22(
|
|
3421
|
+
Components.Generic.Menu.Item,
|
|
3422
|
+
{
|
|
3423
|
+
onClick: () => {
|
|
3424
|
+
props.onClick?.();
|
|
3425
|
+
props.text.setColor(color);
|
|
3426
|
+
},
|
|
3427
|
+
"data-test": "text-color-" + color,
|
|
3428
|
+
icon: /* @__PURE__ */ jsx22(ColorIcon, { textColor: color, size: props.iconSize }),
|
|
3429
|
+
checked: props.text.color === color,
|
|
3430
|
+
children: dict.color_picker.colors[color]
|
|
3431
|
+
},
|
|
3432
|
+
"text-color-" + color
|
|
3433
|
+
))
|
|
3434
|
+
] }) : null,
|
|
3435
|
+
props.background ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
3436
|
+
/* @__PURE__ */ jsx22(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
|
|
3437
|
+
COLORS.map((color) => /* @__PURE__ */ jsx22(
|
|
3438
|
+
Components.Generic.Menu.Item,
|
|
3439
|
+
{
|
|
3440
|
+
onClick: () => {
|
|
3441
|
+
props.onClick?.();
|
|
3442
|
+
props.background.setColor(color);
|
|
3443
|
+
},
|
|
3444
|
+
"data-test": "background-color-" + color,
|
|
3445
|
+
icon: /* @__PURE__ */ jsx22(ColorIcon, { backgroundColor: color, size: props.iconSize }),
|
|
3446
|
+
checked: props.background.color === color,
|
|
3447
|
+
children: dict.color_picker.colors[color]
|
|
3448
|
+
},
|
|
3449
|
+
"background-color-" + color
|
|
3450
|
+
))
|
|
3451
|
+
] }) : null
|
|
3452
|
+
] });
|
|
3453
|
+
}
|
|
3454
|
+
function LumirColorStyleButton() {
|
|
3455
|
+
const Components = useComponentsContext4();
|
|
3456
|
+
const editor = useBlockNoteEditor4();
|
|
3457
|
+
const ed = editor;
|
|
3458
|
+
const styleSchema = editor.schema.styleSchema;
|
|
3459
|
+
const textColorInSchema = styleSchema.textColor?.type === "textColor" && styleSchema.textColor?.propSchema === "string";
|
|
3460
|
+
const backgroundColorInSchema = styleSchema.backgroundColor?.type === "backgroundColor" && styleSchema.backgroundColor?.propSchema === "string";
|
|
3461
|
+
const selectedBlocks = useSelectedBlocks4(editor);
|
|
3462
|
+
const [currentTextColor, setCurrentTextColor] = useState10(
|
|
3463
|
+
textColorInSchema ? ed.getActiveStyles().textColor || "default" : "default"
|
|
3464
|
+
);
|
|
3465
|
+
const [currentBackgroundColor, setCurrentBackgroundColor] = useState10(
|
|
3466
|
+
backgroundColorInSchema ? ed.getActiveStyles().backgroundColor || "default" : "default"
|
|
3467
|
+
);
|
|
3468
|
+
useEditorContentOrSelectionChange2(() => {
|
|
3469
|
+
const active = ed.getActiveStyles();
|
|
3470
|
+
if (textColorInSchema) {
|
|
3471
|
+
setCurrentTextColor(active.textColor || "default");
|
|
3472
|
+
}
|
|
3473
|
+
if (backgroundColorInSchema) {
|
|
3474
|
+
setCurrentBackgroundColor(active.backgroundColor || "default");
|
|
3475
|
+
}
|
|
3476
|
+
}, editor);
|
|
3477
|
+
const setTextColor = useCallback18(
|
|
3478
|
+
(color) => {
|
|
3479
|
+
color === "default" ? ed.removeStyles({ textColor: color }) : ed.addStyles({ textColor: color });
|
|
3480
|
+
setTimeout(() => editor.focus());
|
|
3481
|
+
},
|
|
3482
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3483
|
+
[editor]
|
|
3484
|
+
);
|
|
3485
|
+
const setBackgroundColor = useCallback18(
|
|
3486
|
+
(color) => {
|
|
3487
|
+
color === "default" ? ed.removeStyles({ backgroundColor: color }) : ed.addStyles({ backgroundColor: color });
|
|
3488
|
+
setTimeout(() => editor.focus());
|
|
3489
|
+
},
|
|
3490
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3491
|
+
[editor]
|
|
3492
|
+
);
|
|
3493
|
+
const show = useMemo4(() => {
|
|
3494
|
+
if (!textColorInSchema && !backgroundColorInSchema) {
|
|
3495
|
+
return false;
|
|
3496
|
+
}
|
|
3497
|
+
for (const block of selectedBlocks) {
|
|
3498
|
+
if (block.content !== void 0) {
|
|
3499
|
+
return true;
|
|
3500
|
+
}
|
|
3501
|
+
}
|
|
3502
|
+
return false;
|
|
3503
|
+
}, [backgroundColorInSchema, selectedBlocks, textColorInSchema]);
|
|
3504
|
+
if (!show || !editor.isEditable) {
|
|
3505
|
+
return null;
|
|
3506
|
+
}
|
|
3507
|
+
const tooltip = "\uD14D\uC2A4\uD2B8 \uC0C9\xB7\uBC30\uACBD";
|
|
3508
|
+
return /* @__PURE__ */ jsxs14(Components.Generic.Menu.Root, { children: [
|
|
3509
|
+
/* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx22(
|
|
3510
|
+
Components.FormattingToolbar.Button,
|
|
3511
|
+
{
|
|
3512
|
+
className: "bn-button",
|
|
3513
|
+
"data-test": "colors",
|
|
3514
|
+
label: tooltip,
|
|
3515
|
+
mainTooltip: tooltip,
|
|
3516
|
+
icon: /* @__PURE__ */ jsx22(
|
|
3517
|
+
ColorIcon,
|
|
3518
|
+
{
|
|
3519
|
+
textColor: currentTextColor,
|
|
3520
|
+
backgroundColor: currentBackgroundColor,
|
|
3521
|
+
size: 20
|
|
3522
|
+
}
|
|
3523
|
+
)
|
|
3524
|
+
}
|
|
3525
|
+
) }),
|
|
3526
|
+
/* @__PURE__ */ jsx22(
|
|
3527
|
+
Components.Generic.Menu.Dropdown,
|
|
3528
|
+
{
|
|
3529
|
+
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
3530
|
+
children: /* @__PURE__ */ jsx22(
|
|
3531
|
+
LumirColorPicker,
|
|
3532
|
+
{
|
|
3533
|
+
textTitle: "\uD14D\uC2A4\uD2B8 \uC0C9",
|
|
3534
|
+
backgroundTitle: "\uD14D\uC2A4\uD2B8 \uBC30\uACBD",
|
|
3535
|
+
text: textColorInSchema ? { color: currentTextColor, setColor: setTextColor } : void 0,
|
|
3536
|
+
background: backgroundColorInSchema ? { color: currentBackgroundColor, setColor: setBackgroundColor } : void 0
|
|
3537
|
+
}
|
|
3538
|
+
)
|
|
3539
|
+
}
|
|
3540
|
+
)
|
|
3541
|
+
] });
|
|
3542
|
+
}
|
|
3543
|
+
function LumirCellColorToolbarButton() {
|
|
3544
|
+
const Components = useComponentsContext4();
|
|
3545
|
+
const editor = useBlockNoteEditor4();
|
|
3546
|
+
const selectedBlocks = useSelectedBlocks4(editor);
|
|
3547
|
+
const isMultiCell = useMemo4(() => {
|
|
3548
|
+
if (selectedBlocks.length !== 1 || selectedBlocks[0].type !== "table") {
|
|
3549
|
+
return false;
|
|
3550
|
+
}
|
|
3551
|
+
const cs = editor.tableHandles?.getCellSelection();
|
|
3552
|
+
return !!cs && cs.cells.length > 1;
|
|
3553
|
+
}, [editor, selectedBlocks]);
|
|
3554
|
+
const stashRef = useRef10([]);
|
|
3555
|
+
const applyBackground = useCallback18(
|
|
3556
|
+
(color) => {
|
|
3557
|
+
const live = getSelectedCellPositions(editor);
|
|
3558
|
+
const positions = live.length > 0 ? live : stashRef.current;
|
|
3559
|
+
setCellAttrAtPositions(editor, positions, "backgroundColor", color);
|
|
3560
|
+
setTimeout(() => editor.focus());
|
|
3561
|
+
},
|
|
3562
|
+
[editor]
|
|
3563
|
+
);
|
|
3564
|
+
if (!editor.isEditable || !isMultiCell) {
|
|
3565
|
+
return null;
|
|
3566
|
+
}
|
|
3567
|
+
const tooltip = "\uC140 \uBC30\uACBD\uC0C9";
|
|
3568
|
+
return /* @__PURE__ */ jsxs14(
|
|
3569
|
+
Components.Generic.Menu.Root,
|
|
3570
|
+
{
|
|
3571
|
+
onOpenChange: (open) => {
|
|
3572
|
+
if (open) {
|
|
3573
|
+
stashRef.current = getSelectedCellPositions(editor);
|
|
3574
|
+
}
|
|
3575
|
+
},
|
|
3576
|
+
children: [
|
|
3577
|
+
/* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx22(
|
|
3578
|
+
Components.FormattingToolbar.Button,
|
|
3579
|
+
{
|
|
3580
|
+
className: "bn-button",
|
|
3581
|
+
"data-test": "cell-colors",
|
|
3582
|
+
label: tooltip,
|
|
3583
|
+
mainTooltip: tooltip,
|
|
3584
|
+
icon: /* @__PURE__ */ jsx22(CellFillIcon, { size: 18 })
|
|
3585
|
+
}
|
|
3586
|
+
) }),
|
|
3587
|
+
/* @__PURE__ */ jsx22(
|
|
3588
|
+
Components.Generic.Menu.Dropdown,
|
|
3589
|
+
{
|
|
3590
|
+
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
3591
|
+
children: /* @__PURE__ */ jsx22(
|
|
3592
|
+
LumirColorPicker,
|
|
3593
|
+
{
|
|
3594
|
+
backgroundTitle: "\uC140 \uBC30\uACBD",
|
|
3595
|
+
background: { color: "default", setColor: applyBackground }
|
|
3596
|
+
}
|
|
3597
|
+
)
|
|
3598
|
+
}
|
|
3599
|
+
)
|
|
3600
|
+
]
|
|
3601
|
+
}
|
|
3602
|
+
);
|
|
3603
|
+
}
|
|
3604
|
+
function LumirCellColorPickerButton(props) {
|
|
3605
|
+
const Components = useComponentsContext4();
|
|
3606
|
+
const editor = useBlockNoteEditor4();
|
|
3607
|
+
const updateColor = (color, type) => {
|
|
3608
|
+
const newTable = props.block.content.rows.map((row) => ({
|
|
3609
|
+
...row,
|
|
3610
|
+
cells: row.cells.map((cell) => mapTableCell2(cell))
|
|
3611
|
+
}));
|
|
3612
|
+
if (type === "text") {
|
|
3613
|
+
newTable[props.rowIndex].cells[props.colIndex].props.textColor = color;
|
|
3614
|
+
} else {
|
|
3615
|
+
newTable[props.rowIndex].cells[props.colIndex].props.backgroundColor = color;
|
|
3616
|
+
}
|
|
3617
|
+
editor.updateBlock(props.block, {
|
|
3618
|
+
type: "table",
|
|
3619
|
+
content: { ...props.block.content, rows: newTable }
|
|
3620
|
+
});
|
|
3621
|
+
editor.setTextCursorPosition(props.block);
|
|
3622
|
+
};
|
|
3623
|
+
const currentCell = props.block.content.rows[props.rowIndex]?.cells?.[props.colIndex];
|
|
3624
|
+
if (!currentCell || editor.settings.tables.cellTextColor === false && editor.settings.tables.cellBackgroundColor === false) {
|
|
3625
|
+
return null;
|
|
3626
|
+
}
|
|
3627
|
+
return /* @__PURE__ */ jsxs14(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
|
|
3628
|
+
/* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ jsx22(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
|
|
3629
|
+
/* @__PURE__ */ jsx22(
|
|
3630
|
+
Components.Generic.Menu.Dropdown,
|
|
3631
|
+
{
|
|
3632
|
+
sub: true,
|
|
3633
|
+
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
3634
|
+
children: /* @__PURE__ */ jsx22(
|
|
3635
|
+
LumirColorPicker,
|
|
3636
|
+
{
|
|
3637
|
+
iconSize: 18,
|
|
3638
|
+
textTitle: "\uC140 \uAE00\uC790\uC0C9",
|
|
3639
|
+
backgroundTitle: "\uC140 \uBC30\uACBD",
|
|
3640
|
+
text: editor.settings.tables.cellTextColor ? {
|
|
3641
|
+
color: isTableCell(currentCell) ? currentCell.props.textColor : "default",
|
|
3642
|
+
setColor: (color) => updateColor(color, "text")
|
|
3643
|
+
} : void 0,
|
|
3644
|
+
background: editor.settings.tables.cellBackgroundColor ? {
|
|
3645
|
+
color: isTableCell(currentCell) ? currentCell.props.backgroundColor : "default",
|
|
3646
|
+
setColor: (color) => updateColor(color, "background")
|
|
3647
|
+
} : void 0
|
|
3648
|
+
}
|
|
3649
|
+
)
|
|
3650
|
+
}
|
|
3651
|
+
)
|
|
3652
|
+
] });
|
|
3653
|
+
}
|
|
3654
|
+
function LumirTableCellMenu(props) {
|
|
3655
|
+
const Components = useComponentsContext4();
|
|
3656
|
+
return /* @__PURE__ */ jsx22(
|
|
3657
|
+
Components.Generic.Menu.Dropdown,
|
|
3658
|
+
{
|
|
3659
|
+
className: "bn-menu-dropdown bn-drag-handle-menu",
|
|
3660
|
+
children: props.children || /* @__PURE__ */ jsxs14(Fragment5, { children: [
|
|
3661
|
+
/* @__PURE__ */ jsx22(
|
|
3662
|
+
SplitButton,
|
|
3663
|
+
{
|
|
3664
|
+
block: props.block,
|
|
3665
|
+
rowIndex: props.rowIndex,
|
|
3666
|
+
colIndex: props.colIndex
|
|
3667
|
+
}
|
|
3668
|
+
),
|
|
3669
|
+
/* @__PURE__ */ jsx22(
|
|
3670
|
+
LumirCellColorPickerButton,
|
|
3671
|
+
{
|
|
3672
|
+
block: props.block,
|
|
3673
|
+
rowIndex: props.rowIndex,
|
|
3674
|
+
colIndex: props.colIndex
|
|
3675
|
+
}
|
|
3676
|
+
)
|
|
3677
|
+
] })
|
|
3678
|
+
}
|
|
3679
|
+
);
|
|
3680
|
+
}
|
|
3681
|
+
|
|
3081
3682
|
// src/components/CustomFormattingToolbar.tsx
|
|
3082
|
-
import { jsx as
|
|
3683
|
+
import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3083
3684
|
var CustomFormattingToolbar = () => {
|
|
3084
|
-
return /* @__PURE__ */
|
|
3085
|
-
/* @__PURE__ */
|
|
3086
|
-
/* @__PURE__ */
|
|
3087
|
-
/* @__PURE__ */
|
|
3088
|
-
/* @__PURE__ */
|
|
3089
|
-
/* @__PURE__ */
|
|
3090
|
-
/* @__PURE__ */
|
|
3091
|
-
/* @__PURE__ */
|
|
3092
|
-
/* @__PURE__ */
|
|
3093
|
-
/* @__PURE__ */
|
|
3094
|
-
/* @__PURE__ */
|
|
3685
|
+
return /* @__PURE__ */ jsxs15(FormattingToolbar, { children: [
|
|
3686
|
+
/* @__PURE__ */ jsx23(BlockTypeSelect2, {}, "blockTypeSelect"),
|
|
3687
|
+
/* @__PURE__ */ jsx23(TableCellMergeButton, {}, "tableCellMergeButton"),
|
|
3688
|
+
/* @__PURE__ */ jsx23(FileCaptionButton, {}, "fileCaptionButton"),
|
|
3689
|
+
/* @__PURE__ */ jsx23(FileReplaceButton, {}, "replaceFileButton"),
|
|
3690
|
+
/* @__PURE__ */ jsx23(FileRenameButton, {}, "fileRenameButton"),
|
|
3691
|
+
/* @__PURE__ */ jsx23(FileDeleteButton, {}, "fileDeleteButton"),
|
|
3692
|
+
/* @__PURE__ */ jsx23(FileDownloadButton, {}, "fileDownloadButton"),
|
|
3693
|
+
/* @__PURE__ */ jsx23(FilePreviewButton, {}, "filePreviewButton"),
|
|
3694
|
+
/* @__PURE__ */ jsx23(BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
|
|
3695
|
+
/* @__PURE__ */ jsx23(
|
|
3095
3696
|
BasicTextStyleButton,
|
|
3096
3697
|
{
|
|
3097
3698
|
basicTextStyle: "italic"
|
|
3098
3699
|
},
|
|
3099
3700
|
"italicStyleButton"
|
|
3100
3701
|
),
|
|
3101
|
-
/* @__PURE__ */
|
|
3702
|
+
/* @__PURE__ */ jsx23(
|
|
3102
3703
|
BasicTextStyleButton,
|
|
3103
3704
|
{
|
|
3104
3705
|
basicTextStyle: "underline"
|
|
3105
3706
|
},
|
|
3106
3707
|
"underlineStyleButton"
|
|
3107
3708
|
),
|
|
3108
|
-
/* @__PURE__ */
|
|
3709
|
+
/* @__PURE__ */ jsx23(
|
|
3109
3710
|
BasicTextStyleButton,
|
|
3110
3711
|
{
|
|
3111
3712
|
basicTextStyle: "strike"
|
|
3112
3713
|
},
|
|
3113
3714
|
"strikeStyleButton"
|
|
3114
3715
|
),
|
|
3115
|
-
/* @__PURE__ */
|
|
3116
|
-
/* @__PURE__ */
|
|
3716
|
+
/* @__PURE__ */ jsx23(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
|
|
3717
|
+
/* @__PURE__ */ jsx23(
|
|
3117
3718
|
TextAlignButtonWithVA,
|
|
3118
3719
|
{
|
|
3119
3720
|
textAlignment: "center"
|
|
3120
3721
|
},
|
|
3121
3722
|
"textAlignCenterButton"
|
|
3122
3723
|
),
|
|
3123
|
-
/* @__PURE__ */
|
|
3124
|
-
/* @__PURE__ */
|
|
3724
|
+
/* @__PURE__ */ jsx23(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
|
|
3725
|
+
/* @__PURE__ */ jsx23(
|
|
3125
3726
|
VerticalAlignButton,
|
|
3126
3727
|
{
|
|
3127
3728
|
verticalAlignment: "top"
|
|
3128
3729
|
},
|
|
3129
3730
|
"verticalAlignTop"
|
|
3130
3731
|
),
|
|
3131
|
-
/* @__PURE__ */
|
|
3732
|
+
/* @__PURE__ */ jsx23(
|
|
3132
3733
|
VerticalAlignButton,
|
|
3133
3734
|
{
|
|
3134
3735
|
verticalAlignment: "middle"
|
|
3135
3736
|
},
|
|
3136
3737
|
"verticalAlignMiddle"
|
|
3137
3738
|
),
|
|
3138
|
-
/* @__PURE__ */
|
|
3739
|
+
/* @__PURE__ */ jsx23(
|
|
3139
3740
|
VerticalAlignButton,
|
|
3140
3741
|
{
|
|
3141
3742
|
verticalAlignment: "bottom"
|
|
3142
3743
|
},
|
|
3143
3744
|
"verticalAlignBottom"
|
|
3144
3745
|
),
|
|
3145
|
-
/* @__PURE__ */
|
|
3146
|
-
/* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3148
|
-
/* @__PURE__ */
|
|
3746
|
+
/* @__PURE__ */ jsx23(FontSizeButton2, {}, "fontSizeButton"),
|
|
3747
|
+
/* @__PURE__ */ jsx23(LumirColorStyleButton, {}, "colorStyleButton"),
|
|
3748
|
+
/* @__PURE__ */ jsx23(LumirCellColorToolbarButton, {}, "cellColorButton"),
|
|
3749
|
+
/* @__PURE__ */ jsx23(NestBlockButton, {}, "nestBlockButton"),
|
|
3750
|
+
/* @__PURE__ */ jsx23(UnnestBlockButton, {}, "unnestBlockButton"),
|
|
3751
|
+
/* @__PURE__ */ jsx23(CreateLinkButton, {}, "createLinkButton")
|
|
3149
3752
|
] });
|
|
3150
3753
|
};
|
|
3151
3754
|
|
|
3755
|
+
// src/components/LumirTableHandlesController.tsx
|
|
3756
|
+
import {
|
|
3757
|
+
ExtendButton,
|
|
3758
|
+
TableCellButton,
|
|
3759
|
+
TableHandle,
|
|
3760
|
+
useBlockNoteEditor as useBlockNoteEditor5,
|
|
3761
|
+
useEditorContentOrSelectionChange as useEditorContentOrSelectionChange3,
|
|
3762
|
+
useExtendButtonsPositioning,
|
|
3763
|
+
useUIPluginState
|
|
3764
|
+
} from "@blocknote/react";
|
|
3765
|
+
import { autoUpdate as autoUpdate2, FloatingPortal } from "@floating-ui/react";
|
|
3766
|
+
import { useCallback as useCallback19, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef11, useState as useState11 } from "react";
|
|
3767
|
+
|
|
3768
|
+
// src/components/hooks/useFocusedCellHandlePositioning.ts
|
|
3769
|
+
import {
|
|
3770
|
+
autoUpdate,
|
|
3771
|
+
offset,
|
|
3772
|
+
useFloating,
|
|
3773
|
+
useTransitionStyles
|
|
3774
|
+
} from "@floating-ui/react";
|
|
3775
|
+
import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
|
|
3776
|
+
function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
3777
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
3778
|
+
open: show,
|
|
3779
|
+
placement: orientation === "row" ? "left" : orientation === "col" ? "top" : "right",
|
|
3780
|
+
// col/row: 가장자리 선(zero-size)에, cell: 셀 우측 보더에 14px hit-area 중앙 정렬(-7).
|
|
3781
|
+
middleware: [offset(-7)],
|
|
3782
|
+
whileElementsMounted: autoUpdate
|
|
3783
|
+
});
|
|
3784
|
+
const { isMounted, styles } = useTransitionStyles(context);
|
|
3785
|
+
useEffect9(() => {
|
|
3786
|
+
if (!cellEl) {
|
|
3787
|
+
refs.setReference(null);
|
|
3788
|
+
return;
|
|
3789
|
+
}
|
|
3790
|
+
refs.setReference({
|
|
3791
|
+
contextElement: cellEl,
|
|
3792
|
+
getBoundingClientRect: () => {
|
|
3793
|
+
const c = cellEl.getBoundingClientRect();
|
|
3794
|
+
const t = tbodyEl?.getBoundingClientRect() ?? c;
|
|
3795
|
+
if (orientation === "col") {
|
|
3796
|
+
return new DOMRect(c.left, t.top, c.width, 0);
|
|
3797
|
+
}
|
|
3798
|
+
if (orientation === "row") {
|
|
3799
|
+
return new DOMRect(t.left, c.top, 0, c.height);
|
|
3800
|
+
}
|
|
3801
|
+
return c;
|
|
3802
|
+
}
|
|
3803
|
+
});
|
|
3804
|
+
}, [cellEl, tbodyEl, orientation, refs]);
|
|
3805
|
+
return useMemo5(
|
|
3806
|
+
() => ({
|
|
3807
|
+
isMounted,
|
|
3808
|
+
ref: refs.setFloating,
|
|
3809
|
+
// display는 CSS 클래스에서 제어한다(absolute 자식 stacking).
|
|
3810
|
+
style: {
|
|
3811
|
+
...styles,
|
|
3812
|
+
...floatingStyles
|
|
3813
|
+
}
|
|
3814
|
+
}),
|
|
3815
|
+
[floatingStyles, isMounted, refs.setFloating, styles]
|
|
3816
|
+
);
|
|
3817
|
+
}
|
|
3818
|
+
|
|
3819
|
+
// src/components/LumirTableHandlesController.tsx
|
|
3820
|
+
import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3821
|
+
function syncCoreHoverToFocusedCell(cellEl) {
|
|
3822
|
+
const r = cellEl.getBoundingClientRect();
|
|
3823
|
+
cellEl.dispatchEvent(
|
|
3824
|
+
new MouseEvent("mousemove", {
|
|
3825
|
+
bubbles: true,
|
|
3826
|
+
cancelable: true,
|
|
3827
|
+
view: window,
|
|
3828
|
+
clientX: r.left + r.width / 2,
|
|
3829
|
+
clientY: r.top + r.height / 2
|
|
3830
|
+
})
|
|
3831
|
+
);
|
|
3832
|
+
}
|
|
3833
|
+
function LumirTableHandlesController() {
|
|
3834
|
+
const editor = useBlockNoteEditor5();
|
|
3835
|
+
const [focused, setFocused] = useState11(null);
|
|
3836
|
+
const [menuContainerRef, setMenuContainerRef] = useState11(null);
|
|
3837
|
+
const [overlayEl, setOverlayEl] = useState11(null);
|
|
3838
|
+
const [openMenu, setOpenMenu] = useState11(null);
|
|
3839
|
+
const frozenRef = useRef11(false);
|
|
3840
|
+
const menuOpenRef = useRef11(false);
|
|
3841
|
+
const draggingRef = useRef11(false);
|
|
3842
|
+
const recompute = useCallback19(() => {
|
|
3843
|
+
if (frozenRef.current) {
|
|
3844
|
+
return;
|
|
3845
|
+
}
|
|
3846
|
+
const th2 = editor.tableHandles;
|
|
3847
|
+
const view = editor.prosemirrorView;
|
|
3848
|
+
if (!th2 || !view) {
|
|
3849
|
+
setFocused(null);
|
|
3850
|
+
return;
|
|
3851
|
+
}
|
|
3852
|
+
let cellEl2 = null;
|
|
3853
|
+
try {
|
|
3854
|
+
const { node } = view.domAtPos(view.state.selection.from);
|
|
3855
|
+
const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
|
|
3856
|
+
cellEl2 = el?.closest?.("td, th") ?? null;
|
|
3857
|
+
} catch {
|
|
3858
|
+
cellEl2 = null;
|
|
3859
|
+
}
|
|
3860
|
+
if (!cellEl2 || !cellEl2.isConnected) {
|
|
3861
|
+
setFocused(null);
|
|
3862
|
+
return;
|
|
3863
|
+
}
|
|
3864
|
+
const blockId = cellEl2.closest("[data-id]")?.getAttribute("data-id");
|
|
3865
|
+
const block = blockId ? editor.getBlock(blockId) : void 0;
|
|
3866
|
+
if (!block || block.type !== "table") {
|
|
3867
|
+
setFocused(null);
|
|
3868
|
+
return;
|
|
3869
|
+
}
|
|
3870
|
+
const cellSel = th2.getCellSelection();
|
|
3871
|
+
if (!cellSel) {
|
|
3872
|
+
setFocused(null);
|
|
3873
|
+
return;
|
|
3874
|
+
}
|
|
3875
|
+
const widgetContainer = cellEl2.closest(".tableWrapper")?.querySelector(".table-widgets-container");
|
|
3876
|
+
const tbodyEl2 = cellEl2.closest("tbody");
|
|
3877
|
+
if (!widgetContainer || !tbodyEl2) {
|
|
3878
|
+
setFocused(null);
|
|
3879
|
+
return;
|
|
3880
|
+
}
|
|
3881
|
+
setFocused({
|
|
3882
|
+
block,
|
|
3883
|
+
rowIndex: cellSel.from.row,
|
|
3884
|
+
colIndex: cellSel.from.col,
|
|
3885
|
+
cellEl: cellEl2,
|
|
3886
|
+
tbodyEl: tbodyEl2,
|
|
3887
|
+
widgetContainer
|
|
3888
|
+
});
|
|
3889
|
+
}, [editor]);
|
|
3890
|
+
useEditorContentOrSelectionChange3(recompute, editor);
|
|
3891
|
+
useEffect10(() => {
|
|
3892
|
+
recompute();
|
|
3893
|
+
}, [recompute]);
|
|
3894
|
+
useEffect10(() => {
|
|
3895
|
+
const onUp = () => {
|
|
3896
|
+
requestAnimationFrame(() => {
|
|
3897
|
+
if (!menuOpenRef.current && !draggingRef.current && frozenRef.current) {
|
|
3898
|
+
frozenRef.current = false;
|
|
3899
|
+
recompute();
|
|
3900
|
+
}
|
|
3901
|
+
});
|
|
3902
|
+
};
|
|
3903
|
+
window.addEventListener("pointerup", onUp);
|
|
3904
|
+
return () => window.removeEventListener("pointerup", onUp);
|
|
3905
|
+
}, [recompute]);
|
|
3906
|
+
useEffect10(() => {
|
|
3907
|
+
const f = focused;
|
|
3908
|
+
if (!f || !overlayEl) {
|
|
3909
|
+
return;
|
|
3910
|
+
}
|
|
3911
|
+
const PAD = 1;
|
|
3912
|
+
const update = () => {
|
|
3913
|
+
const cr = f.cellEl.getBoundingClientRect();
|
|
3914
|
+
const tr = f.tbodyEl.getBoundingClientRect();
|
|
3915
|
+
const kr = f.widgetContainer.getBoundingClientRect();
|
|
3916
|
+
const x1 = openMenu === "row" ? tr.left : cr.left;
|
|
3917
|
+
const y1 = openMenu === "col" ? tr.top : cr.top;
|
|
3918
|
+
const x2 = openMenu === "row" ? tr.right : cr.right;
|
|
3919
|
+
const y2 = openMenu === "col" ? tr.bottom : cr.bottom;
|
|
3920
|
+
const dpr = window.devicePixelRatio || 1;
|
|
3921
|
+
const rd = (v) => Math.round(v * dpr) / dpr;
|
|
3922
|
+
const left = rd(x1 - kr.left) - PAD;
|
|
3923
|
+
const top = rd(y1 - kr.top) - PAD;
|
|
3924
|
+
const right = rd(x2 - kr.left) + PAD;
|
|
3925
|
+
const bottom = rd(y2 - kr.top) + PAD;
|
|
3926
|
+
overlayEl.style.transform = `translate(${left}px, ${top}px)`;
|
|
3927
|
+
overlayEl.style.width = `${right - left}px`;
|
|
3928
|
+
overlayEl.style.height = `${bottom - top}px`;
|
|
3929
|
+
};
|
|
3930
|
+
update();
|
|
3931
|
+
return autoUpdate2(f.cellEl, overlayEl, update);
|
|
3932
|
+
}, [focused, overlayEl, openMenu]);
|
|
3933
|
+
const cellEl = focused?.cellEl ?? null;
|
|
3934
|
+
const tbodyEl = focused?.tbodyEl ?? null;
|
|
3935
|
+
const show = focused !== null;
|
|
3936
|
+
const rowHandle = useFocusedCellHandlePositioning(cellEl, tbodyEl, "row", show);
|
|
3937
|
+
const colHandle = useFocusedCellHandlePositioning(cellEl, tbodyEl, "col", show);
|
|
3938
|
+
const cellHandle = useFocusedCellHandlePositioning(
|
|
3939
|
+
cellEl,
|
|
3940
|
+
tbodyEl,
|
|
3941
|
+
"cell",
|
|
3942
|
+
show
|
|
3943
|
+
);
|
|
3944
|
+
const th = editor.tableHandles;
|
|
3945
|
+
const coreState = useUIPluginState(
|
|
3946
|
+
editor.tableHandles.onUpdate.bind(editor.tableHandles)
|
|
3947
|
+
);
|
|
3948
|
+
const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = useExtendButtonsPositioning(
|
|
3949
|
+
coreState?.showAddOrRemoveColumnsButton || false,
|
|
3950
|
+
coreState?.showAddOrRemoveRowsButton || false,
|
|
3951
|
+
coreState?.referencePosTable || null
|
|
3952
|
+
);
|
|
3953
|
+
const onStartExtend = useCallback19(() => {
|
|
3954
|
+
editor.tableHandles?.freezeHandles();
|
|
3955
|
+
}, [editor]);
|
|
3956
|
+
const onEndExtend = useCallback19(() => {
|
|
3957
|
+
editor.tableHandles?.unfreezeHandles();
|
|
3958
|
+
}, [editor]);
|
|
3959
|
+
const menuHandlers = useMemo6(() => {
|
|
3960
|
+
const mk = (kind) => ({
|
|
3961
|
+
freeze: () => {
|
|
3962
|
+
menuOpenRef.current = true;
|
|
3963
|
+
frozenRef.current = true;
|
|
3964
|
+
setOpenMenu(kind);
|
|
3965
|
+
editor.tableHandles?.freezeHandles();
|
|
3966
|
+
},
|
|
3967
|
+
unfreeze: () => {
|
|
3968
|
+
menuOpenRef.current = false;
|
|
3969
|
+
frozenRef.current = false;
|
|
3970
|
+
setOpenMenu(null);
|
|
3971
|
+
editor.tableHandles?.unfreezeHandles();
|
|
3972
|
+
recompute();
|
|
3973
|
+
}
|
|
3974
|
+
});
|
|
3975
|
+
return { col: mk("col"), row: mk("row"), cell: mk("cell") };
|
|
3976
|
+
}, [editor, recompute]);
|
|
3977
|
+
const onGutterPointerDown = useCallback19(() => {
|
|
3978
|
+
frozenRef.current = true;
|
|
3979
|
+
}, []);
|
|
3980
|
+
const onGutterPointerEnter = useCallback19(
|
|
3981
|
+
(e) => {
|
|
3982
|
+
if (e.buttons === 0 && focused) {
|
|
3983
|
+
syncCoreHoverToFocusedCell(focused.cellEl);
|
|
3984
|
+
}
|
|
3985
|
+
},
|
|
3986
|
+
[focused]
|
|
3987
|
+
);
|
|
3988
|
+
const makeDragStart = useCallback19(
|
|
3989
|
+
(dir) => (e) => {
|
|
3990
|
+
draggingRef.current = true;
|
|
3991
|
+
frozenRef.current = true;
|
|
3992
|
+
if (dir === "row") {
|
|
3993
|
+
editor.tableHandles?.rowDragStart(e);
|
|
3994
|
+
} else {
|
|
3995
|
+
editor.tableHandles?.colDragStart(e);
|
|
3996
|
+
}
|
|
3997
|
+
},
|
|
3998
|
+
[editor]
|
|
3999
|
+
);
|
|
4000
|
+
const onDragEnd = useCallback19(() => {
|
|
4001
|
+
editor.tableHandles?.dragEnd();
|
|
4002
|
+
draggingRef.current = false;
|
|
4003
|
+
frozenRef.current = false;
|
|
4004
|
+
recompute();
|
|
4005
|
+
}, [editor, recompute]);
|
|
4006
|
+
const noop = useCallback19(() => {
|
|
4007
|
+
}, []);
|
|
4008
|
+
return /* @__PURE__ */ jsxs16(Fragment6, { children: [
|
|
4009
|
+
/* @__PURE__ */ jsx24("div", { ref: setMenuContainerRef }),
|
|
4010
|
+
th && focused && menuContainerRef && /* @__PURE__ */ jsxs16(FloatingPortal, { root: focused.widgetContainer, children: [
|
|
4011
|
+
/* @__PURE__ */ jsx24("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
|
|
4012
|
+
colHandle.isMounted && /* @__PURE__ */ jsxs16(
|
|
4013
|
+
"div",
|
|
4014
|
+
{
|
|
4015
|
+
ref: colHandle.ref,
|
|
4016
|
+
style: colHandle.style,
|
|
4017
|
+
className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--col" + (openMenu === "col" ? " lumir-tbl-gutter-wrap--active" : ""),
|
|
4018
|
+
onPointerEnter: onGutterPointerEnter,
|
|
4019
|
+
onPointerDown: onGutterPointerDown,
|
|
4020
|
+
children: [
|
|
4021
|
+
/* @__PURE__ */ jsx24("span", { className: "lumir-tbl-gutter" }),
|
|
4022
|
+
/* @__PURE__ */ jsx24("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx24(
|
|
4023
|
+
TableHandle,
|
|
4024
|
+
{
|
|
4025
|
+
editor,
|
|
4026
|
+
orientation: "column",
|
|
4027
|
+
index: focused.colIndex,
|
|
4028
|
+
block: focused.block,
|
|
4029
|
+
dragStart: makeDragStart("col"),
|
|
4030
|
+
dragEnd: onDragEnd,
|
|
4031
|
+
freezeHandles: menuHandlers.col.freeze,
|
|
4032
|
+
unfreezeHandles: menuHandlers.col.unfreeze,
|
|
4033
|
+
menuContainer: menuContainerRef,
|
|
4034
|
+
showOtherSide: noop,
|
|
4035
|
+
hideOtherSide: noop
|
|
4036
|
+
}
|
|
4037
|
+
) })
|
|
4038
|
+
]
|
|
4039
|
+
}
|
|
4040
|
+
),
|
|
4041
|
+
rowHandle.isMounted && /* @__PURE__ */ jsxs16(
|
|
4042
|
+
"div",
|
|
4043
|
+
{
|
|
4044
|
+
ref: rowHandle.ref,
|
|
4045
|
+
style: rowHandle.style,
|
|
4046
|
+
className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--row" + (openMenu === "row" ? " lumir-tbl-gutter-wrap--active" : ""),
|
|
4047
|
+
onPointerEnter: onGutterPointerEnter,
|
|
4048
|
+
onPointerDown: onGutterPointerDown,
|
|
4049
|
+
children: [
|
|
4050
|
+
/* @__PURE__ */ jsx24("span", { className: "lumir-tbl-gutter" }),
|
|
4051
|
+
/* @__PURE__ */ jsx24("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx24(
|
|
4052
|
+
TableHandle,
|
|
4053
|
+
{
|
|
4054
|
+
editor,
|
|
4055
|
+
orientation: "row",
|
|
4056
|
+
index: focused.rowIndex,
|
|
4057
|
+
block: focused.block,
|
|
4058
|
+
dragStart: makeDragStart("row"),
|
|
4059
|
+
dragEnd: onDragEnd,
|
|
4060
|
+
freezeHandles: menuHandlers.row.freeze,
|
|
4061
|
+
unfreezeHandles: menuHandlers.row.unfreeze,
|
|
4062
|
+
menuContainer: menuContainerRef,
|
|
4063
|
+
showOtherSide: noop,
|
|
4064
|
+
hideOtherSide: noop
|
|
4065
|
+
}
|
|
4066
|
+
) })
|
|
4067
|
+
]
|
|
4068
|
+
}
|
|
4069
|
+
),
|
|
4070
|
+
cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ jsxs16(
|
|
4071
|
+
"div",
|
|
4072
|
+
{
|
|
4073
|
+
ref: cellHandle.ref,
|
|
4074
|
+
style: cellHandle.style,
|
|
4075
|
+
className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--cell" + (openMenu === "cell" ? " lumir-tbl-gutter-wrap--active" : ""),
|
|
4076
|
+
onPointerDown: onGutterPointerDown,
|
|
4077
|
+
children: [
|
|
4078
|
+
/* @__PURE__ */ jsx24("span", { className: "lumir-tbl-gutter" }),
|
|
4079
|
+
/* @__PURE__ */ jsx24("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx24(
|
|
4080
|
+
TableCellButton,
|
|
4081
|
+
{
|
|
4082
|
+
editor,
|
|
4083
|
+
rowIndex: focused.rowIndex,
|
|
4084
|
+
colIndex: focused.colIndex,
|
|
4085
|
+
block: focused.block,
|
|
4086
|
+
tableCellMenu: LumirTableCellMenu,
|
|
4087
|
+
menuContainer: menuContainerRef,
|
|
4088
|
+
freezeHandles: menuHandlers.cell.freeze,
|
|
4089
|
+
unfreezeHandles: menuHandlers.cell.unfreeze
|
|
4090
|
+
}
|
|
4091
|
+
) })
|
|
4092
|
+
]
|
|
4093
|
+
}
|
|
4094
|
+
)
|
|
4095
|
+
] }),
|
|
4096
|
+
th && coreState?.widgetContainer && /* @__PURE__ */ jsxs16(FloatingPortal, { root: coreState.widgetContainer, children: [
|
|
4097
|
+
/* @__PURE__ */ jsx24("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ jsx24(
|
|
4098
|
+
ExtendButton,
|
|
4099
|
+
{
|
|
4100
|
+
editor,
|
|
4101
|
+
orientation: "addOrRemoveRows",
|
|
4102
|
+
block: coreState.block,
|
|
4103
|
+
onMouseDown: onStartExtend,
|
|
4104
|
+
onMouseUp: onEndExtend
|
|
4105
|
+
}
|
|
4106
|
+
) }),
|
|
4107
|
+
/* @__PURE__ */ jsx24(
|
|
4108
|
+
"div",
|
|
4109
|
+
{
|
|
4110
|
+
ref: addOrRemoveColumnsButton.ref,
|
|
4111
|
+
style: addOrRemoveColumnsButton.style,
|
|
4112
|
+
children: /* @__PURE__ */ jsx24(
|
|
4113
|
+
ExtendButton,
|
|
4114
|
+
{
|
|
4115
|
+
editor,
|
|
4116
|
+
orientation: "addOrRemoveColumns",
|
|
4117
|
+
block: coreState.block,
|
|
4118
|
+
onMouseDown: onStartExtend,
|
|
4119
|
+
onMouseUp: onEndExtend
|
|
4120
|
+
}
|
|
4121
|
+
)
|
|
4122
|
+
}
|
|
4123
|
+
)
|
|
4124
|
+
] })
|
|
4125
|
+
] });
|
|
4126
|
+
}
|
|
4127
|
+
|
|
3152
4128
|
// src/utils/table-vertical-alignment.ts
|
|
3153
4129
|
function injectVerticalAlignment(blocks, editor) {
|
|
3154
4130
|
const tiptap = editor?._tiptapEditor;
|
|
@@ -3231,6 +4207,90 @@ function patchBlocks(blocks, tableVAMap) {
|
|
|
3231
4207
|
});
|
|
3232
4208
|
}
|
|
3233
4209
|
|
|
4210
|
+
// src/utils/font-size-serialization.ts
|
|
4211
|
+
function mapPreservingRef(arr, fn) {
|
|
4212
|
+
let changed = false;
|
|
4213
|
+
const next = arr.map((item) => {
|
|
4214
|
+
const mapped = fn(item);
|
|
4215
|
+
if (mapped !== item) changed = true;
|
|
4216
|
+
return mapped;
|
|
4217
|
+
});
|
|
4218
|
+
return changed ? next : arr;
|
|
4219
|
+
}
|
|
4220
|
+
function mapStyledItem(item, dir) {
|
|
4221
|
+
if (!item || typeof item !== "object" || item.type !== "text") {
|
|
4222
|
+
return item;
|
|
4223
|
+
}
|
|
4224
|
+
if (dir === "lower") {
|
|
4225
|
+
const fs2 = item.styles?.fontSize;
|
|
4226
|
+
if (fs2 == null) return item;
|
|
4227
|
+
const { fontSize: _removed, ...restStyles } = item.styles;
|
|
4228
|
+
return { ...item, styles: restStyles, fontSize: fs2 };
|
|
4229
|
+
}
|
|
4230
|
+
const fs = item.fontSize;
|
|
4231
|
+
if (fs == null) return item;
|
|
4232
|
+
const { fontSize: _lifted, ...rest } = item;
|
|
4233
|
+
return { ...rest, styles: { ...item.styles ?? {}, fontSize: fs } };
|
|
4234
|
+
}
|
|
4235
|
+
function mapInlineItem(node, dir) {
|
|
4236
|
+
if (!node || typeof node !== "object") return node;
|
|
4237
|
+
if (node.type === "link" && Array.isArray(node.content)) {
|
|
4238
|
+
const content = mapPreservingRef(
|
|
4239
|
+
node.content,
|
|
4240
|
+
(n) => mapStyledItem(n, dir)
|
|
4241
|
+
);
|
|
4242
|
+
return content === node.content ? node : { ...node, content };
|
|
4243
|
+
}
|
|
4244
|
+
return mapStyledItem(node, dir);
|
|
4245
|
+
}
|
|
4246
|
+
function mapCell(cell, dir) {
|
|
4247
|
+
if (cell && typeof cell === "object" && cell.type === "tableCell") {
|
|
4248
|
+
if (!Array.isArray(cell.content)) return cell;
|
|
4249
|
+
const content = mapPreservingRef(
|
|
4250
|
+
cell.content,
|
|
4251
|
+
(n) => mapInlineItem(n, dir)
|
|
4252
|
+
);
|
|
4253
|
+
return content === cell.content ? cell : { ...cell, content };
|
|
4254
|
+
}
|
|
4255
|
+
if (Array.isArray(cell)) {
|
|
4256
|
+
return mapPreservingRef(cell, (n) => mapInlineItem(n, dir));
|
|
4257
|
+
}
|
|
4258
|
+
return cell;
|
|
4259
|
+
}
|
|
4260
|
+
function mapBlock(block, dir) {
|
|
4261
|
+
if (!block || typeof block !== "object") return block;
|
|
4262
|
+
let next = block;
|
|
4263
|
+
const content = block.content;
|
|
4264
|
+
if (Array.isArray(content)) {
|
|
4265
|
+
const mapped = mapPreservingRef(content, (n) => mapInlineItem(n, dir));
|
|
4266
|
+
if (mapped !== content) next = { ...next, content: mapped };
|
|
4267
|
+
} else if (content && typeof content === "object" && content.type === "tableContent" && Array.isArray(content.rows)) {
|
|
4268
|
+
const rows = mapPreservingRef(content.rows, (row) => {
|
|
4269
|
+
if (!row || !Array.isArray(row.cells)) return row;
|
|
4270
|
+
const cells = mapPreservingRef(
|
|
4271
|
+
row.cells,
|
|
4272
|
+
(cell) => mapCell(cell, dir)
|
|
4273
|
+
);
|
|
4274
|
+
return cells === row.cells ? row : { ...row, cells };
|
|
4275
|
+
});
|
|
4276
|
+
if (rows !== content.rows) next = { ...next, content: { ...content, rows } };
|
|
4277
|
+
}
|
|
4278
|
+
if (Array.isArray(block.children) && block.children.length > 0) {
|
|
4279
|
+
const children = mapPreservingRef(
|
|
4280
|
+
block.children,
|
|
4281
|
+
(b) => mapBlock(b, dir)
|
|
4282
|
+
);
|
|
4283
|
+
if (children !== block.children) next = { ...next, children };
|
|
4284
|
+
}
|
|
4285
|
+
return next;
|
|
4286
|
+
}
|
|
4287
|
+
function lowerFontSize(blocks) {
|
|
4288
|
+
return mapPreservingRef(blocks, (b) => mapBlock(b, "lower"));
|
|
4289
|
+
}
|
|
4290
|
+
function liftFontSize(blocks) {
|
|
4291
|
+
return mapPreservingRef(blocks, (b) => mapBlock(b, "lift"));
|
|
4292
|
+
}
|
|
4293
|
+
|
|
3234
4294
|
// src/utils/excel-paste.ts
|
|
3235
4295
|
var NAMED_COLORS = {
|
|
3236
4296
|
black: "#000000",
|
|
@@ -3479,7 +4539,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
|
|
|
3479
4539
|
];
|
|
3480
4540
|
|
|
3481
4541
|
// src/components/LumirEditor.tsx
|
|
3482
|
-
import { Fragment as
|
|
4542
|
+
import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3483
4543
|
var DEBUG_LOG = (loc, msg, data) => {
|
|
3484
4544
|
const p = fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
|
|
3485
4545
|
method: "POST",
|
|
@@ -3644,6 +4704,12 @@ var isVideoFile = (file, maxSize) => {
|
|
|
3644
4704
|
});
|
|
3645
4705
|
return result;
|
|
3646
4706
|
};
|
|
4707
|
+
var isSuppressiblePopupSelection = (editor, selection) => {
|
|
4708
|
+
if (!selection) return false;
|
|
4709
|
+
if (selection.node) return false;
|
|
4710
|
+
if (isInTableCell(editor)) return false;
|
|
4711
|
+
return true;
|
|
4712
|
+
};
|
|
3647
4713
|
var isHtmlFile = (file) => {
|
|
3648
4714
|
return file.size > 0 && (file.type === "text/html" || file.name?.toLowerCase().endsWith(".html") || file.name?.toLowerCase().endsWith(".htm"));
|
|
3649
4715
|
};
|
|
@@ -3704,9 +4770,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
|
|
|
3704
4770
|
return null;
|
|
3705
4771
|
};
|
|
3706
4772
|
var ConvertToPreviewButton = ({ url }) => {
|
|
3707
|
-
const editor =
|
|
3708
|
-
const Components =
|
|
3709
|
-
return /* @__PURE__ */
|
|
4773
|
+
const editor = useBlockNoteEditor6();
|
|
4774
|
+
const Components = useComponentsContext5();
|
|
4775
|
+
return /* @__PURE__ */ jsx25(
|
|
3710
4776
|
Components.LinkToolbar.Button,
|
|
3711
4777
|
{
|
|
3712
4778
|
className: "bn-button",
|
|
@@ -3725,29 +4791,29 @@ var ConvertToPreviewButton = ({ url }) => {
|
|
|
3725
4791
|
console.error("Convert to link preview failed:", err);
|
|
3726
4792
|
}
|
|
3727
4793
|
},
|
|
3728
|
-
icon: /* @__PURE__ */
|
|
3729
|
-
/* @__PURE__ */
|
|
3730
|
-
/* @__PURE__ */
|
|
3731
|
-
/* @__PURE__ */
|
|
4794
|
+
icon: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
4795
|
+
/* @__PURE__ */ jsx25("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
|
|
4796
|
+
/* @__PURE__ */ jsx25("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
4797
|
+
/* @__PURE__ */ jsx25("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
|
|
3732
4798
|
] })
|
|
3733
4799
|
}
|
|
3734
4800
|
);
|
|
3735
4801
|
};
|
|
3736
4802
|
var CustomLinkToolbar = (props) => {
|
|
3737
|
-
const editor =
|
|
3738
|
-
const Components =
|
|
4803
|
+
const editor = useBlockNoteEditor6();
|
|
4804
|
+
const Components = useComponentsContext5();
|
|
3739
4805
|
const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
|
|
3740
|
-
return /* @__PURE__ */
|
|
4806
|
+
return /* @__PURE__ */ jsxs17(
|
|
3741
4807
|
Components.LinkToolbar.Root,
|
|
3742
4808
|
{
|
|
3743
4809
|
className: "bn-toolbar bn-link-toolbar",
|
|
3744
4810
|
onMouseEnter: props.stopHideTimer,
|
|
3745
4811
|
onMouseLeave: props.startHideTimer,
|
|
3746
4812
|
children: [
|
|
3747
|
-
/* @__PURE__ */
|
|
3748
|
-
/* @__PURE__ */
|
|
3749
|
-
/* @__PURE__ */
|
|
3750
|
-
hasLinkPreview && /* @__PURE__ */
|
|
4813
|
+
/* @__PURE__ */ jsx25(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
|
|
4814
|
+
/* @__PURE__ */ jsx25(OpenLinkButton, { url: props.url }),
|
|
4815
|
+
/* @__PURE__ */ jsx25(DeleteLinkButton, { deleteLink: props.deleteLink }),
|
|
4816
|
+
hasLinkPreview && /* @__PURE__ */ jsx25(ConvertToPreviewButton, { url: props.url })
|
|
3751
4817
|
]
|
|
3752
4818
|
}
|
|
3753
4819
|
);
|
|
@@ -3791,13 +4857,13 @@ function LumirEditor({
|
|
|
3791
4857
|
onError,
|
|
3792
4858
|
onImageDelete
|
|
3793
4859
|
}) {
|
|
3794
|
-
const [isUploading, setIsUploading] =
|
|
3795
|
-
const [uploadProgress, setUploadProgress] =
|
|
3796
|
-
const [errorMessage, setErrorMessage] =
|
|
3797
|
-
const floatingMenuFileInputRef =
|
|
3798
|
-
const floatingMenuBlockRef =
|
|
3799
|
-
const floatingMenuUploadStartTimeRef =
|
|
3800
|
-
const handleError =
|
|
4860
|
+
const [isUploading, setIsUploading] = useState12(false);
|
|
4861
|
+
const [uploadProgress, setUploadProgress] = useState12(null);
|
|
4862
|
+
const [errorMessage, setErrorMessage] = useState12(null);
|
|
4863
|
+
const floatingMenuFileInputRef = useRef12(null);
|
|
4864
|
+
const floatingMenuBlockRef = useRef12(null);
|
|
4865
|
+
const floatingMenuUploadStartTimeRef = useRef12(0);
|
|
4866
|
+
const handleError = useCallback20(
|
|
3801
4867
|
(error) => {
|
|
3802
4868
|
onError?.(error);
|
|
3803
4869
|
setErrorMessage(error.getUserMessage());
|
|
@@ -3805,10 +4871,12 @@ function LumirEditor({
|
|
|
3805
4871
|
},
|
|
3806
4872
|
[onError]
|
|
3807
4873
|
);
|
|
3808
|
-
const validatedContent =
|
|
3809
|
-
return
|
|
4874
|
+
const validatedContent = useMemo7(() => {
|
|
4875
|
+
return liftFontSize(
|
|
4876
|
+
ContentUtils.validateContent(initialContent, initialEmptyBlocks)
|
|
4877
|
+
);
|
|
3810
4878
|
}, [initialContent, initialEmptyBlocks]);
|
|
3811
|
-
const tableConfig =
|
|
4879
|
+
const tableConfig = useMemo7(() => {
|
|
3812
4880
|
return EditorConfig.getDefaultTableConfig(tables);
|
|
3813
4881
|
}, [
|
|
3814
4882
|
tables?.splitCells,
|
|
@@ -3816,10 +4884,10 @@ function LumirEditor({
|
|
|
3816
4884
|
tables?.cellTextColor,
|
|
3817
4885
|
tables?.headers
|
|
3818
4886
|
]);
|
|
3819
|
-
const headingConfig =
|
|
4887
|
+
const headingConfig = useMemo7(() => {
|
|
3820
4888
|
return EditorConfig.getDefaultHeadingConfig(heading);
|
|
3821
4889
|
}, [heading?.levels?.join(",") ?? ""]);
|
|
3822
|
-
const disabledExtensions =
|
|
4890
|
+
const disabledExtensions = useMemo7(() => {
|
|
3823
4891
|
return EditorConfig.getDisabledExtensions(
|
|
3824
4892
|
disableExtensions,
|
|
3825
4893
|
allowVideoUpload,
|
|
@@ -3827,18 +4895,18 @@ function LumirEditor({
|
|
|
3827
4895
|
allowFileUpload
|
|
3828
4896
|
);
|
|
3829
4897
|
}, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
|
|
3830
|
-
|
|
4898
|
+
useEffect11(() => {
|
|
3831
4899
|
DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
|
|
3832
4900
|
allowVideoUpload,
|
|
3833
4901
|
hasVideoInDisabled: disabledExtensions.includes("video"),
|
|
3834
4902
|
disabledList: disabledExtensions.slice(0, 15)
|
|
3835
4903
|
});
|
|
3836
4904
|
}, [allowVideoUpload, disabledExtensions]);
|
|
3837
|
-
const fileNameTransformRef =
|
|
3838
|
-
|
|
4905
|
+
const fileNameTransformRef = useRef12(s3Upload?.fileNameTransform);
|
|
4906
|
+
useEffect11(() => {
|
|
3839
4907
|
fileNameTransformRef.current = s3Upload?.fileNameTransform;
|
|
3840
4908
|
}, [s3Upload?.fileNameTransform]);
|
|
3841
|
-
const memoizedS3Upload =
|
|
4909
|
+
const memoizedS3Upload = useMemo7(() => {
|
|
3842
4910
|
if (!s3Upload) return void 0;
|
|
3843
4911
|
return {
|
|
3844
4912
|
apiEndpoint: s3Upload.apiEndpoint,
|
|
@@ -3871,6 +4939,15 @@ function LumirEditor({
|
|
|
3871
4939
|
{
|
|
3872
4940
|
// HTML 미리보기 블록이 포함된 커스텀 스키마 사용
|
|
3873
4941
|
schema,
|
|
4942
|
+
// 모든 BlockNote UI 텍스트(테이블 드롭다운 등) 한글 적용 + "색깔"→"색"
|
|
4943
|
+
dictionary: {
|
|
4944
|
+
...ko,
|
|
4945
|
+
drag_handle: { ...ko.drag_handle, colors_menuitem: "\uC0C9" },
|
|
4946
|
+
formatting_toolbar: {
|
|
4947
|
+
...ko.formatting_toolbar,
|
|
4948
|
+
colors: { ...ko.formatting_toolbar.colors, tooltip: "\uC0C9" }
|
|
4949
|
+
}
|
|
4950
|
+
},
|
|
3874
4951
|
initialContent: validatedContent,
|
|
3875
4952
|
tables: tableConfig,
|
|
3876
4953
|
heading: headingConfig,
|
|
@@ -4062,27 +5139,40 @@ function LumirEditor({
|
|
|
4062
5139
|
if (editor && linkPreview?.apiEndpoint) {
|
|
4063
5140
|
editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
|
|
4064
5141
|
}
|
|
4065
|
-
|
|
5142
|
+
useEffect11(() => {
|
|
4066
5143
|
if (editor) {
|
|
4067
5144
|
editor.isEditable = editable;
|
|
4068
5145
|
}
|
|
4069
5146
|
}, [editor, editable]);
|
|
4070
|
-
|
|
5147
|
+
useEffect11(() => {
|
|
5148
|
+
if (!editor || !floatingMenu) return;
|
|
5149
|
+
const ft = editor.formattingToolbar;
|
|
5150
|
+
if (!ft?.onUpdate) return;
|
|
5151
|
+
const unsubscribe = ft.onUpdate((state) => {
|
|
5152
|
+
if (!state?.show) return;
|
|
5153
|
+
const selection = editor._tiptapEditor?.state?.selection;
|
|
5154
|
+
if (isSuppressiblePopupSelection(editor, selection)) {
|
|
5155
|
+
ft.closeMenu();
|
|
5156
|
+
}
|
|
5157
|
+
});
|
|
5158
|
+
return unsubscribe;
|
|
5159
|
+
}, [editor, floatingMenu]);
|
|
5160
|
+
useEffect11(() => {
|
|
4071
5161
|
if (!editor || !onContentChange) return;
|
|
4072
5162
|
const handleContentChange = () => {
|
|
4073
5163
|
const blocks = editor.topLevelBlocks;
|
|
4074
|
-
const patched = injectVerticalAlignment(blocks, editor);
|
|
5164
|
+
const patched = lowerFontSize(injectVerticalAlignment(blocks, editor));
|
|
4075
5165
|
onContentChange(patched);
|
|
4076
5166
|
};
|
|
4077
5167
|
return editor.onEditorContentChange(handleContentChange);
|
|
4078
5168
|
}, [editor, onContentChange]);
|
|
4079
|
-
const previousMediaUrlsRef =
|
|
4080
|
-
|
|
5169
|
+
const previousMediaUrlsRef = useRef12(/* @__PURE__ */ new Set());
|
|
5170
|
+
useEffect11(() => {
|
|
4081
5171
|
if (!editor) return;
|
|
4082
5172
|
const initialBlocks = editor.topLevelBlocks;
|
|
4083
5173
|
previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
|
|
4084
5174
|
}, [editor]);
|
|
4085
|
-
|
|
5175
|
+
useEffect11(() => {
|
|
4086
5176
|
if (!editor || !onImageDelete) return;
|
|
4087
5177
|
const handleMediaDeleteCheck = () => {
|
|
4088
5178
|
const currentBlocks = editor.topLevelBlocks;
|
|
@@ -4096,7 +5186,7 @@ function LumirEditor({
|
|
|
4096
5186
|
};
|
|
4097
5187
|
return editor.onEditorContentChange(handleMediaDeleteCheck);
|
|
4098
5188
|
}, [editor, onImageDelete]);
|
|
4099
|
-
|
|
5189
|
+
useEffect11(() => {
|
|
4100
5190
|
const el = editor?.domElement;
|
|
4101
5191
|
if (!el) return;
|
|
4102
5192
|
const handleDragOver = (e) => {
|
|
@@ -4227,20 +5317,20 @@ function LumirEditor({
|
|
|
4227
5317
|
el.removeEventListener("drop", handleDrop, { capture: true });
|
|
4228
5318
|
};
|
|
4229
5319
|
}, [editor, allowVideoUpload]);
|
|
4230
|
-
const computedSideMenu =
|
|
5320
|
+
const computedSideMenu = useMemo7(() => {
|
|
4231
5321
|
return sideMenuAddButton ? sideMenu : false;
|
|
4232
5322
|
}, [sideMenuAddButton, sideMenu]);
|
|
4233
|
-
const DragHandleOnlySideMenu =
|
|
4234
|
-
return (props) => /* @__PURE__ */
|
|
5323
|
+
const DragHandleOnlySideMenu = useMemo7(() => {
|
|
5324
|
+
return (props) => /* @__PURE__ */ jsx25(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx25(DragHandleButton, { ...props }) });
|
|
4235
5325
|
}, []);
|
|
4236
|
-
return /* @__PURE__ */
|
|
5326
|
+
return /* @__PURE__ */ jsxs17(
|
|
4237
5327
|
"div",
|
|
4238
5328
|
{
|
|
4239
5329
|
className: cn("lumirEditor", className),
|
|
4240
5330
|
style: { position: "relative", display: "flex", flexDirection: "column" },
|
|
4241
5331
|
children: [
|
|
4242
|
-
floatingMenu && editor && /* @__PURE__ */
|
|
4243
|
-
/* @__PURE__ */
|
|
5332
|
+
floatingMenu && editor && /* @__PURE__ */ jsxs17(Fragment7, { children: [
|
|
5333
|
+
/* @__PURE__ */ jsx25(
|
|
4244
5334
|
"input",
|
|
4245
5335
|
{
|
|
4246
5336
|
ref: floatingMenuFileInputRef,
|
|
@@ -4311,7 +5401,7 @@ function LumirEditor({
|
|
|
4311
5401
|
}
|
|
4312
5402
|
}
|
|
4313
5403
|
),
|
|
4314
|
-
/* @__PURE__ */
|
|
5404
|
+
/* @__PURE__ */ jsx25(
|
|
4315
5405
|
FloatingMenu,
|
|
4316
5406
|
{
|
|
4317
5407
|
editor,
|
|
@@ -4343,7 +5433,7 @@ function LumirEditor({
|
|
|
4343
5433
|
}
|
|
4344
5434
|
)
|
|
4345
5435
|
] }),
|
|
4346
|
-
/* @__PURE__ */
|
|
5436
|
+
/* @__PURE__ */ jsxs17(
|
|
4347
5437
|
BlockNoteView,
|
|
4348
5438
|
{
|
|
4349
5439
|
editor,
|
|
@@ -4355,21 +5445,22 @@ function LumirEditor({
|
|
|
4355
5445
|
slashMenu: false,
|
|
4356
5446
|
emojiPicker,
|
|
4357
5447
|
filePanel,
|
|
4358
|
-
tableHandles,
|
|
5448
|
+
tableHandles: false,
|
|
4359
5449
|
onSelectionChange,
|
|
4360
5450
|
children: [
|
|
4361
|
-
|
|
5451
|
+
tableHandles && /* @__PURE__ */ jsx25(LumirTableHandlesController, {}),
|
|
5452
|
+
formattingToolbar && /* @__PURE__ */ jsx25(
|
|
4362
5453
|
FormattingToolbarController,
|
|
4363
5454
|
{
|
|
4364
5455
|
formattingToolbar: CustomFormattingToolbar
|
|
4365
5456
|
}
|
|
4366
5457
|
),
|
|
4367
|
-
linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */
|
|
4368
|
-
/* @__PURE__ */
|
|
5458
|
+
linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx25(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx25(LinkToolbarController, {})),
|
|
5459
|
+
/* @__PURE__ */ jsx25(
|
|
4369
5460
|
SuggestionMenuController,
|
|
4370
5461
|
{
|
|
4371
5462
|
triggerCharacter: "/",
|
|
4372
|
-
getItems:
|
|
5463
|
+
getItems: useCallback20(
|
|
4373
5464
|
async (query) => {
|
|
4374
5465
|
const items = getDefaultReactSlashMenuItems(editor);
|
|
4375
5466
|
const filtered = items.filter((item) => {
|
|
@@ -4413,7 +5504,7 @@ function LumirEditor({
|
|
|
4413
5504
|
},
|
|
4414
5505
|
aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
|
|
4415
5506
|
group: "Embeds",
|
|
4416
|
-
icon: /* @__PURE__ */
|
|
5507
|
+
icon: /* @__PURE__ */ jsxs17(
|
|
4417
5508
|
"svg",
|
|
4418
5509
|
{
|
|
4419
5510
|
width: "18",
|
|
@@ -4425,8 +5516,8 @@ function LumirEditor({
|
|
|
4425
5516
|
strokeLinecap: "round",
|
|
4426
5517
|
strokeLinejoin: "round",
|
|
4427
5518
|
children: [
|
|
4428
|
-
/* @__PURE__ */
|
|
4429
|
-
/* @__PURE__ */
|
|
5519
|
+
/* @__PURE__ */ jsx25("polyline", { points: "16 18 22 12 16 6" }),
|
|
5520
|
+
/* @__PURE__ */ jsx25("polyline", { points: "8 6 2 12 8 18" })
|
|
4430
5521
|
]
|
|
4431
5522
|
}
|
|
4432
5523
|
),
|
|
@@ -4451,7 +5542,7 @@ function LumirEditor({
|
|
|
4451
5542
|
"\uD504\uB9AC\uBDF0"
|
|
4452
5543
|
],
|
|
4453
5544
|
group: "Embeds",
|
|
4454
|
-
icon: /* @__PURE__ */
|
|
5545
|
+
icon: /* @__PURE__ */ jsxs17(
|
|
4455
5546
|
"svg",
|
|
4456
5547
|
{
|
|
4457
5548
|
width: "18",
|
|
@@ -4463,14 +5554,31 @@ function LumirEditor({
|
|
|
4463
5554
|
strokeLinecap: "round",
|
|
4464
5555
|
strokeLinejoin: "round",
|
|
4465
5556
|
children: [
|
|
4466
|
-
/* @__PURE__ */
|
|
4467
|
-
/* @__PURE__ */
|
|
5557
|
+
/* @__PURE__ */ jsx25("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
5558
|
+
/* @__PURE__ */ jsx25("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
4468
5559
|
]
|
|
4469
5560
|
}
|
|
4470
5561
|
),
|
|
4471
5562
|
subtext: "URL\uC758 \uBBF8\uB9AC\uBCF4\uAE30 \uCE74\uB4DC\uB97C \uC0BD\uC785"
|
|
4472
5563
|
});
|
|
4473
5564
|
}
|
|
5565
|
+
const enSlash = en.slash_menu;
|
|
5566
|
+
for (const it of allItems) {
|
|
5567
|
+
const enEntry = it.key ? enSlash[it.key] : void 0;
|
|
5568
|
+
if (!enEntry) continue;
|
|
5569
|
+
const extra = [...enEntry.aliases ?? [], enEntry.title].filter((s) => Boolean(s)).map((s) => s.toLowerCase());
|
|
5570
|
+
it.aliases = Array.from(
|
|
5571
|
+
/* @__PURE__ */ new Set([...it.aliases ?? [], ...extra])
|
|
5572
|
+
);
|
|
5573
|
+
}
|
|
5574
|
+
const groupOrder = [];
|
|
5575
|
+
for (const it of allItems) {
|
|
5576
|
+
const g = it.group ?? "";
|
|
5577
|
+
if (!groupOrder.includes(g)) groupOrder.push(g);
|
|
5578
|
+
}
|
|
5579
|
+
allItems.sort(
|
|
5580
|
+
(a, b) => groupOrder.indexOf(a.group ?? "") - groupOrder.indexOf(b.group ?? "")
|
|
5581
|
+
);
|
|
4474
5582
|
if (!query) return allItems;
|
|
4475
5583
|
const q = query.toLowerCase();
|
|
4476
5584
|
return allItems.filter(
|
|
@@ -4483,21 +5591,21 @@ function LumirEditor({
|
|
|
4483
5591
|
)
|
|
4484
5592
|
}
|
|
4485
5593
|
),
|
|
4486
|
-
!sideMenuAddButton && /* @__PURE__ */
|
|
5594
|
+
!sideMenuAddButton && /* @__PURE__ */ jsx25(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
|
|
4487
5595
|
]
|
|
4488
5596
|
}
|
|
4489
5597
|
),
|
|
4490
|
-
isUploading && /* @__PURE__ */
|
|
4491
|
-
/* @__PURE__ */
|
|
4492
|
-
uploadProgress !== null && /* @__PURE__ */
|
|
5598
|
+
isUploading && /* @__PURE__ */ jsxs17("div", { className: "lumirEditor-upload-overlay", children: [
|
|
5599
|
+
/* @__PURE__ */ jsx25("div", { className: "lumirEditor-spinner" }),
|
|
5600
|
+
uploadProgress !== null && /* @__PURE__ */ jsxs17("span", { className: "lumirEditor-upload-progress", children: [
|
|
4493
5601
|
uploadProgress,
|
|
4494
5602
|
"%"
|
|
4495
5603
|
] })
|
|
4496
5604
|
] }),
|
|
4497
|
-
errorMessage && /* @__PURE__ */
|
|
4498
|
-
/* @__PURE__ */
|
|
4499
|
-
/* @__PURE__ */
|
|
4500
|
-
/* @__PURE__ */
|
|
5605
|
+
errorMessage && /* @__PURE__ */ jsxs17("div", { className: "lumirEditor-error-toast", children: [
|
|
5606
|
+
/* @__PURE__ */ jsx25("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
|
|
5607
|
+
/* @__PURE__ */ jsx25("span", { className: "lumirEditor-error-message", children: errorMessage }),
|
|
5608
|
+
/* @__PURE__ */ jsx25(
|
|
4501
5609
|
"button",
|
|
4502
5610
|
{
|
|
4503
5611
|
className: "lumirEditor-error-close",
|
|
@@ -4515,7 +5623,10 @@ export {
|
|
|
4515
5623
|
BACKGROUND_COLORS,
|
|
4516
5624
|
ContentUtils,
|
|
4517
5625
|
EditorConfig,
|
|
5626
|
+
FONT_SIZE_PRESETS,
|
|
4518
5627
|
FloatingMenu,
|
|
5628
|
+
FontSize,
|
|
5629
|
+
FontSizeButton2 as FontSizeButton,
|
|
4519
5630
|
HtmlPreviewBlock,
|
|
4520
5631
|
schema as HtmlPreviewSchema,
|
|
4521
5632
|
LinkPreviewBlock,
|
|
@@ -4526,6 +5637,8 @@ export {
|
|
|
4526
5637
|
cn,
|
|
4527
5638
|
createS3Uploader,
|
|
4528
5639
|
fetchLinkMetadata,
|
|
4529
|
-
getHexFromColorValue
|
|
5640
|
+
getHexFromColorValue,
|
|
5641
|
+
liftFontSize,
|
|
5642
|
+
lowerFontSize
|
|
4530
5643
|
};
|
|
4531
5644
|
//# sourceMappingURL=index.mjs.map
|