ssovee-os-web-ui 0.1.94 → 0.1.95

package/dist/index.cjs

@@ -4,6 +4,8 @@ var React23 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
 var Editor = require('@monaco-editor/react');
+var react$1 = require('@tiptap/react');
+var StarterKit = require('@tiptap/starter-kit');
 var uaParserJs = require('ua-parser-js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,6 +30,7 @@ function _interopNamespace(e) {
 
 var React23__namespace = /*#__PURE__*/_interopNamespace(React23);
 var Editor__default = /*#__PURE__*/_interopDefault(Editor);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // src/components/Button.tsx
 
@@ -333,6 +336,61 @@ var CodeEditor = ({
   ) });
 };
 var CodeEditor_default = CodeEditor;
+var RichEditor = ({ content, onChange, isDarkTheme }) => {
+  const onChangeRef = React23.useRef(onChange);
+  onChangeRef.current = onChange;
+  const editorTheme = isDarkTheme ? "vs-dark" : "light";
+  const editor = react$1.useEditor({
+    extensions: [StarterKit__default.default],
+    content,
+    immediatelyRender: false,
+    onUpdate: ({ editor: updatedEditor }) => {
+      onChangeRef.current(updatedEditor.getHTML());
+    }
+  }, []);
+  React23.useEffect(() => {
+    if (editor && content !== editor.getHTML()) {
+      editor.commands.setContent(content, { emitUpdate: false });
+    }
+  }, [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: "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" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("strike") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleStrike().run(), "aria-label": "Strikethrough text", title: "Strikethrough", children: /* @__PURE__ */ jsxRuntime.jsx("s", { children: "S" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("heading", { level: 1 }) ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(), "aria-label": "Heading 1", title: "Heading 1", children: "H1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("heading", { level: 2 }) ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(), "aria-label": "Heading 2", title: "Heading 2", children: "H2" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("heading", { level: 3 }) ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(), "aria-label": "Heading 3", title: "Heading 3", children: "H3" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("bulletList") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleBulletList().run(), "aria-label": "Bullet list", title: "Bullet list", children: /* @__PURE__ */ jsxRuntime.jsx(react.ListBulletsIcon, { size: 17 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("orderedList") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleOrderedList().run(), "aria-label": "Numbered list", title: "Numbered list", children: /* @__PURE__ */ jsxRuntime.jsx(react.ListNumbersIcon, { size: 17 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("blockquote") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleBlockquote().run(), "aria-label": "Block quote", title: "Block quote", children: /* @__PURE__ */ jsxRuntime.jsx(react.QuotesIcon, { size: 17 }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("code") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleCode().run(), "aria-label": "Inline code", title: "Inline code", children: /* @__PURE__ */ jsxRuntime.jsx(react.CodeIcon, { size: 17 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: editor?.isActive("codeBlock") ? "primary" : "ghost", size: "sm", onClick: () => editor?.chain().focus().toggleCodeBlock().run(), "aria-label": "Code block", title: "Code block", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "</>" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: "ghost", size: "sm", onClick: () => editor?.chain().focus().setHorizontalRule().run(), "aria-label": "Horizontal rule", title: "Horizontal rule", children: /* @__PURE__ */ jsxRuntime.jsx(react.MinusIcon, { size: 17 }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: "ghost", size: "sm", onClick: () => editor?.chain().focus().undo().run(), "aria-label": "Undo", title: "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(react.ArrowCounterClockwiseIcon, { size: 17 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: "ghost", size: "sm", onClick: () => editor?.chain().focus().redo().run(), "aria-label": "Redo", title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(react.ArrowClockwiseIcon, { size: 17 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button_default, { type: "button", variant: "ghost", size: "sm", onClick: () => editor?.chain().focus().clearNodes().unsetAllMarks().run(), "aria-label": "Clear formatting", title: "Clear formatting", children: /* @__PURE__ */ jsxRuntime.jsx(react.EraserIcon, { size: 17 }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      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]: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"}`
+      }
+    )
+  ] });
+};
+var RichEditor_default = RichEditor;
 var Select = React23__namespace.default.forwardRef(
   ({
     className,
@@ -3471,6 +3529,7 @@ exports.Pagination = Pagination_default;
 exports.PluginPlayground = PluginPlayground;
 exports.Progress = Progress_default;
 exports.Radio = Radio_default;
+exports.RichEditor = RichEditor_default;
 exports.SearchInput = SearchInput_default;
 exports.Select = Select_default;
 exports.Skeleton = Skeleton_default;