@rimori/react-client 0.4.11-next.4 → 0.4.11-next.6

package/dist/components/editor/MarkdownEditor.js

@@ -24,7 +24,7 @@ import { PiCodeBlock } from 'react-icons/pi';
 import { TbBlockquote, TbTable, TbColumnInsertRight, TbRowInsertBottom, TbColumnRemove, TbRowRemove, TbArrowMergeBoth, TbBrandYoutube, TbPhoto, } from 'react-icons/tb';
 import { GoListOrdered } from 'react-icons/go';
 import { AiOutlineUnorderedList } from 'react-icons/ai';
-import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink } from 'react-icons/lu';
+import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink, LuCopy, LuCheck, LuMaximize2, LuMinimize2, } from 'react-icons/lu';
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
 // Extends TipTap's Paragraph to serialize empty paragraphs as <p></p>.
@@ -126,7 +126,7 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
                                 ? labels.addYoutubeConfirm
                                 : labels.appendMarkdownConfirm })] })] }));
 };
-const MenuBar = ({ editor, onUpdate, uploadImage, labels }) => {
+const MenuBar = ({ editor, onUpdate, uploadImage, labels, onCopy, copied, isFullscreen, onToggleFullscreen, }) => {
     const [activePanel, setActivePanel] = useState(null);
     const toggle = (panel) => setActivePanel((prev) => (prev === panel ? null : panel));
     const inTable = editor.isActive('table');
@@ -135,7 +135,7 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels }) => {
         'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none';
     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" }), _jsxs("div", { className: "inline-flex rounded-md border border-border bg-transparent overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => toggle('link'), title: labels.setLink, className: 'w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 ' +
                                     'text-muted-foreground hover:bg-accent hover:text-accent-foreground border-r border-border last:border-r-0' +
-                                    (isLink ? ' bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground' : ''), children: _jsx(LuLink, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().unsetLink().run(), disabled: !isLink, title: labels.unsetLink, className: "w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none border-r border-border last:border-r-0", children: _jsx(LuUnlink, { 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 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: tableBtnClass, disabled: !inTable, title: labels.addColumnAfter, children: _jsx(TbColumnInsertRight, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: tableBtnClass, disabled: !inTable, title: labels.addRowAfter, children: _jsx(TbRowInsertBottom, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: tableBtnClass, disabled: !inTable, title: labels.deleteColumn, children: _jsx(TbColumnRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: tableBtnClass, disabled: !inTable, title: labels.deleteRow, children: _jsx(TbRowRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().mergeOrSplit().run(), className: tableBtnClass, disabled: !inTable, title: labels.mergeOrSplit, children: _jsx(TbArrowMergeBoth, { size: 18 }) }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => toggle('markdown'), className: tableBtnClass, title: labels.appendMarkdown, children: _jsx(LuClipboardPaste, { size: 18 }) })] }), _jsx(InlinePanel, { panel: activePanel, onClose: () => setActivePanel(null), editor: editor, onUpdate: onUpdate, labels: labels })] }));
+                                    (isLink ? ' bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground' : ''), children: _jsx(LuLink, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().unsetLink().run(), disabled: !isLink, title: labels.unsetLink, className: "w-8 h-8 flex items-center justify-center rounded-none first:rounded-l-md last:rounded-r-md transition-colors duration-150 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none border-r border-border last:border-r-0", children: _jsx(LuUnlink, { 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 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addColumnAfter().run(), className: tableBtnClass, disabled: !inTable, title: labels.addColumnAfter, children: _jsx(TbColumnInsertRight, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().addRowAfter().run(), className: tableBtnClass, disabled: !inTable, title: labels.addRowAfter, children: _jsx(TbRowInsertBottom, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteColumn().run(), className: tableBtnClass, disabled: !inTable, title: labels.deleteColumn, children: _jsx(TbColumnRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().deleteRow().run(), className: tableBtnClass, disabled: !inTable, title: labels.deleteRow, children: _jsx(TbRowRemove, { size: 18 }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().mergeOrSplit().run(), className: tableBtnClass, disabled: !inTable, title: labels.mergeOrSplit, children: _jsx(TbArrowMergeBoth, { size: 18 }) }), _jsx("div", { className: "w-px h-5 bg-border mx-0.5" }), _jsx("button", { type: "button", onClick: () => toggle('markdown'), className: tableBtnClass, title: labels.appendMarkdown, children: _jsx(LuClipboardPaste, { size: 18, style: { transform: 'scaleX(-1)' } }) }), _jsxs("div", { className: 'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : ''), children: [_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 })] }));
 };
 const DEFAULT_LABELS = {
     bold: 'Bold',
@@ -176,6 +176,8 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
     const { storage } = useRimori();
     const mergedLabels = Object.assign(Object.assign({}, DEFAULT_LABELS), labels);
     const lastEmittedRef = useRef(content !== null && content !== void 0 ? content : '');
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [copied, setCopied] = useState(false);
     const stableUpload = useCallback((pngBlob) => __awaiter(void 0, void 0, void 0, function* () {
         const { data, error } = yield storage.uploadImage(pngBlob);
         if (error)
@@ -208,6 +210,14 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
         },
     });
+    const handleCopy = useCallback(() => {
+        if (!editor)
+            return;
+        navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    }, [editor]);
     // Sync external content changes (e.g. AI autofill) without triggering update loop.
     // Pass false to setContent to prevent onUpdate from firing and re-normalizing the content.
     useEffect(() => {
@@ -225,8 +235,11 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             return;
         editor.setEditable(editable);
     }, [editor, editable]);
-    return (_jsxs("div", { className: 'text-md overflow-hidden rounded-lg ' +
+    const wrapperClass = isFullscreen
+        ? 'text-md overflow-hidden rounded-lg border border-border bg-card shadow-sm fixed inset-0 z-50 flex flex-col'
+        : 'text-md overflow-hidden rounded-lg ' +
             (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
             ' ' +
-            (className !== null && className !== void 0 ? className : ''), onClick: onContentClick, children: [editor && editable && (_jsx(MenuBar, { editor: editor, onUpdate: onUpdate !== null && onUpdate !== void 0 ? onUpdate : (() => { }), uploadImage: stableUpload, labels: mergedLabels })), _jsx(EditorContent, { editor: editor })] }));
+            (className !== null && className !== void 0 ? className : '');
+    return (_jsxs("div", { className: wrapperClass, onClick: onContentClick, children: [editor && editable && (_jsx(MenuBar, { editor: editor, onUpdate: onUpdate !== null && onUpdate !== void 0 ? onUpdate : (() => { }), uploadImage: stableUpload, labels: mergedLabels, onCopy: handleCopy, copied: copied, isFullscreen: isFullscreen, onToggleFullscreen: () => setIsFullscreen((v) => !v) })), _jsx(EditorContent, { editor: editor, className: isFullscreen ? 'flex-1 overflow-y-auto' : '' })] }));
 };

package/dist/hooks/ThemeSetter.js

@@ -1,13 +1,11 @@
 export function useTheme(theme = 'system') {
     const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
     const dom = document.documentElement;
-    dom.style.background = 'hsl(var(--background))';
-    dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
     dom.dataset.theme = isDark ? 'dark' : 'light';
     dom.style.colorScheme = isDark ? 'dark' : 'light';
-    const root = document.querySelector('#root');
-    root.style.background = 'hsl(var(--background))';
     dom.classList[isDark ? 'add' : 'remove']('dark');
+    const root = document.querySelector('#root');
+    root.classList.add('dark:bg-gradient-to-br', 'dark:from-gray-900', 'dark:to-gray-800', 'dark:text-white', 'min-h-screen', 'bg-fixed');
     return { isDark, theme };
 }
 function systenUsesDarkMode() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.11-next.4",
+  "version": "0.4.11-next.6",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/editor/MarkdownEditor.tsx

@@ -25,7 +25,18 @@ import {
 } from 'react-icons/tb';
 import { GoListOrdered } from 'react-icons/go';
 import { AiOutlineUnorderedList } from 'react-icons/ai';
-import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuUnlink } from 'react-icons/lu';
+import {
+  LuClipboardPaste,
+  LuHeading1,
+  LuHeading2,
+  LuHeading3,
+  LuLink,
+  LuUnlink,
+  LuCopy,
+  LuCheck,
+  LuMaximize2,
+  LuMinimize2,
+} from 'react-icons/lu';
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
 
@@ -230,9 +241,22 @@ interface MenuBarProps {
   onUpdate: (content: string) => void;
   uploadImage?: (pngBlob: Blob) => Promise<string | null>;
   labels: Required<EditorLabels>;
+  onCopy: () => void;
+  copied: boolean;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
 }
 
-const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.Element => {
+const MenuBar = ({
+  editor,
+  onUpdate,
+  uploadImage,
+  labels,
+  onCopy,
+  copied,
+  isFullscreen,
+  onToggleFullscreen,
+}: MenuBarProps): JSX.Element => {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
 
   const toggle = (panel: PanelType): void => setActivePanel((prev) => (prev === panel ? null : panel));
@@ -453,8 +477,22 @@ const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.E
           className={tableBtnClass}
           title={labels.appendMarkdown}
         >
-          <LuClipboardPaste size={18} />
+          <LuClipboardPaste size={18} style={{ transform: 'scaleX(-1)' }} />
         </button>
+
+        <div className={'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : '')}>
+          <button type="button" onClick={onCopy} title="Copy as Markdown" className={tableBtnClass}>
+            {copied ? <LuCheck size={16} className="text-green-500" /> : <LuCopy size={16} />}
+          </button>
+          <button
+            type="button"
+            onClick={onToggleFullscreen}
+            title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+            className={tableBtnClass}
+          >
+            {isFullscreen ? <LuMinimize2 size={16} /> : <LuMaximize2 size={16} />}
+          </button>
+        </div>
       </div>
 
       <InlinePanel
@@ -570,6 +608,8 @@ export const MarkdownEditor = ({
   const { storage } = useRimori();
   const mergedLabels: Required<EditorLabels> = { ...DEFAULT_LABELS, ...labels };
   const lastEmittedRef = useRef(content ?? '');
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   const stableUpload = useCallback(
     async (pngBlob: Blob): Promise<string | null> => {
@@ -611,6 +651,14 @@ export const MarkdownEditor = ({
     },
   });
 
+  const handleCopy = useCallback(() => {
+    if (!editor) return;
+    navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [editor]);
+
   // Sync external content changes (e.g. AI autofill) without triggering update loop.
   // Pass false to setContent to prevent onUpdate from firing and re-normalizing the content.
   useEffect(() => {
@@ -627,20 +675,28 @@ export const MarkdownEditor = ({
     editor.setEditable(editable);
   }, [editor, editable]);
 
+  const wrapperClass = isFullscreen
+    ? 'text-md overflow-hidden rounded-lg border border-border bg-card shadow-sm fixed inset-0 z-50 flex flex-col'
+    : 'text-md overflow-hidden rounded-lg ' +
+      (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
+      ' ' +
+      (className ?? '');
+
   return (
-    <div
-      className={
-        'text-md overflow-hidden rounded-lg ' +
-        (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
-        ' ' +
-        (className ?? '')
-      }
-      onClick={onContentClick}
-    >
+    <div className={wrapperClass} onClick={onContentClick}>
       {editor && editable && (
-        <MenuBar editor={editor} onUpdate={onUpdate ?? (() => {})} uploadImage={stableUpload} labels={mergedLabels} />
+        <MenuBar
+          editor={editor}
+          onUpdate={onUpdate ?? (() => {})}
+          uploadImage={stableUpload}
+          labels={mergedLabels}
+          onCopy={handleCopy}
+          copied={copied}
+          isFullscreen={isFullscreen}
+          onToggleFullscreen={() => setIsFullscreen((v) => !v)}
+        />
       )}
-      <EditorContent editor={editor} />
+      <EditorContent editor={editor} className={isFullscreen ? 'flex-1 overflow-y-auto' : ''} />
     </div>
   );
 };

package/src/hooks/ThemeSetter.ts

@@ -4,16 +4,21 @@ export function useTheme(theme: Theme = 'system'): { isDark: boolean; theme: The
   const isDark = theme === 'system' ? systenUsesDarkMode() : theme === 'dark';
 
   const dom = document.documentElement;
-  dom.style.background = 'hsl(var(--background))';
-  dom.classList.add('text-gray-900', 'dark:text-gray-200', 'bg-gray-50', 'dark:bg-gray-950');
   dom.dataset.theme = isDark ? 'dark' : 'light';
   dom.style.colorScheme = isDark ? 'dark' : 'light';
 
-  const root = document.querySelector('#root') as HTMLDivElement;
-  root.style.background = 'hsl(var(--background))';
-
   dom.classList[isDark ? 'add' : 'remove']('dark');
 
+  const root = document.querySelector('#root') as HTMLDivElement;
+  root.classList.add(
+    'dark:bg-gradient-to-br',
+    'dark:from-gray-900',
+    'dark:to-gray-800',
+    'dark:text-white',
+    'min-h-screen',
+    'bg-fixed',
+  );
+
   return { isDark, theme };
 }