@codeauradev/ngx-wind-editor 1.0.1 → 1.0.2

package/README.md

@@ -1,6 +1,6 @@
 # @codeauradev/ngx-wind-editor
 
-WYSIWYG HTML editor for Angular 22. The chrome is Tailwind CSS v4, and it follows a `dark` class on an ancestor for dark mode.
+WYSIWYG HTML editor for Angular 22. The chrome ships in the component stylesheet, using the same stone and teal palette as Tailwind CSS v4. Dark mode follows a `dark` class on the editor or an ancestor.
 
 ```html
 <wind-editor [(html)]="html" placeholder="Write something…" />
@@ -28,15 +28,9 @@ export class Note {
 npm install @codeauradev/ngx-wind-editor
 ```
 
-Peer: `@angular/core` `^22`. Tailwind CSS v4 is optional and styles the toolbar.
+Peer: `@angular/core` `^22`. No extra stylesheet and no Tailwind `@source` entry. Angular adds the component styles when you import `WindEditor`.
 
-```css
-@import "tailwindcss";
-@source "../node_modules/@codeauradev/ngx-wind-editor";
-@custom-variant dark (&:where(.dark, .dark *));
-```
-
-`@source` lets Tailwind see the utility classes in the component. Document typography and the placeholder ship in the component stylesheet, so the page still reads if you skip Tailwind. Put `class="dark"` on an ancestor to switch the document to dark.
+Put `class="dark"` on `<wind-editor>` or an ancestor to switch the toolbar and the document to dark.
 
 ## Toolbar
 
@@ -73,6 +67,30 @@ The editor reads and writes a fixed subset: `p`, `h1`–`h3`, `blockquote`, `ul`
 
 Set the model and the editor replaces its document. Edits write back.
 
+## Signal forms
+
+The editor implements `FormValueControl<string>`. `[formField]` keeps the HTML in sync with the field. `[(html)]` is the same model under its original name.
+
+```ts
+import { Component, signal } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
+import { WindEditor } from '@codeauradev/ngx-wind-editor';
+
+@Component({
+  selector: 'app-note',
+  imports: [FormField, WindEditor],
+  template: `<wind-editor [formField]="noteForm.body" />`,
+})
+export class Note {
+  private readonly model = signal({ body: '<p></p>' });
+  readonly noteForm = form(this.model, (path) => {
+    required(path.body);
+  });
+}
+```
+
+The field can also push `disabled`, `readonly`, `invalid`, `required`, and `errors`. Leaving the editor marks the field touched. `focus()` focuses the document.
+
 ## Readonly
 
 ```html