@examplary/ui 1.47.0 → 1.49.0

package/README.md

@@ -1,3 +1,3 @@
 # UI components for Examplary
 
-Read more in the [📘 Developer Documentation](https://developers.examplary.ai/question-types).
+Read more in the [📘 Developer Documentation](https://examplary.ai/developers/question-types).

package/dist/components/rich-text/index.d.ts

@@ -1,5 +1,6 @@
 export { RichTextDisplay } from "./rich-text-display";
 export { RichTextField } from "./rich-text-field";
 export { RichTextToolbar } from "./rich-text-toolbar";
-export { MinimalRichTextField } from "./minimal-rich-text-field";
+export { MinimalRichTextField, getEditorById } from "./minimal-rich-text-field";
 export { processFilesAsString } from "./tiptap/file-handler";
+export * from "./tiptap/extensions";

package/dist/components/rich-text/index.js

@@ -1,5 +1,6 @@
 export { RichTextDisplay } from "./rich-text-display";
 export { RichTextField } from "./rich-text-field";
 export { RichTextToolbar } from "./rich-text-toolbar";
-export { MinimalRichTextField } from "./minimal-rich-text-field";
+export { MinimalRichTextField, getEditorById } from "./minimal-rich-text-field";
 export { processFilesAsString } from "./tiptap/file-handler";
+export * from "./tiptap/extensions";

package/dist/components/rich-text/minimal-rich-text-field.d.ts

@@ -1,4 +1,6 @@
-import { EditorContentProps } from "@tiptap/react";
+import { Editor, EditorContentProps } from "@tiptap/react";
+import { XmlFragment } from "yjs";
+export declare const getEditorById: (id: string) => Editor;
 export type MinimalRichTextFieldProps = {
     className?: string;
     value?: string;
@@ -9,11 +11,14 @@ export type MinimalRichTextFieldProps = {
     onBlur?: (value: string) => void;
     slotBefore?: (editor: any) => React.ReactNode;
     singleLine?: boolean;
+    id?: string;
     autoFocus?: boolean;
     showFormattingMenu?: boolean;
     uploadFile?: (file: File) => Promise<{
         url: string;
         name: string;
     }>;
+    fragment?: XmlFragment;
+    awareness?: any;
 } & Omit<EditorContentProps, "editor">;
-export declare const MinimalRichTextField: ({ className, value, defaultValue, placeholder, onChange, onBlur, slotBefore, style, singleLine, autoFocus, showFormattingMenu, uploadFile, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalRichTextField: ({ className, value, defaultValue, placeholder, onChange, onBlur, slotBefore, style, singleLine, autoFocus, showFormattingMenu, uploadFile, fragment, awareness, id, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/minimal-rich-text-field.js

@@ -32,23 +32,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
+import Collaboration from "@tiptap/extension-collaboration";
 import Document from "@tiptap/extension-document";
-import Highlight from "@tiptap/extension-highlight";
-import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
-import { TableKit } from "@tiptap/extension-table";
-import Typography from "@tiptap/extension-typography";
+import { UndoRedo } from "@tiptap/extensions";
 import { EditorContent, useEditor, } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
+import { CollaborationCaret } from "./tiptap/collaboration-caret";
 import { cn } from "../../utils";
 import { registerWebComponents } from "../web-components";
-import FileAttachment from "./tiptap/file-attachment";
+import { defaultRichTextExtensions } from "./tiptap/extensions";
 import { fileHandler } from "./tiptap/file-handler";
 import Image from "./tiptap/image";
-import { Mathematics } from "./tiptap/mathematics";
-import PageClipping from "./tiptap/page-clipping";
 import { RichTextFormattingMenu } from "./tiptap/rich-text-formatting-menu";
 registerWebComponents();
+var textEditors = new Map();
+export var getEditorById = function (id) {
+    return textEditors.get(id);
+};
+var CustomCollaboration = Collaboration.extend({
+    addCommands: function () {
+        return {
+            undo: function () { return function () {
+                return false;
+            }; },
+            redo: function () { return function () {
+                return false;
+            }; },
+        };
+    },
+    addKeyboardShortcuts: function () {
+        return {};
+    },
+});
 var isEmpty = function (value) {
     var _a;
     if (!value) {
@@ -66,36 +81,26 @@ var isEmpty = function (value) {
     return false;
 };
 export var MinimalRichTextField = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, defaultValue = _a.defaultValue, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, onChange = _a.onChange, onBlur = _a.onBlur, slotBefore = _a.slotBefore, style = _a.style, _e = _a.singleLine, singleLine = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.showFormattingMenu, showFormattingMenu = _g === void 0 ? false : _g, _h = _a.uploadFile, uploadFile = _h === void 0 ? undefined : _h, props = __rest(_a, ["className", "value", "defaultValue", "placeholder", "onChange", "onBlur", "slotBefore", "style", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile"]);
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, defaultValue = _a.defaultValue, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, onChange = _a.onChange, onBlur = _a.onBlur, slotBefore = _a.slotBefore, style = _a.style, _e = _a.singleLine, singleLine = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.showFormattingMenu, showFormattingMenu = _g === void 0 ? false : _g, _h = _a.uploadFile, uploadFile = _h === void 0 ? undefined : _h, fragment = _a.fragment, awareness = _a.awareness, id = _a.id, props = __rest(_a, ["className", "value", "defaultValue", "placeholder", "onChange", "onBlur", "slotBefore", "style", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile", "fragment", "awareness", "id"]);
     var _j = useState(value), content = _j[0], setContent = _j[1];
     var extensions = useMemo(function () {
-        return __spreadArray(__spreadArray([], (singleLine
-            ? [
-                StarterKit.configure({
-                    document: false,
-                    link: false,
-                }),
-                Document.extend({
+        return __spreadArray(__spreadArray([], defaultRichTextExtensions, true), [
+            singleLine
+                ? Document.extend({
                     content: "block",
-                }),
-            ]
-            : [StarterKit.configure({ link: false })]), true), [
-            Link.configure({
-                openOnClick: false,
-            }),
-            Typography,
+                })
+                : Document,
             Image,
+            !fragment && UndoRedo,
+            fragment &&
+                CustomCollaboration.configure({
+                    fragment: fragment,
+                }),
+            awareness && CollaborationCaret.configure({ awareness: awareness }),
             placeholder && Placeholder.configure({ placeholder: placeholder }),
-            FileAttachment,
-            PageClipping,
-            Mathematics,
-            Highlight,
-            TableKit.configure({
-                table: { resizable: true },
-            }),
             uploadFile && fileHandler(uploadFile),
         ], false).filter(Boolean);
-    }, [singleLine, placeholder, uploadFile]);
+    }, [singleLine, placeholder, uploadFile, fragment, awareness]);
     var editor = useEditor({
         onUpdate: function (_a) {
             var editor = _a.editor;
@@ -111,7 +116,7 @@ export var MinimalRichTextField = function (_a) {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur(html);
         },
         autofocus: autoFocus,
-        content: content,
+        content: fragment ? undefined : content,
         extensions: extensions,
         editorProps: {
             attributes: {
@@ -121,6 +126,8 @@ export var MinimalRichTextField = function (_a) {
         },
     });
     useEffect(function () {
+        if (fragment)
+            return;
         if (value !== content && defaultValue === undefined) {
             setContent(value);
             editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value, {
@@ -130,8 +137,10 @@ export var MinimalRichTextField = function (_a) {
                 },
             });
         }
-    }, [value, content, editor]);
+    }, [value, content, editor, fragment]);
     useEffect(function () {
+        if (fragment)
+            return;
         if (defaultValue !== undefined) {
             setContent(defaultValue);
             editor === null || editor === void 0 ? void 0 : editor.commands.setContent(defaultValue, {
@@ -141,6 +150,16 @@ export var MinimalRichTextField = function (_a) {
                 },
             });
         }
-    }, [defaultValue]);
+    }, [defaultValue, fragment]);
+    useEffect(function () {
+        if (!editor || !id)
+            return;
+        textEditors.set(id, editor);
+        return function () {
+            if (textEditors.get(id) === editor) {
+                textEditors.delete(id);
+            }
+        };
+    }, [editor, id]);
     return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && _jsx(RichTextFormattingMenu, { editor: editor }), _jsx(EditorContent, __assign({ editor: editor }, props))] }));
 };

package/dist/components/rich-text/tiptap/collaboration-caret.d.ts

@@ -0,0 +1,25 @@
+import { Extension } from "@tiptap/core";
+type CollaborationCaretStorage = {
+    users: {
+        clientId: number;
+        [key: string]: any;
+    }[];
+    updateHandler: (() => void) | null;
+};
+export interface CollaborationCaretOptions {
+    /**
+     * The awareness provider
+     */
+    awareness: any;
+}
+declare module "@tiptap/core" {
+    interface Storage {
+        collaborationCaret: CollaborationCaretStorage;
+    }
+}
+/**
+ * This extension allows you to add collaboration carets to your editor.
+ * @see https://tiptap.dev/api/extensions/collaboration-caret
+ */
+export declare const CollaborationCaret: Extension<CollaborationCaretOptions, CollaborationCaretStorage>;
+export {};

package/dist/components/rich-text/tiptap/collaboration-caret.js

@@ -0,0 +1,81 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Extension } from "@tiptap/core";
+import { defaultSelectionBuilder, yCursorPlugin } from "@tiptap/y-tiptap";
+var awarenessStatesToArray = function (states) {
+    return Array.from(states.entries()).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return __assign({ clientId: key }, value.user);
+    });
+};
+var getSafeColor = function (color) {
+    return typeof color === "string" ? color : "";
+};
+var renderCursor = function (user) {
+    var cursor = document.createElement("span");
+    var color = getSafeColor(user.color);
+    cursor.classList.add("collaboration-carets__caret");
+    cursor.style.borderColor = color;
+    var label = document.createElement("div");
+    label.classList.add("collaboration-carets__label");
+    label.style.backgroundColor = color;
+    label.insertBefore(document.createTextNode(user.name), null);
+    cursor.insertBefore(label, null);
+    return cursor;
+};
+/**
+ * This extension allows you to add collaboration carets to your editor.
+ * @see https://tiptap.dev/api/extensions/collaboration-caret
+ */
+export var CollaborationCaret = Extension.create({
+    name: "collaborationCaret",
+    priority: 999,
+    addOptions: function () {
+        return {
+            awareness: null,
+        };
+    },
+    onCreate: function () {
+        if (!this.options.awareness) {
+            throw new Error('The "awareness" option is required for the CollaborationCaret extension');
+        }
+    },
+    addStorage: function () {
+        return {
+            users: [],
+            updateHandler: null,
+        };
+    },
+    onDestroy: function () {
+        if (this.options.awareness && this.storage.updateHandler) {
+            this.options.awareness.off("update", this.storage.updateHandler);
+            this.storage.updateHandler = null;
+        }
+    },
+    addProseMirrorPlugins: function () {
+        var _this = this;
+        return [
+            yCursorPlugin((function () {
+                _this.storage.users = awarenessStatesToArray(_this.options.awareness.states);
+                var updateHandler = function () {
+                    _this.storage.users = awarenessStatesToArray(_this.options.awareness.states);
+                };
+                _this.storage.updateHandler = updateHandler;
+                _this.options.awareness.on("update", updateHandler);
+                return _this.options.awareness;
+            })(), {
+                cursorBuilder: renderCursor,
+                selectionBuilder: defaultSelectionBuilder,
+            }),
+        ];
+    },
+});

package/dist/components/rich-text/tiptap/content-reference.d.ts

@@ -0,0 +1,3 @@
+import { Mark } from "@tiptap/core";
+declare const ContentReference: Mark<any, any>;
+export default ContentReference;

package/dist/components/rich-text/tiptap/content-reference.js

@@ -0,0 +1,25 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+var ContentReference = Mark.create({
+    name: "content-reference",
+    addAttributes: function () {
+        return {
+            quote: {
+                default: null,
+                parseHTML: function (element) { return element.getAttribute("quote"); },
+                renderHTML: function (attributes) {
+                    if (!attributes.quote)
+                        return {};
+                    return { quote: attributes.quote };
+                },
+            },
+        };
+    },
+    parseHTML: function () {
+        return [{ tag: "content-reference" }];
+    },
+    renderHTML: function (_a) {
+        var HTMLAttributes = _a.HTMLAttributes;
+        return ["content-reference", mergeAttributes(HTMLAttributes), 0];
+    },
+});
+export default ContentReference;

package/dist/components/rich-text/tiptap/extensions.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultRichTextExtensions: (import("@tiptap/core").Mark<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any>)[];
+export declare const htmlRenderingRichTextExtensions: (import("@tiptap/core").Mark<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any>)[];

package/dist/components/rich-text/tiptap/extensions.js

@@ -0,0 +1,43 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import Document from "@tiptap/extension-document";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import { TableKit } from "@tiptap/extension-table";
+import Typography from "@tiptap/extension-typography";
+import StarterKit from "@tiptap/starter-kit";
+import ContentReference from "./content-reference.js";
+import FileAttachment from "./file-attachment.js";
+import { Mathematics } from "./mathematics.js";
+import PageClipping from "./page-clipping.js";
+export var defaultRichTextExtensions = [
+    StarterKit.configure({
+        document: false,
+        link: false,
+        undoRedo: false,
+    }),
+    Link.configure({
+        openOnClick: false,
+    }),
+    Typography,
+    FileAttachment,
+    PageClipping,
+    ContentReference,
+    Mathematics,
+    Highlight,
+    TableKit.configure({
+        table: { resizable: true },
+    }),
+];
+export var htmlRenderingRichTextExtensions = __spreadArray([
+    Document,
+    Image
+], defaultRichTextExtensions, true);

package/dist/components/rich-text/tiptap/file-attachment.js

@@ -1,7 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { mergeAttributes, Node } from "@tiptap/core";
-import { createRoot } from "react-dom/client";
-import { FileAttachmentView } from "../../web-components/file-attachment";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 export default Node.create({
     name: "file-attachment",
     group: "block",
@@ -25,16 +23,42 @@ export default Node.create({
         var HTMLAttributes = _a.HTMLAttributes;
         return ["file-attachment", mergeAttributes(HTMLAttributes)];
     },
-    addNodeView: function () {
-        return function (_a) {
-            var node = _a.node;
-            var dom = document.createElement("div");
-            dom.classList.add("file-attachment");
-            var root = createRoot(dom);
-            root.render(_jsx(FileAttachmentView, { title: node.attrs.title, type: node.attrs.type, href: node.attrs.href, className: "pointer-events-none" }));
-            return {
-                dom: dom,
-            };
-        };
+    addProseMirrorPlugins: function () {
+        var _this = this;
+        // Similar to the TipTap Link extension, we disable clicking on these
+        // links in the editor, since that is annoying. We don't want to change
+        // the HTML tag though!
+        return [
+            new Plugin({
+                key: new PluginKey("handleClickFileAttachment"),
+                props: {
+                    handleClick: function (view, pos, event) {
+                        if (event.button !== 0) {
+                            return false;
+                        }
+                        if (!view.editable) {
+                            return false;
+                        }
+                        var link = null;
+                        var target = event.target;
+                        if (!target) {
+                            return false;
+                        }
+                        var root = _this.editor.view.dom;
+                        link = target.closest("file-attachment");
+                        if (link && !root.contains(link)) {
+                            link = null;
+                        }
+                        if (!link) {
+                            return false;
+                        }
+                        if (target !== link) {
+                            _this.editor.commands.selectParentNode();
+                        }
+                        return true;
+                    },
+                },
+            }),
+        ];
     },
 });

package/dist/components/rich-text/tiptap/image.d.ts

@@ -20,25 +20,6 @@ export interface ImageOptions {
      */
     HTMLAttributes: Record<string, any>;
 }
-declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        image: {
-            /**
-             * Add an image
-             * @param options The image attributes
-             * @example
-             * editor
-             *   .commands
-             *   .setImage({ src: 'https://tiptap.dev/logo.png', alt: 'tiptap', title: 'tiptap logo' })
-             */
-            setImage: (options: {
-                src: string;
-                alt?: string;
-                title?: string;
-            }) => ReturnType;
-        };
-    }
-}
 /**
  * Matches an image to a ![image](src "title") on input.
  */

package/dist/components/rich-text/tiptap/mathematics-component.js

@@ -3,8 +3,8 @@ import { useMemo, useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 import { EditIcon } from "lucide-react";
 import { convertLatexToMathMl } from "mathlive";
-import { cn } from "../../../utils";
-import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover";
+import { cn } from "../../../utils.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover.js";
 import "mathlive";
 export var MathematicsEditComponent = function (_a) {
     var node = _a.node, editor = _a.editor;

package/dist/components/rich-text/tiptap/mathematics.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { InputRule, Node } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
-import { MathematicsEditComponent } from "./mathematics-component";
+import { MathematicsEditComponent } from "./mathematics-component.js";
 /**
  * InlineMath is a Tiptap extension for rendering inline mathematical expressions using LaTeX and MathML.
  * It allows users to insert LaTeX formatted math expressions inline within text.

package/dist/components/rich-text/tiptap/page-clipping.js

@@ -1,18 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { mergeAttributes, Node } from "@tiptap/core";
-import { createRoot } from "react-dom/client";
-import { PageClippingView } from "../../web-components/page-clipping";
 export default Node.create({
     name: "page-clipping",
     group: "block",
@@ -39,16 +25,4 @@ export default Node.create({
         var HTMLAttributes = _a.HTMLAttributes;
         return ["page-clipping", mergeAttributes(HTMLAttributes)];
     },
-    addNodeView: function () {
-        return function (_a) {
-            var node = _a.node;
-            var dom = document.createElement("div");
-            dom.classList.add("page-clipping");
-            var root = createRoot(dom);
-            root.render(_jsx(PageClippingView, __assign({}, node.attrs)));
-            return {
-                dom: dom,
-            };
-        };
-    },
 });

package/dist/components/rich-text/tiptap/rich-text-formatting-menu.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import { Trans } from "react-i18next";
 import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { BoldIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, SquareFunctionIcon, TextQuoteIcon, } from "lucide-react";
+import { BoldIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, SquareFunctionIcon, TextQuoteIcon, TrashIcon, } from "lucide-react";
 import { CropPageClippingModal } from "./crop-page-clipping-modal";
 import { cn } from "../../../utils";
 export var RichTextFormattingMenu = function (_a) {
@@ -47,35 +47,43 @@ export var RichTextFormattingMenu = function (_a) {
             isBlockquote: ctx.editor.isActive("blockquote"),
             isInlineMath: ctx.editor.isActive("inlineMath"),
             isPageClipping: ctx.editor.isActive("page-clipping"),
+            isFileAttachment: ctx.editor.isActive("file-attachment"),
+            isImage: ctx.editor.isActive("image"),
         }); },
     });
     if (!editor) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(CropPageClippingModal, { pageClipping: pageClipping, onClose: function () { return setPageClipping(null); }, onUpdate: function (newParameters) {
-                    setPageClipping(null);
-                    editor
-                        .chain()
-                        .focus()
-                        .updateAttributes("page-clipping", newParameters)
-                        .run();
-                } }), _jsx(BubbleMenu, { editor: editor, children: _jsx("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: state.isPageClipping ? (_jsxs("span", { onClick: function () {
-                            return setPageClipping(editor.getAttributes("page-clipping"));
-                        }, className: "p-1 cursor-pointer flex items-center gap-1 pr-2 hover:bg-zinc-100 rounded-base", children: [_jsx(CropIcon, { className: "size-3.5 m-0.5" }), _jsx(Trans, { children: "formatting.crop.crop" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { onClick: function () {
-                                    return editor.chain().focus().toggleBold().run();
-                                }, className: cn("p-1 cursor-pointer", state.isBold ? "bg-zinc-200 rounded-base" : ""), children: _jsx(BoldIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBold ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                                    return editor.chain().focus().toggleItalic().run();
-                                }, className: cn("p-1 cursor-pointer", state.isItalic ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ItalicIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isItalic ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                                    return editor.chain().focus().toggleHighlight().run();
-                                }, className: cn("p-1 cursor-pointer", state.isHighlight ? "bg-zinc-200 rounded-base" : ""), children: _jsx(HighlighterIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isHighlight ? 2.75 : 2 }) }), _jsx("span", { onClick: setLink, className: cn("p-1 cursor-pointer", state.isLink ? "bg-zinc-200 rounded-base" : ""), children: _jsx(LinkIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isLink ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                                    return editor.chain().focus().toggleBulletList().run();
-                                }, className: cn("p-1 cursor-pointer", state.isBulletList ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ListIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBulletList ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                                    return editor.chain().focus().toggleOrderedList().run();
-                                }, className: cn("p-1 cursor-pointer", state.isOrderedList ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ListIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isOrderedList ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                                    return editor.chain().focus().toggleBlockquote().run();
-                                }, className: cn("p-1 cursor-pointer", state.isBlockquote ? "bg-zinc-200 rounded-base" : ""), children: _jsx(TextQuoteIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBlockquote ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
-                                    return editor.chain().focus()
-                                        .insertInlineMath({ latex: "" })
-                                        .run();
-                                }, className: cn("p-1 cursor-pointer", state.isInlineMath ? "bg-zinc-200 rounded-base" : ""), children: _jsx(SquareFunctionIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isInlineMath ? 2.75 : 2 }) })] })) }) })] }));
+    if (state.isPageClipping) {
+        return (_jsxs(_Fragment, { children: [_jsx(CropPageClippingModal, { pageClipping: pageClipping, onClose: function () { return setPageClipping(null); }, onUpdate: function (newParameters) {
+                        setPageClipping(null);
+                        editor
+                            .chain()
+                            .focus()
+                            .updateAttributes("page-clipping", newParameters)
+                            .run();
+                    } }), _jsx(BubbleMenu, { editor: editor, children: _jsx("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: _jsxs("span", { onClick: function () {
+                                return setPageClipping(editor.getAttributes("page-clipping"));
+                            }, className: "p-1 cursor-pointer flex items-center gap-1 pr-2 hover:bg-zinc-100 rounded-base", children: [_jsx(CropIcon, { className: "size-3.5 m-0.5" }), _jsx(Trans, { children: "formatting.crop.crop" })] }) }) })] }));
+    }
+    if (state.isImage || state.isFileAttachment) {
+        return (_jsx(BubbleMenu, { editor: editor, children: _jsx("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: _jsxs("span", { onClick: function () { return editor.commands.deleteSelection(); }, className: "p-1 cursor-pointer flex items-center gap-1 pr-2 hover:bg-zinc-100 rounded-base", children: [_jsx(TrashIcon, { className: "size-3.5 m-0.5" }), _jsx(Trans, { children: "formatting.delete" })] }) }) }));
+    }
+    return (_jsx(BubbleMenu, { editor: editor, children: _jsxs("div", { className: "border p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md text-xs font-medium select-none", children: [_jsx("span", { onClick: function () {
+                        return editor.chain().focus().toggleBold().run();
+                    }, className: cn("p-1 cursor-pointer", state.isBold ? "bg-zinc-200 rounded-base" : ""), children: _jsx(BoldIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBold ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
+                        return editor.chain().focus().toggleItalic().run();
+                    }, className: cn("p-1 cursor-pointer", state.isItalic ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ItalicIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isItalic ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
+                        return editor.chain().focus().toggleHighlight().run();
+                    }, className: cn("p-1 cursor-pointer", state.isHighlight ? "bg-zinc-200 rounded-base" : ""), children: _jsx(HighlighterIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isHighlight ? 2.75 : 2 }) }), _jsx("span", { onClick: setLink, className: cn("p-1 cursor-pointer", state.isLink ? "bg-zinc-200 rounded-base" : ""), children: _jsx(LinkIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isLink ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
+                        return editor.chain().focus().toggleBulletList().run();
+                    }, className: cn("p-1 cursor-pointer", state.isBulletList ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ListIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBulletList ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
+                        return editor.chain().focus().toggleOrderedList().run();
+                    }, className: cn("p-1 cursor-pointer", state.isOrderedList ? "bg-zinc-200 rounded-base" : ""), children: _jsx(ListIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isOrderedList ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
+                        return editor.chain().focus().toggleBlockquote().run();
+                    }, className: cn("p-1 cursor-pointer", state.isBlockquote ? "bg-zinc-200 rounded-base" : ""), children: _jsx(TextQuoteIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isBlockquote ? 2.75 : 2 }) }), _jsx("span", { onClick: function () {
+                        return editor.chain().focus()
+                            .insertInlineMath({ latex: "" })
+                            .run();
+                    }, className: cn("p-1 cursor-pointer", state.isInlineMath ? "bg-zinc-200 rounded-base" : ""), children: _jsx(SquareFunctionIcon, { className: "size-3.5 m-0.5", strokeWidth: state.isInlineMath ? 2.75 : 2 }) })] }) }));
 };

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: {
-    variant?: "default" | "secondary" | "blue" | "bright" | "positive" | "orange";
+    variant?: "default" | "secondary" | "destructive" | "blue" | "bright" | "positive" | "orange";
 } & import("class-variance-authority/types").ClassProp) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;

package/dist/components/ui/badge.js

@@ -34,6 +34,7 @@ var badgeVariants = cva("font-semibold text-xs rounded-4xl py-0.5 px-2 whitespac
             positive: "bg-emerald-100 text-emerald-600",
             orange: "bg-orange-100 text-orange-800/75",
             secondary: "bg-zinc-200 text-zinc-600",
+            destructive: "bg-red-100 text-red-700",
         },
     },
     defaultVariants: {