@cyberyozh/text-editor 0.1.10 → 0.1.12
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/editor.css +65 -0
- package/dist/editor.css.map +1 -1
- package/dist/editor.js +294 -122
- package/dist/editor.js.map +1 -1
- package/dist/editor.mjs +254 -82
- package/dist/editor.mjs.map +1 -1
- package/dist/render.js +34 -75
- package/dist/render.js.map +1 -1
- package/dist/render.mjs +32 -73
- package/dist/render.mjs.map +1 -1
- package/dist/styles/index.css +65 -0
- package/package.json +1 -1
- package/src/editor/dialogs/image-dialog/image-dialog.tsx +25 -3
- package/src/extensions/base/figure.ts +5 -5
- package/src/extensions/editor/figure.ts +184 -1
- package/src/extensions/editor/get-editor-extensions.ts +8 -2
- package/src/extensions/editor/index.ts +0 -24
- package/src/extensions/render/get-render-extensions.ts +1 -2
- package/src/extensions/views/components/index.ts +0 -1
- package/src/extensions/views/node-views/figure.tsx +1 -1
- package/src/render/static-renderer-config.tsx +0 -4
- package/src/styles/extensions/figure.css +77 -0
- package/src/extensions/views/components/table.tsx +0 -74
package/dist/render.js
CHANGED
|
@@ -35,7 +35,7 @@ __export(render_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(render_exports);
|
|
36
36
|
|
|
37
37
|
// src/render/tiptap-render.tsx
|
|
38
|
-
var
|
|
38
|
+
var import_react2 = require("@tiptap/static-renderer/pm/react");
|
|
39
39
|
|
|
40
40
|
// src/extensions/render/get-render-extensions.ts
|
|
41
41
|
var import_extension_mathematics = require("@tiptap/extension-mathematics");
|
|
@@ -664,8 +664,9 @@ var BaseFigure = import_extension_image.default.extend({
|
|
|
664
664
|
isolating: true,
|
|
665
665
|
selectable: false,
|
|
666
666
|
addOptions() {
|
|
667
|
+
const parentOptions = this.parent?.() || {};
|
|
667
668
|
return {
|
|
668
|
-
|
|
669
|
+
...parentOptions,
|
|
669
670
|
getImageById: void 0,
|
|
670
671
|
onFigureClick: void 0
|
|
671
672
|
};
|
|
@@ -1598,9 +1599,8 @@ function getRenderExtensions() {
|
|
|
1598
1599
|
BasePromptContent,
|
|
1599
1600
|
BaseVideo,
|
|
1600
1601
|
BaseFigure,
|
|
1601
|
-
// Need to update
|
|
1602
1602
|
import_extension_table.TableKit.configure({
|
|
1603
|
-
table: { resizable: false }
|
|
1603
|
+
table: { resizable: false, renderWrapper: true }
|
|
1604
1604
|
}),
|
|
1605
1605
|
import_extension_mathematics.Mathematics.configure({
|
|
1606
1606
|
katexOptions: {
|
|
@@ -2281,44 +2281,6 @@ var PromptContent = ({ children, isEmpty, placeholder }) => /* @__PURE__ */ (0,
|
|
|
2281
2281
|
}
|
|
2282
2282
|
) });
|
|
2283
2283
|
|
|
2284
|
-
// src/extensions/views/components/table.tsx
|
|
2285
|
-
var import_react2 = require("react");
|
|
2286
|
-
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
2287
|
-
function Table({ children }) {
|
|
2288
|
-
const wrapperRef = (0, import_react2.useRef)(null);
|
|
2289
|
-
const [undefinedColWidth, setUndefinedColWidth] = (0, import_react2.useState)(void 0);
|
|
2290
|
-
let colWidths = [];
|
|
2291
|
-
if (Array.isArray(children) && children.length > 0) {
|
|
2292
|
-
const firstRow = children[0];
|
|
2293
|
-
if (firstRow?.props?.children) {
|
|
2294
|
-
const cells = Array.isArray(firstRow.props.children) ? firstRow.props.children : [firstRow.props.children];
|
|
2295
|
-
colWidths = cells.map((cell) => cell?.props?.node?.attrs?.colwidth?.[0]);
|
|
2296
|
-
}
|
|
2297
|
-
}
|
|
2298
|
-
const definedWidths = colWidths.filter((w) => w !== void 0);
|
|
2299
|
-
const totalDefinedWidth = definedWidths.reduce((total, width) => total + width, 0);
|
|
2300
|
-
const undefinedCount = colWidths.filter((w) => w === void 0).length;
|
|
2301
|
-
(0, import_react2.useEffect)(() => {
|
|
2302
|
-
if (wrapperRef.current && undefinedCount > 0) {
|
|
2303
|
-
const containerWidth = wrapperRef.current.clientWidth;
|
|
2304
|
-
const remainingSpace = containerWidth - totalDefinedWidth;
|
|
2305
|
-
const calculatedWidth = Math.floor(remainingSpace / undefinedCount);
|
|
2306
|
-
setUndefinedColWidth(calculatedWidth > 0 ? calculatedWidth : void 0);
|
|
2307
|
-
}
|
|
2308
|
-
}, [totalDefinedWidth, undefinedCount]);
|
|
2309
|
-
const tableWidth = undefinedCount > 0 && undefinedColWidth ? totalDefinedWidth + undefinedColWidth * undefinedCount : totalDefinedWidth > 0 ? totalDefinedWidth : void 0;
|
|
2310
|
-
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ref: wrapperRef, className: "tableWrapper", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("table", { style: tableWidth ? { width: `${tableWidth}px` } : void 0, children: [
|
|
2311
|
-
colWidths.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
2312
|
-
"col",
|
|
2313
|
-
{
|
|
2314
|
-
style: width ? { width: `${width}px` } : undefinedColWidth ? { width: `${undefinedColWidth}px` } : void 0
|
|
2315
|
-
},
|
|
2316
|
-
index
|
|
2317
|
-
)) }),
|
|
2318
|
-
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tbody", { children })
|
|
2319
|
-
] }) });
|
|
2320
|
-
}
|
|
2321
|
-
|
|
2322
2284
|
// src/utils/detect-video-hosting.ts
|
|
2323
2285
|
var VIDEO_PATTERNS = {
|
|
2324
2286
|
youtube: /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|shorts\/)?([a-zA-Z0-9_-]{11})/,
|
|
@@ -2391,22 +2353,22 @@ var detectVideoHosting = (src) => {
|
|
|
2391
2353
|
};
|
|
2392
2354
|
|
|
2393
2355
|
// src/extensions/views/components/video.tsx
|
|
2394
|
-
var
|
|
2356
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
2395
2357
|
var Video = ({ src, children }) => {
|
|
2396
2358
|
const videoInfo = detectVideoHosting(src);
|
|
2397
2359
|
if (!videoInfo?.embedUrl) {
|
|
2398
|
-
return /* @__PURE__ */ (0,
|
|
2399
|
-
/* @__PURE__ */ (0,
|
|
2360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "video-node", children: [
|
|
2361
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "video-error", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: "Unsupported or invalid video URL" }) }),
|
|
2400
2362
|
children
|
|
2401
2363
|
] });
|
|
2402
2364
|
}
|
|
2403
|
-
return /* @__PURE__ */ (0,
|
|
2365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
2404
2366
|
"div",
|
|
2405
2367
|
{
|
|
2406
2368
|
className: "video-node",
|
|
2407
2369
|
"data-video": "",
|
|
2408
2370
|
children: [
|
|
2409
|
-
/* @__PURE__ */ (0,
|
|
2371
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "video-player-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
2410
2372
|
"iframe",
|
|
2411
2373
|
{
|
|
2412
2374
|
className: "video-iframe",
|
|
@@ -2423,10 +2385,10 @@ var Video = ({ src, children }) => {
|
|
|
2423
2385
|
};
|
|
2424
2386
|
|
|
2425
2387
|
// src/render/static-renderer-config.tsx
|
|
2426
|
-
var
|
|
2388
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
2427
2389
|
var getNodeMapping = (getImageById) => ({
|
|
2428
2390
|
callout({ node, children }) {
|
|
2429
|
-
return /* @__PURE__ */ (0,
|
|
2391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { ...node.attrs, children });
|
|
2430
2392
|
},
|
|
2431
2393
|
codeBlock({ node, children }) {
|
|
2432
2394
|
const language = node.attrs.language || "";
|
|
@@ -2450,41 +2412,38 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2450
2412
|
console.warn(`Failed to highlight code for language "${language}":`, error);
|
|
2451
2413
|
highlightedHtml = codeText.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
2452
2414
|
}
|
|
2453
|
-
return /* @__PURE__ */ (0,
|
|
2415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2454
2416
|
CodeBlock,
|
|
2455
2417
|
{
|
|
2456
2418
|
language,
|
|
2457
2419
|
isEditable: false,
|
|
2458
|
-
children: /* @__PURE__ */ (0,
|
|
2420
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("code", { dangerouslySetInnerHTML: { __html: highlightedHtml } })
|
|
2459
2421
|
}
|
|
2460
2422
|
);
|
|
2461
2423
|
},
|
|
2462
2424
|
customQuote({ children }) {
|
|
2463
|
-
return /* @__PURE__ */ (0,
|
|
2425
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuote, { children });
|
|
2464
2426
|
},
|
|
2465
2427
|
customQuoteText({ children }) {
|
|
2466
|
-
return /* @__PURE__ */ (0,
|
|
2428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteText, { children });
|
|
2467
2429
|
},
|
|
2468
2430
|
customQuoteAuthor({ children }) {
|
|
2469
|
-
return /* @__PURE__ */ (0,
|
|
2431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteAuthor, { children });
|
|
2470
2432
|
},
|
|
2471
2433
|
customQuoteSign({ children }) {
|
|
2472
|
-
return /* @__PURE__ */ (0,
|
|
2434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteSign, { children });
|
|
2473
2435
|
},
|
|
2474
2436
|
promptHeader({ children }) {
|
|
2475
|
-
return /* @__PURE__ */ (0,
|
|
2437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptHeader, { children });
|
|
2476
2438
|
},
|
|
2477
2439
|
promptContent({ children }) {
|
|
2478
|
-
return /* @__PURE__ */ (0,
|
|
2440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptContent, { children });
|
|
2479
2441
|
},
|
|
2480
2442
|
video({ node }) {
|
|
2481
|
-
return /* @__PURE__ */ (0,
|
|
2482
|
-
},
|
|
2483
|
-
table({ children }) {
|
|
2484
|
-
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Table, { children });
|
|
2443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Video, { src: node.attrs.src });
|
|
2485
2444
|
},
|
|
2486
2445
|
figure({ node }) {
|
|
2487
|
-
return /* @__PURE__ */ (0,
|
|
2446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2488
2447
|
Figure,
|
|
2489
2448
|
{
|
|
2490
2449
|
...node.attrs,
|
|
@@ -2493,7 +2452,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2493
2452
|
);
|
|
2494
2453
|
},
|
|
2495
2454
|
image({ node }) {
|
|
2496
|
-
return /* @__PURE__ */ (0,
|
|
2455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2497
2456
|
Figure,
|
|
2498
2457
|
{
|
|
2499
2458
|
...node.attrs,
|
|
@@ -2512,7 +2471,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2512
2471
|
} catch (error) {
|
|
2513
2472
|
console.warn("KaTeX rendering error for inline math:", error);
|
|
2514
2473
|
}
|
|
2515
|
-
return /* @__PURE__ */ (0,
|
|
2474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2516
2475
|
"span",
|
|
2517
2476
|
{
|
|
2518
2477
|
className: "react-renderer node-inlineMath",
|
|
@@ -2533,7 +2492,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2533
2492
|
} catch (error) {
|
|
2534
2493
|
console.warn("KaTeX rendering error for block math:", error);
|
|
2535
2494
|
}
|
|
2536
|
-
return /* @__PURE__ */ (0,
|
|
2495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "react-renderer node-blockMath", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2537
2496
|
"div",
|
|
2538
2497
|
{
|
|
2539
2498
|
className: "tiptap-mathematics-render",
|
|
@@ -2554,7 +2513,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2554
2513
|
} catch (error) {
|
|
2555
2514
|
console.warn("KaTeX rendering error for inline latex:", error);
|
|
2556
2515
|
}
|
|
2557
|
-
return /* @__PURE__ */ (0,
|
|
2516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2558
2517
|
"span",
|
|
2559
2518
|
{
|
|
2560
2519
|
className: "react-renderer node-inlineLatex inline-latex",
|
|
@@ -2567,33 +2526,33 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2567
2526
|
*/
|
|
2568
2527
|
calloutAlert({ node, children }) {
|
|
2569
2528
|
const type = node.attrs.type || "info";
|
|
2570
|
-
return /* @__PURE__ */ (0,
|
|
2529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { type, children });
|
|
2571
2530
|
},
|
|
2572
2531
|
calloutTip({ node, children }) {
|
|
2573
2532
|
const type = node.attrs.type || "info";
|
|
2574
|
-
return /* @__PURE__ */ (0,
|
|
2533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { type, children });
|
|
2575
2534
|
},
|
|
2576
2535
|
customQuoteV2({ children }) {
|
|
2577
|
-
return /* @__PURE__ */ (0,
|
|
2536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuote, { children });
|
|
2578
2537
|
},
|
|
2579
2538
|
promptV2Header({ children }) {
|
|
2580
|
-
return /* @__PURE__ */ (0,
|
|
2539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptHeader, { children });
|
|
2581
2540
|
},
|
|
2582
2541
|
promptV2Content({ children }) {
|
|
2583
|
-
return /* @__PURE__ */ (0,
|
|
2542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptContent, { children });
|
|
2584
2543
|
}
|
|
2585
2544
|
});
|
|
2586
2545
|
var nodeMapping = getNodeMapping();
|
|
2587
2546
|
var markMapping = {
|
|
2588
2547
|
"copyable-text"({ children }) {
|
|
2589
|
-
return /* @__PURE__ */ (0,
|
|
2548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CopyableText2, { children });
|
|
2590
2549
|
}
|
|
2591
2550
|
};
|
|
2592
2551
|
|
|
2593
2552
|
// src/render/tiptap-render.tsx
|
|
2594
2553
|
var import_github_dark = require("highlight.js/styles/github-dark.css");
|
|
2595
2554
|
var import_katex_min = require("katex/dist/katex.min.css");
|
|
2596
|
-
var
|
|
2555
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
2597
2556
|
function renderTiptapToReact(content, getImageById) {
|
|
2598
2557
|
let parsedContent;
|
|
2599
2558
|
try {
|
|
@@ -2606,7 +2565,7 @@ function renderTiptapToReact(content, getImageById) {
|
|
|
2606
2565
|
console.warn("Failed to parse Tiptap content:", error);
|
|
2607
2566
|
parsedContent = { type: "doc", content: [{ type: "paragraph" }] };
|
|
2608
2567
|
}
|
|
2609
|
-
const rendered = (0,
|
|
2568
|
+
const rendered = (0, import_react2.renderToReactElement)({
|
|
2610
2569
|
extensions: getRenderExtensions(),
|
|
2611
2570
|
content: parsedContent,
|
|
2612
2571
|
options: {
|
|
@@ -2614,7 +2573,7 @@ function renderTiptapToReact(content, getImageById) {
|
|
|
2614
2573
|
markMapping
|
|
2615
2574
|
}
|
|
2616
2575
|
});
|
|
2617
|
-
return /* @__PURE__ */ (0,
|
|
2576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2618
2577
|
"div",
|
|
2619
2578
|
{
|
|
2620
2579
|
className: "tiptap",
|