@codeauradev/ngx-wind-editor 1.0.0 → 1.0.2

package/ngx-wind-editor.css

@@ -0,0 +1,512 @@
+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 {
+  position: relative;
+  min-width: 0;
+}
+
+.wind-doc {
+  min-height: 12rem;
+  padding: 1rem 1.15rem 1.5rem;
+  outline: none;
+  color: var(--color-stone-900, #1c1917);
+  font-family: var(--font-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif);
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  caret-color: var(--color-teal-700, #0f766e);
+  overflow-wrap: anywhere;
+}
+
+.wind-doc > * + * {
+  margin-top: 0.75rem;
+}
+
+.wind-doc p,
+.wind-doc h1,
+.wind-doc h2,
+.wind-doc h3,
+.wind-doc blockquote,
+.wind-doc pre,
+.wind-doc li {
+  margin: 0;
+}
+
+.wind-doc h1,
+.wind-doc h2,
+.wind-doc h3 {
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: var(--color-stone-950, #0c0a09);
+}
+
+.wind-doc h1 { font-size: 1.875rem; font-weight: 600; }
+.wind-doc h2 { font-size: 1.5rem; font-weight: 600; }
+.wind-doc h3 { font-size: 1.25rem; font-weight: 600; }
+
+.wind-doc blockquote {
+  border-left: 2px solid var(--color-teal-700, #0f766e);
+  padding-left: 0.9rem;
+  color: var(--color-stone-600, #57534e);
+}
+
+.wind-doc ul,
+.wind-doc ol {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.wind-doc li + li {
+  margin-top: 0.25rem;
+}
+
+.wind-doc pre {
+  overflow-x: auto;
+  border-radius: 0.6rem;
+  background: color-mix(in oklab, var(--color-stone-900, #1c1917) 6%, transparent);
+  padding: 0.8rem 0.9rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.wind-doc pre code {
+  font: inherit;
+  background: none;
+  padding: 0;
+}
+
+.wind-doc a {
+  color: var(--color-teal-800, #115e59);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.wind-doc code {
+  border-radius: 0.3rem;
+  background: color-mix(in oklab, var(--color-stone-900, #1c1917) 8%, transparent);
+  padding: 0.05em 0.3em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.88em;
+}
+
+.wind-doc img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.6rem;
+}
+
+.wind-doc figure {
+  margin: 0;
+}
+
+.wind-doc hr {
+  border: 0;
+  border-top: 1px solid var(--color-stone-300, #d6d3d1);
+  margin: 0.25rem 0;
+}
+
+.wind-doc [data-atomic].is-selected {
+  outline: 2px solid var(--color-teal-700, #0f766e);
+  outline-offset: 3px;
+  border-radius: 0.4rem;
+}
+
+.wind-doc[data-empty='true'] > p[data-placeholder]:before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+  color: var(--color-stone-400, #a8a29e);
+}
+
+.wind-carets {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.wind-caret,
+.wind-remote {
+  position: absolute;
+  pointer-events: none;
+}
+
+.wind-caret {
+  width: 2px;
+  background: var(--peer);
+  border-radius: 1px;
+}
+
+.wind-caret i {
+  position: absolute;
+  top: -1.15rem;
+  left: -1px;
+  border-radius: 0.3rem;
+  background: var(--peer);
+  color: white;
+  padding: 0.05rem 0.3rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 0.65rem;
+  font-style: normal;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.wind-remote {
+  background: color-mix(in oklab, var(--peer) 32%, transparent);
+  border-radius: 0.1rem;
+}
+
+.wind-frame.is-readonly .wind-doc {
+  caret-color: transparent;
+}
+
+.dark .wind-doc {
+  color: var(--color-stone-100, #f5f5f4);
+  caret-color: var(--color-teal-300, #5eead4);
+}
+.dark .wind-doc h1,
+.dark .wind-doc h2,
+.dark .wind-doc h3 { color: var(--color-stone-50, #fafaf9); }
+.dark .wind-doc blockquote { color: var(--color-stone-400, #a8a29e); }
+.dark .wind-doc a { color: var(--color-teal-300, #5eead4); }
+.dark .wind-doc hr { border-top-color: var(--color-stone-700, #44403c); }
+.dark .wind-doc pre,
+.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.0",
+  "version": "1.0.2",
   "description": "WYSIWYG HTML editor for Angular 22, styled with Tailwind CSS v4.",
   "keywords": [
     "angular",
@@ -20,19 +20,21 @@
     "styles.css"
   ],
   "type": "module",
-  "main": "./src/public-api.ts",
-  "module": "./src/public-api.ts",
-  "types": "./src/public-api.ts",
-  "typings": "./src/public-api.ts",
+  "module": "fesm2022/codeauradev-ngx-wind-editor.mjs",
+  "typings": "types/codeauradev-ngx-wind-editor.d.ts",
   "exports": {
     ".": {
-      "types": "./src/public-api.ts",
-      "default": "./src/public-api.ts"
+      "types": "./types/codeauradev-ngx-wind-editor.d.ts",
+      "default": "./fesm2022/codeauradev-ngx-wind-editor.mjs"
     },
-    "./styles.css": "./src/styles/ngx-wind-editor.css"
+    "./styles.css": "./ngx-wind-editor.css",
+    "./package.json": {
+      "default": "./package.json"
+    }
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
@@ -43,19 +45,5 @@
   "dependencies": {
     "tslib": "^2.8.1",
     "yjs": "^13.6.27"
-  },
-  "devDependencies": {
-    "@angular/compiler": "22.2.3",
-    "@angular/compiler-cli": "22.2.3",
-    "@angular/core": "22.2.3",
-    "ng-packagr": "22.2.3",
-    "rxjs": "7.8.2",
-    "tsx": "^4.20.5",
-    "typescript": "6.0.3",
-    "yjs": "13.6.27"
-  },
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json -c tsconfig.json && node scripts/patch-dist.mjs",
-    "test": "tsx --test test/*.test.ts"
   }
 }

package/{dist/types → 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 };