ssovee-os-web-ui 0.1.73 → 0.1.74
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/index.cjs +175 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +8 -0
- package/dist/index.js +176 -11
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -368,35 +368,200 @@ var RichEditor = ({
|
|
|
368
368
|
}
|
|
369
369
|
}, [editor, value]);
|
|
370
370
|
const editorHeight = typeof height === "number" ? `${height}px` : height;
|
|
371
|
+
editor ? [
|
|
372
|
+
{ label: "Bold", action: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive("bold") },
|
|
373
|
+
{ label: "Italic", action: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive("italic") },
|
|
374
|
+
{ label: "Bullet List", action: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive("bulletList") },
|
|
375
|
+
{ label: "Ordered List", action: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive("orderedList") }
|
|
376
|
+
] : [];
|
|
371
377
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
|
|
372
378
|
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
379
|
+
.rich-editor-shell {
|
|
380
|
+
border: 1px solid #d5d7db;
|
|
381
|
+
border-radius: 18px;
|
|
382
|
+
overflow: hidden;
|
|
383
|
+
background: #f3f4f6;
|
|
384
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
|
|
385
|
+
}
|
|
386
|
+
.rich-editor-topbar {
|
|
387
|
+
display: flex;
|
|
388
|
+
align-items: center;
|
|
389
|
+
justify-content: center;
|
|
390
|
+
padding: 16px 20px 12px;
|
|
391
|
+
}
|
|
392
|
+
.rich-editor-tabs {
|
|
393
|
+
display: inline-flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
gap: 10px;
|
|
396
|
+
padding: 6px;
|
|
397
|
+
border-radius: 12px;
|
|
398
|
+
background: rgba(15, 23, 42, 0.04);
|
|
399
|
+
border: 1px solid rgba(15, 23, 42, 0.08);
|
|
400
|
+
}
|
|
401
|
+
.rich-editor-tab {
|
|
402
|
+
border: none;
|
|
403
|
+
background: transparent;
|
|
404
|
+
color: rgba(15, 23, 42, 0.7);
|
|
405
|
+
font-size: 14px;
|
|
406
|
+
padding: 8px 12px;
|
|
407
|
+
border-radius: 8px;
|
|
408
|
+
cursor: pointer;
|
|
409
|
+
font-weight: 500;
|
|
410
|
+
}
|
|
411
|
+
.rich-editor-tab.is-active {
|
|
412
|
+
background: rgba(255,255,255,0.8);
|
|
413
|
+
color: #111827;
|
|
414
|
+
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
415
|
+
}
|
|
416
|
+
.rich-editor-toolbar {
|
|
417
|
+
display: flex;
|
|
418
|
+
align-items: center;
|
|
419
|
+
gap: 8px;
|
|
420
|
+
padding: 10px 14px;
|
|
421
|
+
border-top: 1px solid rgba(15, 23, 42, 0.08);
|
|
422
|
+
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
|
|
423
|
+
background: rgba(255,255,255,0.65);
|
|
424
|
+
}
|
|
425
|
+
.rich-editor-toolbar button {
|
|
426
|
+
border: none;
|
|
427
|
+
background: transparent;
|
|
428
|
+
color: #374151;
|
|
429
|
+
border-radius: 6px;
|
|
430
|
+
min-width: 26px;
|
|
431
|
+
height: 26px;
|
|
432
|
+
font-size: 14px;
|
|
433
|
+
font-weight: 600;
|
|
434
|
+
cursor: pointer;
|
|
435
|
+
display: inline-flex;
|
|
436
|
+
align-items: center;
|
|
437
|
+
justify-content: center;
|
|
438
|
+
transition: all 0.2s ease;
|
|
439
|
+
}
|
|
440
|
+
.rich-editor-toolbar button:hover:not(:disabled) {
|
|
441
|
+
background: rgba(15, 23, 42, 0.04);
|
|
442
|
+
}
|
|
443
|
+
.rich-editor-toolbar button.is-active {
|
|
444
|
+
background: rgba(59, 130, 246, 0.12);
|
|
445
|
+
color: #1d4ed8;
|
|
446
|
+
}
|
|
447
|
+
.rich-editor-toolbar button:disabled {
|
|
448
|
+
opacity: 0.4;
|
|
449
|
+
cursor: not-allowed;
|
|
450
|
+
}
|
|
451
|
+
.rich-editor-toolbar .toolbar-spacer {
|
|
452
|
+
width: 1px;
|
|
453
|
+
height: 20px;
|
|
454
|
+
background: rgba(15, 23, 42, 0.12);
|
|
455
|
+
margin: 0 4px;
|
|
456
|
+
}
|
|
457
|
+
.rich-editor-toolbar .toolbar-actions {
|
|
458
|
+
margin-left: auto;
|
|
459
|
+
display: flex;
|
|
460
|
+
align-items: center;
|
|
461
|
+
gap: 8px;
|
|
462
|
+
}
|
|
373
463
|
.rich-editor-prose {
|
|
374
464
|
min-height: ${editorHeight};
|
|
375
|
-
padding:
|
|
376
|
-
|
|
377
|
-
border-radius: 8px;
|
|
378
|
-
background: white;
|
|
465
|
+
padding: 40px 52px 52px;
|
|
466
|
+
background: rgba(255,255,255,0.78);
|
|
379
467
|
color: #111827;
|
|
380
468
|
outline: none;
|
|
469
|
+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
381
470
|
}
|
|
382
471
|
.rich-editor-prose:focus {
|
|
383
|
-
|
|
384
|
-
|
|
472
|
+
outline: none;
|
|
473
|
+
}
|
|
474
|
+
.rich-editor-prose h1 {
|
|
475
|
+
font-size: clamp(2.2rem, 2vw + 1.1rem, 3.2rem);
|
|
476
|
+
line-height: 1.1;
|
|
477
|
+
font-weight: 700;
|
|
478
|
+
margin: 0 0 1.5rem;
|
|
479
|
+
letter-spacing: -0.05em;
|
|
480
|
+
}
|
|
481
|
+
.rich-editor-prose h2 {
|
|
482
|
+
font-size: 2rem;
|
|
483
|
+
line-height: 1.2;
|
|
484
|
+
font-weight: 700;
|
|
485
|
+
margin: 2rem 0 1rem;
|
|
385
486
|
}
|
|
386
487
|
.rich-editor-prose p {
|
|
387
|
-
margin: 0 0
|
|
488
|
+
margin: 0 0 1rem;
|
|
489
|
+
font-size: 1.04rem;
|
|
490
|
+
line-height: 1.7;
|
|
491
|
+
color: rgba(17, 24, 39, 0.9);
|
|
492
|
+
}
|
|
493
|
+
.rich-editor-prose p strong,
|
|
494
|
+
.rich-editor-prose p b {
|
|
495
|
+
font-weight: 700;
|
|
496
|
+
}
|
|
497
|
+
.rich-editor-prose p em,
|
|
498
|
+
.rich-editor-prose p i {
|
|
499
|
+
font-style: italic;
|
|
500
|
+
}
|
|
501
|
+
.rich-editor-prose a {
|
|
502
|
+
color: #4f46e5;
|
|
503
|
+
text-decoration: underline;
|
|
388
504
|
}
|
|
389
505
|
.rich-editor-prose ul,
|
|
390
506
|
.rich-editor-prose ol {
|
|
391
|
-
padding-left: 1.
|
|
507
|
+
padding-left: 1.5rem;
|
|
508
|
+
margin: 0 0 1rem;
|
|
509
|
+
}
|
|
510
|
+
.rich-editor-prose li {
|
|
511
|
+
margin-bottom: 0.45rem;
|
|
512
|
+
}
|
|
513
|
+
.rich-editor-prose code {
|
|
514
|
+
display: inline-block;
|
|
515
|
+
padding: 0.5rem 0.9rem;
|
|
516
|
+
background: rgba(15, 23, 42, 0.06);
|
|
517
|
+
border-radius: 12px;
|
|
518
|
+
border: 1px solid rgba(15, 23, 42, 0.08);
|
|
519
|
+
color: #111827;
|
|
520
|
+
font-size: 0.96rem;
|
|
521
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
392
522
|
}
|
|
393
523
|
.rich-editor-prose blockquote {
|
|
394
524
|
border-left: 3px solid #d1d5db;
|
|
395
|
-
padding-left: 0.
|
|
525
|
+
padding-left: 0.9rem;
|
|
396
526
|
color: #4b5563;
|
|
527
|
+
margin: 1.25rem 0;
|
|
397
528
|
}
|
|
398
529
|
` }),
|
|
399
|
-
/* @__PURE__ */ jsxRuntime.
|
|
530
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rich-editor-shell", children: [
|
|
531
|
+
!readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
532
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "rich-editor-topbar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rich-editor-tabs", "aria-label": "Editor mode selector", children: ["Agent editor", "Docx editor", "Notion-like editor", "Simple editor"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
533
|
+
"button",
|
|
534
|
+
{
|
|
535
|
+
type: "button",
|
|
536
|
+
className: `rich-editor-tab${tab === "Simple editor" ? " is-active" : ""}`,
|
|
537
|
+
"aria-label": tab,
|
|
538
|
+
children: tab
|
|
539
|
+
},
|
|
540
|
+
tab
|
|
541
|
+
)) }) }),
|
|
542
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rich-editor-toolbar", "aria-label": "Rich editor toolbar", children: [
|
|
543
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Undo", title: "Undo", children: "\u21B6" }),
|
|
544
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Redo", title: "Redo", children: "\u21B7" }),
|
|
545
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "toolbar-spacer" }),
|
|
546
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Heading", title: "Heading", children: "H" }),
|
|
547
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Bold", title: "Bold", className: editor?.isActive("bold") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleBold().run(), children: "B" }),
|
|
548
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Italic", title: "Italic", className: editor?.isActive("italic") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleItalic().run(), children: "I" }),
|
|
549
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Strike", title: "Strike", onClick: () => editor?.chain().focus().toggleStrike().run(), children: "S" }),
|
|
550
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Code", title: "Code", onClick: () => editor?.chain().focus().toggleCode().run(), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: "<" }) }),
|
|
551
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Link", title: "Link", children: "\u2301" }),
|
|
552
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Bullet list", title: "Bullet list", className: editor?.isActive("bulletList") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleBulletList().run(), children: "\u2022" }),
|
|
553
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Ordered list", title: "Ordered list", className: editor?.isActive("orderedList") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: "1." }),
|
|
554
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "toolbar-spacer" }),
|
|
555
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Align left", title: "Align left", children: "\u2261" }),
|
|
556
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Quote", title: "Quote", onClick: () => editor?.chain().focus().toggleBlockquote().run(), children: "\u275D" }),
|
|
557
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toolbar-actions", children: [
|
|
558
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Search", title: "Search", children: "\u2315" }),
|
|
559
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Theme", title: "Theme", children: "\u263C" })
|
|
560
|
+
] })
|
|
561
|
+
] })
|
|
562
|
+
] }),
|
|
563
|
+
/* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor })
|
|
564
|
+
] })
|
|
400
565
|
] });
|
|
401
566
|
};
|
|
402
567
|
var RichEditor_default = RichEditor;
|