ssovee-os-web-ui 0.1.74 → 0.1.77

package/README.md

@@ -84,27 +84,29 @@ Use `theme="vs-dark"` for a dark editor. The component also accepts Monaco `lang
 
 ### RichEditor
 
-`RichEditor` provides WYSIWYG text editing for rich content and HTML output:
+`RichEditor` is a TinyMCE-based rich text editor for formatted content and HTML editing.
 
 ```tsx
 import { useState } from "react";
 import { RichEditor } from "ssovee-os-web-ui";
 
-export function StoryEditor() {
-  const [value, setValue] = useState("<p><strong>Hello</strong> world</p>");
+export function NotesEditor() {
+  const [value, setValue] = useState("<p>Start writing...</p>");
 
   return (
     <RichEditor
+      label="Message"
       value={value}
       onChange={setValue}
-      placeholder="Write something rich..."
-      height={220}
+      height="260px"
+      placeholder="Write something beautiful..."
+      helperText="Supports basic formatting, links, tables, and media."
     />
   );
 }
 ```
 
-`RichEditor` supports formatted text output in HTML, along with placeholder, height, and readOnly support.
+The component supports `toolbar`, `plugins`, `fullWidth`, `error`, and `disabled` props for common form usage.
 
 ## Window components
 
@@ -230,8 +232,8 @@ The package exports these components and types for external use:
 - `Button`
 - `Input`
 - `TextArea`
-- `CodeEditor`
 - `RichEditor`
+- `CodeEditor`
 - `Select`
 - `SelectOption`
 - `Checkbox`

package/dist/index.cjs

@@ -3,10 +3,11 @@
 var React23 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
+require('tinymce/tinymce');
+require('tinymce/icons/default/icons');
+require('tinymce/themes/silver');
+require('tinymce/models/dom/model');
 var Editor = require('@monaco-editor/react');
-var react$1 = require('@tiptap/react');
-var Placeholder = require('@tiptap/extension-placeholder');
-var StarterKit = require('@tiptap/starter-kit');
 var uaParserJs = require('ua-parser-js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,8 +32,6 @@ function _interopNamespace(e) {
 
 var React23__namespace = /*#__PURE__*/_interopNamespace(React23);
 var Editor__default = /*#__PURE__*/_interopDefault(Editor);
-var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
-var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // src/components/Button.tsx
 
@@ -311,6 +310,144 @@ var TextArea = React23__namespace.default.forwardRef(
 );
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
+var DEFAULT_PLUGINS = [
+  "advlist",
+  "autolink",
+  "lists",
+  "link",
+  "image",
+  "charmap",
+  "preview",
+  "anchor",
+  "searchreplace",
+  "visualblocks",
+  "code",
+  "fullscreen",
+  "insertdatetime",
+  "media",
+  "table",
+  "wordcount"
+];
+var DEFAULT_TOOLBAR = "undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright | bullist numlist outdent indent | link image media | code fullscreen";
+var RichEditor = React23__namespace.default.forwardRef(
+  ({
+    value = "",
+    onChange,
+    label,
+    helperText,
+    error,
+    fullWidth = false,
+    height = "220px",
+    menubar = false,
+    toolbar = DEFAULT_TOOLBAR,
+    className,
+    plugins = DEFAULT_PLUGINS,
+    disabled = false,
+    placeholder,
+    rows,
+    ...props
+  }, ref) => {
+    const editorId = React23.useId().replace(/:/g, "");
+    const textareaRef = React23.useRef(null);
+    const hasTinymce = typeof window !== "undefined" && Boolean(window.tinymce);
+    React23.useEffect(() => {
+      if (typeof window === "undefined" || !textareaRef.current || !window.tinymce) {
+        return;
+      }
+      const tinymceApi = window.tinymce;
+      const existingEditor = tinymceApi.get(editorId);
+      if (existingEditor) {
+        existingEditor.remove();
+      }
+      tinymceApi.init({
+        target: textareaRef.current,
+        selector: void 0,
+        height,
+        menubar,
+        toolbar,
+        plugins,
+        statusbar: false,
+        resize: false,
+        branding: false,
+        promotion: false,
+        placeholder,
+        readonly: disabled,
+        content_style: "body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; }",
+        setup: (editor) => {
+          editor.on("init", () => {
+            editor.setContent(value ?? "");
+          });
+          editor.on("input change keyup", () => {
+            onChange?.(editor.getContent());
+          });
+        }
+      });
+      return () => {
+        const activeEditor = tinymceApi.get(editorId);
+        activeEditor?.remove();
+      };
+    }, [disabled, editorId, height, menubar, onChange, placeholder, plugins, toolbar, value]);
+    React23.useEffect(() => {
+      const tinymceApi = window?.tinymce;
+      const activeEditor = tinymceApi?.get(editorId);
+      if (activeEditor && activeEditor.getContent() !== (value ?? "")) {
+        activeEditor.setContent(value ?? "");
+      }
+    }, [editorId, value]);
+    const fallbackTextArea = /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        id: editorId,
+        value,
+        onChange: (event) => onChange?.(event.currentTarget.value),
+        disabled,
+        placeholder,
+        rows: rows ?? 7,
+        "aria-label": label ?? props["aria-label"] ?? "Rich text editor",
+        className: cn(
+          "w-full min-h-[200px] rounded-[6px] border border-surface-1 bg-primary px-3 py-2 text-base text-neutral-700 transition-all duration-200 focus:border-brand-color focus:outline-none focus:ring-1 focus:ring-brand-color/50 placeholder:text-neutral-400",
+          error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+          disabled && "cursor-not-allowed opacity-60",
+          fullWidth && "w-full"
+        ),
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1", fullWidth && "w-full", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-neutral-500 dark:text-white", htmlFor: editorId, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "overflow-hidden rounded-[6px] border border-surface-1 bg-white transition-all duration-200",
+            fullWidth && "w-full",
+            error && "border-red-500"
+          ),
+          style: { minHeight: height },
+          children: hasTinymce ? /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              id: editorId,
+              defaultValue: value,
+              "aria-label": label ?? props["aria-label"] ?? "Rich text editor",
+              disabled,
+              style: { display: "none" },
+              ...props
+            }
+          ) : fallbackTextArea
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+        error && /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+RichEditor.displayName = "RichEditor";
+var RichEditor_default = RichEditor;
 var CodeEditor = ({
   value,
   onChange,
@@ -333,238 +470,6 @@ var CodeEditor = ({
   ) });
 };
 var CodeEditor_default = CodeEditor;
-var RichEditor = ({
-  value,
-  onChange,
-  placeholder = "Write something...",
-  readOnly = false,
-  className,
-  height = 220
-}) => {
-  const editor = react$1.useEditor({
-    editable: !readOnly,
-    extensions: [
-      StarterKit__default.default,
-      Placeholder__default.default.configure({
-        placeholder
-      })
-    ],
-    content: value,
-    editorProps: {
-      attributes: {
-        class: "rich-editor-prose"
-      }
-    },
-    onUpdate: ({ editor: editor2 }) => {
-      onChange(editor2.getHTML());
-    }
-  });
-  React23.useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    if (value !== editor.getHTML()) {
-      editor.commands.setContent(value, { emitUpdate: false });
-    }
-  }, [editor, value]);
-  const editorHeight = typeof height === "number" ? `${height}px` : height;
-  editor ? [
-    { label: "Bold", action: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive("bold") },
-    { label: "Italic", action: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive("italic") },
-    { label: "Bullet List", action: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive("bulletList") },
-    { label: "Ordered List", action: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive("orderedList") }
-  ] : [];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        .rich-editor-shell {
-          border: 1px solid #d5d7db;
-          border-radius: 18px;
-          overflow: hidden;
-          background: #f3f4f6;
-          box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
-        }
-        .rich-editor-topbar {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 16px 20px 12px;
-        }
-        .rich-editor-tabs {
-          display: inline-flex;
-          align-items: center;
-          gap: 10px;
-          padding: 6px;
-          border-radius: 12px;
-          background: rgba(15, 23, 42, 0.04);
-          border: 1px solid rgba(15, 23, 42, 0.08);
-        }
-        .rich-editor-tab {
-          border: none;
-          background: transparent;
-          color: rgba(15, 23, 42, 0.7);
-          font-size: 14px;
-          padding: 8px 12px;
-          border-radius: 8px;
-          cursor: pointer;
-          font-weight: 500;
-        }
-        .rich-editor-tab.is-active {
-          background: rgba(255,255,255,0.8);
-          color: #111827;
-          box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
-        }
-        .rich-editor-toolbar {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          padding: 10px 14px;
-          border-top: 1px solid rgba(15, 23, 42, 0.08);
-          border-bottom: 1px solid rgba(15, 23, 42, 0.08);
-          background: rgba(255,255,255,0.65);
-        }
-        .rich-editor-toolbar button {
-          border: none;
-          background: transparent;
-          color: #374151;
-          border-radius: 6px;
-          min-width: 26px;
-          height: 26px;
-          font-size: 14px;
-          font-weight: 600;
-          cursor: pointer;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.2s ease;
-        }
-        .rich-editor-toolbar button:hover:not(:disabled) {
-          background: rgba(15, 23, 42, 0.04);
-        }
-        .rich-editor-toolbar button.is-active {
-          background: rgba(59, 130, 246, 0.12);
-          color: #1d4ed8;
-        }
-        .rich-editor-toolbar button:disabled {
-          opacity: 0.4;
-          cursor: not-allowed;
-        }
-        .rich-editor-toolbar .toolbar-spacer {
-          width: 1px;
-          height: 20px;
-          background: rgba(15, 23, 42, 0.12);
-          margin: 0 4px;
-        }
-        .rich-editor-toolbar .toolbar-actions {
-          margin-left: auto;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-        }
-        .rich-editor-prose {
-          min-height: ${editorHeight};
-          padding: 40px 52px 52px;
-          background: rgba(255,255,255,0.78);
-          color: #111827;
-          outline: none;
-          font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        }
-        .rich-editor-prose:focus {
-          outline: none;
-        }
-        .rich-editor-prose h1 {
-          font-size: clamp(2.2rem, 2vw + 1.1rem, 3.2rem);
-          line-height: 1.1;
-          font-weight: 700;
-          margin: 0 0 1.5rem;
-          letter-spacing: -0.05em;
-        }
-        .rich-editor-prose h2 {
-          font-size: 2rem;
-          line-height: 1.2;
-          font-weight: 700;
-          margin: 2rem 0 1rem;
-        }
-        .rich-editor-prose p {
-          margin: 0 0 1rem;
-          font-size: 1.04rem;
-          line-height: 1.7;
-          color: rgba(17, 24, 39, 0.9);
-        }
-        .rich-editor-prose p strong,
-        .rich-editor-prose p b {
-          font-weight: 700;
-        }
-        .rich-editor-prose p em,
-        .rich-editor-prose p i {
-          font-style: italic;
-        }
-        .rich-editor-prose a {
-          color: #4f46e5;
-          text-decoration: underline;
-        }
-        .rich-editor-prose ul,
-        .rich-editor-prose ol {
-          padding-left: 1.5rem;
-          margin: 0 0 1rem;
-        }
-        .rich-editor-prose li {
-          margin-bottom: 0.45rem;
-        }
-        .rich-editor-prose code {
-          display: inline-block;
-          padding: 0.5rem 0.9rem;
-          background: rgba(15, 23, 42, 0.06);
-          border-radius: 12px;
-          border: 1px solid rgba(15, 23, 42, 0.08);
-          color: #111827;
-          font-size: 0.96rem;
-          font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        }
-        .rich-editor-prose blockquote {
-          border-left: 3px solid #d1d5db;
-          padding-left: 0.9rem;
-          color: #4b5563;
-          margin: 1.25rem 0;
-        }
-      ` }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rich-editor-shell", children: [
-      !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rich-editor-topbar", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rich-editor-tabs", "aria-label": "Editor mode selector", children: ["Agent editor", "Docx editor", "Notion-like editor", "Simple editor"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: `rich-editor-tab${tab === "Simple editor" ? " is-active" : ""}`,
-            "aria-label": tab,
-            children: tab
-          },
-          tab
-        )) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rich-editor-toolbar", "aria-label": "Rich editor toolbar", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Undo", title: "Undo", children: "\u21B6" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Redo", title: "Redo", children: "\u21B7" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "toolbar-spacer" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Heading", title: "Heading", children: "H" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Bold", title: "Bold", className: editor?.isActive("bold") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleBold().run(), children: "B" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Italic", title: "Italic", className: editor?.isActive("italic") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleItalic().run(), children: "I" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Strike", title: "Strike", onClick: () => editor?.chain().focus().toggleStrike().run(), children: "S" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Code", title: "Code", onClick: () => editor?.chain().focus().toggleCode().run(), children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: "<" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Link", title: "Link", children: "\u2301" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Bullet list", title: "Bullet list", className: editor?.isActive("bulletList") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleBulletList().run(), children: "\u2022" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Ordered list", title: "Ordered list", className: editor?.isActive("orderedList") ? "is-active" : "", onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: "1." }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "toolbar-spacer" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Align left", title: "Align left", children: "\u2261" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Quote", title: "Quote", onClick: () => editor?.chain().focus().toggleBlockquote().run(), children: "\u275D" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toolbar-actions", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Search", title: "Search", children: "\u2315" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Theme", title: "Theme", children: "\u263C" })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor })
-    ] })
-  ] });
-};
-var RichEditor_default = RichEditor;
 var Select = React23__namespace.default.forwardRef(
   ({
     className,
@@ -3496,8 +3401,8 @@ var useGridClasses = (windowSize, gridRules) => {
   const gridClasses = React23.useMemo(() => {
     const classes = {};
     for (const element in gridRules) {
-      const classRules = gridRules[element];
-      const colSpan = classRules["col-span"][deviceType];
+      const classRules = gridRules[element] ?? {};
+      const colSpan = classRules["col-span"]?.[deviceType] ?? "12";
       classes[element] = `col-span-${deviceType}-${colSpan}`;
     }
     return classes;