@codeauradev/ngx-wind-editor 1.0.1 → 1.0.2

package/ngx-wind-editor.css

@@ -1,6 +1,9 @@
-:host {
+wind-editor,
+.wind-editor {
   display: block;
   min-width: 0;
+  color: #1c1917;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
 }
 
 .wind-frame {
@@ -182,3 +185,328 @@
 .dark .wind-doc code {
   background: color-mix(in oklab, white 8%, transparent);
 }
+
+.wind-editor.is-disabled {
+  opacity: 0.7;
+}
+
+.wind-shell {
+  border: 1px solid #e7e5e4;
+  border-radius: 0.75rem;
+  background: #fff;
+  color: #1c1917;
+  box-shadow: 0 1px 2px rgb(28 25 23 / 0.06);
+}
+
+.wind-editor.is-invalid .wind-shell {
+  border-color: #b91c1c;
+}
+
+.wind-toolbar,
+.wind-pop,
+.wind-meta,
+.wind-error,
+.wind-source {
+  border-color: #e7e5e4;
+}
+
+.wind-toolbar {
+  display: flex;
+  gap: 0.125rem;
+  overflow-x: auto;
+  border-bottom: 1px solid #e7e5e4;
+  padding: 0.375rem;
+}
+
+.wind-tool,
+.wind-primary,
+.wind-quiet,
+.wind-field,
+.wind-source-input {
+  font: inherit;
+}
+
+.wind-tool {
+  display: inline-flex;
+  height: 2.25rem;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  padding: 0 0.5rem;
+  color: #57534e;
+  font-size: 0.875rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.wind-tool:hover {
+  background: #f5f5f4;
+}
+
+.wind-tool:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.wind-tool[aria-pressed='true'] {
+  background: #0f766e;
+  color: #fff;
+}
+
+.wind-tool-label {
+  padding: 0 0.125rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.wind-pop,
+.wind-source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid #e7e5e4;
+  padding: 0.5rem 0.75rem;
+}
+
+.wind-source {
+  display: block;
+  border-bottom: 0;
+  border-top: 1px solid #e7e5e4;
+}
+
+.wind-field,
+.wind-source-input {
+  height: 2.25rem;
+  min-width: 0;
+  flex: 1 1 12rem;
+  border: 1px solid #d6d3d1;
+  border-radius: 0.375rem;
+  background: #fff;
+  padding: 0 0.5rem;
+  color: inherit;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.wind-field-short {
+  flex: 0 1 9rem;
+  width: 9rem;
+}
+
+.wind-field:focus,
+.wind-source-input:focus {
+  border-color: #0f766e;
+}
+
+.wind-source-input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 10rem;
+  resize: vertical;
+  padding: 0.5rem;
+  background: #fafaf9;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.wind-primary,
+.wind-quiet {
+  height: 2.25rem;
+  border: 0;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.wind-primary {
+  background: #0f766e;
+  padding: 0 0.75rem;
+  color: #fff;
+  font-weight: 500;
+}
+
+.wind-quiet {
+  background: transparent;
+  padding: 0 0.5rem;
+  color: #57534e;
+}
+
+.wind-source .wind-primary {
+  margin-top: 0.5rem;
+  background: #1c1917;
+}
+
+.wind-surface {
+  position: relative;
+  min-height: 12rem;
+}
+
+.wind-menu {
+  position: fixed;
+  z-index: 30;
+  max-height: 16rem;
+  width: 14rem;
+  overflow: auto;
+  margin: 0;
+  border: 1px solid #e7e5e4;
+  border-radius: 0.5rem;
+  background: #fff;
+  padding: 0.25rem 0;
+  list-style: none;
+  box-shadow: 0 10px 24px rgb(28 25 23 / 0.12);
+}
+
+.wind-option {
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border: 0;
+  background: transparent;
+  padding: 0.375rem 0.75rem;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wind-option:hover,
+.wind-option.is-active {
+  background: #f5f5f4;
+}
+
+.wind-option.is-active {
+  background: #0f766e;
+  color: #fff;
+}
+
+.wind-option-hint {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.wind-meta,
+.wind-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-top: 1px solid #e7e5e4;
+  padding: 0.375rem 0.75rem;
+  color: #78716c;
+  font-size: 0.75rem;
+}
+
+.wind-meta-hint {
+  color: #a8a29e;
+}
+
+.wind-error {
+  color: #b91c1c;
+}
+
+.wind-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dark .wind-shell,
+.dark.wind-editor .wind-shell {
+  border-color: #292524;
+  background: #0c0a09;
+  color: #f5f5f4;
+}
+
+.dark .wind-editor.is-invalid .wind-shell,
+.dark.wind-editor.is-invalid .wind-shell {
+  border-color: #f87171;
+}
+
+.dark .wind-toolbar,
+.dark .wind-pop,
+.dark .wind-meta,
+.dark .wind-source,
+.dark.wind-editor .wind-toolbar,
+.dark.wind-editor .wind-pop,
+.dark.wind-editor .wind-meta,
+.dark.wind-editor .wind-source {
+  border-color: #292524;
+}
+
+.dark .wind-tool,
+.dark .wind-quiet,
+.dark.wind-editor .wind-tool,
+.dark.wind-editor .wind-quiet {
+  color: #d6d3d1;
+}
+
+.dark .wind-tool:hover,
+.dark.wind-editor .wind-tool:hover {
+  background: #1c1917;
+}
+
+.dark .wind-tool[aria-pressed='true'],
+.dark.wind-editor .wind-tool[aria-pressed='true'] {
+  background: #0d9488;
+  color: #fff;
+}
+
+.dark .wind-field,
+.dark .wind-source-input,
+.dark.wind-editor .wind-field,
+.dark.wind-editor .wind-source-input {
+  border-color: #44403c;
+  background: #1c1917;
+  color: #f5f5f4;
+}
+
+.dark .wind-source .wind-primary,
+.dark.wind-editor .wind-source .wind-primary {
+  background: #f5f5f4;
+  color: #1c1917;
+}
+
+.dark .wind-menu,
+.dark.wind-editor .wind-menu {
+  border-color: #44403c;
+  background: #1c1917;
+}
+
+.dark .wind-option:hover,
+.dark.wind-editor .wind-option:hover {
+  background: #292524;
+}
+
+.dark .wind-option.is-active,
+.dark.wind-editor .wind-option.is-active {
+  background: #0f766e;
+  color: #fff;
+}
+
+.dark .wind-meta,
+.dark.wind-editor .wind-meta {
+  color: #a8a29e;
+}
+
+.dark .wind-error,
+.dark.wind-editor .wind-error {
+  border-color: #7f1d1d;
+  color: #fca5a5;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeauradev/ngx-wind-editor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "WYSIWYG HTML editor for Angular 22, styled with Tailwind CSS v4.",
   "keywords": [
     "angular",
@@ -34,6 +34,7 @@
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {

package/types/codeauradev-ngx-wind-editor.d.ts

@@ -1,4 +1,5 @@
 import * as Y from "yjs";
+import { FormValueControl, ValidationError } from "@angular/forms/signals";
 import * as i0 from "@angular/core";
 declare const BLOCK_TYPES: readonly ["paragraph", "heading", "blockquote", "code", "bullet", "ordered", "rule", "image"];
 type BlockType = (typeof BLOCK_TYPES)[number];
@@ -179,7 +180,7 @@ type WindCommand = {
 };
 interface WindMount {
   destroy(): void;
-  focus(): void;
+  focus(options?: FocusOptions): void;
   exec(command: WindCommand): void;
   setReadonly(readonly: boolean): void;
   setPlaceholder(value: string): void;
@@ -202,10 +203,19 @@ interface Tool {
   label: string;
   icon: string;
 }
-export declare class WindEditor {
+export declare class WindEditor implements FormValueControl<string> {
+  /** Signal forms bind this model. `[formField]` requires the public name `value`. */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /** Same document as `value`, so existing `[(html)]` bindings keep working. */
   readonly html: import("@angular/core").ModelSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
-  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  readonly readonly: import("@angular/core").InputSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  readonly invalid: import("@angular/core").InputSignal<boolean>;
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  readonly touched: import("@angular/core").InputSignal<boolean>;
+  readonly errors: import("@angular/core").InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
   readonly showToolbar: import("@angular/core").InputSignal<boolean>;
   /** Preset name, or the buttons to show, in order. */
   readonly toolbar: import("@angular/core").InputSignal<readonly ("paragraph" | "code" | "bullet" | "ordered" | "rule" | "image" | "bold" | "italic" | "underline" | "strike" | "link" | "source" | "h1" | "h2" | "quote" | "undo" | "redo" | "codeblock" | "clear")[] | WindToolbarPreset>;
@@ -219,6 +229,7 @@ export declare class WindEditor {
   protected readonly sourceOpen: import("@angular/core").WritableSignal<boolean>;
   protected readonly sourceDraft: import("@angular/core").WritableSignal<string>;
   protected readonly slashIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly errorText: import("@angular/core").Signal<string>;
   protected readonly slashItems: import("@angular/core").Signal<SlashItem[]>;
   private readonly surfaceRef;
   private readonly destroyRef;
@@ -226,7 +237,7 @@ export declare class WindEditor {
   private echo;
   constructor();
   protected pressed(id: string): boolean;
-  protected disabled(id: string): boolean;
+  protected toolDisabled(id: string): boolean;
   protected run(id: string): void;
   protected pickSlash(item: SlashItem): void;
   protected applyLink(event: Event): void;
@@ -235,9 +246,17 @@ export declare class WindEditor {
   protected applySource(): void;
   protected onDraft(event: Event, field: 'link' | 'src' | 'alt' | 'source'): void;
   private attach;
+  /** Signal forms calls this when the bound field should take focus. */
+  focus(options?: FocusOptions): void;
+  protected onFocusOut(event: FocusEvent): void;
   private onKey;
   static ɵfac: i0.ɵɵFactoryDeclaration<WindEditor, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<WindEditor, "wind-editor", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
     "html": {
       "alias": "html";
       "required": false;
@@ -248,11 +267,36 @@ export declare class WindEditor {
       "required": false;
       "isSignal": true;
     };
-    "readOnly": {
+    "readonly": {
       "alias": "readonly";
       "required": false;
       "isSignal": true;
     };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "touched": {
+      "alias": "touched";
+      "required": false;
+      "isSignal": true;
+    };
+    "errors": {
+      "alias": "errors";
+      "required": false;
+      "isSignal": true;
+    };
     "showToolbar": {
       "alias": "showToolbar";
       "required": false;
@@ -264,7 +308,9 @@ export declare class WindEditor {
       "isSignal": true;
     };
   }, {
+    "value": "valueChange";
     "html": "htmlChange";
+    "touch": "touch";
   }, never, never, true, never>;
 }
 export type { BlockData, BlockType, EditorSnapshot, MarkName, Selection, SlashChoice, SlashItem, TextAttrs, WindTool, WindToolbarPreset };