@lumir-company/editor 0.4.21 → 0.4.22
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 +9 -0
- package/dist/index.d.mts +21 -15
- package/dist/index.d.ts +21 -15
- package/dist/index.js +852 -661
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +530 -346
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +59 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -24,7 +24,11 @@ __export(index_exports, {
|
|
|
24
24
|
BACKGROUND_COLORS: () => BACKGROUND_COLORS,
|
|
25
25
|
ContentUtils: () => ContentUtils,
|
|
26
26
|
EditorConfig: () => EditorConfig,
|
|
27
|
+
FONT_SIZE_DEFAULT_PX: () => FONT_SIZE_DEFAULT_PX,
|
|
28
|
+
FONT_SIZE_MAX: () => FONT_SIZE_MAX,
|
|
29
|
+
FONT_SIZE_MIN: () => FONT_SIZE_MIN,
|
|
27
30
|
FONT_SIZE_PRESETS: () => FONT_SIZE_PRESETS,
|
|
31
|
+
FONT_SIZE_STEP: () => FONT_SIZE_STEP,
|
|
28
32
|
FloatingMenu: () => FloatingMenu,
|
|
29
33
|
FontSize: () => FontSize,
|
|
30
34
|
FontSizeButton: () => FontSizeButton2,
|
|
@@ -34,21 +38,24 @@ __export(index_exports, {
|
|
|
34
38
|
LumirEditor: () => LumirEditor,
|
|
35
39
|
LumirEditorError: () => LumirEditorError,
|
|
36
40
|
TEXT_COLORS: () => TEXT_COLORS,
|
|
41
|
+
clampFontSizePx: () => clampFontSizePx,
|
|
37
42
|
clearMetadataCache: () => clearMetadataCache,
|
|
38
43
|
cn: () => cn,
|
|
39
44
|
createS3Uploader: () => createS3Uploader,
|
|
40
45
|
fetchLinkMetadata: () => fetchLinkMetadata,
|
|
41
46
|
getHexFromColorValue: () => getHexFromColorValue,
|
|
42
47
|
liftFontSize: () => liftFontSize,
|
|
43
|
-
lowerFontSize: () => lowerFontSize
|
|
48
|
+
lowerFontSize: () => lowerFontSize,
|
|
49
|
+
parseFontSizePx: () => parseFontSizePx,
|
|
50
|
+
toFontSizeValue: () => toFontSizeValue
|
|
44
51
|
});
|
|
45
52
|
module.exports = __toCommonJS(index_exports);
|
|
46
53
|
|
|
47
54
|
// src/components/LumirEditor.tsx
|
|
48
|
-
var
|
|
49
|
-
var
|
|
55
|
+
var import_react36 = require("react");
|
|
56
|
+
var import_react37 = require("@blocknote/react");
|
|
50
57
|
var import_mantine = require("@blocknote/mantine");
|
|
51
|
-
var
|
|
58
|
+
var import_core11 = require("@blocknote/core");
|
|
52
59
|
var import_locales = require("@blocknote/core/locales");
|
|
53
60
|
|
|
54
61
|
// src/utils/cn.ts
|
|
@@ -285,8 +292,8 @@ var createS3Uploader = (config) => {
|
|
|
285
292
|
};
|
|
286
293
|
|
|
287
294
|
// src/blocks/HtmlPreview.tsx
|
|
288
|
-
var
|
|
289
|
-
var
|
|
295
|
+
var import_react5 = require("@blocknote/react");
|
|
296
|
+
var import_core4 = require("@blocknote/core");
|
|
290
297
|
|
|
291
298
|
// src/blocks/LinkPreview.tsx
|
|
292
299
|
var import_react = require("@blocknote/react");
|
|
@@ -1561,15 +1568,22 @@ var Column = (0, import_core2.createStronglyTypedTiptapNode)({
|
|
|
1561
1568
|
});
|
|
1562
1569
|
|
|
1563
1570
|
// src/styles/FontSizeStyle.tsx
|
|
1564
|
-
var
|
|
1565
|
-
var
|
|
1566
|
-
var FontSize = (0, import_react5.createReactStyleSpec)(
|
|
1571
|
+
var import_core3 = require("@blocknote/core");
|
|
1572
|
+
var FontSize = (0, import_core3.createStyleSpec)(
|
|
1567
1573
|
{
|
|
1568
1574
|
type: "fontSize",
|
|
1569
1575
|
propSchema: "string"
|
|
1570
1576
|
},
|
|
1571
1577
|
{
|
|
1572
|
-
|
|
1578
|
+
// 바닐라(동기) 스타일 스펙: DOM을 직접 반환한다.
|
|
1579
|
+
// createReactStyleSpec는 span 내용이 비동기 렌더되어, 적용 직후 동기 시점에
|
|
1580
|
+
// 선택 영역의 DOM 좌표가 (0,0)으로 잡혀 BlockNote 포매팅 툴바가 좌상단으로
|
|
1581
|
+
// 튀는 문제가 있었다(굵게/기울임 등 네이티브 마크는 동기 렌더라 정상).
|
|
1582
|
+
render: (value) => {
|
|
1583
|
+
const span = document.createElement("span");
|
|
1584
|
+
span.style.fontSize = value;
|
|
1585
|
+
return { dom: span, contentDOM: span };
|
|
1586
|
+
}
|
|
1573
1587
|
}
|
|
1574
1588
|
);
|
|
1575
1589
|
var FONT_SIZE_PRESETS = [
|
|
@@ -1582,10 +1596,24 @@ var FONT_SIZE_PRESETS = [
|
|
|
1582
1596
|
"24px",
|
|
1583
1597
|
"28px"
|
|
1584
1598
|
];
|
|
1599
|
+
var FONT_SIZE_MIN = 8;
|
|
1600
|
+
var FONT_SIZE_MAX = 96;
|
|
1601
|
+
var FONT_SIZE_DEFAULT_PX = 14;
|
|
1602
|
+
var FONT_SIZE_STEP = 1;
|
|
1603
|
+
function parseFontSizePx(size) {
|
|
1604
|
+
const n = parseInt(size, 10);
|
|
1605
|
+
return Number.isFinite(n) ? n : FONT_SIZE_DEFAULT_PX;
|
|
1606
|
+
}
|
|
1607
|
+
function clampFontSizePx(px) {
|
|
1608
|
+
return Math.min(FONT_SIZE_MAX, Math.max(FONT_SIZE_MIN, Math.round(px)));
|
|
1609
|
+
}
|
|
1610
|
+
function toFontSizeValue(px) {
|
|
1611
|
+
return `${clampFontSizePx(px)}px`;
|
|
1612
|
+
}
|
|
1585
1613
|
|
|
1586
1614
|
// src/blocks/HtmlPreview.tsx
|
|
1587
|
-
var
|
|
1588
|
-
var
|
|
1615
|
+
var import_react6 = require("react");
|
|
1616
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
1589
1617
|
var MIN_HEIGHT = 100;
|
|
1590
1618
|
var MAX_HEIGHT = 1200;
|
|
1591
1619
|
var ensureCharset = (html) => {
|
|
@@ -1623,7 +1651,7 @@ var createSecureBlobUrl = (htmlContent) => {
|
|
|
1623
1651
|
});
|
|
1624
1652
|
return URL.createObjectURL(blob);
|
|
1625
1653
|
};
|
|
1626
|
-
var HtmlPreviewBlock = (0,
|
|
1654
|
+
var HtmlPreviewBlock = (0, import_react5.createReactBlockSpec)(
|
|
1627
1655
|
{
|
|
1628
1656
|
type: "htmlPreview",
|
|
1629
1657
|
propSchema: {
|
|
@@ -1641,15 +1669,15 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1641
1669
|
},
|
|
1642
1670
|
{
|
|
1643
1671
|
render: (props) => {
|
|
1644
|
-
const [isExpanded, setIsExpanded] = (0,
|
|
1645
|
-
const [isResizing, setIsResizing] = (0,
|
|
1646
|
-
const [blobUrl, setBlobUrl] = (0,
|
|
1647
|
-
const containerRef = (0,
|
|
1672
|
+
const [isExpanded, setIsExpanded] = (0, import_react6.useState)(true);
|
|
1673
|
+
const [isResizing, setIsResizing] = (0, import_react6.useState)(false);
|
|
1674
|
+
const [blobUrl, setBlobUrl] = (0, import_react6.useState)("");
|
|
1675
|
+
const containerRef = (0, import_react6.useRef)(null);
|
|
1648
1676
|
const htmlContent = props.block.props.htmlContent || "";
|
|
1649
1677
|
const fileName = props.block.props.fileName || "HTML Document";
|
|
1650
1678
|
const savedHeight = props.block.props.height || "400px";
|
|
1651
1679
|
const currentHeight = parseInt(savedHeight, 10) || 400;
|
|
1652
|
-
(0,
|
|
1680
|
+
(0, import_react6.useEffect)(() => {
|
|
1653
1681
|
if (htmlContent) {
|
|
1654
1682
|
const url = createSecureBlobUrl(htmlContent);
|
|
1655
1683
|
setBlobUrl(url);
|
|
@@ -1658,7 +1686,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1658
1686
|
};
|
|
1659
1687
|
}
|
|
1660
1688
|
}, [htmlContent]);
|
|
1661
|
-
const handleResizeStart = (0,
|
|
1689
|
+
const handleResizeStart = (0, import_react6.useCallback)(
|
|
1662
1690
|
(e) => {
|
|
1663
1691
|
e.preventDefault();
|
|
1664
1692
|
e.stopPropagation();
|
|
@@ -1685,7 +1713,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1685
1713
|
},
|
|
1686
1714
|
[currentHeight, props.editor, props.block]
|
|
1687
1715
|
);
|
|
1688
|
-
const handleExport = (0,
|
|
1716
|
+
const handleExport = (0, import_react6.useCallback)(
|
|
1689
1717
|
(e) => {
|
|
1690
1718
|
e.stopPropagation();
|
|
1691
1719
|
const safeFileName = sanitizeFileName(fileName);
|
|
@@ -1706,7 +1734,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1706
1734
|
},
|
|
1707
1735
|
[htmlContent, fileName]
|
|
1708
1736
|
);
|
|
1709
|
-
const handleOpenNewWindow = (0,
|
|
1737
|
+
const handleOpenNewWindow = (0, import_react6.useCallback)(
|
|
1710
1738
|
(e) => {
|
|
1711
1739
|
e.stopPropagation();
|
|
1712
1740
|
if (typeof window === "undefined") return;
|
|
@@ -1720,7 +1748,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1720
1748
|
},
|
|
1721
1749
|
[htmlContent]
|
|
1722
1750
|
);
|
|
1723
|
-
return /* @__PURE__ */ (0,
|
|
1751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1724
1752
|
"div",
|
|
1725
1753
|
{
|
|
1726
1754
|
ref: containerRef,
|
|
@@ -1736,7 +1764,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1736
1764
|
boxShadow: "none"
|
|
1737
1765
|
},
|
|
1738
1766
|
children: [
|
|
1739
|
-
/* @__PURE__ */ (0,
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1740
1768
|
"div",
|
|
1741
1769
|
{
|
|
1742
1770
|
style: {
|
|
@@ -1748,7 +1776,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1748
1776
|
borderBottom: isExpanded ? "1px solid #e0e0e0" : "none"
|
|
1749
1777
|
},
|
|
1750
1778
|
children: [
|
|
1751
|
-
/* @__PURE__ */ (0,
|
|
1779
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1752
1780
|
"div",
|
|
1753
1781
|
{
|
|
1754
1782
|
style: {
|
|
@@ -1760,7 +1788,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1760
1788
|
},
|
|
1761
1789
|
onClick: () => setIsExpanded(!isExpanded),
|
|
1762
1790
|
children: [
|
|
1763
|
-
/* @__PURE__ */ (0,
|
|
1791
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1764
1792
|
"svg",
|
|
1765
1793
|
{
|
|
1766
1794
|
width: "16",
|
|
@@ -1775,15 +1803,15 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1775
1803
|
transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
|
|
1776
1804
|
transition: "transform 0.2s"
|
|
1777
1805
|
},
|
|
1778
|
-
children: /* @__PURE__ */ (0,
|
|
1806
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "6 9 12 15 18 9" })
|
|
1779
1807
|
}
|
|
1780
1808
|
),
|
|
1781
|
-
/* @__PURE__ */ (0,
|
|
1809
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontWeight: 500, fontSize: "14px" }, children: fileName })
|
|
1782
1810
|
]
|
|
1783
1811
|
}
|
|
1784
1812
|
),
|
|
1785
|
-
/* @__PURE__ */ (0,
|
|
1786
|
-
/* @__PURE__ */ (0,
|
|
1813
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
|
|
1814
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1787
1815
|
"button",
|
|
1788
1816
|
{
|
|
1789
1817
|
onClick: handleOpenNewWindow,
|
|
@@ -1806,7 +1834,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1806
1834
|
onMouseLeave: (e) => {
|
|
1807
1835
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1808
1836
|
},
|
|
1809
|
-
children: /* @__PURE__ */ (0,
|
|
1837
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1810
1838
|
"svg",
|
|
1811
1839
|
{
|
|
1812
1840
|
width: "16",
|
|
@@ -1818,15 +1846,15 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1818
1846
|
strokeLinecap: "round",
|
|
1819
1847
|
strokeLinejoin: "round",
|
|
1820
1848
|
children: [
|
|
1821
|
-
/* @__PURE__ */ (0,
|
|
1822
|
-
/* @__PURE__ */ (0,
|
|
1823
|
-
/* @__PURE__ */ (0,
|
|
1849
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
|
|
1850
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 3 21 3 21 9" }),
|
|
1851
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
|
|
1824
1852
|
]
|
|
1825
1853
|
}
|
|
1826
1854
|
)
|
|
1827
1855
|
}
|
|
1828
1856
|
),
|
|
1829
|
-
/* @__PURE__ */ (0,
|
|
1857
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1830
1858
|
"button",
|
|
1831
1859
|
{
|
|
1832
1860
|
onClick: handleExport,
|
|
@@ -1849,7 +1877,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1849
1877
|
onMouseLeave: (e) => {
|
|
1850
1878
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1851
1879
|
},
|
|
1852
|
-
children: /* @__PURE__ */ (0,
|
|
1880
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1853
1881
|
"svg",
|
|
1854
1882
|
{
|
|
1855
1883
|
width: "16",
|
|
@@ -1861,9 +1889,9 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1861
1889
|
strokeLinecap: "round",
|
|
1862
1890
|
strokeLinejoin: "round",
|
|
1863
1891
|
children: [
|
|
1864
|
-
/* @__PURE__ */ (0,
|
|
1865
|
-
/* @__PURE__ */ (0,
|
|
1866
|
-
/* @__PURE__ */ (0,
|
|
1892
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
1893
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "7 10 12 15 17 10" }),
|
|
1894
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
|
|
1867
1895
|
]
|
|
1868
1896
|
}
|
|
1869
1897
|
)
|
|
@@ -1873,7 +1901,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1873
1901
|
]
|
|
1874
1902
|
}
|
|
1875
1903
|
),
|
|
1876
|
-
isExpanded && /* @__PURE__ */ (0,
|
|
1904
|
+
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1877
1905
|
"div",
|
|
1878
1906
|
{
|
|
1879
1907
|
style: {
|
|
@@ -1882,7 +1910,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1882
1910
|
position: "relative"
|
|
1883
1911
|
},
|
|
1884
1912
|
children: [
|
|
1885
|
-
/* @__PURE__ */ (0,
|
|
1913
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1886
1914
|
"iframe",
|
|
1887
1915
|
{
|
|
1888
1916
|
src: blobUrl || "about:blank",
|
|
@@ -1899,7 +1927,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1899
1927
|
loading: "lazy"
|
|
1900
1928
|
}
|
|
1901
1929
|
),
|
|
1902
|
-
/* @__PURE__ */ (0,
|
|
1930
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1903
1931
|
"div",
|
|
1904
1932
|
{
|
|
1905
1933
|
onMouseDown: handleResizeStart,
|
|
@@ -1924,7 +1952,7 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1924
1952
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
1925
1953
|
}
|
|
1926
1954
|
},
|
|
1927
|
-
children: /* @__PURE__ */ (0,
|
|
1955
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1928
1956
|
"div",
|
|
1929
1957
|
{
|
|
1930
1958
|
style: {
|
|
@@ -1946,84 +1974,84 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
|
|
|
1946
1974
|
}
|
|
1947
1975
|
}
|
|
1948
1976
|
);
|
|
1949
|
-
var ColumnListBlock = (0,
|
|
1977
|
+
var ColumnListBlock = (0, import_core4.createBlockSpecFromStronglyTypedTiptapNode)(
|
|
1950
1978
|
ColumnList,
|
|
1951
1979
|
// showDivider를 블록 prop으로 등록 → onContentChange JSON 직렬화 + 재로드 라운드트립.
|
|
1952
1980
|
{ showDivider: { default: false } }
|
|
1953
1981
|
);
|
|
1954
|
-
var ColumnBlock = (0,
|
|
1955
|
-
var schema =
|
|
1982
|
+
var ColumnBlock = (0, import_core4.createBlockSpecFromStronglyTypedTiptapNode)(Column, {});
|
|
1983
|
+
var schema = import_core4.BlockNoteSchema.create({
|
|
1956
1984
|
blockSpecs: {
|
|
1957
|
-
...
|
|
1985
|
+
...import_core4.defaultBlockSpecs,
|
|
1958
1986
|
htmlPreview: HtmlPreviewBlock,
|
|
1959
1987
|
linkPreview: LinkPreviewBlock,
|
|
1960
1988
|
video: VideoBlock,
|
|
1961
1989
|
columnList: ColumnListBlock,
|
|
1962
1990
|
column: ColumnBlock
|
|
1963
1991
|
},
|
|
1964
|
-
inlineContentSpecs:
|
|
1992
|
+
inlineContentSpecs: import_core4.defaultInlineContentSpecs,
|
|
1965
1993
|
styleSpecs: {
|
|
1966
|
-
...
|
|
1994
|
+
...import_core4.defaultStyleSpecs,
|
|
1967
1995
|
// 인라인 글자 크기. 저장 JSON 직렬화는 형제 키 방식(font-size-serialization.ts) 사용.
|
|
1968
1996
|
fontSize: FontSize
|
|
1969
1997
|
}
|
|
1970
1998
|
});
|
|
1971
1999
|
|
|
1972
2000
|
// src/components/FloatingMenu/index.tsx
|
|
1973
|
-
var
|
|
2001
|
+
var import_react18 = require("react");
|
|
1974
2002
|
|
|
1975
2003
|
// src/components/FloatingMenu/Icons.tsx
|
|
1976
|
-
var
|
|
2004
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
1977
2005
|
var Icons = {
|
|
1978
|
-
undo: /* @__PURE__ */ (0,
|
|
1979
|
-
redo: /* @__PURE__ */ (0,
|
|
1980
|
-
bold: /* @__PURE__ */ (0,
|
|
1981
|
-
italic: /* @__PURE__ */ (0,
|
|
1982
|
-
underline: /* @__PURE__ */ (0,
|
|
1983
|
-
strikethrough: /* @__PURE__ */ (0,
|
|
1984
|
-
alignLeft: /* @__PURE__ */ (0,
|
|
1985
|
-
alignCenter: /* @__PURE__ */ (0,
|
|
1986
|
-
alignRight: /* @__PURE__ */ (0,
|
|
1987
|
-
bulletList: /* @__PURE__ */ (0,
|
|
1988
|
-
numberedList: /* @__PURE__ */ (0,
|
|
1989
|
-
image: /* @__PURE__ */ (0,
|
|
1990
|
-
expandMore: /* @__PURE__ */ (0,
|
|
1991
|
-
textColor: /* @__PURE__ */ (0,
|
|
1992
|
-
bgColor: /* @__PURE__ */ (0,
|
|
1993
|
-
/* @__PURE__ */ (0,
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
2006
|
+
undo: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }),
|
|
2007
|
+
redo: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }),
|
|
2008
|
+
bold: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }),
|
|
2009
|
+
italic: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }),
|
|
2010
|
+
underline: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }),
|
|
2011
|
+
strikethrough: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }),
|
|
2012
|
+
alignLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
|
|
2013
|
+
alignCenter: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
|
|
2014
|
+
alignRight: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
|
|
2015
|
+
bulletList: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }),
|
|
2016
|
+
numberedList: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
|
|
2017
|
+
image: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }),
|
|
2018
|
+
expandMore: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }),
|
|
2019
|
+
textColor: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z" }) }),
|
|
2020
|
+
bgColor: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
2021
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" }),
|
|
2022
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fillOpacity: ".36", d: "M0 20h24v4H0z" })
|
|
1995
2023
|
] }),
|
|
1996
|
-
link: /* @__PURE__ */ (0,
|
|
1997
|
-
chevronRight: /* @__PURE__ */ (0,
|
|
1998
|
-
chevronLeft: /* @__PURE__ */ (0,
|
|
1999
|
-
table: /* @__PURE__ */ (0,
|
|
2000
|
-
htmlFile: /* @__PURE__ */ (0,
|
|
2024
|
+
link: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }),
|
|
2025
|
+
chevronRight: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }),
|
|
2026
|
+
chevronLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
|
|
2027
|
+
table: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM10 17H5v-2h5v2zm0-4H5v-2h5v2zm0-4H5V7h5v2zm9 8h-7v-2h7v2zm0-4h-7v-2h7v2zm0-4h-7V7h7v2z" }) }),
|
|
2028
|
+
htmlFile: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2v5h5l-5-5zm-4 14H7v-1h2v1zm0-2H7v-1h2v1zm-2-2h2v1H7v-1zm4 4h-2v-1h2v1zm0-2h-2v-1h2v1zm0-2h-2v-1h2v1zm6 4h-4v-1h4v1zm0-2h-4v-1h4v1zm0-2h-4v-1h4v1z" }) })
|
|
2001
2029
|
};
|
|
2002
2030
|
var BlockTypeIcons = {
|
|
2003
|
-
paragraph: /* @__PURE__ */ (0,
|
|
2004
|
-
h1: /* @__PURE__ */ (0,
|
|
2005
|
-
h2: /* @__PURE__ */ (0,
|
|
2006
|
-
h3: /* @__PURE__ */ (0,
|
|
2007
|
-
h4: /* @__PURE__ */ (0,
|
|
2008
|
-
h5: /* @__PURE__ */ (0,
|
|
2009
|
-
h6: /* @__PURE__ */ (0,
|
|
2010
|
-
toggleH1: /* @__PURE__ */ (0,
|
|
2011
|
-
/* @__PURE__ */ (0,
|
|
2012
|
-
/* @__PURE__ */ (0,
|
|
2031
|
+
paragraph: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 5h14v2H5zM5 11h14v2H5zM5 17h10v2H5z" }) }),
|
|
2032
|
+
h1: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lumir-block-icon-text", children: "H1" }),
|
|
2033
|
+
h2: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lumir-block-icon-text", children: "H2" }),
|
|
2034
|
+
h3: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lumir-block-icon-text", children: "H3" }),
|
|
2035
|
+
h4: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lumir-block-icon-text", children: "H4" }),
|
|
2036
|
+
h5: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lumir-block-icon-text", children: "H5" }),
|
|
2037
|
+
h6: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lumir-block-icon-text", children: "H6" }),
|
|
2038
|
+
toggleH1: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lumir-block-icon-toggle", children: [
|
|
2039
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 5v14l11-7z" }) }),
|
|
2040
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "H1" })
|
|
2013
2041
|
] }),
|
|
2014
|
-
toggleH2: /* @__PURE__ */ (0,
|
|
2015
|
-
/* @__PURE__ */ (0,
|
|
2016
|
-
/* @__PURE__ */ (0,
|
|
2042
|
+
toggleH2: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lumir-block-icon-toggle", children: [
|
|
2043
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 5v14l11-7z" }) }),
|
|
2044
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "H2" })
|
|
2017
2045
|
] }),
|
|
2018
|
-
toggleH3: /* @__PURE__ */ (0,
|
|
2019
|
-
/* @__PURE__ */ (0,
|
|
2020
|
-
/* @__PURE__ */ (0,
|
|
2046
|
+
toggleH3: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "lumir-block-icon-toggle", children: [
|
|
2047
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 5v14l11-7z" }) }),
|
|
2048
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "H3" })
|
|
2021
2049
|
] }),
|
|
2022
|
-
quote: /* @__PURE__ */ (0,
|
|
2023
|
-
codeBlock: /* @__PURE__ */ (0,
|
|
2024
|
-
toggleList: /* @__PURE__ */ (0,
|
|
2025
|
-
/* @__PURE__ */ (0,
|
|
2026
|
-
/* @__PURE__ */ (0,
|
|
2050
|
+
quote: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }),
|
|
2051
|
+
codeBlock: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }),
|
|
2052
|
+
toggleList: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
2053
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M10 6h10v2H10zM10 11h10v2H10zM10 16h10v2H10z" }),
|
|
2054
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2027
2055
|
"path",
|
|
2028
2056
|
{
|
|
2029
2057
|
d: "M4 8l4 4-4 4",
|
|
@@ -2035,15 +2063,15 @@ var BlockTypeIcons = {
|
|
|
2035
2063
|
}
|
|
2036
2064
|
)
|
|
2037
2065
|
] }),
|
|
2038
|
-
bulletList: /* @__PURE__ */ (0,
|
|
2039
|
-
/* @__PURE__ */ (0,
|
|
2040
|
-
/* @__PURE__ */ (0,
|
|
2041
|
-
/* @__PURE__ */ (0,
|
|
2042
|
-
/* @__PURE__ */ (0,
|
|
2066
|
+
bulletList: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
2067
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "4", cy: "6", r: "1.5" }),
|
|
2068
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "4", cy: "12", r: "1.5" }),
|
|
2069
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "4", cy: "18", r: "1.5" }),
|
|
2070
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 5h12v2H8zM8 11h12v2H8zM8 17h12v2H8z" })
|
|
2043
2071
|
] }),
|
|
2044
|
-
numberedList: /* @__PURE__ */ (0,
|
|
2045
|
-
checkList: /* @__PURE__ */ (0,
|
|
2046
|
-
/* @__PURE__ */ (0,
|
|
2072
|
+
numberedList: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
|
|
2073
|
+
checkList: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
|
|
2074
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2047
2075
|
"rect",
|
|
2048
2076
|
{
|
|
2049
2077
|
x: "3",
|
|
@@ -2056,7 +2084,7 @@ var BlockTypeIcons = {
|
|
|
2056
2084
|
strokeWidth: "1.5"
|
|
2057
2085
|
}
|
|
2058
2086
|
),
|
|
2059
|
-
/* @__PURE__ */ (0,
|
|
2087
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2060
2088
|
"path",
|
|
2061
2089
|
{
|
|
2062
2090
|
d: "M4.5 7l1.5 1.5 3-3",
|
|
@@ -2067,8 +2095,8 @@ var BlockTypeIcons = {
|
|
|
2067
2095
|
strokeLinejoin: "round"
|
|
2068
2096
|
}
|
|
2069
2097
|
),
|
|
2070
|
-
/* @__PURE__ */ (0,
|
|
2071
|
-
/* @__PURE__ */ (0,
|
|
2098
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 6h8v2h-8z" }),
|
|
2099
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
2072
2100
|
"rect",
|
|
2073
2101
|
{
|
|
2074
2102
|
x: "3",
|
|
@@ -2081,37 +2109,37 @@ var BlockTypeIcons = {
|
|
|
2081
2109
|
strokeWidth: "1.5"
|
|
2082
2110
|
}
|
|
2083
2111
|
),
|
|
2084
|
-
/* @__PURE__ */ (0,
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 16h8v2h-8z" })
|
|
2085
2113
|
] })
|
|
2086
2114
|
};
|
|
2087
2115
|
|
|
2088
2116
|
// src/components/FloatingMenu/components/ToolbarDivider.tsx
|
|
2089
|
-
var
|
|
2090
|
-
var ToolbarDivider = () => /* @__PURE__ */ (0,
|
|
2117
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2118
|
+
var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lumir-toolbar-divider" });
|
|
2091
2119
|
|
|
2092
2120
|
// src/components/FloatingMenu/components/UndoRedoButtons.tsx
|
|
2093
|
-
var
|
|
2094
|
-
var
|
|
2121
|
+
var import_react7 = require("react");
|
|
2122
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2095
2123
|
var UndoRedoButtons = ({ editor }) => {
|
|
2096
|
-
const handleUndo = (0,
|
|
2124
|
+
const handleUndo = (0, import_react7.useCallback)(() => {
|
|
2097
2125
|
try {
|
|
2098
2126
|
editor?.undo?.();
|
|
2099
2127
|
} catch (err) {
|
|
2100
2128
|
console.error("Undo failed:", err);
|
|
2101
2129
|
}
|
|
2102
2130
|
}, [editor]);
|
|
2103
|
-
const handleRedo = (0,
|
|
2131
|
+
const handleRedo = (0, import_react7.useCallback)(() => {
|
|
2104
2132
|
try {
|
|
2105
2133
|
editor?.redo?.();
|
|
2106
2134
|
} catch (err) {
|
|
2107
2135
|
console.error("Redo failed:", err);
|
|
2108
2136
|
}
|
|
2109
2137
|
}, [editor]);
|
|
2110
|
-
const handleMouseDown2 = (0,
|
|
2138
|
+
const handleMouseDown2 = (0, import_react7.useCallback)((e) => {
|
|
2111
2139
|
e.preventDefault();
|
|
2112
2140
|
}, []);
|
|
2113
|
-
return /* @__PURE__ */ (0,
|
|
2114
|
-
/* @__PURE__ */ (0,
|
|
2141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
2142
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2115
2143
|
"button",
|
|
2116
2144
|
{
|
|
2117
2145
|
className: "lumir-toolbar-btn",
|
|
@@ -2122,7 +2150,7 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
2122
2150
|
children: Icons.undo
|
|
2123
2151
|
}
|
|
2124
2152
|
),
|
|
2125
|
-
/* @__PURE__ */ (0,
|
|
2153
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2126
2154
|
"button",
|
|
2127
2155
|
{
|
|
2128
2156
|
className: "lumir-toolbar-btn",
|
|
@@ -2137,8 +2165,8 @@ var UndoRedoButtons = ({ editor }) => {
|
|
|
2137
2165
|
};
|
|
2138
2166
|
|
|
2139
2167
|
// src/components/FloatingMenu/components/TextStyleButton.tsx
|
|
2140
|
-
var
|
|
2141
|
-
var
|
|
2168
|
+
var import_react8 = require("react");
|
|
2169
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2142
2170
|
var iconMap = {
|
|
2143
2171
|
bold: Icons.bold,
|
|
2144
2172
|
italic: Icons.italic,
|
|
@@ -2164,17 +2192,17 @@ var TextStyleButton = ({
|
|
|
2164
2192
|
}
|
|
2165
2193
|
};
|
|
2166
2194
|
const isActive = getIsActive();
|
|
2167
|
-
const handleClick = (0,
|
|
2195
|
+
const handleClick = (0, import_react8.useCallback)(() => {
|
|
2168
2196
|
try {
|
|
2169
2197
|
editor?.toggleStyles?.({ [style]: true });
|
|
2170
2198
|
} catch (err) {
|
|
2171
2199
|
console.error(`Toggle ${style} failed:`, err);
|
|
2172
2200
|
}
|
|
2173
2201
|
}, [editor, style]);
|
|
2174
|
-
const handleMouseDown2 = (0,
|
|
2202
|
+
const handleMouseDown2 = (0, import_react8.useCallback)((e) => {
|
|
2175
2203
|
e.preventDefault();
|
|
2176
2204
|
}, []);
|
|
2177
|
-
return /* @__PURE__ */ (0,
|
|
2205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2178
2206
|
"button",
|
|
2179
2207
|
{
|
|
2180
2208
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -2188,7 +2216,7 @@ var TextStyleButton = ({
|
|
|
2188
2216
|
};
|
|
2189
2217
|
|
|
2190
2218
|
// src/components/FloatingMenu/components/AlignButton.tsx
|
|
2191
|
-
var
|
|
2219
|
+
var import_react9 = require("react");
|
|
2192
2220
|
|
|
2193
2221
|
// src/utils/prosemirror-table-utils.ts
|
|
2194
2222
|
function getSelectedCellPositions(editor) {
|
|
@@ -2284,7 +2312,7 @@ function getTableAlignment(editor, blockId) {
|
|
|
2284
2312
|
}
|
|
2285
2313
|
|
|
2286
2314
|
// src/components/FloatingMenu/components/AlignButton.tsx
|
|
2287
|
-
var
|
|
2315
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2288
2316
|
var iconMap2 = {
|
|
2289
2317
|
left: Icons.alignLeft,
|
|
2290
2318
|
center: Icons.alignCenter,
|
|
@@ -2311,7 +2339,7 @@ var AlignButton = ({
|
|
|
2311
2339
|
}
|
|
2312
2340
|
};
|
|
2313
2341
|
const isActive = getCurrentAlignment() === alignment;
|
|
2314
|
-
const handleClick = (0,
|
|
2342
|
+
const handleClick = (0, import_react9.useCallback)(() => {
|
|
2315
2343
|
try {
|
|
2316
2344
|
if (setSelectedCellsAttr(editor, "textAlignment", alignment)) {
|
|
2317
2345
|
return;
|
|
@@ -2324,10 +2352,10 @@ var AlignButton = ({
|
|
|
2324
2352
|
console.error(`Set alignment ${alignment} failed:`, err);
|
|
2325
2353
|
}
|
|
2326
2354
|
}, [editor, alignment]);
|
|
2327
|
-
const handleMouseDown2 = (0,
|
|
2355
|
+
const handleMouseDown2 = (0, import_react9.useCallback)((e) => {
|
|
2328
2356
|
e.preventDefault();
|
|
2329
2357
|
}, []);
|
|
2330
|
-
return /* @__PURE__ */ (0,
|
|
2358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2331
2359
|
"button",
|
|
2332
2360
|
{
|
|
2333
2361
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -2341,8 +2369,8 @@ var AlignButton = ({
|
|
|
2341
2369
|
};
|
|
2342
2370
|
|
|
2343
2371
|
// src/components/FloatingMenu/components/ListButton.tsx
|
|
2344
|
-
var
|
|
2345
|
-
var
|
|
2372
|
+
var import_react10 = require("react");
|
|
2373
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2346
2374
|
var iconMap3 = {
|
|
2347
2375
|
bullet: Icons.bulletList,
|
|
2348
2376
|
numbered: Icons.numberedList
|
|
@@ -2362,7 +2390,7 @@ var ListButton = ({ editor, type }) => {
|
|
|
2362
2390
|
}
|
|
2363
2391
|
};
|
|
2364
2392
|
const isActive = getIsActive();
|
|
2365
|
-
const handleClick = (0,
|
|
2393
|
+
const handleClick = (0, import_react10.useCallback)(() => {
|
|
2366
2394
|
try {
|
|
2367
2395
|
const block = editor?.getTextCursorPosition()?.block;
|
|
2368
2396
|
if (block && editor?.updateBlock) {
|
|
@@ -2374,10 +2402,10 @@ var ListButton = ({ editor, type }) => {
|
|
|
2374
2402
|
console.error(`List toggle failed:`, err);
|
|
2375
2403
|
}
|
|
2376
2404
|
}, [editor, type]);
|
|
2377
|
-
const handleMouseDown2 = (0,
|
|
2405
|
+
const handleMouseDown2 = (0, import_react10.useCallback)((e) => {
|
|
2378
2406
|
e.preventDefault();
|
|
2379
2407
|
}, []);
|
|
2380
|
-
return /* @__PURE__ */ (0,
|
|
2408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2381
2409
|
"button",
|
|
2382
2410
|
{
|
|
2383
2411
|
className: cn("lumir-toolbar-btn", isActive && "is-active"),
|
|
@@ -2391,13 +2419,13 @@ var ListButton = ({ editor, type }) => {
|
|
|
2391
2419
|
};
|
|
2392
2420
|
|
|
2393
2421
|
// src/components/FloatingMenu/components/ImageButton.tsx
|
|
2394
|
-
var
|
|
2395
|
-
var
|
|
2422
|
+
var import_react11 = require("react");
|
|
2423
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2396
2424
|
var ImageButton = ({
|
|
2397
2425
|
editor,
|
|
2398
2426
|
onImageUpload
|
|
2399
2427
|
}) => {
|
|
2400
|
-
const handleClick = (0,
|
|
2428
|
+
const handleClick = (0, import_react11.useCallback)(() => {
|
|
2401
2429
|
if (onImageUpload) {
|
|
2402
2430
|
onImageUpload();
|
|
2403
2431
|
} else {
|
|
@@ -2422,10 +2450,10 @@ var ImageButton = ({
|
|
|
2422
2450
|
input.click();
|
|
2423
2451
|
}
|
|
2424
2452
|
}, [editor, onImageUpload]);
|
|
2425
|
-
const handleMouseDown2 = (0,
|
|
2453
|
+
const handleMouseDown2 = (0, import_react11.useCallback)((e) => {
|
|
2426
2454
|
e.preventDefault();
|
|
2427
2455
|
}, []);
|
|
2428
|
-
return /* @__PURE__ */ (0,
|
|
2456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2429
2457
|
"button",
|
|
2430
2458
|
{
|
|
2431
2459
|
className: "lumir-toolbar-btn",
|
|
@@ -2439,7 +2467,7 @@ var ImageButton = ({
|
|
|
2439
2467
|
};
|
|
2440
2468
|
|
|
2441
2469
|
// src/components/FloatingMenu/components/ColorButton.tsx
|
|
2442
|
-
var
|
|
2470
|
+
var import_react12 = require("react");
|
|
2443
2471
|
|
|
2444
2472
|
// src/constants/colors.ts
|
|
2445
2473
|
var TEXT_COLORS = [
|
|
@@ -2473,13 +2501,13 @@ var getHexFromColorValue = (value, type) => {
|
|
|
2473
2501
|
};
|
|
2474
2502
|
|
|
2475
2503
|
// src/components/FloatingMenu/components/ColorButton.tsx
|
|
2476
|
-
var
|
|
2504
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2477
2505
|
var ColorButton = ({ editor, type }) => {
|
|
2478
|
-
const [isOpen, setIsOpen] = (0,
|
|
2479
|
-
const [currentColor, setCurrentColor] = (0,
|
|
2480
|
-
const dropdownRef = (0,
|
|
2506
|
+
const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
|
|
2507
|
+
const [currentColor, setCurrentColor] = (0, import_react12.useState)("default");
|
|
2508
|
+
const dropdownRef = (0, import_react12.useRef)(null);
|
|
2481
2509
|
const colors = type === "text" ? TEXT_COLORS : BACKGROUND_COLORS;
|
|
2482
|
-
const getCurrentColor = (0,
|
|
2510
|
+
const getCurrentColor = (0, import_react12.useCallback)(() => {
|
|
2483
2511
|
try {
|
|
2484
2512
|
if (isInTableCell(editor)) {
|
|
2485
2513
|
const attr = type === "text" ? "textColor" : "backgroundColor";
|
|
@@ -2495,13 +2523,13 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2495
2523
|
}
|
|
2496
2524
|
return "default";
|
|
2497
2525
|
}, [editor, type]);
|
|
2498
|
-
(0,
|
|
2526
|
+
(0, import_react12.useEffect)(() => {
|
|
2499
2527
|
if (isOpen) {
|
|
2500
2528
|
const color = getCurrentColor();
|
|
2501
2529
|
setCurrentColor(color);
|
|
2502
2530
|
}
|
|
2503
2531
|
}, [isOpen, getCurrentColor]);
|
|
2504
|
-
(0,
|
|
2532
|
+
(0, import_react12.useEffect)(() => {
|
|
2505
2533
|
const handleClickOutside = (e) => {
|
|
2506
2534
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2507
2535
|
setIsOpen(false);
|
|
@@ -2510,7 +2538,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2510
2538
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2511
2539
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2512
2540
|
}, []);
|
|
2513
|
-
const handleColorSelect = (0,
|
|
2541
|
+
const handleColorSelect = (0, import_react12.useCallback)(
|
|
2514
2542
|
(color) => {
|
|
2515
2543
|
try {
|
|
2516
2544
|
if (!editor) return;
|
|
@@ -2529,11 +2557,11 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2529
2557
|
},
|
|
2530
2558
|
[editor, type]
|
|
2531
2559
|
);
|
|
2532
|
-
const handleMouseDown2 = (0,
|
|
2560
|
+
const handleMouseDown2 = (0, import_react12.useCallback)((e) => {
|
|
2533
2561
|
e.preventDefault();
|
|
2534
2562
|
}, []);
|
|
2535
|
-
return /* @__PURE__ */ (0,
|
|
2536
|
-
/* @__PURE__ */ (0,
|
|
2563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2537
2565
|
"button",
|
|
2538
2566
|
{
|
|
2539
2567
|
className: "lumir-toolbar-btn lumir-color-btn",
|
|
@@ -2543,7 +2571,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2543
2571
|
type: "button",
|
|
2544
2572
|
children: [
|
|
2545
2573
|
type === "text" ? Icons.textColor : Icons.bgColor,
|
|
2546
|
-
/* @__PURE__ */ (0,
|
|
2574
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2547
2575
|
"span",
|
|
2548
2576
|
{
|
|
2549
2577
|
className: "lumir-color-indicator",
|
|
@@ -2555,7 +2583,7 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2555
2583
|
]
|
|
2556
2584
|
}
|
|
2557
2585
|
),
|
|
2558
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2586
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "lumir-dropdown-menu lumir-color-menu", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "lumir-color-grid", children: colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2559
2587
|
"button",
|
|
2560
2588
|
{
|
|
2561
2589
|
className: cn(
|
|
@@ -2574,13 +2602,13 @@ var ColorButton = ({ editor, type }) => {
|
|
|
2574
2602
|
};
|
|
2575
2603
|
|
|
2576
2604
|
// src/components/FloatingMenu/components/FontSizeButton.tsx
|
|
2577
|
-
var
|
|
2578
|
-
var
|
|
2605
|
+
var import_react13 = require("react");
|
|
2606
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2579
2607
|
var DEFAULT_LABEL = "\uAE30\uBCF8";
|
|
2580
2608
|
var toLabel = (size) => size.replace(/px$/, "");
|
|
2581
2609
|
var FontSizeButton = ({ editor }) => {
|
|
2582
|
-
const [isOpen, setIsOpen] = (0,
|
|
2583
|
-
const dropdownRef = (0,
|
|
2610
|
+
const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
|
|
2611
|
+
const dropdownRef = (0, import_react13.useRef)(null);
|
|
2584
2612
|
const getCurrentSize = () => {
|
|
2585
2613
|
try {
|
|
2586
2614
|
return editor?.getActiveStyles?.()?.fontSize || "";
|
|
@@ -2589,7 +2617,12 @@ var FontSizeButton = ({ editor }) => {
|
|
|
2589
2617
|
}
|
|
2590
2618
|
};
|
|
2591
2619
|
const currentSize = getCurrentSize();
|
|
2592
|
-
|
|
2620
|
+
const currentPx = parseFontSizePx(currentSize);
|
|
2621
|
+
const [inputValue, setInputValue] = (0, import_react13.useState)(String(currentPx));
|
|
2622
|
+
(0, import_react13.useEffect)(() => {
|
|
2623
|
+
setInputValue(String(currentPx));
|
|
2624
|
+
}, [currentPx]);
|
|
2625
|
+
(0, import_react13.useEffect)(() => {
|
|
2593
2626
|
const handleClickOutside = (e) => {
|
|
2594
2627
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2595
2628
|
setIsOpen(false);
|
|
@@ -2598,7 +2631,7 @@ var FontSizeButton = ({ editor }) => {
|
|
|
2598
2631
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2599
2632
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2600
2633
|
}, []);
|
|
2601
|
-
const handleSizeSelect = (0,
|
|
2634
|
+
const handleSizeSelect = (0, import_react13.useCallback)(
|
|
2602
2635
|
(size) => {
|
|
2603
2636
|
try {
|
|
2604
2637
|
if (!editor) return;
|
|
@@ -2615,11 +2648,35 @@ var FontSizeButton = ({ editor }) => {
|
|
|
2615
2648
|
},
|
|
2616
2649
|
[editor]
|
|
2617
2650
|
);
|
|
2618
|
-
const
|
|
2651
|
+
const stepBy = (0, import_react13.useCallback)(
|
|
2652
|
+
(delta) => {
|
|
2653
|
+
try {
|
|
2654
|
+
editor?.addStyles?.({
|
|
2655
|
+
fontSize: toFontSizeValue(currentPx + delta)
|
|
2656
|
+
});
|
|
2657
|
+
} catch (err) {
|
|
2658
|
+
console.error("Font size step failed:", err);
|
|
2659
|
+
}
|
|
2660
|
+
},
|
|
2661
|
+
[editor, currentPx]
|
|
2662
|
+
);
|
|
2663
|
+
const applyInput = (0, import_react13.useCallback)(() => {
|
|
2664
|
+
const n = parseInt(inputValue, 10);
|
|
2665
|
+
if (Number.isFinite(n)) {
|
|
2666
|
+
try {
|
|
2667
|
+
editor?.addStyles?.({ fontSize: toFontSizeValue(n) });
|
|
2668
|
+
} catch (err) {
|
|
2669
|
+
console.error("Font size apply failed:", err);
|
|
2670
|
+
}
|
|
2671
|
+
} else {
|
|
2672
|
+
setInputValue(String(currentPx));
|
|
2673
|
+
}
|
|
2674
|
+
}, [editor, inputValue, currentPx]);
|
|
2675
|
+
const handleMouseDown2 = (0, import_react13.useCallback)((e) => {
|
|
2619
2676
|
e.preventDefault();
|
|
2620
2677
|
}, []);
|
|
2621
|
-
return /* @__PURE__ */ (0,
|
|
2622
|
-
/* @__PURE__ */ (0,
|
|
2678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2679
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2623
2680
|
"button",
|
|
2624
2681
|
{
|
|
2625
2682
|
className: "lumir-dropdown-btn lumir-font-size-btn",
|
|
@@ -2628,13 +2685,64 @@ var FontSizeButton = ({ editor }) => {
|
|
|
2628
2685
|
title: "\uAE00\uC790 \uD06C\uAE30",
|
|
2629
2686
|
type: "button",
|
|
2630
2687
|
children: [
|
|
2631
|
-
/* @__PURE__ */ (0,
|
|
2688
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "lumir-font-size-label", children: currentSize ? toLabel(currentSize) : DEFAULT_LABEL }),
|
|
2632
2689
|
Icons.expandMore
|
|
2633
2690
|
]
|
|
2634
2691
|
}
|
|
2635
2692
|
),
|
|
2636
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2637
|
-
/* @__PURE__ */ (0,
|
|
2693
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "lumir-dropdown-menu lumir-font-size-menu", children: [
|
|
2694
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "lumir-fs-stepper", children: [
|
|
2695
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2696
|
+
"button",
|
|
2697
|
+
{
|
|
2698
|
+
type: "button",
|
|
2699
|
+
className: "lumir-fs-stepper-btn",
|
|
2700
|
+
"aria-label": "\uAE00\uC790 \uD06C\uAE30 1px \uC904\uC774\uAE30",
|
|
2701
|
+
disabled: currentPx <= FONT_SIZE_MIN,
|
|
2702
|
+
onMouseDown: handleMouseDown2,
|
|
2703
|
+
onClick: () => stepBy(-1),
|
|
2704
|
+
children: "\u2212"
|
|
2705
|
+
}
|
|
2706
|
+
),
|
|
2707
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2708
|
+
"input",
|
|
2709
|
+
{
|
|
2710
|
+
className: "lumir-fs-stepper-input",
|
|
2711
|
+
type: "text",
|
|
2712
|
+
inputMode: "numeric",
|
|
2713
|
+
"aria-label": "\uAE00\uC790 \uD06C\uAE30 \uC785\uB825",
|
|
2714
|
+
value: inputValue,
|
|
2715
|
+
onChange: (e) => setInputValue(e.target.value.replace(/[^0-9]/g, "")),
|
|
2716
|
+
onKeyDown: (e) => {
|
|
2717
|
+
e.stopPropagation();
|
|
2718
|
+
if (e.key === "Enter") {
|
|
2719
|
+
e.preventDefault();
|
|
2720
|
+
applyInput();
|
|
2721
|
+
} else if (e.key === "ArrowUp") {
|
|
2722
|
+
e.preventDefault();
|
|
2723
|
+
stepBy(1);
|
|
2724
|
+
} else if (e.key === "ArrowDown") {
|
|
2725
|
+
e.preventDefault();
|
|
2726
|
+
stepBy(-1);
|
|
2727
|
+
}
|
|
2728
|
+
},
|
|
2729
|
+
onBlur: applyInput
|
|
2730
|
+
}
|
|
2731
|
+
),
|
|
2732
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2733
|
+
"button",
|
|
2734
|
+
{
|
|
2735
|
+
type: "button",
|
|
2736
|
+
className: "lumir-fs-stepper-btn",
|
|
2737
|
+
"aria-label": "\uAE00\uC790 \uD06C\uAE30 1px \uB298\uB9AC\uAE30",
|
|
2738
|
+
disabled: currentPx >= FONT_SIZE_MAX,
|
|
2739
|
+
onMouseDown: handleMouseDown2,
|
|
2740
|
+
onClick: () => stepBy(1),
|
|
2741
|
+
children: "+"
|
|
2742
|
+
}
|
|
2743
|
+
)
|
|
2744
|
+
] }),
|
|
2745
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2638
2746
|
"button",
|
|
2639
2747
|
{
|
|
2640
2748
|
className: cn(
|
|
@@ -2647,7 +2755,7 @@ var FontSizeButton = ({ editor }) => {
|
|
|
2647
2755
|
children: DEFAULT_LABEL
|
|
2648
2756
|
}
|
|
2649
2757
|
),
|
|
2650
|
-
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ (0,
|
|
2758
|
+
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2651
2759
|
"button",
|
|
2652
2760
|
{
|
|
2653
2761
|
className: cn(
|
|
@@ -2666,8 +2774,8 @@ var FontSizeButton = ({ editor }) => {
|
|
|
2666
2774
|
};
|
|
2667
2775
|
|
|
2668
2776
|
// src/components/FloatingMenu/components/LinkButton.tsx
|
|
2669
|
-
var
|
|
2670
|
-
var
|
|
2777
|
+
var import_react14 = require("react");
|
|
2778
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2671
2779
|
var isDangerousProtocol = (url) => {
|
|
2672
2780
|
const trimmedUrl = url.trim().toLowerCase();
|
|
2673
2781
|
const dangerousPatterns = [
|
|
@@ -2693,13 +2801,13 @@ var normalizeUrl = (url) => {
|
|
|
2693
2801
|
return `https://${trimmedUrl}`;
|
|
2694
2802
|
};
|
|
2695
2803
|
var LinkButton = ({ editor }) => {
|
|
2696
|
-
const [isOpen, setIsOpen] = (0,
|
|
2697
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
2698
|
-
const [errorMsg, setErrorMsg] = (0,
|
|
2699
|
-
const dropdownRef = (0,
|
|
2700
|
-
const inputRef = (0,
|
|
2701
|
-
const hasSelectionRef = (0,
|
|
2702
|
-
(0,
|
|
2804
|
+
const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
|
|
2805
|
+
const [linkUrl, setLinkUrl] = (0, import_react14.useState)("");
|
|
2806
|
+
const [errorMsg, setErrorMsg] = (0, import_react14.useState)(null);
|
|
2807
|
+
const dropdownRef = (0, import_react14.useRef)(null);
|
|
2808
|
+
const inputRef = (0, import_react14.useRef)(null);
|
|
2809
|
+
const hasSelectionRef = (0, import_react14.useRef)(false);
|
|
2810
|
+
(0, import_react14.useEffect)(() => {
|
|
2703
2811
|
const handleClickOutside = (e) => {
|
|
2704
2812
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
2705
2813
|
setIsOpen(false);
|
|
@@ -2710,7 +2818,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2710
2818
|
document.addEventListener("mousedown", handleClickOutside);
|
|
2711
2819
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2712
2820
|
}, []);
|
|
2713
|
-
(0,
|
|
2821
|
+
(0, import_react14.useEffect)(() => {
|
|
2714
2822
|
if (isOpen && inputRef.current) {
|
|
2715
2823
|
try {
|
|
2716
2824
|
const selectedText = editor?.getSelectedText?.() || "";
|
|
@@ -2721,7 +2829,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2721
2829
|
setTimeout(() => inputRef.current?.focus(), 0);
|
|
2722
2830
|
}
|
|
2723
2831
|
}, [isOpen, editor]);
|
|
2724
|
-
const handleSubmit = (0,
|
|
2832
|
+
const handleSubmit = (0, import_react14.useCallback)(
|
|
2725
2833
|
(e) => {
|
|
2726
2834
|
e?.preventDefault();
|
|
2727
2835
|
setErrorMsg(null);
|
|
@@ -2748,15 +2856,15 @@ var LinkButton = ({ editor }) => {
|
|
|
2748
2856
|
},
|
|
2749
2857
|
[editor, linkUrl]
|
|
2750
2858
|
);
|
|
2751
|
-
const handleCancel = (0,
|
|
2859
|
+
const handleCancel = (0, import_react14.useCallback)(() => {
|
|
2752
2860
|
setIsOpen(false);
|
|
2753
2861
|
setLinkUrl("");
|
|
2754
2862
|
setErrorMsg(null);
|
|
2755
2863
|
}, []);
|
|
2756
|
-
const handleMouseDown2 = (0,
|
|
2864
|
+
const handleMouseDown2 = (0, import_react14.useCallback)((e) => {
|
|
2757
2865
|
e.preventDefault();
|
|
2758
2866
|
}, []);
|
|
2759
|
-
const handleKeyDown = (0,
|
|
2867
|
+
const handleKeyDown = (0, import_react14.useCallback)(
|
|
2760
2868
|
(e) => {
|
|
2761
2869
|
if (e.key === "Enter") {
|
|
2762
2870
|
handleSubmit();
|
|
@@ -2766,8 +2874,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2766
2874
|
},
|
|
2767
2875
|
[handleSubmit, handleCancel]
|
|
2768
2876
|
);
|
|
2769
|
-
return /* @__PURE__ */ (0,
|
|
2770
|
-
/* @__PURE__ */ (0,
|
|
2877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
2878
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2771
2879
|
"button",
|
|
2772
2880
|
{
|
|
2773
2881
|
className: "lumir-toolbar-btn",
|
|
@@ -2778,8 +2886,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2778
2886
|
children: Icons.link
|
|
2779
2887
|
}
|
|
2780
2888
|
),
|
|
2781
|
-
isOpen && /* @__PURE__ */ (0,
|
|
2782
|
-
/* @__PURE__ */ (0,
|
|
2889
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "lumir-dropdown-menu lumir-link-menu", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, className: "lumir-link-form", children: [
|
|
2890
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2783
2891
|
"input",
|
|
2784
2892
|
{
|
|
2785
2893
|
ref: inputRef,
|
|
@@ -2795,7 +2903,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2795
2903
|
onMouseDown: handleMouseDown2
|
|
2796
2904
|
}
|
|
2797
2905
|
),
|
|
2798
|
-
errorMsg && /* @__PURE__ */ (0,
|
|
2906
|
+
errorMsg && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2799
2907
|
"div",
|
|
2800
2908
|
{
|
|
2801
2909
|
style: {
|
|
@@ -2807,8 +2915,8 @@ var LinkButton = ({ editor }) => {
|
|
|
2807
2915
|
children: errorMsg
|
|
2808
2916
|
}
|
|
2809
2917
|
),
|
|
2810
|
-
/* @__PURE__ */ (0,
|
|
2811
|
-
/* @__PURE__ */ (0,
|
|
2918
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "lumir-link-actions", children: [
|
|
2919
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2812
2920
|
"button",
|
|
2813
2921
|
{
|
|
2814
2922
|
type: "button",
|
|
@@ -2818,7 +2926,7 @@ var LinkButton = ({ editor }) => {
|
|
|
2818
2926
|
children: "\uCDE8\uC18C"
|
|
2819
2927
|
}
|
|
2820
2928
|
),
|
|
2821
|
-
/* @__PURE__ */ (0,
|
|
2929
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2822
2930
|
"button",
|
|
2823
2931
|
{
|
|
2824
2932
|
type: "submit",
|
|
@@ -2834,10 +2942,10 @@ var LinkButton = ({ editor }) => {
|
|
|
2834
2942
|
};
|
|
2835
2943
|
|
|
2836
2944
|
// src/components/FloatingMenu/components/TableButton.tsx
|
|
2837
|
-
var
|
|
2838
|
-
var
|
|
2945
|
+
var import_react15 = require("react");
|
|
2946
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2839
2947
|
var TableButton = ({ editor }) => {
|
|
2840
|
-
const handleClick = (0,
|
|
2948
|
+
const handleClick = (0, import_react15.useCallback)(() => {
|
|
2841
2949
|
try {
|
|
2842
2950
|
const block = editor?.getTextCursorPosition()?.block;
|
|
2843
2951
|
if (!block || !editor?.insertBlocks) return;
|
|
@@ -2859,10 +2967,10 @@ var TableButton = ({ editor }) => {
|
|
|
2859
2967
|
console.error("Table insert failed:", err);
|
|
2860
2968
|
}
|
|
2861
2969
|
}, [editor]);
|
|
2862
|
-
const handleMouseDown2 = (0,
|
|
2970
|
+
const handleMouseDown2 = (0, import_react15.useCallback)((e) => {
|
|
2863
2971
|
e.preventDefault();
|
|
2864
2972
|
}, []);
|
|
2865
|
-
return /* @__PURE__ */ (0,
|
|
2973
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2866
2974
|
"button",
|
|
2867
2975
|
{
|
|
2868
2976
|
className: "lumir-toolbar-btn",
|
|
@@ -2876,13 +2984,13 @@ var TableButton = ({ editor }) => {
|
|
|
2876
2984
|
};
|
|
2877
2985
|
|
|
2878
2986
|
// src/components/FloatingMenu/components/HTMLImportButton.tsx
|
|
2879
|
-
var
|
|
2880
|
-
var
|
|
2987
|
+
var import_react16 = require("react");
|
|
2988
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2881
2989
|
var HTMLImportButton = ({
|
|
2882
2990
|
editor
|
|
2883
2991
|
}) => {
|
|
2884
|
-
const fileInputRef = (0,
|
|
2885
|
-
const handleFileUpload = (0,
|
|
2992
|
+
const fileInputRef = (0, import_react16.useRef)(null);
|
|
2993
|
+
const handleFileUpload = (0, import_react16.useCallback)(
|
|
2886
2994
|
(e) => {
|
|
2887
2995
|
const file = e.target.files?.[0];
|
|
2888
2996
|
if (!file) return;
|
|
@@ -2918,14 +3026,14 @@ var HTMLImportButton = ({
|
|
|
2918
3026
|
},
|
|
2919
3027
|
[editor]
|
|
2920
3028
|
);
|
|
2921
|
-
const handleClick = (0,
|
|
3029
|
+
const handleClick = (0, import_react16.useCallback)(() => {
|
|
2922
3030
|
fileInputRef.current?.click();
|
|
2923
3031
|
}, []);
|
|
2924
|
-
const handleMouseDown2 = (0,
|
|
3032
|
+
const handleMouseDown2 = (0, import_react16.useCallback)((e) => {
|
|
2925
3033
|
e.preventDefault();
|
|
2926
3034
|
}, []);
|
|
2927
|
-
return /* @__PURE__ */ (0,
|
|
2928
|
-
/* @__PURE__ */ (0,
|
|
3035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
3036
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2929
3037
|
"input",
|
|
2930
3038
|
{
|
|
2931
3039
|
ref: fileInputRef,
|
|
@@ -2935,7 +3043,7 @@ var HTMLImportButton = ({
|
|
|
2935
3043
|
style: { display: "none" }
|
|
2936
3044
|
}
|
|
2937
3045
|
),
|
|
2938
|
-
/* @__PURE__ */ (0,
|
|
3046
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2939
3047
|
"button",
|
|
2940
3048
|
{
|
|
2941
3049
|
className: "lumir-toolbar-btn",
|
|
@@ -2950,8 +3058,8 @@ var HTMLImportButton = ({
|
|
|
2950
3058
|
};
|
|
2951
3059
|
|
|
2952
3060
|
// src/components/FloatingMenu/components/BlockTypeSelect.tsx
|
|
2953
|
-
var
|
|
2954
|
-
var
|
|
3061
|
+
var import_react17 = require("react");
|
|
3062
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2955
3063
|
var blockTypeCategories = [
|
|
2956
3064
|
{
|
|
2957
3065
|
category: "Headings",
|
|
@@ -2981,8 +3089,8 @@ var blockTypes = blockTypeCategories.flatMap(
|
|
|
2981
3089
|
(cat) => cat.items
|
|
2982
3090
|
);
|
|
2983
3091
|
var BlockTypeSelect = ({ editor }) => {
|
|
2984
|
-
const [isOpen, setIsOpen] = (0,
|
|
2985
|
-
const dropdownRef = (0,
|
|
3092
|
+
const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
|
|
3093
|
+
const dropdownRef = (0, import_react17.useRef)(null);
|
|
2986
3094
|
const getCurrentBlock = () => {
|
|
2987
3095
|
try {
|
|
2988
3096
|
return editor?.getTextCursorPosition()?.block;
|
|
@@ -2994,7 +3102,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
2994
3102
|
const currentType = currentBlock?.type || "paragraph";
|
|
2995
3103
|
const currentLevel = currentBlock?.props?.level;
|
|
2996
3104
|
const isCurrentToggle = currentType === "heading" && currentBlock?.props?.isToggleable === true;
|
|
2997
|
-
(0,
|
|
3105
|
+
(0, import_react17.useEffect)(() => {
|
|
2998
3106
|
const handleClickOutside = (e) => {
|
|
2999
3107
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
3000
3108
|
setIsOpen(false);
|
|
@@ -3023,7 +3131,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
3023
3131
|
console.error("Block type change failed:", err);
|
|
3024
3132
|
}
|
|
3025
3133
|
};
|
|
3026
|
-
const handleMouseDown2 = (0,
|
|
3134
|
+
const handleMouseDown2 = (0, import_react17.useCallback)((e) => {
|
|
3027
3135
|
e.preventDefault();
|
|
3028
3136
|
}, []);
|
|
3029
3137
|
const getCurrentLabel = () => {
|
|
@@ -3054,8 +3162,8 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
3054
3162
|
}
|
|
3055
3163
|
return currentType === bt.type;
|
|
3056
3164
|
};
|
|
3057
|
-
return /* @__PURE__ */ (0,
|
|
3058
|
-
/* @__PURE__ */ (0,
|
|
3165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
|
|
3166
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3059
3167
|
"button",
|
|
3060
3168
|
{
|
|
3061
3169
|
className: "lumir-dropdown-btn lumir-block-type-btn",
|
|
@@ -3063,15 +3171,15 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
3063
3171
|
onMouseDown: handleMouseDown2,
|
|
3064
3172
|
type: "button",
|
|
3065
3173
|
children: [
|
|
3066
|
-
/* @__PURE__ */ (0,
|
|
3067
|
-
/* @__PURE__ */ (0,
|
|
3174
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "lumir-block-icon", children: BlockTypeIcons[getCurrentIcon()] }),
|
|
3175
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "lumir-block-label", children: getCurrentLabel() }),
|
|
3068
3176
|
Icons.expandMore
|
|
3069
3177
|
]
|
|
3070
3178
|
}
|
|
3071
3179
|
),
|
|
3072
|
-
isOpen && /* @__PURE__ */ (0,
|
|
3073
|
-
/* @__PURE__ */ (0,
|
|
3074
|
-
category.items.map((bt) => /* @__PURE__ */ (0,
|
|
3180
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "lumir-dropdown-menu lumir-block-menu", children: blockTypeCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "lumir-block-category", children: [
|
|
3181
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "lumir-block-category-title", children: category.category }),
|
|
3182
|
+
category.items.map((bt) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3075
3183
|
"button",
|
|
3076
3184
|
{
|
|
3077
3185
|
className: cn(
|
|
@@ -3081,8 +3189,8 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
3081
3189
|
onClick: () => handleTypeChange(bt.type, bt.level, bt.isToggle),
|
|
3082
3190
|
onMouseDown: handleMouseDown2,
|
|
3083
3191
|
children: [
|
|
3084
|
-
/* @__PURE__ */ (0,
|
|
3085
|
-
/* @__PURE__ */ (0,
|
|
3192
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "lumir-block-icon", children: BlockTypeIcons[bt.icon] }),
|
|
3193
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "lumir-block-item-title", children: bt.label })
|
|
3086
3194
|
]
|
|
3087
3195
|
},
|
|
3088
3196
|
bt.icon
|
|
@@ -3092,7 +3200,7 @@ var BlockTypeSelect = ({ editor }) => {
|
|
|
3092
3200
|
};
|
|
3093
3201
|
|
|
3094
3202
|
// src/components/FloatingMenu/index.tsx
|
|
3095
|
-
var
|
|
3203
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3096
3204
|
var COMPACT_BREAKPOINT = 700;
|
|
3097
3205
|
var MINIMIZED_BREAKPOINT = 400;
|
|
3098
3206
|
var FloatingMenu = ({
|
|
@@ -3101,12 +3209,12 @@ var FloatingMenu = ({
|
|
|
3101
3209
|
className,
|
|
3102
3210
|
onImageUpload
|
|
3103
3211
|
}) => {
|
|
3104
|
-
const wrapperRef = (0,
|
|
3105
|
-
const [isCompact, setIsCompact] = (0,
|
|
3106
|
-
const [isMinimizable, setIsMinimizable] = (0,
|
|
3107
|
-
const [isMinimized, setIsMinimized] = (0,
|
|
3108
|
-
const [, setSelectionTick] = (0,
|
|
3109
|
-
(0,
|
|
3212
|
+
const wrapperRef = (0, import_react18.useRef)(null);
|
|
3213
|
+
const [isCompact, setIsCompact] = (0, import_react18.useState)(false);
|
|
3214
|
+
const [isMinimizable, setIsMinimizable] = (0, import_react18.useState)(false);
|
|
3215
|
+
const [isMinimized, setIsMinimized] = (0, import_react18.useState)(false);
|
|
3216
|
+
const [, setSelectionTick] = (0, import_react18.useState)(0);
|
|
3217
|
+
(0, import_react18.useEffect)(() => {
|
|
3110
3218
|
if (!editor) return;
|
|
3111
3219
|
let debounceTimer = null;
|
|
3112
3220
|
const DEBOUNCE_DELAY = 150;
|
|
@@ -3130,7 +3238,7 @@ var FloatingMenu = ({
|
|
|
3130
3238
|
unsubscribeContent?.();
|
|
3131
3239
|
};
|
|
3132
3240
|
}, [editor]);
|
|
3133
|
-
(0,
|
|
3241
|
+
(0, import_react18.useEffect)(() => {
|
|
3134
3242
|
const checkWidth = () => {
|
|
3135
3243
|
if (wrapperRef.current) {
|
|
3136
3244
|
const width = wrapperRef.current.offsetWidth;
|
|
@@ -3145,8 +3253,8 @@ var FloatingMenu = ({
|
|
|
3145
3253
|
}
|
|
3146
3254
|
return () => resizeObserver.disconnect();
|
|
3147
3255
|
}, []);
|
|
3148
|
-
const MinimizedLayout = () => /* @__PURE__ */ (0,
|
|
3149
|
-
/* @__PURE__ */ (0,
|
|
3256
|
+
const MinimizedLayout = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3257
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3150
3258
|
"button",
|
|
3151
3259
|
{
|
|
3152
3260
|
className: "lumir-toolbar-button lumir-toggle-button",
|
|
@@ -3157,120 +3265,120 @@ var FloatingMenu = ({
|
|
|
3157
3265
|
children: isMinimized ? Icons.chevronRight : Icons.chevronLeft
|
|
3158
3266
|
}
|
|
3159
3267
|
),
|
|
3160
|
-
!isMinimized && /* @__PURE__ */ (0,
|
|
3161
|
-
/* @__PURE__ */ (0,
|
|
3162
|
-
/* @__PURE__ */ (0,
|
|
3163
|
-
/* @__PURE__ */ (0,
|
|
3164
|
-
/* @__PURE__ */ (0,
|
|
3165
|
-
/* @__PURE__ */ (0,
|
|
3166
|
-
/* @__PURE__ */ (0,
|
|
3167
|
-
/* @__PURE__ */ (0,
|
|
3168
|
-
/* @__PURE__ */ (0,
|
|
3169
|
-
/* @__PURE__ */ (0,
|
|
3170
|
-
/* @__PURE__ */ (0,
|
|
3268
|
+
!isMinimized && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3269
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3270
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UndoRedoButtons, { editor }),
|
|
3271
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3272
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockTypeSelect, { editor }) }),
|
|
3273
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3274
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3275
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "bold" }),
|
|
3276
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "italic" }),
|
|
3277
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "underline" }),
|
|
3278
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "strike" })
|
|
3171
3279
|
] }),
|
|
3172
|
-
/* @__PURE__ */ (0,
|
|
3173
|
-
/* @__PURE__ */ (0,
|
|
3174
|
-
/* @__PURE__ */ (0,
|
|
3175
|
-
/* @__PURE__ */ (0,
|
|
3176
|
-
/* @__PURE__ */ (0,
|
|
3280
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3281
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3282
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "left" }),
|
|
3283
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "center" }),
|
|
3284
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "right" })
|
|
3177
3285
|
] }),
|
|
3178
|
-
/* @__PURE__ */ (0,
|
|
3179
|
-
/* @__PURE__ */ (0,
|
|
3180
|
-
/* @__PURE__ */ (0,
|
|
3181
|
-
/* @__PURE__ */ (0,
|
|
3286
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3287
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ListButton, { editor, type: "bullet" }),
|
|
3289
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ListButton, { editor, type: "numbered" })
|
|
3182
3290
|
] }),
|
|
3183
|
-
/* @__PURE__ */ (0,
|
|
3184
|
-
/* @__PURE__ */ (0,
|
|
3185
|
-
/* @__PURE__ */ (0,
|
|
3186
|
-
/* @__PURE__ */ (0,
|
|
3187
|
-
/* @__PURE__ */ (0,
|
|
3291
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3292
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3293
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FontSizeButton, { editor }),
|
|
3294
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorButton, { editor, type: "text" }),
|
|
3295
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorButton, { editor, type: "background" })
|
|
3188
3296
|
] }),
|
|
3189
|
-
/* @__PURE__ */ (0,
|
|
3190
|
-
/* @__PURE__ */ (0,
|
|
3191
|
-
/* @__PURE__ */ (0,
|
|
3192
|
-
/* @__PURE__ */ (0,
|
|
3193
|
-
/* @__PURE__ */ (0,
|
|
3194
|
-
/* @__PURE__ */ (0,
|
|
3297
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3298
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3299
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageButton, { editor, onImageUpload }),
|
|
3300
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkButton, { editor }),
|
|
3301
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableButton, { editor }),
|
|
3302
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HTMLImportButton, { editor })
|
|
3195
3303
|
] })
|
|
3196
3304
|
] })
|
|
3197
3305
|
] });
|
|
3198
|
-
const SingleRowLayout = () => /* @__PURE__ */ (0,
|
|
3199
|
-
/* @__PURE__ */ (0,
|
|
3200
|
-
/* @__PURE__ */ (0,
|
|
3201
|
-
/* @__PURE__ */ (0,
|
|
3202
|
-
/* @__PURE__ */ (0,
|
|
3203
|
-
/* @__PURE__ */ (0,
|
|
3204
|
-
/* @__PURE__ */ (0,
|
|
3205
|
-
/* @__PURE__ */ (0,
|
|
3206
|
-
/* @__PURE__ */ (0,
|
|
3207
|
-
/* @__PURE__ */ (0,
|
|
3306
|
+
const SingleRowLayout = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3307
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UndoRedoButtons, { editor }),
|
|
3308
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3309
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockTypeSelect, { editor }) }),
|
|
3310
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3311
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3312
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "bold" }),
|
|
3313
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "italic" }),
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "underline" }),
|
|
3315
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "strike" })
|
|
3208
3316
|
] }),
|
|
3209
|
-
/* @__PURE__ */ (0,
|
|
3210
|
-
/* @__PURE__ */ (0,
|
|
3211
|
-
/* @__PURE__ */ (0,
|
|
3212
|
-
/* @__PURE__ */ (0,
|
|
3213
|
-
/* @__PURE__ */ (0,
|
|
3317
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3318
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3319
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "left" }),
|
|
3320
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "center" }),
|
|
3321
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "right" })
|
|
3214
3322
|
] }),
|
|
3215
|
-
/* @__PURE__ */ (0,
|
|
3216
|
-
/* @__PURE__ */ (0,
|
|
3217
|
-
/* @__PURE__ */ (0,
|
|
3218
|
-
/* @__PURE__ */ (0,
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3324
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3325
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ListButton, { editor, type: "bullet" }),
|
|
3326
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ListButton, { editor, type: "numbered" })
|
|
3219
3327
|
] }),
|
|
3220
|
-
/* @__PURE__ */ (0,
|
|
3221
|
-
/* @__PURE__ */ (0,
|
|
3222
|
-
/* @__PURE__ */ (0,
|
|
3223
|
-
/* @__PURE__ */ (0,
|
|
3224
|
-
/* @__PURE__ */ (0,
|
|
3328
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3329
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3330
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FontSizeButton, { editor }),
|
|
3331
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorButton, { editor, type: "text" }),
|
|
3332
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorButton, { editor, type: "background" })
|
|
3225
3333
|
] }),
|
|
3226
|
-
/* @__PURE__ */ (0,
|
|
3227
|
-
/* @__PURE__ */ (0,
|
|
3228
|
-
/* @__PURE__ */ (0,
|
|
3229
|
-
/* @__PURE__ */ (0,
|
|
3230
|
-
/* @__PURE__ */ (0,
|
|
3231
|
-
/* @__PURE__ */ (0,
|
|
3334
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3335
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3336
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageButton, { editor, onImageUpload }),
|
|
3337
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkButton, { editor }),
|
|
3338
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableButton, { editor }),
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HTMLImportButton, { editor })
|
|
3232
3340
|
] })
|
|
3233
3341
|
] });
|
|
3234
|
-
const TwoRowLayout = () => /* @__PURE__ */ (0,
|
|
3235
|
-
/* @__PURE__ */ (0,
|
|
3236
|
-
/* @__PURE__ */ (0,
|
|
3237
|
-
/* @__PURE__ */ (0,
|
|
3238
|
-
/* @__PURE__ */ (0,
|
|
3239
|
-
/* @__PURE__ */ (0,
|
|
3240
|
-
/* @__PURE__ */ (0,
|
|
3241
|
-
/* @__PURE__ */ (0,
|
|
3242
|
-
/* @__PURE__ */ (0,
|
|
3342
|
+
const TwoRowLayout = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3343
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-row", children: [
|
|
3344
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UndoRedoButtons, { editor }),
|
|
3345
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3346
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3347
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "bold" }),
|
|
3348
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "italic" }),
|
|
3349
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "underline" }),
|
|
3350
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TextStyleButton, { editor, style: "strike" })
|
|
3243
3351
|
] }),
|
|
3244
|
-
/* @__PURE__ */ (0,
|
|
3245
|
-
/* @__PURE__ */ (0,
|
|
3246
|
-
/* @__PURE__ */ (0,
|
|
3247
|
-
/* @__PURE__ */ (0,
|
|
3248
|
-
/* @__PURE__ */ (0,
|
|
3352
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3353
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3354
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "left" }),
|
|
3355
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "center" }),
|
|
3356
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlignButton, { editor, alignment: "right" })
|
|
3249
3357
|
] }),
|
|
3250
|
-
/* @__PURE__ */ (0,
|
|
3251
|
-
/* @__PURE__ */ (0,
|
|
3252
|
-
/* @__PURE__ */ (0,
|
|
3253
|
-
/* @__PURE__ */ (0,
|
|
3358
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3359
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3360
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ListButton, { editor, type: "bullet" }),
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ListButton, { editor, type: "numbered" })
|
|
3254
3362
|
] })
|
|
3255
3363
|
] }),
|
|
3256
|
-
/* @__PURE__ */ (0,
|
|
3257
|
-
/* @__PURE__ */ (0,
|
|
3258
|
-
/* @__PURE__ */ (0,
|
|
3259
|
-
/* @__PURE__ */ (0,
|
|
3260
|
-
/* @__PURE__ */ (0,
|
|
3261
|
-
/* @__PURE__ */ (0,
|
|
3262
|
-
/* @__PURE__ */ (0,
|
|
3364
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-row", children: [
|
|
3365
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockTypeSelect, { editor }) }),
|
|
3366
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3367
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3368
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FontSizeButton, { editor }),
|
|
3369
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorButton, { editor, type: "text" }),
|
|
3370
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorButton, { editor, type: "background" })
|
|
3263
3371
|
] }),
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
/* @__PURE__ */ (0,
|
|
3266
|
-
/* @__PURE__ */ (0,
|
|
3267
|
-
/* @__PURE__ */ (0,
|
|
3268
|
-
/* @__PURE__ */ (0,
|
|
3269
|
-
/* @__PURE__ */ (0,
|
|
3372
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolbarDivider, {}),
|
|
3373
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumir-toolbar-group", children: [
|
|
3374
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageButton, { editor, onImageUpload }),
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkButton, { editor }),
|
|
3376
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableButton, { editor }),
|
|
3377
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HTMLImportButton, { editor })
|
|
3270
3378
|
] })
|
|
3271
3379
|
] })
|
|
3272
3380
|
] });
|
|
3273
|
-
return /* @__PURE__ */ (0,
|
|
3381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3274
3382
|
"div",
|
|
3275
3383
|
{
|
|
3276
3384
|
ref: wrapperRef,
|
|
@@ -3280,7 +3388,7 @@ var FloatingMenu = ({
|
|
|
3280
3388
|
className
|
|
3281
3389
|
),
|
|
3282
3390
|
"data-position": position,
|
|
3283
|
-
children: /* @__PURE__ */ (0,
|
|
3391
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3284
3392
|
"div",
|
|
3285
3393
|
{
|
|
3286
3394
|
className: cn(
|
|
@@ -3289,7 +3397,7 @@ var FloatingMenu = ({
|
|
|
3289
3397
|
isMinimizable && "is-minimizable",
|
|
3290
3398
|
isMinimized && "is-minimized"
|
|
3291
3399
|
),
|
|
3292
|
-
children: isMinimizable ? /* @__PURE__ */ (0,
|
|
3400
|
+
children: isMinimizable ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MinimizedLayout, {}) : isCompact ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TwoRowLayout, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SingleRowLayout, {})
|
|
3293
3401
|
}
|
|
3294
3402
|
)
|
|
3295
3403
|
}
|
|
@@ -3389,8 +3497,8 @@ var LumirEditorError = class _LumirEditorError extends Error {
|
|
|
3389
3497
|
};
|
|
3390
3498
|
|
|
3391
3499
|
// src/extensions/VerticalAlignmentExtension.ts
|
|
3392
|
-
var
|
|
3393
|
-
var VerticalAlignmentExtension =
|
|
3500
|
+
var import_core5 = require("@tiptap/core");
|
|
3501
|
+
var VerticalAlignmentExtension = import_core5.Extension.create({
|
|
3394
3502
|
name: "verticalAlignment",
|
|
3395
3503
|
addGlobalAttributes() {
|
|
3396
3504
|
return [
|
|
@@ -3421,7 +3529,7 @@ var VerticalAlignmentExtension = import_core4.Extension.create({
|
|
|
3421
3529
|
});
|
|
3422
3530
|
|
|
3423
3531
|
// src/extensions/RowHeightExtension.ts
|
|
3424
|
-
var
|
|
3532
|
+
var import_core6 = require("@tiptap/core");
|
|
3425
3533
|
|
|
3426
3534
|
// src/extensions/rowResizing.ts
|
|
3427
3535
|
var import_prosemirror_state3 = require("prosemirror-state");
|
|
@@ -4009,7 +4117,7 @@ function tableCellAttrPreserve() {
|
|
|
4009
4117
|
}
|
|
4010
4118
|
|
|
4011
4119
|
// src/extensions/RowHeightExtension.ts
|
|
4012
|
-
var RowHeightExtension =
|
|
4120
|
+
var RowHeightExtension = import_core6.Extension.create({
|
|
4013
4121
|
name: "rowHeight",
|
|
4014
4122
|
addOptions() {
|
|
4015
4123
|
return { resizable: true };
|
|
@@ -4055,7 +4163,7 @@ var RowHeightExtension = import_core5.Extension.create({
|
|
|
4055
4163
|
});
|
|
4056
4164
|
|
|
4057
4165
|
// src/extensions/TableAlignmentExtension.ts
|
|
4058
|
-
var
|
|
4166
|
+
var import_core7 = require("@tiptap/core");
|
|
4059
4167
|
var import_prosemirror_state6 = require("prosemirror-state");
|
|
4060
4168
|
var import_prosemirror_view4 = require("prosemirror-view");
|
|
4061
4169
|
var tableAlignmentDecoKey = new import_prosemirror_state6.PluginKey("lumirTableAlignmentDeco");
|
|
@@ -4084,7 +4192,7 @@ function tableAlignmentDecorationPlugin() {
|
|
|
4084
4192
|
}
|
|
4085
4193
|
});
|
|
4086
4194
|
}
|
|
4087
|
-
var TableAlignmentExtension =
|
|
4195
|
+
var TableAlignmentExtension = import_core7.Extension.create({
|
|
4088
4196
|
name: "tableAlignment",
|
|
4089
4197
|
addGlobalAttributes() {
|
|
4090
4198
|
return [
|
|
@@ -4111,9 +4219,9 @@ var TableAlignmentExtension = import_core6.Extension.create({
|
|
|
4111
4219
|
});
|
|
4112
4220
|
|
|
4113
4221
|
// src/extensions/TableSelectAllExtension.ts
|
|
4114
|
-
var
|
|
4222
|
+
var import_core8 = require("@tiptap/core");
|
|
4115
4223
|
var import_prosemirror_tables3 = require("prosemirror-tables");
|
|
4116
|
-
var TableSelectAllExtension =
|
|
4224
|
+
var TableSelectAllExtension = import_core8.Extension.create({
|
|
4117
4225
|
name: "lumirTableSelectAll",
|
|
4118
4226
|
priority: 1e3,
|
|
4119
4227
|
addKeyboardShortcuts() {
|
|
@@ -4201,18 +4309,18 @@ function insertTwoColumns(editor, showDivider = false) {
|
|
|
4201
4309
|
}
|
|
4202
4310
|
|
|
4203
4311
|
// src/components/CustomFormattingToolbar.tsx
|
|
4204
|
-
var
|
|
4312
|
+
var import_react29 = require("@blocknote/react");
|
|
4205
4313
|
|
|
4206
4314
|
// src/components/TextAlignButtonWithVA.tsx
|
|
4207
|
-
var
|
|
4208
|
-
var
|
|
4209
|
-
var
|
|
4210
|
-
var
|
|
4315
|
+
var import_core9 = require("@blocknote/core");
|
|
4316
|
+
var import_react19 = require("react");
|
|
4317
|
+
var import_react20 = require("@blocknote/react");
|
|
4318
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
4211
4319
|
var icons = {
|
|
4212
|
-
left: /* @__PURE__ */ (0,
|
|
4213
|
-
center: /* @__PURE__ */ (0,
|
|
4214
|
-
right: /* @__PURE__ */ (0,
|
|
4215
|
-
justify: /* @__PURE__ */ (0,
|
|
4320
|
+
left: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
|
|
4321
|
+
center: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
|
|
4322
|
+
right: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
|
|
4323
|
+
justify: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }) })
|
|
4216
4324
|
};
|
|
4217
4325
|
var tooltipMap = {
|
|
4218
4326
|
left: "\uC67C\uCABD \uC815\uB82C",
|
|
@@ -4221,12 +4329,12 @@ var tooltipMap = {
|
|
|
4221
4329
|
justify: "\uC591\uCABD \uC815\uB82C"
|
|
4222
4330
|
};
|
|
4223
4331
|
var TextAlignButtonWithVA = (props) => {
|
|
4224
|
-
const Components = (0,
|
|
4225
|
-
const editor = (0,
|
|
4226
|
-
const selectedBlocks = (0,
|
|
4227
|
-
const textAlignment = (0,
|
|
4332
|
+
const Components = (0, import_react20.useComponentsContext)();
|
|
4333
|
+
const editor = (0, import_react20.useBlockNoteEditor)();
|
|
4334
|
+
const selectedBlocks = (0, import_react20.useSelectedBlocks)(editor);
|
|
4335
|
+
const textAlignment = (0, import_react19.useMemo)(() => {
|
|
4228
4336
|
const block = selectedBlocks[0];
|
|
4229
|
-
if ((0,
|
|
4337
|
+
if ((0, import_core9.checkBlockHasDefaultProp)("textAlignment", block, editor)) {
|
|
4230
4338
|
return block.props.textAlignment;
|
|
4231
4339
|
}
|
|
4232
4340
|
if (block.type === "table") {
|
|
@@ -4235,7 +4343,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
4235
4343
|
return;
|
|
4236
4344
|
}
|
|
4237
4345
|
const allCellsInTable = cellSelection.cells.map(
|
|
4238
|
-
({ row, col }) => (0,
|
|
4346
|
+
({ row, col }) => (0, import_core9.mapTableCell)(
|
|
4239
4347
|
block.content.rows[row].cells[col]
|
|
4240
4348
|
).props.textAlignment
|
|
4241
4349
|
);
|
|
@@ -4246,7 +4354,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
4246
4354
|
}
|
|
4247
4355
|
return;
|
|
4248
4356
|
}, [editor, selectedBlocks]);
|
|
4249
|
-
const setTextAlignment = (0,
|
|
4357
|
+
const setTextAlignment = (0, import_react19.useCallback)(
|
|
4250
4358
|
(newAlignment) => {
|
|
4251
4359
|
editor.focus();
|
|
4252
4360
|
for (const block of selectedBlocks) {
|
|
@@ -4267,7 +4375,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
4267
4375
|
}
|
|
4268
4376
|
}
|
|
4269
4377
|
tiptap.view?.dispatch(tr);
|
|
4270
|
-
} else if ((0,
|
|
4378
|
+
} else if ((0, import_core9.checkBlockTypeHasDefaultProp)("textAlignment", block.type, editor)) {
|
|
4271
4379
|
editor.updateBlock(block, {
|
|
4272
4380
|
props: { textAlignment: newAlignment }
|
|
4273
4381
|
});
|
|
@@ -4276,7 +4384,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
4276
4384
|
},
|
|
4277
4385
|
[editor, selectedBlocks]
|
|
4278
4386
|
);
|
|
4279
|
-
const show = (0,
|
|
4387
|
+
const show = (0, import_react19.useMemo)(() => {
|
|
4280
4388
|
return !!selectedBlocks.find(
|
|
4281
4389
|
(block) => "textAlignment" in block.props || block.type === "table" && block.children
|
|
4282
4390
|
);
|
|
@@ -4284,7 +4392,7 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
4284
4392
|
if (!show || !editor.isEditable) {
|
|
4285
4393
|
return null;
|
|
4286
4394
|
}
|
|
4287
|
-
return /* @__PURE__ */ (0,
|
|
4395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4288
4396
|
Components.FormattingToolbar.Button,
|
|
4289
4397
|
{
|
|
4290
4398
|
className: "bn-button",
|
|
@@ -4299,21 +4407,21 @@ var TextAlignButtonWithVA = (props) => {
|
|
|
4299
4407
|
};
|
|
4300
4408
|
|
|
4301
4409
|
// src/components/VerticalAlignButton.tsx
|
|
4302
|
-
var
|
|
4303
|
-
var
|
|
4304
|
-
var
|
|
4410
|
+
var import_react21 = require("react");
|
|
4411
|
+
var import_react22 = require("@blocknote/react");
|
|
4412
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
4305
4413
|
var icons2 = {
|
|
4306
|
-
top: /* @__PURE__ */ (0,
|
|
4307
|
-
/* @__PURE__ */ (0,
|
|
4308
|
-
/* @__PURE__ */ (0,
|
|
4414
|
+
top: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
4415
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
4416
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { x1: "5", y1: "5", x2: "11", y2: "5" })
|
|
4309
4417
|
] }),
|
|
4310
|
-
middle: /* @__PURE__ */ (0,
|
|
4311
|
-
/* @__PURE__ */ (0,
|
|
4312
|
-
/* @__PURE__ */ (0,
|
|
4418
|
+
middle: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
4419
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
4420
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { x1: "5", y1: "8", x2: "11", y2: "8" })
|
|
4313
4421
|
] }),
|
|
4314
|
-
bottom: /* @__PURE__ */ (0,
|
|
4315
|
-
/* @__PURE__ */ (0,
|
|
4316
|
-
/* @__PURE__ */ (0,
|
|
4422
|
+
bottom: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
4423
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
|
|
4424
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { x1: "5", y1: "11", x2: "11", y2: "11" })
|
|
4317
4425
|
] })
|
|
4318
4426
|
};
|
|
4319
4427
|
var tooltips = {
|
|
@@ -4335,13 +4443,13 @@ function getCurrentVerticalAlignment(editor) {
|
|
|
4335
4443
|
return alignments.every((a) => a === first) ? first : void 0;
|
|
4336
4444
|
}
|
|
4337
4445
|
var VerticalAlignButton = (props) => {
|
|
4338
|
-
const Components = (0,
|
|
4339
|
-
const editor = (0,
|
|
4340
|
-
const selectedBlocks = (0,
|
|
4341
|
-
const currentAlignment = (0,
|
|
4446
|
+
const Components = (0, import_react22.useComponentsContext)();
|
|
4447
|
+
const editor = (0, import_react22.useBlockNoteEditor)();
|
|
4448
|
+
const selectedBlocks = (0, import_react22.useSelectedBlocks)(editor);
|
|
4449
|
+
const currentAlignment = (0, import_react21.useMemo)(() => {
|
|
4342
4450
|
return getCurrentVerticalAlignment(editor);
|
|
4343
4451
|
}, [editor, selectedBlocks]);
|
|
4344
|
-
const setVerticalAlignment = (0,
|
|
4452
|
+
const setVerticalAlignment = (0, import_react21.useCallback)(
|
|
4345
4453
|
(alignment) => {
|
|
4346
4454
|
const tiptap = editor._tiptapEditor;
|
|
4347
4455
|
if (!tiptap) return;
|
|
@@ -4363,13 +4471,13 @@ var VerticalAlignButton = (props) => {
|
|
|
4363
4471
|
},
|
|
4364
4472
|
[editor]
|
|
4365
4473
|
);
|
|
4366
|
-
const isInTable = (0,
|
|
4474
|
+
const isInTable = (0, import_react21.useMemo)(() => {
|
|
4367
4475
|
return selectedBlocks.some((block) => block.type === "table");
|
|
4368
4476
|
}, [selectedBlocks]);
|
|
4369
4477
|
if (!isInTable || !editor.isEditable) {
|
|
4370
4478
|
return null;
|
|
4371
4479
|
}
|
|
4372
|
-
return /* @__PURE__ */ (0,
|
|
4480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4373
4481
|
Components.FormattingToolbar.Button,
|
|
4374
4482
|
{
|
|
4375
4483
|
className: "bn-button",
|
|
@@ -4384,24 +4492,24 @@ var VerticalAlignButton = (props) => {
|
|
|
4384
4492
|
};
|
|
4385
4493
|
|
|
4386
4494
|
// src/components/TableAlignButton.tsx
|
|
4387
|
-
var
|
|
4388
|
-
var
|
|
4389
|
-
var
|
|
4495
|
+
var import_react23 = require("react");
|
|
4496
|
+
var import_react24 = require("@blocknote/react");
|
|
4497
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
4390
4498
|
var icons3 = {
|
|
4391
|
-
left: /* @__PURE__ */ (0,
|
|
4392
|
-
/* @__PURE__ */ (0,
|
|
4393
|
-
/* @__PURE__ */ (0,
|
|
4394
|
-
/* @__PURE__ */ (0,
|
|
4499
|
+
left: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
|
|
4500
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "1.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
|
|
4501
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
|
|
4502
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
|
|
4395
4503
|
] }),
|
|
4396
|
-
center: /* @__PURE__ */ (0,
|
|
4397
|
-
/* @__PURE__ */ (0,
|
|
4398
|
-
/* @__PURE__ */ (0,
|
|
4399
|
-
/* @__PURE__ */ (0,
|
|
4504
|
+
center: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
|
|
4505
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "4.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
|
|
4506
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
|
|
4507
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
|
|
4400
4508
|
] }),
|
|
4401
|
-
right: /* @__PURE__ */ (0,
|
|
4402
|
-
/* @__PURE__ */ (0,
|
|
4403
|
-
/* @__PURE__ */ (0,
|
|
4404
|
-
/* @__PURE__ */ (0,
|
|
4509
|
+
right: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
|
|
4510
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "7.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
|
|
4511
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
|
|
4512
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
|
|
4405
4513
|
] })
|
|
4406
4514
|
};
|
|
4407
4515
|
var tooltips2 = {
|
|
@@ -4410,18 +4518,18 @@ var tooltips2 = {
|
|
|
4410
4518
|
right: "\uD45C \uC624\uB978\uCABD \uC815\uB82C"
|
|
4411
4519
|
};
|
|
4412
4520
|
var TableAlignButton = (props) => {
|
|
4413
|
-
const Components = (0,
|
|
4414
|
-
const editor = (0,
|
|
4415
|
-
const selectedBlocks = (0,
|
|
4416
|
-
const tableBlock = (0,
|
|
4521
|
+
const Components = (0, import_react24.useComponentsContext)();
|
|
4522
|
+
const editor = (0, import_react24.useBlockNoteEditor)();
|
|
4523
|
+
const selectedBlocks = (0, import_react24.useSelectedBlocks)(editor);
|
|
4524
|
+
const tableBlock = (0, import_react23.useMemo)(
|
|
4417
4525
|
() => selectedBlocks.find((block) => block.type === "table"),
|
|
4418
4526
|
[selectedBlocks]
|
|
4419
4527
|
);
|
|
4420
|
-
const current = (0,
|
|
4528
|
+
const current = (0, import_react23.useMemo)(() => {
|
|
4421
4529
|
if (!tableBlock?.id) return "left";
|
|
4422
4530
|
return getTableAlignment(editor, tableBlock.id);
|
|
4423
4531
|
}, [editor, tableBlock, selectedBlocks]);
|
|
4424
|
-
const apply = (0,
|
|
4532
|
+
const apply = (0, import_react23.useCallback)(() => {
|
|
4425
4533
|
if (!tableBlock?.id) return;
|
|
4426
4534
|
editor.focus();
|
|
4427
4535
|
setTableAlignment(editor, tableBlock.id, props.alignment);
|
|
@@ -4429,7 +4537,7 @@ var TableAlignButton = (props) => {
|
|
|
4429
4537
|
if (!tableBlock || !editor.isEditable) {
|
|
4430
4538
|
return null;
|
|
4431
4539
|
}
|
|
4432
|
-
return /* @__PURE__ */ (0,
|
|
4540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
4433
4541
|
Components.FormattingToolbar.Button,
|
|
4434
4542
|
{
|
|
4435
4543
|
className: "bn-button",
|
|
@@ -4444,13 +4552,13 @@ var TableAlignButton = (props) => {
|
|
|
4444
4552
|
};
|
|
4445
4553
|
|
|
4446
4554
|
// src/components/FontSizeButton.tsx
|
|
4447
|
-
var
|
|
4448
|
-
var
|
|
4449
|
-
var
|
|
4555
|
+
var import_react25 = require("@blocknote/react");
|
|
4556
|
+
var import_react26 = require("react");
|
|
4557
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
4450
4558
|
var DEFAULT_LABEL2 = "\uAE30\uBCF8";
|
|
4451
4559
|
var toLabel2 = (size) => size.replace(/px$/, "");
|
|
4452
4560
|
function FontSizeIcon({ size }) {
|
|
4453
|
-
return /* @__PURE__ */ (0,
|
|
4561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4454
4562
|
"span",
|
|
4455
4563
|
{
|
|
4456
4564
|
style: {
|
|
@@ -4465,21 +4573,26 @@ function FontSizeIcon({ size }) {
|
|
|
4465
4573
|
);
|
|
4466
4574
|
}
|
|
4467
4575
|
function FontSizeButton2() {
|
|
4468
|
-
const Components = (0,
|
|
4469
|
-
const editor = (0,
|
|
4576
|
+
const Components = (0, import_react25.useComponentsContext)();
|
|
4577
|
+
const editor = (0, import_react25.useBlockNoteEditor)();
|
|
4470
4578
|
const ed = editor;
|
|
4471
4579
|
const styleSchema = editor.schema.styleSchema;
|
|
4472
4580
|
const fontSizeInSchema = styleSchema.fontSize?.type === "fontSize" && styleSchema.fontSize?.propSchema === "string";
|
|
4473
|
-
const selectedBlocks = (0,
|
|
4474
|
-
const [currentSize, setCurrentSize] = (0,
|
|
4581
|
+
const selectedBlocks = (0, import_react25.useSelectedBlocks)(editor);
|
|
4582
|
+
const [currentSize, setCurrentSize] = (0, import_react26.useState)(
|
|
4475
4583
|
fontSizeInSchema ? ed.getActiveStyles().fontSize || "" : ""
|
|
4476
4584
|
);
|
|
4477
|
-
(0,
|
|
4585
|
+
(0, import_react25.useEditorContentOrSelectionChange)(() => {
|
|
4478
4586
|
if (fontSizeInSchema) {
|
|
4479
4587
|
setCurrentSize(ed.getActiveStyles().fontSize || "");
|
|
4480
4588
|
}
|
|
4481
4589
|
}, editor);
|
|
4482
|
-
const
|
|
4590
|
+
const currentPx = parseFontSizePx(currentSize);
|
|
4591
|
+
const [inputValue, setInputValue] = (0, import_react26.useState)(String(currentPx));
|
|
4592
|
+
(0, import_react26.useEffect)(() => {
|
|
4593
|
+
setInputValue(String(currentPx));
|
|
4594
|
+
}, [currentPx]);
|
|
4595
|
+
const setFontSize = (0, import_react26.useCallback)(
|
|
4483
4596
|
(size) => {
|
|
4484
4597
|
size === "" ? ed.removeStyles({ fontSize: "" }) : ed.addStyles({ fontSize: size });
|
|
4485
4598
|
setTimeout(() => editor.focus());
|
|
@@ -4487,7 +4600,22 @@ function FontSizeButton2() {
|
|
|
4487
4600
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4488
4601
|
[editor]
|
|
4489
4602
|
);
|
|
4490
|
-
const
|
|
4603
|
+
const stepBy = (0, import_react26.useCallback)(
|
|
4604
|
+
(delta) => {
|
|
4605
|
+
ed.addStyles({ fontSize: toFontSizeValue(currentPx + delta) });
|
|
4606
|
+
},
|
|
4607
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4608
|
+
[currentPx]
|
|
4609
|
+
);
|
|
4610
|
+
const applyInput = (0, import_react26.useCallback)(() => {
|
|
4611
|
+
const n = parseInt(inputValue, 10);
|
|
4612
|
+
if (Number.isFinite(n)) {
|
|
4613
|
+
ed.addStyles({ fontSize: toFontSizeValue(n) });
|
|
4614
|
+
} else {
|
|
4615
|
+
setInputValue(String(currentPx));
|
|
4616
|
+
}
|
|
4617
|
+
}, [inputValue, currentPx]);
|
|
4618
|
+
const show = (0, import_react26.useMemo)(() => {
|
|
4491
4619
|
if (!fontSizeInSchema) {
|
|
4492
4620
|
return false;
|
|
4493
4621
|
}
|
|
@@ -4502,20 +4630,76 @@ function FontSizeButton2() {
|
|
|
4502
4630
|
return null;
|
|
4503
4631
|
}
|
|
4504
4632
|
const tooltip = "\uAE00\uC790 \uD06C\uAE30";
|
|
4505
|
-
|
|
4506
|
-
|
|
4633
|
+
const preventBlur = (e) => e.preventDefault();
|
|
4634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Components.Generic.Menu.Root, { children: [
|
|
4635
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4507
4636
|
Components.FormattingToolbar.Button,
|
|
4508
4637
|
{
|
|
4509
4638
|
className: "bn-button",
|
|
4510
4639
|
"data-test": "font-size",
|
|
4511
4640
|
label: tooltip,
|
|
4512
4641
|
mainTooltip: tooltip,
|
|
4513
|
-
icon: /* @__PURE__ */ (0,
|
|
4642
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FontSizeIcon, { size: currentSize })
|
|
4514
4643
|
}
|
|
4515
4644
|
) }),
|
|
4516
|
-
/* @__PURE__ */ (0,
|
|
4517
|
-
/* @__PURE__ */ (0,
|
|
4518
|
-
/* @__PURE__ */ (0,
|
|
4645
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Components.Generic.Menu.Dropdown, { className: "bn-menu-dropdown", children: [
|
|
4646
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Components.Generic.Menu.Label, { children: "\uAE00\uC790 \uD06C\uAE30" }),
|
|
4647
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "lumir-fs-stepper", children: [
|
|
4648
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4649
|
+
"button",
|
|
4650
|
+
{
|
|
4651
|
+
type: "button",
|
|
4652
|
+
className: "lumir-fs-stepper-btn",
|
|
4653
|
+
"aria-label": "\uAE00\uC790 \uD06C\uAE30 1px \uC904\uC774\uAE30",
|
|
4654
|
+
"data-test": "font-size-decrease",
|
|
4655
|
+
disabled: currentPx <= FONT_SIZE_MIN,
|
|
4656
|
+
onMouseDown: preventBlur,
|
|
4657
|
+
onClick: () => stepBy(-1),
|
|
4658
|
+
children: "\u2212"
|
|
4659
|
+
}
|
|
4660
|
+
),
|
|
4661
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4662
|
+
"input",
|
|
4663
|
+
{
|
|
4664
|
+
className: "lumir-fs-stepper-input",
|
|
4665
|
+
type: "text",
|
|
4666
|
+
inputMode: "numeric",
|
|
4667
|
+
"aria-label": "\uAE00\uC790 \uD06C\uAE30 \uC785\uB825",
|
|
4668
|
+
"data-test": "font-size-input",
|
|
4669
|
+
value: inputValue,
|
|
4670
|
+
onChange: (e) => setInputValue(e.target.value.replace(/[^0-9]/g, "")),
|
|
4671
|
+
onClick: (e) => e.stopPropagation(),
|
|
4672
|
+
onKeyDown: (e) => {
|
|
4673
|
+
e.stopPropagation();
|
|
4674
|
+
if (e.key === "Enter") {
|
|
4675
|
+
e.preventDefault();
|
|
4676
|
+
applyInput();
|
|
4677
|
+
} else if (e.key === "ArrowUp") {
|
|
4678
|
+
e.preventDefault();
|
|
4679
|
+
stepBy(1);
|
|
4680
|
+
} else if (e.key === "ArrowDown") {
|
|
4681
|
+
e.preventDefault();
|
|
4682
|
+
stepBy(-1);
|
|
4683
|
+
}
|
|
4684
|
+
},
|
|
4685
|
+
onBlur: applyInput
|
|
4686
|
+
}
|
|
4687
|
+
),
|
|
4688
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4689
|
+
"button",
|
|
4690
|
+
{
|
|
4691
|
+
type: "button",
|
|
4692
|
+
className: "lumir-fs-stepper-btn",
|
|
4693
|
+
"aria-label": "\uAE00\uC790 \uD06C\uAE30 1px \uB298\uB9AC\uAE30",
|
|
4694
|
+
"data-test": "font-size-increase",
|
|
4695
|
+
disabled: currentPx >= FONT_SIZE_MAX,
|
|
4696
|
+
onMouseDown: preventBlur,
|
|
4697
|
+
onClick: () => stepBy(1),
|
|
4698
|
+
children: "+"
|
|
4699
|
+
}
|
|
4700
|
+
)
|
|
4701
|
+
] }),
|
|
4702
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4519
4703
|
Components.Generic.Menu.Item,
|
|
4520
4704
|
{
|
|
4521
4705
|
onClick: () => setFontSize(""),
|
|
@@ -4525,7 +4709,7 @@ function FontSizeButton2() {
|
|
|
4525
4709
|
},
|
|
4526
4710
|
"font-size-default"
|
|
4527
4711
|
),
|
|
4528
|
-
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ (0,
|
|
4712
|
+
FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4529
4713
|
Components.Generic.Menu.Item,
|
|
4530
4714
|
{
|
|
4531
4715
|
onClick: () => setFontSize(size),
|
|
@@ -4540,10 +4724,10 @@ function FontSizeButton2() {
|
|
|
4540
4724
|
}
|
|
4541
4725
|
|
|
4542
4726
|
// src/components/color/LumirColorControls.tsx
|
|
4543
|
-
var
|
|
4544
|
-
var
|
|
4545
|
-
var
|
|
4546
|
-
var
|
|
4727
|
+
var import_core10 = require("@blocknote/core");
|
|
4728
|
+
var import_react27 = require("@blocknote/react");
|
|
4729
|
+
var import_react28 = require("react");
|
|
4730
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4547
4731
|
var COLORS = [
|
|
4548
4732
|
"default",
|
|
4549
4733
|
"gray",
|
|
@@ -4560,7 +4744,7 @@ function ColorIcon(props) {
|
|
|
4560
4744
|
const textColor = props.textColor || "default";
|
|
4561
4745
|
const backgroundColor = props.backgroundColor || "default";
|
|
4562
4746
|
const size = props.size || 16;
|
|
4563
|
-
return /* @__PURE__ */ (0,
|
|
4747
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4564
4748
|
"div",
|
|
4565
4749
|
{
|
|
4566
4750
|
className: "bn-color-icon",
|
|
@@ -4579,7 +4763,7 @@ function ColorIcon(props) {
|
|
|
4579
4763
|
);
|
|
4580
4764
|
}
|
|
4581
4765
|
function CellFillIcon({ size = 18 }) {
|
|
4582
|
-
return /* @__PURE__ */ (0,
|
|
4766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4583
4767
|
"svg",
|
|
4584
4768
|
{
|
|
4585
4769
|
width: size,
|
|
@@ -4588,17 +4772,17 @@ function CellFillIcon({ size = 18 }) {
|
|
|
4588
4772
|
fill: "currentColor",
|
|
4589
4773
|
style: { pointerEvents: "none" },
|
|
4590
4774
|
"aria-hidden": "true",
|
|
4591
|
-
children: /* @__PURE__ */ (0,
|
|
4775
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M16.56 8.94 7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" })
|
|
4592
4776
|
}
|
|
4593
4777
|
);
|
|
4594
4778
|
}
|
|
4595
4779
|
function LumirColorPicker(props) {
|
|
4596
|
-
const Components = (0,
|
|
4597
|
-
const dict = (0,
|
|
4598
|
-
return /* @__PURE__ */ (0,
|
|
4599
|
-
props.text ? /* @__PURE__ */ (0,
|
|
4600
|
-
/* @__PURE__ */ (0,
|
|
4601
|
-
COLORS.map((color) => /* @__PURE__ */ (0,
|
|
4780
|
+
const Components = (0, import_react27.useComponentsContext)();
|
|
4781
|
+
const dict = (0, import_react27.useDictionary)();
|
|
4782
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4783
|
+
props.text ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4784
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
|
|
4785
|
+
COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4602
4786
|
Components.Generic.Menu.Item,
|
|
4603
4787
|
{
|
|
4604
4788
|
onClick: () => {
|
|
@@ -4606,16 +4790,16 @@ function LumirColorPicker(props) {
|
|
|
4606
4790
|
props.text.setColor(color);
|
|
4607
4791
|
},
|
|
4608
4792
|
"data-test": "text-color-" + color,
|
|
4609
|
-
icon: /* @__PURE__ */ (0,
|
|
4793
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorIcon, { textColor: color, size: props.iconSize }),
|
|
4610
4794
|
checked: props.text.color === color,
|
|
4611
4795
|
children: dict.color_picker.colors[color]
|
|
4612
4796
|
},
|
|
4613
4797
|
"text-color-" + color
|
|
4614
4798
|
))
|
|
4615
4799
|
] }) : null,
|
|
4616
|
-
props.background ? /* @__PURE__ */ (0,
|
|
4617
|
-
/* @__PURE__ */ (0,
|
|
4618
|
-
COLORS.map((color) => /* @__PURE__ */ (0,
|
|
4800
|
+
props.background ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
4801
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
|
|
4802
|
+
COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4619
4803
|
Components.Generic.Menu.Item,
|
|
4620
4804
|
{
|
|
4621
4805
|
onClick: () => {
|
|
@@ -4623,7 +4807,7 @@ function LumirColorPicker(props) {
|
|
|
4623
4807
|
props.background.setColor(color);
|
|
4624
4808
|
},
|
|
4625
4809
|
"data-test": "background-color-" + color,
|
|
4626
|
-
icon: /* @__PURE__ */ (0,
|
|
4810
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorIcon, { backgroundColor: color, size: props.iconSize }),
|
|
4627
4811
|
checked: props.background.color === color,
|
|
4628
4812
|
children: dict.color_picker.colors[color]
|
|
4629
4813
|
},
|
|
@@ -4633,20 +4817,20 @@ function LumirColorPicker(props) {
|
|
|
4633
4817
|
] });
|
|
4634
4818
|
}
|
|
4635
4819
|
function LumirColorStyleButton() {
|
|
4636
|
-
const Components = (0,
|
|
4637
|
-
const editor = (0,
|
|
4820
|
+
const Components = (0, import_react27.useComponentsContext)();
|
|
4821
|
+
const editor = (0, import_react27.useBlockNoteEditor)();
|
|
4638
4822
|
const ed = editor;
|
|
4639
4823
|
const styleSchema = editor.schema.styleSchema;
|
|
4640
4824
|
const textColorInSchema = styleSchema.textColor?.type === "textColor" && styleSchema.textColor?.propSchema === "string";
|
|
4641
4825
|
const backgroundColorInSchema = styleSchema.backgroundColor?.type === "backgroundColor" && styleSchema.backgroundColor?.propSchema === "string";
|
|
4642
|
-
const selectedBlocks = (0,
|
|
4643
|
-
const [currentTextColor, setCurrentTextColor] = (0,
|
|
4826
|
+
const selectedBlocks = (0, import_react27.useSelectedBlocks)(editor);
|
|
4827
|
+
const [currentTextColor, setCurrentTextColor] = (0, import_react28.useState)(
|
|
4644
4828
|
textColorInSchema ? ed.getActiveStyles().textColor || "default" : "default"
|
|
4645
4829
|
);
|
|
4646
|
-
const [currentBackgroundColor, setCurrentBackgroundColor] = (0,
|
|
4830
|
+
const [currentBackgroundColor, setCurrentBackgroundColor] = (0, import_react28.useState)(
|
|
4647
4831
|
backgroundColorInSchema ? ed.getActiveStyles().backgroundColor || "default" : "default"
|
|
4648
4832
|
);
|
|
4649
|
-
(0,
|
|
4833
|
+
(0, import_react27.useEditorContentOrSelectionChange)(() => {
|
|
4650
4834
|
const active = ed.getActiveStyles();
|
|
4651
4835
|
if (textColorInSchema) {
|
|
4652
4836
|
setCurrentTextColor(active.textColor || "default");
|
|
@@ -4655,7 +4839,7 @@ function LumirColorStyleButton() {
|
|
|
4655
4839
|
setCurrentBackgroundColor(active.backgroundColor || "default");
|
|
4656
4840
|
}
|
|
4657
4841
|
}, editor);
|
|
4658
|
-
const setTextColor = (0,
|
|
4842
|
+
const setTextColor = (0, import_react28.useCallback)(
|
|
4659
4843
|
(color) => {
|
|
4660
4844
|
color === "default" ? ed.removeStyles({ textColor: color }) : ed.addStyles({ textColor: color });
|
|
4661
4845
|
setTimeout(() => editor.focus());
|
|
@@ -4663,7 +4847,7 @@ function LumirColorStyleButton() {
|
|
|
4663
4847
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4664
4848
|
[editor]
|
|
4665
4849
|
);
|
|
4666
|
-
const setBackgroundColor = (0,
|
|
4850
|
+
const setBackgroundColor = (0, import_react28.useCallback)(
|
|
4667
4851
|
(color) => {
|
|
4668
4852
|
color === "default" ? ed.removeStyles({ backgroundColor: color }) : ed.addStyles({ backgroundColor: color });
|
|
4669
4853
|
setTimeout(() => editor.focus());
|
|
@@ -4671,7 +4855,7 @@ function LumirColorStyleButton() {
|
|
|
4671
4855
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4672
4856
|
[editor]
|
|
4673
4857
|
);
|
|
4674
|
-
const show = (0,
|
|
4858
|
+
const show = (0, import_react28.useMemo)(() => {
|
|
4675
4859
|
if (!textColorInSchema && !backgroundColorInSchema) {
|
|
4676
4860
|
return false;
|
|
4677
4861
|
}
|
|
@@ -4686,15 +4870,15 @@ function LumirColorStyleButton() {
|
|
|
4686
4870
|
return null;
|
|
4687
4871
|
}
|
|
4688
4872
|
const tooltip = "\uD14D\uC2A4\uD2B8 \uC0C9\xB7\uBC30\uACBD";
|
|
4689
|
-
return /* @__PURE__ */ (0,
|
|
4690
|
-
/* @__PURE__ */ (0,
|
|
4873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Components.Generic.Menu.Root, { children: [
|
|
4874
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4691
4875
|
Components.FormattingToolbar.Button,
|
|
4692
4876
|
{
|
|
4693
4877
|
className: "bn-button",
|
|
4694
4878
|
"data-test": "colors",
|
|
4695
4879
|
label: tooltip,
|
|
4696
4880
|
mainTooltip: tooltip,
|
|
4697
|
-
icon: /* @__PURE__ */ (0,
|
|
4881
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4698
4882
|
ColorIcon,
|
|
4699
4883
|
{
|
|
4700
4884
|
textColor: currentTextColor,
|
|
@@ -4704,11 +4888,11 @@ function LumirColorStyleButton() {
|
|
|
4704
4888
|
)
|
|
4705
4889
|
}
|
|
4706
4890
|
) }),
|
|
4707
|
-
/* @__PURE__ */ (0,
|
|
4891
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4708
4892
|
Components.Generic.Menu.Dropdown,
|
|
4709
4893
|
{
|
|
4710
4894
|
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
4711
|
-
children: /* @__PURE__ */ (0,
|
|
4895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4712
4896
|
LumirColorPicker,
|
|
4713
4897
|
{
|
|
4714
4898
|
textTitle: "\uD14D\uC2A4\uD2B8 \uC0C9",
|
|
@@ -4722,18 +4906,18 @@ function LumirColorStyleButton() {
|
|
|
4722
4906
|
] });
|
|
4723
4907
|
}
|
|
4724
4908
|
function LumirCellColorToolbarButton() {
|
|
4725
|
-
const Components = (0,
|
|
4726
|
-
const editor = (0,
|
|
4727
|
-
const selectedBlocks = (0,
|
|
4728
|
-
const isMultiCell = (0,
|
|
4909
|
+
const Components = (0, import_react27.useComponentsContext)();
|
|
4910
|
+
const editor = (0, import_react27.useBlockNoteEditor)();
|
|
4911
|
+
const selectedBlocks = (0, import_react27.useSelectedBlocks)(editor);
|
|
4912
|
+
const isMultiCell = (0, import_react28.useMemo)(() => {
|
|
4729
4913
|
if (selectedBlocks.length !== 1 || selectedBlocks[0].type !== "table") {
|
|
4730
4914
|
return false;
|
|
4731
4915
|
}
|
|
4732
4916
|
const cs = editor.tableHandles?.getCellSelection();
|
|
4733
4917
|
return !!cs && cs.cells.length > 1;
|
|
4734
4918
|
}, [editor, selectedBlocks]);
|
|
4735
|
-
const stashRef = (0,
|
|
4736
|
-
const applyBackground = (0,
|
|
4919
|
+
const stashRef = (0, import_react28.useRef)([]);
|
|
4920
|
+
const applyBackground = (0, import_react28.useCallback)(
|
|
4737
4921
|
(color) => {
|
|
4738
4922
|
const live = getSelectedCellPositions(editor);
|
|
4739
4923
|
const positions = live.length > 0 ? live : stashRef.current;
|
|
@@ -4746,7 +4930,7 @@ function LumirCellColorToolbarButton() {
|
|
|
4746
4930
|
return null;
|
|
4747
4931
|
}
|
|
4748
4932
|
const tooltip = "\uC140 \uBC30\uACBD\uC0C9";
|
|
4749
|
-
return /* @__PURE__ */ (0,
|
|
4933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4750
4934
|
Components.Generic.Menu.Root,
|
|
4751
4935
|
{
|
|
4752
4936
|
onOpenChange: (open) => {
|
|
@@ -4755,21 +4939,21 @@ function LumirCellColorToolbarButton() {
|
|
|
4755
4939
|
}
|
|
4756
4940
|
},
|
|
4757
4941
|
children: [
|
|
4758
|
-
/* @__PURE__ */ (0,
|
|
4942
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4759
4943
|
Components.FormattingToolbar.Button,
|
|
4760
4944
|
{
|
|
4761
4945
|
className: "bn-button",
|
|
4762
4946
|
"data-test": "cell-colors",
|
|
4763
4947
|
label: tooltip,
|
|
4764
4948
|
mainTooltip: tooltip,
|
|
4765
|
-
icon: /* @__PURE__ */ (0,
|
|
4949
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CellFillIcon, { size: 18 })
|
|
4766
4950
|
}
|
|
4767
4951
|
) }),
|
|
4768
|
-
/* @__PURE__ */ (0,
|
|
4952
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4769
4953
|
Components.Generic.Menu.Dropdown,
|
|
4770
4954
|
{
|
|
4771
4955
|
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
4772
|
-
children: /* @__PURE__ */ (0,
|
|
4956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4773
4957
|
LumirColorPicker,
|
|
4774
4958
|
{
|
|
4775
4959
|
backgroundTitle: "\uC140 \uBC30\uACBD",
|
|
@@ -4783,12 +4967,12 @@ function LumirCellColorToolbarButton() {
|
|
|
4783
4967
|
);
|
|
4784
4968
|
}
|
|
4785
4969
|
function LumirCellColorPickerButton(props) {
|
|
4786
|
-
const Components = (0,
|
|
4787
|
-
const editor = (0,
|
|
4970
|
+
const Components = (0, import_react27.useComponentsContext)();
|
|
4971
|
+
const editor = (0, import_react27.useBlockNoteEditor)();
|
|
4788
4972
|
const updateColor = (color, type) => {
|
|
4789
4973
|
const newTable = props.block.content.rows.map((row) => ({
|
|
4790
4974
|
...row,
|
|
4791
|
-
cells: row.cells.map((cell) => (0,
|
|
4975
|
+
cells: row.cells.map((cell) => (0, import_core10.mapTableCell)(cell))
|
|
4792
4976
|
}));
|
|
4793
4977
|
if (type === "text") {
|
|
4794
4978
|
newTable[props.rowIndex].cells[props.colIndex].props.textColor = color;
|
|
@@ -4805,25 +4989,25 @@ function LumirCellColorPickerButton(props) {
|
|
|
4805
4989
|
if (!currentCell || editor.settings.tables.cellTextColor === false && editor.settings.tables.cellBackgroundColor === false) {
|
|
4806
4990
|
return null;
|
|
4807
4991
|
}
|
|
4808
|
-
return /* @__PURE__ */ (0,
|
|
4809
|
-
/* @__PURE__ */ (0,
|
|
4810
|
-
/* @__PURE__ */ (0,
|
|
4992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
|
|
4993
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
|
|
4994
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4811
4995
|
Components.Generic.Menu.Dropdown,
|
|
4812
4996
|
{
|
|
4813
4997
|
sub: true,
|
|
4814
4998
|
className: "bn-menu-dropdown bn-color-picker-dropdown",
|
|
4815
|
-
children: /* @__PURE__ */ (0,
|
|
4999
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4816
5000
|
LumirColorPicker,
|
|
4817
5001
|
{
|
|
4818
5002
|
iconSize: 18,
|
|
4819
5003
|
textTitle: "\uC140 \uAE00\uC790\uC0C9",
|
|
4820
5004
|
backgroundTitle: "\uC140 \uBC30\uACBD",
|
|
4821
5005
|
text: editor.settings.tables.cellTextColor ? {
|
|
4822
|
-
color: (0,
|
|
5006
|
+
color: (0, import_core10.isTableCell)(currentCell) ? currentCell.props.textColor : "default",
|
|
4823
5007
|
setColor: (color) => updateColor(color, "text")
|
|
4824
5008
|
} : void 0,
|
|
4825
5009
|
background: editor.settings.tables.cellBackgroundColor ? {
|
|
4826
|
-
color: (0,
|
|
5010
|
+
color: (0, import_core10.isTableCell)(currentCell) ? currentCell.props.backgroundColor : "default",
|
|
4827
5011
|
setColor: (color) => updateColor(color, "background")
|
|
4828
5012
|
} : void 0
|
|
4829
5013
|
}
|
|
@@ -4833,21 +5017,21 @@ function LumirCellColorPickerButton(props) {
|
|
|
4833
5017
|
] });
|
|
4834
5018
|
}
|
|
4835
5019
|
function LumirTableCellMenu(props) {
|
|
4836
|
-
const Components = (0,
|
|
4837
|
-
return /* @__PURE__ */ (0,
|
|
5020
|
+
const Components = (0, import_react27.useComponentsContext)();
|
|
5021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4838
5022
|
Components.Generic.Menu.Dropdown,
|
|
4839
5023
|
{
|
|
4840
5024
|
className: "bn-menu-dropdown bn-drag-handle-menu",
|
|
4841
|
-
children: props.children || /* @__PURE__ */ (0,
|
|
4842
|
-
/* @__PURE__ */ (0,
|
|
4843
|
-
|
|
5025
|
+
children: props.children || /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5026
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
5027
|
+
import_react27.SplitButton,
|
|
4844
5028
|
{
|
|
4845
5029
|
block: props.block,
|
|
4846
5030
|
rowIndex: props.rowIndex,
|
|
4847
5031
|
colIndex: props.colIndex
|
|
4848
5032
|
}
|
|
4849
5033
|
),
|
|
4850
|
-
/* @__PURE__ */ (0,
|
|
5034
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4851
5035
|
LumirCellColorPickerButton,
|
|
4852
5036
|
{
|
|
4853
5037
|
block: props.block,
|
|
@@ -4861,99 +5045,99 @@ function LumirTableCellMenu(props) {
|
|
|
4861
5045
|
}
|
|
4862
5046
|
|
|
4863
5047
|
// src/components/CustomFormattingToolbar.tsx
|
|
4864
|
-
var
|
|
5048
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4865
5049
|
var CustomFormattingToolbar = () => {
|
|
4866
|
-
return /* @__PURE__ */ (0,
|
|
4867
|
-
/* @__PURE__ */ (0,
|
|
4868
|
-
/* @__PURE__ */ (0,
|
|
4869
|
-
/* @__PURE__ */ (0,
|
|
4870
|
-
/* @__PURE__ */ (0,
|
|
4871
|
-
/* @__PURE__ */ (0,
|
|
4872
|
-
/* @__PURE__ */ (0,
|
|
4873
|
-
/* @__PURE__ */ (0,
|
|
4874
|
-
/* @__PURE__ */ (0,
|
|
4875
|
-
/* @__PURE__ */ (0,
|
|
4876
|
-
/* @__PURE__ */ (0,
|
|
4877
|
-
|
|
5050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react29.FormattingToolbar, { children: [
|
|
5051
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.BlockTypeSelect, {}, "blockTypeSelect"),
|
|
5052
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.TableCellMergeButton, {}, "tableCellMergeButton"),
|
|
5053
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.FileCaptionButton, {}, "fileCaptionButton"),
|
|
5054
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.FileReplaceButton, {}, "replaceFileButton"),
|
|
5055
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.FileRenameButton, {}, "fileRenameButton"),
|
|
5056
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.FileDeleteButton, {}, "fileDeleteButton"),
|
|
5057
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.FileDownloadButton, {}, "fileDownloadButton"),
|
|
5058
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.FilePreviewButton, {}, "filePreviewButton"),
|
|
5059
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
|
|
5060
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5061
|
+
import_react29.BasicTextStyleButton,
|
|
4878
5062
|
{
|
|
4879
5063
|
basicTextStyle: "italic"
|
|
4880
5064
|
},
|
|
4881
5065
|
"italicStyleButton"
|
|
4882
5066
|
),
|
|
4883
|
-
/* @__PURE__ */ (0,
|
|
4884
|
-
|
|
5067
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5068
|
+
import_react29.BasicTextStyleButton,
|
|
4885
5069
|
{
|
|
4886
5070
|
basicTextStyle: "underline"
|
|
4887
5071
|
},
|
|
4888
5072
|
"underlineStyleButton"
|
|
4889
5073
|
),
|
|
4890
|
-
/* @__PURE__ */ (0,
|
|
4891
|
-
|
|
5074
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
5075
|
+
import_react29.BasicTextStyleButton,
|
|
4892
5076
|
{
|
|
4893
5077
|
basicTextStyle: "strike"
|
|
4894
5078
|
},
|
|
4895
5079
|
"strikeStyleButton"
|
|
4896
5080
|
),
|
|
4897
|
-
/* @__PURE__ */ (0,
|
|
4898
|
-
/* @__PURE__ */ (0,
|
|
5081
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
|
|
5082
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4899
5083
|
TextAlignButtonWithVA,
|
|
4900
5084
|
{
|
|
4901
5085
|
textAlignment: "center"
|
|
4902
5086
|
},
|
|
4903
5087
|
"textAlignCenterButton"
|
|
4904
5088
|
),
|
|
4905
|
-
/* @__PURE__ */ (0,
|
|
4906
|
-
/* @__PURE__ */ (0,
|
|
5089
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
|
|
5090
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4907
5091
|
VerticalAlignButton,
|
|
4908
5092
|
{
|
|
4909
5093
|
verticalAlignment: "top"
|
|
4910
5094
|
},
|
|
4911
5095
|
"verticalAlignTop"
|
|
4912
5096
|
),
|
|
4913
|
-
/* @__PURE__ */ (0,
|
|
5097
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4914
5098
|
VerticalAlignButton,
|
|
4915
5099
|
{
|
|
4916
5100
|
verticalAlignment: "middle"
|
|
4917
5101
|
},
|
|
4918
5102
|
"verticalAlignMiddle"
|
|
4919
5103
|
),
|
|
4920
|
-
/* @__PURE__ */ (0,
|
|
5104
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4921
5105
|
VerticalAlignButton,
|
|
4922
5106
|
{
|
|
4923
5107
|
verticalAlignment: "bottom"
|
|
4924
5108
|
},
|
|
4925
5109
|
"verticalAlignBottom"
|
|
4926
5110
|
),
|
|
4927
|
-
/* @__PURE__ */ (0,
|
|
4928
|
-
/* @__PURE__ */ (0,
|
|
4929
|
-
/* @__PURE__ */ (0,
|
|
4930
|
-
/* @__PURE__ */ (0,
|
|
4931
|
-
/* @__PURE__ */ (0,
|
|
4932
|
-
/* @__PURE__ */ (0,
|
|
4933
|
-
/* @__PURE__ */ (0,
|
|
4934
|
-
/* @__PURE__ */ (0,
|
|
4935
|
-
/* @__PURE__ */ (0,
|
|
5111
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableAlignButton, { alignment: "left" }, "tableAlignLeft"),
|
|
5112
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableAlignButton, { alignment: "center" }, "tableAlignCenter"),
|
|
5113
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableAlignButton, { alignment: "right" }, "tableAlignRight"),
|
|
5114
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FontSizeButton2, {}, "fontSizeButton"),
|
|
5115
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LumirColorStyleButton, {}, "colorStyleButton"),
|
|
5116
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LumirCellColorToolbarButton, {}, "cellColorButton"),
|
|
5117
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.NestBlockButton, {}, "nestBlockButton"),
|
|
5118
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.UnnestBlockButton, {}, "unnestBlockButton"),
|
|
5119
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react29.CreateLinkButton, {}, "createLinkButton")
|
|
4936
5120
|
] });
|
|
4937
5121
|
};
|
|
4938
5122
|
|
|
4939
5123
|
// src/components/LumirDragHandleMenu.tsx
|
|
4940
|
-
var
|
|
4941
|
-
var
|
|
5124
|
+
var import_react30 = require("@blocknote/react");
|
|
5125
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
4942
5126
|
var TABLE_ALIGN_ICONS = {
|
|
4943
|
-
left: /* @__PURE__ */ (0,
|
|
4944
|
-
/* @__PURE__ */ (0,
|
|
4945
|
-
/* @__PURE__ */ (0,
|
|
4946
|
-
/* @__PURE__ */ (0,
|
|
5127
|
+
left: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
|
|
5128
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { x: "1.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
|
|
5129
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
|
|
5130
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
|
|
4947
5131
|
] }),
|
|
4948
|
-
center: /* @__PURE__ */ (0,
|
|
4949
|
-
/* @__PURE__ */ (0,
|
|
4950
|
-
/* @__PURE__ */ (0,
|
|
4951
|
-
/* @__PURE__ */ (0,
|
|
5132
|
+
center: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
|
|
5133
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { x: "4.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
|
|
5134
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
|
|
5135
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
|
|
4952
5136
|
] }),
|
|
4953
|
-
right: /* @__PURE__ */ (0,
|
|
4954
|
-
/* @__PURE__ */ (0,
|
|
4955
|
-
/* @__PURE__ */ (0,
|
|
4956
|
-
/* @__PURE__ */ (0,
|
|
5137
|
+
right: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
|
|
5138
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { x: "7.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
|
|
5139
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
|
|
5140
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
|
|
4957
5141
|
] })
|
|
4958
5142
|
};
|
|
4959
5143
|
var TABLE_ALIGN_LABELS = {
|
|
@@ -4962,13 +5146,13 @@ var TABLE_ALIGN_LABELS = {
|
|
|
4962
5146
|
right: "\uD45C \uC624\uB978\uCABD \uC815\uB82C"
|
|
4963
5147
|
};
|
|
4964
5148
|
function TableAlignmentItems(props) {
|
|
4965
|
-
const Components = (0,
|
|
4966
|
-
const editor = (0,
|
|
5149
|
+
const Components = (0, import_react30.useComponentsContext)();
|
|
5150
|
+
const editor = (0, import_react30.useBlockNoteEditor)();
|
|
4967
5151
|
if (props.block?.type !== "table" || !props.block?.id) {
|
|
4968
5152
|
return null;
|
|
4969
5153
|
}
|
|
4970
5154
|
const current = getTableAlignment(editor, props.block.id);
|
|
4971
|
-
return /* @__PURE__ */ (0,
|
|
5155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: ["left", "center", "right"].map((align) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
4972
5156
|
Components.Generic.Menu.Item,
|
|
4973
5157
|
{
|
|
4974
5158
|
icon: TABLE_ALIGN_ICONS[align],
|
|
@@ -4983,39 +5167,39 @@ function TableAlignmentItems(props) {
|
|
|
4983
5167
|
)) });
|
|
4984
5168
|
}
|
|
4985
5169
|
var LumirDragHandleMenu = (props) => {
|
|
4986
|
-
const dict = (0,
|
|
4987
|
-
return /* @__PURE__ */ (0,
|
|
4988
|
-
/* @__PURE__ */ (0,
|
|
4989
|
-
/* @__PURE__ */ (0,
|
|
4990
|
-
/* @__PURE__ */ (0,
|
|
4991
|
-
/* @__PURE__ */ (0,
|
|
4992
|
-
/* @__PURE__ */ (0,
|
|
5170
|
+
const dict = (0, import_react30.useDictionary)();
|
|
5171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react30.DragHandleMenu, { ...props, children: [
|
|
5172
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.RemoveBlockItem, { ...props, children: dict.drag_handle.delete_menuitem }),
|
|
5173
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.BlockColorsItem, { ...props, children: dict.drag_handle.colors_menuitem }),
|
|
5174
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.TableRowHeaderItem, { ...props, children: dict.drag_handle.header_row_menuitem }),
|
|
5175
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.TableColumnHeaderItem, { ...props, children: dict.drag_handle.header_column_menuitem }),
|
|
5176
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TableAlignmentItems, { block: props.block })
|
|
4993
5177
|
] });
|
|
4994
5178
|
};
|
|
4995
5179
|
|
|
4996
5180
|
// src/components/LumirTableHandlesController.tsx
|
|
4997
|
-
var
|
|
4998
|
-
var
|
|
4999
|
-
var
|
|
5181
|
+
var import_react33 = require("@blocknote/react");
|
|
5182
|
+
var import_react34 = require("@floating-ui/react");
|
|
5183
|
+
var import_react35 = require("react");
|
|
5000
5184
|
|
|
5001
5185
|
// src/components/hooks/useFocusedCellHandlePositioning.ts
|
|
5002
|
-
var
|
|
5003
|
-
var
|
|
5186
|
+
var import_react31 = require("@floating-ui/react");
|
|
5187
|
+
var import_react32 = require("react");
|
|
5004
5188
|
function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
5005
|
-
const { refs, floatingStyles, context, update } = (0,
|
|
5189
|
+
const { refs, floatingStyles, context, update } = (0, import_react31.useFloating)({
|
|
5006
5190
|
open: show,
|
|
5007
5191
|
placement: orientation === "row" ? "left" : orientation === "col" ? "top" : orientation === "corner" ? "bottom-start" : "right",
|
|
5008
5192
|
// col/row/cell: 가장자리에 14px hit-area 중앙 정렬(-7).
|
|
5009
5193
|
// corner: 18px hit-zone이 표 우하단 모서리에 걸치도록 위/좌로 살짝 당김(모서리 hover 자연).
|
|
5010
5194
|
middleware: [
|
|
5011
|
-
(0,
|
|
5195
|
+
(0, import_react31.offset)(
|
|
5012
5196
|
orientation === "corner" ? { mainAxis: -6, crossAxis: -6 } : -7
|
|
5013
5197
|
)
|
|
5014
5198
|
],
|
|
5015
|
-
whileElementsMounted:
|
|
5199
|
+
whileElementsMounted: import_react31.autoUpdate
|
|
5016
5200
|
});
|
|
5017
|
-
const { isMounted, styles } = (0,
|
|
5018
|
-
(0,
|
|
5201
|
+
const { isMounted, styles } = (0, import_react31.useTransitionStyles)(context);
|
|
5202
|
+
(0, import_react32.useEffect)(() => {
|
|
5019
5203
|
if (!show || !tbodyEl) {
|
|
5020
5204
|
return;
|
|
5021
5205
|
}
|
|
@@ -5023,7 +5207,7 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
|
5023
5207
|
ro.observe(tbodyEl);
|
|
5024
5208
|
return () => ro.disconnect();
|
|
5025
5209
|
}, [show, tbodyEl, update]);
|
|
5026
|
-
(0,
|
|
5210
|
+
(0, import_react32.useEffect)(() => {
|
|
5027
5211
|
if (!cellEl) {
|
|
5028
5212
|
refs.setReference(null);
|
|
5029
5213
|
return;
|
|
@@ -5046,7 +5230,7 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
|
5046
5230
|
}
|
|
5047
5231
|
});
|
|
5048
5232
|
}, [cellEl, tbodyEl, orientation, refs]);
|
|
5049
|
-
return (0,
|
|
5233
|
+
return (0, import_react32.useMemo)(
|
|
5050
5234
|
() => ({
|
|
5051
5235
|
isMounted,
|
|
5052
5236
|
ref: refs.setFloating,
|
|
@@ -5060,15 +5244,15 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
|
|
|
5060
5244
|
);
|
|
5061
5245
|
}
|
|
5062
5246
|
function useTableCornerPositioning(referencePosTable, show) {
|
|
5063
|
-
const { refs, floatingStyles, context } = (0,
|
|
5247
|
+
const { refs, floatingStyles, context } = (0, import_react31.useFloating)({
|
|
5064
5248
|
open: show,
|
|
5065
5249
|
placement: "bottom-start",
|
|
5066
5250
|
// 18px hit-zone을 모서리에서 안쪽(위/좌)으로 당겨 표 위에 걸치게 한다.
|
|
5067
|
-
middleware: [(0,
|
|
5068
|
-
whileElementsMounted:
|
|
5251
|
+
middleware: [(0, import_react31.offset)({ mainAxis: -12, crossAxis: -12 })],
|
|
5252
|
+
whileElementsMounted: import_react31.autoUpdate
|
|
5069
5253
|
});
|
|
5070
|
-
const { isMounted, styles } = (0,
|
|
5071
|
-
(0,
|
|
5254
|
+
const { isMounted, styles } = (0, import_react31.useTransitionStyles)(context);
|
|
5255
|
+
(0, import_react32.useEffect)(() => {
|
|
5072
5256
|
if (!referencePosTable) {
|
|
5073
5257
|
refs.setReference(null);
|
|
5074
5258
|
return;
|
|
@@ -5077,7 +5261,7 @@ function useTableCornerPositioning(referencePosTable, show) {
|
|
|
5077
5261
|
getBoundingClientRect: () => new DOMRect(referencePosTable.right, referencePosTable.bottom, 0, 0)
|
|
5078
5262
|
});
|
|
5079
5263
|
}, [referencePosTable, refs]);
|
|
5080
|
-
return (0,
|
|
5264
|
+
return (0, import_react32.useMemo)(
|
|
5081
5265
|
() => ({
|
|
5082
5266
|
isMounted,
|
|
5083
5267
|
ref: refs.setFloating,
|
|
@@ -5088,7 +5272,7 @@ function useTableCornerPositioning(referencePosTable, show) {
|
|
|
5088
5272
|
}
|
|
5089
5273
|
|
|
5090
5274
|
// src/components/LumirTableHandlesController.tsx
|
|
5091
|
-
var
|
|
5275
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
5092
5276
|
function syncCoreHoverToFocusedCell(cellEl) {
|
|
5093
5277
|
const r = cellEl.getBoundingClientRect();
|
|
5094
5278
|
cellEl.dispatchEvent(
|
|
@@ -5102,18 +5286,18 @@ function syncCoreHoverToFocusedCell(cellEl) {
|
|
|
5102
5286
|
);
|
|
5103
5287
|
}
|
|
5104
5288
|
function LumirTableHandlesController() {
|
|
5105
|
-
const editor = (0,
|
|
5106
|
-
const [focused, setFocused] = (0,
|
|
5107
|
-
const [menuContainerRef, setMenuContainerRef] = (0,
|
|
5108
|
-
const [overlayEl, setOverlayEl] = (0,
|
|
5109
|
-
const [openMenu, setOpenMenu] = (0,
|
|
5110
|
-
const frozenRef = (0,
|
|
5111
|
-
const menuOpenRef = (0,
|
|
5112
|
-
const draggingRef = (0,
|
|
5113
|
-
(0,
|
|
5289
|
+
const editor = (0, import_react33.useBlockNoteEditor)();
|
|
5290
|
+
const [focused, setFocused] = (0, import_react35.useState)(null);
|
|
5291
|
+
const [menuContainerRef, setMenuContainerRef] = (0, import_react35.useState)(null);
|
|
5292
|
+
const [overlayEl, setOverlayEl] = (0, import_react35.useState)(null);
|
|
5293
|
+
const [openMenu, setOpenMenu] = (0, import_react35.useState)(null);
|
|
5294
|
+
const frozenRef = (0, import_react35.useRef)(false);
|
|
5295
|
+
const menuOpenRef = (0, import_react35.useRef)(false);
|
|
5296
|
+
const draggingRef = (0, import_react35.useRef)(false);
|
|
5297
|
+
(0, import_react35.useEffect)(() => {
|
|
5114
5298
|
editor.__lumirActiveTableId = focused?.block?.id ?? null;
|
|
5115
5299
|
}, [editor, focused]);
|
|
5116
|
-
const recompute = (0,
|
|
5300
|
+
const recompute = (0, import_react35.useCallback)(() => {
|
|
5117
5301
|
if (frozenRef.current) {
|
|
5118
5302
|
return;
|
|
5119
5303
|
}
|
|
@@ -5161,11 +5345,11 @@ function LumirTableHandlesController() {
|
|
|
5161
5345
|
widgetContainer
|
|
5162
5346
|
});
|
|
5163
5347
|
}, [editor]);
|
|
5164
|
-
(0,
|
|
5165
|
-
(0,
|
|
5348
|
+
(0, import_react33.useEditorContentOrSelectionChange)(recompute, editor);
|
|
5349
|
+
(0, import_react35.useEffect)(() => {
|
|
5166
5350
|
recompute();
|
|
5167
5351
|
}, [recompute]);
|
|
5168
|
-
(0,
|
|
5352
|
+
(0, import_react35.useEffect)(() => {
|
|
5169
5353
|
const onUp = () => {
|
|
5170
5354
|
requestAnimationFrame(() => {
|
|
5171
5355
|
if (!menuOpenRef.current && !draggingRef.current && frozenRef.current) {
|
|
@@ -5177,7 +5361,7 @@ function LumirTableHandlesController() {
|
|
|
5177
5361
|
window.addEventListener("pointerup", onUp);
|
|
5178
5362
|
return () => window.removeEventListener("pointerup", onUp);
|
|
5179
5363
|
}, [recompute]);
|
|
5180
|
-
(0,
|
|
5364
|
+
(0, import_react35.useEffect)(() => {
|
|
5181
5365
|
const f = focused;
|
|
5182
5366
|
if (!f || !overlayEl) {
|
|
5183
5367
|
return;
|
|
@@ -5202,7 +5386,7 @@ function LumirTableHandlesController() {
|
|
|
5202
5386
|
overlayEl.style.height = `${bottom - top}px`;
|
|
5203
5387
|
};
|
|
5204
5388
|
update();
|
|
5205
|
-
const stopAutoUpdate = (0,
|
|
5389
|
+
const stopAutoUpdate = (0, import_react34.autoUpdate)(f.cellEl, overlayEl, update);
|
|
5206
5390
|
const ro = new ResizeObserver(update);
|
|
5207
5391
|
ro.observe(f.tbodyEl);
|
|
5208
5392
|
return () => {
|
|
@@ -5222,25 +5406,25 @@ function LumirTableHandlesController() {
|
|
|
5222
5406
|
show
|
|
5223
5407
|
);
|
|
5224
5408
|
const th = editor.tableHandles;
|
|
5225
|
-
const coreState = (0,
|
|
5409
|
+
const coreState = (0, import_react33.useUIPluginState)(
|
|
5226
5410
|
editor.tableHandles.onUpdate.bind(editor.tableHandles)
|
|
5227
5411
|
);
|
|
5228
|
-
const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = (0,
|
|
5412
|
+
const { addOrRemoveColumnsButton, addOrRemoveRowsButton } = (0, import_react33.useExtendButtonsPositioning)(
|
|
5229
5413
|
coreState?.showAddOrRemoveColumnsButton || false,
|
|
5230
5414
|
coreState?.showAddOrRemoveRowsButton || false,
|
|
5231
5415
|
coreState?.referencePosTable || null
|
|
5232
5416
|
);
|
|
5233
|
-
const onStartExtend = (0,
|
|
5417
|
+
const onStartExtend = (0, import_react35.useCallback)(() => {
|
|
5234
5418
|
editor.tableHandles?.freezeHandles();
|
|
5235
5419
|
}, [editor]);
|
|
5236
|
-
const onEndExtend = (0,
|
|
5420
|
+
const onEndExtend = (0, import_react35.useCallback)(() => {
|
|
5237
5421
|
editor.tableHandles?.unfreezeHandles();
|
|
5238
5422
|
}, [editor]);
|
|
5239
5423
|
const tableCorner = useTableCornerPositioning(
|
|
5240
5424
|
coreState?.referencePosTable ?? null,
|
|
5241
5425
|
!!coreState?.widgetContainer
|
|
5242
5426
|
);
|
|
5243
|
-
const menuHandlers = (0,
|
|
5427
|
+
const menuHandlers = (0, import_react35.useMemo)(() => {
|
|
5244
5428
|
const mk = (kind) => ({
|
|
5245
5429
|
freeze: () => {
|
|
5246
5430
|
menuOpenRef.current = true;
|
|
@@ -5258,10 +5442,10 @@ function LumirTableHandlesController() {
|
|
|
5258
5442
|
});
|
|
5259
5443
|
return { col: mk("col"), row: mk("row"), cell: mk("cell") };
|
|
5260
5444
|
}, [editor, recompute]);
|
|
5261
|
-
const onGutterPointerDown = (0,
|
|
5445
|
+
const onGutterPointerDown = (0, import_react35.useCallback)(() => {
|
|
5262
5446
|
frozenRef.current = true;
|
|
5263
5447
|
}, []);
|
|
5264
|
-
const onGutterPointerEnter = (0,
|
|
5448
|
+
const onGutterPointerEnter = (0, import_react35.useCallback)(
|
|
5265
5449
|
(e) => {
|
|
5266
5450
|
if (e.buttons === 0 && focused) {
|
|
5267
5451
|
syncCoreHoverToFocusedCell(focused.cellEl);
|
|
@@ -5269,7 +5453,7 @@ function LumirTableHandlesController() {
|
|
|
5269
5453
|
},
|
|
5270
5454
|
[focused]
|
|
5271
5455
|
);
|
|
5272
|
-
const makeDragStart = (0,
|
|
5456
|
+
const makeDragStart = (0, import_react35.useCallback)(
|
|
5273
5457
|
(dir) => (e) => {
|
|
5274
5458
|
draggingRef.current = true;
|
|
5275
5459
|
frozenRef.current = true;
|
|
@@ -5281,15 +5465,15 @@ function LumirTableHandlesController() {
|
|
|
5281
5465
|
},
|
|
5282
5466
|
[editor]
|
|
5283
5467
|
);
|
|
5284
|
-
const onDragEnd = (0,
|
|
5468
|
+
const onDragEnd = (0, import_react35.useCallback)(() => {
|
|
5285
5469
|
editor.tableHandles?.dragEnd();
|
|
5286
5470
|
draggingRef.current = false;
|
|
5287
5471
|
frozenRef.current = false;
|
|
5288
5472
|
recompute();
|
|
5289
5473
|
}, [editor, recompute]);
|
|
5290
|
-
const noop = (0,
|
|
5474
|
+
const noop = (0, import_react35.useCallback)(() => {
|
|
5291
5475
|
}, []);
|
|
5292
|
-
const onScaleStart = (0,
|
|
5476
|
+
const onScaleStart = (0, import_react35.useCallback)(
|
|
5293
5477
|
(e) => {
|
|
5294
5478
|
e.preventDefault();
|
|
5295
5479
|
e.stopPropagation();
|
|
@@ -5331,11 +5515,11 @@ function LumirTableHandlesController() {
|
|
|
5331
5515
|
},
|
|
5332
5516
|
[editor, coreState]
|
|
5333
5517
|
);
|
|
5334
|
-
return /* @__PURE__ */ (0,
|
|
5335
|
-
/* @__PURE__ */ (0,
|
|
5336
|
-
th && focused && menuContainerRef && /* @__PURE__ */ (0,
|
|
5337
|
-
/* @__PURE__ */ (0,
|
|
5338
|
-
colHandle.isMounted && /* @__PURE__ */ (0,
|
|
5518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
5519
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: setMenuContainerRef }),
|
|
5520
|
+
th && focused && menuContainerRef && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react34.FloatingPortal, { root: focused.widgetContainer, children: [
|
|
5521
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
|
|
5522
|
+
colHandle.isMounted && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5339
5523
|
"div",
|
|
5340
5524
|
{
|
|
5341
5525
|
ref: colHandle.ref,
|
|
@@ -5344,9 +5528,9 @@ function LumirTableHandlesController() {
|
|
|
5344
5528
|
onPointerEnter: onGutterPointerEnter,
|
|
5345
5529
|
onPointerDown: onGutterPointerDown,
|
|
5346
5530
|
children: [
|
|
5347
|
-
/* @__PURE__ */ (0,
|
|
5348
|
-
/* @__PURE__ */ (0,
|
|
5349
|
-
|
|
5531
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "lumir-tbl-gutter" }),
|
|
5532
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5533
|
+
import_react33.TableHandle,
|
|
5350
5534
|
{
|
|
5351
5535
|
editor,
|
|
5352
5536
|
orientation: "column",
|
|
@@ -5364,7 +5548,7 @@ function LumirTableHandlesController() {
|
|
|
5364
5548
|
]
|
|
5365
5549
|
}
|
|
5366
5550
|
),
|
|
5367
|
-
rowHandle.isMounted && /* @__PURE__ */ (0,
|
|
5551
|
+
rowHandle.isMounted && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5368
5552
|
"div",
|
|
5369
5553
|
{
|
|
5370
5554
|
ref: rowHandle.ref,
|
|
@@ -5373,9 +5557,9 @@ function LumirTableHandlesController() {
|
|
|
5373
5557
|
onPointerEnter: onGutterPointerEnter,
|
|
5374
5558
|
onPointerDown: onGutterPointerDown,
|
|
5375
5559
|
children: [
|
|
5376
|
-
/* @__PURE__ */ (0,
|
|
5377
|
-
/* @__PURE__ */ (0,
|
|
5378
|
-
|
|
5560
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "lumir-tbl-gutter" }),
|
|
5561
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5562
|
+
import_react33.TableHandle,
|
|
5379
5563
|
{
|
|
5380
5564
|
editor,
|
|
5381
5565
|
orientation: "row",
|
|
@@ -5393,7 +5577,7 @@ function LumirTableHandlesController() {
|
|
|
5393
5577
|
]
|
|
5394
5578
|
}
|
|
5395
5579
|
),
|
|
5396
|
-
cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ (0,
|
|
5580
|
+
cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5397
5581
|
"div",
|
|
5398
5582
|
{
|
|
5399
5583
|
ref: cellHandle.ref,
|
|
@@ -5401,9 +5585,9 @@ function LumirTableHandlesController() {
|
|
|
5401
5585
|
className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--cell" + (openMenu === "cell" ? " lumir-tbl-gutter-wrap--active" : ""),
|
|
5402
5586
|
onPointerDown: onGutterPointerDown,
|
|
5403
5587
|
children: [
|
|
5404
|
-
/* @__PURE__ */ (0,
|
|
5405
|
-
/* @__PURE__ */ (0,
|
|
5406
|
-
|
|
5588
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "lumir-tbl-gutter" }),
|
|
5589
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5590
|
+
import_react33.TableCellButton,
|
|
5407
5591
|
{
|
|
5408
5592
|
editor,
|
|
5409
5593
|
rowIndex: focused.rowIndex,
|
|
@@ -5419,9 +5603,9 @@ function LumirTableHandlesController() {
|
|
|
5419
5603
|
}
|
|
5420
5604
|
)
|
|
5421
5605
|
] }),
|
|
5422
|
-
th && coreState?.widgetContainer && /* @__PURE__ */ (0,
|
|
5423
|
-
/* @__PURE__ */ (0,
|
|
5424
|
-
|
|
5606
|
+
th && coreState?.widgetContainer && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react34.FloatingPortal, { root: coreState.widgetContainer, children: [
|
|
5607
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5608
|
+
import_react33.ExtendButton,
|
|
5425
5609
|
{
|
|
5426
5610
|
editor,
|
|
5427
5611
|
orientation: "addOrRemoveRows",
|
|
@@ -5430,13 +5614,13 @@ function LumirTableHandlesController() {
|
|
|
5430
5614
|
onMouseUp: onEndExtend
|
|
5431
5615
|
}
|
|
5432
5616
|
) }),
|
|
5433
|
-
/* @__PURE__ */ (0,
|
|
5617
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5434
5618
|
"div",
|
|
5435
5619
|
{
|
|
5436
5620
|
ref: addOrRemoveColumnsButton.ref,
|
|
5437
5621
|
style: addOrRemoveColumnsButton.style,
|
|
5438
|
-
children: /* @__PURE__ */ (0,
|
|
5439
|
-
|
|
5622
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5623
|
+
import_react33.ExtendButton,
|
|
5440
5624
|
{
|
|
5441
5625
|
editor,
|
|
5442
5626
|
orientation: "addOrRemoveColumns",
|
|
@@ -5447,7 +5631,7 @@ function LumirTableHandlesController() {
|
|
|
5447
5631
|
)
|
|
5448
5632
|
}
|
|
5449
5633
|
),
|
|
5450
|
-
tableCorner.isMounted && /* @__PURE__ */ (0,
|
|
5634
|
+
tableCorner.isMounted && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5451
5635
|
"div",
|
|
5452
5636
|
{
|
|
5453
5637
|
ref: tableCorner.ref,
|
|
@@ -6200,7 +6384,7 @@ function applyFittedWidthsToNewTables(editor, beforeIds, perTable) {
|
|
|
6200
6384
|
}
|
|
6201
6385
|
|
|
6202
6386
|
// src/components/LumirEditor.tsx
|
|
6203
|
-
var
|
|
6387
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
6204
6388
|
var DEBUG_LOG = (loc, msg, data) => {
|
|
6205
6389
|
const p = fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
|
|
6206
6390
|
method: "POST",
|
|
@@ -6431,9 +6615,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
|
|
|
6431
6615
|
return null;
|
|
6432
6616
|
};
|
|
6433
6617
|
var ConvertToPreviewButton = ({ url }) => {
|
|
6434
|
-
const editor = (0,
|
|
6435
|
-
const Components = (0,
|
|
6436
|
-
return /* @__PURE__ */ (0,
|
|
6618
|
+
const editor = (0, import_react37.useBlockNoteEditor)();
|
|
6619
|
+
const Components = (0, import_react37.useComponentsContext)();
|
|
6620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
6437
6621
|
Components.LinkToolbar.Button,
|
|
6438
6622
|
{
|
|
6439
6623
|
className: "bn-button",
|
|
@@ -6452,29 +6636,29 @@ var ConvertToPreviewButton = ({ url }) => {
|
|
|
6452
6636
|
console.error("Convert to link preview failed:", err);
|
|
6453
6637
|
}
|
|
6454
6638
|
},
|
|
6455
|
-
icon: /* @__PURE__ */ (0,
|
|
6456
|
-
/* @__PURE__ */ (0,
|
|
6457
|
-
/* @__PURE__ */ (0,
|
|
6458
|
-
/* @__PURE__ */ (0,
|
|
6639
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
6640
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
|
|
6641
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
6642
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
|
|
6459
6643
|
] })
|
|
6460
6644
|
}
|
|
6461
6645
|
);
|
|
6462
6646
|
};
|
|
6463
6647
|
var CustomLinkToolbar = (props) => {
|
|
6464
|
-
const editor = (0,
|
|
6465
|
-
const Components = (0,
|
|
6648
|
+
const editor = (0, import_react37.useBlockNoteEditor)();
|
|
6649
|
+
const Components = (0, import_react37.useComponentsContext)();
|
|
6466
6650
|
const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
|
|
6467
|
-
return /* @__PURE__ */ (0,
|
|
6651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
6468
6652
|
Components.LinkToolbar.Root,
|
|
6469
6653
|
{
|
|
6470
6654
|
className: "bn-toolbar bn-link-toolbar",
|
|
6471
6655
|
onMouseEnter: props.stopHideTimer,
|
|
6472
6656
|
onMouseLeave: props.startHideTimer,
|
|
6473
6657
|
children: [
|
|
6474
|
-
/* @__PURE__ */ (0,
|
|
6475
|
-
/* @__PURE__ */ (0,
|
|
6476
|
-
/* @__PURE__ */ (0,
|
|
6477
|
-
hasLinkPreview && /* @__PURE__ */ (0,
|
|
6658
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
|
|
6659
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.OpenLinkButton, { url: props.url }),
|
|
6660
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.DeleteLinkButton, { deleteLink: props.deleteLink }),
|
|
6661
|
+
hasLinkPreview && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ConvertToPreviewButton, { url: props.url })
|
|
6478
6662
|
]
|
|
6479
6663
|
}
|
|
6480
6664
|
);
|
|
@@ -6519,13 +6703,13 @@ function LumirEditor({
|
|
|
6519
6703
|
onError,
|
|
6520
6704
|
onImageDelete
|
|
6521
6705
|
}) {
|
|
6522
|
-
const [isUploading, setIsUploading] = (0,
|
|
6523
|
-
const [uploadProgress, setUploadProgress] = (0,
|
|
6524
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
6525
|
-
const floatingMenuFileInputRef = (0,
|
|
6526
|
-
const floatingMenuBlockRef = (0,
|
|
6527
|
-
const floatingMenuUploadStartTimeRef = (0,
|
|
6528
|
-
const handleError = (0,
|
|
6706
|
+
const [isUploading, setIsUploading] = (0, import_react36.useState)(false);
|
|
6707
|
+
const [uploadProgress, setUploadProgress] = (0, import_react36.useState)(null);
|
|
6708
|
+
const [errorMessage, setErrorMessage] = (0, import_react36.useState)(null);
|
|
6709
|
+
const floatingMenuFileInputRef = (0, import_react36.useRef)(null);
|
|
6710
|
+
const floatingMenuBlockRef = (0, import_react36.useRef)(null);
|
|
6711
|
+
const floatingMenuUploadStartTimeRef = (0, import_react36.useRef)(0);
|
|
6712
|
+
const handleError = (0, import_react36.useCallback)(
|
|
6529
6713
|
(error) => {
|
|
6530
6714
|
onError?.(error);
|
|
6531
6715
|
setErrorMessage(error.getUserMessage());
|
|
@@ -6533,12 +6717,12 @@ function LumirEditor({
|
|
|
6533
6717
|
},
|
|
6534
6718
|
[onError]
|
|
6535
6719
|
);
|
|
6536
|
-
const validatedContent = (0,
|
|
6720
|
+
const validatedContent = (0, import_react36.useMemo)(() => {
|
|
6537
6721
|
return liftFontSize(
|
|
6538
6722
|
ContentUtils.validateContent(initialContent, initialEmptyBlocks)
|
|
6539
6723
|
);
|
|
6540
6724
|
}, [initialContent, initialEmptyBlocks]);
|
|
6541
|
-
const tableConfig = (0,
|
|
6725
|
+
const tableConfig = (0, import_react36.useMemo)(() => {
|
|
6542
6726
|
return EditorConfig.getDefaultTableConfig(tables);
|
|
6543
6727
|
}, [
|
|
6544
6728
|
tables?.splitCells,
|
|
@@ -6546,10 +6730,10 @@ function LumirEditor({
|
|
|
6546
6730
|
tables?.cellTextColor,
|
|
6547
6731
|
tables?.headers
|
|
6548
6732
|
]);
|
|
6549
|
-
const headingConfig = (0,
|
|
6733
|
+
const headingConfig = (0, import_react36.useMemo)(() => {
|
|
6550
6734
|
return EditorConfig.getDefaultHeadingConfig(heading);
|
|
6551
6735
|
}, [heading?.levels?.join(",") ?? ""]);
|
|
6552
|
-
const disabledExtensions = (0,
|
|
6736
|
+
const disabledExtensions = (0, import_react36.useMemo)(() => {
|
|
6553
6737
|
return EditorConfig.getDisabledExtensions(
|
|
6554
6738
|
disableExtensions,
|
|
6555
6739
|
allowVideoUpload,
|
|
@@ -6557,18 +6741,18 @@ function LumirEditor({
|
|
|
6557
6741
|
allowFileUpload
|
|
6558
6742
|
);
|
|
6559
6743
|
}, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
|
|
6560
|
-
(0,
|
|
6744
|
+
(0, import_react36.useEffect)(() => {
|
|
6561
6745
|
DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
|
|
6562
6746
|
allowVideoUpload,
|
|
6563
6747
|
hasVideoInDisabled: disabledExtensions.includes("video"),
|
|
6564
6748
|
disabledList: disabledExtensions.slice(0, 15)
|
|
6565
6749
|
});
|
|
6566
6750
|
}, [allowVideoUpload, disabledExtensions]);
|
|
6567
|
-
const fileNameTransformRef = (0,
|
|
6568
|
-
(0,
|
|
6751
|
+
const fileNameTransformRef = (0, import_react36.useRef)(s3Upload?.fileNameTransform);
|
|
6752
|
+
(0, import_react36.useEffect)(() => {
|
|
6569
6753
|
fileNameTransformRef.current = s3Upload?.fileNameTransform;
|
|
6570
6754
|
}, [s3Upload?.fileNameTransform]);
|
|
6571
|
-
const memoizedS3Upload = (0,
|
|
6755
|
+
const memoizedS3Upload = (0, import_react36.useMemo)(() => {
|
|
6572
6756
|
if (!s3Upload) return void 0;
|
|
6573
6757
|
return {
|
|
6574
6758
|
apiEndpoint: s3Upload.apiEndpoint,
|
|
@@ -6597,7 +6781,7 @@ function LumirEditor({
|
|
|
6597
6781
|
s3Upload?.maxRetries,
|
|
6598
6782
|
s3Upload?.onProgress
|
|
6599
6783
|
]);
|
|
6600
|
-
const editor = (0,
|
|
6784
|
+
const editor = (0, import_react37.useCreateBlockNote)(
|
|
6601
6785
|
{
|
|
6602
6786
|
// HTML 미리보기 블록이 포함된 커스텀 스키마 사용
|
|
6603
6787
|
schema,
|
|
@@ -6828,12 +7012,12 @@ function LumirEditor({
|
|
|
6828
7012
|
} catch {
|
|
6829
7013
|
}
|
|
6830
7014
|
}
|
|
6831
|
-
(0,
|
|
7015
|
+
(0, import_react36.useEffect)(() => {
|
|
6832
7016
|
if (editor) {
|
|
6833
7017
|
editor.isEditable = editable;
|
|
6834
7018
|
}
|
|
6835
7019
|
}, [editor, editable]);
|
|
6836
|
-
(0,
|
|
7020
|
+
(0, import_react36.useEffect)(() => {
|
|
6837
7021
|
if (!editor) return;
|
|
6838
7022
|
const th = editor.tableHandles;
|
|
6839
7023
|
if (!th || th.__lumirColDelPatched || typeof th.removeRowOrColumn !== "function")
|
|
@@ -6845,7 +7029,7 @@ function LumirEditor({
|
|
|
6845
7029
|
};
|
|
6846
7030
|
th.__lumirColDelPatched = true;
|
|
6847
7031
|
}, [editor]);
|
|
6848
|
-
(0,
|
|
7032
|
+
(0, import_react36.useEffect)(() => {
|
|
6849
7033
|
if (!editor || !floatingMenu) return;
|
|
6850
7034
|
const ft = editor.formattingToolbar;
|
|
6851
7035
|
if (!ft?.onUpdate) return;
|
|
@@ -6858,7 +7042,7 @@ function LumirEditor({
|
|
|
6858
7042
|
});
|
|
6859
7043
|
return unsubscribe;
|
|
6860
7044
|
}, [editor, floatingMenu]);
|
|
6861
|
-
(0,
|
|
7045
|
+
(0, import_react36.useEffect)(() => {
|
|
6862
7046
|
if (!editor || !onContentChange) return;
|
|
6863
7047
|
const handleContentChange = () => {
|
|
6864
7048
|
const blocks = editor.topLevelBlocks;
|
|
@@ -6875,13 +7059,13 @@ function LumirEditor({
|
|
|
6875
7059
|
};
|
|
6876
7060
|
return editor.onEditorContentChange(handleContentChange);
|
|
6877
7061
|
}, [editor, onContentChange]);
|
|
6878
|
-
const previousMediaUrlsRef = (0,
|
|
6879
|
-
(0,
|
|
7062
|
+
const previousMediaUrlsRef = (0, import_react36.useRef)(/* @__PURE__ */ new Set());
|
|
7063
|
+
(0, import_react36.useEffect)(() => {
|
|
6880
7064
|
if (!editor) return;
|
|
6881
7065
|
const initialBlocks = editor.topLevelBlocks;
|
|
6882
7066
|
previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
|
|
6883
7067
|
}, [editor]);
|
|
6884
|
-
(0,
|
|
7068
|
+
(0, import_react36.useEffect)(() => {
|
|
6885
7069
|
if (!editor || !onImageDelete) return;
|
|
6886
7070
|
const handleMediaDeleteCheck = () => {
|
|
6887
7071
|
const currentBlocks = editor.topLevelBlocks;
|
|
@@ -6895,7 +7079,7 @@ function LumirEditor({
|
|
|
6895
7079
|
};
|
|
6896
7080
|
return editor.onEditorContentChange(handleMediaDeleteCheck);
|
|
6897
7081
|
}, [editor, onImageDelete]);
|
|
6898
|
-
(0,
|
|
7082
|
+
(0, import_react36.useEffect)(() => {
|
|
6899
7083
|
const el = editor?.domElement;
|
|
6900
7084
|
if (!el) return;
|
|
6901
7085
|
const handleDragOver = (e) => {
|
|
@@ -7026,13 +7210,13 @@ function LumirEditor({
|
|
|
7026
7210
|
el.removeEventListener("drop", handleDrop, { capture: true });
|
|
7027
7211
|
};
|
|
7028
7212
|
}, [editor, allowVideoUpload]);
|
|
7029
|
-
const computedSideMenu = (0,
|
|
7213
|
+
const computedSideMenu = (0, import_react36.useMemo)(() => {
|
|
7030
7214
|
return sideMenuAddButton ? sideMenu : false;
|
|
7031
7215
|
}, [sideMenuAddButton, sideMenu]);
|
|
7032
|
-
const DragHandleOnlySideMenu = (0,
|
|
7033
|
-
return (props) => /* @__PURE__ */ (0,
|
|
7216
|
+
const DragHandleOnlySideMenu = (0, import_react36.useMemo)(() => {
|
|
7217
|
+
return (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.DragHandleButton, { ...props, dragHandleMenu: LumirDragHandleMenu }) });
|
|
7034
7218
|
}, []);
|
|
7035
|
-
return /* @__PURE__ */ (0,
|
|
7219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
7036
7220
|
"div",
|
|
7037
7221
|
{
|
|
7038
7222
|
className: cn(
|
|
@@ -7042,8 +7226,8 @@ function LumirEditor({
|
|
|
7042
7226
|
),
|
|
7043
7227
|
style: { position: "relative", display: "flex", flexDirection: "column" },
|
|
7044
7228
|
children: [
|
|
7045
|
-
floatingMenu && editor && /* @__PURE__ */ (0,
|
|
7046
|
-
/* @__PURE__ */ (0,
|
|
7229
|
+
floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
7230
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
7047
7231
|
"input",
|
|
7048
7232
|
{
|
|
7049
7233
|
ref: floatingMenuFileInputRef,
|
|
@@ -7114,7 +7298,7 @@ function LumirEditor({
|
|
|
7114
7298
|
}
|
|
7115
7299
|
}
|
|
7116
7300
|
),
|
|
7117
|
-
/* @__PURE__ */ (0,
|
|
7301
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
7118
7302
|
FloatingMenu,
|
|
7119
7303
|
{
|
|
7120
7304
|
editor,
|
|
@@ -7146,7 +7330,7 @@ function LumirEditor({
|
|
|
7146
7330
|
}
|
|
7147
7331
|
)
|
|
7148
7332
|
] }),
|
|
7149
|
-
/* @__PURE__ */ (0,
|
|
7333
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
7150
7334
|
import_mantine.BlockNoteView,
|
|
7151
7335
|
{
|
|
7152
7336
|
editor,
|
|
@@ -7161,21 +7345,21 @@ function LumirEditor({
|
|
|
7161
7345
|
tableHandles: false,
|
|
7162
7346
|
onSelectionChange,
|
|
7163
7347
|
children: [
|
|
7164
|
-
tableHandles && /* @__PURE__ */ (0,
|
|
7165
|
-
formattingToolbar && /* @__PURE__ */ (0,
|
|
7166
|
-
|
|
7348
|
+
tableHandles && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LumirTableHandlesController, {}),
|
|
7349
|
+
formattingToolbar && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
7350
|
+
import_react37.FormattingToolbarController,
|
|
7167
7351
|
{
|
|
7168
7352
|
formattingToolbar: CustomFormattingToolbar
|
|
7169
7353
|
}
|
|
7170
7354
|
),
|
|
7171
|
-
linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0,
|
|
7172
|
-
/* @__PURE__ */ (0,
|
|
7173
|
-
|
|
7355
|
+
linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.LinkToolbarController, {})),
|
|
7356
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
7357
|
+
import_react37.SuggestionMenuController,
|
|
7174
7358
|
{
|
|
7175
7359
|
triggerCharacter: "/",
|
|
7176
|
-
getItems: (0,
|
|
7360
|
+
getItems: (0, import_react36.useCallback)(
|
|
7177
7361
|
async (query) => {
|
|
7178
|
-
const items = (0,
|
|
7362
|
+
const items = (0, import_react37.getDefaultReactSlashMenuItems)(editor);
|
|
7179
7363
|
const filtered = items.filter((item) => {
|
|
7180
7364
|
const key = (item?.key || "").toString().toLowerCase();
|
|
7181
7365
|
const title = (item?.title || "").toString().toLowerCase();
|
|
@@ -7217,7 +7401,7 @@ function LumirEditor({
|
|
|
7217
7401
|
},
|
|
7218
7402
|
aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
|
|
7219
7403
|
group: "Embeds",
|
|
7220
|
-
icon: /* @__PURE__ */ (0,
|
|
7404
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
7221
7405
|
"svg",
|
|
7222
7406
|
{
|
|
7223
7407
|
width: "18",
|
|
@@ -7229,14 +7413,14 @@ function LumirEditor({
|
|
|
7229
7413
|
strokeLinecap: "round",
|
|
7230
7414
|
strokeLinejoin: "round",
|
|
7231
7415
|
children: [
|
|
7232
|
-
/* @__PURE__ */ (0,
|
|
7233
|
-
/* @__PURE__ */ (0,
|
|
7416
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("polyline", { points: "16 18 22 12 16 6" }),
|
|
7417
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("polyline", { points: "8 6 2 12 8 18" })
|
|
7234
7418
|
]
|
|
7235
7419
|
}
|
|
7236
7420
|
),
|
|
7237
7421
|
subtext: "HTML \uD30C\uC77C\uC744 \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uC0BD\uC785"
|
|
7238
7422
|
};
|
|
7239
|
-
const columnIcon = (withDivider) => /* @__PURE__ */ (0,
|
|
7423
|
+
const columnIcon = (withDivider) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
7240
7424
|
"svg",
|
|
7241
7425
|
{
|
|
7242
7426
|
width: "18",
|
|
@@ -7248,9 +7432,9 @@ function LumirEditor({
|
|
|
7248
7432
|
strokeLinecap: "round",
|
|
7249
7433
|
strokeLinejoin: "round",
|
|
7250
7434
|
children: [
|
|
7251
|
-
/* @__PURE__ */ (0,
|
|
7252
|
-
/* @__PURE__ */ (0,
|
|
7253
|
-
withDivider && /* @__PURE__ */ (0,
|
|
7435
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "4", width: "7", height: "16", rx: "1" }),
|
|
7436
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "14", y: "4", width: "7", height: "16", rx: "1" }),
|
|
7437
|
+
withDivider && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "21", strokeDasharray: "2 2" })
|
|
7254
7438
|
]
|
|
7255
7439
|
}
|
|
7256
7440
|
);
|
|
@@ -7286,7 +7470,7 @@ function LumirEditor({
|
|
|
7286
7470
|
allItems.push({
|
|
7287
7471
|
title: "Link Preview",
|
|
7288
7472
|
onItemClick: () => {
|
|
7289
|
-
(0,
|
|
7473
|
+
(0, import_core11.insertOrUpdateBlock)(editor, {
|
|
7290
7474
|
type: "linkPreview",
|
|
7291
7475
|
props: { url: "" }
|
|
7292
7476
|
});
|
|
@@ -7300,7 +7484,7 @@ function LumirEditor({
|
|
|
7300
7484
|
"\uD504\uB9AC\uBDF0"
|
|
7301
7485
|
],
|
|
7302
7486
|
group: "Embeds",
|
|
7303
|
-
icon: /* @__PURE__ */ (0,
|
|
7487
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
7304
7488
|
"svg",
|
|
7305
7489
|
{
|
|
7306
7490
|
width: "18",
|
|
@@ -7312,8 +7496,8 @@ function LumirEditor({
|
|
|
7312
7496
|
strokeLinecap: "round",
|
|
7313
7497
|
strokeLinejoin: "round",
|
|
7314
7498
|
children: [
|
|
7315
|
-
/* @__PURE__ */ (0,
|
|
7316
|
-
/* @__PURE__ */ (0,
|
|
7499
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
7500
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
7317
7501
|
]
|
|
7318
7502
|
}
|
|
7319
7503
|
),
|
|
@@ -7349,21 +7533,21 @@ function LumirEditor({
|
|
|
7349
7533
|
)
|
|
7350
7534
|
}
|
|
7351
7535
|
),
|
|
7352
|
-
!sideMenuAddButton && /* @__PURE__ */ (0,
|
|
7536
|
+
!sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react37.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
|
|
7353
7537
|
]
|
|
7354
7538
|
}
|
|
7355
7539
|
),
|
|
7356
|
-
isUploading && /* @__PURE__ */ (0,
|
|
7357
|
-
/* @__PURE__ */ (0,
|
|
7358
|
-
uploadProgress !== null && /* @__PURE__ */ (0,
|
|
7540
|
+
isUploading && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
|
|
7541
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "lumirEditor-spinner" }),
|
|
7542
|
+
uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
|
|
7359
7543
|
uploadProgress,
|
|
7360
7544
|
"%"
|
|
7361
7545
|
] })
|
|
7362
7546
|
] }),
|
|
7363
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
7364
|
-
/* @__PURE__ */ (0,
|
|
7365
|
-
/* @__PURE__ */ (0,
|
|
7366
|
-
/* @__PURE__ */ (0,
|
|
7547
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "lumirEditor-error-toast", children: [
|
|
7548
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
|
|
7549
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),
|
|
7550
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
7367
7551
|
"button",
|
|
7368
7552
|
{
|
|
7369
7553
|
className: "lumirEditor-error-close",
|
|
@@ -7382,7 +7566,11 @@ function LumirEditor({
|
|
|
7382
7566
|
BACKGROUND_COLORS,
|
|
7383
7567
|
ContentUtils,
|
|
7384
7568
|
EditorConfig,
|
|
7569
|
+
FONT_SIZE_DEFAULT_PX,
|
|
7570
|
+
FONT_SIZE_MAX,
|
|
7571
|
+
FONT_SIZE_MIN,
|
|
7385
7572
|
FONT_SIZE_PRESETS,
|
|
7573
|
+
FONT_SIZE_STEP,
|
|
7386
7574
|
FloatingMenu,
|
|
7387
7575
|
FontSize,
|
|
7388
7576
|
FontSizeButton,
|
|
@@ -7392,12 +7580,15 @@ function LumirEditor({
|
|
|
7392
7580
|
LumirEditor,
|
|
7393
7581
|
LumirEditorError,
|
|
7394
7582
|
TEXT_COLORS,
|
|
7583
|
+
clampFontSizePx,
|
|
7395
7584
|
clearMetadataCache,
|
|
7396
7585
|
cn,
|
|
7397
7586
|
createS3Uploader,
|
|
7398
7587
|
fetchLinkMetadata,
|
|
7399
7588
|
getHexFromColorValue,
|
|
7400
7589
|
liftFontSize,
|
|
7401
|
-
lowerFontSize
|
|
7590
|
+
lowerFontSize,
|
|
7591
|
+
parseFontSizePx,
|
|
7592
|
+
toFontSizeValue
|
|
7402
7593
|
});
|
|
7403
7594
|
//# sourceMappingURL=index.js.map
|