@rimori/react-client 0.4.12-next.0 → 0.4.12-next.1
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.
|
@@ -24,7 +24,7 @@ import { PiCodeBlock } from 'react-icons/pi';
|
|
|
24
24
|
import { TbBlockquote, TbTable, TbColumnInsertRight, TbRowInsertBottom, TbColumnRemove, TbRowRemove, TbArrowMergeBoth, TbBrandYoutube, TbPhoto, } from 'react-icons/tb';
|
|
25
25
|
import { GoListOrdered } from 'react-icons/go';
|
|
26
26
|
import { AiOutlineUnorderedList } from 'react-icons/ai';
|
|
27
|
-
import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink,
|
|
27
|
+
import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuCopy, LuCheck, LuMaximize2, LuMinimize2, } from 'react-icons/lu';
|
|
28
28
|
import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
|
|
29
29
|
import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
|
|
30
30
|
// Extends TipTap's Paragraph to serialize empty paragraphs as <p></p>.
|
|
@@ -133,9 +133,17 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels, onCopy, copied, isFull
|
|
|
133
133
|
const isLink = editor.isActive('link');
|
|
134
134
|
const tableBtnClass = 'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
|
|
135
135
|
'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none';
|
|
136
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-muted/50 border-b border-border text-base flex flex-row flex-wrap items-center gap-0.5 p-1.5", children: [_jsx(EditorButton, { editor: editor, action: "toggleBold", isActive: editor.isActive('bold'), label: _jsx(FaBold, {}), disabled: true, title: labels.bold }), _jsx(EditorButton, { editor: editor, action: "toggleItalic", isActive: editor.isActive('italic'), label: _jsx(FaItalic, {}), disabled: true, title: labels.italic }), _jsx(EditorButton, { editor: editor, action: "toggleStrike", isActive: editor.isActive('strike'), label: _jsx(FaStrikethrough, {}), disabled: true, title: labels.strike }), _jsx(EditorButton, { editor: editor, action: "toggleCode", isActive: editor.isActive('code'), label: _jsx(FaCode, {}), disabled: true, title: labels.code }), _jsx(EditorButton, { editor: editor, action: "setParagraph", isActive: editor.isActive('paragraph'), label: _jsx(FaParagraph, {}), title: labels.paragraph }), _jsx(EditorButton, { editor: editor, action: "setHeading1", isActive: editor.isActive('heading', { level: 1 }), label: _jsx(LuHeading1, { size: "24px" }), title: labels.heading1 }), _jsx(EditorButton, { editor: editor, action: "setHeading2", isActive: editor.isActive('heading', { level: 2 }), label: _jsx(LuHeading2, { size: "24px" }), title: labels.heading2 }), _jsx(EditorButton, { editor: editor, action: "setHeading3", isActive: editor.isActive('heading', { level: 3 }), label: _jsx(LuHeading3, { size: "24px" }), title: labels.heading3 }), _jsx(EditorButton, { editor: editor, action: "toggleBulletList", isActive: editor.isActive('bulletList'), label: _jsx(AiOutlineUnorderedList, { size: "24px" }), title: labels.bulletList }), _jsx(EditorButton, { editor: editor, action: "toggleOrderedList", isActive: editor.isActive('orderedList'), label: _jsx(GoListOrdered, { size: "24px" }), title: labels.orderedList }), _jsx(EditorButton, { editor: editor, action: "toggleCodeBlock", isActive: editor.isActive('codeBlock'), label: _jsx(PiCodeBlock, { size: "24px" }), title: labels.codeBlock }), _jsx(EditorButton, { editor: editor, action: "toggleBlockquote", isActive: editor.isActive('blockquote'), label: _jsx(TbBlockquote, { size: "24px" }), title: labels.blockquote }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }),
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-muted/50 border-b border-border text-base flex flex-row flex-wrap items-center gap-0.5 p-1.5", children: [_jsx(EditorButton, { editor: editor, action: "toggleBold", isActive: editor.isActive('bold'), label: _jsx(FaBold, {}), disabled: true, title: labels.bold }), _jsx(EditorButton, { editor: editor, action: "toggleItalic", isActive: editor.isActive('italic'), label: _jsx(FaItalic, {}), disabled: true, title: labels.italic }), _jsx(EditorButton, { editor: editor, action: "toggleStrike", isActive: editor.isActive('strike'), label: _jsx(FaStrikethrough, {}), disabled: true, title: labels.strike }), _jsx(EditorButton, { editor: editor, action: "toggleCode", isActive: editor.isActive('code'), label: _jsx(FaCode, {}), disabled: true, title: labels.code }), _jsx(EditorButton, { editor: editor, action: "setParagraph", isActive: editor.isActive('paragraph'), label: _jsx(FaParagraph, {}), title: labels.paragraph }), _jsx(EditorButton, { editor: editor, action: "setHeading1", isActive: editor.isActive('heading', { level: 1 }), label: _jsx(LuHeading1, { size: "24px" }), title: labels.heading1 }), _jsx(EditorButton, { editor: editor, action: "setHeading2", isActive: editor.isActive('heading', { level: 2 }), label: _jsx(LuHeading2, { size: "24px" }), title: labels.heading2 }), _jsx(EditorButton, { editor: editor, action: "setHeading3", isActive: editor.isActive('heading', { level: 3 }), label: _jsx(LuHeading3, { size: "24px" }), title: labels.heading3 }), _jsx(EditorButton, { editor: editor, action: "toggleBulletList", isActive: editor.isActive('bulletList'), label: _jsx(AiOutlineUnorderedList, { size: "24px" }), title: labels.bulletList }), _jsx(EditorButton, { editor: editor, action: "toggleOrderedList", isActive: editor.isActive('orderedList'), label: _jsx(GoListOrdered, { size: "24px" }), title: labels.orderedList }), _jsx(EditorButton, { editor: editor, action: "toggleCodeBlock", isActive: editor.isActive('codeBlock'), label: _jsx(PiCodeBlock, { size: "24px" }), title: labels.codeBlock }), _jsx(EditorButton, { editor: editor, action: "toggleBlockquote", isActive: editor.isActive('blockquote'), label: _jsx(TbBlockquote, { size: "24px" }), title: labels.blockquote }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => {
|
|
137
|
+
if (isLink) {
|
|
138
|
+
editor.chain().focus().unsetLink().run();
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
toggle('link');
|
|
142
|
+
}
|
|
143
|
+
}, title: isLink ? labels.unsetLink : labels.setLink, className: 'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
|
|
144
|
+
(isLink
|
|
145
|
+
? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground hover:bg-destructive/10 hover:text-destructive'
|
|
146
|
+
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'), children: _jsx(LuLink, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => toggle('youtube'), className: tableBtnClass, title: labels.addYoutube, children: _jsx(TbBrandYoutube, { size: 18 }) }), uploadImage && (_jsx("button", { type: "button", onClick: () => triggerImageUpload(uploadImage, editor), className: tableBtnClass, title: labels.insertImage, children: _jsx(TbPhoto, { size: 18 }) })), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), className: tableBtnClass, title: labels.insertTable, children: _jsx(TbTable, { size: 18 }) }), inTable && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: tableBtnClass, title: labels.addColumnAfter, children: _jsx(TbColumnInsertRight, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: tableBtnClass, title: labels.addRowAfter, children: _jsx(TbRowInsertBottom, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: tableBtnClass, title: labels.deleteColumn, children: _jsx(TbColumnRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: tableBtnClass, title: labels.deleteRow, children: _jsx(TbRowRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().mergeOrSplit().run(), className: tableBtnClass, title: labels.mergeOrSplit, children: _jsx(TbArrowMergeBoth, { size: 18 }) })] })), _jsxs("div", { className: 'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : ''), children: [_jsx("button", { type: "button", onClick: () => toggle('markdown'), className: tableBtnClass, title: labels.appendMarkdown, children: _jsx(LuClipboardPaste, { size: 18, style: { transform: 'scaleX(-1)' } }) }), _jsx("button", { type: "button", onClick: onCopy, title: "Copy as Markdown", className: tableBtnClass, children: copied ? _jsx(LuCheck, { size: 16, className: "text-green-500" }) : _jsx(LuCopy, { size: 16 }) }), _jsx("button", { type: "button", onClick: onToggleFullscreen, title: isFullscreen ? 'Exit fullscreen' : 'Fullscreen', className: tableBtnClass, children: isFullscreen ? _jsx(LuMinimize2, { size: 16 }) : _jsx(LuMaximize2, { size: 16 }) })] })] }), _jsx(InlinePanel, { panel: activePanel, onClose: () => setActivePanel(null), editor: editor, onUpdate: onUpdate, labels: labels })] }));
|
|
139
147
|
};
|
|
140
148
|
const DEFAULT_LABELS = {
|
|
141
149
|
bold: 'Bold',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rimori/react-client",
|
|
3
|
-
"version": "0.4.12-next.
|
|
3
|
+
"version": "0.4.12-next.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -24,15 +24,15 @@
|
|
|
24
24
|
"format": "prettier --write ."
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"@rimori/client": "
|
|
27
|
+
"@rimori/client": "2.5.23-next.1",
|
|
28
28
|
"react": "^18.1.0",
|
|
29
29
|
"react-dom": "^18.1.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@tiptap/core": "^2.26.1",
|
|
33
|
-
"@tiptap/extension-paragraph": "^2.26.1",
|
|
34
33
|
"@tiptap/extension-image": "^2.26.1",
|
|
35
34
|
"@tiptap/extension-link": "^2.26.1",
|
|
35
|
+
"@tiptap/extension-paragraph": "^2.26.1",
|
|
36
36
|
"@tiptap/extension-table": "^2.26.1",
|
|
37
37
|
"@tiptap/extension-table-cell": "^2.26.1",
|
|
38
38
|
"@tiptap/extension-table-header": "^2.26.1",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@eslint/js": "^9.37.0",
|
|
50
|
-
"@rimori/client": "
|
|
50
|
+
"@rimori/client": "2.5.23-next.1",
|
|
51
51
|
"@types/react": "^18.3.21",
|
|
52
52
|
"eslint-config-prettier": "^10.1.8",
|
|
53
53
|
"eslint-plugin-prettier": "^5.5.4",
|
|
@@ -31,7 +31,6 @@ import {
|
|
|
31
31
|
LuHeading2,
|
|
32
32
|
LuHeading3,
|
|
33
33
|
LuLink,
|
|
34
|
-
LuUnlink,
|
|
35
34
|
LuCopy,
|
|
36
35
|
LuCheck,
|
|
37
36
|
LuMaximize2,
|
|
@@ -369,30 +368,26 @@ const MenuBar = ({
|
|
|
369
368
|
|
|
370
369
|
<div className="w-px h-5 bg-border mx-0.5" />
|
|
371
370
|
|
|
372
|
-
{/* Link
|
|
373
|
-
<
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
'
|
|
380
|
-
'text-muted-foreground hover:bg-accent hover:text-accent-foreground border-r border-border last:border-r-0' +
|
|
381
|
-
(isLink ? ' bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground' : '')
|
|
371
|
+
{/* Link button — opens panel when no link active, removes link when active */}
|
|
372
|
+
<button
|
|
373
|
+
type="button"
|
|
374
|
+
onClick={() => {
|
|
375
|
+
if (isLink) {
|
|
376
|
+
editor.chain().focus().unsetLink().run();
|
|
377
|
+
} else {
|
|
378
|
+
toggle('link');
|
|
382
379
|
}
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
</button>
|
|
395
|
-
</div>
|
|
380
|
+
}}
|
|
381
|
+
title={isLink ? labels.unsetLink : labels.setLink}
|
|
382
|
+
className={
|
|
383
|
+
'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
|
|
384
|
+
(isLink
|
|
385
|
+
? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground hover:bg-destructive/10 hover:text-destructive'
|
|
386
|
+
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground')
|
|
387
|
+
}
|
|
388
|
+
>
|
|
389
|
+
<LuLink size={18} />
|
|
390
|
+
</button>
|
|
396
391
|
|
|
397
392
|
{/* YouTube */}
|
|
398
393
|
<button type="button" onClick={() => toggle('youtube')} className={tableBtnClass} title={labels.addYoutube}>
|
|
@@ -422,65 +417,61 @@ const MenuBar = ({
|
|
|
422
417
|
>
|
|
423
418
|
<TbTable size={18} />
|
|
424
419
|
</button>
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
</button>
|
|
470
|
-
|
|
471
|
-
<div className="w-px h-5 bg-border mx-0.5" />
|
|
472
|
-
|
|
473
|
-
{/* Append raw markdown */}
|
|
474
|
-
<button
|
|
475
|
-
type="button"
|
|
476
|
-
onClick={() => toggle('markdown')}
|
|
477
|
-
className={tableBtnClass}
|
|
478
|
-
title={labels.appendMarkdown}
|
|
479
|
-
>
|
|
480
|
-
<LuClipboardPaste size={18} style={{ transform: 'scaleX(-1)' }} />
|
|
481
|
-
</button>
|
|
420
|
+
{inTable && (
|
|
421
|
+
<>
|
|
422
|
+
<button
|
|
423
|
+
type="button"
|
|
424
|
+
onClick={() => editor.chain().focus().addColumnAfter().run()}
|
|
425
|
+
className={tableBtnClass}
|
|
426
|
+
title={labels.addColumnAfter}
|
|
427
|
+
>
|
|
428
|
+
<TbColumnInsertRight size={18} />
|
|
429
|
+
</button>
|
|
430
|
+
<button
|
|
431
|
+
type="button"
|
|
432
|
+
onClick={() => editor.chain().focus().addRowAfter().run()}
|
|
433
|
+
className={tableBtnClass}
|
|
434
|
+
title={labels.addRowAfter}
|
|
435
|
+
>
|
|
436
|
+
<TbRowInsertBottom size={18} />
|
|
437
|
+
</button>
|
|
438
|
+
<button
|
|
439
|
+
type="button"
|
|
440
|
+
onClick={() => editor.chain().focus().deleteColumn().run()}
|
|
441
|
+
className={tableBtnClass}
|
|
442
|
+
title={labels.deleteColumn}
|
|
443
|
+
>
|
|
444
|
+
<TbColumnRemove size={18} />
|
|
445
|
+
</button>
|
|
446
|
+
<button
|
|
447
|
+
type="button"
|
|
448
|
+
onClick={() => editor.chain().focus().deleteRow().run()}
|
|
449
|
+
className={tableBtnClass}
|
|
450
|
+
title={labels.deleteRow}
|
|
451
|
+
>
|
|
452
|
+
<TbRowRemove size={18} />
|
|
453
|
+
</button>
|
|
454
|
+
<button
|
|
455
|
+
type="button"
|
|
456
|
+
onClick={() => editor.chain().focus().mergeOrSplit().run()}
|
|
457
|
+
className={tableBtnClass}
|
|
458
|
+
title={labels.mergeOrSplit}
|
|
459
|
+
>
|
|
460
|
+
<TbArrowMergeBoth size={18} />
|
|
461
|
+
</button>
|
|
462
|
+
</>
|
|
463
|
+
)}
|
|
482
464
|
|
|
483
465
|
<div className={'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : '')}>
|
|
466
|
+
{/* Append raw markdown */}
|
|
467
|
+
<button
|
|
468
|
+
type="button"
|
|
469
|
+
onClick={() => toggle('markdown')}
|
|
470
|
+
className={tableBtnClass}
|
|
471
|
+
title={labels.appendMarkdown}
|
|
472
|
+
>
|
|
473
|
+
<LuClipboardPaste size={18} style={{ transform: 'scaleX(-1)' }} />
|
|
474
|
+
</button>
|
|
484
475
|
<button type="button" onClick={onCopy} title="Copy as Markdown" className={tableBtnClass}>
|
|
485
476
|
{copied ? <LuCheck size={16} className="text-green-500" /> : <LuCopy size={16} />}
|
|
486
477
|
</button>
|