laif-ds/dist/agent-docs/components/AppEditor.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # AppEditor
 
 ## Overview
 
 Rich text editor powered by Lexical with optional Markdown sync. Supports configurable toolbars (block format, font format, history), clear action, and character counter.
 
 ---
 
 ## Props
 
 | Prop            | Type                                 | Default   | Description |
 | --------------- | ------------------------------------ | --------- | ----------- |
 | `defaultValue`  | `string`                              | `undefined` | Initial content. Interpreted as Markdown when `onlyMarkdown=true`, plain text otherwise. |
 | `onMarkdownEdit`| `(markdown: string) => void`          | `undefined` | Emits current content as Markdown on change. |
 | `plugins`       | `("clear" | "counter")[]`            | `[]`      | Enable optional plugins: clear buttons, character counter. |
 | `toolbars`      | `("block-format" | "font-format" | "history")[]` | `[]` | Enable toolbar groups. |
 | `placeholder`   | `string`                              | `"Start typing..."` | Placeholder for empty editor. |
 | `onlyMarkdown`  | `boolean`                             | `true`    | Treat `defaultValue` as Markdown and sync editor to Markdown. If `false`, `defaultValue` is plain text. |
 | `className`     | `string`                              | `"overflow-hidden rounded-lg border border-d-border"` | Extra classes for the content editable. |
 
 ---
 
 ## Behavior
 
 - **Markdown sync**: When `onlyMarkdown=true`, initializes from Markdown and emits Markdown on every change.
 - **Toolbars**:
   - `history`: undo/redo toolbar.
   - `block-format`: heading levels, list types, quote.
   - `font-format`: bold/italic/underline/strikethrough.
 - **Plugins**:
   - `clear`: clear actions in the footer.
   - `counter`: UTF-16 character counter in the footer.
 - **Editing**: Autosave via `onMarkdownEdit`. Keyboard navigation and selection per Lexical defaults.
 
 ---
 
 ## Examples
 
 ### Full Toolbar + Plugins
 
 ```tsx
 import * as React from "react";
 import { AppEditor } from "laif-ds";
 
 export function EditorFull() {
   const [markdown, setMarkdown] = React.useState("Hello world");
   return (
     <div className="space-y-4">
       <AppEditor
         defaultValue={markdown}
         onMarkdownEdit={setMarkdown}
         toolbars={["block-format", "font-format", "history"]}
         plugins={["clear", "counter"]}
         className="h-96"
       />
       <div className="text-d-muted-foreground text-sm">
         <span className="font-medium">Current markdown:</span> {markdown || "(empty)"}
       </div>
     </div>
   );
 }
 ```
 
 ### Markdown Default Value
 
 ```tsx
 import * as React from "react";
 import { AppEditor } from "laif-ds";
 
 export function MarkdownDefault() {
   const initial = "**Titolo** con testo in markdown";
   const [md, setMd] = React.useState(initial);
   return (
     <AppEditor
       defaultValue={initial}
       onMarkdownEdit={setMd}
       toolbars={["block-format", "font-format", "history"]}
     />
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Sizing**: Control height via `className` (e.g., `h-96`).
 - **Performance**: Prefer Markdown mode for content pipelines that store Markdown; use `onlyMarkdown=false` for plain text initialization.
 - **Accessibility**: Toolbar buttons and editor area follow Lexical best practices.