@examplary/ui 1.55.0 → 1.58.0

package/dist/components/question-types/fetch-component.js

@@ -1,45 +1,9 @@
 "use client";
-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 * as _React from "react";
 import * as _ReactDom from "react-dom";
 import * as _jsxRuntime from "react/jsx-runtime";
 import * as ExamplaryUI from "../../index";
-var componentCache = new Map();
+const componentCache = new Map();
 /**
  * Little helper to evaluate the JS code in the context of the module.
  *
@@ -52,84 +16,79 @@ var componentCache = new Map();
  * However, if the code being evaluated here were to be modified by an attacker
  * after review, but before being loaded by users, then this could be a security risk.
  */
-var evalInScope = function (js, contextAsScope) {
-    return new Function("\n    with (this) { \n      ".concat(js, "\n      \n      if (module.exports.default) {\n        module.exports.default._context = this;\n      }\n    }\n  ")).call(contextAsScope);
+const evalInScope = (js, contextAsScope) => {
+    return new Function(`
+    with (this) { 
+      ${js}
+      
+      if (module.exports.default) {
+        module.exports.default._context = this;
+      }
+    }
+  `).call(contextAsScope);
 };
-export var loadComponentStyles = function (url) {
-    if (document.querySelector("link[href=\"".concat(url, "\"]"))) {
+export const loadComponentStyles = (url) => {
+    if (document.querySelector(`link[href="${url}"]`)) {
         return; // Styles already loaded
     }
-    var link = document.createElement("link");
+    const link = document.createElement("link");
     link.rel = "stylesheet";
     link.href = url;
     link.dataset.source = "component-loader";
     document.head.appendChild(link);
 };
-export var evalComponent = function (js) { return __awaiter(void 0, void 0, void 0, function () {
-    var _componentResult;
-    return __generator(this, function (_a) {
-        (function () {
-            var _a;
-            try {
-                var module_1 = { exports: { default: null } };
-                var require_1 = function (name) {
-                    if (name === "react")
-                        // @ts-expect-error default
-                        return _React.default || _React;
-                    if (name === "react-dom")
-                        // @ts-expect-error default
-                        return _ReactDom.default || _ReactDom;
-                    if (name === "react/jsx-runtime")
-                        // @ts-expect-error default
-                        return _jsxRuntime.default || _jsxRuntime;
-                    if (name === "@examplary/ui")
-                        // @ts-expect-error default
-                        return ExamplaryUI.default || ExamplaryUI;
-                    throw new Error("Module not found: ".concat(name));
-                };
-                evalInScope(js, {
-                    module: module_1,
-                    exports: module_1.exports,
+export const evalComponent = async (js) => {
+    let _componentResult;
+    (() => {
+        try {
+            const module = { exports: { default: null } };
+            const require = (name) => {
+                if (name === "react")
                     // @ts-expect-error default
-                    React: _React.default || _React,
-                    require: require_1,
-                    __dirname: "/web/task",
-                    __filename: "dynamic-module.js",
-                });
-                _componentResult = (_a = module_1.exports) === null || _a === void 0 ? void 0 : _a.default;
-                if (!_componentResult) {
-                    throw new Error("No default export found in the module");
-                }
-            }
-            catch (e) {
-                console.error(e);
-                throw new Error("Failed to evaluate component: ".concat(e.message));
+                    return _React.default || _React;
+                if (name === "react-dom")
+                    // @ts-expect-error default
+                    return _ReactDom.default || _ReactDom;
+                if (name === "react/jsx-runtime")
+                    // @ts-expect-error default
+                    return _jsxRuntime.default || _jsxRuntime;
+                if (name === "@examplary/ui")
+                    // @ts-expect-error default
+                    return ExamplaryUI.default || ExamplaryUI;
+                throw new Error(`Module not found: ${name}`);
+            };
+            evalInScope(js, {
+                module,
+                exports: module.exports,
+                // @ts-expect-error default
+                React: _React.default || _React,
+                require,
+                __dirname: "/web/task",
+                __filename: "dynamic-module.js",
+            });
+            _componentResult = module.exports?.default;
+            if (!_componentResult) {
+                throw new Error("No default export found in the module");
             }
-        })();
-        return [2 /*return*/, _componentResult];
-    });
-}); };
-export var fetchComponent = function (url) { return __awaiter(void 0, void 0, void 0, function () {
-    var js, res;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                if (componentCache.has(url)) {
-                    return [2 /*return*/, componentCache.get(url)];
-                }
-                return [4 /*yield*/, fetch(url).then(function (res) {
-                        if (!res.ok) {
-                            throw new Error("Failed to fetch component from ".concat(url, ": ").concat(res.status, " ").concat(res.statusText));
-                        }
-                        return res.text();
-                    })];
-            case 1:
-                js = _a.sent();
-                return [4 /*yield*/, evalComponent(js)];
-            case 2:
-                res = _a.sent();
-                componentCache.set(url, res);
-                return [2 /*return*/, res];
         }
+        catch (e) {
+            console.error(e);
+            throw new Error(`Failed to evaluate component: ${e.message}`);
+        }
+    })();
+    return _componentResult;
+};
+export const fetchComponent = async (url) => {
+    if (componentCache.has(url)) {
+        return componentCache.get(url);
+    }
+    const js = await fetch(url).then((res) => {
+        if (!res.ok) {
+            throw new Error(`Failed to fetch component from ${url}: ${res.status} ${res.statusText}`);
+        }
+        return res.text();
     });
-}); };
+    const res = await evalComponent(js);
+    componentCache.set(url, res);
+    return res;
+};

package/dist/components/question-types/format-question-type.d.ts

@@ -14,63 +14,63 @@ export declare const formatQuestionType: (type: QuestionType, i18n: any) => {
         options: {
             label: any;
             value: string;
-        }[];
+        }[] | undefined;
         id: string;
         type: "string" | "number" | "boolean" | "tags" | "enum" | "custom" | "string-array" | "scoring-criteria" | "question-type";
-        description?: string;
-        index?: number;
-        hidden?: boolean;
+        description?: string | undefined;
+        index?: number | undefined;
+        hidden?: boolean | undefined;
         default?: any;
-        required?: boolean;
-        step?: number;
-        min?: number;
-        max?: number;
-    }[];
+        required?: boolean | undefined;
+        step?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+    }[] | undefined;
     id: string;
-    $schema?: string;
-    icon?: string;
-    shortcut?: string;
+    $schema?: string | undefined;
+    icon?: string | undefined;
+    shortcut?: string | undefined;
     generation?: {
         enabled: boolean;
-        instructions?: string | string[];
-    };
+        instructions?: string | string[] | undefined;
+    } | undefined;
     grading?: {
         enabled: boolean;
-        instructions?: string | string[];
-    };
+        instructions?: string | string[] | undefined;
+    } | undefined;
     scanning?: {
-        instructions?: string | string[];
-    };
-    timeEstimateMinutes?: number;
-    isAi?: boolean;
-    backgroundColor?: string;
-    enforcePosition?: "end" | "start";
-    hideSettings?: boolean;
-    isPreviewRefreshable?: boolean;
-    hasSimpleScoring?: boolean;
+        instructions?: string | string[] | undefined;
+    } | undefined;
+    timeEstimateMinutes?: number | undefined;
+    isAi?: boolean | undefined;
+    backgroundColor?: string | undefined;
+    enforcePosition?: "end" | "start" | undefined;
+    hideSettings?: boolean | undefined;
+    isPreviewRefreshable?: boolean | undefined;
+    hasSimpleScoring?: boolean | undefined;
     components?: {
-        assessment?: string;
-        print?: string;
-        "settings-area"?: string;
-        results?: string;
-    };
-    public?: boolean;
-    translations?: Record<string, string | Record<string, string>>;
+        assessment?: string | undefined;
+        print?: string | undefined;
+        "settings-area"?: string | undefined;
+        results?: string | undefined;
+    } | undefined;
+    public?: boolean | undefined;
+    translations?: Record<string, string | Record<string, string>> | undefined;
     capabilities?: {
         [x: string]: unknown;
-        "answer-scanning"?: boolean;
-    };
+        "answer-scanning"?: boolean | undefined;
+    } | undefined;
     export?: {
         qti3?: {
             interaction: {
                 type: "AssociateInteraction" | "ChoiceInteraction" | "DrawingInteraction" | "EndAttemptInteraction" | "ExtendedTextInteraction" | "GapMatchInteraction" | "GraphicAssociateInteraction" | "GraphicGapMatchInteraction" | "GraphicOrderInteraction" | "HotspotInteraction" | "HottextInteraction" | "InlineChoiceInteraction" | "MatchInteraction" | "MediaInteraction" | "OrderInteraction" | "PortableCustomInteraction" | "PositionObjectInteraction" | "SelectPointInteraction" | "SliderInteraction" | "TextEntryInteraction" | "UploadInteraction";
-                options?: Record<string, string | number | boolean | any[] | Record<string, never>>;
+                options?: Record<string, string | number | boolean | any[] | Record<string, never>> | undefined;
             };
-        };
-    };
-    metadata?: Record<string, string | number | boolean>;
-    stylesheet?: string;
-    index?: number;
-    isDefault?: boolean;
+        } | undefined;
+    } | undefined;
+    metadata?: Record<string, string | number | boolean | null> | undefined;
+    stylesheet?: string | undefined;
+    index?: number | undefined;
+    isDefault?: boolean | undefined;
 };
 export type FormattedQuestionType = ReturnType<typeof formatQuestionType>;

package/dist/components/question-types/format-question-type.js

@@ -1,22 +1,10 @@
-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);
-};
-export var formatQuestionType = function (type, i18n) {
-    var _a, _b;
-    var locale = i18n.language;
-    var translationNs = "question_type_".concat(type.id);
-    var scopedT = i18n.getFixedT(locale, translationNs);
+export const formatQuestionType = (type, i18n) => {
+    const locale = i18n.language;
+    const translationNs = `question_type_${type.id}`;
+    const scopedT = i18n.getFixedT(locale, translationNs);
     // Load the translations for the question type
-    var resources = {};
-    var extractTranslations = function (key, obj) {
+    const resources = {};
+    const extractTranslations = (key, obj) => {
         if (!obj)
             return;
         if (typeof obj === "string") {
@@ -25,8 +13,7 @@ export var formatQuestionType = function (type, i18n) {
             resources[locale][key] = obj;
         }
         else if (typeof obj === "object") {
-            Object.entries(obj).forEach(function (_a) {
-                var lang = _a[0], value = _a[1];
+            Object.entries(obj).forEach(([lang, value]) => {
                 if (!resources[lang])
                     resources[lang] = {};
                 resources[lang][key] = value;
@@ -39,25 +26,37 @@ export var formatQuestionType = function (type, i18n) {
     extractTranslations("titlePlaceholder", type.titlePlaceholder);
     extractTranslations("descriptionPlaceholder", type.descriptionPlaceholder);
     extractTranslations("untitledPlaceholder", type.untitledPlaceholder);
-    (_a = type.settings) === null || _a === void 0 ? void 0 : _a.forEach(function (setting) {
-        var _a;
-        extractTranslations("settings.".concat(setting.id, ".name"), setting.name);
-        extractTranslations("settings.".concat(setting.id, ".helpText"), setting.helpText);
-        extractTranslations("settings.".concat(setting.id, ".placeholder"), setting.placeholder);
-        (_a = setting.options) === null || _a === void 0 ? void 0 : _a.forEach(function (option) {
-            extractTranslations("settings.".concat(setting.id, ".options.").concat(option.value), option.label);
+    type.settings?.forEach((setting) => {
+        extractTranslations(`settings.${setting.id}.name`, setting.name);
+        extractTranslations(`settings.${setting.id}.helpText`, setting.helpText);
+        extractTranslations(`settings.${setting.id}.placeholder`, setting.placeholder);
+        setting.options?.forEach((option) => {
+            extractTranslations(`settings.${setting.id}.options.${option.value}`, option.label);
         });
     });
-    Object.entries((type === null || type === void 0 ? void 0 : type.translations) || {}).forEach(function (_a) {
-        var key = _a[0], value = _a[1];
-        return extractTranslations(key, value);
-    });
-    for (var lang in resources) {
+    Object.entries(type?.translations || {}).forEach(([key, value]) => extractTranslations(key, value));
+    for (const lang in resources) {
         i18n.addResources(lang, translationNs, resources[lang]);
     }
-    return __assign(__assign({}, type), { translationNs: translationNs, name: type.name && scopedT("name"), description: type.description && scopedT("description"), enforceTitle: type.enforceTitle && scopedT("enforceTitle"), titlePlaceholder: type.titlePlaceholder && scopedT("titlePlaceholder"), descriptionPlaceholder: type.descriptionPlaceholder && scopedT("descriptionPlaceholder"), untitledPlaceholder: type.untitledPlaceholder && scopedT("untitledPlaceholder"), settings: (_b = type.settings) === null || _b === void 0 ? void 0 : _b.map(function (setting) {
-            var _a;
-            return (__assign(__assign({}, setting), { name: setting.name && scopedT("settings.".concat(setting.id, ".name")), helpText: setting.helpText && scopedT("settings.".concat(setting.id, ".helpText")), placeholder: setting.placeholder && scopedT("settings.".concat(setting.id, ".placeholder")), options: (_a = setting.options) === null || _a === void 0 ? void 0 : _a.map(function (option) { return (__assign(__assign({}, option), { label: option.label &&
-                        scopedT("settings.".concat(setting.id, ".options.").concat(option.value)) })); }) }));
-        }) });
+    return {
+        ...type,
+        translationNs,
+        name: type.name && scopedT("name"),
+        description: type.description && scopedT("description"),
+        enforceTitle: type.enforceTitle && scopedT("enforceTitle"),
+        titlePlaceholder: type.titlePlaceholder && scopedT("titlePlaceholder"),
+        descriptionPlaceholder: type.descriptionPlaceholder && scopedT("descriptionPlaceholder"),
+        untitledPlaceholder: type.untitledPlaceholder && scopedT("untitledPlaceholder"),
+        settings: type.settings?.map((setting) => ({
+            ...setting,
+            name: setting.name && scopedT(`settings.${setting.id}.name`),
+            helpText: setting.helpText && scopedT(`settings.${setting.id}.helpText`),
+            placeholder: setting.placeholder && scopedT(`settings.${setting.id}.placeholder`),
+            options: setting.options?.map((option) => ({
+                ...option,
+                label: option.label &&
+                    scopedT(`settings.${setting.id}.options.${option.value}`),
+            })),
+        })),
+    };
 };

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

@@ -1,7 +1,7 @@
 import { Editor, EditorContentProps } from "@tiptap/react";
+import { CommentAuthor } from "tiptap-inline-comments";
 import { XmlFragment } from "yjs";
-import { CommentAuthor } from "./tiptap/comments/types";
-export declare const getEditorById: (id: string) => Editor;
+export declare const getEditorById: (id: string) => Editor | undefined;
 export type MinimalRichTextFieldProps = {
     className?: string;
     value?: string;

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

@@ -1,35 +1,4 @@
 "use client";
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 { 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";
@@ -37,42 +6,40 @@ import Document from "@tiptap/extension-document";
 import Placeholder from "@tiptap/extension-placeholder";
 import { UndoRedo } from "@tiptap/extensions";
 import { EditorContent, useEditor, } from "@tiptap/react";
+import { InlineComments } from "tiptap-inline-comments";
 import { CollaborationCaret } from "./tiptap/collaboration-caret";
 import { cn } from "../../utils";
 import { registerWebComponents } from "../web-components";
-import { Comment } from "./tiptap/comments/comment";
 import { CommentBubble } from "./tiptap/comments/comment-bubble";
-import { CommentReply } from "./tiptap/comments/comment-reply";
 import { defaultRichTextExtensions } from "./tiptap/extensions";
 import { fileHandler } from "./tiptap/file-handler";
 import Image from "./tiptap/image";
 import { RichTextFormattingMenu } from "./tiptap/rich-text-formatting-menu";
 registerWebComponents();
-var textEditors = new Map();
-export var getEditorById = function (id) {
+const textEditors = new Map();
+export const getEditorById = (id) => {
     return textEditors.get(id);
 };
-var CustomCollaboration = Collaboration.extend({
-    addCommands: function () {
+const CustomCollaboration = Collaboration.extend({
+    addCommands() {
         return {
-            undo: function () { return function () {
+            undo: () => () => {
                 return false;
-            }; },
-            redo: function () { return function () {
+            },
+            redo: () => () => {
                 return false;
-            }; },
+            },
         };
     },
-    addKeyboardShortcuts: function () {
+    addKeyboardShortcuts() {
         return {};
     },
 });
-var isEmpty = function (value) {
-    var _a;
+const isEmpty = (value) => {
     if (!value) {
         return true;
     }
-    if (!((_a = value.trim) === null || _a === void 0 ? void 0 : _a.call(value))) {
+    if (!value.trim?.()) {
         return true;
     }
     if (value.trim() === "<p></p>" || value.trim() === "<p><br></p>") {
@@ -83,63 +50,58 @@ 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, commentAuthor = _a.commentAuthor, _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", "commentAuthor", "uploadFile", "fragment", "awareness", "id"]);
-    var _j = useState(value), content = _j[0], setContent = _j[1];
-    var extensions = useMemo(function () {
-        return __spreadArray(__spreadArray([], defaultRichTextExtensions, true), [
-            singleLine
-                ? Document.extend({
-                    content: "block",
-                })
-                : Document,
-            Image,
-            !fragment && UndoRedo,
-            fragment &&
-                CustomCollaboration.configure({
-                    fragment: fragment,
-                }),
-            awareness && CollaborationCaret.configure({ awareness: awareness }),
-            placeholder && Placeholder.configure({ placeholder: placeholder }),
-            uploadFile && fileHandler(uploadFile),
-            commentAuthor && Comment.configure({ createdBy: commentAuthor }),
-            commentAuthor && CommentReply.configure({ createdBy: commentAuthor }),
-        ], false).filter(Boolean);
-    }, [singleLine, placeholder, uploadFile, fragment, awareness, commentAuthor]);
-    var editor = useEditor({
-        onUpdate: function (_a) {
-            var editor = _a.editor;
+export const MinimalRichTextField = ({ className = "", value = "", defaultValue, placeholder = "", onChange, onBlur, slotBefore, style, singleLine = false, autoFocus = false, showFormattingMenu = false, commentAuthor, uploadFile = undefined, fragment, awareness, id, ...props }) => {
+    const [content, setContent] = useState(value);
+    const extensions = useMemo(() => [
+        ...defaultRichTextExtensions,
+        singleLine
+            ? Document.extend({
+                content: "block",
+            })
+            : Document,
+        Image,
+        !fragment && UndoRedo,
+        fragment &&
+            CustomCollaboration.configure({
+                fragment,
+            }),
+        awareness && CollaborationCaret.configure({ awareness }),
+        placeholder && Placeholder.configure({ placeholder }),
+        uploadFile && fileHandler(uploadFile),
+        commentAuthor && InlineComments.configure({ createdBy: commentAuthor }),
+    ].filter(Boolean), [singleLine, placeholder, uploadFile, fragment, awareness, commentAuthor]);
+    const editor = useEditor({
+        onUpdate: ({ editor }) => {
             if (onChange || !fragment) {
-                var html = editor.getHTML();
+                let html = editor.getHTML();
                 html = isEmpty(html) ? "" : html;
                 setContent(html);
-                onChange === null || onChange === void 0 ? void 0 : onChange(html);
+                onChange?.(html);
             }
         },
-        onBlur: function (_a) {
-            var editor = _a.editor;
+        onBlur: ({ editor }) => {
             if (onBlur) {
-                var html = editor.getHTML();
+                let html = editor.getHTML();
                 html = isEmpty(html) ? "" : html;
                 onBlur(html);
             }
         },
         autofocus: autoFocus,
         content: fragment ? undefined : content,
-        extensions: extensions,
+        extensions,
         editorProps: {
             attributes: {
-                class: cn("max-w-none", className),
+                class: cn(`max-w-none`, className),
                 style: style,
             },
         },
     });
-    useEffect(function () {
+    useEffect(() => {
         if (fragment)
             return;
         if (value !== content && defaultValue === undefined) {
             setContent(value);
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value, {
+            editor?.commands.setContent(value, {
                 emitUpdate: false,
                 parseOptions: {
                     preserveWhitespace: "full",
@@ -147,12 +109,12 @@ export var MinimalRichTextField = function (_a) {
             });
         }
     }, [value, content, editor, fragment]);
-    useEffect(function () {
+    useEffect(() => {
         if (fragment)
             return;
         if (defaultValue !== undefined) {
             setContent(defaultValue);
-            editor === null || editor === void 0 ? void 0 : editor.commands.setContent(defaultValue, {
+            editor?.commands.setContent(defaultValue, {
                 emitUpdate: false,
                 parseOptions: {
                     preserveWhitespace: "full",
@@ -160,15 +122,15 @@ export var MinimalRichTextField = function (_a) {
             });
         }
     }, [defaultValue, fragment]);
-    useEffect(function () {
+    useEffect(() => {
         if (!editor || !id)
             return;
         textEditors.set(id, editor);
-        return function () {
+        return () => {
             if (textEditors.get(id) === editor) {
                 textEditors.delete(id);
             }
         };
     }, [editor, id]);
-    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && (_jsx(RichTextFormattingMenu, { allowComments: !!commentAuthor, editor: editor })), !!commentAuthor && (_jsx(CommentBubble, { editor: editor, commentAuthor: commentAuthor })), _jsx(EditorContent, __assign({ editor: editor }, props))] }));
+    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && (_jsx(RichTextFormattingMenu, { allowComments: !!commentAuthor, editor: editor })), !!commentAuthor && (_jsx(CommentBubble, { editor: editor, commentAuthor: commentAuthor })), _jsx(EditorContent, { editor: editor, ...props })] }));
 };