@rimori/react-client 0.4.9 → 0.4.10

package/src/components/editor/MarkdownEditor.tsx

@@ -0,0 +1,621 @@
+import { JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRimori } from '../../providers/PluginProvider';
+import { Markdown } from 'tiptap-markdown';
+import StarterKit from '@tiptap/starter-kit';
+import Table from '@tiptap/extension-table';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TableRow from '@tiptap/extension-table-row';
+import Link from '@tiptap/extension-link';
+import Youtube from '@tiptap/extension-youtube';
+import { useEditor, EditorContent, type Editor } from '@tiptap/react';
+import type { Level } from '@tiptap/extension-heading';
+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 { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
+import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
+
+function getMarkdown(editor: Editor): string {
+  return (editor.storage as { markdown: { getMarkdown: () => string } }).markdown.getMarkdown();
+}
+
+// ---------------------------------------------------------------------------
+// EditorButton
+// ---------------------------------------------------------------------------
+
+interface EditorButtonProps {
+  editor: Editor;
+  action: string;
+  isActive?: boolean;
+  label: React.ReactNode;
+  disabled?: boolean;
+  title?: string;
+}
+
+const EditorButton = ({ editor, action, isActive, label, disabled, title }: EditorButtonProps): JSX.Element => {
+  const baseClass =
+    'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
+    (isActive
+      ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground'
+      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground');
+
+  if (action.toLowerCase().includes('heading')) {
+    const level = parseInt(action[action.length - 1]);
+    return (
+      <button
+        type="button"
+        title={title}
+        onClick={() =>
+          editor
+            .chain()
+            .focus()
+            .toggleHeading({ level: level as Level })
+            .run()
+        }
+        className={baseClass}
+      >
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      title={title}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onClick={() => (editor.chain().focus() as any)[action]().run()}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      disabled={disabled ? !(editor.can().chain() as any)[action]().run() : false}
+      className={baseClass}
+    >
+      {label}
+    </button>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Inline panels (no Radix required)
+// ---------------------------------------------------------------------------
+
+type PanelType = 'link' | 'youtube' | 'markdown' | null;
+
+interface InlinePanelProps {
+  panel: PanelType;
+  onClose: () => void;
+  editor: Editor;
+  onUpdate: (content: string) => void;
+  labels: Required<EditorLabels>;
+}
+
+const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }: InlinePanelProps): JSX.Element | null => {
+  const [value, setValue] = useState('');
+
+  // Reset value when panel changes
+  useEffect(() => {
+    if (panel === 'link') {
+      const href = editor.getAttributes('link').href as string | undefined;
+      setValue(typeof href === 'string' ? href : 'https://');
+    } else {
+      setValue('');
+    }
+  }, [panel, editor]);
+
+  if (!panel) return null;
+
+  const handleConfirm = (): void => {
+    if (panel === 'link') {
+      const href = value.trim();
+      if (href && href !== 'https://') editor.chain().focus().setLink({ href }).run();
+      onClose();
+    } else if (panel === 'youtube') {
+      const src = value.trim();
+      if (src) editor.commands.setYoutubeVideo({ src });
+      onClose();
+    } else if (panel === 'markdown') {
+      if (!value.trim()) return;
+      const current = getMarkdown(editor);
+      const combined = current + '\n\n' + value.trim();
+      editor.commands.setContent(combined);
+      editor.commands.focus('end');
+      onUpdate(combined);
+      onClose();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent): void => {
+    if (e.key === 'Enter') handleConfirm();
+    if (e.key === 'Escape') onClose();
+  };
+
+  const isMarkdown = panel === 'markdown';
+
+  return (
+    <div className="bg-muted/80 border-b border-border px-2 py-1.5 flex flex-col gap-1.5">
+      <p className="text-xs text-muted-foreground">
+        {panel === 'link'
+          ? labels.setLinkTitle
+          : panel === 'youtube'
+            ? labels.addYoutubeTitle
+            : labels.appendMarkdownTitle}
+      </p>
+      {isMarkdown ? (
+        <textarea
+          autoFocus
+          rows={4}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => e.key === 'Escape' && onClose()}
+          placeholder={labels.appendMarkdownPlaceholder}
+          className="w-full text-sm font-mono rounded border border-border bg-background px-2 py-1 resize-y outline-none focus:ring-1 focus:ring-ring"
+        />
+      ) : (
+        <input
+          autoFocus
+          type="url"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={panel === 'link' ? labels.setLinkUrlPlaceholder : labels.addYoutubeUrlPlaceholder}
+          className="w-full text-sm font-mono rounded border border-border bg-background px-2 py-1 outline-none focus:ring-1 focus:ring-ring"
+        />
+      )}
+      <div className="flex gap-2 justify-end">
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-xs px-3 py-1 rounded border border-border hover:bg-accent transition-colors"
+        >
+          {labels.cancel}
+        </button>
+        <button
+          type="button"
+          onClick={handleConfirm}
+          disabled={!value.trim() || (panel === 'link' && value.trim() === 'https://')}
+          className="text-xs px-3 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors"
+        >
+          {panel === 'link'
+            ? labels.setLinkConfirm
+            : panel === 'youtube'
+              ? labels.addYoutubeConfirm
+              : labels.appendMarkdownConfirm}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// MenuBar
+// ---------------------------------------------------------------------------
+
+interface MenuBarProps {
+  editor: Editor;
+  onUpdate: (content: string) => void;
+  uploadImage?: (pngBlob: Blob) => Promise<string | null>;
+  labels: Required<EditorLabels>;
+}
+
+const MenuBar = ({ editor, onUpdate, uploadImage, labels }: MenuBarProps): JSX.Element => {
+  const [activePanel, setActivePanel] = useState<PanelType>(null);
+
+  const toggle = (panel: PanelType): void => setActivePanel((prev) => (prev === panel ? null : panel));
+
+  const inTable = editor.isActive('table');
+  const isLink = editor.isActive('link');
+
+  const tableBtnClass =
+    'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
+    'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:pointer-events-none';
+
+  return (
+    <>
+      <div className="bg-muted/50 border-b border-border text-base flex flex-row flex-wrap items-center gap-0.5 p-1.5">
+        {/* Text formatting */}
+        <EditorButton
+          editor={editor}
+          action="toggleBold"
+          isActive={editor.isActive('bold')}
+          label={<FaBold />}
+          disabled
+          title={labels.bold}
+        />
+        <EditorButton
+          editor={editor}
+          action="toggleItalic"
+          isActive={editor.isActive('italic')}
+          label={<FaItalic />}
+          disabled
+          title={labels.italic}
+        />
+        <EditorButton
+          editor={editor}
+          action="toggleStrike"
+          isActive={editor.isActive('strike')}
+          label={<FaStrikethrough />}
+          disabled
+          title={labels.strike}
+        />
+        <EditorButton
+          editor={editor}
+          action="toggleCode"
+          isActive={editor.isActive('code')}
+          label={<FaCode />}
+          disabled
+          title={labels.code}
+        />
+        <EditorButton
+          editor={editor}
+          action="setParagraph"
+          isActive={editor.isActive('paragraph')}
+          label={<FaParagraph />}
+          title={labels.paragraph}
+        />
+
+        {/* Headings */}
+        <EditorButton
+          editor={editor}
+          action="setHeading1"
+          isActive={editor.isActive('heading', { level: 1 })}
+          label={<LuHeading1 size="24px" />}
+          title={labels.heading1}
+        />
+        <EditorButton
+          editor={editor}
+          action="setHeading2"
+          isActive={editor.isActive('heading', { level: 2 })}
+          label={<LuHeading2 size="24px" />}
+          title={labels.heading2}
+        />
+        <EditorButton
+          editor={editor}
+          action="setHeading3"
+          isActive={editor.isActive('heading', { level: 3 })}
+          label={<LuHeading3 size="24px" />}
+          title={labels.heading3}
+        />
+
+        {/* Lists */}
+        <EditorButton
+          editor={editor}
+          action="toggleBulletList"
+          isActive={editor.isActive('bulletList')}
+          label={<AiOutlineUnorderedList size="24px" />}
+          title={labels.bulletList}
+        />
+        <EditorButton
+          editor={editor}
+          action="toggleOrderedList"
+          isActive={editor.isActive('orderedList')}
+          label={<GoListOrdered size="24px" />}
+          title={labels.orderedList}
+        />
+
+        {/* Block elements */}
+        <EditorButton
+          editor={editor}
+          action="toggleCodeBlock"
+          isActive={editor.isActive('codeBlock')}
+          label={<PiCodeBlock size="24px" />}
+          title={labels.codeBlock}
+        />
+        <EditorButton
+          editor={editor}
+          action="toggleBlockquote"
+          isActive={editor.isActive('blockquote')}
+          label={<TbBlockquote size="24px" />}
+          title={labels.blockquote}
+        />
+
+        <div className="w-px h-5 bg-border mx-0.5" />
+
+        {/* Link buttons */}
+        <div className="inline-flex rounded-md border border-border bg-transparent overflow-hidden">
+          <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' : '')
+            }
+          >
+            <LuLink size={18} />
+          </button>
+          <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"
+          >
+            <LuUnlink size={18} />
+          </button>
+        </div>
+
+        {/* YouTube */}
+        <button type="button" onClick={() => toggle('youtube')} className={tableBtnClass} title={labels.addYoutube}>
+          <TbBrandYoutube size={18} />
+        </button>
+
+        {/* Image upload (only when callback provided) */}
+        {uploadImage && (
+          <button
+            type="button"
+            onClick={() => triggerImageUpload(uploadImage, editor)}
+            className={tableBtnClass}
+            title={labels.insertImage}
+          >
+            <TbPhoto size={18} />
+          </button>
+        )}
+
+        <div className="w-px h-5 bg-border mx-0.5" />
+
+        {/* Table controls */}
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
+          className={tableBtnClass}
+          title={labels.insertTable}
+        >
+          <TbTable size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().addColumnAfter().run()}
+          className={tableBtnClass}
+          disabled={!inTable}
+          title={labels.addColumnAfter}
+        >
+          <TbColumnInsertRight size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().addRowAfter().run()}
+          className={tableBtnClass}
+          disabled={!inTable}
+          title={labels.addRowAfter}
+        >
+          <TbRowInsertBottom size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().deleteColumn().run()}
+          className={tableBtnClass}
+          disabled={!inTable}
+          title={labels.deleteColumn}
+        >
+          <TbColumnRemove size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().deleteRow().run()}
+          className={tableBtnClass}
+          disabled={!inTable}
+          title={labels.deleteRow}
+        >
+          <TbRowRemove size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().mergeOrSplit().run()}
+          className={tableBtnClass}
+          disabled={!inTable}
+          title={labels.mergeOrSplit}
+        >
+          <TbArrowMergeBoth size={18} />
+        </button>
+
+        <div className="w-px h-5 bg-border mx-0.5" />
+
+        {/* Append raw markdown */}
+        <button
+          type="button"
+          onClick={() => toggle('markdown')}
+          className={tableBtnClass}
+          title={labels.appendMarkdown}
+        >
+          <LuClipboardPaste size={18} />
+        </button>
+      </div>
+
+      <InlinePanel
+        panel={activePanel}
+        onClose={() => setActivePanel(null)}
+        editor={editor}
+        onUpdate={onUpdate}
+        labels={labels}
+      />
+    </>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Label defaults
+// ---------------------------------------------------------------------------
+
+export interface EditorLabels {
+  bold?: string;
+  italic?: string;
+  strike?: string;
+  code?: string;
+  paragraph?: string;
+  heading1?: string;
+  heading2?: string;
+  heading3?: string;
+  bulletList?: string;
+  orderedList?: string;
+  codeBlock?: string;
+  blockquote?: string;
+  setLink?: string;
+  setLinkTitle?: string;
+  setLinkUrlPlaceholder?: string;
+  setLinkConfirm?: string;
+  unsetLink?: string;
+  insertImage?: string;
+  addYoutube?: string;
+  addYoutubeTitle?: string;
+  addYoutubeUrlPlaceholder?: string;
+  addYoutubeConfirm?: string;
+  insertTable?: string;
+  addColumnAfter?: string;
+  addRowAfter?: string;
+  deleteColumn?: string;
+  deleteRow?: string;
+  mergeOrSplit?: string;
+  appendMarkdown?: string;
+  appendMarkdownTitle?: string;
+  appendMarkdownPlaceholder?: string;
+  appendMarkdownConfirm?: string;
+  cancel?: string;
+}
+
+const DEFAULT_LABELS: Required<EditorLabels> = {
+  bold: 'Bold',
+  italic: 'Italic',
+  strike: 'Strikethrough',
+  code: 'Inline code',
+  paragraph: 'Paragraph',
+  heading1: 'Heading 1',
+  heading2: 'Heading 2',
+  heading3: 'Heading 3',
+  bulletList: 'Bullet list',
+  orderedList: 'Ordered list',
+  codeBlock: 'Code block',
+  blockquote: 'Blockquote',
+  setLink: 'Set link',
+  setLinkTitle: 'Set link',
+  setLinkUrlPlaceholder: 'https://example.com',
+  setLinkConfirm: 'Apply',
+  unsetLink: 'Remove link',
+  insertImage: 'Insert image',
+  addYoutube: 'Add YouTube video',
+  addYoutubeTitle: 'Add YouTube video',
+  addYoutubeUrlPlaceholder: 'https://www.youtube.com/watch?v=…',
+  addYoutubeConfirm: 'Insert',
+  insertTable: 'Insert table',
+  addColumnAfter: 'Add column',
+  addRowAfter: 'Add row',
+  deleteColumn: 'Delete column',
+  deleteRow: 'Delete row',
+  mergeOrSplit: 'Merge or split cells',
+  appendMarkdown: 'Append markdown',
+  appendMarkdownTitle: 'Append Markdown',
+  appendMarkdownPlaceholder: 'Paste markdown here…',
+  appendMarkdownConfirm: 'Append',
+  cancel: 'Cancel',
+};
+
+// ---------------------------------------------------------------------------
+// MarkdownEditor
+// ---------------------------------------------------------------------------
+
+export interface MarkdownEditorProps {
+  content?: string;
+  editable: boolean;
+  className?: string;
+  onUpdate?: (content: string) => void;
+  /** Override any subset of toolbar/dialog labels. */
+  labels?: EditorLabels;
+  /** Called when the user clicks anywhere inside the editor area (read-only mode). */
+  onContentClick?: () => void;
+}
+
+export const MarkdownEditor = ({
+  content,
+  editable,
+  className,
+  onUpdate,
+  labels,
+  onContentClick,
+}: MarkdownEditorProps): JSX.Element => {
+  const { storage } = useRimori();
+  const mergedLabels: Required<EditorLabels> = { ...DEFAULT_LABELS, ...labels };
+  const lastEmittedRef = useRef(content ?? '');
+
+  const stableUpload = useCallback(
+    async (pngBlob: Blob): Promise<string | null> => {
+      const { data, error } = await storage.uploadImage(pngBlob);
+      if (error) return null;
+      return data.url;
+    },
+    [storage],
+  );
+
+  const extensions = useMemo(
+    () => [
+      StarterKit,
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Link.configure({ defaultProtocol: 'https' }),
+      Youtube,
+      Markdown,
+      ImageUploadExtension(stableUpload),
+    ],
+    [stableUpload],
+  );
+
+  const editor = useEditor({
+    extensions,
+    content,
+    editable,
+    autofocus: false,
+    editorProps: {
+      attributes: { class: (editable ? 'p-3 min-h-[200px] ' : '') + 'outline-none' },
+    },
+    onUpdate: ({ editor: ed }) => {
+      const markdown = getMarkdown(ed);
+      lastEmittedRef.current = markdown;
+      onUpdate?.(markdown);
+    },
+  });
+
+  // Sync external content changes (e.g. AI autofill) without triggering update loop
+  useEffect(() => {
+    if (!editor) return;
+    const incoming = content ?? '';
+    if (incoming === lastEmittedRef.current) return;
+    lastEmittedRef.current = incoming;
+    editor.commands.setContent(incoming);
+  }, [editor, content]);
+
+  // Sync editable prop
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(editable);
+  }, [editor, editable]);
+
+  return (
+    <div
+      className={
+        'text-md overflow-hidden rounded-lg ' +
+        (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
+        ' ' +
+        (className ?? '')
+      }
+      onClick={onContentClick}
+    >
+      {editor && editable && (
+        <MenuBar editor={editor} onUpdate={onUpdate ?? (() => {})} uploadImage={stableUpload} labels={mergedLabels} />
+      )}
+      <EditorContent editor={editor} />
+    </div>
+  );
+};

package/src/components/editor/imageUtils.ts

@@ -0,0 +1,58 @@
+const MAX_WIDTH = 1920;
+const MAX_HEIGHT = 1080;
+
+/**
+ * Convert any image File/Blob to a PNG Blob, downscaled to max full-HD.
+ * Uses native Canvas API – no third-party packages.
+ */
+export function convertToPng(file: File | Blob): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
+    img.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      let { width, height } = img;
+      if (width > MAX_WIDTH || height > MAX_HEIGHT) {
+        const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height);
+        width = Math.round(width * ratio);
+        height = Math.round(height * ratio);
+      }
+
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return reject(new Error('Could not get 2D canvas context'));
+
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob((blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error('canvas.toBlob returned null'));
+      }, 'image/png');
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error('Failed to load image for conversion'));
+    };
+
+    img.src = objectUrl;
+  });
+}
+
+/**
+ * Extract all image URLs from a markdown string (standard `![alt](url)` syntax).
+ * Use this to collect URLs before calling `plugin.storage.confirmImages`.
+ */
+export function extractImageUrls(markdown: string): string[] {
+  const regex = /!\[[^\]]*\]\(([^)\s]+)\)/g;
+  const urls: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(markdown)) !== null) {
+    urls.push(match[1]);
+  }
+  return urls;
+}

package/src/hooks/I18nHooks.ts

@@ -17,7 +17,9 @@ export function useTranslation(): { t: TranslatorFn; ready: boolean } {
   useEffect(() => {
     void plugin.getTranslator().then((translator) => {
       setTranslatorInstance(translator);
-      translator.onLanguageChanged(() => setUpdateCount(updateCount + 1));
+      translator.onLanguageChanged(() => {
+        setUpdateCount((count) => count + 1);
+      });
     });
   }, [plugin]);
 

package/src/index.ts

@@ -7,3 +7,6 @@ export { FirstMessages } from './components/ai/utils';
 export { useTranslation } from './hooks/I18nHooks';
 export { Avatar } from './components/ai/Avatar';
 export { VoiceRecorder } from './components/ai/EmbeddedAssistent/VoiceRecorder';
+export { MarkdownEditor } from './components/editor/MarkdownEditor';
+export type { MarkdownEditorProps, EditorLabels } from './components/editor/MarkdownEditor';
+export { extractImageUrls } from './components/editor/imageUtils';