@phuong-tran-redoc/document-engine-angular 0.0.26 → 0.0.28

package/fesm2022/phuong-tran-redoc-document-engine-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Directive, inject, Injectable, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, NgModule, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
+import { HostBinding, Input, Directive, inject, Injectable, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, ChangeDetectorRef, InjectionToken, HostListener, forwardRef, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, NgModule, ApplicationRef, createComponent, Renderer2 } from '@angular/core';
 import { Extension, Editor } from '@tiptap/core';
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
@@ -533,21 +533,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
         }], ctorParameters: () => [] });
 
 class IconComponent {
-    name = '';
-    cdr = inject(ChangeDetectorRef);
+    set name(value) {
+        const svgContent = this.iconRegistry.getIconString(value);
+        const hostElement = this.elementRef.nativeElement;
+        // Set innerHTML to render SVG
+        hostElement.innerHTML = svgContent;
+        // this.cdr.markForCheck();
+    }
+    // private cdr = inject(ChangeDetectorRef);
     elementRef = inject(ElementRef);
     iconRegistry = inject(IconRegistryService);
-    ngOnChanges(changes) {
-        if (changes['name']) {
-            const svgContent = this.iconRegistry.getIconString(this.name);
-            const hostElement = this.elementRef.nativeElement;
-            // Set innerHTML to render SVG
-            hostElement.innerHTML = svgContent;
-            this.cdr.markForCheck();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconComponent, isStandalone: true, selector: "document-engine-icon", inputs: { name: "name" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: IconComponent, isStandalone: true, selector: "document-engine-icon", inputs: { name: "name" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
@@ -4819,7 +4816,7 @@ class EditorBubbleMenuComponent {
         this.addDocumentClickHandler();
     }
     ngAfterViewInit() {
-        const bubbleElement = this.bubbleElement?.nativeElement;
+        // const bubbleElement = this.bubbleElement?.nativeElement;
         // if (bubbleElement) {
         //   this.focusTrap.attach(bubbleElement);
         // }
@@ -4985,6 +4982,9 @@ class EditorBubbleMenuComponent {
         this.currentViewId = viewId;
         // Activate new view
         this.activateView(this.currentViewRef);
+        // Trigger change detection for the child component to render immediately
+        // This is especially important for Angular v14 compatibility
+        this.cdr.markForCheck();
         // Mark bubble as visible for transition handling
         const bubbleElement = this.bubbleElement?.nativeElement;
         if (bubbleElement && this.config.target?.requireFocus) {
@@ -6102,10 +6102,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 args: ['attr.data-drag-handle']
             }] } });
 
+/**
+ * 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');
+ *   }
+ * }
+ * ```
+ */
+const EDITOR_HTML_PREPROCESSOR = new InjectionToken('EDITOR_HTML_PREPROCESSOR');
+
 class TiptapEditorDirective {
     elRef = inject(ElementRef);
     renderer = inject(Renderer2);
     changeDetectorRef = inject(ChangeDetectorRef);
+    htmlPreprocessor = inject(EDITOR_HTML_PREPROCESSOR, { optional: true });
     _editor;
     initialEditableState;
     set editor(editor) {
@@ -6132,7 +6154,12 @@ class TiptapEditorDirective {
     // Writes a new value to the element.
     // This methods is called when programmatic changes from model to view are requested.
     writeValue(value) {
-        this.editor.chain().setContent(value, { emitUpdate: false }).run();
+        // Apply preprocessor if value is a string (HTML) and preprocessor is available
+        let processedValue = value;
+        if (typeof value === 'string' && this.htmlPreprocessor) {
+            processedValue = this.htmlPreprocessor(value);
+        }
+        this.editor.chain().setContent(processedValue, { emitUpdate: false }).run();
     }
     // Registers a callback function that is called when the control's value changes in the UI.
     registerOnChange(fn) {
@@ -6179,7 +6206,9 @@ class TiptapEditorDirective {
         editor.setOptions({ element: this.elRef.nativeElement });
         // update content to the editor
         if (innerHTML) {
-            editor.chain().setContent(innerHTML, { emitUpdate: false }).run();
+            // Apply preprocessor to initial content if available
+            const processedContent = this.htmlPreprocessor ? this.htmlPreprocessor(innerHTML) : innerHTML;
+            editor.chain().setContent(processedContent, { emitUpdate: false }).run();
         }
         // register blur handler to update `touched` property
         editor.on('blur', () => {
@@ -6281,5 +6310,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
+export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EDITOR_HTML_PREPROCESSOR, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
 //# sourceMappingURL=phuong-tran-redoc-document-engine-angular.mjs.map