@open-wysiwyg-editor/angular 0.0.0-stage → 1.0.0

package/fesm2022/open-wysiwyg-editor-angular.mjs

@@ -0,0 +1,144 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, NgZone, afterNextRender, forwardRef, booleanAttribute, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { createEditor, forwardCallbacks, syncContent } from 'open-wysiwyg-editor';
+export * from 'open-wysiwyg-editor';
+
+/**
+ * The full editor (toolbar, dialogs, status bar) as a standalone component.
+ *
+ * ```html
+ * <owe-rich-text-editor [(ngModel)]="html" placeholder="Write…" />
+ * <owe-rich-text-editor formControlName="body" />
+ * <owe-rich-text-editor [(value)]="html" [options]="{ language: 'ar' }" />
+ * ```
+ *
+ * The editor starts in `afterNextRender`, so it never runs during server-side rendering, and its
+ * DOM listeners run outside the Angular zone.
+ */
+class RichTextEditorComponent {
+    constructor() {
+        /** Everything else `createEditor()` accepts. Read once, when the editor starts. */
+        this.options = {};
+        this.readonly = false;
+        this.valueChange = new EventEmitter();
+        /** Emits the editor instance once it has started. */
+        this.ready = new EventEmitter();
+        /** The live editor, or `null` before it starts (and on the server). */
+        this.editor = null;
+        this.zone = inject(NgZone);
+        this.applied = undefined;
+        this.disabled = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        afterNextRender(() => this.start());
+    }
+    ngOnChanges(changes) {
+        if (changes["value"])
+            this.load(this.value);
+        if (changes["placeholder"] || changes["readonly"])
+            this.applyRuntime();
+    }
+    ngOnDestroy() {
+        this.editor?.destroy();
+        this.editor = null;
+    }
+    // ---- ControlValueAccessor ------------------------------------------------------------------
+    writeValue(html) {
+        this.value = html ?? "";
+        this.load(this.value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.applyRuntime();
+    }
+    // ---- internals -----------------------------------------------------------------------------
+    start() {
+        const options = this.options;
+        this.applied = this.value ?? options.content;
+        this.editor = this.zone.runOutsideAngular(() => createEditor({
+            ...options,
+            ...this.runtime(),
+            element: this.host.nativeElement,
+            content: this.applied,
+            ...forwardCallbacks(() => this.options),
+            onUpdate: (editor) => {
+                const html = editor.getHTML();
+                this.applied = html;
+                this.options.onUpdate?.(editor);
+                this.zone.run(() => {
+                    this.value = html;
+                    this.onChange(html);
+                    this.valueChange.emit(html);
+                });
+            },
+            onBlur: (editor, event) => {
+                this.options.onBlur?.(editor, event);
+                this.zone.run(() => this.onTouched());
+            },
+        }));
+        this.ready.emit(this.editor);
+    }
+    load(html) {
+        if (!this.editor || html === undefined || html === this.applied)
+            return;
+        this.applied = html;
+        syncContent(this.editor, html);
+    }
+    runtime() {
+        return {
+            editable: !this.readonly && !this.disabled && this.options.editable !== false,
+            placeholder: this.placeholder ?? this.options.placeholder,
+        };
+    }
+    applyRuntime() {
+        this.editor?.setOptions(this.runtime());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.25", type: RichTextEditorComponent, isStandalone: true, selector: "owe-rich-text-editor", inputs: { value: "value", options: "options", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute] }, outputs: { valueChange: "valueChange", ready: "ready" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichTextEditorComponent), multi: true },
+        ], viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #host></div>", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "owe-rich-text-editor",
+                    standalone: true,
+                    template: "<div #host></div>",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichTextEditorComponent), multi: true },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], valueChange: [{
+                type: Output
+            }], ready: [{
+                type: Output
+            }], host: [{
+                type: ViewChild,
+                args: ["host", { static: true }]
+            }] } });
+
+// Angular package (Angular 21+, standalone components, SSR-safe).
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RichTextEditorComponent };
+//# sourceMappingURL=open-wysiwyg-editor-angular.mjs.map

package/fesm2022/open-wysiwyg-editor-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-wysiwyg-editor-angular.mjs","sources":["../../src/rich-text-editor.component.ts","../../src/public-api.ts","../../src/open-wysiwyg-editor-angular.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  type ElementRef,\n  EventEmitter,\n  Input,\n  NgZone,\n  Output,\n  ViewChild,\n  afterNextRender,\n  booleanAttribute,\n  forwardRef,\n  inject,\n  type OnChanges,\n  type OnDestroy,\n  type SimpleChanges,\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from \"@angular/forms\";\nimport {\n  createEditor,\n  forwardCallbacks,\n  syncContent,\n  type Content,\n  type Editor,\n  type EditorOptions,\n} from \"open-wysiwyg-editor\";\n\nexport type RichTextEditorOptions = Omit<EditorOptions, \"element\">;\n\n/**\n * The full editor (toolbar, dialogs, status bar) as a standalone component.\n *\n * ```html\n * <owe-rich-text-editor [(ngModel)]=\"html\" placeholder=\"Write…\" />\n * <owe-rich-text-editor formControlName=\"body\" />\n * <owe-rich-text-editor [(value)]=\"html\" [options]=\"{ language: 'ar' }\" />\n * ```\n *\n * The editor starts in `afterNextRender`, so it never runs during server-side rendering, and its\n * DOM listeners run outside the Angular zone.\n */\n@Component({\n  selector: \"owe-rich-text-editor\",\n  standalone: true,\n  template: \"<div #host></div>\",\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichTextEditorComponent), multi: true },\n  ],\n})\nexport class RichTextEditorComponent implements ControlValueAccessor, OnChanges, OnDestroy {\n  /** The content as HTML. Use `[(value)]`, or `ngModel` / reactive forms. */\n  @Input() value: string | undefined;\n  /** Everything else `createEditor()` accepts. Read once, when the editor starts. */\n  @Input() options: RichTextEditorOptions = {};\n  @Input() placeholder: string | undefined;\n  @Input({ transform: booleanAttribute }) readonly = false;\n\n  @Output() readonly valueChange = new EventEmitter<string>();\n  /** Emits the editor instance once it has started. */\n  @Output() readonly ready = new EventEmitter<Editor>();\n\n  @ViewChild(\"host\", { static: true }) private host!: ElementRef<HTMLElement>;\n\n  /** The live editor, or `null` before it starts (and on the server). */\n  editor: Editor | null = null;\n\n  private readonly zone = inject(NgZone);\n  private applied: Content = undefined;\n  private disabled = false;\n  private onChange: (html: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    afterNextRender(() => this.start());\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes[\"value\"]) this.load(this.value);\n    if (changes[\"placeholder\"] || changes[\"readonly\"]) this.applyRuntime();\n  }\n\n  ngOnDestroy(): void {\n    this.editor?.destroy();\n    this.editor = null;\n  }\n\n  // ---- ControlValueAccessor ------------------------------------------------------------------\n  writeValue(html: string | null): void {\n    this.value = html ?? \"\";\n    this.load(this.value);\n  }\n  registerOnChange(fn: (html: string) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(disabled: boolean): void {\n    this.disabled = disabled;\n    this.applyRuntime();\n  }\n\n  // ---- internals -----------------------------------------------------------------------------\n  private start(): void {\n    const options = this.options;\n    this.applied = this.value ?? options.content;\n    this.editor = this.zone.runOutsideAngular(() =>\n      createEditor({\n        ...options,\n        ...this.runtime(),\n        element: this.host.nativeElement,\n        content: this.applied,\n        ...forwardCallbacks(() => this.options),\n        onUpdate: (editor) => {\n          const html = editor.getHTML();\n          this.applied = html;\n          this.options.onUpdate?.(editor);\n          this.zone.run(() => {\n            this.value = html;\n            this.onChange(html);\n            this.valueChange.emit(html);\n          });\n        },\n        onBlur: (editor, event) => {\n          this.options.onBlur?.(editor, event);\n          this.zone.run(() => this.onTouched());\n        },\n      }),\n    );\n    this.ready.emit(this.editor);\n  }\n\n  private load(html: string | undefined): void {\n    if (!this.editor || html === undefined || html === this.applied) return;\n    this.applied = html;\n    syncContent(this.editor, html);\n  }\n\n  private runtime(): Partial<EditorOptions> {\n    return {\n      editable: !this.readonly && !this.disabled && this.options.editable !== false,\n      placeholder: this.placeholder ?? this.options.placeholder,\n    };\n  }\n\n  private applyRuntime(): void {\n    this.editor?.setOptions(this.runtime());\n  }\n}\n","// Angular package (Angular 21+, standalone components, SSR-safe).\nexport { RichTextEditorComponent } from \"./rich-text-editor.component\";\nexport type { RichTextEditorOptions } from \"./rich-text-editor.component\";\n\n// One install gives the whole API: StarterKit, getUI, types…\nexport * from \"open-wysiwyg-editor\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AA6BA;;;;;;;;;;;AAWG;MAUU,uBAAuB,CAAA;AAuBlC,IAAA,WAAA,GAAA;;QAnBS,IAAA,CAAA,OAAO,GAA0B,EAAE;QAEJ,IAAA,CAAA,QAAQ,GAAG,KAAK;AAErC,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAU;;AAExC,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAAU;;QAKrD,IAAA,CAAA,MAAM,GAAkB,IAAI;AAEX,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC;QAC9B,IAAA,CAAA,OAAO,GAAY,SAAS;QAC5B,IAAA,CAAA,QAAQ,GAAG,KAAK;AAChB,QAAA,IAAA,CAAA,QAAQ,GAA2B,MAAK,EAAE,CAAC;AAC3C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;QAGtC,eAAe,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;IACrC;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,OAAO,CAAC,OAAO,CAAC;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3C,IAAI,OAAO,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC;YAAE,IAAI,CAAC,YAAY,EAAE;IACxE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;IACpB;;AAGA,IAAA,UAAU,CAAC,IAAmB,EAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IACvB;AACA,IAAA,gBAAgB,CAAC,EAA0B,EAAA;AACzC,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AACA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;QACxB,IAAI,CAAC,YAAY,EAAE;IACrB;;IAGQ,KAAK,GAAA;AACX,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,OAAO;AAC5C,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,MACxC,YAAY,CAAC;AACX,YAAA,GAAG,OAAO;YACV,GAAG,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa;YAChC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,GAAG,gBAAgB,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC;AACvC,YAAA,QAAQ,EAAE,CAAC,MAAM,KAAI;AACnB,gBAAA,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE;AAC7B,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;gBACnB,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;AAC/B,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;AACjB,oBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACjB,oBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACnB,oBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7B,gBAAA,CAAC,CAAC;YACJ,CAAC;AACD,YAAA,MAAM,EAAE,CAAC,MAAM,EAAE,KAAK,KAAI;gBACxB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC;AACpC,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;YACvC,CAAC;AACF,SAAA,CAAC,CACH;QACD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC9B;AAEQ,IAAA,IAAI,CAAC,IAAwB,EAAA;AACnC,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,OAAO;YAAE;AACjE,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;IAChC;IAEQ,OAAO,GAAA;QACb,OAAO;AACL,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,KAAK;YAC7E,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW;SAC1D;IACH;IAEQ,YAAY,GAAA;QAClB,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC;+GAlGW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAMd,gBAAgB,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAVzB;AACT,YAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,uBAAuB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AACpG,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAJS,mBAAmB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMlB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBATnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,SAAS,EAAE;AACT,wBAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,6BAA6B,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AACpG,qBAAA;AACF,iBAAA;;sBAGE;;sBAEA;;sBACA;;sBACA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC;;sBAEA;;sBAEA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;;AC9DrC;;ACAA;;AAEG;;"}

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@open-wysiwyg-editor/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Angular standalone component for open-wysiwyg-editor with ngModel and reactive forms support. Accessible (WCAG 2.2 AA), RTL-first, CSP-safe, SSR-safe.",
+  "license": "MIT",
+  "author": "alhassan-ahmed",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./style.css": "./style.css",
+    "./style.min.css": "./style.min.css",
+    "./content.css": "./content.css",
+    "./content.min.css": "./content.min.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/open-wysiwyg-editor-angular.d.ts",
+      "default": "./fesm2022/open-wysiwyg-editor-angular.mjs"
+    }
+  },
+  "keywords": [
+    "angular",
+    "angular-component",
+    "ngmodel",
+    "reactive-forms",
+    "wysiwyg",
+    "rich-text-editor",
+    "editor",
+    "accessibility",
+    "a11y",
+    "rtl",
+    "arabic"
+  ],
+  "dependencies": {
+    "open-wysiwyg-editor": "^1.0.0",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://alhassan73.github.io/open-wysiwyg-editor/",
+  "bugs": {
+    "url": "https://github.com/alhassan73/open-wysiwyg-editor/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alhassan73/open-wysiwyg-editor.git",
+    "directory": "packages/angular"
+  },
+  "module": "fesm2022/open-wysiwyg-editor-angular.mjs",
+  "typings": "types/open-wysiwyg-editor-angular.d.ts",
+  "type": "module"
 }