@flogeez/angular-tiptap-editor 0.2.6 → 0.2.7

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

@@ -17,7 +17,7 @@ import { DecorationSet, Decoration } from '@tiptap/pm/view';
 import tippy from 'tippy.js';
 import { Plugin as Plugin$1, PluginKey as PluginKey$1 } from 'prosemirror-state';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { tap } from 'rxjs';
+import { concat, defer, of, tap } from 'rxjs';
 
 const ResizableImage = Node.create({
     name: "resizableImage",
@@ -3615,66 +3615,32 @@ class AngularTiptapEditorComponent {
         // Computed pour les états de l'éditeur
         this.isEditorReady = computed(() => this.editor() !== null);
         // Computed pour la configuration de la toolbar
-        this.toolbarConfig = computed(() => {
-            const userConfig = this.toolbar();
-            // Si aucune configuration n'est fournie, utiliser la configuration par défaut
-            if (Object.keys(userConfig).length === 0) {
-                return DEFAULT_TOOLBAR_CONFIG;
-            }
-            // Sinon, utiliser uniquement la configuration fournie par l'utilisateur
-            return userConfig;
-        });
+        this.toolbarConfig = computed(() => Object.keys(this.toolbar()).length === 0
+            ? DEFAULT_TOOLBAR_CONFIG
+            : this.toolbar());
         // Computed pour la configuration du bubble menu
-        this.bubbleMenuConfig = computed(() => {
-            const userConfig = this.bubbleMenu();
-            // Si aucune configuration n'est fournie, utiliser la configuration par défaut
-            if (Object.keys(userConfig).length === 0) {
-                return DEFAULT_BUBBLE_MENU_CONFIG;
-            }
-            // Sinon, fusionner avec la configuration par défaut
-            return {
-                ...DEFAULT_BUBBLE_MENU_CONFIG,
-                ...userConfig,
-            };
-        });
+        this.bubbleMenuConfig = computed(() => Object.keys(this.bubbleMenu()).length === 0
+            ? DEFAULT_BUBBLE_MENU_CONFIG
+            : { ...DEFAULT_BUBBLE_MENU_CONFIG, ...this.bubbleMenu() });
         // Computed pour la configuration du bubble menu image
-        this.imageBubbleMenuConfig = computed(() => {
-            const userConfig = this.imageBubbleMenu();
-            // Si aucune configuration n'est fournie, utiliser la configuration par défaut
-            if (Object.keys(userConfig).length === 0) {
-                return DEFAULT_IMAGE_BUBBLE_MENU_CONFIG;
-            }
-            // Sinon, fusionner avec la configuration par défaut
-            return {
-                ...DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
-                ...userConfig,
-            };
-        });
+        this.imageBubbleMenuConfig = computed(() => Object.keys(this.imageBubbleMenu()).length === 0
+            ? DEFAULT_IMAGE_BUBBLE_MENU_CONFIG
+            : { ...DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ...this.imageBubbleMenu() });
         // Computed pour la configuration de l'upload d'images
-        this.imageUploadConfig = computed(() => {
-            const userConfig = this.imageUpload();
-            return {
-                maxSize: 5,
-                maxWidth: 1920,
-                maxHeight: 1080,
-                allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
-                enableDragDrop: true,
-                showPreview: true,
-                multiple: false,
-                compressImages: true,
-                quality: 0.8,
-                ...userConfig,
-            };
-        });
+        this.imageUploadConfig = computed(() => ({
+            maxSize: 5,
+            maxWidth: 1920,
+            maxHeight: 1080,
+            allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
+            enableDragDrop: true,
+            showPreview: true,
+            multiple: false,
+            compressImages: true,
+            quality: 0.8,
+            ...this.imageUpload(),
+        }));
         // Computed pour la configuration des slash commands
-        this.slashCommandsConfigComputed = computed(() => {
-            const userConfig = this.slashCommandsConfig();
-            if (userConfig) {
-                return userConfig;
-            }
-            // Configuration par défaut si aucune n'est fournie
-            return { commands: undefined }; // Le composant utilisera DEFAULT_SLASH_COMMANDS
-        });
+        this.slashCommandsConfigComputed = computed(() => this.slashCommandsConfig() ?? { commands: undefined });
         this._destroyRef = inject(DestroyRef);
         // NgControl pour gérer les FormControls
         this.ngControl = inject(NgControl, { self: true, optional: true });
@@ -3691,7 +3657,12 @@ class AngularTiptapEditorComponent {
         effect(() => {
             const editor = this.editor();
             const content = this.content();
+            const hasFormControl = !!this.ngControl?.control;
+            // Ne pas écraser le contenu si on a un FormControl et que le content est vide
             if (editor && content !== undefined && content !== editor.getHTML()) {
+                if (hasFormControl && !content) {
+                    return;
+                }
                 this.setContent(content, false);
             }
         });
@@ -3823,11 +3794,6 @@ class AngularTiptapEditorComponent {
         });
         // Stocker la référence de l'éditeur immédiatement
         this.editor.set(newEditor);
-        // Vérifier si on a un contenu initial via l'input content()
-        const initialContent = this.content();
-        if (initialContent) {
-            this.setContent(initialContent, false);
-        }
     }
     updateCharacterCount(editor) {
         if (this.showCharacterCount() && editor.storage["characterCount"]) {
@@ -3916,30 +3882,14 @@ class AngularTiptapEditorComponent {
     clearContent() {
         this.editor()?.commands.clearContent();
     }
-    normalizeHTML(html) {
-        if (!html)
-            return "";
-        // Normaliser les espaces et retours à la ligne pour une comparaison fiable
-        return html
-            .replace(/\s+/g, " ") // Remplacer espaces multiples par un seul
-            .replace(/>\s+</g, "><") // Supprimer espaces entre balises
-            .replace(/<br\s*\/?>/gi, "<br>") // Normaliser les <br>
-            .trim();
-    }
-    checkInitialFormValue() {
-        // Vérifier si on a une valeur initiale dans le FormControl
-        if (this.ngControl?.control?.value) {
-            console.log("Found initial FormControl value:", this.ngControl.control.value);
-            this.setContent(this.ngControl.control.value, false);
-        }
-    }
     setupFormControlSubscription() {
         const control = this.ngControl?.control;
         if (control) {
-            control.valueChanges
+            const formValue$ = concat(defer(() => of(control.value)), control.valueChanges);
+            formValue$
                 .pipe(tap((value) => {
                 const editor = this.editor();
-                if (editor && value !== editor.getHTML()) {
+                if (editor) {
                     this.setContent(value, false);
                 }
             }), takeUntilDestroyed(this._destroyRef))