@fvc/richtext 1.6.8 → 1.6.9-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997

package/README.md

@@ -0,0 +1,172 @@
+# @fvc/richtext
+
+`@fvc/richtext` provides a WYSIWYG rich text editor built on top of `@cyber-wysiwyg/richtexteditor`. It extends the base editor with HTML sanitization, a template dropdown, a custom link modal, and design-system integration for FE-VIS applications. The `variant` prop switches between a full toolbar editor and a compact input appearance.
+
+## Installation
+
+```bash
+bun add @fvc/richtext
+```
+
+## Peer Dependencies
+
+The package expects these dependencies to be available in the consuming application:
+
+```bash
+bun add react antd @fvc/button @fvc/icons @cyber-wysiwyg/richtexteditor
+```
+
+## Import
+
+```tsx
+import { Richtext } from '@fvc/richtext';
+```
+
+## Quick Start
+
+```tsx
+import { Richtext } from '@fvc/richtext';
+import { useState } from 'react';
+
+export function NoteEditor() {
+  const [value, setValue] = useState('');
+
+  return <Richtext value={value} onChange={setValue} />;
+}
+```
+
+## Common Usage
+
+### Basic Editor
+
+```tsx
+<Richtext value={content} onChange={setContent} />
+```
+
+### Input Variant
+
+The `input` variant renders a compact single-line editor suitable for short text fields.
+
+```tsx
+<Richtext variant="input" value={value} onChange={setValue} />
+```
+
+### Error State
+
+```tsx
+<Richtext error value={value} onChange={setValue} />
+```
+
+### Auto Sanitization
+
+HTML from untrusted sources is sanitized automatically when `autoSanitize` is enabled.
+
+```tsx
+<Richtext autoSanitize value={untrustedHtml} onChange={setValue} />
+```
+
+### Template Dropdown
+
+Inject predefined text snippets from a map of label→value pairs.
+
+```tsx
+<Richtext
+  enableTemplateDropdown
+  templateDropdownLabel="Templates"
+  templateMap={{
+    Greeting: 'Dear {{name}},',
+    Signature: 'Kind regards,\n{{sender}}',
+  }}
+  value={value}
+  onChange={setValue}
+/>
+```
+
+### Custom Toolbar
+
+Pass a function to extend the default toolbar settings.
+
+```tsx
+<Richtext
+  toolbarSettings={(defaults) => ({
+    ...defaults,
+    items: [...defaults.items, 'SourceCode'],
+  })}
+  value={value}
+  onChange={setValue}
+/>
+```
+
+## Props
+
+Extends all [`RichTextEditor` props](https://github.com/cyber-wysiwyg/richtexteditor) except `toolbarSettings` (see the custom toolbar example above).
+
+| Prop                     | Type                                                                          | Default    | Description                                                    |
+| ------------------------ | ----------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------- |
+| `variant`                | `'editor' \| 'input'`                                                         | `'editor'` | Switches between full toolbar editor and compact input mode.   |
+| `error`                  | `boolean`                                                                     | —          | Applies error styling to the editor border.                    |
+| `autoSanitize`           | `boolean`                                                                     | —          | Sanitizes HTML via DOMPurify on every value change.            |
+| `enableTemplateDropdown` | `boolean`                                                                     | —          | Shows the template insertion dropdown in the toolbar.          |
+| `templateMap`            | `Record<string, string>`                                                      | —          | Map of display label → template string to inject.             |
+| `templateDropdownLabel`  | `string`                                                                      | —          | Label shown on the template dropdown button.                   |
+| `toolbarSettings`        | `ToolbarSettings \| ((defaults: ToolbarSettings) => ToolbarSettings)`         | —          | Toolbar config or function that receives and mutates defaults. |
+| `className`              | `string`                                                                      | —          | Additional CSS class names on the wrapper element.             |
+| `testId`                 | `string`                                                                      | —          | Maps to `data-testid` on the root element.                     |
+
+## TypeScript
+
+The package ships with type definitions. No `@types/` install needed.
+
+```ts
+import type { RichTextProps, TemplateMap, LinkModalProps } from '@fvc/richtext/types';
+```
+
+## Consumer Example
+
+```tsx
+import { Richtext } from '@fvc/richtext';
+import { useState } from 'react';
+
+export function ArticleEditor({ onSave }) {
+  const [body, setBody] = useState('');
+
+  return (
+    <Richtext
+      autoSanitize
+      enableTemplateDropdown
+      templateDropdownLabel="Insert snippet"
+      templateMap={{
+        Opening: '<p>Dear reader,</p>',
+        Closing: '<p>Thank you for reading.</p>',
+      }}
+      toolbarSettings={(defaults) => ({
+        ...defaults,
+        items: defaults.items.filter((i) => i !== 'SourceCode'),
+      })}
+      value={body}
+      onChange={setBody}
+    />
+  );
+}
+```
+
+## Testing
+
+Use `testId` to target the editor root in tests.
+
+```tsx
+<Richtext testId="article-editor" value={value} onChange={setValue} />
+```
+
+```tsx
+screen.getByTestId('article-editor');
+```
+
+## Development
+
+```bash
+bun run lint
+bun run type-check
+bun run test
+bun run build
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fvc/richtext",
-  "version": "1.6.8",
+  "version": "1.6.9-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/richtext/src/index.d.ts",
   "files": [
@@ -26,13 +26,26 @@
     "type-check": "tsc --noEmit",
     "test": "find src -name '*.test.*' -o -name '*.spec.*' | grep -q . && bun test || echo 'No tests found - skipping'"
   },
+  "keywords": [
+    "react",
+    "react-component",
+    "fvc",
+    "fe-vis-core",
+    "ui",
+    "richtext",
+    "rich-text",
+    "wysiwyg",
+    "editor",
+    "design-system",
+    "antd"
+  ],
   "dependencies": {
     "@cyber-wysiwyg/richtexteditor": "^1.0.15",
     "dompurify": "^3.2.6"
   },
   "peerDependencies": {
-    "@fvc/button": "^1.2.5",
-    "@fvc/icons": "^1.0.0",
+    "@fvc/button": "1.2.6-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
+    "@fvc/icons": "1.1.4-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
     "antd": "^5.0.0",
     "react": "^18.0.0",
     "@cyber-wysiwyg/richtexteditor": "^1.0.15"