@examplary/ui 1.55.0 → 1.58.0

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

@@ -1,199 +1,124 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import toast from "react-hot-toast";
 import FileHandler from "@tiptap/extension-file-handler";
 import { getImageSize } from "./png-scanner";
-export var processFilesAsString = function (uploadFile, files) {
-    return new Promise(function (resolve) {
-        toast.promise(function () { return __awaiter(void 0, void 0, void 0, function () {
-            var items, e_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, Promise.all(Array.from(files).map(function (file) { return __awaiter(void 0, void 0, void 0, function () {
-                                var _a, url, name_1, isImage, attrs, width, _1, e_2;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
-                                        case 0:
-                                            _b.trys.push([0, 6, , 7]);
-                                            return [4 /*yield*/, uploadFile(file)];
-                                        case 1:
-                                            _a = _b.sent(), url = _a.url, name_1 = _a.name;
-                                            console.log({ url: url, name: name_1 });
-                                            isImage = file.type.startsWith("image/");
-                                            attrs = {
-                                                src: url,
-                                                title: name_1,
-                                                type: file.type,
-                                            };
-                                            if (!isImage) return [3 /*break*/, 5];
-                                            _b.label = 2;
-                                        case 2:
-                                            _b.trys.push([2, 4, , 5]);
-                                            return [4 /*yield*/, getImageSize(file)];
-                                        case 3:
-                                            width = (_b.sent()).width;
-                                            if (width)
-                                                attrs.width = width;
-                                            return [3 /*break*/, 5];
-                                        case 4:
-                                            _1 = _b.sent();
-                                            return [3 /*break*/, 5];
-                                        case 5:
-                                            if (isImage) {
-                                                return [2 /*return*/, "<img src=\"".concat(url, "\" title=\"").concat(name_1, "\" width=\"").concat(attrs.width, "\" alt=\"").concat(name_1, "\"/>")];
-                                            }
-                                            else {
-                                                return [2 /*return*/, "<file-attachment title=\"".concat(name_1, "\" type=\"").concat(file.type, "\" href=\"").concat(url, "\">").concat(name_1, "</file-attachment>")];
-                                            }
-                                            return [3 /*break*/, 7];
-                                        case 6:
-                                            e_2 = _b.sent();
-                                            console.log(e_2);
-                                            throw e_2;
-                                        case 7: return [2 /*return*/];
-                                    }
-                                });
-                            }); }))];
-                    case 1:
-                        items = _a.sent();
-                        resolve(items.join(""));
-                        return [3 /*break*/, 3];
-                    case 2:
-                        e_1 = _a.sent();
-                        console.log(e_1);
-                        throw e_1;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); }, {
-            loading: "Uploading file...",
-            success: "Uploaded successfully!",
-            error: "Failed to upload file",
-        });
-    });
-};
-export var processFiles = function (uploadFile, currentEditor, files, pos) {
-    toast.promise(Promise.all(files.map(function (file) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, url, name_2, isImage, attrs, width, _2, content, e_3;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    _b.trys.push([0, 6, , 7]);
-                    return [4 /*yield*/, uploadFile(file)];
-                case 1:
-                    _a = _b.sent(), url = _a.url, name_2 = _a.name;
-                    isImage = file.type.startsWith("image/");
-                    attrs = {
+export const processFilesAsString = (uploadFile, files) => new Promise((resolve) => {
+    toast.promise(async () => {
+        try {
+            const items = await Promise.all(Array.from(files).map(async (file) => {
+                try {
+                    const { url, name } = await uploadFile(file);
+                    console.log({ url, name });
+                    const isImage = file.type.startsWith("image/");
+                    const attrs = {
                         src: url,
-                        title: name_2,
+                        title: name,
                         type: file.type,
                     };
-                    if (!isImage) return [3 /*break*/, 5];
-                    _b.label = 2;
-                case 2:
-                    _b.trys.push([2, 4, , 5]);
-                    return [4 /*yield*/, getImageSize(file)];
-                case 3:
-                    width = (_b.sent()).width;
-                    if (width)
-                        attrs.width = width;
-                    return [3 /*break*/, 5];
-                case 4:
-                    _2 = _b.sent();
-                    return [3 /*break*/, 5];
-                case 5:
-                    content = isImage
-                        ? {
-                            type: "image",
-                            attrs: attrs,
+                    if (isImage) {
+                        try {
+                            const { width } = await getImageSize(file);
+                            if (width)
+                                attrs.width = width;
                         }
-                        : {
-                            type: "file-attachment",
-                            attrs: attrs,
-                            content: [
-                                {
-                                    type: "text",
-                                    href: url,
-                                    text: name_2,
-                                },
-                            ],
-                        };
-                    currentEditor.chain().insertContentAt(pos, content).focus().run();
-                    return [3 /*break*/, 7];
-                case 6:
-                    e_3 = _b.sent();
-                    console.log(e_3);
-                    throw e_3;
-                case 7: return [2 /*return*/];
-            }
-        });
-    }); })), {
+                        catch (_) {
+                            // do nothing
+                        }
+                    }
+                    if (isImage) {
+                        return `<img src="${url}" title="${name}" width="${attrs.width}" alt="${name}"/>`;
+                    }
+                    else {
+                        return `<file-attachment title="${name}" type="${file.type}" href="${url}">${name}</file-attachment>`;
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                    throw e;
+                }
+            }));
+            resolve(items.join(""));
+        }
+        catch (e) {
+            console.log(e);
+            throw e;
+        }
+    }, {
         loading: "Uploading file...",
         success: "Uploaded successfully!",
         error: "Failed to upload file",
     });
-};
-export var fileHandler = function (uploadFile) {
-    return FileHandler.configure({
-        allowedMimeTypes: [
-            "image/png",
-            "image/jpeg",
-            "image/gif",
-            "image/webp",
-            "application/pdf",
-            "text/html",
-            "text/plain",
-            "application/msword",
-            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-        ],
-        onDrop: function (currentEditor, files, pos) {
-            processFiles(uploadFile, currentEditor, files, pos);
-        },
-        onPaste: function (currentEditor, files, htmlContent) {
-            files.forEach(function (file) {
-                if (htmlContent) {
-                    // if there is htmlContent, stop manual insertion & let other extensions handle insertion via inputRule
-                    // you could extract the pasted file from this url string and upload it to a server for example
-                    return false;
+});
+export const processFiles = (uploadFile, currentEditor, files, pos) => {
+    toast.promise(Promise.all(files.map(async (file) => {
+        try {
+            const { url, name } = await uploadFile(file);
+            const isImage = file.type.startsWith("image/");
+            const attrs = {
+                src: url,
+                title: name,
+                type: file.type,
+            };
+            if (isImage) {
+                try {
+                    const { width } = await getImageSize(file);
+                    if (width)
+                        attrs.width = width;
+                }
+                catch (_) {
+                    // do nothing
                 }
-                processFiles(uploadFile, currentEditor, [file], currentEditor.state.selection.anchor);
-            });
-        },
+            }
+            const content = isImage
+                ? {
+                    type: "image",
+                    attrs,
+                }
+                : {
+                    type: "file-attachment",
+                    attrs,
+                    content: [
+                        {
+                            type: "text",
+                            href: url,
+                            text: name,
+                        },
+                    ],
+                };
+            currentEditor.chain().insertContentAt(pos, content).focus().run();
+        }
+        catch (e) {
+            console.log(e);
+            throw e;
+        }
+    })), {
+        loading: "Uploading file...",
+        success: "Uploaded successfully!",
+        error: "Failed to upload file",
     });
 };
+export const fileHandler = (uploadFile) => FileHandler.configure({
+    allowedMimeTypes: [
+        "image/png",
+        "image/jpeg",
+        "image/gif",
+        "image/webp",
+        "application/pdf",
+        "text/html",
+        "text/plain",
+        "application/msword",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    ],
+    onDrop: (currentEditor, files, pos) => {
+        processFiles(uploadFile, currentEditor, files, pos);
+    },
+    onPaste: (currentEditor, files, htmlContent) => {
+        files.forEach((file) => {
+            if (htmlContent) {
+                // if there is htmlContent, stop manual insertion & let other extensions handle insertion via inputRule
+                // you could extract the pasted file from this url string and upload it to a server for example
+                return false;
+            }
+            processFiles(uploadFile, currentEditor, [file], currentEditor.state.selection.anchor);
+        });
+    },
+});

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

@@ -2,28 +2,28 @@ import { mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
 /**
  * Matches an image to a ![image](src "title") on input.
  */
-export var inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
 /**
  * This extension allows you to insert images.
  * @see https://www.tiptap.dev/api/nodes/image
  */
-var Image = Node.create({
+const Image = Node.create({
     name: "image",
-    addOptions: function () {
+    addOptions() {
         return {
             inline: false,
             allowBase64: false,
             HTMLAttributes: {},
         };
     },
-    inline: function () {
+    inline() {
         return this.options.inline;
     },
-    group: function () {
+    group() {
         return this.options.inline ? "inline" : "block";
     },
     draggable: true,
-    addAttributes: function () {
+    addAttributes() {
         return {
             src: {
                 default: null,
@@ -42,7 +42,7 @@ var Image = Node.create({
             },
         };
     },
-    parseHTML: function () {
+    parseHTML() {
         return [
             {
                 tag: this.options.allowBase64
@@ -51,35 +51,30 @@ var Image = Node.create({
             },
         ];
     },
-    renderHTML: function (_a) {
-        var HTMLAttributes = _a.HTMLAttributes;
+    renderHTML({ HTMLAttributes }) {
         return [
             "img",
             mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
         ];
     },
-    addCommands: function () {
-        var _this = this;
+    addCommands() {
         return {
-            setImage: function (options) {
-                return function (_a) {
-                    var commands = _a.commands;
-                    return commands.insertContent({
-                        type: _this.name,
-                        attrs: options,
-                    });
-                };
+            setImage: (options) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
             },
         };
     },
-    addInputRules: function () {
+    addInputRules() {
         return [
             nodeInputRule({
                 find: inputRegex,
                 type: this.type,
-                getAttributes: function (match) {
-                    var alt = match[2], src = match[3], title = match[4];
-                    return { src: src, alt: alt, title: title };
+                getAttributes: (match) => {
+                    const [, , alt, src, title] = match;
+                    return { src, alt, title };
                 },
             }),
         ];

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

@@ -6,63 +6,58 @@ import { convertLatexToMathMl } from "mathlive";
 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;
-    return (_jsx(NodeViewWrapper, { as: "span", children: _jsx(InlineMathView, { children: node.attrs.latex, onEdit: function (newLatex) {
+export const MathematicsEditComponent = ({ node, editor }) => {
+    return (_jsx(NodeViewWrapper, { as: "span", children: _jsx(InlineMathView, { children: node.attrs.latex, onEdit: (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];
-    var html = useMemo(function () {
+export const InlineMathView = ({ children, onEdit, }) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [value, setValue] = useState(children || "");
+    const html = useMemo(() => {
         try {
             return convertLatexToMathMl(value);
         }
-        catch (_a) {
+        catch {
             return value;
         }
     }, [value]);
-    return (_jsxs(Popover, { open: menuOpen, onOpenChange: function (open) {
-            var _a;
+    return (_jsxs(Popover, { open: menuOpen, onOpenChange: (open) => {
             setMenuOpen(open);
             if (!open && value !== children) {
-                onEdit === null || onEdit === void 0 ? void 0 : onEdit(value);
-                var keyboard = document.querySelector(".ML__keyboard");
+                onEdit?.(value);
+                const keyboard = document.querySelector(".ML__keyboard");
                 if (keyboard)
-                    (_a = keyboard.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(keyboard);
+                    keyboard.parentNode?.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("math", { dangerouslySetInnerHTML: { __html: html } }), _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)) {
+        }, 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("math", { dangerouslySetInnerHTML: { __html: html } }), _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: (event) => {
+                    const mathKeyboard = document.querySelector(".ML__keyboard");
+                    if (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)) {
+                    const mathField = document.querySelector("math-field");
+                    if (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) {
+                }, children: _jsx("math-field", { className: "min-w-64 max-w-128 p-2 rounded-lg outline-none border-0 focus:ring-0", onInput: (event) => {
                         setValue(event.target.value);
-                        var inputType = event.nativeEvent.inputType;
+                        const 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);
+                                onEdit?.(value);
                             }
                         }
-                    }, ref: function (el) {
+                    }, ref: (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");
-                        });
+                        el.menuItems = el.menuItems.filter((item) => !item.id ||
+                            (item.id !== "insert-matrix" &&
+                                item.id !== "mode" &&
+                                item.id !== "color" &&
+                                item.id !== "background-color"));
                     }, children: value }) })] }));
 };