@examplary/ui 1.19.0 → 1.21.0

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

@@ -2,4 +2,5 @@ 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 { MathView } from "./math-view";
 export { processFilesAsString } from "./tiptap/file-handler";

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

@@ -2,4 +2,5 @@ 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 { MathView } from "./math-view";
 export { processFilesAsString } from "./tiptap/file-handler";

package/dist/components/rich-text/math-view.d.ts

@@ -0,0 +1,3 @@
+export declare const MathView: ({ children }: {
+    children?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/math-view.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import KaTeX from "katex";
+export var MathView = function (_a) {
+    var children = _a.children;
+    var _b = useMemo(function () {
+        try {
+            var html_1 = KaTeX.renderToString(children !== null && children !== void 0 ? children : "", {
+                displayMode: false,
+                throwOnError: false,
+            });
+            return { html: html_1, error: undefined };
+        }
+        catch (error) {
+            if (error instanceof KaTeX.ParseError || error instanceof TypeError) {
+                return { error: error };
+            }
+            throw error;
+        }
+    }, [children]), html = _b.html, error = _b.error;
+    if (error) {
+        return _jsx("span", { children: error.message });
+    }
+    return _jsx("span", { dangerouslySetInnerHTML: { __html: html } });
+};

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

@@ -34,8 +34,7 @@ import { useEffect, useMemo, useState } from "react";
 import Document from "@tiptap/extension-document";
 import Highlight from "@tiptap/extension-highlight";
 import Link from "@tiptap/extension-link";
-// TODO: fix maths integration
-// import Mathematics, { migrateMathStrings } from "@tiptap/extension-mathematics";
+import { migrateMathStrings } from "@tiptap/extension-mathematics";
 import Placeholder from "@tiptap/extension-placeholder";
 import { TableKit } from "@tiptap/extension-table";
 import Typography from "@tiptap/extension-typography";
@@ -46,6 +45,7 @@ import { registerWebComponents } from "../web-components";
 import FileAttachment from "./tiptap/file-attachment";
 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();
@@ -88,7 +88,7 @@ export var MinimalRichTextField = function (_a) {
             placeholder && Placeholder.configure({ placeholder: placeholder }),
             FileAttachment,
             PageClipping,
-            // Mathematics,
+            Mathematics,
             Highlight,
             TableKit.configure({
                 table: { resizable: true },
@@ -110,9 +110,10 @@ export var MinimalRichTextField = function (_a) {
             html = isEmpty(html) ? "" : html;
             onBlur === null || onBlur === void 0 ? void 0 : onBlur(html);
         },
-        // onCreate: ({ editor: currentEditor }) => {
-        //   migrateMathStrings(currentEditor);
-        // },
+        onCreate: function (_a) {
+            var currentEditor = _a.editor;
+            migrateMathStrings(currentEditor);
+        },
         autofocus: autoFocus,
         content: content,
         extensions: extensions,

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

@@ -20,24 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement, useEffect, useRef } from "react";
-import renderMathInElement from "katex/dist/contrib/auto-render.js";
+import { createElement, useRef } from "react";
 import { cn } from "../../utils";
 export var RichTextDisplay = function (_a) {
     var _b = _a.as, as = _b === void 0 ? "div" : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c, props = __rest(_a, ["as", "children", "className"]);
     var ref = useRef(null);
-    useEffect(function () {
-        if (!ref.current)
-            return;
-        renderMathInElement(ref.current, {
-            throwOnError: false,
-            delimiters: [
-                { left: "$$", right: "$$", display: true },
-                { left: "@@", right: "@@", display: true },
-                { left: "$", right: "$", display: false },
-            ],
-        });
-    });
     // eslint-disable-next-line react-hooks/refs
     return createElement(as, __assign(__assign({}, props), { key: "rich-text-display", className: cn("tiptap", className), dangerouslySetInnerHTML: { __html: children }, ref: ref }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { Bold, Italic, LinkIcon, List, TextQuote } from "lucide-react";
+import { BoldIcon, ItalicIcon, LinkIcon, ListIcon, TextQuoteIcon, } from "lucide-react";
 import { cn } from "../../utils";
 export var RichTextToolbar = function (_a) {
     var editor = _a.editor;
@@ -29,5 +29,5 @@ export var RichTextToolbar = function (_a) {
     if (!editor) {
         return null;
     }
-    return (_jsxs("div", { className: "border border-border border-b-0 rounded-t-base p-1 gap-1 flex items-center", children: [_jsx("span", { onClick: function () { return editor.chain().focus().toggleBold().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("bold") ? "bg-bright rounded-base" : ""), children: _jsx(Bold, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleItalic().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("italic") ? "bg-bright rounded-base" : ""), children: _jsx(Italic, { size: 16 }) }), _jsx("span", { onClick: setLink, className: cn("p-2 cursor-pointer", editor.isActive("link") ? "bg-bright rounded-base" : ""), children: _jsx(LinkIcon, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleBulletList().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("bulletList") ? "bg-bright rounded-base" : ""), children: _jsx(List, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleOrderedList().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("orderedList") ? "bg-bright rounded-base" : ""), children: _jsx(List, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("blockquote") ? "bg-bright rounded-base" : ""), children: _jsx(TextQuote, { size: 16 }) })] }));
+    return (_jsxs("div", { className: "border border-border border-b-0 rounded-t-base p-1 gap-1 flex items-center", children: [_jsx("span", { onClick: function () { return editor.chain().focus().toggleBold().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("bold") ? "bg-bright rounded-base" : ""), children: _jsx(BoldIcon, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleItalic().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("italic") ? "bg-bright rounded-base" : ""), children: _jsx(ItalicIcon, { size: 16 }) }), _jsx("span", { onClick: setLink, className: cn("p-2 cursor-pointer", editor.isActive("link") ? "bg-bright rounded-base" : ""), children: _jsx(LinkIcon, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleBulletList().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("bulletList") ? "bg-bright rounded-base" : ""), children: _jsx(ListIcon, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleOrderedList().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("orderedList") ? "bg-bright rounded-base" : ""), children: _jsx(ListIcon, { size: 16 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, className: cn("p-2 cursor-pointer", editor.isActive("blockquote") ? "bg-bright rounded-base" : ""), children: _jsx(TextQuoteIcon, { size: 16 }) })] }));
 };

package/dist/components/rich-text/tiptap/crop-page-clipping-modal.d.ts

@@ -0,0 +1,6 @@
+import "react-image-crop/dist/ReactCrop.css";
+export declare const CropPageClippingModal: ({ pageClipping, onClose, onUpdate }: {
+    pageClipping: any;
+    onClose: any;
+    onUpdate: any;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Trans } from "react-i18next";
+import ReactCrop from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+import { Button } from "../../ui/button";
+import { Dialog, DialogContent, DialogFooter, } from "../../ui/dialog";
+export var CropPageClippingModal = function (_a) {
+    var pageClipping = _a.pageClipping, onClose = _a.onClose, onUpdate = _a.onUpdate;
+    var _b = useState(), crop = _b[0], setCrop = _b[1];
+    var url = "https://page-clippings.examplary.ai/?".concat(new URLSearchParams({
+        url: pageClipping === null || pageClipping === void 0 ? void 0 : pageClipping.url,
+        page: pageClipping === null || pageClipping === void 0 ? void 0 : pageClipping.page,
+        x: "0",
+        y: "0",
+        width: "1",
+        height: "1",
+    }).toString());
+    useEffect(function () {
+        if (!pageClipping)
+            return;
+        setCrop({
+            unit: "%",
+            x: pageClipping.x * 100 || 0,
+            y: pageClipping.y * 100 || 0,
+            width: pageClipping.width * 100 || 100,
+            height: pageClipping.height * 100 || 100,
+        });
+    }, [pageClipping]);
+    var save = function () {
+        onUpdate(__assign(__assign({}, pageClipping), { x: ((crop === null || crop === void 0 ? void 0 : crop.x) || 0) / 100, y: ((crop === null || crop === void 0 ? void 0 : crop.y) || 0) / 100, width: ((crop === null || crop === void 0 ? void 0 : crop.width) || 100) / 100, height: ((crop === null || crop === void 0 ? void 0 : crop.height) || 100) / 100 }));
+    };
+    return (_jsx(Dialog, { open: !!pageClipping, onOpenChange: function (open) {
+            if (!open)
+                onClose();
+        }, children: _jsxs(DialogContent, { className: "sm:max-w-[725px]", showClose: false, children: [_jsx("div", { className: "flex items-center justify-center overflow-hidden mb-4", children: pageClipping && (_jsx(ReactCrop, { className: "max-h-[70vh] max-w-full", crop: crop, onChange: function (_, c) { return setCrop(c); }, children: _jsx("img", { src: url }) })) }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "primary", type: "submit", onClick: save, children: _jsx(Trans, { children: "formatting.crop.crop" }) }) })] }) }));
+};

package/dist/components/rich-text/tiptap/mathematics-component.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Editor } from "@tiptap/core";
+import type { Node as PMNode } from "@tiptap/pm/model";
+import "mathlive";
+export declare const MathematicsEditComponent: React.FC<{
+    node: PMNode;
+    editor: Editor;
+}>;
+interface InlineMathProps {
+    children?: string;
+    onEdit: (newLatex: string) => void;
+}
+export declare const InlineMathView: React.FC<InlineMathProps>;
+export {};

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { EditIcon } from "lucide-react";
+import { cn } from "../../../utils";
+import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover";
+import "mathlive";
+export var MathematicsEditComponent = function (_a) {
+    var node = _a.node, editor = _a.editor;
+    return (_jsx(NodeViewWrapper, { as: "span", children: _jsx(InlineMathView, { children: node.attrs.latex, onEdit: function (newLatex) {
+                editor.commands.updateInlineMath({ latex: newLatex });
+            } }, node.attrs.latex) }));
+};
+export var InlineMathView = function (_a) {
+    var children = _a.children, onEdit = _a.onEdit;
+    var _b = useState(false), menuOpen = _b[0], setMenuOpen = _b[1];
+    var _c = useState(children || ""), value = _c[0], setValue = _c[1];
+    return (_jsxs(Popover, { open: menuOpen, onOpenChange: function (open) {
+            var _a;
+            setMenuOpen(open);
+            if (!open && value !== children) {
+                onEdit === null || onEdit === void 0 ? void 0 : onEdit(value);
+                var keyboard = document.querySelector(".ML__keyboard");
+                if (keyboard)
+                    (_a = keyboard.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(keyboard);
+            }
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("span", { className: cn("rounded-2xl bg-pink-50 min-h-6 px-1.5 py-0.25 inline-flex gap-2.5 items-center cursor-pointer hover:bg-pink-200 group transition-all", menuOpen && "bg-pink-200"), children: [_jsx("inline-math", { children: children }), _jsx(EditIcon, { className: cn("text-pink-500 size-3 hidden group-hover:block shrink-0", menuOpen && "block") })] }) }), _jsx(PopoverContent, { align: "center", side: "bottom", sideOffset: -30, collisionPadding: 12, className: "border border-black p-0 bg-white rounded-md shadow-md max-w-none", onPointerDownOutside: function (event) {
+                    var mathKeyboard = document.querySelector(".ML__keyboard");
+                    if (mathKeyboard === null || mathKeyboard === void 0 ? void 0 : mathKeyboard.contains(event.target)) {
+                        // Prevent closing when clicking on the math keyboard
+                        event.preventDefault();
+                    }
+                    var mathField = document.querySelector("math-field");
+                    if (mathField === null || mathField === void 0 ? void 0 : mathField.contains(event.target)) {
+                        // Prevent closing when clicking on the math field
+                        event.preventDefault();
+                    }
+                }, children: _jsx("math-field", { className: "min-w-64 max-w-128 p-2 rounded-lg outline-none border-0 focus:ring-0", onInput: function (event) {
+                        setValue(event.target.value);
+                        var inputType = event.nativeEvent.inputType;
+                        if (inputType === "insertLineBreak") {
+                            // Close popover on Enter
+                            setMenuOpen(false);
+                            if (value !== children) {
+                                onEdit === null || onEdit === void 0 ? void 0 : onEdit(value);
+                            }
+                        }
+                    }, ref: function (el) {
+                        if (!el)
+                            return;
+                        el.menuItems = el.menuItems.filter(function (item) {
+                            return !item.id ||
+                                (item.id !== "insert-matrix" &&
+                                    item.id !== "mode" &&
+                                    item.id !== "color" &&
+                                    item.id !== "background-color");
+                        });
+                    }, children: value }) })] }));
+};

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

@@ -0,0 +1,41 @@
+import { Node } from "@tiptap/core";
+/**
+ * InlineMath is a Tiptap extension for rendering inline mathematical expressions using KaTeX.
+ * It allows users to insert LaTeX formatted math expressions inline within text.
+ * It supports rendering, input rules for LaTeX syntax, and click handling for interaction.
+ *
+ * Original:
+ * https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-mathematics/src/extensions/InlineMath.ts
+ */
+export declare const Mathematics: Node<any, any>;
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        inlineMath: {
+            /**
+             * Insert a inline math node with LaTeX string.
+             * @param options - Options for inserting inline math.
+             * @returns ReturnType
+             */
+            insertInlineMath: (options: {
+                latex: string;
+                pos?: number;
+            }) => ReturnType;
+            /**
+             * Delete an inline math node.
+             * @returns ReturnType
+             */
+            deleteInlineMath: (options?: {
+                pos?: number;
+            }) => ReturnType;
+            /**
+             * Update inline math node with optional LaTeX string.
+             * @param options - Options for updating inline math.
+             * @returns ReturnType
+             */
+            updateInlineMath: (options?: {
+                latex?: string;
+                pos?: number;
+            }) => ReturnType;
+        };
+    }
+}

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

@@ -0,0 +1,131 @@
+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 { InputRule, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { MathematicsEditComponent } from "./mathematics-component";
+/**
+ * InlineMath is a Tiptap extension for rendering inline mathematical expressions using KaTeX.
+ * It allows users to insert LaTeX formatted math expressions inline within text.
+ * It supports rendering, input rules for LaTeX syntax, and click handling for interaction.
+ *
+ * Original:
+ * https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-mathematics/src/extensions/InlineMath.ts
+ */
+export var Mathematics = Node.create({
+    name: "inlineMath",
+    group: "inline",
+    inline: true,
+    atom: true,
+    addAttributes: function () {
+        return {
+            latex: {
+                default: "",
+                parseHTML: function (element) { return element.textContent; },
+                renderHTML: function () {
+                    return {};
+                },
+            },
+        };
+    },
+    addCommands: function () {
+        var _this = this;
+        return {
+            deleteInlineMath: function (options) {
+                return function (_a) {
+                    var _b;
+                    var editor = _a.editor, tr = _a.tr;
+                    var pos = (_b = options === null || options === void 0 ? void 0 : options.pos) !== null && _b !== void 0 ? _b : editor.state.selection.$from.pos;
+                    var node = editor.state.doc.nodeAt(pos);
+                    if (!node || node.type.name !== _this.name) {
+                        return false;
+                    }
+                    tr.delete(pos, pos + node.nodeSize);
+                    return true;
+                };
+            },
+            insertInlineMath: function (options) {
+                return function (_a) {
+                    var _b, _c, _d;
+                    var editor = _a.editor, tr = _a.tr;
+                    // Insert latex if specified
+                    if (options === null || options === void 0 ? void 0 : options.latex) {
+                        var from_1 = (_b = options === null || options === void 0 ? void 0 : options.pos) !== null && _b !== void 0 ? _b : editor.state.selection.from;
+                        tr.replaceWith(from_1, from_1, _this.type.create({ latex: options.latex }));
+                        return true;
+                    }
+                    // If there is a selection that isn't empty, replace it with the inline math
+                    var _e = editor.state.selection, from = _e.from, to = _e.to;
+                    if (from !== to) {
+                        var selectedText = editor.state.doc.textBetween(from, to);
+                        tr.replaceWith(from, to, _this.type.create({ latex: selectedText.trim() || "2x + 2" }));
+                        return true;
+                    }
+                    // Otherwise, insert at the current position
+                    var pos = (_c = options === null || options === void 0 ? void 0 : options.pos) !== null && _c !== void 0 ? _c : editor.state.selection.to;
+                    tr.replaceWith(pos, pos, _this.type.create({ latex: ((_d = options.latex) === null || _d === void 0 ? void 0 : _d.trim()) || "2x + 2" }));
+                    return true;
+                };
+            },
+            updateInlineMath: function (options) {
+                return function (_a) {
+                    var editor = _a.editor, tr = _a.tr;
+                    var latex = options === null || options === void 0 ? void 0 : options.latex;
+                    var pos = options === null || options === void 0 ? void 0 : options.pos;
+                    if (pos === undefined) {
+                        pos = editor.state.selection.$from.pos;
+                    }
+                    var node = editor.state.doc.nodeAt(pos);
+                    if (!node || node.type.name !== _this.name) {
+                        return false;
+                    }
+                    if ((latex === null || latex === void 0 ? void 0 : latex.trim()) === "") {
+                        // Delete node if new latex is empty
+                        tr.delete(pos, pos + node.nodeSize);
+                        return true;
+                    }
+                    tr.setNodeMarkup(pos, _this.type, __assign(__assign({}, node.attrs), { latex: latex }));
+                    return true;
+                };
+            },
+        };
+    },
+    parseHTML: function () {
+        return [
+            {
+                tag: "inline-math",
+            },
+        ];
+    },
+    renderHTML: function (_a) {
+        var node = _a.node, HTMLAttributes = _a.HTMLAttributes;
+        return ["inline-math", HTMLAttributes, node.attrs.latex || ""];
+    },
+    addInputRules: function () {
+        var _this = this;
+        return [
+            new InputRule({
+                find: /(^|[^$])(\$\$([^$\n]+?)\$\$)(?!\$)/,
+                handler: function (_a) {
+                    var state = _a.state, range = _a.range, match = _a.match;
+                    var latex = match[3];
+                    var tr = state.tr;
+                    var start = range.from;
+                    var end = range.to;
+                    tr.replaceWith(start, end, _this.type.create({ latex: latex }));
+                },
+            }),
+        ];
+    },
+    addNodeView: function () {
+        return ReactNodeViewRenderer(MathematicsEditComponent);
+    },
+});

package/dist/components/rich-text/tiptap/rich-text-formatting-menu.d.ts

@@ -1,3 +1,4 @@
+import { Editor } from "@tiptap/core";
 export declare const RichTextFormattingMenu: ({ editor }: {
-    editor: any;
+    editor: Editor;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Trans } from "react-i18next";
+import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { Bold, Highlighter, Italic, LinkIcon, List, TextQuote, } from "lucide-react";
+import { BoldIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, SquareFunctionIcon, TextQuoteIcon, } from "lucide-react";
+import { CropPageClippingModal } from "./crop-page-clipping-modal";
 import { cn } from "../../../utils";
 export var RichTextFormattingMenu = function (_a) {
     var editor = _a.editor;
+    var _b = useState(null), pageClipping = _b[0], setPageClipping = _b[1];
     var setLink = useCallback(function () {
         if (editor.isActive("link")) {
             editor.chain().focus().extendMarkRange("link").unsetLink().run();
@@ -27,8 +31,34 @@ export var RichTextFormattingMenu = function (_a) {
         // update link
         editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     }, [editor]);
+    var state = useEditorState({
+        editor: editor,
+        selector: function (ctx) { return ({
+            isBold: ctx.editor.isActive("bold"),
+            isItalic: ctx.editor.isActive("italic"),
+            isStrikethrough: ctx.editor.isActive("strike"),
+            isHighlight: ctx.editor.isActive("highlight"),
+            isLink: ctx.editor.isActive("link"),
+            isBulletList: ctx.editor.isActive("bulletList"),
+            isOrderedList: ctx.editor.isActive("orderedList"),
+            isBlockquote: ctx.editor.isActive("blockquote"),
+            isInlineMath: ctx.editor.isActive("inlineMath"),
+            isPageClipping: ctx.editor.isActive("page-clipping"),
+        }); },
+    });
     if (!editor) {
         return null;
     }
-    return (_jsx(BubbleMenu, { editor: editor, children: _jsxs("div", { className: "border-2 p-0.5 gap-0.5 bg-white rounded-md flex items-center shadow-md", children: [_jsx("span", { onClick: function () { return editor.chain().focus().toggleBold().run(); }, className: cn("p-1 cursor-pointer", editor.isActive("bold") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(Bold, { size: 16, strokeWidth: editor.isActive("bold") ? 2.75 : 2 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleItalic().run(); }, className: cn("p-1 cursor-pointer", editor.isActive("italic") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(Italic, { size: 16, strokeWidth: editor.isActive("italic") ? 2.75 : 2 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleHighlight().run(); }, className: cn("p-1 cursor-pointer", editor.isActive("highlight") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(Highlighter, { size: 16, strokeWidth: editor.isActive("highlight") ? 2.75 : 2 }) }), _jsx("span", { onClick: setLink, className: cn("p-1 cursor-pointer", editor.isActive("link") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(LinkIcon, { size: 16, strokeWidth: editor.isActive("link") ? 2.75 : 2 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleBulletList().run(); }, className: cn("p-1 cursor-pointer", editor.isActive("bulletList") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(List, { size: 16, strokeWidth: editor.isActive("bulletList") ? 2.75 : 2 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleOrderedList().run(); }, className: cn("p-1 cursor-pointer", editor.isActive("orderedList") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(List, { size: 16, strokeWidth: editor.isActive("orderedList") ? 2.75 : 2 }) }), _jsx("span", { onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, className: cn("p-1 cursor-pointer", editor.isActive("blockquote") ? "bg-zinc-200 rounded-base" : ""), children: _jsx(TextQuote, { size: 16, strokeWidth: editor.isActive("blockquote") ? 2.75 : 2 }) })] }) }));
+    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 }) })] })) }) })] }));
 };

package/dist/components/ui/checkbox.js

@@ -23,11 +23,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { cn } from "../../utils";
 var Checkbox = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ ref: ref, className: cn("peer size-4.5 shrink-0 outline-none rounded-xs border-2 border-border-accent ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/10 disabled:cursor-not-allowed disabled:text-zinc-400 data-[state=checked]:bg-current data-[state=checked]:border-current", className, "outline") }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(Check, { className: "w-full h-full text-white", strokeWidth: 2.6 }) }) })));
+    return (_jsx(CheckboxPrimitive.Root, __assign({ ref: ref, className: cn("peer size-4.5 shrink-0 outline-none rounded-xs border-2 border-border-accent ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/10 disabled:cursor-not-allowed disabled:text-zinc-400 data-[state=checked]:bg-current data-[state=checked]:border-current", className, "outline") }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "w-full h-full text-white", strokeWidth: 2.6 }) }) })));
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/dist/components/ui/dialog.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import { Button } from "./button";
 import { cn } from "../../utils";
 var Dialog = DialogPrimitive.Root;
@@ -32,7 +32,7 @@ var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
 var DialogCloseIcon = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsxs(Button, __assign({ variant: "roundedSecondary", size: "icon-sm", className: cn("absolute right-4 lg:right-7 top-4 lg:top-7 bg-white", className), ref: ref }, props, { children: [_jsx(X, { strokeWidth: 2.5 }), _jsx("span", { className: "sr-only", children: "Close" })] })) }));
+    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsxs(Button, __assign({ variant: "roundedSecondary", size: "icon-sm", className: cn("absolute right-4 lg:right-7 top-4 lg:top-7 bg-white", className), ref: ref }, props, { children: [_jsx(XIcon, { strokeWidth: 2.5 }), _jsx("span", { className: "sr-only", children: "Close" })] })) }));
 });
 DialogCloseIcon.displayName = "DialogCloseIcon";
 var DialogOverlay = React.forwardRef(function (_a, ref) {
@@ -42,7 +42,7 @@ var DialogOverlay = React.forwardRef(function (_a, ref) {
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, _b = _a.showClose, showClose = _b === void 0 ? true : _b, props = __rest(_a, ["className", "children", "showClose"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("group/dialog fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]", "border border-border-accent bg-bg rounded-xl p-6 lg:p-8", "has-[.dialog-section]:bg-transparent has-[.dialog-section]:border-0 has-[.dialog-section]:px-1 has-[.dialog-section]:py-10 has-[.dialog-section]:rounded-none has-[.dialog-section]:overflow-auto has-[.dialog-section]:max-h-none has-[.dialog-section]:h-screen has-[.dialog-section]:justify-center", className), onCloseAutoFocus: function (event) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("group/dialog fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]", "border border-border-accent bg-bg rounded-xl p-6 lg:p-8", "has-[.dialog-section]:bg-transparent has-[.dialog-section]:border-0 has-[.dialog-section]:px-1 has-[.dialog-section]:py-10 has-[.dialog-section]:outline-none has-[.dialog-section]:rounded-none has-[.dialog-section]:overflow-auto has-[.dialog-section]:max-h-none has-[.dialog-section]:h-screen has-[.dialog-section]:justify-center", className), onCloseAutoFocus: function (event) {
                     event.preventDefault();
                     document.body.style.pointerEvents = "";
                 } }, props, { children: [children, showClose && _jsx(DialogCloseIcon, {})] }))] }));

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

@@ -20,6 +20,7 @@ declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMe
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const replaceShortCut: (text: any) => any;
 declare const DropdownMenuShortcut: {
     ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/ui/dropdown.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { cn } from "../../utils";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -33,7 +33,7 @@ var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSubTrigger = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center rounded-base bg-white px-2 py-1.5 text-sm font-base outline-none gap-2 [&_svg]:pointer-events-none [&_svg]:w-4 [&_svg]:h-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center rounded-base bg-white px-2 py-1.5 text-sm font-base outline-none gap-2 [&_svg]:pointer-events-none [&_svg]:w-4 [&_svg]:h-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
@@ -55,13 +55,13 @@ var DropdownMenuItem = React.forwardRef(function (_a, ref) {
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 var DropdownMenuCheckboxItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, checked = _a.checked, props = __rest(_a, ["className", "children", "checked"]);
-    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, __assign({ ref: ref, className: cn("relative flex cursor-pointer select-none items-center rounded-base py-1.5 pl-8 pr-2 text-sm font-base text-text outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, __assign({ ref: ref, className: cn("relative flex cursor-pointer select-none items-center rounded-base py-1.5 pl-8 pr-2 text-sm font-base text-text outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] })));
 });
 DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
 var DropdownMenuRadioItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, __assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-base outline-none transition-colors focus:bg-white focus:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, __assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-base outline-none transition-colors focus:bg-white focus:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) }) }), children] })));
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 var DropdownMenuLabel = React.forwardRef(function (_a, ref) {
@@ -74,10 +74,17 @@ var DropdownMenuSeparator = React.forwardRef(function (_a, ref) {
     return (_jsx(DropdownMenuPrimitive.Separator, __assign({ ref: ref, className: cn("-mx-1 my-1 h-[1px] bg-border-accent", className) }, props)));
 });
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+export var replaceShortCut = function (text) {
+    if (!text || typeof text !== "string")
+        return text;
+    if (navigator.userAgent.includes("Windows")) {
+        return text.replace("⌘", "Ctrl-");
+    }
+    return text;
+};
 var DropdownMenuShortcut = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    // TODO: replace ⌘ with Ctrl on Windows
-    return (_jsx("span", __assign({ className: cn("ml-auto pl-1 text-xs font-medium text-zinc-400 tracking-widest opacity-100", className) }, props)));
+    return (_jsx("span", __assign({ className: cn("ml-auto pl-1 text-xs font-medium text-zinc-400 tracking-widest opacity-100", className) }, props, { children: replaceShortCut(props.children) })));
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };