@rimori/react-client 0.4.12 → 0.4.13-next.0

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

@@ -32,6 +32,10 @@ export interface EditorLabels {
     appendMarkdownTitle?: string;
     appendMarkdownPlaceholder?: string;
     appendMarkdownConfirm?: string;
+    transformSelection?: string;
+    transformSelectionTitle?: string;
+    transformSelectionPlaceholder?: string;
+    transformSelectionConfirm?: string;
     cancel?: string;
 }
 export interface MarkdownEditorProps {

package/dist/components/editor/MarkdownEditor.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LuSparkles } from 'react-icons/lu';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
@@ -24,7 +25,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, LuCopy, LuCheck, LuMaximize2, LuMinimize2, } from 'react-icons/lu';
+import { LuClipboardPaste, LuHeading1, LuHeading2, LuHeading3, LuLink, LuCopy, LuCheck, LuMaximize2, LuMinimize2, LuLoader, } 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>.
@@ -71,7 +72,7 @@ const EditorButton = ({ editor, action, isActive, label, disabled, title }) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         disabled: disabled ? !editor.can().chain()[action]().run() : false, className: baseClass, children: label }));
 };
-const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
+const InlinePanel = ({ panel, onClose, editor, onUpdate, labels, onTransform, isTransforming, }) => {
     const [value, setValue] = useState('');
     // Reset value when panel changes
     useEffect(() => {
@@ -108,6 +109,11 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
             onUpdate(combined);
             onClose();
         }
+        else if (panel === 'transform') {
+            if (!value.trim() || !onTransform)
+                return;
+            onTransform(value.trim());
+        }
     };
     const handleKeyDown = (e) => {
         if (e.key === 'Enter')
@@ -116,26 +122,42 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }) => {
             onClose();
     };
     const isMarkdown = panel === 'markdown';
+    const isTransform = panel === 'transform';
     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 })] })] }));
+                        : panel === 'transform'
+                            ? labels.transformSelectionTitle
+                            : labels.appendMarkdownTitle }), isTransform ? (_jsx("input", { autoFocus: true, type: "text", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: labels.transformSelectionPlaceholder, 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" })) : 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, disabled: isTransforming, className: "text-xs px-3 py-1 rounded border border-border hover:bg-accent transition-colors disabled:opacity-40", children: labels.cancel }), _jsxs("button", { type: "button", onClick: handleConfirm, disabled: !value.trim() || (panel === 'link' && value.trim() === 'https://') || isTransforming, className: "text-xs px-3 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors flex items-center gap-1", children: [isTransforming && _jsx(LuLoader, { size: 12, className: "animate-spin" }), panel === 'link'
+                                ? labels.setLinkConfirm
+                                : panel === 'youtube'
+                                    ? labels.addYoutubeConfirm
+                                    : panel === 'transform'
+                                        ? labels.transformSelectionConfirm
+                                        : labels.appendMarkdownConfirm] })] })] }));
 };
-const MenuBar = ({ editor, onUpdate, uploadImage, labels, onCopy, copied, isFullscreen, onToggleFullscreen, }) => {
+const MenuBar = ({ editor, onUpdate, uploadImage, labels, onCopy, copied, isFullscreen, onToggleFullscreen, hasSelection, onTransform, isTransforming, }) => {
     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, 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 })] }));
+    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: () => {
+                            if (isLink) {
+                                editor.chain().focus().unsetLink().run();
+                            }
+                            else {
+                                toggle('link');
+                            }
+                        }, title: isLink ? labels.unsetLink : labels.setLink, className: 'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
+                            (isLink
+                                ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground hover:bg-destructive/10 hover:text-destructive'
+                                : '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: [hasSelection && (_jsx("button", { type: "button", onClick: () => toggle('transform'), className: tableBtnClass + (activePanel === 'transform' ? ' bg-primary/10 text-primary' : ''), title: labels.transformSelection, children: _jsx(LuSparkles, { size: 16 }) })), _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: () => !isTransforming && setActivePanel(null), editor: editor, onUpdate: onUpdate, labels: labels, onTransform: (prompt) => __awaiter(void 0, void 0, void 0, function* () {
+                    yield onTransform(prompt);
+                    setActivePanel(null);
+                }), isTransforming: isTransforming })] }));
 };
 const DEFAULT_LABELS = {
     bold: 'Bold',
@@ -170,14 +192,20 @@ const DEFAULT_LABELS = {
     appendMarkdownTitle: 'Append Markdown',
     appendMarkdownPlaceholder: 'Paste markdown here…',
     appendMarkdownConfirm: 'Append',
+    transformSelection: 'Transform selection with AI',
+    transformSelectionTitle: 'Transform selected text with AI',
+    transformSelectionPlaceholder: 'e.g. "Fix grammar", "Make more formal", "Translate to Spanish"…',
+    transformSelectionConfirm: 'Transform',
     cancel: 'Cancel',
 };
 export const MarkdownEditor = ({ content, editable, className, onUpdate, labels, onContentClick, }) => {
-    const { storage } = useRimori();
+    const { storage, ai } = 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 [hasSelection, setHasSelection] = useState(false);
+    const [isTransforming, setIsTransforming] = useState(false);
     const stableUpload = useCallback((pngBlob) => __awaiter(void 0, void 0, void 0, function* () {
         const { data, error } = yield storage.uploadImage(pngBlob);
         if (error)
@@ -209,11 +237,41 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             lastEmittedRef.current = markdown;
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
         },
+        onSelectionUpdate: ({ editor: ed }) => {
+            const { from, to } = ed.state.selection;
+            setHasSelection(from !== to);
+        },
     });
+    const handleTransform = useCallback((prompt) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!editor)
+            return;
+        const { from, to } = editor.state.selection;
+        if (from === to)
+            return;
+        const selectedText = editor.state.doc.textBetween(from, to, '\n');
+        setIsTransforming(true);
+        const transformed = yield ai.getText([
+            {
+                role: 'system',
+                content: 'You are a text editor assistant. Transform the provided text according to the user instruction. Return only the transformed text, no explanations. If formattation is wished, use markdown syntax in the output.',
+            },
+            {
+                role: 'user',
+                content: `Instruction: ${prompt}\n\nText:\n${selectedText}`,
+            },
+        ]);
+        setIsTransforming(false);
+        if (!transformed)
+            return;
+        editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, transformed).run();
+        const markdown = getMarkdown(editor);
+        lastEmittedRef.current = markdown;
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(markdown);
+    }), [editor, ai, onUpdate]);
     const handleCopy = useCallback(() => {
         if (!editor)
             return;
-        navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
+        void navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
         });
@@ -241,5 +299,5 @@ export const MarkdownEditor = ({ content, editable, className, onUpdate, labels,
             (editable ? 'border border-border bg-card shadow-sm' : 'bg-transparent') +
             ' ' +
             (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' : '' })] }));
+    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), hasSelection: hasSelection, onTransform: handleTransform, isTransforming: isTransforming })), _jsx(EditorContent, { editor: editor, className: isFullscreen ? 'flex-1 overflow-y-auto' : '' })] }));
 };

package/dist/providers/PluginProvider.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
+import posthog from 'posthog-js';
 import ContextMenu from '../components/ContextMenu';
 import { useTheme } from '../hooks/ThemeSetter';
 const PluginContext = createContext(null);
@@ -20,6 +21,22 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
     const [theme, setTheme] = useState(undefined);
     const [userInfo, setUserInfo] = useState(null);
     useTheme(theme);
+    // Init PostHog once per plugin iframe
+    useEffect(() => {
+        if (!posthog.__loaded) {
+            posthog.init('phc_l4vPVZxtjlcQUDivoh5TaUL6oDe8K2lig89405cGnsv', {
+                cookieless_mode: 'always',
+                api_host: 'https://eu.i.posthog.com',
+                defaults: '2026-01-30',
+                loaded: (ph) => {
+                    ph.register({
+                        application: 'frontend',
+                        pluginId: pluginId,
+                    });
+                },
+            });
+        }
+    }, []);
     const isSidebar = applicationMode === 'sidebar';
     const isSettings = applicationMode === 'settings';
     useEffect(() => {
@@ -45,6 +62,12 @@ export const PluginProvider = ({ children, pluginId, settings }) => {
             });
         }
     }, [pluginId, standaloneClient, client]);
+    // Identify user in PostHog when userInfo is available
+    useEffect(() => {
+        if (userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id) {
+            posthog.identify(userInfo.user_id);
+        }
+    }, [userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id]);
     // Listen for RimoriInfo updates and update userInfo
     useEffect(() => {
         if (!client)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.12",
+  "version": "0.4.13-next.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -19,20 +19,21 @@
   "scripts": {
     "build": "tsc && sass src/style.scss:dist/style.css",
     "dev": "tsc -w  --preserveWatchOutput",
+    "dev:watch": "tsc -w  --preserveWatchOutput",
     "css-dev": "sass --watch src/style.scss:dist/style.css",
     "lint": "eslint . --fix",
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "^2.5.21",
+    "@rimori/client": "^2.5.24",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
   "dependencies": {
     "@tiptap/core": "^2.26.1",
-    "@tiptap/extension-paragraph": "^2.26.1",
     "@tiptap/extension-image": "^2.26.1",
     "@tiptap/extension-link": "^2.26.1",
+    "@tiptap/extension-paragraph": "^2.26.1",
     "@tiptap/extension-table": "^2.26.1",
     "@tiptap/extension-table-cell": "^2.26.1",
     "@tiptap/extension-table-header": "^2.26.1",
@@ -42,12 +43,13 @@
     "@tiptap/react": "^2.26.1",
     "@tiptap/starter-kit": "^2.26.1",
     "html2canvas": "1.4.1",
+    "posthog-js": "^1.360.2",
     "react-icons": "5.4.0",
     "tiptap-markdown": "^0.8.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "^2.5.21",
+    "@rimori/client": "^2.5.24",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/editor/MarkdownEditor.tsx

@@ -1,4 +1,5 @@
 import { JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LuSparkles } from 'react-icons/lu';
 import { useRimori } from '../../providers/PluginProvider';
 import { Markdown } from 'tiptap-markdown';
 import StarterKit from '@tiptap/starter-kit';
@@ -31,11 +32,11 @@ import {
   LuHeading2,
   LuHeading3,
   LuLink,
-  LuUnlink,
   LuCopy,
   LuCheck,
   LuMaximize2,
   LuMinimize2,
+  LuLoader,
 } from 'react-icons/lu';
 import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
 import { ImageUploadExtension, triggerImageUpload } from './ImageUploadExtension';
@@ -125,7 +126,7 @@ const EditorButton = ({ editor, action, isActive, label, disabled, title }: Edit
 // Inline panels (no Radix required)
 // ---------------------------------------------------------------------------
 
-type PanelType = 'link' | 'youtube' | 'markdown' | null;
+type PanelType = 'link' | 'youtube' | 'markdown' | 'transform' | null;
 
 interface InlinePanelProps {
   panel: PanelType;
@@ -133,9 +134,19 @@ interface InlinePanelProps {
   editor: Editor;
   onUpdate: (content: string) => void;
   labels: Required<EditorLabels>;
+  onTransform?: (prompt: string) => Promise<void>;
+  isTransforming?: boolean;
 }
 
-const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }: InlinePanelProps): JSX.Element | null => {
+const InlinePanel = ({
+  panel,
+  onClose,
+  editor,
+  onUpdate,
+  labels,
+  onTransform,
+  isTransforming,
+}: InlinePanelProps): JSX.Element | null => {
   const [value, setValue] = useState('');
 
   // Reset value when panel changes
@@ -167,6 +178,9 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }: InlinePanelPr
       editor.commands.focus('end');
       onUpdate(combined);
       onClose();
+    } else if (panel === 'transform') {
+      if (!value.trim() || !onTransform) return;
+      onTransform(value.trim());
     }
   };
 
@@ -176,6 +190,7 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }: InlinePanelPr
   };
 
   const isMarkdown = panel === 'markdown';
+  const isTransform = panel === 'transform';
 
   return (
     <div className="bg-muted/80 border-b border-border px-2 py-1.5 flex flex-col gap-1.5">
@@ -184,9 +199,21 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }: InlinePanelPr
           ? labels.setLinkTitle
           : panel === 'youtube'
             ? labels.addYoutubeTitle
-            : labels.appendMarkdownTitle}
+            : panel === 'transform'
+              ? labels.transformSelectionTitle
+              : labels.appendMarkdownTitle}
       </p>
-      {isMarkdown ? (
+      {isTransform ? (
+        <input
+          autoFocus
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={labels.transformSelectionPlaceholder}
+          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"
+        />
+      ) : isMarkdown ? (
         <textarea
           autoFocus
           rows={4}
@@ -211,21 +238,25 @@ const InlinePanel = ({ panel, onClose, editor, onUpdate, labels }: InlinePanelPr
         <button
           type="button"
           onClick={onClose}
-          className="text-xs px-3 py-1 rounded border border-border hover:bg-accent transition-colors"
+          disabled={isTransforming}
+          className="text-xs px-3 py-1 rounded border border-border hover:bg-accent transition-colors disabled:opacity-40"
         >
           {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"
+          disabled={!value.trim() || (panel === 'link' && value.trim() === 'https://') || isTransforming}
+          className="text-xs px-3 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors flex items-center gap-1"
         >
+          {isTransforming && <LuLoader size={12} className="animate-spin" />}
           {panel === 'link'
             ? labels.setLinkConfirm
             : panel === 'youtube'
               ? labels.addYoutubeConfirm
-              : labels.appendMarkdownConfirm}
+              : panel === 'transform'
+                ? labels.transformSelectionConfirm
+                : labels.appendMarkdownConfirm}
         </button>
       </div>
     </div>
@@ -245,6 +276,9 @@ interface MenuBarProps {
   copied: boolean;
   isFullscreen: boolean;
   onToggleFullscreen: () => void;
+  hasSelection: boolean;
+  onTransform: (prompt: string) => Promise<void>;
+  isTransforming: boolean;
 }
 
 const MenuBar = ({
@@ -256,6 +290,9 @@ const MenuBar = ({
   copied,
   isFullscreen,
   onToggleFullscreen,
+  hasSelection,
+  onTransform,
+  isTransforming,
 }: MenuBarProps): JSX.Element => {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
 
@@ -369,30 +406,26 @@ const MenuBar = ({
 
         <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' : '')
+        {/* Link button — opens panel when no link active, removes link when active */}
+        <button
+          type="button"
+          onClick={() => {
+            if (isLink) {
+              editor.chain().focus().unsetLink().run();
+            } else {
+              toggle('link');
             }
-          >
-            <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>
+          }}
+          title={isLink ? labels.unsetLink : labels.setLink}
+          className={
+            'w-8 h-8 flex items-center justify-center rounded-md transition-colors duration-150 ' +
+            (isLink
+              ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground hover:bg-destructive/10 hover:text-destructive'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground')
+          }
+        >
+          <LuLink size={18} />
+        </button>
 
         {/* YouTube */}
         <button type="button" onClick={() => toggle('youtube')} className={tableBtnClass} title={labels.addYoutube}>
@@ -422,65 +455,72 @@ const MenuBar = ({
         >
           <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} style={{ transform: 'scaleX(-1)' }} />
-        </button>
+        {inTable && (
+          <>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().addColumnAfter().run()}
+              className={tableBtnClass}
+              title={labels.addColumnAfter}
+            >
+              <TbColumnInsertRight size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().addRowAfter().run()}
+              className={tableBtnClass}
+              title={labels.addRowAfter}
+            >
+              <TbRowInsertBottom size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().deleteColumn().run()}
+              className={tableBtnClass}
+              title={labels.deleteColumn}
+            >
+              <TbColumnRemove size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().deleteRow().run()}
+              className={tableBtnClass}
+              title={labels.deleteRow}
+            >
+              <TbRowRemove size={18} />
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().mergeOrSplit().run()}
+              className={tableBtnClass}
+              title={labels.mergeOrSplit}
+            >
+              <TbArrowMergeBoth size={18} />
+            </button>
+          </>
+        )}
 
         <div className={'ml-auto flex items-center gap-0.5 ' + (isFullscreen ? 'pr-10' : '')}>
+          {/* Transform selection (only when text is selected) */}
+          {hasSelection && (
+            <button
+              type="button"
+              onClick={() => toggle('transform')}
+              className={tableBtnClass + (activePanel === 'transform' ? ' bg-primary/10 text-primary' : '')}
+              title={labels.transformSelection}
+            >
+              <LuSparkles size={16} />
+            </button>
+          )}
+          {/* Append raw markdown */}
+          <button
+            type="button"
+            onClick={() => toggle('markdown')}
+            className={tableBtnClass}
+            title={labels.appendMarkdown}
+          >
+            <LuClipboardPaste size={18} style={{ transform: 'scaleX(-1)' }} />
+          </button>
           <button type="button" onClick={onCopy} title="Copy as Markdown" className={tableBtnClass}>
             {copied ? <LuCheck size={16} className="text-green-500" /> : <LuCopy size={16} />}
           </button>
@@ -497,10 +537,15 @@ const MenuBar = ({
 
       <InlinePanel
         panel={activePanel}
-        onClose={() => setActivePanel(null)}
+        onClose={() => !isTransforming && setActivePanel(null)}
         editor={editor}
         onUpdate={onUpdate}
         labels={labels}
+        onTransform={async (prompt) => {
+          await onTransform(prompt);
+          setActivePanel(null);
+        }}
+        isTransforming={isTransforming}
       />
     </>
   );
@@ -543,6 +588,10 @@ export interface EditorLabels {
   appendMarkdownTitle?: string;
   appendMarkdownPlaceholder?: string;
   appendMarkdownConfirm?: string;
+  transformSelection?: string;
+  transformSelectionTitle?: string;
+  transformSelectionPlaceholder?: string;
+  transformSelectionConfirm?: string;
   cancel?: string;
 }
 
@@ -579,6 +628,10 @@ const DEFAULT_LABELS: Required<EditorLabels> = {
   appendMarkdownTitle: 'Append Markdown',
   appendMarkdownPlaceholder: 'Paste markdown here…',
   appendMarkdownConfirm: 'Append',
+  transformSelection: 'Transform selection with AI',
+  transformSelectionTitle: 'Transform selected text with AI',
+  transformSelectionPlaceholder: 'e.g. "Fix grammar", "Make more formal", "Translate to Spanish"…',
+  transformSelectionConfirm: 'Transform',
   cancel: 'Cancel',
 };
 
@@ -605,11 +658,13 @@ export const MarkdownEditor = ({
   labels,
   onContentClick,
 }: MarkdownEditorProps): JSX.Element => {
-  const { storage } = useRimori();
+  const { storage, ai } = useRimori();
   const mergedLabels: Required<EditorLabels> = { ...DEFAULT_LABELS, ...labels };
   const lastEmittedRef = useRef(content ?? '');
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [hasSelection, setHasSelection] = useState(false);
+  const [isTransforming, setIsTransforming] = useState(false);
 
   const stableUpload = useCallback(
     async (pngBlob: Blob): Promise<string | null> => {
@@ -649,11 +704,43 @@ export const MarkdownEditor = ({
       lastEmittedRef.current = markdown;
       onUpdate?.(markdown);
     },
+    onSelectionUpdate: ({ editor: ed }) => {
+      const { from, to } = ed.state.selection;
+      setHasSelection(from !== to);
+    },
   });
 
+  const handleTransform = useCallback(
+    async (prompt: string) => {
+      if (!editor) return;
+      const { from, to } = editor.state.selection;
+      if (from === to) return;
+      const selectedText = editor.state.doc.textBetween(from, to, '\n');
+      setIsTransforming(true);
+      const transformed = await ai.getText([
+        {
+          role: 'system',
+          content:
+            'You are a text editor assistant. Transform the provided text according to the user instruction. Return only the transformed text, no explanations. If formattation is wished, use markdown syntax in the output.',
+        },
+        {
+          role: 'user',
+          content: `Instruction: ${prompt}\n\nText:\n${selectedText}`,
+        },
+      ]);
+      setIsTransforming(false);
+      if (!transformed) return;
+      editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, transformed).run();
+      const markdown = getMarkdown(editor);
+      lastEmittedRef.current = markdown;
+      onUpdate?.(markdown);
+    },
+    [editor, ai, onUpdate],
+  );
+
   const handleCopy = useCallback(() => {
     if (!editor) return;
-    navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
+    void navigator.clipboard.writeText(getMarkdown(editor)).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     });
@@ -694,6 +781,9 @@ export const MarkdownEditor = ({
           copied={copied}
           isFullscreen={isFullscreen}
           onToggleFullscreen={() => setIsFullscreen((v) => !v)}
+          hasSelection={hasSelection}
+          onTransform={handleTransform}
+          isTransforming={isTransforming}
         />
       )}
       <EditorContent editor={editor} className={isFullscreen ? 'flex-1 overflow-y-auto' : ''} />

package/src/providers/PluginProvider.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
 import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
 import type { UserInfo } from '@rimori/client';
+import posthog from 'posthog-js';
 import ContextMenu from '../components/ContextMenu';
 import { useTheme } from '../hooks/ThemeSetter';
 import { Theme } from '@rimori/client';
@@ -29,6 +30,23 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
 
   useTheme(theme);
 
+  // Init PostHog once per plugin iframe
+  useEffect(() => {
+    if (!posthog.__loaded) {
+      posthog.init('phc_l4vPVZxtjlcQUDivoh5TaUL6oDe8K2lig89405cGnsv', {
+        cookieless_mode: 'always',
+        api_host: 'https://eu.i.posthog.com',
+        defaults: '2026-01-30',
+        loaded: (ph) => {
+          ph.register({
+            application: 'frontend',
+            pluginId: pluginId,
+          });
+        },
+      });
+    }
+  }, []);
+
   const isSidebar = applicationMode === 'sidebar';
   const isSettings = applicationMode === 'settings';
 
@@ -60,6 +78,13 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
     }
   }, [pluginId, standaloneClient, client]);
 
+  // Identify user in PostHog when userInfo is available
+  useEffect(() => {
+    if (userInfo?.user_id) {
+      posthog.identify(userInfo.user_id);
+    }
+  }, [userInfo?.user_id]);
+
   // Listen for RimoriInfo updates and update userInfo
   useEffect(() => {
     if (!client) return;