@talrace/ngx-noder 19.0.43 → 19.0.45

package/fesm2022/talrace-ngx-noder.mjs

@@ -1388,6 +1388,9 @@ class ExternalComponent extends BaseNoderComponent {
     }
     focus() {
         super.focus();
+        if (this.isText) {
+            this.rerender();
+        }
         if (this.skipSidenav()) {
             return;
         }
@@ -1395,6 +1398,9 @@ class ExternalComponent extends BaseNoderComponent {
     }
     blur() {
         super.blur();
+        if (this.isText) {
+            this.rerender();
+        }
         if (this.skipSidenav()) {
             return;
         }
@@ -1919,7 +1925,7 @@ const PARENT_TAG = 'APP-NOD-EDITOR';
 const TABLE_CELL_TAG = 'APP-NOD-TABLE-CELL';
 const EDGE_TAG = 'APP-NOD-EDGE';
 const IMAGE_TAG = 'APP-NOD-IMAGE';
-const CUSTOM_TAG = 'APP-NOD-CUSTOM-ELEMENT';
+const CUSTOM_TAG = 'app-nod-custom-element';
 
 class CustomElementSearchResult {
     constructor(init) {
@@ -2060,13 +2066,10 @@ class FormatHelper {
     }
 }
 
-const POPUP_HEIGHT = 150;
-
 class GrammarPopupComponent {
     constructor(editorService, overlayService) {
         this.editorService = editorService;
         this.overlayService = overlayService;
-        this.hostHeight = `${POPUP_HEIGHT}px`;
     }
     onSuggestionClick(index) {
         this.editorService.applyGrammarSuggestion(this.error, index, this.paragraphIndex);
@@ -2077,15 +2080,12 @@ class GrammarPopupComponent {
         this.overlayService.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, host: { properties: { "style.height": "this.hostHeight" } }, ngImport: i0, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, ngImport: i0, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule], standalone: true, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hostHeight: [{
-                type: HostBinding,
-                args: ['style.height']
-            }], error: [{
+            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, TranslateModule], standalone: true, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { error: [{
                 type: Input
             }], paragraphIndex: [{
                 type: Input
@@ -5204,7 +5204,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ lineStyle: style }) })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, lineStyle: style })),
             insertIndex: table.insertIndex
         });
     }
@@ -5219,7 +5219,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ width }) })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, width })),
             insertIndex: table.insertIndex
         });
     }
@@ -6584,6 +6584,8 @@ class RenderingHelper {
     static renderExternalText(fragment, textStyle, wordSpacing, instance, line, renderedTokensInLine, paragraphStartIndex) {
         let additionalTokens = 0;
         let renderedIndexes = 0;
+        const style = `max-height:${instance.ascent() + instance.descent()}px;`;
+        const classes = instance.isFocused ? [CUSTOM_TAG, 'noder-focussed', 'noder-pointing'] : [CUSTOM_TAG, 'noder-pointing'];
         const attributes = [
             { name: 'data-session-id', value: `${instance.sessionId}` },
             { name: 'data-insert-index', value: `${instance.insertIndex}` }
@@ -6593,7 +6595,7 @@ class RenderingHelper {
         const customText = line.customTexts.find(x => x.index === instance.insertIndex - paragraphStartIndex);
         const customTextFragment = text.substring(customText.start, customText.end);
         if (!line.wordSpacing) {
-            this.renderText(fragment, textStyle, customTextFragment, wordSpacing, [CUSTOM_TAG, 'noder-pointing'], attributes);
+            this.renderText(fragment, textStyle, customTextFragment, wordSpacing, classes, attributes, style);
             additionalTokens += customTextFragment.length;
         }
         else {
@@ -6601,15 +6603,15 @@ class RenderingHelper {
             const wordSpacingEnd = line.wordSpacingEndToken - renderedTokensInLine - renderedIndexes - additionalTokens;
             if (wordSpacingStart > 0) {
                 const leftText = customTextFragment.substring(0, wordSpacingStart);
-                this.renderText(fragment, textStyle, leftText, null, [CUSTOM_TAG, 'noder-pointing'], attributes);
+                this.renderText(fragment, textStyle, leftText, null, classes, attributes, style);
                 additionalTokens += leftText.length;
             }
             const middleText = customTextFragment.substring(wordSpacingStart, wordSpacingEnd + 1);
-            this.renderText(fragment, textStyle, middleText, line.wordSpacing, [CUSTOM_TAG, 'noder-pointing'], attributes);
+            this.renderText(fragment, textStyle, middleText, line.wordSpacing, classes, attributes, style);
             additionalTokens += middleText.length;
             if (wordSpacingEnd >= 0) {
                 const rightText = customTextFragment.substring(wordSpacingEnd + 1);
-                this.renderText(fragment, textStyle, rightText, null, [CUSTOM_TAG, 'noder-pointing'], attributes);
+                this.renderText(fragment, textStyle, rightText, null, classes, attributes, style);
                 additionalTokens += rightText.length;
             }
         }
@@ -6619,7 +6621,7 @@ class RenderingHelper {
         }
         return { renderedIndexes, additionalTokens };
     }
-    static renderText(fragment, textStyle, content, wordSpacing, additionalClasses = [], additionalAttributes = []) {
+    static renderText(fragment, textStyle, content, wordSpacing, additionalClasses = [], additionalAttributes = [], additionalStyle = '') {
         if (!content.length) {
             return;
         }
@@ -6643,7 +6645,7 @@ class RenderingHelper {
             span.onmouseleave = () => span.classList.remove('hyperlink-hover');
         }
         span.textContent = content;
-        let styleString = ContentStyleHelper.getTextStylesString(textStyle);
+        let styleString = additionalStyle + ContentStyleHelper.getTextStylesString(textStyle);
         if (wordSpacing) {
             styleString += `word-spacing:${wordSpacing}px;`;
         }
@@ -9846,8 +9848,8 @@ class Editor {
             const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const rect = this.renderer.container.getBoundingClientRect();
             const hintLeft = rect.left + cursor.pageX;
-            const hintTop = rect.top + cursor.pageY - POPUP_HEIGHT;
-            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft - 100, hintTop);
+            const hintTop = rect.top + cursor.pageY + cursor.height + 5;
+            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft, hintTop);
             event.stopPropagation();
         }
         event.preventDefault();
@@ -11018,11 +11020,12 @@ class CellResizer {
             this.columnPositionChanged(positionX);
         };
     }
-    onStartResizing(cellResizerParameters) {
+    onStartResizing(cellResizerParameters, maxExpansionSpace = 0) {
         if (this.editorService.isViewOnly) {
             return;
         }
         this.cellResizerParameters = cellResizerParameters;
+        this.maxExpansionSpace = maxExpansionSpace;
         switch (this.cellResizerParameters.cellSide) {
             case ResizerSide.Left:
                 this.startResizingFromLeft();
@@ -11053,9 +11056,13 @@ class CellResizer {
         this.spaceLeft = this.table.columns[columnIndex].width - this.minCellWidth;
         this.spaceRight = 0;
         const nextColumnIndex = columnIndex + 1;
+        const isLast = columnIndex === this.table.columns.length - 1;
         if (this.table.columns.length > nextColumnIndex) {
             this.spaceRight = this.table.columns[nextColumnIndex].width - this.minCellWidth;
         }
+        else if (isLast) {
+            this.spaceRight = this.maxExpansionSpace;
+        }
         const cellRect = this.tableEl.rows[this.splitRowIndex].cells[this.cellResizerParameters.columnIndex].getBoundingClientRect();
         this.startX = this.tableEl.offsetLeft + cellRect.left + cellRect.width - this.resizerBorderSize;
         this.columnPositionChanged(this.startX);
@@ -11266,6 +11273,9 @@ class TableCellHelper {
         if (border.color && border.color !== 'auto') {
             style += ` ${border.color}`;
         }
+        else {
+            style += ` #000`;
+        }
         return style;
     }
     static getBorderLineStyle(lineStyle) {
@@ -11829,11 +11839,12 @@ class NoderTableComponent extends BaseNoderComponent {
         this.borderSize = 1;
         this.startResizing = (cellResizerParameters) => {
             const splitRowIndex = this.getSplitRowIndex(cellResizerParameters.rowIndex);
+            const availableTableSpace = this.getAvailableTableSpace();
             this.resizer.resizerHeight = this.getRowsHeightBetweenSplits(splitRowIndex);
             this.resizer.startY = this.getRowsHeightBefore(splitRowIndex);
             this.resizer.splitRowIndex = splitRowIndex;
             this.resizer.tableInsertIndex = this.insertIndex;
-            this.resizer.onStartResizing(cellResizerParameters);
+            this.resizer.onStartResizing(cellResizerParameters, availableTableSpace);
         };
         this.cellHeightChanged = (rowIndex, cellIndex, height) => {
             const tableRow = this.table.rows[rowIndex];
@@ -12191,6 +12202,13 @@ class NoderTableComponent extends BaseNoderComponent {
         }
         return sum;
     }
+    getAvailableTableSpace() {
+        const parent = this.el.nativeElement.parentElement;
+        if (!parent || !parent.classList.contains('noder-line')) {
+            return 0;
+        }
+        return Math.max(0, parent.clientWidth - this.tableEl.clientWidth);
+    }
     updateCells() {
         const rows = this.rowMatrix.length;
         const cols = rows > 0 ? this.rowMatrix[0].cells.length : 0;