@cyberyozh/text-editor 0.1.11 → 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 -82
- package/dist/render.js.map +1 -1
- package/dist/render.mjs +32 -80
- 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 -75
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,51 +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 - 2;
|
|
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 + 2 : totalDefinedWidth > 0 ? totalDefinedWidth + 2 : void 0;
|
|
2310
|
-
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
2311
|
-
"div",
|
|
2312
|
-
{
|
|
2313
|
-
ref: wrapperRef,
|
|
2314
|
-
className: "tableWrapper",
|
|
2315
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("table", { style: tableWidth ? { width: `${tableWidth}px` } : void 0, children: [
|
|
2316
|
-
colWidths.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
2317
|
-
"col",
|
|
2318
|
-
{
|
|
2319
|
-
style: width ? { width: `${width}px` } : undefinedColWidth ? { width: `${undefinedColWidth}px` } : void 0
|
|
2320
|
-
},
|
|
2321
|
-
index
|
|
2322
|
-
)) }),
|
|
2323
|
-
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tbody", { children })
|
|
2324
|
-
] })
|
|
2325
|
-
}
|
|
2326
|
-
);
|
|
2327
|
-
}
|
|
2328
|
-
|
|
2329
2284
|
// src/utils/detect-video-hosting.ts
|
|
2330
2285
|
var VIDEO_PATTERNS = {
|
|
2331
2286
|
youtube: /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|shorts\/)?([a-zA-Z0-9_-]{11})/,
|
|
@@ -2398,22 +2353,22 @@ var detectVideoHosting = (src) => {
|
|
|
2398
2353
|
};
|
|
2399
2354
|
|
|
2400
2355
|
// src/extensions/views/components/video.tsx
|
|
2401
|
-
var
|
|
2356
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
2402
2357
|
var Video = ({ src, children }) => {
|
|
2403
2358
|
const videoInfo = detectVideoHosting(src);
|
|
2404
2359
|
if (!videoInfo?.embedUrl) {
|
|
2405
|
-
return /* @__PURE__ */ (0,
|
|
2406
|
-
/* @__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" }) }),
|
|
2407
2362
|
children
|
|
2408
2363
|
] });
|
|
2409
2364
|
}
|
|
2410
|
-
return /* @__PURE__ */ (0,
|
|
2365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
2411
2366
|
"div",
|
|
2412
2367
|
{
|
|
2413
2368
|
className: "video-node",
|
|
2414
2369
|
"data-video": "",
|
|
2415
2370
|
children: [
|
|
2416
|
-
/* @__PURE__ */ (0,
|
|
2371
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "video-player-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
2417
2372
|
"iframe",
|
|
2418
2373
|
{
|
|
2419
2374
|
className: "video-iframe",
|
|
@@ -2430,10 +2385,10 @@ var Video = ({ src, children }) => {
|
|
|
2430
2385
|
};
|
|
2431
2386
|
|
|
2432
2387
|
// src/render/static-renderer-config.tsx
|
|
2433
|
-
var
|
|
2388
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
2434
2389
|
var getNodeMapping = (getImageById) => ({
|
|
2435
2390
|
callout({ node, children }) {
|
|
2436
|
-
return /* @__PURE__ */ (0,
|
|
2391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { ...node.attrs, children });
|
|
2437
2392
|
},
|
|
2438
2393
|
codeBlock({ node, children }) {
|
|
2439
2394
|
const language = node.attrs.language || "";
|
|
@@ -2457,41 +2412,38 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2457
2412
|
console.warn(`Failed to highlight code for language "${language}":`, error);
|
|
2458
2413
|
highlightedHtml = codeText.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
2459
2414
|
}
|
|
2460
|
-
return /* @__PURE__ */ (0,
|
|
2415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2461
2416
|
CodeBlock,
|
|
2462
2417
|
{
|
|
2463
2418
|
language,
|
|
2464
2419
|
isEditable: false,
|
|
2465
|
-
children: /* @__PURE__ */ (0,
|
|
2420
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("code", { dangerouslySetInnerHTML: { __html: highlightedHtml } })
|
|
2466
2421
|
}
|
|
2467
2422
|
);
|
|
2468
2423
|
},
|
|
2469
2424
|
customQuote({ children }) {
|
|
2470
|
-
return /* @__PURE__ */ (0,
|
|
2425
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuote, { children });
|
|
2471
2426
|
},
|
|
2472
2427
|
customQuoteText({ children }) {
|
|
2473
|
-
return /* @__PURE__ */ (0,
|
|
2428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteText, { children });
|
|
2474
2429
|
},
|
|
2475
2430
|
customQuoteAuthor({ children }) {
|
|
2476
|
-
return /* @__PURE__ */ (0,
|
|
2431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteAuthor, { children });
|
|
2477
2432
|
},
|
|
2478
2433
|
customQuoteSign({ children }) {
|
|
2479
|
-
return /* @__PURE__ */ (0,
|
|
2434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteSign, { children });
|
|
2480
2435
|
},
|
|
2481
2436
|
promptHeader({ children }) {
|
|
2482
|
-
return /* @__PURE__ */ (0,
|
|
2437
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptHeader, { children });
|
|
2483
2438
|
},
|
|
2484
2439
|
promptContent({ children }) {
|
|
2485
|
-
return /* @__PURE__ */ (0,
|
|
2440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptContent, { children });
|
|
2486
2441
|
},
|
|
2487
2442
|
video({ node }) {
|
|
2488
|
-
return /* @__PURE__ */ (0,
|
|
2489
|
-
},
|
|
2490
|
-
table({ children }) {
|
|
2491
|
-
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Table, { children });
|
|
2443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Video, { src: node.attrs.src });
|
|
2492
2444
|
},
|
|
2493
2445
|
figure({ node }) {
|
|
2494
|
-
return /* @__PURE__ */ (0,
|
|
2446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2495
2447
|
Figure,
|
|
2496
2448
|
{
|
|
2497
2449
|
...node.attrs,
|
|
@@ -2500,7 +2452,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2500
2452
|
);
|
|
2501
2453
|
},
|
|
2502
2454
|
image({ node }) {
|
|
2503
|
-
return /* @__PURE__ */ (0,
|
|
2455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2504
2456
|
Figure,
|
|
2505
2457
|
{
|
|
2506
2458
|
...node.attrs,
|
|
@@ -2519,7 +2471,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2519
2471
|
} catch (error) {
|
|
2520
2472
|
console.warn("KaTeX rendering error for inline math:", error);
|
|
2521
2473
|
}
|
|
2522
|
-
return /* @__PURE__ */ (0,
|
|
2474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2523
2475
|
"span",
|
|
2524
2476
|
{
|
|
2525
2477
|
className: "react-renderer node-inlineMath",
|
|
@@ -2540,7 +2492,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2540
2492
|
} catch (error) {
|
|
2541
2493
|
console.warn("KaTeX rendering error for block math:", error);
|
|
2542
2494
|
}
|
|
2543
|
-
return /* @__PURE__ */ (0,
|
|
2495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "react-renderer node-blockMath", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2544
2496
|
"div",
|
|
2545
2497
|
{
|
|
2546
2498
|
className: "tiptap-mathematics-render",
|
|
@@ -2561,7 +2513,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2561
2513
|
} catch (error) {
|
|
2562
2514
|
console.warn("KaTeX rendering error for inline latex:", error);
|
|
2563
2515
|
}
|
|
2564
|
-
return /* @__PURE__ */ (0,
|
|
2516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2565
2517
|
"span",
|
|
2566
2518
|
{
|
|
2567
2519
|
className: "react-renderer node-inlineLatex inline-latex",
|
|
@@ -2574,33 +2526,33 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2574
2526
|
*/
|
|
2575
2527
|
calloutAlert({ node, children }) {
|
|
2576
2528
|
const type = node.attrs.type || "info";
|
|
2577
|
-
return /* @__PURE__ */ (0,
|
|
2529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { type, children });
|
|
2578
2530
|
},
|
|
2579
2531
|
calloutTip({ node, children }) {
|
|
2580
2532
|
const type = node.attrs.type || "info";
|
|
2581
|
-
return /* @__PURE__ */ (0,
|
|
2533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { type, children });
|
|
2582
2534
|
},
|
|
2583
2535
|
customQuoteV2({ children }) {
|
|
2584
|
-
return /* @__PURE__ */ (0,
|
|
2536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuote, { children });
|
|
2585
2537
|
},
|
|
2586
2538
|
promptV2Header({ children }) {
|
|
2587
|
-
return /* @__PURE__ */ (0,
|
|
2539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptHeader, { children });
|
|
2588
2540
|
},
|
|
2589
2541
|
promptV2Content({ children }) {
|
|
2590
|
-
return /* @__PURE__ */ (0,
|
|
2542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptContent, { children });
|
|
2591
2543
|
}
|
|
2592
2544
|
});
|
|
2593
2545
|
var nodeMapping = getNodeMapping();
|
|
2594
2546
|
var markMapping = {
|
|
2595
2547
|
"copyable-text"({ children }) {
|
|
2596
|
-
return /* @__PURE__ */ (0,
|
|
2548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CopyableText2, { children });
|
|
2597
2549
|
}
|
|
2598
2550
|
};
|
|
2599
2551
|
|
|
2600
2552
|
// src/render/tiptap-render.tsx
|
|
2601
2553
|
var import_github_dark = require("highlight.js/styles/github-dark.css");
|
|
2602
2554
|
var import_katex_min = require("katex/dist/katex.min.css");
|
|
2603
|
-
var
|
|
2555
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
2604
2556
|
function renderTiptapToReact(content, getImageById) {
|
|
2605
2557
|
let parsedContent;
|
|
2606
2558
|
try {
|
|
@@ -2613,7 +2565,7 @@ function renderTiptapToReact(content, getImageById) {
|
|
|
2613
2565
|
console.warn("Failed to parse Tiptap content:", error);
|
|
2614
2566
|
parsedContent = { type: "doc", content: [{ type: "paragraph" }] };
|
|
2615
2567
|
}
|
|
2616
|
-
const rendered = (0,
|
|
2568
|
+
const rendered = (0, import_react2.renderToReactElement)({
|
|
2617
2569
|
extensions: getRenderExtensions(),
|
|
2618
2570
|
content: parsedContent,
|
|
2619
2571
|
options: {
|
|
@@ -2621,7 +2573,7 @@ function renderTiptapToReact(content, getImageById) {
|
|
|
2621
2573
|
markMapping
|
|
2622
2574
|
}
|
|
2623
2575
|
});
|
|
2624
|
-
return /* @__PURE__ */ (0,
|
|
2576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2625
2577
|
"div",
|
|
2626
2578
|
{
|
|
2627
2579
|
className: "tiptap",
|