@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.
Files changed (34) hide show
  1. package/dist/editor.css +46 -20
  2. package/dist/editor.css.map +1 -1
  3. package/dist/editor.js +505 -430
  4. package/dist/editor.js.map +1 -1
  5. package/dist/editor.mjs +506 -431
  6. package/dist/editor.mjs.map +1 -1
  7. package/dist/render.js +62 -29
  8. package/dist/render.js.map +1 -1
  9. package/dist/render.mjs +62 -29
  10. package/dist/render.mjs.map +1 -1
  11. package/dist/styles/index.css +46 -20
  12. package/package.json +5 -1
  13. package/src/editor/commands/items.ts +1 -1
  14. package/src/editor/components/common-modal/common-modal.css +2 -1
  15. package/src/editor/context/dialog-command.tsx +0 -2
  16. package/src/editor/controls/bubble-menu-content.tsx +6 -2
  17. package/src/editor/controls/commands-list.tsx +7 -0
  18. package/src/editor/dialogs/add-video-dialog/add-video-dialog.tsx +2 -5
  19. package/src/editor/editor.tsx +69 -44
  20. package/src/editor/handlers/dialog-handlers.ts +118 -36
  21. package/src/extensions/views/components/index.ts +1 -0
  22. package/src/extensions/views/components/table.tsx +29 -0
  23. package/src/render/static-renderer-config.tsx +32 -2
  24. package/src/styles/editor/base.css +7 -5
  25. package/src/styles/editor/states.css +4 -3
  26. package/src/styles/editor/typography.css +10 -2
  27. package/src/styles/editor/variables.css +1 -0
  28. package/src/styles/extensions/callout.css +5 -2
  29. package/src/styles/extensions/code-block.css +2 -1
  30. package/src/styles/extensions/commands-list.css +5 -1
  31. package/src/styles/extensions/custom-quote.css +5 -0
  32. package/src/styles/extensions/details.css +4 -4
  33. package/src/styles/extensions/myth-reality.css +3 -1
  34. 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 import_jsx_runtime67 = require("react/jsx-runtime");
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, import_jsx_runtime67.jsxs)("div", { className: "video-node", children: [
2302
- /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "video-error", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: "Unsupported or invalid video URL" }) }),
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, import_jsx_runtime67.jsxs)(
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, import_jsx_runtime67.jsx)("div", { className: "video-player-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
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 import_jsx_runtime68 = require("react/jsx-runtime");
2339
+ var import_jsx_runtime69 = require("react/jsx-runtime");
2330
2340
  var getNodeMapping = (getImageById) => ({
2331
2341
  callout({ node, children }) {
2332
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Callout, { ...node.attrs, children });
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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
2355
2365
  }
2356
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
2366
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
2357
2367
  CodeBlock,
2358
2368
  {
2359
2369
  language,
2360
2370
  isEditable: false,
2361
- children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("code", { dangerouslySetInnerHTML: { __html: highlightedHtml } })
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, import_jsx_runtime68.jsx)(CustomQuote, { children });
2376
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuote, { children });
2367
2377
  },
2368
2378
  customQuoteText({ children }) {
2369
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteText, { children });
2379
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuoteText, { children });
2370
2380
  },
2371
2381
  customQuoteAuthor({ children }) {
2372
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteAuthor, { children });
2382
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuoteAuthor, { children });
2373
2383
  },
2374
2384
  customQuoteSign({ children }) {
2375
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuoteSign, { children });
2385
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuoteSign, { children });
2376
2386
  },
2377
2387
  promptHeader({ children }) {
2378
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptHeader, { children });
2388
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptHeader, { children });
2379
2389
  },
2380
2390
  promptContent({ children }) {
2381
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptContent, { children });
2391
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptContent, { children });
2382
2392
  },
2383
2393
  video({ node }) {
2384
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Video, { src: node.attrs.src });
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, import_jsx_runtime68.jsx)(Figure, { ...node.attrs, getImageById });
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, import_jsx_runtime68.jsx)(Figure, { ...node.attrs, getImageById });
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, import_jsx_runtime68.jsx)(
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, import_jsx_runtime68.jsx)("div", { className: "react-renderer node-blockMath", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
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, import_jsx_runtime68.jsx)(
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, import_jsx_runtime68.jsx)(Callout, { type, children });
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, import_jsx_runtime68.jsx)(Callout, { type, children });
2495
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Callout, { type, children });
2463
2496
  },
2464
2497
  customQuoteV2({ children }) {
2465
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CustomQuote, { children });
2498
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CustomQuote, { children });
2466
2499
  },
2467
2500
  promptV2Header({ children }) {
2468
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptHeader, { children });
2501
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PromptHeader, { children });
2469
2502
  },
2470
2503
  promptV2Content({ children }) {
2471
- return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PromptContent, { children });
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, import_jsx_runtime68.jsx)(CopyableText2, { children });
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 import_jsx_runtime69 = require("react/jsx-runtime");
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, import_jsx_runtime69.jsx)(
2538
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
2506
2539
  "div",
2507
2540
  {
2508
2541
  className: "tiptap",