@talrace/ngx-noder 19.0.43 → 19.0.44

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) {
@@ -6584,6 +6590,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 +6601,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 +6609,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 +6627,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 +6651,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;`;
         }