ssovee-os-web-ui 0.1.70 → 0.1.72

package/README.md

@@ -55,6 +55,57 @@ export function Example() {
 }
 ```
 
+## Editors
+
+### CodeEditor
+
+`CodeEditor` is a controlled Monaco editor configured for JSON by default:
+
+```tsx
+import { useState } from "react";
+import { CodeEditor } from "ssovee-os-web-ui";
+
+export function SettingsEditor() {
+  const [value, setValue] = useState('{"enabled":true}');
+
+  return (
+    <CodeEditor
+      value={value}
+      onChange={setValue}
+      theme="light"
+      height="320px"
+      options={{ minimap: { enabled: false } }}
+    />
+  );
+}
+```
+
+Use `theme="vs-dark"` for a dark editor. The component also accepts Monaco `language`, `height`, and `options` props.
+
+### RichEditor
+
+`RichEditor` provides WYSIWYG text editing for rich content and HTML output:
+
+```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>");
+
+  return (
+    <RichEditor
+      value={value}
+      onChange={setValue}
+      placeholder="Write something rich..."
+      height={220}
+    />
+  );
+}
+```
+
+`RichEditor` supports formatted text output in HTML, along with placeholder, height, and readOnly support.
+
 ## Window components
 
 ### Simple window
@@ -179,6 +230,8 @@ The package exports these components and types for external use:
 - `Button`
 - `Input`
 - `TextArea`
+- `CodeEditor`
+- `RichEditor`
 - `Select`
 - `SelectOption`
 - `Checkbox`