@cyberyozh/text-editor 0.1.5 → 0.1.7
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 +46 -20
- package/dist/editor.css.map +1 -1
- package/dist/editor.js +505 -430
- package/dist/editor.js.map +1 -1
- package/dist/editor.mjs +506 -431
- package/dist/editor.mjs.map +1 -1
- package/dist/render.js +62 -29
- package/dist/render.js.map +1 -1
- package/dist/render.mjs +62 -29
- package/dist/render.mjs.map +1 -1
- package/dist/styles/index.css +46 -20
- package/package.json +5 -1
- package/src/editor/commands/items.ts +1 -1
- package/src/editor/components/common-modal/common-modal.css +2 -1
- package/src/editor/context/dialog-command.tsx +0 -2
- package/src/editor/controls/bubble-menu-content.tsx +6 -2
- package/src/editor/controls/commands-list.tsx +7 -0
- package/src/editor/dialogs/add-video-dialog/add-video-dialog.tsx +2 -5
- package/src/editor/editor.tsx +69 -44
- package/src/editor/handlers/dialog-handlers.ts +118 -36
- package/src/extensions/views/components/index.ts +1 -0
- package/src/extensions/views/components/table.tsx +29 -0
- package/src/render/static-renderer-config.tsx +32 -2
- package/src/styles/editor/base.css +7 -5
- package/src/styles/editor/states.css +4 -3
- package/src/styles/editor/typography.css +10 -2
- package/src/styles/editor/variables.css +1 -0
- package/src/styles/extensions/callout.css +5 -2
- package/src/styles/extensions/code-block.css +2 -1
- package/src/styles/extensions/commands-list.css +5 -1
- package/src/styles/extensions/custom-quote.css +5 -0
- package/src/styles/extensions/details.css +4 -4
- package/src/styles/extensions/myth-reality.css +3 -1
- package/src/styles/extensions/prompt.css +4 -1
package/dist/render.js
CHANGED
|
@@ -2222,6 +2222,16 @@ var PromptContent = ({ children, isEmpty, placeholder }) => /* @__PURE__ */ (0,
|
|
|
2222
2222
|
}
|
|
2223
2223
|
) });
|
|
2224
2224
|
|
|
2225
|
+
// src/extensions/views/components/table.tsx
|
|
2226
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
2227
|
+
function Table({ children, colWidths = [] }) {
|
|
2228
|
+
const tableWidth = colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
|
|
2229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "tableWrapper", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("table", { style: tableWidth ? { width: `${tableWidth}px` } : void 0, children: [
|
|
2230
|
+
colWidths.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("col", { style: { width: `${width}px` } }, index)) }),
|
|
2231
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tbody", { children })
|
|
2232
|
+
] }) });
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2225
2235
|
// src/utils/detect-video-hosting.ts
|
|
2226
2236
|
var VIDEO_PATTERNS = {
|
|
2227
2237
|
youtube: /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|shorts\/)?([a-zA-Z0-9_-]{11})/,
|
|
@@ -2294,22 +2304,22 @@ var detectVideoHosting = (src) => {
|
|
|
2294
2304
|
};
|
|
2295
2305
|
|
|
2296
2306
|
// src/extensions/views/components/video.tsx
|
|
2297
|
-
var
|
|
2307
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
2298
2308
|
var Video = ({ src, children }) => {
|
|
2299
2309
|
const videoInfo = detectVideoHosting(src);
|
|
2300
2310
|
if (!videoInfo?.embedUrl) {
|
|
2301
|
-
return /* @__PURE__ */ (0,
|
|
2302
|
-
/* @__PURE__ */ (0,
|
|
2311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "video-node", children: [
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "video-error", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "Unsupported or invalid video URL" }) }),
|
|
2303
2313
|
children
|
|
2304
2314
|
] });
|
|
2305
2315
|
}
|
|
2306
|
-
return /* @__PURE__ */ (0,
|
|
2316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
|
|
2307
2317
|
"div",
|
|
2308
2318
|
{
|
|
2309
2319
|
className: "video-node",
|
|
2310
2320
|
"data-video": "",
|
|
2311
2321
|
children: [
|
|
2312
|
-
/* @__PURE__ */ (0,
|
|
2322
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "video-player-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
2313
2323
|
"iframe",
|
|
2314
2324
|
{
|
|
2315
2325
|
className: "video-iframe",
|
|
@@ -2326,10 +2336,10 @@ var Video = ({ src, children }) => {
|
|
|
2326
2336
|
};
|
|
2327
2337
|
|
|
2328
2338
|
// src/render/static-renderer-config.tsx
|
|
2329
|
-
var
|
|
2339
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
2330
2340
|
var getNodeMapping = (getImageById) => ({
|
|
2331
2341
|
callout({ node, children }) {
|
|
2332
|
-
return /* @__PURE__ */ (0,
|
|
2342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Callout, { ...node.attrs, children });
|
|
2333
2343
|
},
|
|
2334
2344
|
codeBlock({ node, children }) {
|
|
2335
2345
|
const language = node.attrs.language || "";
|
|
@@ -2353,41 +2363,64 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2353
2363
|
console.warn(`Failed to highlight code for language "${language}":`, error);
|
|
2354
2364
|
highlightedHtml = codeText.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
2355
2365
|
}
|
|
2356
|
-
return /* @__PURE__ */ (0,
|
|
2366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2357
2367
|
CodeBlock,
|
|
2358
2368
|
{
|
|
2359
2369
|
language,
|
|
2360
2370
|
isEditable: false,
|
|
2361
|
-
children: /* @__PURE__ */ (0,
|
|
2371
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { dangerouslySetInnerHTML: { __html: highlightedHtml } })
|
|
2362
2372
|
}
|
|
2363
2373
|
);
|
|
2364
2374
|
},
|
|
2365
2375
|
customQuote({ children }) {
|
|
2366
|
-
return /* @__PURE__ */ (0,
|
|
2376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuote, { children });
|
|
2367
2377
|
},
|
|
2368
2378
|
customQuoteText({ children }) {
|
|
2369
|
-
return /* @__PURE__ */ (0,
|
|
2379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuoteText, { children });
|
|
2370
2380
|
},
|
|
2371
2381
|
customQuoteAuthor({ children }) {
|
|
2372
|
-
return /* @__PURE__ */ (0,
|
|
2382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuoteAuthor, { children });
|
|
2373
2383
|
},
|
|
2374
2384
|
customQuoteSign({ children }) {
|
|
2375
|
-
return /* @__PURE__ */ (0,
|
|
2385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuoteSign, { children });
|
|
2376
2386
|
},
|
|
2377
2387
|
promptHeader({ children }) {
|
|
2378
|
-
return /* @__PURE__ */ (0,
|
|
2388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptHeader, { children });
|
|
2379
2389
|
},
|
|
2380
2390
|
promptContent({ children }) {
|
|
2381
|
-
return /* @__PURE__ */ (0,
|
|
2391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptContent, { children });
|
|
2382
2392
|
},
|
|
2383
2393
|
video({ node }) {
|
|
2384
|
-
return /* @__PURE__ */ (0,
|
|
2394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Video, { src: node.attrs.src });
|
|
2395
|
+
},
|
|
2396
|
+
table({ children }) {
|
|
2397
|
+
let colWidths = [];
|
|
2398
|
+
if (Array.isArray(children) && children.length > 0) {
|
|
2399
|
+
const firstRow = children[0];
|
|
2400
|
+
if (firstRow?.props?.children) {
|
|
2401
|
+
const cells = Array.isArray(firstRow.props.children) ? firstRow.props.children : [firstRow.props.children];
|
|
2402
|
+
colWidths = cells.map((cell) => cell?.props?.node?.attrs?.colwidth?.[0]).filter((width) => width !== void 0);
|
|
2403
|
+
}
|
|
2404
|
+
}
|
|
2405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Table, { colWidths, children });
|
|
2385
2406
|
},
|
|
2386
2407
|
figure({ node }) {
|
|
2387
|
-
return /* @__PURE__ */ (0,
|
|
2408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2409
|
+
Figure,
|
|
2410
|
+
{
|
|
2411
|
+
...node.attrs,
|
|
2412
|
+
getImageById
|
|
2413
|
+
}
|
|
2414
|
+
);
|
|
2388
2415
|
},
|
|
2389
2416
|
image({ node }) {
|
|
2390
|
-
return /* @__PURE__ */ (0,
|
|
2417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2418
|
+
Figure,
|
|
2419
|
+
{
|
|
2420
|
+
...node.attrs,
|
|
2421
|
+
getImageById
|
|
2422
|
+
}
|
|
2423
|
+
);
|
|
2391
2424
|
},
|
|
2392
2425
|
inlineMath({ node }) {
|
|
2393
2426
|
const latex = node.attrs.latex || "";
|
|
@@ -2400,7 +2433,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2400
2433
|
} catch (error) {
|
|
2401
2434
|
console.warn("KaTeX rendering error for inline math:", error);
|
|
2402
2435
|
}
|
|
2403
|
-
return /* @__PURE__ */ (0,
|
|
2436
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2404
2437
|
"span",
|
|
2405
2438
|
{
|
|
2406
2439
|
className: "react-renderer node-inlineMath",
|
|
@@ -2421,7 +2454,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2421
2454
|
} catch (error) {
|
|
2422
2455
|
console.warn("KaTeX rendering error for block math:", error);
|
|
2423
2456
|
}
|
|
2424
|
-
return /* @__PURE__ */ (0,
|
|
2457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "react-renderer node-blockMath", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2425
2458
|
"div",
|
|
2426
2459
|
{
|
|
2427
2460
|
className: "tiptap-mathematics-render",
|
|
@@ -2442,7 +2475,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2442
2475
|
} catch (error) {
|
|
2443
2476
|
console.warn("KaTeX rendering error for inline latex:", error);
|
|
2444
2477
|
}
|
|
2445
|
-
return /* @__PURE__ */ (0,
|
|
2478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
2446
2479
|
"span",
|
|
2447
2480
|
{
|
|
2448
2481
|
className: "react-renderer node-inlineLatex inline-latex",
|
|
@@ -2455,33 +2488,33 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2455
2488
|
*/
|
|
2456
2489
|
calloutAlert({ node, children }) {
|
|
2457
2490
|
const type = node.attrs.type || "info";
|
|
2458
|
-
return /* @__PURE__ */ (0,
|
|
2491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Callout, { type, children });
|
|
2459
2492
|
},
|
|
2460
2493
|
calloutTip({ node, children }) {
|
|
2461
2494
|
const type = node.attrs.type || "info";
|
|
2462
|
-
return /* @__PURE__ */ (0,
|
|
2495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Callout, { type, children });
|
|
2463
2496
|
},
|
|
2464
2497
|
customQuoteV2({ children }) {
|
|
2465
|
-
return /* @__PURE__ */ (0,
|
|
2498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuote, { children });
|
|
2466
2499
|
},
|
|
2467
2500
|
promptV2Header({ children }) {
|
|
2468
|
-
return /* @__PURE__ */ (0,
|
|
2501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptHeader, { children });
|
|
2469
2502
|
},
|
|
2470
2503
|
promptV2Content({ children }) {
|
|
2471
|
-
return /* @__PURE__ */ (0,
|
|
2504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptContent, { children });
|
|
2472
2505
|
}
|
|
2473
2506
|
});
|
|
2474
2507
|
var nodeMapping = getNodeMapping();
|
|
2475
2508
|
var markMapping = {
|
|
2476
2509
|
"copyable-text"({ children }) {
|
|
2477
|
-
return /* @__PURE__ */ (0,
|
|
2510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CopyableText2, { children });
|
|
2478
2511
|
}
|
|
2479
2512
|
};
|
|
2480
2513
|
|
|
2481
2514
|
// src/render/tiptap-render.tsx
|
|
2482
2515
|
var import_github_dark = require("highlight.js/styles/github-dark.css");
|
|
2483
2516
|
var import_katex_min = require("katex/dist/katex.min.css");
|
|
2484
|
-
var
|
|
2517
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
2485
2518
|
function renderTiptapToReact(content, getImageById) {
|
|
2486
2519
|
let parsedContent;
|
|
2487
2520
|
try {
|
|
@@ -2502,7 +2535,7 @@ function renderTiptapToReact(content, getImageById) {
|
|
|
2502
2535
|
markMapping
|
|
2503
2536
|
}
|
|
2504
2537
|
});
|
|
2505
|
-
return /* @__PURE__ */ (0,
|
|
2538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
2506
2539
|
"div",
|
|
2507
2540
|
{
|
|
2508
2541
|
className: "tiptap",
|