@flogeez/angular-tiptap-editor 3.2.1 → 3.3.0

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

@@ -119,28 +119,29 @@ const AteResizableImage = Node$1.create({
     },
     addNodeView() {
         return ({ node, getPos, editor }) => {
+            let currentNode = node;
             const wrapper = document.createElement("div");
             wrapper.className = "resizable-image-wrapper";
             wrapper.style.display = "block";
-            if (node.attrs["textAlign"]) {
-                wrapper.style.textAlign = node.attrs["textAlign"];
-                wrapper.setAttribute("data-align", node.attrs["textAlign"]);
+            if (currentNode.attrs["textAlign"]) {
+                wrapper.style.textAlign = currentNode.attrs["textAlign"];
+                wrapper.setAttribute("data-align", currentNode.attrs["textAlign"]);
             }
             const container = document.createElement("div");
             container.className = "resizable-image-container";
             container.style.position = "relative";
             container.style.display = "inline-block";
             const img = document.createElement("img");
-            img.src = node.attrs["src"];
-            img.alt = node.attrs["alt"] || "";
-            img.title = node.attrs["title"] || "";
+            img.src = currentNode.attrs["src"];
+            img.alt = currentNode.attrs["alt"] || "";
+            img.title = currentNode.attrs["title"] || "";
             img.className = "ate-image";
             img.style.display = "inline-block"; // Ensure it respects container text-align
-            if (node.attrs["width"]) {
-                img.width = node.attrs["width"];
+            if (currentNode.attrs["width"]) {
+                img.width = currentNode.attrs["width"];
             }
-            if (node.attrs["height"]) {
-                img.height = node.attrs["height"];
+            if (currentNode.attrs["height"]) {
+                img.height = currentNode.attrs["height"];
             }
             wrapper.appendChild(container);
             container.appendChild(img);
@@ -187,9 +188,13 @@ const AteResizableImage = Node$1.create({
                 startX = e.clientX;
                 // Use current image dimensions instead of initial ones
                 startWidth =
-                    parseInt(img.getAttribute("width") || "0") || node.attrs["width"] || img.naturalWidth;
+                    parseInt(img.getAttribute("width") || "0") ||
+                        currentNode.attrs["width"] ||
+                        img.naturalWidth;
                 startHeight =
-                    parseInt(img.getAttribute("height") || "0") || node.attrs["height"] || img.naturalHeight;
+                    parseInt(img.getAttribute("height") || "0") ||
+                        currentNode.attrs["height"] ||
+                        img.naturalHeight;
                 // Add resizing class to body
                 document.body.classList.add("resizing");
                 const handleMouseMove = (e) => {
@@ -227,7 +232,7 @@ const AteResizableImage = Node$1.create({
                         const finalHeight = parseInt(img.getAttribute("height") || "0");
                         if (finalWidth && finalHeight) {
                             editor.view.dispatch(editor.view.state.tr.setNodeMarkup(pos, undefined, {
-                                ...node.attrs,
+                                ...currentNode.attrs,
                                 width: finalWidth,
                                 height: finalHeight,
                             }));
@@ -268,6 +273,7 @@ const AteResizableImage = Node$1.create({
                     if (updatedNode.type.name !== "resizableImage") {
                         return false;
                     }
+                    currentNode = updatedNode;
                     img.src = updatedNode.attrs["src"];
                     img.alt = updatedNode.attrs["alt"] || "";
                     img.title = updatedNode.attrs["title"] || "";
@@ -1070,7 +1076,9 @@ const ENGLISH_TRANSLATIONS = {
     editor: {
         placeholder: "Start typing...",
         character: "character",
+        characterPlural: "characters",
         word: "word",
+        wordPlural: "words",
         linkPrompt: "Enter link URL",
         linkUrlPrompt: "Enter URL",
         confirmDelete: "Are you sure you want to delete this?",
@@ -1104,6 +1112,7 @@ const ENGLISH_TRANSLATIONS = {
         copiedSuccess: "Copied to clipboard!",
     },
 };
+
 const FRENCH_TRANSLATIONS = {
     toolbar: {
         bold: "Gras\nCtrl+B",
@@ -1256,7 +1265,9 @@ const FRENCH_TRANSLATIONS = {
     editor: {
         placeholder: "Commencez à écrire...",
         character: "caractère",
+        characterPlural: "caractères",
         word: "mot",
+        wordPlural: "mots",
         linkPrompt: "Entrez l'URL du lien",
         linkUrlPrompt: "Entrez l'URL",
         confirmDelete: "Êtes-vous sûr de vouloir supprimer ceci ?",
@@ -1290,18 +1301,209 @@ const FRENCH_TRANSLATIONS = {
         copiedSuccess: "Copié dans le presse-papiers !",
     },
 };
+
+const GERMAN_TRANSLATIONS = {
+    toolbar: {
+        bold: "Fett\nStrg+B",
+        italic: "Kursiv\nStrg+I",
+        underline: "Unterstrichen\nStrg+U",
+        strike: "Durchgestrichen\nStrg+Shift+X",
+        code: "Inline-Code\nStrg+E",
+        codeBlock: "Codeblock",
+        superscript: "Hochgestellt",
+        subscript: "Tiefgestellt",
+        highlight: "Hervorheben",
+        highlightPicker: "Hintergrundfarbe",
+        heading1: "Überschrift 1",
+        heading2: "Überschrift 2",
+        heading3: "Überschrift 3",
+        bulletList: "Aufzählungsliste",
+        orderedList: "Nummerierte Liste",
+        blockquote: "Zitatblock",
+        alignLeft: "Links ausrichten",
+        alignCenter: "Zentrieren",
+        alignRight: "Rechts ausrichten",
+        alignJustify: "Blocksatz",
+        link: "Link hinzufügen",
+        image: "Bild hinzufügen",
+        horizontalRule: "Horizontale Linie",
+        table: "Tabelle einfügen",
+        undo: "Rückgängig\nStrg+Z",
+        redo: "Wiederholen\nStrg+Shift+Z",
+        clear: "Leeren",
+        textColor: "Textfarbe",
+        customColor: "Benutzerdefinierte Farbe",
+        presets: "Voreinstellungen",
+    },
+    bubbleMenu: {
+        bold: "Fett\nStrg+B",
+        italic: "Kursiv\nStrg+I",
+        underline: "Unterstrichen\nStrg+U",
+        strike: "Durchgestrichen\nStrg+Shift+X",
+        code: "Code\nStrg+E",
+        superscript: "Hochgestellt",
+        subscript: "Tiefgestellt",
+        highlight: "Hervorheben",
+        highlightPicker: "Hintergrundfarbe",
+        textColor: "Textfarbe",
+        link: "Link",
+        addLink: "Link hinzufügen",
+        editLink: "Link bearbeiten",
+        removeLink: "Link entfernen",
+        linkUrl: "Link-URL",
+        linkText: "Link-Text",
+        openLink: "Link öffnen",
+        customColor: "Benutzerdefinierte Farbe",
+        presets: "Voreinstellungen",
+    },
+    slashCommands: {
+        heading1: {
+            title: "Überschrift 1",
+            description: "Große Abschnittsüberschrift",
+            keywords: ["überschrift", "heading", "h1", "titel", "1", "header"],
+        },
+        heading2: {
+            title: "Überschrift 2",
+            description: "Mittlere Abschnittsüberschrift",
+            keywords: ["überschrift", "heading", "h2", "titel", "2", "header"],
+        },
+        heading3: {
+            title: "Überschrift 3",
+            description: "Kleine Abschnittsüberschrift",
+            keywords: ["überschrift", "heading", "h3", "titel", "3", "header"],
+        },
+        bulletList: {
+            title: "Aufzählungsliste",
+            description: "Eine Aufzählungsliste erstellen",
+            keywords: ["aufzählung", "liste", "bullet", "ul", "unordered"],
+        },
+        orderedList: {
+            title: "Nummerierte Liste",
+            description: "Eine nummerierte Liste erstellen",
+            keywords: ["nummeriert", "liste", "ordered", "ol", "zahlen"],
+        },
+        blockquote: {
+            title: "Zitatblock",
+            description: "Einen Zitatblock hinzufügen",
+            keywords: ["zitat", "blockquote", "quote", "citation"],
+        },
+        code: {
+            title: "Codeblock",
+            description: "Einen Codeblock hinzufügen",
+            keywords: ["code", "codeblock", "pre", "programmierung"],
+        },
+        image: {
+            title: "Bild",
+            description: "Ein Bild einfügen",
+            keywords: ["bild", "image", "foto", "photo", "picture", "img"],
+        },
+        horizontalRule: {
+            title: "Horizontale Linie",
+            description: "Eine horizontale Trennlinie hinzufügen",
+            keywords: ["linie", "horizontal", "rule", "hr", "trennlinie", "separator"],
+        },
+        table: {
+            title: "Tabelle",
+            description: "Eine Tabelle einfügen",
+            keywords: ["tabelle", "table", "grid", "raster", "daten", "zeilen", "spalten"],
+        },
+    },
+    table: {
+        addRowBefore: "Zeile davor einfügen",
+        addRowAfter: "Zeile danach einfügen",
+        deleteRow: "Zeile löschen",
+        addColumnBefore: "Spalte davor einfügen",
+        addColumnAfter: "Spalte danach einfügen",
+        deleteColumn: "Spalte löschen",
+        deleteTable: "Tabelle löschen",
+        toggleHeaderRow: "Kopfzeile umschalten",
+        toggleHeaderColumn: "Kopfspalte umschalten",
+        mergeCells: "Zellen verbinden",
+        splitCell: "Zelle teilen",
+    },
+    imageUpload: {
+        selectImage: "Bild auswählen",
+        loadError: "Fehler beim Laden des Bildes",
+        uploadingImage: "Bild wird hochgeladen...",
+        uploadProgress: "Upload-Fortschritt",
+        uploadError: "Upload-Fehler",
+        uploadSuccess: "Upload erfolgreich",
+        imageTooLarge: "Bild ist zu groß",
+        invalidFileType: "Ungültiger Dateityp",
+        dragDropText: "Bilder hierher ziehen und ablegen",
+        changeImage: "Bild ändern",
+        downloadImage: "Bild herunterladen",
+        deleteImage: "Bild löschen",
+        resizeSmall: "Klein",
+        resizeMedium: "Mittel",
+        resizeLarge: "Groß",
+        resizeOriginal: "Originalgröße",
+        alignLeft: "Links ausrichten",
+        alignCenter: "Zentrieren",
+        alignRight: "Rechts ausrichten",
+        resizing: "Größe wird angepasst...",
+        compressing: "Bild wird komprimiert...",
+        compressionError: "Fehler bei der Komprimierung",
+        validating: "Datei wird geprüft...",
+        uploadingToServer: "Upload zum Server...",
+        replacingImage: "Bild wird ersetzt...",
+        insertingImage: "Bild wird in den Editor eingefügt...",
+        noFileSelected: "Keine Bilddatei ausgewählt",
+        selectionCancelled: "Auswahl abgebrochen",
+    },
+    editor: {
+        placeholder: "Beginne zu schreiben...",
+        character: "Zeichen",
+        characterPlural: "Zeichen",
+        word: "Wort",
+        wordPlural: "Wörter",
+        linkPrompt: "Link-URL eingeben",
+        linkUrlPrompt: "URL eingeben",
+        confirmDelete: "Möchtest du dies wirklich löschen?",
+        toggleEdit: "In den Bearbeitungsmodus wechseln",
+        viewMode: "In den Ansichtsmodus wechseln",
+        blockAdd: "Klicken, um einen Block hinzuzufügen",
+        blockDrag: "Ziehen, um diesen Block zu verschieben",
+    },
+    common: {
+        cancel: "Abbrechen",
+        confirm: "Bestätigen",
+        apply: "Anwenden",
+        delete: "Löschen",
+        save: "Speichern",
+        close: "Schließen",
+        loading: "Lädt",
+        error: "Fehler",
+        success: "Erfolg",
+    },
+    export: {
+        export: "Exportieren",
+        html: "HTML",
+        markdown: "Markdown",
+        text: "Nur Text",
+        copyHtml: "Als HTML kopieren",
+        copyMarkdown: "Als Markdown kopieren",
+        copyText: "Als reinen Text kopieren",
+        downloadHtml: ".html herunterladen",
+        downloadMarkdown: ".md herunterladen",
+        downloadText: ".txt herunterladen",
+        copiedSuccess: "In die Zwischenablage kopiert!",
+    },
+};
+
 class AteI18nService {
     constructor() {
         this._currentLocale = signal("en");
         this._translations = signal({
             en: ENGLISH_TRANSLATIONS,
             fr: FRENCH_TRANSLATIONS,
+            de: GERMAN_TRANSLATIONS,
         });
         // Public signals
         this.currentLocale = this._currentLocale.asReadonly();
         /** All loaded translations (useful for dynamic key access) */
         this.allTranslations = this._translations.asReadonly();
-        this.translations = computed(() => this._translations()[this._currentLocale()]);
+        this.translations = computed(() => this._translations()[this._currentLocale()] ?? this._translations().en);
         // Fast translation methods
         this.t = computed(() => this.translations());
         this.toolbar = computed(() => this.translations().toolbar);
@@ -8516,7 +8718,7 @@ class AngularTiptapEditorComponent {
           [class.limit-reached]="finalMaxCharacters() && characterCount() >= finalMaxCharacters()!">
           @if (finalShowCharacterCount()) {
             {{ characterCount() }}
-            {{ currentTranslations().editor.character }}{{ characterCount() > 1 ? "s" : "" }}
+            {{ characterCount() > 1 ? currentTranslations().editor.characterPlural : currentTranslations().editor.character }}
             @if (finalMaxCharacters()) {
               / {{ finalMaxCharacters() }}
             }
@@ -8528,7 +8730,7 @@ class AngularTiptapEditorComponent {
 
           @if (finalShowWordCount()) {
             {{ wordCount() }}
-            {{ currentTranslations().editor.word }}{{ wordCount() > 1 ? "s" : "" }}
+            {{ wordCount() > 1 ? currentTranslations().editor.wordPlural : currentTranslations().editor.word }}
           }
         </div>
       }
@@ -8677,7 +8879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [class.limit-reached]="finalMaxCharacters() && characterCount() >= finalMaxCharacters()!">
           @if (finalShowCharacterCount()) {
             {{ characterCount() }}
-            {{ currentTranslations().editor.character }}{{ characterCount() > 1 ? "s" : "" }}
+            {{ characterCount() > 1 ? currentTranslations().editor.characterPlural : currentTranslations().editor.character }}
             @if (finalMaxCharacters()) {
               / {{ finalMaxCharacters() }}
             }
@@ -8689,7 +8891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
           @if (finalShowWordCount()) {
             {{ wordCount() }}
-            {{ currentTranslations().editor.word }}{{ wordCount() > 1 ? "s" : "" }}
+            {{ wordCount() > 1 ? currentTranslations().editor.wordPlural : currentTranslations().editor.word }}
           }
         </div>
       }