@examplary/ui 1.0.0 → 1.1.0

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

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

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

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

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

@@ -1,7 +1,6 @@
 import { EditorContentProps } from "@tiptap/react";
 export type MinimalRichTextFieldProps = {
     className?: string;
-    editorClassName?: string;
     value?: string;
     placeholder?: string;
     onChange?: (value: string) => void;
@@ -14,4 +13,4 @@ export type MinimalRichTextFieldProps = {
         name: string;
     }>;
 } & Omit<EditorContentProps, "editor">;
-export declare const MinimalRichTextField: ({ className, editorClassName, value, placeholder, onChange, slotBefore, singleLine, autoFocus, showFormattingMenu, uploadFile, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalRichTextField: ({ className, value, placeholder, onChange, slotBefore, singleLine, autoFocus, showFormattingMenu, uploadFile, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -48,9 +48,25 @@ import Image from "./tiptap/image";
 import PageClipping from "./tiptap/page-clipping";
 import { RichTextFormattingMenu } from "./tiptap/rich-text-formatting-menu";
 registerWebComponents();
+var isEmpty = function (value) {
+    var _a;
+    if (!value) {
+        return true;
+    }
+    if (!((_a = value.trim) === null || _a === void 0 ? void 0 : _a.call(value))) {
+        return true;
+    }
+    if (value.trim() === "<p></p>" || value.trim() === "<p><br></p>") {
+        return true;
+    }
+    if (value.trim() === "<p> </p>" || value.trim() === "<p></p><p></p>") {
+        return true;
+    }
+    return false;
+};
 export var MinimalRichTextField = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.editorClassName, editorClassName = _c === void 0 ? "" : _c, _d = _a.value, value = _d === void 0 ? "" : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "" : _e, onChange = _a.onChange, slotBefore = _a.slotBefore, _f = _a.singleLine, singleLine = _f === void 0 ? false : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, _h = _a.showFormattingMenu, showFormattingMenu = _h === void 0 ? false : _h, _j = _a.uploadFile, uploadFile = _j === void 0 ? undefined : _j, props = __rest(_a, ["className", "editorClassName", "value", "placeholder", "onChange", "slotBefore", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile"]);
-    var _k = useState(value), content = _k[0], setContent = _k[1];
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, onChange = _a.onChange, slotBefore = _a.slotBefore, _e = _a.singleLine, singleLine = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.showFormattingMenu, showFormattingMenu = _g === void 0 ? false : _g, _h = _a.uploadFile, uploadFile = _h === void 0 ? undefined : _h, props = __rest(_a, ["className", "value", "placeholder", "onChange", "slotBefore", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile"]);
+    var _j = useState(value), content = _j[0], setContent = _j[1];
     var extensions = useMemo(function () {
         return __spreadArray(__spreadArray([], (singleLine
             ? [
@@ -80,6 +96,7 @@ export var MinimalRichTextField = function (_a) {
         onUpdate: function (_a) {
             var editor = _a.editor;
             var html = editor.getHTML();
+            html = isEmpty(html) ? "" : html;
             setContent(html);
             onChange === null || onChange === void 0 ? void 0 : onChange(html);
         },
@@ -91,7 +108,7 @@ export var MinimalRichTextField = function (_a) {
         extensions: extensions,
         editorProps: {
             attributes: {
-                class: editorClassName || "",
+                class: cn("max-w-none", className),
             },
         },
     });
@@ -106,5 +123,5 @@ export var MinimalRichTextField = function (_a) {
             });
         }
     }, [value, content, editor]);
-    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && _jsx(RichTextFormattingMenu, { editor: editor }), _jsx("div", { className: cn("max-w-none", className), children: _jsx(EditorContent, __assign({ editor: editor }, props)) })] }));
+    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && _jsx(RichTextFormattingMenu, { editor: editor }), _jsx(EditorContent, __assign({ editor: editor }, props))] }));
 };

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

@@ -0,0 +1,2 @@
+import { MinimalRichTextFieldProps } from "./minimal-rich-text-field";
+export declare const RichTextField: ({ singleLine, className, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/{rich-text-input.js → rich-text-field.js}

@@ -20,12 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { MinimalRichTextField, } from "./minimal-rich-text-field";
 import { cn } from "../../utils";
-export var RichTextInput = function (_a) {
-    var name = _a.name, defaultValue = _a.defaultValue, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["name", "defaultValue", "className", "disabled"]);
-    var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
-    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: name, value: value }), _jsx(MinimalRichTextField, __assign({ className: cn("rounded-base border-2 text-sm font-base bg-white", "ring-offset-white focus-within:outline-none focus-within:ring-2 focus-within:ring-black focus-within:ring-offset-2", disabled && "opacity-50 pointer-events-none", className), editorClassName: "px-3 py-2", value: value, onChange: setValue }, props))] }));
+export var RichTextField = function (_a) {
+    var singleLine = _a.singleLine, className = _a.className, props = __rest(_a, ["singleLine", "className"]);
+    return (_jsx(MinimalRichTextField, __assign({ singleLine: singleLine, className: cn("box p-3 text-sm", !singleLine && "min-h-16", className) }, props)));
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@examplary/ui",
   "description": "UI components for the Examplary testing platform.",
   "packageManager": "yarn@4.5.3",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/index.js",
   "files": [

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

@@ -1,14 +0,0 @@
-import { MinimalRichTextFieldProps } from "./minimal-rich-text-field";
-export type RichTextInputProps = {
-    name: string;
-    defaultValue?: string;
-    className?: string;
-    disabled?: boolean;
-} & MinimalRichTextFieldProps;
-export declare const RichTextInput: ({ name, defaultValue, className, disabled, ...props }: {
-    [x: string]: any;
-    name: any;
-    defaultValue: any;
-    className?: string;
-    disabled?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;