neuphlo-editor 2.4.3 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/index.cjs +224 -162
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.css +50 -2
- package/dist/react/index.css.map +1 -1
- package/dist/react/index.d.cts +11 -2
- package/dist/react/index.d.ts +11 -2
- package/dist/react/index.js +79 -14
- package/dist/react/index.js.map +1 -1
- package/dist/styles.css +52 -2
- package/package.json +1 -1
package/dist/react/index.cjs
CHANGED
|
@@ -1384,6 +1384,8 @@ var handleCommandNavigation = (event) => {
|
|
|
1384
1384
|
var import_extension_collaboration = __toESM(require("@tiptap/extension-collaboration"), 1);
|
|
1385
1385
|
var import_extension_collaboration_caret = __toESM(require("@tiptap/extension-collaboration-caret"), 1);
|
|
1386
1386
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"), 1);
|
|
1387
|
+
var import_extension_list = require("@tiptap/extension-list");
|
|
1388
|
+
var import_react12 = require("@tiptap/react");
|
|
1387
1389
|
|
|
1388
1390
|
// src/headless/extensions/VideoBlock/VideoBlock.ts
|
|
1389
1391
|
var import_core5 = require("@tiptap/core");
|
|
@@ -1460,6 +1462,21 @@ var VideoBlock = import_core5.Node.create({
|
|
|
1460
1462
|
});
|
|
1461
1463
|
|
|
1462
1464
|
// src/headless/extensions/extension-kit.ts
|
|
1465
|
+
var TaskItem = import_extension_list.TaskItem.extend({
|
|
1466
|
+
addOptions() {
|
|
1467
|
+
return {
|
|
1468
|
+
...this.parent?.(),
|
|
1469
|
+
nodeView: null
|
|
1470
|
+
};
|
|
1471
|
+
},
|
|
1472
|
+
addNodeView() {
|
|
1473
|
+
const custom = this.options.nodeView;
|
|
1474
|
+
if (custom) {
|
|
1475
|
+
return (0, import_react12.ReactNodeViewRenderer)(custom);
|
|
1476
|
+
}
|
|
1477
|
+
return this.parent?.();
|
|
1478
|
+
}
|
|
1479
|
+
});
|
|
1463
1480
|
var ExtensionKit = (options) => {
|
|
1464
1481
|
const enableSlashCommand = options?.slashCommand !== false;
|
|
1465
1482
|
const extensions = [
|
|
@@ -1467,6 +1484,8 @@ var ExtensionKit = (options) => {
|
|
|
1467
1484
|
CodeBlock,
|
|
1468
1485
|
Link,
|
|
1469
1486
|
import_extension_underline.default,
|
|
1487
|
+
import_extension_list.TaskList,
|
|
1488
|
+
TaskItem.configure({ nested: true, nodeView: options?.taskItemView }),
|
|
1470
1489
|
ImageBlock.configure({
|
|
1471
1490
|
uploadImage: options?.uploadImage,
|
|
1472
1491
|
browseAssets: options?.browseAssets,
|
|
@@ -1565,13 +1584,13 @@ var extension_kit_default = ExtensionKit;
|
|
|
1565
1584
|
|
|
1566
1585
|
// src/react/menus/TextMenu.tsx
|
|
1567
1586
|
var import_state4 = require("@tiptap/pm/state");
|
|
1568
|
-
var
|
|
1587
|
+
var import_react14 = require("@tiptap/react");
|
|
1569
1588
|
var import_menus = require("@tiptap/react/menus");
|
|
1570
1589
|
var import_icons_react2 = require("@tabler/icons-react");
|
|
1571
|
-
var
|
|
1590
|
+
var import_react15 = require("react");
|
|
1572
1591
|
|
|
1573
1592
|
// src/react/menus/MenuList.tsx
|
|
1574
|
-
var
|
|
1593
|
+
var import_react13 = require("react");
|
|
1575
1594
|
var import_icons_react = require("@tabler/icons-react");
|
|
1576
1595
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1577
1596
|
function MenuList({
|
|
@@ -1581,10 +1600,10 @@ function MenuList({
|
|
|
1581
1600
|
onSelect,
|
|
1582
1601
|
buttonClassName
|
|
1583
1602
|
}) {
|
|
1584
|
-
const [open, setOpen] = (0,
|
|
1585
|
-
const [label, setLabel] = (0,
|
|
1586
|
-
const rootRef = (0,
|
|
1587
|
-
const computeLabel = (0,
|
|
1603
|
+
const [open, setOpen] = (0, import_react13.useState)(false);
|
|
1604
|
+
const [label, setLabel] = (0, import_react13.useState)("Paragraph");
|
|
1605
|
+
const rootRef = (0, import_react13.useRef)(null);
|
|
1606
|
+
const computeLabel = (0, import_react13.useCallback)(() => {
|
|
1588
1607
|
if (!editor) return "Paragraph";
|
|
1589
1608
|
if (editor.isActive("heading", { level: 1 })) return "Heading 1";
|
|
1590
1609
|
if (editor.isActive("heading", { level: 2 })) return "Heading 2";
|
|
@@ -1597,7 +1616,7 @@ function MenuList({
|
|
|
1597
1616
|
if (editor.isActive("codeBlock")) return "Code Block";
|
|
1598
1617
|
return "Paragraph";
|
|
1599
1618
|
}, [editor]);
|
|
1600
|
-
(0,
|
|
1619
|
+
(0, import_react13.useEffect)(() => {
|
|
1601
1620
|
setLabel(computeLabel());
|
|
1602
1621
|
if (!editor) return;
|
|
1603
1622
|
const update = () => setLabel(computeLabel());
|
|
@@ -1610,7 +1629,7 @@ function MenuList({
|
|
|
1610
1629
|
editor.off("update", update);
|
|
1611
1630
|
};
|
|
1612
1631
|
}, [editor, computeLabel]);
|
|
1613
|
-
(0,
|
|
1632
|
+
(0, import_react13.useEffect)(() => {
|
|
1614
1633
|
if (!editor) return;
|
|
1615
1634
|
const close = () => setOpen(false);
|
|
1616
1635
|
editor.on("selectionUpdate", close);
|
|
@@ -1620,7 +1639,7 @@ function MenuList({
|
|
|
1620
1639
|
editor.off("blur", close);
|
|
1621
1640
|
};
|
|
1622
1641
|
}, [editor]);
|
|
1623
|
-
(0,
|
|
1642
|
+
(0, import_react13.useEffect)(() => {
|
|
1624
1643
|
const handlePointerDown = (e) => {
|
|
1625
1644
|
if (!open) return;
|
|
1626
1645
|
const el = rootRef.current;
|
|
@@ -1635,7 +1654,7 @@ function MenuList({
|
|
|
1635
1654
|
onSelect?.();
|
|
1636
1655
|
setOpen(false);
|
|
1637
1656
|
};
|
|
1638
|
-
const isActive = (0,
|
|
1657
|
+
const isActive = (0, import_react13.useCallback)((name) => label === name, [label]);
|
|
1639
1658
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, className: "nph-dropdown", children: [
|
|
1640
1659
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1641
1660
|
"button",
|
|
@@ -1831,11 +1850,11 @@ function TextMenu({
|
|
|
1831
1850
|
leadingExtras,
|
|
1832
1851
|
trailingExtras
|
|
1833
1852
|
}) {
|
|
1834
|
-
const { editor } = (0,
|
|
1835
|
-
const [isAddingLink, setIsAddingLink] = (0,
|
|
1836
|
-
const [linkUrl, setLinkUrl] = (0,
|
|
1837
|
-
const linkInputRef = (0,
|
|
1838
|
-
const editorState = (0,
|
|
1853
|
+
const { editor } = (0, import_react14.useCurrentEditor)();
|
|
1854
|
+
const [isAddingLink, setIsAddingLink] = (0, import_react15.useState)(false);
|
|
1855
|
+
const [linkUrl, setLinkUrl] = (0, import_react15.useState)("");
|
|
1856
|
+
const linkInputRef = (0, import_react15.useRef)(null);
|
|
1857
|
+
const editorState = (0, import_react14.useEditorState)({
|
|
1839
1858
|
editor,
|
|
1840
1859
|
selector: (ctx) => {
|
|
1841
1860
|
if (!ctx.editor) return null;
|
|
@@ -1853,7 +1872,7 @@ function TextMenu({
|
|
|
1853
1872
|
};
|
|
1854
1873
|
}
|
|
1855
1874
|
});
|
|
1856
|
-
(0,
|
|
1875
|
+
(0, import_react15.useEffect)(() => {
|
|
1857
1876
|
if (isAddingLink && linkInputRef.current) {
|
|
1858
1877
|
linkInputRef.current.focus();
|
|
1859
1878
|
}
|
|
@@ -1912,7 +1931,7 @@ function TextMenu({
|
|
|
1912
1931
|
return true;
|
|
1913
1932
|
},
|
|
1914
1933
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [
|
|
1915
|
-
leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1934
|
+
leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react15.Fragment, { children: renderExtra(editor) }, `leading-extra-${index}`)) : null,
|
|
1916
1935
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuList, { editor }),
|
|
1917
1936
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Separator, {}),
|
|
1918
1937
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
@@ -2074,17 +2093,17 @@ function TextMenu({
|
|
|
2074
2093
|
)
|
|
2075
2094
|
] });
|
|
2076
2095
|
})(),
|
|
2077
|
-
trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2096
|
+
trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react15.Fragment, { children: renderExtra(editor) }, `trailing-extra-${index}`)) : null
|
|
2078
2097
|
] })
|
|
2079
2098
|
}
|
|
2080
2099
|
);
|
|
2081
2100
|
}
|
|
2082
2101
|
|
|
2083
2102
|
// src/react/menus/SlashMenu.tsx
|
|
2084
|
-
var
|
|
2103
|
+
var import_react16 = require("@tiptap/react");
|
|
2085
2104
|
var import_jotai6 = require("jotai");
|
|
2086
2105
|
var import_icons_react3 = require("@tabler/icons-react");
|
|
2087
|
-
var
|
|
2106
|
+
var import_react17 = require("react");
|
|
2088
2107
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
2089
2108
|
var SLASH_COMMANDS = [
|
|
2090
2109
|
{
|
|
@@ -2214,9 +2233,9 @@ var SLASH_COMMANDS = [
|
|
|
2214
2233
|
}
|
|
2215
2234
|
];
|
|
2216
2235
|
function SlashMenu({ className }) {
|
|
2217
|
-
const { editor } = (0,
|
|
2236
|
+
const { editor } = (0, import_react16.useCurrentEditor)();
|
|
2218
2237
|
const query = (0, import_jotai6.useAtomValue)(queryAtom, { store: novelStore });
|
|
2219
|
-
const filteredGroups = (0,
|
|
2238
|
+
const filteredGroups = (0, import_react17.useMemo)(() => {
|
|
2220
2239
|
if (!query) return SLASH_COMMANDS;
|
|
2221
2240
|
const q = query.toLowerCase();
|
|
2222
2241
|
return SLASH_COMMANDS.map((group) => ({
|
|
@@ -2257,37 +2276,37 @@ function SlashMenu({ className }) {
|
|
|
2257
2276
|
}
|
|
2258
2277
|
|
|
2259
2278
|
// src/react/menus/LinkMenu.tsx
|
|
2260
|
-
var
|
|
2279
|
+
var import_react18 = require("@tiptap/react");
|
|
2261
2280
|
var import_menus2 = require("@tiptap/react/menus");
|
|
2262
|
-
var
|
|
2281
|
+
var import_react19 = require("react");
|
|
2263
2282
|
var import_icons_react4 = require("@tabler/icons-react");
|
|
2264
2283
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
2265
2284
|
function LinkMenu() {
|
|
2266
|
-
const { editor } = (0,
|
|
2267
|
-
const [url, setUrl] = (0,
|
|
2268
|
-
const [isEditing, setIsEditing] = (0,
|
|
2269
|
-
const inputRef = (0,
|
|
2285
|
+
const { editor } = (0, import_react18.useCurrentEditor)();
|
|
2286
|
+
const [url, setUrl] = (0, import_react19.useState)("");
|
|
2287
|
+
const [isEditing, setIsEditing] = (0, import_react19.useState)(false);
|
|
2288
|
+
const inputRef = (0, import_react19.useRef)(null);
|
|
2270
2289
|
const currentUrl = editor?.getAttributes("link")?.href || "";
|
|
2271
|
-
(0,
|
|
2290
|
+
(0, import_react19.useEffect)(() => {
|
|
2272
2291
|
setUrl(currentUrl);
|
|
2273
2292
|
}, [currentUrl]);
|
|
2274
|
-
(0,
|
|
2293
|
+
(0, import_react19.useEffect)(() => {
|
|
2275
2294
|
if (isEditing && inputRef.current) {
|
|
2276
2295
|
inputRef.current.focus();
|
|
2277
2296
|
inputRef.current.select();
|
|
2278
2297
|
}
|
|
2279
2298
|
}, [isEditing]);
|
|
2280
|
-
const handleSetLink = (0,
|
|
2299
|
+
const handleSetLink = (0, import_react19.useCallback)(() => {
|
|
2281
2300
|
if (!editor || !url) return;
|
|
2282
2301
|
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
|
|
2283
2302
|
setIsEditing(false);
|
|
2284
2303
|
}, [editor, url]);
|
|
2285
|
-
const handleRemoveLink = (0,
|
|
2304
|
+
const handleRemoveLink = (0, import_react19.useCallback)(() => {
|
|
2286
2305
|
if (!editor) return;
|
|
2287
2306
|
editor.chain().focus().unsetLink().run();
|
|
2288
2307
|
setIsEditing(false);
|
|
2289
2308
|
}, [editor]);
|
|
2290
|
-
const handleOpenLink = (0,
|
|
2309
|
+
const handleOpenLink = (0, import_react19.useCallback)(() => {
|
|
2291
2310
|
if (url || currentUrl) {
|
|
2292
2311
|
window.open(url || currentUrl, "_blank", "noopener,noreferrer");
|
|
2293
2312
|
}
|
|
@@ -2403,20 +2422,20 @@ function LinkMenu() {
|
|
|
2403
2422
|
|
|
2404
2423
|
// src/react/menus/ImageMenu.tsx
|
|
2405
2424
|
var import_state5 = require("@tiptap/pm/state");
|
|
2406
|
-
var
|
|
2425
|
+
var import_react20 = require("@tiptap/react");
|
|
2407
2426
|
var import_menus3 = require("@tiptap/react/menus");
|
|
2408
2427
|
var import_icons_react5 = require("@tabler/icons-react");
|
|
2409
|
-
var
|
|
2428
|
+
var import_react21 = require("react");
|
|
2410
2429
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2411
2430
|
function ImageMenu({
|
|
2412
2431
|
className,
|
|
2413
2432
|
leadingExtras,
|
|
2414
2433
|
trailingExtras
|
|
2415
2434
|
}) {
|
|
2416
|
-
const { editor } = (0,
|
|
2417
|
-
const [size, setSize] = (0,
|
|
2418
|
-
const [align, setAlign] = (0,
|
|
2419
|
-
(0,
|
|
2435
|
+
const { editor } = (0, import_react20.useCurrentEditor)();
|
|
2436
|
+
const [size, setSize] = (0, import_react21.useState)(100);
|
|
2437
|
+
const [align, setAlign] = (0, import_react21.useState)("left");
|
|
2438
|
+
(0, import_react21.useEffect)(() => {
|
|
2420
2439
|
if (!editor) return;
|
|
2421
2440
|
const update = () => {
|
|
2422
2441
|
if (!editor.isActive("imageBlock")) return;
|
|
@@ -2470,7 +2489,7 @@ function ImageMenu({
|
|
|
2470
2489
|
},
|
|
2471
2490
|
updateDelay: 0,
|
|
2472
2491
|
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: className ? `bubble-menu ${className}` : "bubble-menu", children: [
|
|
2473
|
-
leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2492
|
+
leadingExtras && editor ? leadingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react21.Fragment, { children: renderExtra(editor) }, `image-leading-extra-${index}`)) : null,
|
|
2474
2493
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
2475
2494
|
"div",
|
|
2476
2495
|
{
|
|
@@ -2570,32 +2589,32 @@ function ImageMenu({
|
|
|
2570
2589
|
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_react5.IconTrash, { size: 16 })
|
|
2571
2590
|
}
|
|
2572
2591
|
),
|
|
2573
|
-
trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2592
|
+
trailingExtras && editor ? trailingExtras.map((renderExtra, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react21.Fragment, { children: renderExtra(editor) }, `image-trailing-extra-${index}`)) : null
|
|
2574
2593
|
] })
|
|
2575
2594
|
}
|
|
2576
2595
|
);
|
|
2577
2596
|
}
|
|
2578
2597
|
|
|
2579
2598
|
// src/react/menus/ImageBlock/ImageBlockView.tsx
|
|
2580
|
-
var
|
|
2581
|
-
var
|
|
2599
|
+
var import_react27 = require("@tiptap/react");
|
|
2600
|
+
var import_react28 = require("react");
|
|
2582
2601
|
var import_icons_react9 = require("@tabler/icons-react");
|
|
2583
2602
|
|
|
2584
2603
|
// src/react/menus/ImageBlock/ImageBlockMenu.tsx
|
|
2585
2604
|
var import_state6 = require("@tiptap/pm/state");
|
|
2586
|
-
var
|
|
2587
|
-
var
|
|
2605
|
+
var import_react23 = require("@tiptap/react");
|
|
2606
|
+
var import_react24 = require("react");
|
|
2588
2607
|
|
|
2589
2608
|
// src/react/menus/ImageBlock/ImageBlockWidth.tsx
|
|
2590
|
-
var
|
|
2609
|
+
var import_react22 = require("react");
|
|
2591
2610
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2592
|
-
var ImageBlockWidth = (0,
|
|
2611
|
+
var ImageBlockWidth = (0, import_react22.memo)(
|
|
2593
2612
|
({ onChange, value }) => {
|
|
2594
|
-
const [currentValue, setCurrentValue] = (0,
|
|
2595
|
-
(0,
|
|
2613
|
+
const [currentValue, setCurrentValue] = (0, import_react22.useState)(value);
|
|
2614
|
+
(0, import_react22.useEffect)(() => {
|
|
2596
2615
|
setCurrentValue(value);
|
|
2597
2616
|
}, [value]);
|
|
2598
|
-
const handleChange = (0,
|
|
2617
|
+
const handleChange = (0, import_react22.useCallback)(
|
|
2599
2618
|
(e) => {
|
|
2600
2619
|
const nextValue = parseInt(e.target.value);
|
|
2601
2620
|
onChange(nextValue);
|
|
@@ -2650,8 +2669,8 @@ ImageBlockWidth.displayName = "ImageBlockWidth";
|
|
|
2650
2669
|
var import_icons_react6 = require("@tabler/icons-react");
|
|
2651
2670
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2652
2671
|
var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
|
|
2653
|
-
const menuRef = (0,
|
|
2654
|
-
const { isVisible, align, width } = (0,
|
|
2672
|
+
const menuRef = (0, import_react24.useRef)(null);
|
|
2673
|
+
const { isVisible, align, width } = (0, import_react23.useEditorState)({
|
|
2655
2674
|
editor,
|
|
2656
2675
|
selector: (ctx) => {
|
|
2657
2676
|
if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
|
|
@@ -2673,22 +2692,22 @@ var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
|
|
|
2673
2692
|
return { isVisible: visible, align: currentAlign, width: currentWidth };
|
|
2674
2693
|
}
|
|
2675
2694
|
});
|
|
2676
|
-
const onAlignImageLeft = (0,
|
|
2695
|
+
const onAlignImageLeft = (0, import_react24.useCallback)(() => {
|
|
2677
2696
|
editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("left").run();
|
|
2678
2697
|
}, [editor]);
|
|
2679
|
-
const onAlignImageCenter = (0,
|
|
2698
|
+
const onAlignImageCenter = (0, import_react24.useCallback)(() => {
|
|
2680
2699
|
editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("center").run();
|
|
2681
2700
|
}, [editor]);
|
|
2682
|
-
const onAlignImageRight = (0,
|
|
2701
|
+
const onAlignImageRight = (0, import_react24.useCallback)(() => {
|
|
2683
2702
|
editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockAlign("right").run();
|
|
2684
2703
|
}, [editor]);
|
|
2685
|
-
const onWidthChange = (0,
|
|
2704
|
+
const onWidthChange = (0, import_react24.useCallback)(
|
|
2686
2705
|
(value) => {
|
|
2687
2706
|
editor.chain().focus(void 0, { scrollIntoView: false }).setImageBlockWidth(value).run();
|
|
2688
2707
|
},
|
|
2689
2708
|
[editor]
|
|
2690
2709
|
);
|
|
2691
|
-
const onRemoveImage = (0,
|
|
2710
|
+
const onRemoveImage = (0, import_react24.useCallback)(() => {
|
|
2692
2711
|
editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
|
|
2693
2712
|
}, [editor]);
|
|
2694
2713
|
if (!isVisible) return null;
|
|
@@ -2771,7 +2790,7 @@ var ImageBlockMenu = ({ editor, getPos, appendTo }) => {
|
|
|
2771
2790
|
|
|
2772
2791
|
// src/react/menus/ImageBlock/ImageUploader.tsx
|
|
2773
2792
|
var import_icons_react8 = require("@tabler/icons-react");
|
|
2774
|
-
var
|
|
2793
|
+
var import_react25 = require("react");
|
|
2775
2794
|
|
|
2776
2795
|
// src/react/menus/ImageBlock/ImageBlockLoading.tsx
|
|
2777
2796
|
var import_icons_react7 = require("@tabler/icons-react");
|
|
@@ -2789,14 +2808,14 @@ var ImageBlockLoading = () => {
|
|
|
2789
2808
|
// src/react/menus/ImageBlock/ImageUploader.tsx
|
|
2790
2809
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2791
2810
|
var ImageUploader = ({ onUpload, editor }) => {
|
|
2792
|
-
const [loading, setLoading] = (0,
|
|
2793
|
-
const [draggedInside, setDraggedInside] = (0,
|
|
2794
|
-
const fileInputRef = (0,
|
|
2811
|
+
const [loading, setLoading] = (0, import_react25.useState)(false);
|
|
2812
|
+
const [draggedInside, setDraggedInside] = (0, import_react25.useState)(false);
|
|
2813
|
+
const fileInputRef = (0, import_react25.useRef)(null);
|
|
2795
2814
|
const imageExtension = editor.extensionManager.extensions.find(
|
|
2796
2815
|
(ext) => ext.name === "imageBlock"
|
|
2797
2816
|
);
|
|
2798
2817
|
const browseAssets = imageExtension?.options?.browseAssets;
|
|
2799
|
-
const uploadFile = (0,
|
|
2818
|
+
const uploadFile = (0, import_react25.useCallback)(
|
|
2800
2819
|
async (file) => {
|
|
2801
2820
|
setLoading(true);
|
|
2802
2821
|
try {
|
|
@@ -2815,10 +2834,10 @@ var ImageUploader = ({ onUpload, editor }) => {
|
|
|
2815
2834
|
},
|
|
2816
2835
|
[imageExtension, onUpload]
|
|
2817
2836
|
);
|
|
2818
|
-
const handleUploadClick = (0,
|
|
2837
|
+
const handleUploadClick = (0, import_react25.useCallback)(() => {
|
|
2819
2838
|
fileInputRef.current?.click();
|
|
2820
2839
|
}, []);
|
|
2821
|
-
const onFileChange = (0,
|
|
2840
|
+
const onFileChange = (0, import_react25.useCallback)(
|
|
2822
2841
|
(e) => {
|
|
2823
2842
|
const file = e.target.files?.[0];
|
|
2824
2843
|
if (file) {
|
|
@@ -2827,7 +2846,7 @@ var ImageUploader = ({ onUpload, editor }) => {
|
|
|
2827
2846
|
},
|
|
2828
2847
|
[uploadFile]
|
|
2829
2848
|
);
|
|
2830
|
-
const onDrop = (0,
|
|
2849
|
+
const onDrop = (0, import_react25.useCallback)(
|
|
2831
2850
|
(e) => {
|
|
2832
2851
|
e.preventDefault();
|
|
2833
2852
|
e.stopPropagation();
|
|
@@ -2839,12 +2858,12 @@ var ImageUploader = ({ onUpload, editor }) => {
|
|
|
2839
2858
|
},
|
|
2840
2859
|
[uploadFile]
|
|
2841
2860
|
);
|
|
2842
|
-
const onDragEnter = (0,
|
|
2861
|
+
const onDragEnter = (0, import_react25.useCallback)((e) => {
|
|
2843
2862
|
e.preventDefault();
|
|
2844
2863
|
e.stopPropagation();
|
|
2845
2864
|
setDraggedInside(true);
|
|
2846
2865
|
}, []);
|
|
2847
|
-
const onDragLeave = (0,
|
|
2866
|
+
const onDragLeave = (0, import_react25.useCallback)((e) => {
|
|
2848
2867
|
e.preventDefault();
|
|
2849
2868
|
e.stopPropagation();
|
|
2850
2869
|
setDraggedInside(false);
|
|
@@ -2919,16 +2938,16 @@ var ImageUploader = ({ onUpload, editor }) => {
|
|
|
2919
2938
|
};
|
|
2920
2939
|
|
|
2921
2940
|
// src/react/menus/ImageBlock/ImageResizeHandle.tsx
|
|
2922
|
-
var
|
|
2941
|
+
var import_react26 = require("react");
|
|
2923
2942
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2924
2943
|
function ImageResizeHandle({
|
|
2925
2944
|
children,
|
|
2926
2945
|
onResize,
|
|
2927
2946
|
currentWidth
|
|
2928
2947
|
}) {
|
|
2929
|
-
const containerRef = (0,
|
|
2930
|
-
const [isResizing, setIsResizing] = (0,
|
|
2931
|
-
const handleMouseDown = (0,
|
|
2948
|
+
const containerRef = (0, import_react26.useRef)(null);
|
|
2949
|
+
const [isResizing, setIsResizing] = (0, import_react26.useState)(false);
|
|
2950
|
+
const handleMouseDown = (0, import_react26.useCallback)(
|
|
2932
2951
|
(e, side) => {
|
|
2933
2952
|
e.preventDefault();
|
|
2934
2953
|
e.stopPropagation();
|
|
@@ -2988,19 +3007,19 @@ function ImageResizeHandle({
|
|
|
2988
3007
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2989
3008
|
var ImageBlockView = (props) => {
|
|
2990
3009
|
const { editor, getPos, node, updateAttributes } = props;
|
|
2991
|
-
const imageWrapperRef = (0,
|
|
2992
|
-
const [imageError, setImageError] = (0,
|
|
3010
|
+
const imageWrapperRef = (0, import_react28.useRef)(null);
|
|
3011
|
+
const [imageError, setImageError] = (0, import_react28.useState)(false);
|
|
2993
3012
|
const { src, width, align, alt, loading } = node.attrs;
|
|
2994
|
-
const handleUpload = (0,
|
|
3013
|
+
const handleUpload = (0, import_react28.useCallback)(
|
|
2995
3014
|
(url) => {
|
|
2996
3015
|
updateAttributes({ src: url, loading: false });
|
|
2997
3016
|
},
|
|
2998
3017
|
[updateAttributes]
|
|
2999
3018
|
);
|
|
3000
|
-
const onClick = (0,
|
|
3019
|
+
const onClick = (0, import_react28.useCallback)(() => {
|
|
3001
3020
|
editor.commands.setNodeSelection(getPos());
|
|
3002
3021
|
}, [getPos, editor.commands]);
|
|
3003
|
-
const handleResize = (0,
|
|
3022
|
+
const handleResize = (0, import_react28.useCallback)(
|
|
3004
3023
|
(widthPercent) => {
|
|
3005
3024
|
updateAttributes({ width: `${widthPercent}%` });
|
|
3006
3025
|
},
|
|
@@ -3023,14 +3042,14 @@ var ImageBlockView = (props) => {
|
|
|
3023
3042
|
position: "relative"
|
|
3024
3043
|
});
|
|
3025
3044
|
if (!src || src === "") {
|
|
3026
|
-
if (!editor.isEditable) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3027
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3045
|
+
if (!editor.isEditable) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.NodeViewWrapper, {});
|
|
3046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.NodeViewWrapper, { style: { width: "100%", marginTop: "0.5rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageUploader, { onUpload: handleUpload, editor }) }) });
|
|
3028
3047
|
}
|
|
3029
3048
|
if (loading) {
|
|
3030
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: imageWrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageBlockLoading, {}) }) });
|
|
3031
3050
|
}
|
|
3032
3051
|
if (imageError) {
|
|
3033
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
|
|
3034
3053
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "nph-image-block-error", onClick, children: [
|
|
3035
3054
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_react9.IconPhotoOff, { size: 32 }),
|
|
3036
3055
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Image could not be loaded" })
|
|
@@ -3038,7 +3057,7 @@ var ImageBlockView = (props) => {
|
|
|
3038
3057
|
editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageBlockMenu, { editor, getPos, appendTo: imageWrapperRef })
|
|
3039
3058
|
] }) });
|
|
3040
3059
|
}
|
|
3041
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { contentEditable: false, ref: imageWrapperRef, style: getContentStyle(), children: [
|
|
3042
3061
|
editor.isEditable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ImageResizeHandle, { onResize: handleResize, currentWidth: width, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3043
3062
|
"img",
|
|
3044
3063
|
{
|
|
@@ -3063,18 +3082,18 @@ var ImageBlockView = (props) => {
|
|
|
3063
3082
|
|
|
3064
3083
|
// src/react/menus/VideoBlock/VideoBlockView.tsx
|
|
3065
3084
|
var import_state8 = require("@tiptap/pm/state");
|
|
3066
|
-
var
|
|
3067
|
-
var
|
|
3085
|
+
var import_react31 = require("@tiptap/react");
|
|
3086
|
+
var import_react32 = require("react");
|
|
3068
3087
|
|
|
3069
3088
|
// src/react/menus/VideoBlock/VideoBlockMenu.tsx
|
|
3070
3089
|
var import_state7 = require("@tiptap/pm/state");
|
|
3071
|
-
var
|
|
3072
|
-
var
|
|
3090
|
+
var import_react29 = require("@tiptap/react");
|
|
3091
|
+
var import_react30 = require("react");
|
|
3073
3092
|
var import_icons_react10 = require("@tabler/icons-react");
|
|
3074
3093
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3075
3094
|
var VideoBlockMenu = ({ editor, getPos }) => {
|
|
3076
|
-
const menuRef = (0,
|
|
3077
|
-
const { isVisible, align, width } = (0,
|
|
3095
|
+
const menuRef = (0, import_react30.useRef)(null);
|
|
3096
|
+
const { isVisible, align, width } = (0, import_react29.useEditorState)({
|
|
3078
3097
|
editor,
|
|
3079
3098
|
selector: (ctx) => {
|
|
3080
3099
|
if (!ctx.editor) return { isVisible: false, align: "center", width: 100 };
|
|
@@ -3094,22 +3113,22 @@ var VideoBlockMenu = ({ editor, getPos }) => {
|
|
|
3094
3113
|
return { isVisible: isThisNode, align: currentAlign, width: currentWidth };
|
|
3095
3114
|
}
|
|
3096
3115
|
});
|
|
3097
|
-
const onAlignLeft = (0,
|
|
3116
|
+
const onAlignLeft = (0, import_react30.useCallback)(() => {
|
|
3098
3117
|
editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("left").run();
|
|
3099
3118
|
}, [editor]);
|
|
3100
|
-
const onAlignCenter = (0,
|
|
3119
|
+
const onAlignCenter = (0, import_react30.useCallback)(() => {
|
|
3101
3120
|
editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("center").run();
|
|
3102
3121
|
}, [editor]);
|
|
3103
|
-
const onAlignRight = (0,
|
|
3122
|
+
const onAlignRight = (0, import_react30.useCallback)(() => {
|
|
3104
3123
|
editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockAlign("right").run();
|
|
3105
3124
|
}, [editor]);
|
|
3106
|
-
const onWidthChange = (0,
|
|
3125
|
+
const onWidthChange = (0, import_react30.useCallback)(
|
|
3107
3126
|
(value) => {
|
|
3108
3127
|
editor.chain().focus(void 0, { scrollIntoView: false }).setVideoBlockWidth(value).run();
|
|
3109
3128
|
},
|
|
3110
3129
|
[editor]
|
|
3111
3130
|
);
|
|
3112
|
-
const onRemove = (0,
|
|
3131
|
+
const onRemove = (0, import_react30.useCallback)(() => {
|
|
3113
3132
|
editor.chain().focus(void 0, { scrollIntoView: false }).deleteSelection().run();
|
|
3114
3133
|
}, [editor]);
|
|
3115
3134
|
if (!isVisible) return null;
|
|
@@ -3215,11 +3234,11 @@ function toEmbedUrl(url) {
|
|
|
3215
3234
|
}
|
|
3216
3235
|
var VideoBlockView = (props) => {
|
|
3217
3236
|
const { editor, getPos, node, updateAttributes } = props;
|
|
3218
|
-
const wrapperRef = (0,
|
|
3237
|
+
const wrapperRef = (0, import_react32.useRef)(null);
|
|
3219
3238
|
const { src, width, align } = node.attrs;
|
|
3220
|
-
const [inputUrl, setInputUrl] = (0,
|
|
3221
|
-
const [videoError, setVideoError] = (0,
|
|
3222
|
-
const isSelected = (0,
|
|
3239
|
+
const [inputUrl, setInputUrl] = (0, import_react32.useState)("");
|
|
3240
|
+
const [videoError, setVideoError] = (0, import_react32.useState)(false);
|
|
3241
|
+
const isSelected = (0, import_react31.useEditorState)({
|
|
3223
3242
|
editor,
|
|
3224
3243
|
selector: (ctx) => {
|
|
3225
3244
|
if (!ctx.editor) return false;
|
|
@@ -3227,12 +3246,12 @@ var VideoBlockView = (props) => {
|
|
|
3227
3246
|
return selection instanceof import_state8.NodeSelection && selection.from === getPos();
|
|
3228
3247
|
}
|
|
3229
3248
|
});
|
|
3230
|
-
const handleEmbed = (0,
|
|
3249
|
+
const handleEmbed = (0, import_react32.useCallback)(() => {
|
|
3231
3250
|
if (!inputUrl.trim()) return;
|
|
3232
3251
|
const embedUrl = toEmbedUrl(inputUrl.trim());
|
|
3233
3252
|
updateAttributes({ src: embedUrl });
|
|
3234
3253
|
}, [inputUrl, updateAttributes]);
|
|
3235
|
-
const handleKeyDown = (0,
|
|
3254
|
+
const handleKeyDown = (0, import_react32.useCallback)(
|
|
3236
3255
|
(e) => {
|
|
3237
3256
|
if (e.key === "Enter") {
|
|
3238
3257
|
e.preventDefault();
|
|
@@ -3241,7 +3260,7 @@ var VideoBlockView = (props) => {
|
|
|
3241
3260
|
},
|
|
3242
3261
|
[handleEmbed]
|
|
3243
3262
|
);
|
|
3244
|
-
const onClick = (0,
|
|
3263
|
+
const onClick = (0, import_react32.useCallback)(() => {
|
|
3245
3264
|
editor.commands.setNodeSelection(getPos());
|
|
3246
3265
|
}, [getPos, editor.commands]);
|
|
3247
3266
|
const getWrapperStyle = () => {
|
|
@@ -3258,8 +3277,8 @@ var VideoBlockView = (props) => {
|
|
|
3258
3277
|
}
|
|
3259
3278
|
};
|
|
3260
3279
|
if (!src || src === "") {
|
|
3261
|
-
if (!editor.isEditable) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3262
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3280
|
+
if (!editor.isEditable) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react31.NodeViewWrapper, {});
|
|
3281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react31.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "nph-video-placeholder", onClick, children: [
|
|
3263
3282
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "nph-video-placeholder__icon", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react11.IconVideo, { size: 28, stroke: 1.5 }) }),
|
|
3264
3283
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px" }, children: [
|
|
3265
3284
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, lineHeight: "20px" }, children: "Add a video" }),
|
|
@@ -3295,7 +3314,7 @@ var VideoBlockView = (props) => {
|
|
|
3295
3314
|
] }) }) });
|
|
3296
3315
|
}
|
|
3297
3316
|
if (videoError) {
|
|
3298
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react31.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { contentEditable: false, ref: wrapperRef, style: { position: "relative" }, children: [
|
|
3299
3318
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "nph-video-block-error", onClick, children: [
|
|
3300
3319
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons_react11.IconVideoOff, { size: 32 }),
|
|
3301
3320
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Video could not be loaded" }),
|
|
@@ -3304,7 +3323,7 @@ var VideoBlockView = (props) => {
|
|
|
3304
3323
|
editor.isEditable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VideoBlockMenu, { editor, getPos })
|
|
3305
3324
|
] }) });
|
|
3306
3325
|
}
|
|
3307
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react31.NodeViewWrapper, { style: getWrapperStyle(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
3308
3327
|
"div",
|
|
3309
3328
|
{
|
|
3310
3329
|
contentEditable: false,
|
|
@@ -3338,22 +3357,22 @@ var VideoBlockView = (props) => {
|
|
|
3338
3357
|
|
|
3339
3358
|
// src/react/menus/DragHandle/BlockActionMenu.tsx
|
|
3340
3359
|
var import_icons_react12 = require("@tabler/icons-react");
|
|
3341
|
-
var
|
|
3360
|
+
var import_react33 = require("react");
|
|
3342
3361
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3343
3362
|
function BlockActionMenu({ editor, onClose }) {
|
|
3344
|
-
const executeAndClose = (0,
|
|
3363
|
+
const executeAndClose = (0, import_react33.useCallback)(
|
|
3345
3364
|
(fn) => {
|
|
3346
3365
|
fn();
|
|
3347
3366
|
onClose();
|
|
3348
3367
|
},
|
|
3349
3368
|
[onClose]
|
|
3350
3369
|
);
|
|
3351
|
-
const handleDelete = (0,
|
|
3370
|
+
const handleDelete = (0, import_react33.useCallback)(() => {
|
|
3352
3371
|
executeAndClose(() => {
|
|
3353
3372
|
editor.commands.deleteSelection();
|
|
3354
3373
|
});
|
|
3355
3374
|
}, [editor, executeAndClose]);
|
|
3356
|
-
const handleDuplicate = (0,
|
|
3375
|
+
const handleDuplicate = (0, import_react33.useCallback)(() => {
|
|
3357
3376
|
executeAndClose(() => {
|
|
3358
3377
|
const { state } = editor;
|
|
3359
3378
|
const { selection } = state;
|
|
@@ -3368,7 +3387,7 @@ function BlockActionMenu({ editor, onClose }) {
|
|
|
3368
3387
|
}
|
|
3369
3388
|
});
|
|
3370
3389
|
}, [editor, executeAndClose]);
|
|
3371
|
-
const handleMoveUp = (0,
|
|
3390
|
+
const handleMoveUp = (0, import_react33.useCallback)(() => {
|
|
3372
3391
|
executeAndClose(() => {
|
|
3373
3392
|
const { state } = editor;
|
|
3374
3393
|
const { selection } = state;
|
|
@@ -3391,7 +3410,7 @@ function BlockActionMenu({ editor, onClose }) {
|
|
|
3391
3410
|
}).run();
|
|
3392
3411
|
});
|
|
3393
3412
|
}, [editor, executeAndClose]);
|
|
3394
|
-
const handleMoveDown = (0,
|
|
3413
|
+
const handleMoveDown = (0, import_react33.useCallback)(() => {
|
|
3395
3414
|
executeAndClose(() => {
|
|
3396
3415
|
const { state } = editor;
|
|
3397
3416
|
const { selection } = state;
|
|
@@ -3416,7 +3435,7 @@ function BlockActionMenu({ editor, onClose }) {
|
|
|
3416
3435
|
}).run();
|
|
3417
3436
|
});
|
|
3418
3437
|
}, [editor, executeAndClose]);
|
|
3419
|
-
const handleCopyToClipboard = (0,
|
|
3438
|
+
const handleCopyToClipboard = (0, import_react33.useCallback)(() => {
|
|
3420
3439
|
executeAndClose(() => {
|
|
3421
3440
|
const { state } = editor;
|
|
3422
3441
|
const { selection } = state;
|
|
@@ -3501,14 +3520,14 @@ function BlockActionMenu({ editor, onClose }) {
|
|
|
3501
3520
|
}
|
|
3502
3521
|
|
|
3503
3522
|
// src/react/menus/TableMenu.tsx
|
|
3504
|
-
var
|
|
3523
|
+
var import_react34 = require("@tiptap/react");
|
|
3505
3524
|
var import_icons_react13 = require("@tabler/icons-react");
|
|
3506
|
-
var
|
|
3525
|
+
var import_react35 = require("react");
|
|
3507
3526
|
var import_react_dom2 = require("react-dom");
|
|
3508
3527
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3509
3528
|
function TableMenu({ className: _className }) {
|
|
3510
|
-
const { editor } = (0,
|
|
3511
|
-
const tableInfo = (0,
|
|
3529
|
+
const { editor } = (0, import_react34.useCurrentEditor)();
|
|
3530
|
+
const tableInfo = (0, import_react34.useEditorState)({
|
|
3512
3531
|
editor,
|
|
3513
3532
|
selector: (ctx) => {
|
|
3514
3533
|
if (!ctx.editor) return null;
|
|
@@ -3521,19 +3540,19 @@ function TableMenu({ className: _className }) {
|
|
|
3521
3540
|
return null;
|
|
3522
3541
|
}
|
|
3523
3542
|
});
|
|
3524
|
-
const [colGrips, setColGrips] = (0,
|
|
3525
|
-
const [rowGrips, setRowGrips] = (0,
|
|
3526
|
-
const [dropdown, setDropdown] = (0,
|
|
3527
|
-
const [tableRect, setTableRect] = (0,
|
|
3528
|
-
const [isHovering, setIsHovering] = (0,
|
|
3529
|
-
const [drag, setDrag] = (0,
|
|
3530
|
-
const dropdownRef = (0,
|
|
3531
|
-
const dragRef = (0,
|
|
3532
|
-
const getTableDom = (0,
|
|
3543
|
+
const [colGrips, setColGrips] = (0, import_react35.useState)([]);
|
|
3544
|
+
const [rowGrips, setRowGrips] = (0, import_react35.useState)([]);
|
|
3545
|
+
const [dropdown, setDropdown] = (0, import_react35.useState)(null);
|
|
3546
|
+
const [tableRect, setTableRect] = (0, import_react35.useState)(null);
|
|
3547
|
+
const [isHovering, setIsHovering] = (0, import_react35.useState)(false);
|
|
3548
|
+
const [drag, setDrag] = (0, import_react35.useState)(null);
|
|
3549
|
+
const dropdownRef = (0, import_react35.useRef)(null);
|
|
3550
|
+
const dragRef = (0, import_react35.useRef)(null);
|
|
3551
|
+
const getTableDom = (0, import_react35.useCallback)(() => {
|
|
3533
3552
|
if (!editor || !tableInfo) return null;
|
|
3534
3553
|
return editor.view.nodeDOM(tableInfo.pos);
|
|
3535
3554
|
}, [editor, tableInfo]);
|
|
3536
|
-
const measureGrips = (0,
|
|
3555
|
+
const measureGrips = (0, import_react35.useCallback)(() => {
|
|
3537
3556
|
const tableDom = getTableDom();
|
|
3538
3557
|
if (!tableDom) {
|
|
3539
3558
|
setColGrips([]);
|
|
@@ -3570,7 +3589,7 @@ function TableMenu({ className: _className }) {
|
|
|
3570
3589
|
});
|
|
3571
3590
|
setRowGrips(newRowGrips);
|
|
3572
3591
|
}, [getTableDom]);
|
|
3573
|
-
(0,
|
|
3592
|
+
(0, import_react35.useEffect)(() => {
|
|
3574
3593
|
if (!tableInfo) {
|
|
3575
3594
|
setColGrips([]);
|
|
3576
3595
|
setRowGrips([]);
|
|
@@ -3604,7 +3623,7 @@ function TableMenu({ className: _className }) {
|
|
|
3604
3623
|
window.removeEventListener("scroll", handleScroll);
|
|
3605
3624
|
};
|
|
3606
3625
|
}, [tableInfo, getTableDom, measureGrips]);
|
|
3607
|
-
(0,
|
|
3626
|
+
(0, import_react35.useEffect)(() => {
|
|
3608
3627
|
if (!dropdown) return;
|
|
3609
3628
|
const handlePointerDown = (e) => {
|
|
3610
3629
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
|
@@ -3614,7 +3633,7 @@ function TableMenu({ className: _className }) {
|
|
|
3614
3633
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
3615
3634
|
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
|
3616
3635
|
}, [dropdown]);
|
|
3617
|
-
(0,
|
|
3636
|
+
(0, import_react35.useEffect)(() => {
|
|
3618
3637
|
if (!editor || !dropdown) return;
|
|
3619
3638
|
const handleTransaction = () => setDropdown(null);
|
|
3620
3639
|
editor.on("transaction", handleTransaction);
|
|
@@ -3622,7 +3641,7 @@ function TableMenu({ className: _className }) {
|
|
|
3622
3641
|
editor.off("transaction", handleTransaction);
|
|
3623
3642
|
};
|
|
3624
3643
|
}, [editor, dropdown]);
|
|
3625
|
-
const handleColGripClick = (0,
|
|
3644
|
+
const handleColGripClick = (0, import_react35.useCallback)(
|
|
3626
3645
|
(index, e) => {
|
|
3627
3646
|
e.preventDefault();
|
|
3628
3647
|
e.stopPropagation();
|
|
@@ -3646,7 +3665,7 @@ function TableMenu({ className: _className }) {
|
|
|
3646
3665
|
},
|
|
3647
3666
|
[editor, tableInfo, getTableDom]
|
|
3648
3667
|
);
|
|
3649
|
-
const handleRowGripClick = (0,
|
|
3668
|
+
const handleRowGripClick = (0, import_react35.useCallback)(
|
|
3650
3669
|
(index, e) => {
|
|
3651
3670
|
e.preventDefault();
|
|
3652
3671
|
e.stopPropagation();
|
|
@@ -3671,7 +3690,7 @@ function TableMenu({ className: _className }) {
|
|
|
3671
3690
|
},
|
|
3672
3691
|
[editor, tableInfo, getTableDom]
|
|
3673
3692
|
);
|
|
3674
|
-
const moveColumn = (0,
|
|
3693
|
+
const moveColumn = (0, import_react35.useCallback)(
|
|
3675
3694
|
(from, to) => {
|
|
3676
3695
|
if (!editor || !tableInfo || from === to) return;
|
|
3677
3696
|
const { state } = editor;
|
|
@@ -3698,7 +3717,7 @@ function TableMenu({ className: _className }) {
|
|
|
3698
3717
|
},
|
|
3699
3718
|
[editor, tableInfo]
|
|
3700
3719
|
);
|
|
3701
|
-
const moveRow = (0,
|
|
3720
|
+
const moveRow = (0, import_react35.useCallback)(
|
|
3702
3721
|
(from, to) => {
|
|
3703
3722
|
if (!editor || !tableInfo || from === to) return;
|
|
3704
3723
|
const { state } = editor;
|
|
@@ -3721,7 +3740,7 @@ function TableMenu({ className: _className }) {
|
|
|
3721
3740
|
},
|
|
3722
3741
|
[editor, tableInfo]
|
|
3723
3742
|
);
|
|
3724
|
-
const handleGripDragStart = (0,
|
|
3743
|
+
const handleGripDragStart = (0, import_react35.useCallback)(
|
|
3725
3744
|
(type, index, e) => {
|
|
3726
3745
|
e.preventDefault();
|
|
3727
3746
|
e.stopPropagation();
|
|
@@ -4017,9 +4036,44 @@ function TableMenu({ className: _className }) {
|
|
|
4017
4036
|
);
|
|
4018
4037
|
}
|
|
4019
4038
|
|
|
4020
|
-
// src/react/
|
|
4021
|
-
var
|
|
4039
|
+
// src/react/menus/TaskItem/TaskItemView.tsx
|
|
4040
|
+
var import_react36 = require("@tiptap/react");
|
|
4022
4041
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
4042
|
+
var createTaskItemView = (Checkbox) => {
|
|
4043
|
+
const TaskItemView = ({ node, updateAttributes }) => {
|
|
4044
|
+
const checked = !!node.attrs.checked;
|
|
4045
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
4046
|
+
import_react36.NodeViewWrapper,
|
|
4047
|
+
{
|
|
4048
|
+
as: "li",
|
|
4049
|
+
"data-checked": checked,
|
|
4050
|
+
className: "nph-task-item",
|
|
4051
|
+
children: [
|
|
4052
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { contentEditable: false, className: "nph-task-item__checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4053
|
+
Checkbox,
|
|
4054
|
+
{
|
|
4055
|
+
checked,
|
|
4056
|
+
onCheckedChange: (value) => updateAttributes({ checked: value === true })
|
|
4057
|
+
}
|
|
4058
|
+
) }),
|
|
4059
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4060
|
+
import_react36.NodeViewContent,
|
|
4061
|
+
{
|
|
4062
|
+
as: "div",
|
|
4063
|
+
className: "nph-task-item__content" + (checked ? " nph-task-item__content--checked" : "")
|
|
4064
|
+
}
|
|
4065
|
+
)
|
|
4066
|
+
]
|
|
4067
|
+
}
|
|
4068
|
+
);
|
|
4069
|
+
};
|
|
4070
|
+
TaskItemView.displayName = "TaskItemView";
|
|
4071
|
+
return TaskItemView;
|
|
4072
|
+
};
|
|
4073
|
+
|
|
4074
|
+
// src/react/Editor.tsx
|
|
4075
|
+
var import_react37 = require("react");
|
|
4076
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4023
4077
|
function Editor5({
|
|
4024
4078
|
content,
|
|
4025
4079
|
className,
|
|
@@ -4039,12 +4093,19 @@ function Editor5({
|
|
|
4039
4093
|
mentionOptions,
|
|
4040
4094
|
referenceOptions,
|
|
4041
4095
|
slashCommand,
|
|
4042
|
-
placeholder
|
|
4096
|
+
placeholder,
|
|
4097
|
+
taskItemView,
|
|
4098
|
+
checkboxComponent
|
|
4043
4099
|
}) {
|
|
4044
|
-
const
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4100
|
+
const resolvedTaskItemView = (0, import_react37.useMemo)(() => {
|
|
4101
|
+
if (taskItemView) return taskItemView;
|
|
4102
|
+
if (checkboxComponent) return createTaskItemView(checkboxComponent);
|
|
4103
|
+
return void 0;
|
|
4104
|
+
}, [taskItemView, checkboxComponent]);
|
|
4105
|
+
const [actionMenuAnchor, setActionMenuAnchor] = (0, import_react37.useState)(null);
|
|
4106
|
+
const [actionMenuEditor, setActionMenuEditor] = (0, import_react37.useState)(null);
|
|
4107
|
+
const actionMenuRef = (0, import_react37.useRef)(null);
|
|
4108
|
+
(0, import_react37.useEffect)(() => {
|
|
4048
4109
|
if (!actionMenuAnchor) return;
|
|
4049
4110
|
const handlePointerDown = (e) => {
|
|
4050
4111
|
if (actionMenuRef.current && !actionMenuRef.current.contains(e.target)) {
|
|
@@ -4054,7 +4115,7 @@ function Editor5({
|
|
|
4054
4115
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
4055
4116
|
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
|
4056
4117
|
}, [actionMenuAnchor]);
|
|
4057
|
-
const dragHandleCallbacks = (0,
|
|
4118
|
+
const dragHandleCallbacks = (0, import_react37.useMemo)(
|
|
4058
4119
|
() => ({
|
|
4059
4120
|
onAddBlock: (editor) => {
|
|
4060
4121
|
const { state } = editor;
|
|
@@ -4092,11 +4153,11 @@ function Editor5({
|
|
|
4092
4153
|
};
|
|
4093
4154
|
const textExtras = normalizeExtras(bubbleMenuExtras?.text);
|
|
4094
4155
|
const imageExtras = normalizeExtras(bubbleMenuExtras?.image);
|
|
4095
|
-
const handleCloseActionMenu = (0,
|
|
4156
|
+
const handleCloseActionMenu = (0, import_react37.useCallback)(() => {
|
|
4096
4157
|
setActionMenuAnchor(null);
|
|
4097
4158
|
}, []);
|
|
4098
|
-
return /* @__PURE__ */ (0,
|
|
4099
|
-
/* @__PURE__ */ (0,
|
|
4159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className, children: [
|
|
4160
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EditorRoot, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
4100
4161
|
EditorContent,
|
|
4101
4162
|
{
|
|
4102
4163
|
onUpdate,
|
|
@@ -4111,6 +4172,7 @@ function Editor5({
|
|
|
4111
4172
|
collaboration,
|
|
4112
4173
|
imageBlockView: ImageBlockView,
|
|
4113
4174
|
videoBlockView: VideoBlockView,
|
|
4175
|
+
taskItemView: resolvedTaskItemView,
|
|
4114
4176
|
mention: mentionOptions,
|
|
4115
4177
|
reference: referenceOptions,
|
|
4116
4178
|
slashCommand,
|
|
@@ -4129,27 +4191,27 @@ function Editor5({
|
|
|
4129
4191
|
}
|
|
4130
4192
|
},
|
|
4131
4193
|
children: [
|
|
4132
|
-
showTextMenu ? /* @__PURE__ */ (0,
|
|
4194
|
+
showTextMenu ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4133
4195
|
TextMenu,
|
|
4134
4196
|
{
|
|
4135
4197
|
leadingExtras: textExtras.start,
|
|
4136
4198
|
trailingExtras: textExtras.end
|
|
4137
4199
|
}
|
|
4138
4200
|
) : null,
|
|
4139
|
-
showImageMenu ? /* @__PURE__ */ (0,
|
|
4201
|
+
showImageMenu ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4140
4202
|
ImageMenu,
|
|
4141
4203
|
{
|
|
4142
4204
|
leadingExtras: imageExtras.start,
|
|
4143
4205
|
trailingExtras: imageExtras.end
|
|
4144
4206
|
}
|
|
4145
4207
|
) : null,
|
|
4146
|
-
/* @__PURE__ */ (0,
|
|
4147
|
-
/* @__PURE__ */ (0,
|
|
4148
|
-
showSlashMenu ? /* @__PURE__ */ (0,
|
|
4208
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LinkMenu, {}),
|
|
4209
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TableMenu, {}),
|
|
4210
|
+
showSlashMenu ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SlashMenu, {}) : null
|
|
4149
4211
|
]
|
|
4150
4212
|
}
|
|
4151
4213
|
) }),
|
|
4152
|
-
actionMenuAnchor && actionMenuEditor && /* @__PURE__ */ (0,
|
|
4214
|
+
actionMenuAnchor && actionMenuEditor && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4153
4215
|
"div",
|
|
4154
4216
|
{
|
|
4155
4217
|
ref: actionMenuRef,
|
|
@@ -4159,7 +4221,7 @@ function Editor5({
|
|
|
4159
4221
|
top: actionMenuAnchor.getBoundingClientRect().bottom + 4,
|
|
4160
4222
|
left: actionMenuAnchor.getBoundingClientRect().left
|
|
4161
4223
|
},
|
|
4162
|
-
children: /* @__PURE__ */ (0,
|
|
4224
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
4163
4225
|
BlockActionMenu,
|
|
4164
4226
|
{
|
|
4165
4227
|
editor: actionMenuEditor,
|
|
@@ -4172,18 +4234,18 @@ function Editor5({
|
|
|
4172
4234
|
}
|
|
4173
4235
|
|
|
4174
4236
|
// src/react/TableOfContents.tsx
|
|
4175
|
-
var
|
|
4176
|
-
var
|
|
4177
|
-
var
|
|
4237
|
+
var import_react38 = require("@tiptap/react");
|
|
4238
|
+
var import_react39 = require("react");
|
|
4239
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4178
4240
|
function TableOfContents({
|
|
4179
4241
|
className,
|
|
4180
4242
|
itemClassName,
|
|
4181
4243
|
activeClassName
|
|
4182
4244
|
}) {
|
|
4183
|
-
const { editor } = (0,
|
|
4184
|
-
const [activeId, setActiveId] = (0,
|
|
4185
|
-
const observerRef = (0,
|
|
4186
|
-
const headings = (0,
|
|
4245
|
+
const { editor } = (0, import_react38.useCurrentEditor)();
|
|
4246
|
+
const [activeId, setActiveId] = (0, import_react39.useState)(null);
|
|
4247
|
+
const observerRef = (0, import_react39.useRef)(null);
|
|
4248
|
+
const headings = (0, import_react38.useEditorState)({
|
|
4187
4249
|
editor,
|
|
4188
4250
|
selector: (ctx) => {
|
|
4189
4251
|
if (!ctx.editor) return [];
|
|
@@ -4202,7 +4264,7 @@ function TableOfContents({
|
|
|
4202
4264
|
return items;
|
|
4203
4265
|
}
|
|
4204
4266
|
});
|
|
4205
|
-
(0,
|
|
4267
|
+
(0, import_react39.useEffect)(() => {
|
|
4206
4268
|
if (!editor || !headings || headings.length === 0) return;
|
|
4207
4269
|
observerRef.current?.disconnect();
|
|
4208
4270
|
const callback = (entries) => {
|
|
@@ -4233,7 +4295,7 @@ function TableOfContents({
|
|
|
4233
4295
|
observer.disconnect();
|
|
4234
4296
|
};
|
|
4235
4297
|
}, [editor, headings]);
|
|
4236
|
-
const handleClick = (0,
|
|
4298
|
+
const handleClick = (0, import_react39.useCallback)(
|
|
4237
4299
|
(pos) => {
|
|
4238
4300
|
if (!editor) return;
|
|
4239
4301
|
editor.chain().focus().setTextSelection(pos + 1).run();
|
|
@@ -4248,13 +4310,13 @@ function TableOfContents({
|
|
|
4248
4310
|
[editor]
|
|
4249
4311
|
);
|
|
4250
4312
|
if (!editor || !headings || headings.length === 0) return null;
|
|
4251
|
-
return /* @__PURE__ */ (0,
|
|
4313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { className: className ?? "nph-toc", children: headings.map((heading) => {
|
|
4252
4314
|
const isActive = activeId === heading.id;
|
|
4253
4315
|
const itemClass = [
|
|
4254
4316
|
itemClassName ?? "nph-toc__item",
|
|
4255
4317
|
isActive ? activeClassName ?? "nph-toc__item--active" : ""
|
|
4256
4318
|
].filter(Boolean).join(" ");
|
|
4257
|
-
return /* @__PURE__ */ (0,
|
|
4319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4258
4320
|
"button",
|
|
4259
4321
|
{
|
|
4260
4322
|
type: "button",
|