@flogeez/angular-tiptap-editor 0.3.1 → 0.3.2

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

@@ -2338,7 +2338,20 @@ class EditorCommandsService {
     }
     // Méthode pour vider le contenu
     clearContent(editor) {
-        editor.chain().focus().clearContent().run();
+        editor.chain().focus().setContent("", true).run(); // ✅ Forcer l'émission de l'événement
+    }
+    // Méthodes de base de l'éditeur
+    focus(editor) {
+        editor.chain().focus().run();
+    }
+    blur(editor) {
+        editor.chain().blur().run();
+    }
+    setContent(editor, content, emitUpdate = true) {
+        editor.chain().focus().setContent(content, emitUpdate).run();
+    }
+    setEditable(editor, editable) {
+        editor.setEditable(editable);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditorCommandsService, providedIn: "root" }); }
@@ -4469,12 +4482,18 @@ class AngularTiptapEditorComponent {
         this.editorBlur = output();
         // ViewChild avec signal
         this.editorElement = viewChild.required("editorElement");
-        // Signals pour l'état interne
-        this.editor = signal(null);
-        this.characterCount = signal(0);
-        this.wordCount = signal(0);
-        this.isDragOver = signal(false);
-        this.editorFullyInitialized = signal(false);
+        // Signals privés pour l'état interne
+        this._editor = signal(null);
+        this._characterCount = signal(0);
+        this._wordCount = signal(0);
+        this._isDragOver = signal(false);
+        this._editorFullyInitialized = signal(false);
+        // Accès en lecture seule aux signaux
+        this.editor = this._editor.asReadonly();
+        this.characterCount = this._characterCount.asReadonly();
+        this.wordCount = this._wordCount.asReadonly();
+        this.isDragOver = this._isDragOver.asReadonly();
+        this.editorFullyInitialized = this._editorFullyInitialized.asReadonly();
         // Computed pour les états de l'éditeur
         this.isEditorReady = computed(() => this.editor() !== null);
         // Computed pour la configuration de la toolbar
@@ -4526,6 +4545,7 @@ class AngularTiptapEditorComponent {
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this.i18nService = inject(TiptapI18nService);
         this.imageService = inject(ImageService);
+        this.editorCommandsService = inject(EditorCommandsService);
         // Effet pour gérer le changement de langue
         effect(() => {
             const locale = this.locale();
@@ -4566,7 +4586,7 @@ class AngularTiptapEditorComponent {
             const currentEditor = this.editor();
             const isEditable = this.editable();
             if (currentEditor) {
-                currentEditor.setEditable(isEditable);
+                this.editorCommandsService.setEditable(currentEditor, isEditable);
             }
         });
         // Effect pour la détection du survol des tables
@@ -4588,7 +4608,7 @@ class AngularTiptapEditorComponent {
         if (currentEditor) {
             currentEditor.destroy();
         }
-        this.editorFullyInitialized.set(false);
+        this._editorFullyInitialized.set(false);
     }
     initEditor() {
         const extensions = [
@@ -4666,7 +4686,7 @@ class AngularTiptapEditorComponent {
                 // Marquer l'éditeur comme complètement initialisé après un court délai
                 // pour s'assurer que tous les plugins et extensions sont prêts
                 setTimeout(() => {
-                    this.editorFullyInitialized.set(true);
+                    this._editorFullyInitialized.set(true);
                 }, 100);
             },
             onFocus: ({ editor, event }) => {
@@ -4681,13 +4701,13 @@ class AngularTiptapEditorComponent {
             },
         });
         // Stocker la référence de l'éditeur immédiatement
-        this.editor.set(newEditor);
+        this._editor.set(newEditor);
     }
     updateCharacterCount(editor) {
         if (this.showCharacterCount() && editor.storage["characterCount"]) {
             const storage = editor.storage["characterCount"];
-            this.characterCount.set(storage.characters());
-            this.wordCount.set(storage.words());
+            this._characterCount.set(storage.characters());
+            this._wordCount.set(storage.words());
         }
     }
     // Méthodes pour l'upload d'images
@@ -4721,12 +4741,12 @@ class AngularTiptapEditorComponent {
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(true);
+        this._isDragOver.set(true);
     }
     onDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.isDragOver.set(false);
+        this._isDragOver.set(false);
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
             const file = files[0];
@@ -4757,22 +4777,33 @@ class AngularTiptapEditorComponent {
         return this.editor()?.getText() || "";
     }
     setContent(content, emitUpdate = true) {
-        this.editor()?.commands.setContent(content, emitUpdate);
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.setContent(editor, content, emitUpdate);
+        }
     }
     focus() {
-        this.editor()?.commands.focus();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.focus(editor);
+        }
     }
     blur() {
-        this.editor()?.commands.blur();
+        const editor = this.editor();
+        if (editor) {
+            this.editorCommandsService.blur(editor);
+        }
     }
     clearContent() {
         const editor = this.editor();
         if (editor) {
-            editor.commands.clearContent();
-            // Mettre à jour les compteurs après avoir vidé le contenu
-            this.updateCharacterCount(editor);
+            this.editorCommandsService.clearContent(editor);
         }
     }
+    // Méthode publique pour obtenir l'éditeur
+    getEditor() {
+        return this.editor();
+    }
     setupFormControlSubscription() {
         const control = this.ngControl?.control;
         if (control) {
@@ -4791,7 +4822,7 @@ class AngularTiptapEditorComponent {
     setDisabledState(isDisabled) {
         const currentEditor = this.editor();
         if (currentEditor) {
-            currentEditor.setEditable(!isDisabled);
+            this.editorCommandsService.setEditable(currentEditor, !isDisabled);
         }
     }
     onEditorClick(event) {
@@ -5000,6 +5031,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
   `, styles: [".tiptap-editor{border:2px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .2s ease}.tiptap-editor:focus-within{border-color:#3182ce}.tiptap-content{padding:16px;min-height:var(--editor-min-height, 200px);height:var(--editor-height, auto);max-height:var(--editor-max-height, none);overflow-y:var(--editor-overflow, visible);outline:none;position:relative}.tiptap-content.drag-over{background:#f0f8ff;border:2px dashed #3182ce}.character-count{padding:8px 16px;font-size:12px;color:#718096;text-align:right;border-top:1px solid #e2e8f0;background:#f8f9fa}.image-upload-container{position:relative;display:inline-block}:host ::ng-deep .ProseMirror{outline:none;line-height:1.6;color:#2d3748;min-height:100%;height:100%;word-wrap:break-word;overflow-wrap:break-word}:host ::ng-deep .ProseMirror h1{font-size:2em;font-weight:700;margin-top:0;margin-bottom:.5em}:host ::ng-deep .ProseMirror h2{font-size:1.5em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror h3{font-size:1.25em;font-weight:700;margin-top:1em;margin-bottom:.5em}:host ::ng-deep .ProseMirror p{margin:.5em 0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:2em;margin:.5em 0}:host ::ng-deep .ProseMirror blockquote{border-left:4px solid #e2e8f0;margin:1em 0;font-style:italic;background:#f8f9fa;padding:.5em 1em;border-radius:0 4px 4px 0}:host ::ng-deep .ProseMirror code{background:#f1f5f9;padding:.2em .4em;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:.9em}:host ::ng-deep .ProseMirror pre{background:#1a202c;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;margin:1em 0}:host ::ng-deep .ProseMirror pre code{background:none;color:inherit;padding:0}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#a0aec0;pointer-events:none;float:left;height:0}:host ::ng-deep .ProseMirror[contenteditable=false]{pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img{cursor:default;pointer-events:none}:host ::ng-deep .ProseMirror[contenteditable=false] img:hover{transform:none;box-shadow:0 2px 8px #0000001a}:host ::ng-deep .ProseMirror[contenteditable=false] img.ProseMirror-selectednode{outline:none}:host ::ng-deep .ProseMirror img{position:relative;display:inline-block;max-width:100%;height:auto;cursor:pointer;transition:all .2s ease;border:2px solid transparent;border-radius:8px}:host ::ng-deep .ProseMirror img:hover{border-color:#e2e8f0;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .ProseMirror img.ProseMirror-selectednode{border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a;transition:all .2s ease}:host ::ng-deep .ProseMirror .tiptap-image{max-width:100%;height:auto;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:.5em 0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:block;filter:brightness(1) contrast(1)}:host ::ng-deep .ProseMirror .tiptap-image:hover{box-shadow:0 8px 30px #0000001f;filter:brightness(1.02) contrast(1.02)}:host ::ng-deep .ProseMirror .tiptap-image.ProseMirror-selectednode{outline:2px solid #6366f1;outline-offset:2px;border-radius:16px;box-shadow:0 0 0 4px #6366f11a}:host ::ng-deep .image-container{margin:.5em 0;text-align:center;border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .image-container.image-align-left{text-align:left}:host ::ng-deep .image-container.image-align-center{text-align:center}:host ::ng-deep .image-container.image-align-right{text-align:right}:host ::ng-deep .image-container img{display:inline-block;max-width:100%;height:auto;border-radius:16px}:host ::ng-deep .resizable-image-container{position:relative;display:inline-block;margin:.5em 0}:host ::ng-deep .resize-controls{position:absolute;inset:0;pointer-events:none;z-index:1000}:host ::ng-deep .resize-handle{position:absolute;width:12px;height:12px;background:#3b82f6;border:2px solid white;border-radius:50%;pointer-events:all;cursor:pointer;z-index:1001;transition:all .15s ease;box-shadow:0 2px 6px #0003}:host ::ng-deep .resize-handle:hover{background:#2563eb;box-shadow:0 3px 8px #0000004d}:host ::ng-deep .resize-handle:active{background:#1d4ed8}:host ::ng-deep .resize-handle-n:hover,:host ::ng-deep .resize-handle-s:hover{transform:translate(-50%) scale(1.2)}:host ::ng-deep .resize-handle-w:hover,:host ::ng-deep .resize-handle-e:hover{transform:translateY(-50%) scale(1.2)}:host ::ng-deep .resize-handle-n:active,:host ::ng-deep .resize-handle-s:active{transform:translate(-50%) scale(.9)}:host ::ng-deep .resize-handle-w:active,:host ::ng-deep .resize-handle-e:active{transform:translateY(-50%) scale(.9)}:host ::ng-deep .resize-handle-nw:hover,:host ::ng-deep .resize-handle-ne:hover,:host ::ng-deep .resize-handle-sw:hover,:host ::ng-deep .resize-handle-se:hover{transform:scale(1.2)}:host ::ng-deep .resize-handle-nw:active,:host ::ng-deep .resize-handle-ne:active,:host ::ng-deep .resize-handle-sw:active,:host ::ng-deep .resize-handle-se:active{transform:scale(.9)}:host ::ng-deep .resize-handle-nw{top:0;left:-6px;cursor:nw-resize}:host ::ng-deep .resize-handle-n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}:host ::ng-deep .resize-handle-ne{top:0;right:-6px;cursor:ne-resize}:host ::ng-deep .resize-handle-w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}:host ::ng-deep .resize-handle-e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}:host ::ng-deep .resize-handle-sw{bottom:0;left:-6px;cursor:sw-resize}:host ::ng-deep .resize-handle-s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}:host ::ng-deep .resize-handle-se{bottom:0;right:-6px;cursor:se-resize}:host ::ng-deep body.resizing{-webkit-user-select:none;user-select:none;cursor:crosshair}:host ::ng-deep body.resizing .ProseMirror{pointer-events:none}:host ::ng-deep body.resizing .ProseMirror .tiptap-image{pointer-events:none}:host ::ng-deep .image-size-info{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s ease}:host ::ng-deep .image-container:hover .image-size-info{opacity:1}:host ::ng-deep .ProseMirror table{border-collapse:separate;border-spacing:0;margin:0;table-layout:fixed;width:100%;border-radius:8px;overflow:hidden}:host ::ng-deep .ProseMirror table td,:host ::ng-deep .ProseMirror table th{border:none;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;box-sizing:border-box;min-width:1em;padding:8px 12px;position:relative;vertical-align:top;background:#fff}:host ::ng-deep .ProseMirror table td:first-child,:host ::ng-deep .ProseMirror table th:first-child{border-left:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child td,:host ::ng-deep .ProseMirror table tr:first-child th{border-top:1px solid #e2e8f0}:host ::ng-deep .ProseMirror table tr:first-child th:first-child{border-top-left-radius:8px}:host ::ng-deep .ProseMirror table tr:first-child th:last-child{border-top-right-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:first-child{border-bottom-left-radius:8px}:host ::ng-deep .ProseMirror table tr:last-child td:last-child{border-bottom-right-radius:8px}:host ::ng-deep .ProseMirror table th{background:#f8f9fa;font-weight:600;color:#374151}:host ::ng-deep .ProseMirror table .selectedCell:after{background:#c8c8ff66;content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}:host ::ng-deep .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:#6366f1;opacity:0;transition:opacity .2s ease}:host ::ng-deep .ProseMirror table:hover .column-resize-handle{opacity:1}:host ::ng-deep .ProseMirror table .column-resize-handle:hover{background-color:#4f46e5}:host ::ng-deep .ProseMirror .tableWrapper{overflow-x:auto;margin:1em 0;border-radius:8px}:host ::ng-deep .ProseMirror .tableWrapper table{margin:0;border-radius:8px;min-width:600px;overflow:hidden}:host ::ng-deep .ProseMirror table p{margin:0}:host ::ng-deep .ProseMirror table .selectedCell{background-color:#6366f11a}:host ::ng-deep .ProseMirror table th{background-color:#f8f9fa;font-weight:600;color:#374151;text-align:left}:host ::ng-deep .ProseMirror table tbody tr:nth-child(2n){background-color:#fafbfc}:host ::ng-deep .ProseMirror table tbody tr:hover{background-color:#f1f5f9}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Clés des commandes dans l'ordre de création
+ */
+const SLASH_COMMAND_KEYS = [
+    "heading1",
+    "heading2",
+    "heading3",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "code",
+    "image",
+    "horizontalRule",
+    "table",
+];
 /**
  * Factory function pour créer les slash commands traduits
  */
@@ -5147,20 +5193,18 @@ function createI18nSlashCommands(i18nService) {
     ];
 }
 /**
- * Mapping des clés de commandes pour la compatibilité
+ * Fonction utilitaire pour filtrer les slash commands selon les commandes actives
+ * Utilise le service i18n injecté en interne
  */
-const SLASH_COMMAND_KEYS = {
-    heading1: "heading1",
-    heading2: "heading2",
-    heading3: "heading3",
-    bulletList: "bulletList",
-    orderedList: "orderedList",
-    blockquote: "blockquote",
-    code: "code",
-    image: "image",
-    horizontalRule: "horizontalRule",
-    table: "table",
-};
+function filterSlashCommands(activeCommands) {
+    // Injecter le service i18n en interne
+    const i18nService = inject(TiptapI18nService);
+    const allCommands = createI18nSlashCommands(i18nService);
+    return allCommands.filter((command, index) => {
+        const commandKey = SLASH_COMMAND_KEYS[index];
+        return commandKey && activeCommands.has(commandKey);
+    });
+}
 
 /*
  * Public API Surface of tiptap-editor
@@ -5171,5 +5215,5 @@ const SLASH_COMMAND_KEYS = {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, NoopValueAccessorDirective, TiptapI18nService, createI18nSlashCommands };
+export { AngularTiptapEditorComponent, DEFAULT_BUBBLE_MENU_CONFIG, DEFAULT_CELL_MENU_CONFIG, DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, DEFAULT_SLASH_COMMANDS, DEFAULT_TABLE_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorCommandsService, ImageService, NoopValueAccessorDirective, SLASH_COMMAND_KEYS, TiptapI18nService, createI18nSlashCommands, filterSlashCommands };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map