@phuong-tran-redoc/document-engine-angular 0.1.0 → 0.1.2

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, Type, InjectionToken, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, Injector, AfterContentInit, QueryList } from '@angular/core';
-import { IndentOptions, DynamicFieldOptions, DynamicFieldCategory as DynamicFieldCategory$1, RestrictedEditingOptions, TextCaseType, ListStyleType, Color, DynamicFieldItem as DynamicFieldItem$1 } from '@phuong-tran-redoc/document-engine-core';
+import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, InjectionToken, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, Type, Injector, AfterContentInit, QueryList } from '@angular/core';
+import { IndentOptions, DynamicFieldOptions, DynamicFieldCategory as DynamicFieldCategory$1, RestrictedEditingOptions, Color, TextCaseType, ListStyleType, DynamicFieldItem as DynamicFieldItem$1 } from '@phuong-tran-redoc/document-engine-core';
 import { BlockquoteOptions } from '@tiptap/extension-blockquote';
 import { BoldOptions } from '@tiptap/extension-bold';
 import { CodeOptions } from '@tiptap/extension-code';
@@ -19,10 +19,9 @@ import { UnderlineOptions } from '@tiptap/extension-underline';
 import { UndoRedoOptions, PlaceholderOptions, CharacterCountOptions } from '@tiptap/extensions';
 import { Editor, Content, EditorEvents, Extension } from '@tiptap/core';
 export { Editor } from '@tiptap/core';
-import * as i2 from '@angular/common';
-import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, ValidatorFn, FormControl } from '@angular/forms';
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import { Placement } from '@floating-ui/dom';
 import { SafeHtml } from '@angular/platform-browser';
@@ -387,7 +386,93 @@ declare class DocumentEditorComponent implements OnInit, OnChanges, OnDestroy {
      */
     private mergeConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DocumentEditorComponent, "document-engine-editor", never, { "config": { "alias": "config"; "required": false; }; }, { "editorReady": "editorReady"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocumentEditorComponent, "document-engine-editor", never, { "config": { "alias": "config"; "required": false; }; }, { "editorReady": "editorReady"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Type definition for HTML preprocessor function.
+ * Allows clients to transform HTML content before it's set into the editor.
+ *
+ * @param html - The raw HTML string to be processed
+ * @returns The processed HTML string that will be set into the editor
+ *
+ * @example
+ * ```typescript
+ * const myPreprocessor: EditorHtmlPreprocessor = (html: string) => {
+ *   // Remove all script tags for security
+ *   return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+ * };
+ * ```
+ */
+type EditorHtmlPreprocessor = (html: string) => string;
+/**
+ * Injection token for HTML preprocessor function.
+ * Use this token to provide a custom function that processes HTML content
+ * before it's set into the TipTap editor.
+ *
+ * This is optional - if not provided, the editor will use the HTML content as-is.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_HTML_PREPROCESSOR,
+ *   useValue: (html: string) => {
+ *     // Your custom preprocessing logic
+ *     return html.replace(/old/g, 'new');
+ *   }
+ * }
+ * ```
+ */
+declare const EDITOR_HTML_PREPROCESSOR: InjectionToken<EditorHtmlPreprocessor>;
+/**
+ * Injection token for content wrapper class.
+ * Use this token to provide a custom class name for the content wrapper element.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_CONTENT_WRAPPER_CLASS,
+ *   useValue: 'my-content-wrapper'
+ * }
+ * ```
+ */
+declare const EDITOR_CONTENT_WRAPPER_CLASS: InjectionToken<string | null>;
+
+declare class TiptapEditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {
+    protected elRef: ElementRef<HTMLElement>;
+    protected renderer: Renderer2;
+    protected changeDetectorRef: ChangeDetectorRef;
+    protected htmlPreprocessor: EditorHtmlPreprocessor | null;
+    protected contentWrapperClass: string | null;
+    private _editor?;
+    private initialEditableState?;
+    set editor(editor: Editor);
+    get editor(): Editor;
+    outputFormat: 'json' | 'html';
+    protected onChange: (value: Content) => void;
+    protected onTouched: () => void;
+    writeValue(value: Content): void;
+    registerOnChange(fn: () => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected handleChange: ({ editor, transaction }: EditorEvents["transaction"]) => void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TiptapEditorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapEditorDirective, "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Back-compat shim for NgModule-based consumers. `DocumentEditorComponent` is now
+ * standalone (and `@defer`-friendly); standalone consumers should import it (and
+ * `TiptapEditorDirective`) directly instead of this module.
+ */
+declare class DocumentEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DocumentEditorModule, never, [typeof DocumentEditorComponent, typeof TiptapEditorDirective], [typeof DocumentEditorComponent, typeof TiptapEditorDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DocumentEditorModule>;
 }
 
 type BubbleTarget = {
@@ -551,219 +636,6 @@ interface ToolbarBubbleMenuConfig {
     maxWidth?: string;
 }
 
-interface ToolbarState {
-    isReadOnly: boolean;
-    canUndo: boolean;
-    canRedo: boolean;
-    canResetFormat: boolean;
-    canToggleBold: boolean;
-    canToggleItalic: boolean;
-    canToggleUnderline: boolean;
-    canToggleStrike: boolean;
-    canToggleSubscript: boolean;
-    canToggleSuperscript: boolean;
-    canToggleCode: boolean;
-    canToggleLink: boolean;
-    canDecreaseIndent: boolean;
-    canIncreaseIndent: boolean;
-    canToggleBulletList: boolean;
-    canToggleBlockquote: boolean;
-    canInsertPageBreak: boolean;
-    canToggleEditableRegion: boolean;
-    canClearContent: boolean;
-}
-declare const DEFAULT_TOOLBAR_STATE: ToolbarState;
-declare function buildToolbarState(editor: Editor, config?: Partial<DocumentEngineConfig>): ToolbarState;
-
-/**
- * Toolbar component for document editor
- * Provides toolbar controls for editor actions
- */
-declare class ToolbarComponent implements OnInit, OnDestroy {
-    private readonly cdr;
-    private readonly ngZone;
-    private readonly toolbarService;
-    editor: Editor;
-    capabilities: EditorCapabilities;
-    config?: Partial<DocumentEngineConfig>;
-    readonly action: i0.EventEmitter<string>;
-    activeFontSize: string | null;
-    activeLineHeight: string | null;
-    activeHeading: number | null;
-    activeTextAlign: string | null;
-    activeTextAlignIcon: string;
-    toolbarState: ToolbarState;
-    readonly fontSizeOptions: {
-        value: string;
-        label: string;
-    }[];
-    readonly lineHeightOptions: ({
-        value: null;
-        label: string;
-    } | {
-        value: string;
-        label: string;
-    })[];
-    readonly textCaseOptions: {
-        value: TextCaseType;
-        label: string;
-    }[];
-    readonly headingOptions: ({
-        value: null;
-        label: string;
-        class: string;
-    } | {
-        value: number;
-        label: string;
-        class: string;
-    })[];
-    readonly textAlignOptions: {
-        value: string;
-        label: string;
-        icon: string;
-    }[];
-    readonly listStyleOptions: {
-        value: ListStyleType;
-        label: string;
-        example: string;
-    }[];
-    private colorBubbleMenu;
-    private linkBubbleWrapper;
-    private imageBubbleMenu;
-    private specialCharsBubbleMenu;
-    private dynamicFieldsBubbleMenu;
-    private templateBubbleMenu;
-    private tableCreateBubbleMenu;
-    readonly colorBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly linkBubbleConfig: EditorBubbleMenuConfig;
-    readonly tableBubbleConfig: EditorBubbleMenuConfig;
-    readonly imageBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly specialCharsBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly dynamicFieldsBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly templateBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly tableCreateBubbleConfig: ToolbarBubbleMenuConfig;
-    private throttleUpdateToolbarState;
-    private updateToolbarState;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    runAndEmit(actionName: string, chain: () => void): void;
-    setFontSize(size: string | null): void;
-    setLineHeight(lineHeight: string | null): void;
-    setHeading(level: string | null): void;
-    setTextAlign(align: string | null): void;
-    setListStyle(listStyleType: ListStyleType): void;
-    openColorBubble(event: MouseEvent, type: 'text' | 'fill'): void;
-    toggleLink(): void;
-    insertImage(event: MouseEvent): void;
-    openSpecialCharsBubble(event: MouseEvent): void;
-    openDynamicFieldsBubble(event: MouseEvent): void;
-    openTemplateBubble(event: MouseEvent): void;
-    openCreateTableBubble(event: MouseEvent): void;
-    trackByValue(index: number, item: {
-        value: unknown;
-    }): unknown;
-    trackByIndex(index: number): number;
-    get customToolbarButtons(): ToolbarButton[];
-    handleCustomIconButton(button: ToolbarButton): void;
-    handleCustomSelectButton(button: ToolbarButton, value: string): void;
-    printValue(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "document-engine-toolbar", never, { "editor": { "alias": "editor"; "required": false; }; "capabilities": { "alias": "capabilities"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
-}
-
-/**
- * Footer component for document editor
- * Container for footer components like character count
- */
-declare class FooterComponent {
-    editor: Editor;
-    config?: Partial<DocumentEngineConfig>;
-    hasCharacterCount(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "document-engine-footer", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/**
- * Type definition for HTML preprocessor function.
- * Allows clients to transform HTML content before it's set into the editor.
- *
- * @param html - The raw HTML string to be processed
- * @returns The processed HTML string that will be set into the editor
- *
- * @example
- * ```typescript
- * const myPreprocessor: EditorHtmlPreprocessor = (html: string) => {
- *   // Remove all script tags for security
- *   return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
- * };
- * ```
- */
-type EditorHtmlPreprocessor = (html: string) => string;
-/**
- * Injection token for HTML preprocessor function.
- * Use this token to provide a custom function that processes HTML content
- * before it's set into the TipTap editor.
- *
- * This is optional - if not provided, the editor will use the HTML content as-is.
- *
- * @example
- * ```typescript
- * // In your component or module providers
- * {
- *   provide: EDITOR_HTML_PREPROCESSOR,
- *   useValue: (html: string) => {
- *     // Your custom preprocessing logic
- *     return html.replace(/old/g, 'new');
- *   }
- * }
- * ```
- */
-declare const EDITOR_HTML_PREPROCESSOR: InjectionToken<EditorHtmlPreprocessor>;
-/**
- * Injection token for content wrapper class.
- * Use this token to provide a custom class name for the content wrapper element.
- *
- * @example
- * ```typescript
- * // In your component or module providers
- * {
- *   provide: EDITOR_CONTENT_WRAPPER_CLASS,
- *   useValue: 'my-content-wrapper'
- * }
- * ```
- */
-declare const EDITOR_CONTENT_WRAPPER_CLASS: InjectionToken<string | null>;
-
-declare class TiptapEditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {
-    protected elRef: ElementRef<HTMLElement>;
-    protected renderer: Renderer2;
-    protected changeDetectorRef: ChangeDetectorRef;
-    protected htmlPreprocessor: EditorHtmlPreprocessor | null;
-    protected contentWrapperClass: string | null;
-    private _editor?;
-    private initialEditableState?;
-    set editor(editor: Editor);
-    get editor(): Editor;
-    outputFormat: 'json' | 'html';
-    protected onChange: (value: Content) => void;
-    protected onTouched: () => void;
-    writeValue(value: Content): void;
-    registerOnChange(fn: () => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    protected handleChange: ({ editor, transaction }: EditorEvents["transaction"]) => void;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TiptapEditorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapEditorDirective, "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare class DocumentEditorModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DocumentEditorModule, [typeof DocumentEditorComponent], [typeof i2.CommonModule, typeof ToolbarComponent, typeof FooterComponent, typeof TiptapEditorDirective], [typeof DocumentEditorComponent, typeof TiptapEditorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DocumentEditorModule>;
-}
-
 declare class TiptapBubbleMenuDirective implements OnInit, OnDestroy {
     private elRef;
     props: BubbleMenuProps;
@@ -1138,6 +1010,126 @@ declare class SelectComponent implements AfterContentInit, OnChanges, OnDestroy,
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "document-engine-select", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelMode": { "alias": "labelMode"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "valueChange": "valueChange"; }, ["labelDirectives", "options"], ["[documentEngineSelectLabel]", "*"], true, never>;
 }
 
+interface ToolbarState {
+    isReadOnly: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    canResetFormat: boolean;
+    canToggleBold: boolean;
+    canToggleItalic: boolean;
+    canToggleUnderline: boolean;
+    canToggleStrike: boolean;
+    canToggleSubscript: boolean;
+    canToggleSuperscript: boolean;
+    canToggleCode: boolean;
+    canToggleLink: boolean;
+    canDecreaseIndent: boolean;
+    canIncreaseIndent: boolean;
+    canToggleBulletList: boolean;
+    canToggleBlockquote: boolean;
+    canInsertPageBreak: boolean;
+    canToggleEditableRegion: boolean;
+    canClearContent: boolean;
+}
+declare const DEFAULT_TOOLBAR_STATE: ToolbarState;
+declare function buildToolbarState(editor: Editor, config?: Partial<DocumentEngineConfig>): ToolbarState;
+
+/**
+ * Toolbar component for document editor
+ * Provides toolbar controls for editor actions
+ */
+declare class ToolbarComponent implements OnInit, OnDestroy {
+    private readonly cdr;
+    private readonly ngZone;
+    private readonly toolbarService;
+    editor: Editor;
+    capabilities: EditorCapabilities;
+    config?: Partial<DocumentEngineConfig>;
+    readonly action: i0.EventEmitter<string>;
+    activeFontSize: string | null;
+    activeLineHeight: string | null;
+    activeHeading: number | null;
+    activeTextAlign: string | null;
+    activeTextAlignIcon: string;
+    toolbarState: ToolbarState;
+    readonly fontSizeOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly lineHeightOptions: ({
+        value: null;
+        label: string;
+    } | {
+        value: string;
+        label: string;
+    })[];
+    readonly textCaseOptions: {
+        value: TextCaseType;
+        label: string;
+    }[];
+    readonly headingOptions: ({
+        value: null;
+        label: string;
+        class: string;
+    } | {
+        value: number;
+        label: string;
+        class: string;
+    })[];
+    readonly textAlignOptions: {
+        value: string;
+        label: string;
+        icon: string;
+    }[];
+    readonly listStyleOptions: {
+        value: ListStyleType;
+        label: string;
+        example: string;
+    }[];
+    private colorBubbleMenu;
+    private linkBubbleWrapper;
+    private imageBubbleMenu;
+    private specialCharsBubbleMenu;
+    private dynamicFieldsBubbleMenu;
+    private templateBubbleMenu;
+    private tableCreateBubbleMenu;
+    readonly colorBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly linkBubbleConfig: EditorBubbleMenuConfig;
+    readonly tableBubbleConfig: EditorBubbleMenuConfig;
+    readonly imageBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly specialCharsBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly dynamicFieldsBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly templateBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly tableCreateBubbleConfig: ToolbarBubbleMenuConfig;
+    private throttleUpdateToolbarState;
+    private updateToolbarState;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    runAndEmit(actionName: string, chain: () => void): void;
+    setFontSize(size: string | null): void;
+    setLineHeight(lineHeight: string | null): void;
+    setHeading(level: string | null): void;
+    setTextAlign(align: string | null): void;
+    setListStyle(listStyleType: ListStyleType): void;
+    openColorBubble(event: MouseEvent, type: 'text' | 'fill'): void;
+    toggleLink(): void;
+    insertImage(event: MouseEvent): void;
+    openSpecialCharsBubble(event: MouseEvent): void;
+    openDynamicFieldsBubble(event: MouseEvent): void;
+    openTemplateBubble(event: MouseEvent): void;
+    openCreateTableBubble(event: MouseEvent): void;
+    trackByValue(index: number, item: {
+        value: unknown;
+    }): unknown;
+    trackByIndex(index: number): number;
+    get customToolbarButtons(): ToolbarButton[];
+    handleCustomIconButton(button: ToolbarButton): void;
+    handleCustomSelectButton(button: ToolbarButton, value: string): void;
+    printValue(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "document-engine-toolbar", never, { "editor": { "alias": "editor"; "required": false; }; "capabilities": { "alias": "capabilities"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
 /**
  * Service to handle toolbar action emissions
  */
@@ -1157,6 +1149,18 @@ declare class ToolbarService implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarService>;
 }
 
+/**
+ * Footer component for document editor
+ * Container for footer components like character count
+ */
+declare class FooterComponent {
+    editor: Editor;
+    config?: Partial<DocumentEngineConfig>;
+    hasCharacterCount(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "document-engine-footer", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Character Count component for document editor footer
  * Displays character/word count with optional limit and color coding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phuong-tran-redoc/document-engine-angular",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "license": "MIT",
   "author": "Realestatedoc (Redoc)",
@@ -24,10 +24,18 @@
     "directory": "../../dist/libs/document-engine-angular",
     "access": "public"
   },
+  "files": [
+    "fesm2022",
+    "index.d.ts",
+    "src/lib/styles",
+    "README.md",
+    "LICENSE.md",
+    "THIRD-PARTY-NOTICES.txt"
+  ],
   "dependencies": {
     "tslib": "^2.3.0",
     "@floating-ui/dom": "^1.7.4",
-    "@phuong-tran-redoc/document-engine-core": "0.1.0"
+    "@phuong-tran-redoc/document-engine-core": "0.1.2"
   },
   "peerDependencies": {
     "rxjs": "^7.5.0",