@cyberyozh/text-editor 0.1.6 → 0.1.8
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 +483 -456
- package/dist/editor.js.map +1 -1
- package/dist/editor.mjs +481 -454
- package/dist/editor.mjs.map +1 -1
- package/dist/render.js +68 -29
- package/dist/render.js.map +1 -1
- package/dist/render.mjs +68 -29
- package/dist/render.mjs.map +1 -1
- package/dist/styles/index.css +46 -20
- package/package.json +5 -3
- 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/dialogs/image-dialog/image-dialog.tsx +0 -1
- package/src/editor/editor.tsx +68 -44
- package/src/editor/handlers/dialog-handlers.ts +74 -62
- package/src/editor/handlers/index.ts +1 -2
- package/src/extensions/views/components/index.ts +1 -0
- package/src/extensions/views/components/table.tsx +48 -0
- package/src/render/static-renderer-config.tsx +16 -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/src/editor/handlers/create-image-upload-handler.ts +0 -24
package/dist/render.mjs
CHANGED
|
@@ -2186,6 +2186,30 @@ var PromptContent = ({ children, isEmpty, placeholder }) => /* @__PURE__ */ jsx6
|
|
|
2186
2186
|
}
|
|
2187
2187
|
) });
|
|
2188
2188
|
|
|
2189
|
+
// src/extensions/views/components/table.tsx
|
|
2190
|
+
import { jsx as jsx67, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2191
|
+
function Table({ children }) {
|
|
2192
|
+
let colWidths = [];
|
|
2193
|
+
if (Array.isArray(children) && children.length > 0) {
|
|
2194
|
+
const firstRow = children[0];
|
|
2195
|
+
if (firstRow?.props?.children) {
|
|
2196
|
+
const cells = Array.isArray(firstRow.props.children) ? firstRow.props.children : [firstRow.props.children];
|
|
2197
|
+
colWidths = cells.map((cell) => cell?.props?.node?.attrs?.colwidth?.[0]).filter((width) => width !== void 0);
|
|
2198
|
+
}
|
|
2199
|
+
}
|
|
2200
|
+
const tableWidth = colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
|
|
2201
|
+
return /* @__PURE__ */ jsx67("div", { className: "tableWrapper", children: /* @__PURE__ */ jsxs21("table", { style: tableWidth ? { width: `${tableWidth}px` } : void 0, children: [
|
|
2202
|
+
colWidths.length > 0 && /* @__PURE__ */ jsx67("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ jsx67(
|
|
2203
|
+
"col",
|
|
2204
|
+
{
|
|
2205
|
+
style: { width: `${width}px` }
|
|
2206
|
+
},
|
|
2207
|
+
index
|
|
2208
|
+
)) }),
|
|
2209
|
+
/* @__PURE__ */ jsx67("tbody", { children })
|
|
2210
|
+
] }) });
|
|
2211
|
+
}
|
|
2212
|
+
|
|
2189
2213
|
// src/utils/detect-video-hosting.ts
|
|
2190
2214
|
var VIDEO_PATTERNS = {
|
|
2191
2215
|
youtube: /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|shorts\/)?([a-zA-Z0-9_-]{11})/,
|
|
@@ -2258,22 +2282,22 @@ var detectVideoHosting = (src) => {
|
|
|
2258
2282
|
};
|
|
2259
2283
|
|
|
2260
2284
|
// src/extensions/views/components/video.tsx
|
|
2261
|
-
import { jsx as
|
|
2285
|
+
import { jsx as jsx68, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2262
2286
|
var Video = ({ src, children }) => {
|
|
2263
2287
|
const videoInfo = detectVideoHosting(src);
|
|
2264
2288
|
if (!videoInfo?.embedUrl) {
|
|
2265
|
-
return /* @__PURE__ */
|
|
2266
|
-
/* @__PURE__ */
|
|
2289
|
+
return /* @__PURE__ */ jsxs22("div", { className: "video-node", children: [
|
|
2290
|
+
/* @__PURE__ */ jsx68("div", { className: "video-error", children: /* @__PURE__ */ jsx68("span", { children: "Unsupported or invalid video URL" }) }),
|
|
2267
2291
|
children
|
|
2268
2292
|
] });
|
|
2269
2293
|
}
|
|
2270
|
-
return /* @__PURE__ */
|
|
2294
|
+
return /* @__PURE__ */ jsxs22(
|
|
2271
2295
|
"div",
|
|
2272
2296
|
{
|
|
2273
2297
|
className: "video-node",
|
|
2274
2298
|
"data-video": "",
|
|
2275
2299
|
children: [
|
|
2276
|
-
/* @__PURE__ */
|
|
2300
|
+
/* @__PURE__ */ jsx68("div", { className: "video-player-wrapper", children: /* @__PURE__ */ jsx68(
|
|
2277
2301
|
"iframe",
|
|
2278
2302
|
{
|
|
2279
2303
|
className: "video-iframe",
|
|
@@ -2290,10 +2314,10 @@ var Video = ({ src, children }) => {
|
|
|
2290
2314
|
};
|
|
2291
2315
|
|
|
2292
2316
|
// src/render/static-renderer-config.tsx
|
|
2293
|
-
import { jsx as
|
|
2317
|
+
import { jsx as jsx69 } from "react/jsx-runtime";
|
|
2294
2318
|
var getNodeMapping = (getImageById) => ({
|
|
2295
2319
|
callout({ node, children }) {
|
|
2296
|
-
return /* @__PURE__ */
|
|
2320
|
+
return /* @__PURE__ */ jsx69(Callout, { ...node.attrs, children });
|
|
2297
2321
|
},
|
|
2298
2322
|
codeBlock({ node, children }) {
|
|
2299
2323
|
const language = node.attrs.language || "";
|
|
@@ -2317,41 +2341,56 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2317
2341
|
console.warn(`Failed to highlight code for language "${language}":`, error);
|
|
2318
2342
|
highlightedHtml = codeText.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
2319
2343
|
}
|
|
2320
|
-
return /* @__PURE__ */
|
|
2344
|
+
return /* @__PURE__ */ jsx69(
|
|
2321
2345
|
CodeBlock,
|
|
2322
2346
|
{
|
|
2323
2347
|
language,
|
|
2324
2348
|
isEditable: false,
|
|
2325
|
-
children: /* @__PURE__ */
|
|
2349
|
+
children: /* @__PURE__ */ jsx69("code", { dangerouslySetInnerHTML: { __html: highlightedHtml } })
|
|
2326
2350
|
}
|
|
2327
2351
|
);
|
|
2328
2352
|
},
|
|
2329
2353
|
customQuote({ children }) {
|
|
2330
|
-
return /* @__PURE__ */
|
|
2354
|
+
return /* @__PURE__ */ jsx69(CustomQuote, { children });
|
|
2331
2355
|
},
|
|
2332
2356
|
customQuoteText({ children }) {
|
|
2333
|
-
return /* @__PURE__ */
|
|
2357
|
+
return /* @__PURE__ */ jsx69(CustomQuoteText, { children });
|
|
2334
2358
|
},
|
|
2335
2359
|
customQuoteAuthor({ children }) {
|
|
2336
|
-
return /* @__PURE__ */
|
|
2360
|
+
return /* @__PURE__ */ jsx69(CustomQuoteAuthor, { children });
|
|
2337
2361
|
},
|
|
2338
2362
|
customQuoteSign({ children }) {
|
|
2339
|
-
return /* @__PURE__ */
|
|
2363
|
+
return /* @__PURE__ */ jsx69(CustomQuoteSign, { children });
|
|
2340
2364
|
},
|
|
2341
2365
|
promptHeader({ children }) {
|
|
2342
|
-
return /* @__PURE__ */
|
|
2366
|
+
return /* @__PURE__ */ jsx69(PromptHeader, { children });
|
|
2343
2367
|
},
|
|
2344
2368
|
promptContent({ children }) {
|
|
2345
|
-
return /* @__PURE__ */
|
|
2369
|
+
return /* @__PURE__ */ jsx69(PromptContent, { children });
|
|
2346
2370
|
},
|
|
2347
2371
|
video({ node }) {
|
|
2348
|
-
return /* @__PURE__ */
|
|
2372
|
+
return /* @__PURE__ */ jsx69(Video, { src: node.attrs.src });
|
|
2373
|
+
},
|
|
2374
|
+
table({ children }) {
|
|
2375
|
+
return /* @__PURE__ */ jsx69(Table, { children });
|
|
2349
2376
|
},
|
|
2350
2377
|
figure({ node }) {
|
|
2351
|
-
return /* @__PURE__ */
|
|
2378
|
+
return /* @__PURE__ */ jsx69(
|
|
2379
|
+
Figure,
|
|
2380
|
+
{
|
|
2381
|
+
...node.attrs,
|
|
2382
|
+
getImageById
|
|
2383
|
+
}
|
|
2384
|
+
);
|
|
2352
2385
|
},
|
|
2353
2386
|
image({ node }) {
|
|
2354
|
-
return /* @__PURE__ */
|
|
2387
|
+
return /* @__PURE__ */ jsx69(
|
|
2388
|
+
Figure,
|
|
2389
|
+
{
|
|
2390
|
+
...node.attrs,
|
|
2391
|
+
getImageById
|
|
2392
|
+
}
|
|
2393
|
+
);
|
|
2355
2394
|
},
|
|
2356
2395
|
inlineMath({ node }) {
|
|
2357
2396
|
const latex = node.attrs.latex || "";
|
|
@@ -2364,7 +2403,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2364
2403
|
} catch (error) {
|
|
2365
2404
|
console.warn("KaTeX rendering error for inline math:", error);
|
|
2366
2405
|
}
|
|
2367
|
-
return /* @__PURE__ */
|
|
2406
|
+
return /* @__PURE__ */ jsx69(
|
|
2368
2407
|
"span",
|
|
2369
2408
|
{
|
|
2370
2409
|
className: "react-renderer node-inlineMath",
|
|
@@ -2385,7 +2424,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2385
2424
|
} catch (error) {
|
|
2386
2425
|
console.warn("KaTeX rendering error for block math:", error);
|
|
2387
2426
|
}
|
|
2388
|
-
return /* @__PURE__ */
|
|
2427
|
+
return /* @__PURE__ */ jsx69("div", { className: "react-renderer node-blockMath", children: /* @__PURE__ */ jsx69(
|
|
2389
2428
|
"div",
|
|
2390
2429
|
{
|
|
2391
2430
|
className: "tiptap-mathematics-render",
|
|
@@ -2406,7 +2445,7 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2406
2445
|
} catch (error) {
|
|
2407
2446
|
console.warn("KaTeX rendering error for inline latex:", error);
|
|
2408
2447
|
}
|
|
2409
|
-
return /* @__PURE__ */
|
|
2448
|
+
return /* @__PURE__ */ jsx69(
|
|
2410
2449
|
"span",
|
|
2411
2450
|
{
|
|
2412
2451
|
className: "react-renderer node-inlineLatex inline-latex",
|
|
@@ -2419,33 +2458,33 @@ var getNodeMapping = (getImageById) => ({
|
|
|
2419
2458
|
*/
|
|
2420
2459
|
calloutAlert({ node, children }) {
|
|
2421
2460
|
const type = node.attrs.type || "info";
|
|
2422
|
-
return /* @__PURE__ */
|
|
2461
|
+
return /* @__PURE__ */ jsx69(Callout, { type, children });
|
|
2423
2462
|
},
|
|
2424
2463
|
calloutTip({ node, children }) {
|
|
2425
2464
|
const type = node.attrs.type || "info";
|
|
2426
|
-
return /* @__PURE__ */
|
|
2465
|
+
return /* @__PURE__ */ jsx69(Callout, { type, children });
|
|
2427
2466
|
},
|
|
2428
2467
|
customQuoteV2({ children }) {
|
|
2429
|
-
return /* @__PURE__ */
|
|
2468
|
+
return /* @__PURE__ */ jsx69(CustomQuote, { children });
|
|
2430
2469
|
},
|
|
2431
2470
|
promptV2Header({ children }) {
|
|
2432
|
-
return /* @__PURE__ */
|
|
2471
|
+
return /* @__PURE__ */ jsx69(PromptHeader, { children });
|
|
2433
2472
|
},
|
|
2434
2473
|
promptV2Content({ children }) {
|
|
2435
|
-
return /* @__PURE__ */
|
|
2474
|
+
return /* @__PURE__ */ jsx69(PromptContent, { children });
|
|
2436
2475
|
}
|
|
2437
2476
|
});
|
|
2438
2477
|
var nodeMapping = getNodeMapping();
|
|
2439
2478
|
var markMapping = {
|
|
2440
2479
|
"copyable-text"({ children }) {
|
|
2441
|
-
return /* @__PURE__ */
|
|
2480
|
+
return /* @__PURE__ */ jsx69(CopyableText2, { children });
|
|
2442
2481
|
}
|
|
2443
2482
|
};
|
|
2444
2483
|
|
|
2445
2484
|
// src/render/tiptap-render.tsx
|
|
2446
2485
|
import "highlight.js/styles/github-dark.css";
|
|
2447
2486
|
import "katex/dist/katex.min.css";
|
|
2448
|
-
import { jsx as
|
|
2487
|
+
import { jsx as jsx70 } from "react/jsx-runtime";
|
|
2449
2488
|
function renderTiptapToReact(content, getImageById) {
|
|
2450
2489
|
let parsedContent;
|
|
2451
2490
|
try {
|
|
@@ -2466,7 +2505,7 @@ function renderTiptapToReact(content, getImageById) {
|
|
|
2466
2505
|
markMapping
|
|
2467
2506
|
}
|
|
2468
2507
|
});
|
|
2469
|
-
return /* @__PURE__ */
|
|
2508
|
+
return /* @__PURE__ */ jsx70(
|
|
2470
2509
|
"div",
|
|
2471
2510
|
{
|
|
2472
2511
|
className: "tiptap",
|