@notectl/angular 0.0.4 → 1.0.0

package/package.json

@@ -1,58 +1,55 @@
 {
   "name": "@notectl/angular",
-  "version": "0.0.4",
-  "description": "Angular adapter for NotectlEditor",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
-  },
+  "version": "1.0.0",
+  "description": "Angular integration for the notectl rich text editor. Provides a standalone component, reactive forms support, and DI service.",
+  "license": "MIT",
+  "type": "module",
+  "module": "fesm2022/notectl-angular.mjs",
+  "typings": "types/notectl-angular.d.ts",
+  "sideEffects": false,
   "files": [
     "dist",
-    "src",
     "README.md"
   ],
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "test": "echo \"No tests yet\"",
-    "lint": "eslint src --ext .ts",
-    "typecheck": "tsc --noEmit"
-  },
   "keywords": [
+    "angular",
+    "rich-text-editor",
     "notectl",
+    "web-component",
     "editor",
-    "angular",
-    "rich-text",
-    "wysiwyg"
+    "wysiwyg",
+    "reactive-forms",
+    "signals"
   ],
-  "author": "Samuel Abramov",
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": ">=14.0.0",
-    "@angular/core": ">=14.0.0",
-    "@angular/forms": ">=14.0.0",
-    "@notectl/core": "*"
-  },
-  "devDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "ng-packagr": "^17.0.0",
-    "typescript": "^5.3.0"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Samyssmile/notectl.git",
-    "directory": "packages/adapters/angular"
+    "url": "https://github.com/Samyssmile/notectl.git",
+    "directory": "packages/angular"
+  },
+  "homepage": "https://github.com/Samyssmile/notectl",
+  "bugs": {
+    "url": "https://github.com/Samyssmile/notectl/issues"
   },
-  "publishConfig": {
-    "access": "public"
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0",
+    "@notectl/core": "^1.0.0",
+    "rxjs": ">=7.0.0"
+  },
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/notectl-angular.d.ts",
+      "default": "./fesm2022/notectl-angular.mjs"
+    },
+    "./testing": {
+      "types": "./types/notectl-angular-testing.d.ts",
+      "default": "./fesm2022/notectl-angular-testing.mjs"
+    }
   }
-}
+}

package/README.md

@@ -1,141 +0,0 @@
-# @notectl/angular
-
-Angular adapter for NotectlEditor - a framework-agnostic rich text editor built on Web Components.
-
-## Installation
-
-```bash
-npm install @notectl/angular @notectl/core
-```
-
-## Usage
-
-### Import Module
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { NotectlEditorModule } from '@notectl/angular';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    NotectlEditorModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-### Component Usage
-
-```typescript
-import { Component } from '@angular/core';
-import type { EditorAPI } from '@notectl/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <notectl-editor
-      [content]="content"
-      [placeholder]="'Start writing...'"
-      [readOnly]="false"
-      (contentChange)="onContentChange($event)"
-      (ready)="onReady($event)"
-    ></notectl-editor>
-  `
-})
-export class AppComponent {
-  content = { type: 'doc', content: [] };
-
-  onContentChange(content: unknown): void {
-    console.log('Content changed:', content);
-  }
-
-  onReady(editor: EditorAPI): void {
-    console.log('Editor ready:', editor);
-  }
-}
-```
-
-### Reactive Forms Integration
-
-```typescript
-import { Component } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-
-@Component({
-  selector: 'app-editor-form',
-  template: `
-    <form [formGroup]="form">
-      <notectl-editor formControlName="content"></notectl-editor>
-    </form>
-  `
-})
-export class EditorFormComponent {
-  form = new FormGroup({
-    content: new FormControl(null)
-  });
-}
-```
-
-### Directive Usage
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-editor',
-  template: `
-    <div
-      notectl-editor
-      [content]="content"
-      (contentChange)="onContentChange($event)"
-    ></div>
-  `
-})
-export class EditorComponent {
-  content = { type: 'doc', content: [] };
-
-  onContentChange(content: unknown): void {
-    console.log('Content changed:', content);
-  }
-}
-```
-
-## API
-
-### Component Props
-
-- `debug?: boolean` - Enable debug mode
-- `content?: string | object` - Initial editor content
-- `placeholder?: string` - Placeholder text
-- `readOnly?: boolean` - Read-only mode
-- `accessibility?: object` - Accessibility configuration
-- `i18n?: object` - Internationalization settings
-- `theme?: object` - Theme configuration
-
-### Component Events
-
-- `contentChange: EventEmitter<unknown>` - Emitted when content changes
-- `selectionChange: EventEmitter<unknown>` - Emitted when selection changes
-- `editorFocus: EventEmitter<void>` - Emitted when editor gains focus
-- `editorBlur: EventEmitter<void>` - Emitted when editor loses focus
-- `ready: EventEmitter<EditorAPI>` - Emitted when editor is ready
-- `error: EventEmitter<Error>` - Emitted when an error occurs
-
-### Component Methods
-
-- `getContent(): unknown` - Get current content
-- `setContent(content: unknown): void` - Set content
-- `getState(): unknown` - Get editor state
-- `executeCommand(command: string, ...args: unknown[]): void` - Execute command
-- `registerPlugin(plugin: unknown): void` - Register a plugin
-- `unregisterPlugin(pluginId: string): void` - Unregister a plugin
-
-## License
-
-MIT

package/src/index.ts

@@ -1,6 +0,0 @@
-/**
- * @notectl/angular - Angular adapter for NotectlEditor
- * @packageDocumentation
- */
-
-export * from './public-api';

package/src/lib/notectl-editor.component.ts

@@ -1,261 +0,0 @@
-/**
- * Angular component wrapper for NotectlEditor
- */
-
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-  ViewEncapsulation,
-  forwardRef,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NotectlEditor as NotectlEditorCore } from '@notectl/core';
-import type { EditorConfig, EditorAPI } from '@notectl/core';
-
-/**
- * NotectlEditor Angular component
- */
-@Component({
-  selector: 'notectl-editor',
-  template: '<div #container [attr.data-notectl-angular-wrapper]="true"></div>',
-  styles: [':host { display: block; }'],
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => NotectlEditorComponent),
-      multi: true,
-    },
-  ],
-})
-export class NotectlEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {
-  @ViewChild('container', { static: true }) containerRef!: ElementRef<HTMLDivElement>;
-
-  /** Debug mode */
-  @Input() debug?: boolean;
-
-  /** Initial content */
-  @Input() content?: string | object;
-
-  /** Placeholder text */
-  @Input() placeholder?: string;
-
-  /** Read-only mode */
-  @Input() readOnly?: boolean;
-
-  /** Accessibility configuration */
-  @Input() accessibility?: EditorConfig['accessibility'];
-
-  /** Internationalization configuration */
-  @Input() i18n?: EditorConfig['i18n'];
-
-  /** Theme configuration */
-  @Input() theme?: EditorConfig['theme'];
-
-  /** Custom class name */
-  @Input() className?: string;
-
-  /** Emitted when content changes */
-  @Output() contentChange = new EventEmitter<unknown>();
-
-  /** Emitted when selection changes */
-  @Output() selectionChange = new EventEmitter<unknown>();
-
-  /** Emitted when editor gains focus */
-  @Output() editorFocus = new EventEmitter<void>();
-
-  /** Emitted when editor loses focus */
-  @Output() editorBlur = new EventEmitter<void>();
-
-  /** Emitted when editor is ready */
-  @Output() ready = new EventEmitter<EditorAPI>();
-
-  /** Emitted when an error occurs */
-  @Output() error = new EventEmitter<Error>();
-
-  private editor: NotectlEditorCore | null = null;
-  private onChange: (value: unknown) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  ngOnInit(): void {
-    this.initEditor();
-  }
-
-  ngOnDestroy(): void {
-    this.destroyEditor();
-  }
-
-  /**
-   * Initialize the editor instance
-   */
-  private initEditor(): void {
-    if (!this.containerRef?.nativeElement) {
-      console.error('NotectlEditor: Container element not found');
-      return;
-    }
-
-    // Create editor instance
-    this.editor = document.createElement('notectl-editor') as NotectlEditorCore;
-
-    // Configure editor
-    const config: EditorConfig = {
-      debug: this.debug,
-      content: this.content,
-      placeholder: this.placeholder,
-      readOnly: this.readOnly,
-      accessibility: this.accessibility,
-      i18n: this.i18n,
-      theme: this.theme,
-    };
-    this.editor.configure(config);
-
-    // Attach event listeners
-    this.editor.on('content-change', (data) => {
-      const eventData = data as { content?: unknown };
-      const content = eventData.content;
-      this.contentChange.emit(content);
-      this.onChange(content);
-    });
-
-    this.editor.on('selection-change', (data) => {
-      const eventData = data as { selection?: unknown };
-      this.selectionChange.emit(eventData.selection);
-    });
-
-    this.editor.on('focus', () => {
-      this.editorFocus.emit();
-      this.onTouched();
-    });
-
-    this.editor.on('blur', () => {
-      this.editorBlur.emit();
-    });
-
-    this.editor.on('ready', () => {
-      this.ready.emit(this.getEditorAPI());
-    });
-
-    this.editor.on('error', (data) => {
-      const eventData = data as { error?: Error };
-      if (eventData.error) {
-        this.error.emit(eventData.error);
-      }
-    });
-
-    // Mount editor
-    this.containerRef.nativeElement.appendChild(this.editor);
-  }
-
-  /**
-   * Destroy the editor instance
-   */
-  private destroyEditor(): void {
-    if (this.editor) {
-      this.editor.destroy();
-      if (this.containerRef?.nativeElement?.contains(this.editor)) {
-        this.containerRef.nativeElement.removeChild(this.editor);
-      }
-      this.editor = null;
-    }
-  }
-
-  /**
-   * Update editor configuration
-   */
-  private updateConfig(): void {
-    if (!this.editor) return;
-
-    const config: EditorConfig = {
-      debug: this.debug,
-      content: this.content,
-      placeholder: this.placeholder,
-      readOnly: this.readOnly,
-      accessibility: this.accessibility,
-      i18n: this.i18n,
-      theme: this.theme,
-    };
-    this.editor.configure(config);
-  }
-
-  /**
-   * Get editor API
-   */
-  private getEditorAPI(): EditorAPI {
-    if (!this.editor) {
-      throw new Error('Editor not initialized');
-    }
-    return this.editor as EditorAPI;
-  }
-
-  // ControlValueAccessor implementation
-  writeValue(value: unknown): void {
-    if (this.editor && typeof value === 'string') {
-      this.editor.setContent(value);
-    }
-  }
-
-  registerOnChange(fn: (value: unknown) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (this.editor) {
-      this.editor.configure({ readOnly: isDisabled });
-    }
-  }
-
-  // Public API methods
-  /**
-   * Get current editor content
-   */
-  public getContent(): unknown {
-    return this.editor?.getContent();
-  }
-
-  /**
-   * Set editor content
-   */
-  public setContent(content: unknown): void {
-    if (this.editor && typeof content === 'string') {
-      this.editor.setContent(content);
-    }
-  }
-
-  /**
-   * Get current editor state
-   */
-  public getState(): unknown {
-    return this.editor?.getState();
-  }
-
-  /**
-   * Execute an editor command
-   */
-  public executeCommand(command: string, ...args: unknown[]): void {
-    this.editor?.executeCommand(command, ...args);
-  }
-
-  /**
-   * Register a plugin
-   */
-  public registerPlugin(plugin: unknown): void {
-    this.editor?.registerPlugin(plugin as any);
-  }
-
-  /**
-   * Unregister a plugin
-   */
-  public unregisterPlugin(pluginId: string): void {
-    this.editor?.unregisterPlugin(pluginId);
-  }
-}

package/src/lib/notectl-editor.directive.ts

@@ -1,156 +0,0 @@
-/**
- * Angular directive for NotectlEditor (optional alternative to component)
- */
-
-import {
-  Directive,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  forwardRef,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NotectlEditor as NotectlEditorCore } from '@notectl/core';
-import type { EditorConfig, EditorAPI } from '@notectl/core';
-
-/**
- * Directive to use NotectlEditor on any element
- * Usage: <div notectl-editor [content]="content"></div>
- */
-@Directive({
-  selector: '[notectl-editor]',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => NotectlEditorDirective),
-      multi: true,
-    },
-  ],
-})
-export class NotectlEditorDirective implements OnInit, OnDestroy, ControlValueAccessor {
-  @Input() debug?: boolean;
-  @Input() content?: string | object;
-  @Input() placeholder?: string;
-  @Input() readOnly?: boolean;
-  @Input() accessibility?: EditorConfig['accessibility'];
-  @Input() i18n?: EditorConfig['i18n'];
-  @Input() theme?: EditorConfig['theme'];
-
-  @Output() contentChange = new EventEmitter<unknown>();
-  @Output() selectionChange = new EventEmitter<unknown>();
-  @Output() editorFocus = new EventEmitter<void>();
-  @Output() editorBlur = new EventEmitter<void>();
-  @Output() ready = new EventEmitter<EditorAPI>();
-  @Output() error = new EventEmitter<Error>();
-
-  private editor: NotectlEditorCore | null = null;
-  private onChange: (value: unknown) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  constructor(private elementRef: ElementRef<HTMLElement>) {}
-
-  ngOnInit(): void {
-    this.initEditor();
-  }
-
-  ngOnDestroy(): void {
-    this.destroyEditor();
-  }
-
-  private initEditor(): void {
-    const hostElement = this.elementRef.nativeElement;
-
-    // Create editor instance
-    this.editor = document.createElement('notectl-editor') as NotectlEditorCore;
-
-    // Configure editor
-    const config: EditorConfig = {
-      debug: this.debug,
-      content: this.content,
-      placeholder: this.placeholder,
-      readOnly: this.readOnly,
-      accessibility: this.accessibility,
-      i18n: this.i18n,
-      theme: this.theme,
-    };
-    this.editor.configure(config);
-
-    // Attach event listeners
-    this.editor.on('content-change', (data) => {
-      const eventData = data as { content?: unknown };
-      const content = eventData.content;
-      this.contentChange.emit(content);
-      this.onChange(content);
-    });
-
-    this.editor.on('selection-change', (data) => {
-      const eventData = data as { selection?: unknown };
-      this.selectionChange.emit(eventData.selection);
-    });
-
-    this.editor.on('focus', () => {
-      this.editorFocus.emit();
-      this.onTouched();
-    });
-
-    this.editor.on('blur', () => {
-      this.editorBlur.emit();
-    });
-
-    this.editor.on('ready', () => {
-      this.ready.emit(this.getEditorAPI());
-    });
-
-    this.editor.on('error', (data) => {
-      const eventData = data as { error?: Error };
-      if (eventData.error) {
-        this.error.emit(eventData.error);
-      }
-    });
-
-    // Mount editor
-    hostElement.appendChild(this.editor);
-  }
-
-  private destroyEditor(): void {
-    if (this.editor) {
-      this.editor.destroy();
-      const hostElement = this.elementRef.nativeElement;
-      if (hostElement.contains(this.editor)) {
-        hostElement.removeChild(this.editor);
-      }
-      this.editor = null;
-    }
-  }
-
-  private getEditorAPI(): EditorAPI {
-    if (!this.editor) {
-      throw new Error('Editor not initialized');
-    }
-    return this.editor as EditorAPI;
-  }
-
-  // ControlValueAccessor implementation
-  writeValue(value: unknown): void {
-    if (this.editor && typeof value === 'string') {
-      this.editor.setContent(value);
-    }
-  }
-
-  registerOnChange(fn: (value: unknown) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (this.editor) {
-      this.editor.configure({ readOnly: isDisabled });
-    }
-  }
-}

package/src/lib/notectl-editor.module.ts

@@ -1,14 +0,0 @@
-/**
- * Angular module for NotectlEditor
- */
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NotectlEditorComponent } from './notectl-editor.component';
-
-@NgModule({
-  declarations: [NotectlEditorComponent],
-  imports: [CommonModule],
-  exports: [NotectlEditorComponent],
-})
-export class NotectlEditorModule {}

package/src/public-api.ts

@@ -1,7 +0,0 @@
-/**
- * Public API surface of @notectl/angular
- */
-
-export * from './lib/notectl-editor.component';
-export * from './lib/notectl-editor.module';
-export * from './lib/notectl-editor.directive';