@flogeez/angular-tiptap-editor 0.2.3 → 0.2.5

package/README.md

@@ -2,9 +2,11 @@
 
 A modern, customizable rich-text editor for Angular applications, built with Tiptap and featuring complete internationalization support.
 
+[![Try it on StackBlitz](https://img.shields.io/badge/Try%20it-StackBlitz-blue?style=for-the-badge&logo=stackblitz)](https://stackblitz.com/edit/angular-tiptap-editor)
+
 ## 🚀 Features
 
-- **Modern Angular**: Built with Angular 19+ and standalone components
+- **Modern Angular**: Built with Angular 18+
 - **Rich Text Editing**: Powered by Tiptap with extensive formatting options
 - **Internationalization**: Full i18n support (English & French) with auto-detection
 - **Customizable**: Highly configurable toolbar, bubble menus, and slash commands

package/fesm2022/flogeez-angular-tiptap-editor.mjs

@@ -3650,6 +3650,7 @@ class AngularTiptapEditorComponent {
         // ControlValueAccessor implementation
         this.onChange = (value) => { };
         this.onTouched = () => { };
+        this.pendingFormValue = null;
         this.i18nService = inject(TiptapI18nService);
         // Effet pour gérer le changement de langue
         effect(() => {
@@ -3662,8 +3663,8 @@ class AngularTiptapEditorComponent {
         effect(() => {
             const editor = this.editor();
             const content = this.content();
-            if (editor && content !== editor.getHTML()) {
-                editor.commands.setContent(content, false);
+            if (editor && content !== undefined && content !== editor.getHTML()) {
+                this.setContent(content, false);
             }
         });
         // Effet pour mettre à jour les propriétés de hauteur
@@ -3694,10 +3695,8 @@ class AngularTiptapEditorComponent {
         // L'initialisation se fait maintenant dans ngAfterViewInit
     }
     ngAfterViewInit() {
-        // Attendre que la vue soit complètement initialisée avant de créer l'éditeur
-        setTimeout(() => {
-            this.initEditor();
-        }, 0);
+        // La vue est déjà complètement initialisée dans ngAfterViewInit
+        this.initEditor();
     }
     ngOnDestroy() {
         const currentEditor = this.editor();
@@ -3775,7 +3774,6 @@ class AngularTiptapEditorComponent {
                 // Note: La mise à jour des états des boutons est maintenant gérée par TiptapBubbleMenuComponent
             },
             onCreate: ({ editor }) => {
-                this.editor.set(editor);
                 this.editorCreated.emit(editor);
                 this.updateCharacterCount(editor);
                 // Marquer l'éditeur comme complètement initialisé après un court délai
@@ -3792,6 +3790,13 @@ class AngularTiptapEditorComponent {
                 this.editorBlur.emit({ editor, event });
             },
         });
+        // Stocker la référence de l'éditeur immédiatement
+        this.editor.set(newEditor);
+        // Appliquer la valeur du FormControl en attente si elle existe
+        if (this.pendingFormValue !== null) {
+            this.setContent(this.pendingFormValue, false);
+            this.pendingFormValue = null;
+        }
     }
     updateCharacterCount(editor) {
         if (this.showCharacterCount() && editor.storage["characterCount"]) {
@@ -3884,7 +3889,12 @@ class AngularTiptapEditorComponent {
     writeValue(value) {
         const currentEditor = this.editor();
         if (currentEditor && value !== currentEditor.getHTML()) {
-            currentEditor.commands.setContent(value || "", false);
+            this.setContent(value || "", false);
+            this.pendingFormValue = null; // Valeur appliquée, plus besoin de la stocker
+        }
+        else {
+            // Éditeur pas encore prêt, stocker la valeur du FormControl pour plus tard
+            this.pendingFormValue = value || "";
         }
     }
     registerOnChange(fn) {