🐛 Fix copy/paste issues

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

@@ -12,6 +12,7 @@ import ChangeController from "./controllers/ChangeController.js";
 import SelectionController from "./controllers/SelectionController.js";
 import { createSelectionImposterFromClientRects } from "./selection/Imposter.js";
 import { addEventListeners, removeEventListeners } from "./Event.js";
+import { mapContentFragmentFromHTML, mapContentFragmentFromString } from "./content/dom/Content.js";
 import { createRoot, createEmptyRoot } from "./content/dom/Root.js";
 import { createParagraph } from "./content/dom/Paragraph.js";
 import { createEmptyInline, createInline } from "./content/dom/Inline.js";
@@ -501,6 +502,20 @@ export class TextEditor extends EventTarget {
   }
 }
 
+export function createRootFromHTML(html) {
+  const fragment = mapContentFragmentFromHTML(html);
+  const root = createRoot([]);
+  root.replaceChildren(fragment);
+  return root;
+}
+
+export function createRootFromString(string) {
+  const fragment = mapContentFragmentFromString(string);
+  const root = createRoot([]);
+  root.replaceChild(fragment);
+  return root;
+}
+
 export function isEditor(instance) {
   return (instance instanceof TextEditor);
 }

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

@@ -75,6 +75,17 @@ function getInertElement() {
   return inertElement;
 }
 
+/**
+ * Returns a default declaration.
+ *
+ * @returns {CSSStyleDeclaration}
+ */
+function getStyleDefaultsDeclaration() {
+  const element = getInertElement();
+  resetInertElement();
+  return element.style;
+}
+
 /**
  * Computes the styles of an element the same way `window.getComputedStyle` does.
  *
@@ -115,22 +126,26 @@ export function getComputedStyle(element) {
  *       CSS properties like `font-family` or some CSS variables.
  *
  * @param {Node} node
- * @param {CSSStyleDeclaration} styleDefaults
+ * @param {CSSStyleDeclaration} [styleDefaults]
  * @returns {CSSStyleDeclaration}
  */
-export function normalizeStyles(node, styleDefaults) {
+export function normalizeStyles(node, styleDefaults = getStyleDefaultsDeclaration()) {
   const styleDeclaration = mergeStyleDeclarations(
     styleDefaults,
     getComputedStyle(node.parentElement)
   );
+
   // If there's a color property, we should convert it to
   // a --fills CSS variable property.
   const fills = styleDeclaration.getPropertyValue("--fills");
   const color = styleDeclaration.getPropertyValue("color");
-  if (color && !fills) {
+  if (color) {
     styleDeclaration.removeProperty("color");
     styleDeclaration.setProperty("--fills", getFills(color));
+  } else {
+    styleDeclaration.setProperty("--fills", fills);
   }
+
   // If there's a font-family property and not a --font-id, then
   // we remove the font-family because it will not work.
   const fontFamily = styleDeclaration.getPropertyValue("font-family");
@@ -145,8 +160,15 @@ export function normalizeStyles(node, styleDefaults) {
   }
 
   const lineHeight = styleDeclaration.getPropertyValue("line-height");
-  if (!lineHeight || lineHeight === "") {
+  if (!lineHeight || lineHeight === "" || !lineHeight.endsWith("px")) {
+    // TODO: Podríamos convertir unidades en decimales.
     styleDeclaration.setProperty("line-height", DEFAULT_LINE_HEIGHT);
+  } else if (lineHeight.endsWith("px")) {
+    const fontSize = styleDeclaration.getPropertyValue("font-size");
+    styleDeclaration.setProperty(
+      "line-height",
+      parseFloat(lineHeight) / parseFloat(fontSize),
+    );
   }
   return styleDeclaration
 }

frontend/text-editor/src/editor/controllers/SelectionController.test.js

@@ -1,5 +1,4 @@
 import { expect, describe, test } from "vitest";
-import TextEditor from "../TextEditor.js";
 import {
   createEmptyParagraph,
   createParagraph,