ssovee-os-web-ui 0.1.99 → 0.1.101

package/README.md

@@ -84,6 +84,47 @@ Use `theme="vs-dark"` for a dark editor. The component also accepts Monaco `lang
 
 The component supports `toolbar`, `plugins`, `fullWidth`, `error`, and `disabled` props for common form usage.
 
+### RichEditor
+
+`RichEditor` is a controlled rich-text editor that returns the edited content as HTML. Set `isDarkTheme` when the surrounding app uses the dark theme:
+
+```tsx
+import { useState } from "react";
+import { RichEditor } from "ssovee-os-web-ui";
+
+export function NoteEditor() {
+  const [content, setContent] = useState("<p>Write a note...</p>");
+
+  return (
+    <RichEditor
+      content={content}
+      onChange={setContent}
+      isDarkTheme
+    />
+  );
+}
+```
+
+### PreviewComponent
+
+`PreviewComponent` previews a file from base64 data supplied by the host application. Pass either raw base64 or a complete data URL along with the original file name. Image files, PDFs, text files, and JSON are supported.
+
+```tsx
+import { PreviewComponent } from "ssovee-os-web-ui";
+
+export function FilePreview({ fileName, base64 }: { fileName: string; base64: string }) {
+  return (
+    <PreviewComponent
+      fileName={fileName}
+      base64={base64}
+      className="h-96"
+    />
+  );
+}
+```
+
+Supported image extensions include `avif`, `bmp`, `gif`, `jpg`, `jpeg`, `png`, `svg`, and `webp`. Supported text extensions include `css`, `csv`, `html`, `js`, `jsx`, `md`, `ts`, `tsx`, `txt`, `xml`, `yaml`, and `yml`.
+
 ## Window components
 
 ### Simple window
@@ -207,6 +248,8 @@ The package exports these components and types for external use:
 - `Input`
 - `TextArea`
 - `CodeEditor`
+- `RichEditor`
+- `PreviewComponent` (also available as `FilePreview`)
 - `Select`
 - `SelectOption`
 - `Checkbox`

package/dist/index.cjs

@@ -354,7 +354,7 @@ var RichEditor = ({ content, onChange, isDarkTheme }) => {
     }
   }, [content, editor]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-1 border-b border-primary pb-2 text-neutral-500 [&_button]:text-neutral-500", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-1 border-b border-primary pb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("bold") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleBold().run(), "aria-label": "Bold text", title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "B" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("italic") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleItalic().run(), "aria-label": "Italic text", title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "I" }) }),
@@ -385,7 +385,7 @@ var RichEditor = ({ content, onChange, isDarkTheme }) => {
       react$1.EditorContent,
       {
         editor,
-        className: `mt-4 min-h-52 rounded-md border border-primary p-3 text-sm leading-6 text-neutral-500 outline-none transition-colors focus-within:border-brand-color [&_.ProseMirror]:min-h-44 [&_.ProseMirror]:rounded-md [&_.ProseMirror]:border [&_.ProseMirror]:border-brand-color [&_.ProseMirror]:outline-none [&_.ProseMirror_p]:my-2 [&_.ProseMirror_h1]:my-3 [&_.ProseMirror_h1]:text-2xl [&_.ProseMirror_h1]:font-bold [&_.ProseMirror_h2]:my-3 [&_.ProseMirror_h2]:text-xl [&_.ProseMirror_h2]:font-bold [&_.ProseMirror_h3]:my-3 [&_.ProseMirror_h3]:text-lg [&_.ProseMirror_h3]:font-bold [&_.ProseMirror_ul]:my-2 [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ol]:my-2 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_blockquote]:my-3 [&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-brand-color [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_pre]:my-3 [&_.ProseMirror_pre]:overflow-x-auto [&_.ProseMirror_pre]:rounded [&_.ProseMirror_pre]:bg-surface-3 [&_.ProseMirror_pre]:p-3 ${editorTheme === "vs-dark" ? "bg-primary" : "bg-secondary"}`
+        className: `mt-4 min-h-52 rounded-md border border-brand-color p-3 text-sm leading-6 text-neutral-500 outline-none transition-colors focus-within:border-brand-color [&_.ProseMirror]:min-h-44 [&_.ProseMirror]:outline-none [&_.ProseMirror_p]:my-2 [&_.ProseMirror_h1]:my-3 [&_.ProseMirror_h1]:text-2xl [&_.ProseMirror_h1]:font-bold [&_.ProseMirror_h2]:my-3 [&_.ProseMirror_h2]:text-xl [&_.ProseMirror_h2]:font-bold [&_.ProseMirror_h3]:my-3 [&_.ProseMirror_h3]:text-lg [&_.ProseMirror_h3]:font-bold [&_.ProseMirror_ul]:my-2 [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ol]:my-2 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_blockquote]:my-3 [&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-brand-color [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_pre]:my-3 [&_.ProseMirror_pre]:overflow-x-auto [&_.ProseMirror_pre]:rounded [&_.ProseMirror_pre]:bg-surface-3 [&_.ProseMirror_pre]:p-3 ${editorTheme === "vs-dark" ? "bg-primary" : "bg-secondary"}`
       }
     )
   ] });
@@ -2318,6 +2318,67 @@ var Tabs = ({
   ] });
 };
 var Tabs_default = Tabs;
+var imageExtensions = /\.(avif|bmp|gif|jpe?g|png|svg|webp)$/i;
+var textExtensions = /\.(css|csv|html?|js|jsx|md|mjs|ts|tsx|txt|xml|yaml|yml)$/i;
+var getPreviewType = (fileName) => {
+  if (/\.pdf$/i.test(fileName)) return "pdf";
+  if (/\.json$/i.test(fileName)) return "json";
+  if (imageExtensions.test(fileName)) return "image";
+  if (textExtensions.test(fileName) || !fileName.includes(".")) return "text";
+  return "unsupported";
+};
+var getMimeType = (fileName) => {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  const mimeTypes = {
+    avif: "image/avif",
+    bmp: "image/bmp",
+    gif: "image/gif",
+    jpeg: "image/jpeg",
+    jpg: "image/jpeg",
+    png: "image/png",
+    svg: "image/svg+xml",
+    webp: "image/webp",
+    pdf: "application/pdf"
+  };
+  return mimeTypes[extension ?? ""] ?? "application/octet-stream";
+};
+var toDataUrl = (base64, fileName) => {
+  if (base64.trim().startsWith("data:")) return base64;
+  return `data:${getMimeType(fileName)};base64,${base64}`;
+};
+var decodeBase64 = (base64) => {
+  const value = base64.includes(",") ? base64.slice(base64.indexOf(",") + 1) : base64;
+  const bytes = Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+};
+var PreviewComponent = ({ fileName, base64, className }) => {
+  const previewType = getPreviewType(fileName);
+  const dataUrl = toDataUrl(base64, fileName);
+  if (previewType === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-full min-h-48 w-full items-center justify-center overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: dataUrl, alt: fileName, className: "max-h-full max-w-full object-contain" }) });
+  }
+  if (previewType === "pdf") {
+    return /* @__PURE__ */ jsxRuntime.jsx("iframe", { title: fileName, src: dataUrl, className: cn("h-full min-h-96 w-full border-0", className) });
+  }
+  if (previewType === "text" || previewType === "json") {
+    let content;
+    try {
+      content = decodeBase64(base64);
+      if (previewType === "json") {
+        content = JSON.stringify(JSON.parse(content), null, 2);
+      }
+    } catch {
+      content = "Unable to preview this file.";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn("h-full min-h-48 w-full overflow-auto whitespace-pre-wrap break-words p-4 text-left", className), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: content }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex min-h-48 items-center justify-center p-4 text-center", className), children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+    "Preview is not available for ",
+    fileName,
+    "."
+  ] }) });
+};
+var PreviewComponent_default = PreviewComponent;
 var DEFAULT_BACKGROUND = "/wallpaper/Wallpaper3.webp";
 var DEFAULT_MOCK_USER = {
   id: "dev-user",
@@ -3520,6 +3581,7 @@ exports.Checkbox = Checkbox_default;
 exports.CodeEditor = CodeEditor_default;
 exports.Divider = Divider_default;
 exports.Dropdown = Dropdown_default;
+exports.FilePreview = PreviewComponent_default;
 exports.FileUpload = FileUpload_default;
 exports.ImageWithPlaceholder = ImageWithPlaceholder_default;
 exports.Input = Input_default;
@@ -3527,6 +3589,7 @@ exports.Loading = Loading_default;
 exports.Modal = Modal_default;
 exports.Pagination = Pagination_default;
 exports.PluginPlayground = PluginPlayground;
+exports.PreviewComponent = PreviewComponent_default;
 exports.Progress = Progress_default;
 exports.Radio = Radio_default;
 exports.RichEditor = RichEditor_default;