@rimori/react-client 0.4.9-next.2 → 0.4.9-next.3

package/dist/components/ai/Assistant.js

@@ -3,10 +3,10 @@ import React, { useEffect, useMemo } from 'react';
 import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { AudioInputField } from './EmbeddedAssistent/AudioInputField';
 import { MessageSender } from '@rimori/client';
-import Markdown from 'react-markdown';
 import { useChat } from '../../hooks/UseChatHook';
 import { useRimori } from '../../providers/PluginProvider';
 import { getFirstMessages } from './utils';
+import { MarkdownEditor } from '../editor/MarkdownEditor';
 export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartConversation }) {
     var _a;
     const [oralCommunication, setOralCommunication] = React.useState(true);
@@ -55,7 +55,7 @@ export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartCo
         const success = args.explanationUnderstood === 'TRUE' || args.studentKnowsTopic === 'TRUE';
         return (_jsxs("div", { className: "px-5 pt-5 overflow-y-auto text-center", style: { height: '478px' }, children: [_jsx("h1", { className: "text-center mt-5 mb-5", children: success ? 'Great job!' : 'You failed' }), _jsx("p", { children: args.improvementHints })] }));
     }
-    return (_jsxs("div", { children: [oralCommunication && _jsx(CircleAudioAvatar, { imageUrl: avatarImageUrl, className: "mx-auto my-10" }), _jsx("div", { className: "w-full", children: lastAssistantMessage && (_jsx("div", { className: "px-5 pt-5 overflow-y-auto remirror-theme", style: { height: '4k78px' }, children: _jsx(Markdown, { children: lastAssistantMessage }) })) }), _jsx(AudioInputField, { blockSubmission: isLoading, onSubmit: (message) => {
+    return (_jsxs("div", { children: [oralCommunication && _jsx(CircleAudioAvatar, { imageUrl: avatarImageUrl, className: "mx-auto my-10" }), _jsx("div", { className: "w-full", children: lastAssistantMessage && (_jsx("div", { className: "px-5 pt-5 overflow-y-auto remirror-theme", style: { height: '4k78px' }, children: _jsx(MarkdownEditor, { editable: false, content: lastAssistantMessage }) })) }), _jsx(AudioInputField, { blockSubmission: isLoading, onSubmit: (message) => {
                     append([{ role: 'user', content: message, id: messages.length.toString() }]);
                 }, onAudioControl: (voice) => {
                     setOralCommunication(voice);

package/dist/components/editor/ImageUploadExtension.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from '@tiptap/core';
+/**
+ * Tiptap extension that adds image upload via:
+ *   - Drag-and-drop of image files onto the editor
+ *   - Paste of image data from the clipboard
+ *   - A dedicated toolbar button (triggers a hidden <input type="file">)
+ *
+ * Provide the `uploadImage` callback to handle uploading to your backend.
+ * If no callback is provided the extension is still registered but upload is disabled.
+ */
+export declare const ImageUploadExtension: (uploadImage?: (pngBlob: Blob) => Promise<string | null>) => import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;
+/** Trigger an image file picker and upload the selected file. */
+export declare function triggerImageUpload(uploadImage: (pngBlob: Blob) => Promise<string | null>, editor: Editor): void;

package/dist/components/editor/ImageUploadExtension.js

@@ -0,0 +1,93 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Image from '@tiptap/extension-image';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { convertToPng } from './imageUtils';
+const pluginKey = new PluginKey('imageUpload');
+/**
+ * Tiptap extension that adds image upload via:
+ *   - Drag-and-drop of image files onto the editor
+ *   - Paste of image data from the clipboard
+ *   - A dedicated toolbar button (triggers a hidden <input type="file">)
+ *
+ * Provide the `uploadImage` callback to handle uploading to your backend.
+ * If no callback is provided the extension is still registered but upload is disabled.
+ */
+export const ImageUploadExtension = (uploadImage) => Image.extend({
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        return [
+            new Plugin({
+                key: pluginKey,
+                props: {
+                    handleDrop(view, event) {
+                        var _a, _b;
+                        if (!uploadImage)
+                            return false;
+                        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+                        const imageFile = files.find((f) => f.type.startsWith('image/'));
+                        if (!imageFile)
+                            return false;
+                        event.preventDefault();
+                        // Insert a placeholder position then replace with real URL
+                        void handleImageFile(imageFile, uploadImage, editor);
+                        return true;
+                    },
+                    handlePaste(view, event) {
+                        var _a, _b;
+                        if (!uploadImage)
+                            return false;
+                        const items = Array.from((_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+                        const imageItem = items.find((i) => i.type.startsWith('image/'));
+                        if (!imageItem)
+                            return false;
+                        const file = imageItem.getAsFile();
+                        if (!file)
+                            return false;
+                        event.preventDefault();
+                        void handleImageFile(file, uploadImage, editor);
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+}).configure({
+    HTMLAttributes: {
+        class: 'max-w-full h-auto rounded-lg my-4',
+    },
+});
+function handleImageFile(file, uploadImage, editor) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const pngBlob = yield convertToPng(file);
+            const url = yield uploadImage(pngBlob);
+            if (url) {
+                editor.chain().focus().setImage({ src: url }).run();
+            }
+        }
+        catch (_a) {
+            // Upload failed – silently ignore (caller is responsible for showing errors)
+        }
+    });
+}
+/** Trigger an image file picker and upload the selected file. */
+export function triggerImageUpload(uploadImage, editor) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file)
+            yield handleImageFile(file, uploadImage, editor);
+    });
+    input.click();
+}

package/dist/components/editor/MarkdownEditor.d.ts

@@ -0,0 +1,47 @@
+import { JSX } from 'react';
+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;
+}
+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 declare const MarkdownEditor: ({ content, editable, className, onUpdate, labels, onContentClick, }: MarkdownEditorProps) => JSX.Element;

package/dist/components/editor/MarkdownEditor.js

@@ -0,0 +1,218 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, 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 } from '@tiptap/react';
+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) {
+    return editor.storage.markdown.getMarkdown();
+}
+const EditorButton = ({ editor, action, isActive, label, disabled, title }) => {
+    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 (_jsx("button", { type: "button", title: title, onClick: () => editor
+                .chain()
+                .focus()
+                .toggleHeading({ level: level })
+                .run(), className: baseClass, children: label }));
+    }
+    // ChainedCommands is not index-typed; cast to call dynamic action names while keeping `.run()`
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const chain = editor.chain().focus();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const canChain = editor.can().chain().focus();
+    return (_jsx("button", { type: "button", title: title, onClick: () => chain[action]().run(), disabled: disabled ? !canChain[action]().run() : false, className: baseClass, children: label }));
+};
+const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
+    const [value, setValue] = useState('');
+    // Reset value when panel changes
+    useEffect(() => {
+        if (panel === 'link') {
+            const href = editor.getAttributes('link').href;
+            setValue(typeof href === 'string' ? href : 'https://');
+        }
+        else {
+            setValue('');
+        }
+    }, [panel, editor]);
+    if (!panel)
+        return null;
+    const handleConfirm = () => {
+        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) => {
+        if (e.key === 'Enter')
+            handleConfirm();
+        if (e.key === 'Escape')
+            onClose();
+    };
+    const isMarkdown = panel === 'markdown';
+    return (_jsxs("div", { className: "bg-muted/80 border-b border-border px-2 py-1.5 flex flex-col gap-1.5", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: panel === 'link'
+                    ? labels.setLinkTitle
+                    : panel === 'youtube'
+                        ? labels.addYoutubeTitle
+                        : labels.appendMarkdownTitle }), isMarkdown ? (_jsx("textarea", { autoFocus: true, 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" })) : (_jsx("input", { autoFocus: true, 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" })), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx("button", { type: "button", onClick: onClose, className: "text-xs px-3 py-1 rounded border border-border hover:bg-accent transition-colors", children: labels.cancel }), _jsx("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", children: panel === 'link'
+                            ? labels.setLinkConfirm
+                            : panel === 'youtube'
+                                ? labels.addYoutubeConfirm
+                                : labels.appendMarkdownConfirm })] })] }));
+};
+const MenuBar = ({ editor, onUpdate, uploadImage, labels }) => {
+    const [activePanel, setActivePanel] = useState(null);
+    const toggle = (panel) => 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 (_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 })] }));
+};
+const DEFAULT_LABELS = {
+    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',
+};
+export const MarkdownEditor = ({ content, editable, className, onUpdate, labels, onContentClick, }) => {
+    const { storage } = useRimori();
+    const mergedLabels = Object.assign(Object.assign({}, DEFAULT_LABELS), labels);
+    const lastEmittedRef = useRef(content !== null && content !== void 0 ? content : '');
+    const stableUpload = useCallback((pngBlob) => __awaiter(void 0, void 0, void 0, function* () {
+        const { data, error } = yield storage.uploadImage(pngBlob);
+        if (error)
+            return null;
+        return data.url;
+    }), [storage]);
+    const extensions = [
+        StarterKit.configure({
+            bulletList: {
+                HTMLAttributes: {
+                    class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
+                },
+            },
+            orderedList: {
+                HTMLAttributes: {
+                    className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
+                },
+            },
+        }),
+        Table.configure({ resizable: false }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        Link.configure({ protocols: ['mailto'], defaultProtocol: 'https' }),
+        Youtube,
+        Markdown,
+        ImageUploadExtension(stableUpload),
+    ];
+    const editor = useEditor({
+        extensions,
+        content,
+        editable,
+        editorProps: {
+            attributes: { class: 'outline-none min-h-[200px] p-3' },
+        },
+        onUpdate: ({ editor: ed }) => {
+            const markdown = getMarkdown(ed);
+            lastEmittedRef.current = markdown;
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
+        },
+    });
+    // Sync external content changes (e.g. AI autofill) without triggering update loop
+    useEffect(() => {
+        if (!editor)
+            return;
+        const incoming = content !== null && content !== void 0 ? 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 (_jsxs("div", { className: '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 })] }));
+};

package/dist/components/editor/imageUtils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Convert any image File/Blob to a PNG Blob, downscaled to max full-HD.
+ * Uses native Canvas API – no third-party packages.
+ */
+export declare function convertToPng(file: File | Blob): Promise<Blob>;
+/**
+ * Extract all image URLs from a markdown string (standard `![alt](url)` syntax).
+ * Use this to collect URLs before calling `plugin.storage.confirmImages`.
+ */
+export declare function extractImageUrls(markdown: string): string[];

package/dist/components/editor/imageUtils.js

@@ -0,0 +1,52 @@
+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) {
+    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) {
+    const regex = /!\[[^\]]*\]\(([^)\s]+)\)/g;
+    const urls = [];
+    let match;
+    while ((match = regex.exec(markdown)) !== null) {
+        urls.push(match[1]);
+    }
+    return urls;
+}

package/dist/index.d.ts

@@ -6,3 +6,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';

package/dist/index.js

@@ -6,3 +6,5 @@ export * from './components/ai/Avatar';
 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 { extractImageUrls } from './components/editor/imageUtils';

package/dist/style.css

@@ -6,105 +6,93 @@ dialog::backdrop {
   background: transparent;
 }
 
+/* Tiptap editor content styles */
 .tiptap {
-  padding-top: 5px;
-  padding-left: 7px;
-  /* min-height: 300px; */
-}
-.tiptap:focus-visible {
-  outline: none;
-}
-.tiptap h1,
-.tiptap h2,
-.tiptap h3,
-.tiptap h4,
-.tiptap h5,
-.tiptap h6 {
-  @apply font-bold;
-  margin-bottom: 1rem;
+  @apply focus:outline-none min-h-[200px];
 }
 .tiptap h1 {
-  @apply text-4xl;
+  @apply text-4xl font-bold mt-6 mb-3 first:mt-0;
 }
 .tiptap h2 {
-  @apply text-3xl;
+  @apply text-3xl font-semibold mt-5 mb-2 first:mt-0;
 }
 .tiptap h3 {
-  @apply text-2xl;
+  @apply text-2xl font-semibold mt-4 mb-2 first:mt-0;
 }
-.tiptap h4 {
-  @apply text-xl;
+.tiptap p {
+  @apply mb-2 leading-relaxed;
+}
+.tiptap blockquote {
+  @apply border-l-4 border-primary/30 pl-4 py-1 my-3 text-muted-foreground italic;
 }
-.tiptap h5 {
-  @apply text-lg;
+.tiptap pre {
+  @apply bg-muted rounded-lg p-4 my-3 overflow-x-auto text-sm font-mono;
 }
-.tiptap h6 {
-  @apply text-base;
+.tiptap code {
+  @apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono;
 }
-.tiptap p {
-  @apply mb-4;
+.tiptap pre code {
+  @apply bg-transparent p-0;
+}
+.tiptap hr {
+  @apply border-border my-6;
 }
 .tiptap a {
-  @apply text-blue-600 hover:text-blue-800;
-  text-decoration: none;
+  @apply text-primary underline underline-offset-2;
 }
-.tiptap a:hover {
-  @apply underline;
+.tiptap {
+  /* Basic editor styles */
 }
-.tiptap ul {
-  @apply list-disc pl-8;
+.tiptap :first-child {
+  margin-top: 0;
 }
-.tiptap ul li > p {
+.tiptap li {
   @apply mb-1;
 }
-.tiptap ol {
-  @apply list-decimal pl-7;
+.tiptap ul {
+  @apply list-disc pl-4 m-0;
 }
-.tiptap ol li > p {
-  @apply mb-1;
+.tiptap ul p {
+  @apply m-0;
 }
-.tiptap blockquote {
-  @apply border-l-4 pl-4 italic text-gray-600 my-4;
-  border-color: #ccc;
+.tiptap ul li {
+  @apply m-0;
 }
-.tiptap code {
-  font-family: monospace;
+.tiptap ol {
+  @apply list-decimal pl-7 m-0;
 }
-.tiptap pre {
-  @apply bg-gray-800 text-gray-500 p-4 rounded-lg overflow-x-auto;
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+.tiptap ol p {
+  @apply m-0;
+}
+.tiptap ol li {
+  @apply m-0;
 }
-.tiptap img {
-  @apply max-w-full h-auto rounded-lg my-4;
+.tiptap {
+  /* Table-specific styling */
 }
 .tiptap table {
-  @apply table-auto w-full border-collapse mb-4;
-}
-.tiptap th,
-.tiptap td {
-  @apply border px-4 py-2 text-left;
-}
-.tiptap th {
-  @apply bg-gray-500 font-semibold;
-}
-.tiptap tr:nth-child(even) {
-  @apply bg-gray-400;
-}
-@media (max-width: 768px) {
-  .tiptap h1 {
-    @apply text-3xl;
-  }
-  .tiptap h2 {
-    @apply text-2xl;
-  }
-  .tiptap p {
-    @apply text-base;
-  }
-  .tiptap img {
-    @apply max-w-full;
-  }
+  @apply border-collapse m-0 overflow-hidden w-full mb-1;
+}
+.tiptap table td,
+.tiptap table th {
+  @apply dark:border-gray-700 border;
+  @apply mb-0 align-baseline pl-1.5;
+}
+.tiptap table td p,
+.tiptap table th p {
+  @apply mb-0;
+}
+.tiptap table th {
+  /* @apply bg-gray-500; */
+  @apply font-bold text-left;
+}
+.tiptap .tableWrapper {
+  margin: 1.5rem 0;
+  @apply overflow-x-auto;
+}
+.tiptap.resize-cursor {
+  @apply cursor-ew-resize;
+  cursor: col-resize;
 }
 
 /*# sourceMappingURL=style.css.map */

package/dist/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;AACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAxCJ;AA2CE;;AACA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAxEN;AA4EE;;AACA;EACE;;AAEA;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAIJ;AACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA","file":"style.css"}