Merge pull request #5377 from penpot/azazeln28-fix-text-editor-issues

🐛 Fix text editor issues

frontend/text-editor/src/editor/TextEditor.js

@@ -223,7 +223,9 @@ export class TextEditor extends EventTarget {
    * @param {FocusEvent} e
    */
   #onFocus = (e) => {
-    this.#selectionController.restoreSelection();
+    if (!this.#selectionController.restoreSelection()) {
+      this.selectAll();
+    }
     if (this.#selectionImposterElement) {
       this.#selectionImposterElement.replaceChildren();
     }

frontend/text-editor/src/editor/content/dom/Content.js

@@ -49,9 +49,10 @@ export function mapContentFragmentFromDocument(document, root, styleDefaults) {
       }
     }
 
-    currentParagraph.appendChild(
+    const inline = createInline(new Text(currentNode.nodeValue), currentStyle);
-      createInline(new Text(currentNode.nodeValue), currentStyle)
+    const fontSize = inline.style.getPropertyValue("font-size");
-    );
+    if (!fontSize) console.warn("font-size", fontSize);
+    currentParagraph.appendChild(inline);
 
     currentNode = nodeIterator.nextNode();
   }

frontend/text-editor/src/editor/content/dom/Style.js

@@ -173,13 +173,31 @@ export function setStyle(element, styleName, styleValue, styleUnit) {
   return element;
 }
 
+/**
+ * Returns the value of the font size
+ *
+ * @param {number} styleValueAsNumber
+ * @param {string} styleValue
+ * @returns {string}
+ */
+function getStyleFontSize(styleValueAsNumber, styleValue) {
+  if (styleValue.endsWith("pt")) {
+    return (styleValueAsNumber * 1.3333).toFixed();
+  } else if (styleValue.endsWith("em")) {
+    return (styleValueAsNumber * baseSize).toFixed();
+  } else if (styleValue.endsWith("%")) {
+    return ((styleValueAsNumber / 100) * baseSize).toFixed();
+  }
+  return styleValueAsNumber.toFixed();
+}
+
 /**
  * Returns the value of a style from a declaration.
  *
  * @param {CSSStyleDeclaration} style
  * @param {string} styleName
  * @param {string|undefined} [styleUnit]
- * @returns {*}
+ * @returns {string}
  */
 export function getStyleFromDeclaration(style, styleName, styleUnit) {
   if (styleName.startsWith("--")) {
@@ -189,7 +207,14 @@ export function getStyleFromDeclaration(style, styleName, styleUnit) {
   if (styleValue.endsWith(styleUnit)) {
     return styleValue.slice(0, -styleUnit.length);
   }
+  const styleValueAsNumber = parseFloat(styleValue);
+  if (styleName === "font-size") {
+    return getStyleFontSize(styleValueAsNumber, styleValue);
+  }
+  if (Number.isNaN(styleValueAsNumber)) {
     return styleValue;
+  }
+  return styleValueAsNumber.toFixed();
 }
 
 /**