Merge pull request #5306 from penpot/azazeln28-update-text-editor

⬆️ Update text editor
2025-03-27 23:21:47 -05:00 · 2024-11-19 19:20:04 +01:00 · 2024-11-19 19:20:04 +01:00 · 246415be2b
commit 246415be2b
parent a91737b4d7 7faa9e970e
68 changed files with 11124 additions and 11 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -100,7 +100,7 @@
    "@penpot/hljs": "portal:./vendor/hljs",
    "@penpot/mousetrap": "portal:./vendor/mousetrap",
    "@penpot/svgo": "penpot/svgo#c6fba7a4dcfbc27b643e7fc0c94fc98cf680b77b",
-    "@penpot/text-editor": "penpot/penpot-text-editor#a100aad8d0efcbb070bed9144dbd2782547e78ba",
+    "@penpot/text-editor": "portal:./text-editor",
    "@tokens-studio/sd-transforms": "^0.16.1",
    "compression": "^1.7.4",
    "date-fns": "^4.1.0",
--- a/frontend/src/app/main/data/workspace/text/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/text/shortcuts.cljs
@ -12,6 +12,7 @@
   [app.main.data.shortcuts :as ds]
   [app.main.data.workspace.texts :as dwt]
   [app.main.data.workspace.undo :as dwu]
+   [app.main.features :as features]
   [app.main.fonts :as fonts]
   [app.main.refs :as refs]
   [app.main.store :as st]
@ -113,18 +114,24 @@

 (defn calculate-text-values
  [shape]
-  (let [state-map     (deref refs/workspace-editor-state)
-        editor-state  (get state-map (:id shape))]
+  (let [state-map    (if (features/active-feature? @st/state "text-editor/v2")
+                       (deref refs/workspace-v2-editor-state)
+                       (deref refs/workspace-editor-state))
+        editor-state  (get state-map (:id shape))
+        editor-instance (when (features/active-feature? @st/state "text-editor/v2")
+                          (deref refs/workspace-editor))]
    (d/merge
     (dwt/current-root-values
      {:shape shape
       :attrs txt/root-attrs})
     (dwt/current-paragraph-values
      {:editor-state editor-state
+       :editor-instance editor-instance
       :shape shape
       :attrs txt/paragraph-attrs})
     (dwt/current-text-values
      {:editor-state editor-state
+       :editor-instance editor-instance
       :shape shape
       :attrs txt/text-node-attrs}))))

--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@ -171,6 +171,7 @@
                              (and (some? drawing-obj) (= :path (:type drawing-obj))))
        node-editing?     (and edition (= :path (get-in base-objects [edition :type])))
        text-editing?     (and edition (= :text (get-in base-objects [edition :type])))
+
        grid-editing?     (and edition (ctl/grid-layout? base-objects edition))

        mode-inspect?       (= options-mode :inspect)
--- a/frontend/src/app/util/text/ui.cljs
+++ b/frontend/src/app/util/text/ui.cljs
@ -16,7 +16,7 @@

 (defn v2-closest-text-editor-content
  [target]
-  (.closest ^js target ".text-editor-content"))
+  (.closest ^js target "[data-itype=\"editor\"]"))

 (defn closest-text-editor-content
  [target]
@ -34,7 +34,7 @@

 (defn v2-get-text-editor-content
  []
-  (dom/get-element-by-class "text-editor-content"))
+  (dom/query "[data-itype=\"editor\"]"))

 (defn get-text-editor-content
  []
--- a/frontend/text-editor/.editorconfig
+++ b/frontend/text-editor/.editorconfig
@ -0,0 +1,71 @@
+root = true
+
+[*]
+charset = utf-8
+
+indent_size = 2
+indent_style = space
+
+end_of_line = lf
+
+insert_final_newline = true
+
+trim_trailing_whitespace = true
+cpp_indent_braces=false
+cpp_indent_multi_line_relative_to=innermost_parenthesis
+cpp_indent_within_parentheses=indent
+cpp_indent_preserve_within_parentheses=false
+cpp_indent_case_labels=false
+cpp_indent_case_contents=true
+cpp_indent_case_contents_when_block=false
+cpp_indent_lambda_braces_when_parameter=true
+cpp_indent_goto_labels=one_left
+cpp_indent_preprocessor=leftmost_column
+cpp_indent_access_specifiers=false
+cpp_indent_namespace_contents=true
+cpp_indent_preserve_comments=false
+cpp_new_line_before_open_brace_namespace=ignore
+cpp_new_line_before_open_brace_type=ignore
+cpp_new_line_before_open_brace_function=ignore
+cpp_new_line_before_open_brace_block=ignore
+cpp_new_line_before_open_brace_lambda=ignore
+cpp_new_line_scope_braces_on_separate_lines=false
+cpp_new_line_close_brace_same_line_empty_type=false
+cpp_new_line_close_brace_same_line_empty_function=false
+cpp_new_line_before_catch=true
+cpp_new_line_before_else=true
+cpp_new_line_before_while_in_do_while=false
+cpp_space_before_function_open_parenthesis=remove
+cpp_space_within_parameter_list_parentheses=false
+cpp_space_between_empty_parameter_list_parentheses=false
+cpp_space_after_keywords_in_control_flow_statements=true
+cpp_space_within_control_flow_statement_parentheses=false
+cpp_space_before_lambda_open_parenthesis=false
+cpp_space_within_cast_parentheses=false
+cpp_space_after_cast_close_parenthesis=false
+cpp_space_within_expression_parentheses=false
+cpp_space_before_block_open_brace=true
+cpp_space_between_empty_braces=false
+cpp_space_before_initializer_list_open_brace=false
+cpp_space_within_initializer_list_braces=true
+cpp_space_preserve_in_initializer_list=true
+cpp_space_before_open_square_bracket=false
+cpp_space_within_square_brackets=false
+cpp_space_before_empty_square_brackets=false
+cpp_space_between_empty_square_brackets=false
+cpp_space_group_square_brackets=true
+cpp_space_within_lambda_brackets=false
+cpp_space_between_empty_lambda_brackets=false
+cpp_space_before_comma=false
+cpp_space_after_comma=true
+cpp_space_remove_around_member_operators=true
+cpp_space_before_inheritance_colon=true
+cpp_space_before_constructor_colon=true
+cpp_space_remove_before_semicolon=true
+cpp_space_after_semicolon=false
+cpp_space_remove_around_unary_operator=true
+cpp_space_around_binary_operator=insert
+cpp_space_around_assignment_operator=insert
+cpp_space_pointer_reference_alignment=left
+cpp_space_around_ternary_operator=insert
+cpp_wrap_preserve_blocks=one_liners
--- a/frontend/text-editor/.gitignore
+++ b/frontend/text-editor/.gitignore
@ -0,0 +1,342 @@
+# Created by https://www.toptal.com/developers/gitignore/api/linux,osx,windows,vim,emacs,sublimetext,visualstudiocode,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=linux,osx,windows,vim,emacs,sublimetext,visualstudiocode,node
+
+### Emacs ###
+# -*- mode: gitignore; -*-
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+
+# Org-mode
+.org-id-locations
+*_archive
+
+# flymake-mode
+*_flymake.*
+
+# eshell files
+/eshell/history
+/eshell/lastdir
+
+# elpa packages
+/elpa/
+
+# reftex files
+*.rel
+
+# AUCTeX auto folder
+/auto/
+
+# cask packages
+.cask/
+dist/
+
+# Flycheck
+flycheck_*.el
+
+# server auth directory
+/server/
+
+# projectiles files
+.projectile
+
+# directory configuration
+.dir-locals.el
+
+# network security
+/network-security.data
+
+
+### Linux ###
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### OSX ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### SublimeText ###
+# Cache files for Sublime Text
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+
+# Workspace files are user-specific
+*.sublime-workspace
+
+# Project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using Sublime Text
+# *.sublime-project
+
+# SFTP configuration file
+sftp-config.json
+sftp-config-alt*.json
+
+# Package control specific files
+Package Control.last-run
+Package Control.ca-list
+Package Control.ca-bundle
+Package Control.system-ca-bundle
+Package Control.cache/
+Package Control.ca-certs/
+Package Control.merged-ca-bundle
+Package Control.user-ca-bundle
+oscrypto-ca-bundle.crt
+bh_unicode_properties.cache
+
+# Sublime-github package stores a github token in this file
+# https://packagecontrol.io/packages/sublime-github
+GitHub.sublime-settings
+
+### Vim ###
+# Swap
+[._]*.s[a-v][a-z]
+!*.svg  # comment out if you don't need vector files
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+Sessionx.vim
+
+# Temporary
+.netrwhist
+# Auto-generated tag files
+tags
+# Persistent undo
+[._]*.un~
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/linux,osx,windows,vim,emacs,sublimetext,visualstudiocode,node
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+vite.config.js.timestamp*
--- a/frontend/text-editor/.prettierrc
+++ b/frontend/text-editor/.prettierrc
@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false
+}
--- a/frontend/text-editor/README.md
+++ b/frontend/text-editor/README.md
@ -0,0 +1,106 @@
+# Penpot Text Editor
+
+## How to run it
+
+### Development
+
+To start the development environment run:
+
+```sh
+yarn run dev
+```
+
+### Testing
+
+For running unit tests and running coverage:
+
+```sh
+yarn run test
+yarn run coverage
+```
+
+> If you want, you can run the [vitest](https://vitest.dev/) UI by running:
+
+```sh
+yarn run test:ui
+```
+
+## How to build it
+
+The editor can be built and updated inside Penpot using the following command:
+
+```sh
+PENPOT_SOURCE_PATH=/path/to/penpot/repository yarn build:update
+```
+
+This command is going to search for the file located in `frontend/src/app/main/ui/workspace/shapes/text/new_editor/TextEditor.js` and update it.
+
+## How it works?
+
+The text editor divides the content in three elements: `root`, `paragraph` and `inline`. An `inline` in terms of content is a styled element that it is displayed in a line inside a block and an `inline` only can have one child (a Text node). A `paragraph` is a **block** element that can contain multiple `inline`s (**inline** elements).
+
+```html
+<div data-itype="root">
+  <div data-itype="paragraph">
+    <span data-itype="inline">Hello, </span>
+    <span data-itype="inline" style="font-weight: bold">World!</span>
+  </div>
+</div>
+```
+
+This way we only need to deal with a structure like this, where circular nodes are `HTMLElement`s and square nodes are `Text`. Also with an structure like this we have a predictable and ordered tree where we can find our position easily to do any operation (remove, insert, replace, etc).
+
+```mermaid
+flowchart TB
+  root((root)) --> paragraph((paragraph))
+  paragraph --> inline_1((inline))
+  paragraph --> inline_2((inline))
+  inline_1 --> text_1[Hello, ]
+  inline_2 --> text_2[World!]
+```
+
+This is compatible with the way Penpot stores text content.
+
+```mermaid
+flowchart TB
+  root((root)) --> paragraph-set((paragraph-set))
+  paragraph-set --> paragraph((paragraph))
+  paragraph --> text((text))
+```
+
+## How the code is organized?
+
+- `editor`: contains everything related to the TextEditor. Where `TextEditor.js` is the main file where all the basic code of the editor is handled. This has been designed so that in the future, when the Web Components API is more stable and has features such as handling selection events within shadow roots we will be able to update this class with little effort.
+- `editor/clipboard`: Event handlers for clipboard events.
+- `editor/commands`: Event handlers for input events (commands) that modifies the content of the TextEditor.
+- `editor/content`: Code related to handling elements like text nodes, paragraphs, line breaks, etc. This are a series of utility functions that can perform some verifications and mutations on DOM nodes.
+- `editor/controllers`: There are two controllers; `ChangeController` that handles when a change in the content should be notified and `SelectionController` that handles operations on selections and text, this is where all the mutations on DOM nodes are performed.
+
+## Implementation
+
+Everything is implemented in JavaScript using `beforeinput` and `InputEvent` for the user events. `blur` and `focus` are used to handle imposter selections.
+
+### Why imposter selections?
+
+Normally when you click on another UI element, the current selection is replaced by the selection of the new UI element.
+
+## References
+
+- [InputEvent](https://w3c.github.io/input-events/#interface-InputEvent): the main event used for handling user input.
+- [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection): for handling selections.
+- [Range](https://developer.mozilla.org/en-US/docs/Web/API/Range): for handling range selections. <sup>1</sup>
+- [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node): for operator functions like `compareDocumentPosition` or `nodeType`.
+- [Text](https://developer.mozilla.org/en-US/docs/Web/API/Range): for operator functions like `splitText`.
+- [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element): for operator functions like `after`, `before`, `append`, `remove`, `prepend`, etc.
+
+<sup>1</sup>: Firefox is the only browser right now (2024-07-08) that has support for multiple selection ranges so we have to deal with this special case removing old ranges.
+
+## For future reference
+
+In a near future maybe we could take a lot at the [EditContext API](https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API).
+
+## FAQ
+
+### Sometimes I receive 'TypeError: Cannot read from private field'
+
+Sometimes, when you update the TextEditor source code, this exception could raise because shadow-cljs updated the code but keeps a reference to the old instance of the text editor, so the new code tries to read a private field from an old instance.
--- a/frontend/text-editor/editor/Event.js
+++ b/frontend/text-editor/editor/Event.js
@ -0,0 +1,32 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Adds a series of listeners.
+ *
+ * @param {EventTarget} target
+ * @param {Object.<string, Function>} object
+ * @param {EventListenerOptions} [options]
+ */
+export function addEventListeners(target, object, options) {
+  Object.entries(object).forEach(([type, listener]) =>
+    target.addEventListener(type, listener, options)
+  );
+}
+
+/**
+ * Removes a series of listeners.
+ *
+ * @param {EventTarget} target
+ * @param {Object.<string, Function>} object
+ */
+export function removeEventListeners(target, object) {
+  Object.entries(object).forEach(([type, listener]) =>
+    target.removeEventListener(type, listener)
+  );
+}
--- a/frontend/text-editor/editor/Event.test.js
+++ b/frontend/text-editor/editor/Event.test.js
@ -0,0 +1,29 @@
+import { describe, test, expect, vi } from 'vitest';
+import { addEventListeners, removeEventListeners } from './Event';
+
+/* @vitest-environment jsdom */
+describe('Event', () => {
+  test('addEventListeners should add event listeners to an element using an object', () => {
+    const clickSpy = vi.fn();
+    const events = {
+      click: clickSpy
+    }
+    const element = document.createElement('div');
+    addEventListeners(element, events);
+    element.dispatchEvent(new Event('click'));
+    expect(clickSpy).toBeCalled();
+  });
+
+  test('removeEventListeners should remove event listeners to an element using an object', () => {
+    const clickSpy = vi.fn();
+    const events = {
+      click: clickSpy,
+    };
+    const element = document.createElement("div");
+    addEventListeners(element, events);
+    element.dispatchEvent(new Event("click"));
+    removeEventListeners(element, events);
+    element.dispatchEvent(new Event('click'))
+    expect(clickSpy).toBeCalledTimes(1);
+  })
+});
--- a/frontend/text-editor/editor/TextEditor.css
+++ b/frontend/text-editor/editor/TextEditor.css
@ -0,0 +1,65 @@
+::selection {
+  background-color: red;
+}
+
+.selection-imposter-rect {
+  background-color: red;
+  position: absolute;
+}
+
+.text-editor-selection-imposter {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.text-editor-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.text-editor-content {
+  height: 100%;
+  font-family: sourcesanspro;
+
+  outline: none;
+  user-select: text;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+
+  caret-color: black;
+
+  /* color: transparent; */
+  color: black;
+
+  div {
+    line-height: inherit;
+    user-select: text;
+
+    white-space: pre;
+    margin: 0px;
+    /* font-size: 0px; */
+  }
+
+  span {
+    line-break: auto;
+    line-height: inherit;
+  }
+}
+
+.align-top[data-itype="root"] {
+  justify-content: flex-start;
+}
+
+.align-center[data-itype="root"] {
+  justify-content: center;
+}
+
+.align-bottom[data-itype="root"] {
+  justify-content: flex-end;
+}
--- a/frontend/text-editor/editor/TextEditor.js
+++ b/frontend/text-editor/editor/TextEditor.js
@ -0,0 +1,545 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import clipboard from "./clipboard/index.js";
+import commands from "./commands/index.js";
+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 { createRoot, createEmptyRoot } from './content/dom/Root.js';
+import { createParagraph, fixParagraph, getParagraph } from './content/dom/Paragraph.js';
+import { createEmptyInline, createInline } from './content/dom/Inline.js';
+import { isLineBreak } from './content/dom/LineBreak.js';
+import LayoutType from './layout/LayoutType.js';
+
+/**
+ * Text Editor.
+ */
+export class TextEditor extends EventTarget {
+  /**
+   * Element content editable to be used by the TextEditor
+   *
+   * @type {HTMLElement}
+   */
+  #element = null;
+
+  /**
+   * Map/Dictionary of events.
+   *
+   * @type {Object.<string, Function>}
+   */
+  #events = null;
+
+  /**
+   * Root element that will contain the content.
+   *
+   * @type {HTMLElement}
+   */
+  #root = null;
+
+  /**
+   * Change controller controls when we should notify changes.
+   *
+   * @type {ChangeController}
+   */
+  #changeController = null;
+
+  /**
+   * Selection controller controls the current/saved selection.
+   *
+   * @type {SelectionController}
+   */
+  #selectionController = null;
+
+  /**
+   * Selection imposter keeps selection elements.
+   *
+   * @type {HTMLElement}
+   */
+  #selectionImposterElement = null;
+
+  /**
+   * Style defaults.
+   *
+   * @type {Object.<string, *>}
+   */
+  #styleDefaults = null;
+
+  /**
+   * FIXME: There is a weird case where the events
+   * `beforeinput` and `input` have different `data` when
+   * characters are deleted when the input type is
+   * `insertCompositionText`.
+   */
+  #fixInsertCompositionText = false;
+
+  /**
+   * Constructor.
+   *
+   * @param {HTMLElement} element
+   */
+  constructor(element, options) {
+    super();
+    if (!(element instanceof HTMLElement))
+      throw new TypeError("Invalid text editor element");
+
+    this.#element = element;
+    this.#selectionImposterElement = options?.selectionImposterElement;
+    this.#events = {
+      blur: this.#onBlur,
+      focus: this.#onFocus,
+
+      paste: this.#onPaste,
+      cut: this.#onCut,
+      copy: this.#onCopy,
+
+      beforeinput: this.#onBeforeInput,
+      input: this.#onInput,
+    };
+    this.#styleDefaults = options?.styleDefaults;
+    this.#setup(options);
+  }
+
+  /**
+   * Setups editor properties.
+   */
+  #setupElementProperties() {
+    if (!this.#element.isContentEditable) {
+      this.#element.contentEditable = "true";
+      // In `jsdom` it isn't enough to set the attribute 'contentEditable'
+      // to `true` to work.
+      // FIXME: Remove this when `jsdom` implements this interface.
+      if (!this.#element.isContentEditable) {
+        this.#element.setAttribute("contenteditable", "true");
+      }
+    }
+    if (this.#element.spellcheck) this.#element.spellcheck = false;
+    if (this.#element.autocapitalize) this.#element.autocapitalize = false;
+    if (!this.#element.autofocus) this.#element.autofocus = true;
+    if (!this.#element.role || this.#element.role !== "textbox")
+      this.#element.role = "textbox";
+    if (this.#element.ariaAutoComplete) this.#element.ariaAutoComplete = false;
+    if (!this.#element.ariaMultiLine) this.#element.ariaMultiLine = true;
+    this.#element.dataset.itype = "editor";
+  }
+
+  /**
+   * Setups the root element.
+   */
+  #setupRoot() {
+    this.#root = createEmptyRoot(this.#styleDefaults);
+    this.#element.appendChild(this.#root);
+  }
+
+  /**
+   * Dispatchs a `change` event.
+   *
+   * @param {CustomEvent} e
+   * @returns {void}
+   */
+  #onChange = (e) => this.dispatchEvent(new e.constructor(e.type, e));
+
+  /**
+   * Dispatchs a `stylechange` event.
+   *
+   * @param {CustomEvent} e
+   * @returns {void}
+   */
+  #onStyleChange = (e) => {
+    if (this.#selectionImposterElement.children.length > 0) {
+      // We need to recreate the selection imposter when we've
+      // already have one.
+      this.#createSelectionImposter();
+    }
+    this.dispatchEvent(new e.constructor(e.type, e));
+  };
+
+  /**
+   * Setups the elements, the properties and the
+   * initial content.
+   */
+  #setup(options) {
+    this.#setupElementProperties();
+    this.#setupRoot();
+    this.#changeController = new ChangeController(this);
+    this.#changeController.addEventListener("change", this.#onChange);
+    this.#selectionController = new SelectionController(
+      this,
+      document.getSelection(),
+      options
+    );
+    this.#selectionController.addEventListener(
+      "stylechange",
+      this.#onStyleChange
+    );
+    addEventListeners(this.#element, this.#events, {
+      capture: true,
+    });
+  }
+
+  /**
+   * Creates the selection imposter.
+   */
+  #createSelectionImposter() {
+    // We only create a selection imposter if there's any selection
+    // and if there is a selection imposter element to attach the
+    // rects.
+    if (
+      this.#selectionImposterElement &&
+      !this.#selectionController.isCollapsed
+    ) {
+      const rects = this.#selectionController.range?.getClientRects();
+      if (rects) {
+        const rect = this.#selectionImposterElement.getBoundingClientRect();
+        this.#selectionImposterElement.replaceChildren(
+          createSelectionImposterFromClientRects(rect, rects)
+        );
+      }
+    }
+  }
+
+  /**
+   * On blur we create a new FakeSelection if there's any.
+   *
+   * @param {FocusEvent} e
+   */
+  #onBlur = (e) => {
+    this.#changeController.notifyImmediately();
+    this.#selectionController.saveSelection();
+    this.#createSelectionImposter();
+    this.dispatchEvent(new FocusEvent(e.type, e));
+  };
+
+  /**
+   * On focus we should restore the FakeSelection from the current
+   * selection.
+   *
+   * @param {FocusEvent} e
+   */
+  #onFocus = (e) => {
+    this.#selectionController.restoreSelection();
+    if (this.#selectionImposterElement) {
+      this.#selectionImposterElement.replaceChildren();
+    }
+    this.dispatchEvent(new FocusEvent(e.type, e));
+  };
+
+  /**
+   * Event called when the user pastes some text into the
+   * editor.
+   *
+   * @param {ClipboardEvent} e
+   */
+  #onPaste = (e) => {
+    clipboard.paste(e, this, this.#selectionController);
+    this.#notifyLayout(LayoutType.FULL, null);
+  };
+
+  /**
+   * Event called when the user cuts some text from the
+   * editor.
+   *
+   * @param {ClipboardEvent} e
+   */
+  #onCut = (e) => clipboard.cut(e, this, this.#selectionController);
+
+  /**
+   * Event called when the user copies some text from the
+   * editor.
+   *
+   * @param {ClipboardEvent} e
+   */
+  #onCopy = (e) => clipboard.copy(e, this, this.#selectionController);
+
+  /**
+   * Event called before the DOM is modified.
+   *
+   * @param {InputEvent} e
+   */
+  #onBeforeInput = (e) => {
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+      return;
+    }
+
+    if (e.inputType === "insertCompositionText" && !e.data) {
+      e.preventDefault();
+      this.#fixInsertCompositionText = true;
+      return;
+    }
+
+    if (!(e.inputType in commands)) {
+      if (e.inputType !== "insertCompositionText") {
+        e.preventDefault();
+      }
+      return;
+    }
+
+    if (e.inputType in commands) {
+      const command = commands[e.inputType];
+      if (!this.#selectionController.startMutation()) {
+        return;
+      }
+      command(e, this, this.#selectionController);
+      const mutations = this.#selectionController.endMutation();
+      this.#notifyLayout(LayoutType.FULL, mutations);
+    }
+  };
+
+  /**
+   * Event called after the DOM is modified.
+   *
+   * @param {InputEvent} e
+   */
+  #onInput = (e) => {
+    if (e.inputType === "historyUndo" || e.inputType === "historyRedo") {
+      return;
+    }
+
+    if (e.inputType === "insertCompositionText" && this.#fixInsertCompositionText) {
+      e.preventDefault();
+      this.#fixInsertCompositionText = false;
+      if (e.data) {
+        this.#selectionController.fixInsertCompositionText();
+      }
+      return;
+    }
+
+    if (e.inputType === "insertCompositionText" && e.data) {
+      this.#notifyLayout(LayoutType.FULL, null);
+    }
+  };
+
+  /**
+   * Notifies that the edited texts needs layout.
+   *
+   * @param {'full'|'partial'} type
+   * @param {CommandMutations} mutations
+   */
+  #notifyLayout(type = LayoutType.FULL, mutations) {
+    this.dispatchEvent(
+      new CustomEvent("needslayout", {
+        detail: {
+          type: type,
+          mutations: mutations,
+        },
+      })
+    );
+  }
+
+  /**
+   * Root element that contains all the paragraphs.
+   *
+   * @type {HTMLDivElement}
+   */
+  get root() {
+    return this.#root;
+  }
+
+  set root(newRoot) {
+    const previousRoot = this.#root;
+    this.#root = newRoot;
+    previousRoot.replaceWith(newRoot);
+  }
+
+  /**
+   * Element that contains the root and that has the
+   * contenteditable attribute.
+   *
+   * @type {HTMLElement}
+   */
+  get element() {
+    return this.#element;
+  }
+
+  /**
+   * Returns true if the content is in an empty state.
+   *
+   * @type {boolean}
+   */
+  get isEmpty() {
+    return (
+      this.#root.children.length === 1 &&
+      this.#root.firstElementChild.children.length === 1 &&
+      isLineBreak(this.#root.firstElementChild.firstElementChild.firstChild)
+    );
+  }
+
+  /**
+   * Indicates the amount of paragraphs in the current content.
+   *
+   * @type {number}
+   */
+  get numParagraphs() {
+    return this.#root.children.length;
+  }
+
+  /**
+   * CSS Style declaration for the current inline. From here we
+   * can infer root, paragraph and inline declarations.
+   *
+   * @type {CSSStyleDeclaration}
+   */
+  get currentStyle() {
+    return this.#selectionController.currentStyle;
+  }
+
+  /**
+   * Focus the element
+   */
+  focus() {
+    return this.#element.focus();
+  }
+
+  /**
+   * Blurs the element
+   */
+  blur() {
+    return this.#element.blur();
+  }
+
+  /**
+   * Creates a new root.
+   *
+   * @param  {...any} args
+   * @returns {HTMLDivElement}
+   */
+  createRoot(...args) {
+    return createRoot(...args);
+  }
+
+  /**
+   * Creates a new paragraph.
+   *
+   * @param  {...any} args
+   * @returns {HTMLDivElement}
+   */
+  createParagraph(...args) {
+    return createParagraph(...args);
+  }
+
+  /**
+   * Creates a new inline from a string.
+   *
+   * @param {string} text
+   * @param {Object.<string,*>|CSSStyleDeclaration} styles
+   * @returns {HTMLSpanElement}
+   */
+  createInlineFromString(text, styles) {
+    if (text === "") {
+      return createEmptyInline(styles);
+    }
+    return createInline(new Text(text), styles);
+  }
+
+  /**
+   * Creates a new inline.
+   *
+   * @param  {...any} args
+   * @returns {HTMLSpanElement}
+   */
+  createInline(...args) {
+    return createInline(...args);
+  }
+
+  /**
+   * Applies the current styles to the selection or
+   * the current DOM node at the caret.
+   *
+   * @param {*} styles
+   */
+  applyStylesToSelection(styles) {
+    this.#selectionController.startMutation();
+    this.#selectionController.applyStyles(styles);
+    const mutations = this.#selectionController.endMutation();
+    this.#notifyLayout(LayoutType.FULL, mutations);
+    this.#changeController.notifyImmediately();
+    return this;
+  }
+
+  /**
+   * Selects all content.
+   */
+  selectAll() {
+    this.#selectionController.selectAll();
+    return this;
+  }
+
+  /**
+   * Moves cursor to end.
+   *
+   * @returns
+   */
+  cursorToEnd() {
+    this.#selectionController.cursorToEnd();
+    return this;
+  }
+
+  /**
+   * Disposes everything.
+   */
+  dispose() {
+    this.#changeController.removeEventListener("change", this.#onChange);
+    this.#changeController.dispose();
+    this.#changeController = null;
+    this.#selectionController.removeEventListener(
+      "stylechange",
+      this.#onStyleChange
+    );
+    this.#selectionController.dispose();
+    this.#selectionController = null;
+    removeEventListeners(this.#element, this.#events);
+    this.#element = null;
+    this.#root = null;
+  }
+}
+
+export function isEditor(instance) {
+  return (instance instanceof TextEditor);
+}
+
+/* Convenience function based API for Text Editor */
+export function getRoot(instance) {
+  if (isEditor(instance)) {
+    return instance.root;
+  } else {
+    return null;
+  }
+}
+
+export function setRoot(instance, root) {
+  if (isEditor(instance)) {
+    instance.root = root;
+  }
+
+  return instance;
+}
+
+export function create(element, options) {
+  return new TextEditor(element, {...options});
+}
+
+export function getCurrentStyle(instance) {
+  if (isEditor(instance)) {
+    return instance.currentStyle;
+  }
+}
+
+export function applyStylesToSelection(instance, styles) {
+  if (isEditor(instance)) {
+    return instance.applyStylesToSelection(styles);
+  }
+}
+
+export function dispose(instance) {
+  if (isEditor(instance)) {
+    instance.dispose();
+  }
+}
+
+export default TextEditor;
--- a/frontend/text-editor/editor/TextEditor.test.js
+++ b/frontend/text-editor/editor/TextEditor.test.js
@ -0,0 +1,100 @@
+import { describe, test, expect } from 'vitest'
+import { TextEditor } from './TextEditor'
+
+/* @vitest-environment jsdom */
+describe('TextEditor', () => {
+  test('Creating TextEditor without element should throw', () => {
+    expect(() => new TextEditor()).toThrowError('Invalid text editor element');
+  });
+
+  test('Creating TextEditor with element should success', () => {
+    expect(new TextEditor(document.createElement('div'))).toBeInstanceOf(TextEditor);
+  });
+
+  test('isEmpty should return true when editor is empty', () => {
+    const textEditor = new TextEditor(document.createElement("div"));
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    expect(textEditor.isEmpty).toBe(true);
+  });
+
+  test('Num paragraphs should return 1 when empty', () => {
+    const textEditor = new TextEditor(document.createElement("div"));
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    expect(textEditor.numParagraphs).toBe(1);
+  });
+
+  test('Num paragraphs should return the number of paragraphs', () => {
+    const textEditor = new TextEditor(document.createElement("div"));
+    textEditor.root = textEditor.createRoot([
+      textEditor.createParagraph([
+        textEditor.createInlineFromString('Hello, World!')
+      ]),
+      textEditor.createParagraph([
+        textEditor.createInlineFromString('')
+      ]),
+      textEditor.createParagraph([
+        textEditor.createInlineFromString('¡Hola, Mundo!')
+      ]),
+      textEditor.createParagraph([
+        textEditor.createInlineFromString('Hallo, Welt!')
+      ])
+    ]);
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    expect(textEditor.numParagraphs).toBe(4);
+  });
+
+  test('Disposing a TextEditor nullifies everything', () => {
+    const textEditor = new TextEditor(document.createElement("div"));
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    textEditor.dispose();
+    expect(textEditor.root).toBe(null);
+    expect(textEditor.element).toBe(null);
+  });
+
+  test('TextEditor focus should focus the contenteditable element', () => {
+    const textEditorElement = document.createElement("div");
+    document.body.appendChild(textEditorElement);
+    const textEditor = new TextEditor(textEditorElement);
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    textEditor.focus();
+    expect(document.activeElement).toBe(textEditor.element);
+  });
+
+  test("TextEditor blur should blur the contenteditable element", () => {
+    const textEditorElement = document.createElement("div");
+    document.body.appendChild(textEditorElement);
+    const textEditor = new TextEditor(textEditorElement);
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    textEditor.focus();
+    textEditor.blur();
+    expect(document.activeElement).not.toBe(textEditor.element);
+  });
+
+  test("TextEditor focus -> blur -> focus should restore old selection", () => {
+    const textEditorElement = document.createElement("div");
+    document.body.appendChild(textEditorElement);
+    const textEditor = new TextEditor(textEditorElement);
+    textEditor.root = textEditor.createRoot([
+      textEditor.createParagraph([
+        textEditor.createInlineFromString("Hello, World!")
+      ])
+    ]);
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    textEditor.focus();
+    textEditor.blur();
+    textEditor.focus();
+    expect(document.activeElement).toBe(textEditor.element);
+  });
+
+  test("TextEditor selectAll should select all the contenteditable", () => {
+    const selection = document.getSelection();
+    const textEditorElement = document.createElement("div");
+    document.body.appendChild(textEditorElement);
+    const textEditor = new TextEditor(textEditorElement);
+    expect(textEditor).toBeInstanceOf(TextEditor);
+    textEditor.focus();
+    textEditor.selectAll();
+    expect(document.activeElement).toBe(textEditor.element);
+    expect(selection.containsNode(textEditor.root));
+  });
+});
--- a/frontend/text-editor/editor/clipboard/copy.js
+++ b/frontend/text-editor/editor/clipboard/copy.js
@ -0,0 +1,19 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * This event is called when the user copies a text from the
+ * editor.
+ *
+ * TODO: We could transform `--fills` in here to CSS `color`, `background-image`,
+ * etc. to be more compatible with other applications.
+ *
+ * @param {ClipboardEvent} event
+ * @param {TextEditor} editor
+ */
+export function copy(event, editor) {}
--- a/frontend/text-editor/editor/clipboard/cut.js
+++ b/frontend/text-editor/editor/clipboard/cut.js
@ -0,0 +1,19 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * This event is called when the user copies a text from the
+ * editor.
+ *
+ * TODO: We could transform `--fills` in here to CSS `color`, `background-image`,
+ * etc. to be more compatible with other applications.
+ *
+ * @param {ClipboardEvent} event
+ * @param {TextEditor} editor
+ */
+export function cut(event, editor) {}
--- a/frontend/text-editor/editor/clipboard/index.js
+++ b/frontend/text-editor/editor/clipboard/index.js
@ -0,0 +1,17 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { copy } from "./copy.js";
+import { cut } from "./cut.js";
+import { paste } from "./paste.js";
+
+export default {
+  copy,
+  cut,
+  paste,
+};
--- a/frontend/text-editor/editor/clipboard/paste.js
+++ b/frontend/text-editor/editor/clipboard/paste.js
@ -0,0 +1,45 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { mapContentFragmentFromHTML, mapContentFragmentFromString } from '../content/dom/Content.js';
+
+/**
+ * When the user pastes some HTML, what we do is generate
+ * a new DOM based on what the user pasted and then we
+ * insert it in the appropiate part (see `insertFromPaste` command).
+ *
+ * @param {ClipboardEvent} event
+ * @param {TextEditor} editor
+ * @param {SelectionController} selectionController
+ * @returns {void}
+ */
+export function paste(event, editor, selectionController) {
+  // We need to prevent default behavior
+  // because we don't allow any HTML to
+  // be pasted.
+  event.preventDefault();
+
+  let fragment = null;
+  if (event.clipboardData.types.includes("text/html")) {
+    const html = event.clipboardData.getData("text/html");
+    fragment = mapContentFragmentFromHTML(html, selectionController.currentStyle);
+  } else if (event.clipboardData.types.includes("text/plain")) {
+    const plain = event.clipboardData.getData("text/plain");
+    fragment = mapContentFragmentFromString(plain, selectionController.currentStyle);
+  }
+
+  if (!fragment) {
+    return;
+  }
+
+  if (selectionController.isCollapsed) {
+    selectionController.insertPaste(fragment);
+  } else {
+    selectionController.replaceWithPaste(fragment);
+  }
+}
--- a/frontend/text-editor/editor/commands/CommandMutations.js
+++ b/frontend/text-editor/editor/commands/CommandMutations.js
@ -0,0 +1,66 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Command mutations
+ */
+export class CommandMutations {
+  #added = new Set();
+  #removed = new Set();
+  #updated = new Set();
+
+  constructor(added, updated, removed) {
+    if (added && Array.isArray(added)) this.#added = new Set(added);
+    if (updated && Array.isArray(updated)) this.#updated = new Set(updated);
+    if (removed && Array.isArray(removed)) this.#removed = new Set(removed);
+  }
+
+  get added() {
+    return this.#added;
+  }
+
+  get removed() {
+    return this.#removed;
+  }
+
+  get updated() {
+    return this.#updated;
+  }
+
+  clear() {
+    this.#added.clear();
+    this.#removed.clear();
+    this.#updated.clear();
+  }
+
+  dispose() {
+    this.#added.clear();
+    this.#added = null;
+    this.#removed.clear();
+    this.#removed = null;
+    this.#updated.clear();
+    this.#updated = null;
+  }
+
+  add(node) {
+    this.#added.add(node);
+    return this;
+  }
+
+  remove(node) {
+    this.#removed.add(node);
+    return this;
+  }
+
+  update(node) {
+    this.#updated.add(node);
+    return this;
+  }
+}
+
+export default CommandMutations;
--- a/frontend/text-editor/editor/commands/CommandMutations.test.js
+++ b/frontend/text-editor/editor/commands/CommandMutations.test.js
@ -0,0 +1,71 @@
+import { describe, test, expect } from 'vitest';
+import CommandMutations from './CommandMutations';
+
+describe("CommandMutations", () => {
+  test("should create a new CommandMutations", () => {
+    const mutations = new CommandMutations();
+    expect(mutations).toHaveProperty("added");
+    expect(mutations).toHaveProperty("updated");
+    expect(mutations).toHaveProperty("removed");
+  });
+
+  test("should create an initialized new CommandMutations", () => {
+    const mutations = new CommandMutations([1], [2], [3]);
+    expect(mutations.added.size).toBe(1);
+    expect(mutations.updated.size).toBe(1);
+    expect(mutations.removed.size).toBe(1);
+    expect(mutations.added.has(1)).toBe(true);
+    expect(mutations.updated.has(2)).toBe(true);
+    expect(mutations.removed.has(3)).toBe(true);
+  });
+
+  test("should add an added node to a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.add(1);
+    expect(mutations.added.has(1)).toBe(true);
+  });
+
+  test("should add an updated node to a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.update(1);
+    expect(mutations.updated.has(1)).toBe(true);
+  });
+
+  test("should add an removed node to a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.remove(1);
+    expect(mutations.removed.has(1)).toBe(true);
+  });
+
+  test("should clear a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.add(1);
+    mutations.update(2);
+    mutations.remove(3);
+    expect(mutations.added.has(1)).toBe(true);
+    expect(mutations.added.size).toBe(1);
+    expect(mutations.updated.has(2)).toBe(true);
+    expect(mutations.updated.size).toBe(1);
+    expect(mutations.removed.has(3)).toBe(true);
+    expect(mutations.removed.size).toBe(1);
+
+    mutations.clear();
+    expect(mutations.added.size).toBe(0);
+    expect(mutations.added.has(1)).toBe(false);
+    expect(mutations.updated.size).toBe(0);
+    expect(mutations.updated.has(1)).toBe(false);
+    expect(mutations.removed.size).toBe(0);
+    expect(mutations.removed.has(1)).toBe(false);
+  });
+
+  test("should dispose a CommandMutations", () => {
+    const mutations = new CommandMutations();
+    mutations.add(1);
+    mutations.update(2);
+    mutations.remove(3);
+    mutations.dispose();
+    expect(mutations.added).toBe(null);
+    expect(mutations.updated).toBe(null);
+    expect(mutations.removed).toBe(null);
+  })
+});
--- a/frontend/text-editor/editor/commands/deleteByCut.js
+++ b/frontend/text-editor/editor/commands/deleteByCut.js
@ -0,0 +1,22 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Remove the current selection as part of a cut.
+ *
+ * @param {InputEvent} event
+ * @param {TextEditor} editor
+ * @param {SelectionController} selectionController
+ */
+export function deleteByCut(event, editor, selectionController) {
+  event.preventDefault();
+  if (selectionController.isCollapsed) {
+    throw new Error("This should be impossible");
+  }
+  return selectionController.removeSelected();
+}
--- a/frontend/text-editor/editor/commands/deleteContentBackward.js
+++ b/frontend/text-editor/editor/commands/deleteContentBackward.js
@ -0,0 +1,53 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * delete the content directly before the caret position and this intention is
+ * not covered by another `inputType` or delete the selection with the
+ * selection collapsing to its start after the deletion.
+ *
+ * @param {InputEvent} event
+ * @param {TextEditor} editor
+ * @param {SelectionController} selectionController
+ */
+export function deleteContentBackward(event, editor, selectionController) {
+  event.preventDefault();
+  // If the editor is empty this is a no op.
+  if (editor.isEmpty) return;
+
+  // If not is collapsed AKA is a selection, then
+  // we removeSelected.
+  if (!selectionController.isCollapsed) {
+    return selectionController.removeSelected({ direction: 'backward' });
+  }
+
+  // If we're in a text node and the offset is
+  // greater than 0 (not at the start of the inline)
+  // we simple remove a character from the text.
+  if (selectionController.isTextFocus && selectionController.focusOffset > 0) {
+    return selectionController.removeBackwardText();
+
+  // If we're in a text node but we're at the end of the
+  // paragraph, we should merge the current paragraph
+  // with the following paragraph.
+  } else if (
+    selectionController.isTextFocus &&
+    selectionController.focusAtStart
+  ) {
+    return selectionController.mergeBackwardParagraph();
+
+  // If we're at an inline or a line break paragraph
+  // and there's more than one paragraph, then we should
+  // remove the next paragraph.
+  } else if (
+    selectionController.isInlineFocus ||
+    selectionController.isLineBreakFocus
+  ) {
+    return selectionController.removeBackwardParagraph();
+  }
+}
--- a/frontend/text-editor/editor/commands/deleteContentForward.js
+++ b/frontend/text-editor/editor/commands/deleteContentForward.js
@ -0,0 +1,54 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * delete the content directly after the caret position and this intention is not covered by
+ * another inputType or delete the selection with the selection collapsing to its end after the deletion
+ *
+ * @param {InputEvent} event
+ * @param {TextEditor} editor
+ * @param {SelectionController} selectionController
+ */
+export function deleteContentForward(event, editor, selectionController) {
+  event.preventDefault();
+  // If the editor is empty this is a no op.
+  if (editor.isEmpty) return;
+
+  // If not is collapsed AKA is a selection, then
+  // we removeSelected.
+  if (!selectionController.isCollapsed) {
+    return selectionController.removeSelected({ direction: "forward" });
+  }
+
+  // If we're in a text node and the offset is
+  // greater than 0 (not at the start of the inline)
+  // we simple remove a character from the text.
+  if (selectionController.isTextFocus
+   && selectionController.focusAtEnd) {
+    return selectionController.mergeForwardParagraph();
+
+  // If we're in a text node but we're at the end of the
+  // paragraph, we should merge the current paragraph
+  // with the following paragraph.
+  } else if (
+    selectionController.isTextFocus &&
+    selectionController.focusOffset >= 0
+  ) {
+    return selectionController.removeForwardText();
+
+  // If we're at an inline or a line break paragraph
+  // and there's more than one paragraph, then we should
+  // remove the next paragraph.
+  } else if (
+    (selectionController.isInlineFocus ||
+      selectionController.isLineBreakFocus) &&
+    editor.numParagraphs > 1
+  ) {
+    return selectionController.removeForwardParagraph();
+  }
+}
--- a/frontend/text-editor/editor/commands/index.js
+++ b/frontend/text-editor/editor/commands/index.js
@ -0,0 +1,21 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { insertText } from "./insertText.js";
+import { insertParagraph } from "./insertParagraph.js";
+import { deleteByCut } from "./deleteByCut.js";
+import { deleteContentBackward } from "./deleteContentBackward.js";
+import { deleteContentForward } from "./deleteContentForward.js";
+
+export default {
+  insertText,
+  insertParagraph,
+  deleteByCut,
+  deleteContentBackward,
+  deleteContentForward,
+};
--- a/frontend/text-editor/editor/commands/insertParagraph.js
+++ b/frontend/text-editor/editor/commands/insertParagraph.js
@ -0,0 +1,23 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Insert a paragraph
+ *
+ * @see https://w3c.github.io/input-events/#interface-InputEvent
+ * @param {InputEvent} event
+ * @param {TextEditor} editor
+ * @param {SelectionController} selectionController
+ */
+export function insertParagraph(event, editor, selectionController) {
+  event.preventDefault();
+  if (selectionController.isCollapsed) {
+    return selectionController.insertParagraph();
+  }
+  return selectionController.replaceWithParagraph();
+}
--- a/frontend/text-editor/editor/commands/insertText.js
+++ b/frontend/text-editor/editor/commands/insertText.js
@ -0,0 +1,34 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Insert typed plain text
+ *
+ * @see https://w3c.github.io/input-events/#interface-InputEvent
+ * @param {InputEvent} event
+ * @param {TextEditor} editor
+ * @param {SelectionController} selectionController
+ */
+export function insertText(event, editor, selectionController) {
+  event.preventDefault();
+  if (selectionController.isCollapsed) {
+    if (selectionController.isTextFocus) {
+      return selectionController.insertText(event.data);
+    } else if (selectionController.isLineBreakFocus) {
+      return selectionController.replaceLineBreak(event.data);
+    }
+  } else {
+    if (selectionController.isMultiParagraph) {
+      return selectionController.replaceParagraphs(event.data);
+    } else if (selectionController.isMultiInline) {
+      return selectionController.replaceInlines(event.data);
+    } else if (selectionController.isTextSame) {
+      return selectionController.replaceText(event.data);
+    }
+  }
+}
--- a/frontend/text-editor/editor/content/Text.js
+++ b/frontend/text-editor/editor/content/Text.js
@ -0,0 +1,104 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Throws if the passed value is not a valid offset value.
+ *
+ * @param {*} offset
+ * @throws {TypeError}
+ */
+function tryOffset(offset) {
+  if (!Number.isInteger(offset) || offset < 0)
+    throw new TypeError("Invalid offset");
+}
+
+/**
+ * Throws if the passed value is not a valid string.
+ *
+ * @param {*} str
+ * @throws {TypeError}
+ */
+function tryString(str) {
+  if (typeof str !== "string") throw new TypeError("Invalid string");
+}
+
+/**
+ * Inserts string into a string.
+ *
+ * @param {string} str
+ * @param {number} offset
+ * @param {string} text
+ * @returns {string}
+ */
+export function insertInto(str, offset, text) {
+  tryString(str);
+  tryOffset(offset);
+  tryString(text);
+  return str.slice(0, offset) + text + str.slice(offset);
+}
+
+/**
+ * Replaces a part of a string with a string.
+ *
+ * @param {string} str
+ * @param {number} startOffset
+ * @param {number} endOffset
+ * @param {string} text
+ * @returns {string}
+ */
+export function replaceWith(str, startOffset, endOffset, text) {
+  tryString(str);
+  tryOffset(startOffset);
+  tryOffset(endOffset);
+  tryString(text);
+  return str.slice(0, startOffset) + text + str.slice(endOffset);
+}
+
+/**
+ * Removes text backward from specified offset.
+ *
+ * @param {string} str
+ * @param {number} offset
+ * @returns {string}
+ */
+export function removeBackward(str, offset) {
+  tryString(str);
+  tryOffset(offset);
+  if (offset === 0) {
+    return str;
+  }
+  return str.slice(0, offset - 1) + str.slice(offset);
+}
+
+/**
+ * Removes text forward from specified offset.
+ *
+ * @param {string} str
+ * @param {number} offset
+ * @returns {string}
+ */
+export function removeForward(str, offset) {
+  tryString(str);
+  tryOffset(offset);
+  return str.slice(0, offset) + str.slice(offset + 1);
+}
+
+/**
+ * Removes a slice of text.
+ *
+ * @param {string} str
+ * @param {number} start
+ * @param {number} end
+ * @returns {string}
+ */
+export function removeSlice(str, start, end) {
+  tryString(str);
+  tryOffset(start);
+  tryOffset(end);
+  return str.slice(0, start) + str.slice(end);
+}
--- a/frontend/text-editor/editor/content/Text.test.js
+++ b/frontend/text-editor/editor/content/Text.test.js
@ -0,0 +1,46 @@
+import { describe, test, expect } from 'vitest'
+import { insertInto, removeBackward, removeForward, replaceWith } from './Text';
+
+describe("Text", () => {
+  test("* should throw when passed wrong parameters", () => {
+    expect(() => insertInto(Infinity, Infinity, Infinity)).toThrowError('Invalid string');
+    expect(() => insertInto('Hello', Infinity, Infinity)).toThrowError('Invalid offset');
+    expect(() => insertInto('Hello', 0, Infinity)).toThrowError('Invalid string');
+  });
+
+  test("`insertInto` should insert a string into an offset", () => {
+    expect(insertInto("Hell, World!", 4, "o")).toBe("Hello, World!");
+  });
+
+  test("`replaceWith` should replace a string into a string", () => {
+    expect(replaceWith("Hello, Something!", 7, 16, "World")).toBe("Hello, World!");
+  });
+
+  test("`removeBackward` should remove string backward from start (offset 0)", () => {
+    expect(removeBackward("Hello, World!", 0)).toBe("Hello, World!");
+  });
+
+  test("`removeForward` should remove string forward from start (offset 0)", () => {
+    expect(removeForward("Hello, World!", 0)).toBe("ello, World!");
+  });
+
+  test("`removeBackward` should remove string backward from end", () => {
+    expect(removeBackward("Hello, World!", "Hello, World!".length)).toBe(
+      "Hello, World"
+    );
+  });
+
+  test("`removeForward` should remove string forward from end", () => {
+    expect(removeForward("Hello, World!", "Hello, World!".length)).toBe(
+      "Hello, World!"
+    );
+  });
+
+  test("`removeBackward` should remove string backward from offset 6", () => {
+    expect(removeBackward("Hello, World!", 6)).toBe("Hello World!");
+  });
+
+  test("`removeForward` should remove string forward from offset 6", () => {
+    expect(removeForward("Hello, World!", 6)).toBe("Hello,World!");
+  });
+});
--- a/frontend/text-editor/editor/content/dom/Color.js
+++ b/frontend/text-editor/editor/content/dom/Color.js
@ -0,0 +1,78 @@
+/**
+ * Canvas used to retrieve colors as CSS hexadecimals.
+ *
+ * @type {OffscreenCanvas|HTMLCanvasElement}
+ */
+let canvas = null; // createCanvas(1, 1);
+
+/**
+ * Context used to retrieve colors as CSS hexadecimals.
+ *
+ * @type {CanvasRenderingContext2D}
+ */
+let context = null; // canvas.getContext("2d");
+
+/**
+ * Returns the canvas context.
+ *
+ * @returns {CanvasRenderingContext2D}
+ */
+function getContext() {
+  if (!canvas) {
+    canvas = createCanvas(1, 1);
+  }
+  if (!context) {
+    context = canvas.getContext("2d");
+  }
+  return context
+}
+
+/**
+ * Creates a new canvas element.
+ *
+ * @param {number} width
+ * @param {number} height
+ * @returns {OffscreenCanvas|HTMLCanvasElement}
+ */
+function createCanvas(width, height) {
+  if ("OffscreenCanvas" in globalThis) {
+    return new OffscreenCanvas(width, height);
+  }
+  return document.createElement("canvas");
+}
+
+/**
+ * Returns a byte representation as an hex.
+ *
+ * @param {number} byte
+ * @returns {string}
+ */
+export function getByteAsHex(byte) {
+  return byte.toString(16).padStart(2, "0");
+}
+
+/**
+ * Returns a color definition from a fillStyle color.
+ *
+ * @param {string} fillStyle
+ * @returns {[string, number]}
+ */
+export function getColor(fillStyle) {
+  const context = getContext();
+  context.fillStyle = fillStyle;
+  context.fillRect(0, 0, 1, 1);
+  const imageData = context.getImageData(0, 0, 1, 1);
+  const [r, g, b, a] = imageData.data;
+  return [`#${getByteAsHex(r)}${getByteAsHex(g)}${getByteAsHex(b)}`, a / 255.0];
+}
+
+/**
+ * Returns a fill from a fillStyle color.
+ *
+ * @param {string} fillStyle
+ * @returns {string}
+ */
+export function getFills(fillStyle) {
+  const [color, opacity] = getColor(fillStyle);
+  return `[["^ ","~:fill-color","${color}","~:fill-opacity",${opacity}]]`;
+}
--- a/frontend/text-editor/editor/content/dom/Content.js
+++ b/frontend/text-editor/editor/content/dom/Content.js
@ -0,0 +1,102 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { createInline } from "./Inline.js";
+import {
+  createEmptyParagraph,
+  createParagraph,
+  isLikeParagraph,
+} from "./Paragraph.js";
+import { isDisplayBlock, normalizeStyles } from "./Style.js";
+
+/**
+ * Maps any HTML into a valid content DOM element.
+ *
+ * @param {Document} document
+ * @param {HTMLElement} root
+ * @param {CSSStyleDeclaration} [styleDefaults]
+ * @returns {DocumentFragment}
+ */
+export function mapContentFragmentFromDocument(document, root, styleDefaults) {
+  const nodeIterator = document.createNodeIterator(
+    root,
+    NodeFilter.SHOW_TEXT
+  );
+  const fragment = document.createDocumentFragment();
+
+  let currentParagraph = null;
+  let currentNode = nodeIterator.nextNode();
+  while (currentNode) {
+    // We cannot call document.defaultView because it is `null`.
+    const currentStyle = normalizeStyles(currentNode, styleDefaults);
+    if (
+      isDisplayBlock(currentNode.parentElement.style) ||
+      isDisplayBlock(currentStyle) ||
+      isLikeParagraph(currentNode.parentElement)
+    ) {
+      if (currentParagraph) {
+        fragment.appendChild(currentParagraph);
+      }
+      currentParagraph = createParagraph(undefined, currentStyle);
+    } else {
+      if (currentParagraph === null) {
+        currentParagraph = createParagraph(undefined, currentStyle);
+      }
+    }
+
+    currentParagraph.appendChild(
+      createInline(new Text(currentNode.nodeValue), currentStyle)
+    );
+
+    currentNode = nodeIterator.nextNode();
+  }
+
+  fragment.appendChild(currentParagraph);
+  return fragment;
+}
+
+/**
+ * Maps any HTML into a valid content DOM element.
+ *
+ * @param {string} html
+ * @param {CSSStyleDeclaration} [styleDefaults]
+ * @returns {DocumentFragment}
+ */
+export function mapContentFragmentFromHTML(html, styleDefaults) {
+  const parser = new DOMParser();
+  const htmlDocument = parser.parseFromString(html, "text/html");
+  return mapContentFragmentFromDocument(
+    htmlDocument,
+    htmlDocument.documentElement,
+    styleDefaults
+  );
+}
+
+/**
+ * Maps a plain text into a valid content DOM element.
+ *
+ * @param {string} string
+ * @param {CSSStyleDeclaration} [styleDefaults]
+ * @returns {DocumentFragment}
+ */
+export function mapContentFragmentFromString(string, styleDefaults) {
+  const lines = string.replace(/\r/g, "").split("\n");
+  const fragment = document.createDocumentFragment();
+  for (const line of lines) {
+    if (line === "") {
+      fragment.appendChild(createEmptyParagraph(styleDefaults));
+    } else {
+      fragment.appendChild(
+        createParagraph([
+          createInline(new Text(line), styleDefaults)
+        ], styleDefaults)
+      );
+    }
+  }
+  return fragment;
+}
--- a/frontend/text-editor/editor/content/dom/Content.test.js
+++ b/frontend/text-editor/editor/content/dom/Content.test.js
@ -0,0 +1,91 @@
+import { describe, test, expect } from 'vitest';
+import { mapContentFragmentFromHTML, mapContentFragmentFromString } from './Content.js';
+
+/* @vitest-environment jsdom */
+describe('Content', () => {
+  test("mapContentFragmentFromHTML should return a valid content for the editor", () => {
+    const inertElement = document.createElement("div");
+    const contentFragment = mapContentFragmentFromHTML(
+      "<div>Hello, World!</div>",
+      inertElement.style
+    );
+    expect(contentFragment).toBeInstanceOf(DocumentFragment);
+    expect(contentFragment.children).toHaveLength(1);
+    expect(contentFragment.firstElementChild).toBeInstanceOf(HTMLDivElement);
+    expect(contentFragment.firstElementChild.firstElementChild).toBeInstanceOf(
+      HTMLSpanElement
+    );
+    expect(contentFragment.firstElementChild.firstElementChild.firstChild).toBeInstanceOf(
+      Text
+    );
+    expect(contentFragment.textContent).toBe("Hello, World!");
+  });
+
+  test("mapContentFragmentFromHTML should return a valid content for the editor (multiple inlines)", () => {
+    const inertElement = document.createElement("div");
+    const contentFragment = mapContentFragmentFromHTML(
+      "<div>Hello,<br/><span> World!</span><br/></div>",
+      inertElement.style
+    );
+    expect(contentFragment).toBeInstanceOf(DocumentFragment);
+    expect(contentFragment.children).toHaveLength(1);
+    expect(contentFragment.firstElementChild).toBeInstanceOf(HTMLDivElement);
+    expect(contentFragment.firstElementChild.children).toHaveLength(2);
+    expect(contentFragment.firstElementChild.firstElementChild).toBeInstanceOf(
+      HTMLSpanElement
+    );
+    expect(contentFragment.firstElementChild.firstElementChild.firstChild).toBeInstanceOf(
+      Text
+    );
+    expect(contentFragment.textContent).toBe("Hello, World!");
+  });
+
+  test("mapContentFragmentFromHTML should return a valid content for the editor (multiple paragraphs)", () => {
+    const paragraphs = [
+      "Lorem ipsum",
+      "Dolor sit amet",
+      "Sed iaculis blandit odio ornare sagittis.",
+    ];
+    const inertElement = document.createElement("div");
+    const contentFragment = mapContentFragmentFromHTML(
+      "<div>Lorem ipsum</div><div>Dolor sit amet</div><div><br/></div><div>Sed iaculis blandit odio ornare sagittis.</div>",
+      inertElement.style
+    );
+    expect(contentFragment).toBeInstanceOf(DocumentFragment);
+    expect(contentFragment.children).toHaveLength(3);
+    for (let index = 0; index < contentFragment.children.length; index++) {
+      expect(contentFragment.children.item(index)).toBeInstanceOf(HTMLDivElement);
+      expect(contentFragment.children.item(index).firstElementChild).toBeInstanceOf(
+        HTMLSpanElement
+      );
+      expect(
+        contentFragment.children.item(index).firstElementChild.firstChild
+      ).toBeInstanceOf(Text);
+      expect(contentFragment.children.item(index).textContent).toBe(paragraphs[index]);
+    }
+    expect(contentFragment.textContent).toBe("Lorem ipsumDolor sit ametSed iaculis blandit odio ornare sagittis.");
+  });
+
+  test("mapContentFragmentFromString should return a valid content for the editor", () => {
+    const contentFragment = mapContentFragmentFromString(
+      "Hello, \nWorld!"
+    );
+    expect(contentFragment).toBeInstanceOf(DocumentFragment);
+    expect(contentFragment.children).toHaveLength(2);
+    expect(contentFragment.children.item(0)).toBeInstanceOf(HTMLDivElement);
+    expect(contentFragment.children.item(1)).toBeInstanceOf(HTMLDivElement);
+    expect(contentFragment.children.item(0).firstElementChild).toBeInstanceOf(
+      HTMLSpanElement
+    );
+    expect(contentFragment.children.item(0).firstElementChild.firstChild).toBeInstanceOf(
+      Text
+    );
+    expect(contentFragment.children.item(1).firstElementChild).toBeInstanceOf(
+      HTMLSpanElement
+    );
+    expect(
+      contentFragment.children.item(1).firstElementChild.firstChild
+    ).toBeInstanceOf(Text);
+    expect(contentFragment.textContent).toBe("Hello, World!");
+  });
+});
--- a/frontend/text-editor/editor/content/dom/Element.js
+++ b/frontend/text-editor/editor/content/dom/Element.js
@ -0,0 +1,98 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { setStyles } from "./Style.js";
+
+/**
+ * @typedef {Object} CreateElementOptions
+ * @property {Object.<string,*>} [attributes]
+ * @property {Object.<string,*>} [data]
+ * @property {Object.<string,*>|CSSStyleDeclaration} [styles]
+ * @property {Array<[string,?string]>} [allowedStyles]
+ * @property {Array|Node} [children]
+ */
+
+/**
+ * Creates a new random id to identify content nodes.
+ *
+ * @returns {string}
+ */
+export function createRandomId() {
+  return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36);
+}
+
+/**
+ * Creates a new HTML element.
+ *
+ * @param {string} tag
+ * @param {*} options
+ * @returns {HTMLElement}
+ */
+export function createElement(tag, options) {
+  const element = document.createElement(tag);
+  if (options?.attributes) {
+    Object.entries(options.attributes).forEach(([name, value]) =>
+      element.setAttribute(name, value)
+    );
+  }
+  if (options?.data) {
+    Object.entries(options.data).forEach(
+      ([name, value]) => (element.dataset[name] = value)
+    );
+  }
+  if (options?.styles && options?.allowedStyles) {
+    setStyles(element, options.allowedStyles, options.styles);
+  }
+  if (options?.children) {
+    if (Array.isArray(options.children)) {
+      element.append(...options.children);
+    } else {
+      element.appendChild(options.children);
+    }
+  }
+  return element;
+}
+
+/**
+ * Returns true if passed node is an element.
+ *
+ * @param {Node} element
+ * @param {string} nodeName
+ * @returns {boolean}
+ */
+export function isElement(element, nodeName) {
+  return (
+    element.nodeType === Node.ELEMENT_NODE &&
+    element.nodeName === nodeName.toUpperCase()
+  );
+}
+
+/**
+ * Returns true if the specified offset is at the start of the element.
+ *
+ * @param {Node} node
+ * @param {number} offset
+ * @returns {boolean}
+ */
+export function isOffsetAtStart(node, offset) {
+  return offset === 0;
+}
+
+/**
+ * Returns true if the specified offset is at the end of the element.
+ *
+ * @param {Node} node
+ * @param {number} offset
+ * @returns {boolean}
+ */
+export function isOffsetAtEnd(node, offset) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.nodeValue.length === offset;
+  }
+  return true;
+}
--- a/frontend/text-editor/editor/content/dom/Element.test.js
+++ b/frontend/text-editor/editor/content/dom/Element.test.js
@ -0,0 +1,108 @@
+import { describe, test, expect } from "vitest";
+import { createElement, isElement, createRandomId, isOffsetAtStart, isOffsetAtEnd } from "./Element.js";
+
+/* @vitest-environment jsdom */
+describe("Element", () => {
+  test("createRandomId should create a new random id", () => {
+    const randomId = createRandomId();
+    expect(typeof randomId).toBe('string');
+    expect(randomId.length).toBeGreaterThan(0);
+    expect(randomId.length).toBeLessThan(12);
+  });
+
+  test("createElement should create a new element", () => {
+    const element = createElement("div");
+    expect(element.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.nodeName).toBe("DIV");
+  });
+
+  test("createElement should create a new element with attributes", () => {
+    const element = createElement("div", {
+      attributes: {
+        "aria-multiline": true,
+        "role": "textbox"
+      }
+    });
+    expect(element.ariaMultiLine).toBe("true");
+    expect(element.role).toBe("textbox");
+  });
+
+  test("createElement should create a new element with data- properties", () => {
+    const element = createElement("div", {
+      data: {
+        itype: "root"
+      }
+    });
+    expect(element.dataset.itype).toBe("root");
+  });
+
+  test("createElement should create a new element with styles from an object", () => {
+    const element = createElement("div", {
+      styles: {
+        "text-decoration": "underline",
+      },
+      allowedStyles: [["text-decoration"]]
+    });
+    expect(element.style.textDecoration).toBe("underline");
+  });
+
+  test("createElement should create a new element with a child", () => {
+    const element = createElement("div", {
+      children: new Text("Hello, World!")
+    });
+    expect(element.textContent).toBe("Hello, World!");
+  });
+
+  test("createElement should create a new element with children", () => {
+    const element = createElement("div", {
+      children: [
+        createElement("div", {
+          children: [
+            createElement("div", {
+              children: new Text("Hello, World!")
+            })
+          ]
+        })
+      ],
+    });
+    expect(element.textContent).toBe("Hello, World!");
+    expect(element.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.firstChild.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.firstChild.firstChild.firstChild.nodeType).toBe(Node.TEXT_NODE);
+  });
+
+  test("isElement returns true if the passed element is the expected element", () => {
+    const br = createElement("br");
+    expect(isElement(br, "br")).toBe(true);
+    const div = createElement("div");
+    expect(isElement(div, "div")).toBe(true);
+    const text = new Text("Hello, World!");
+    expect(isElement(text, "text")).toBe(false);
+  });
+
+  test("isOffsetAtStart should return true when offset is 0", () => {
+    const element = createElement('span', {
+      children: new Text("Hello")
+    })
+    expect(isOffsetAtStart(element, 0)).toBe(true);
+  });
+
+  test("isOffsetAtEnd should return true when offset is the length of the text content", () => {
+    const element = createElement("span", {
+      children: new Text("Hello"),
+    });
+    expect(isOffsetAtEnd(element, 5)).toBe(true);
+  });
+
+  test("isOffsetAtEnd should return true when the node is a Text and offset is the length of the node", () => {
+    const element = new Text("Hello");
+    expect(isOffsetAtEnd(element, 5)).toBe(true);
+  });
+
+  test("isOffsetAtEnd should return true when node is an element", () => {
+    const element = createElement("span", {
+      children: createElement("br"),
+    });
+    expect(isOffsetAtEnd(element, 5)).toBe(true);
+  });
+});
--- a/frontend/text-editor/editor/content/dom/Inline.js
+++ b/frontend/text-editor/editor/content/dom/Inline.js
@ -0,0 +1,272 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import {
+  createElement,
+  isElement,
+  isOffsetAtStart,
+  isOffsetAtEnd,
+} from "./Element.js";
+import { createLineBreak, isLineBreak } from "./LineBreak.js";
+import { setStyles, mergeStyles } from "./Style.js";
+import { createRandomId } from "./Element.js";
+
+export const TAG = "SPAN";
+export const TYPE = "inline";
+export const QUERY = `[data-itype="${TYPE}"]`;
+export const STYLES = [
+  ["--typography-ref-id"],
+  ["--typography-ref-file"],
+  ["--font-id"],
+  ["--font-variant-id"],
+  ["--fills"],
+  ["font-variant"],
+  ["font-family"],
+  ["font-size", "px"],
+  ["font-weight"],
+  ["font-style"],
+  ["line-height"],
+  ["letter-spacing", "px"],
+  ["text-decoration"],
+  ["text-transform"],
+];
+
+/**
+ * Returns true if passed node is an inline.
+ *
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isInline(node) {
+  if (!node) return false;
+  if (!isElement(node, TAG)) return false;
+  if (node.dataset.itype !== TYPE) return false;
+  return true;
+}
+
+/**
+ * Returns true if the passed node "behaves" like an
+ * inline.
+ *
+ * @param {Node} element
+ * @returns {boolean}
+ */
+export function isLikeInline(element) {
+  return element
+    ? [
+        "A",
+        "ABBR",
+        "ACRONYM",
+        "B",
+        "BDO",
+        "BIG",
+        "BR",
+        "BUTTON",
+        "CITE",
+        "CODE",
+        "DFN",
+        "EM",
+        "I",
+        "IMG",
+        "INPUT",
+        "KBD",
+        "LABEL",
+        "MAP",
+        "OBJECT",
+        "OUTPUT",
+        "Q",
+        "SAMP",
+        "SCRIPT",
+        "SELECT",
+        "SMALL",
+        "SPAN",
+        "STRONG",
+        "SUB",
+        "SUP",
+        "TEXTAREA",
+        "TIME",
+        "TT",
+        "VAR",
+      ].includes(element.nodeName)
+    : false;
+}
+
+/**
+ * Creates a new Inline
+ *
+ * @param {Text|HTMLBRElement} text
+ * @param {Object.<string, *>|CSSStyleDeclaration} styles
+ * @param {Object.<string, *>} [attrs]
+ * @returns {HTMLSpanElement}
+ */
+export function createInline(textOrLineBreak, styles, attrs) {
+  if (
+    !(textOrLineBreak instanceof HTMLBRElement) &&
+    !(textOrLineBreak instanceof Text)
+  ) {
+    throw new TypeError("Invalid inline child");
+  }
+  if (textOrLineBreak instanceof Text
+   && textOrLineBreak.nodeValue.length === 0) {
+    console.trace("nodeValue", textOrLineBreak.nodeValue)
+    throw new TypeError("Invalid inline child, cannot be an empty text");
+  }
+  return createElement(TAG, {
+    attributes: { id: createRandomId(), ...attrs },
+    data: { itype: TYPE },
+    styles: styles,
+    allowedStyles: STYLES,
+    children: textOrLineBreak,
+  });
+}
+
+/**
+ * Creates a new inline from an older inline. This only
+ * merges styles from the older inline to the new inline.
+ *
+ * @param {HTMLSpanElement} inline
+ * @param {Object.<string, *>} textOrLineBreak
+ * @param {Object.<string, *>|CSSStyleDeclaration} styles
+ * @param {Object.<string, *>} [attrs]
+ * @returns {HTMLSpanElement}
+ */
+export function createInlineFrom(inline, textOrLineBreak, styles, attrs) {
+  return createInline(
+    textOrLineBreak,
+    mergeStyles(STYLES, inline.style, styles),
+    attrs
+  );
+}
+
+/**
+ * Creates a new empty inline.
+ *
+ * @param {Object.<string,*>|CSSStyleDeclaration} styles
+ * @returns {HTMLSpanElement}
+ */
+export function createEmptyInline(styles) {
+  return createInline(createLineBreak(), styles);
+}
+
+/**
+ * Sets the inline styles.
+ *
+ * @param {HTMLSpanElement} element
+ * @param {Object.<string,*>|CSSStyleDeclaration} styles
+ * @returns {HTMLSpanElement}
+ */
+export function setInlineStyles(element, styles) {
+  return setStyles(element, STYLES, styles);
+}
+
+/**
+ * Gets the closest inline from a node.
+ *
+ * @param {Node} node
+ * @returns {HTMLElement|null}
+ */
+export function getInline(node) {
+  if (!node) return null; // FIXME: Should throw?
+  if (isInline(node)) return node;
+  if (node.nodeType === Node.TEXT_NODE) {
+    const inline = node?.parentElement;
+    if (!inline) return null;
+    if (!isInline(inline)) return null;
+    return inline;
+  }
+  return node.closest(QUERY);
+}
+
+/**
+ * Returns true if we are at the start offset
+ * of an inline.
+ *
+ * NOTE: Only the first inline returns this as true
+ *
+ * @param {TextNode|HTMLBRElement} node
+ * @param {number} offset
+ * @returns {boolean}
+ */
+export function isInlineStart(node, offset) {
+  const inline = getInline(node);
+  if (!inline) return false;
+  return isOffsetAtStart(inline, offset);
+}
+
+/**
+ * Returns true if we are at the end offset
+ * of an inline.
+ *
+ * @param {TextNode|HTMLBRElement} node
+ * @param {number} offset
+ * @returns {boolean}
+ */
+export function isInlineEnd(node, offset) {
+  const inline = getInline(node);
+  if (!inline) return false;
+  return isOffsetAtEnd(inline.firstChild, offset);
+}
+
+/**
+ * Splits an inline.
+ *
+ * @param {HTMLSpanElement} inline
+ * @param {number} offset
+ */
+export function splitInline(inline, offset) {
+  const textNode = inline.firstChild;
+  const style = inline.style;
+  const newTextNode = textNode.splitText(offset);
+  return createInline(newTextNode, style);
+}
+
+/**
+ * Returns all the inlines of a paragraph starting at
+ * the specified inline.
+ *
+ * @param {HTMLSpanElement} startInline
+ * @returns {Array<HTMLSpanElement>}
+ */
+export function getInlinesFrom(startInline) {
+  const inlines = [];
+  let currentInline = startInline;
+  let index = 0;
+  while (currentInline) {
+    if (index > 0) inlines.push(currentInline);
+    currentInline = currentInline.nextElementSibling;
+    index++;
+  }
+  return inlines;
+}
+
+/**
+ * Returns the length of an inline.
+ *
+ * @param {HTMLElement} inline
+ * @returns {number}
+ */
+export function getInlineLength(inline) {
+  if (!isInline(inline)) throw new Error("Invalid inline");
+  if (isLineBreak(inline.firstChild)) return 0;
+  return inline.firstChild.nodeValue.length;
+}
+
+/**
+ * Merges two inlines.
+ *
+ * @param {HTMLSpanElement} a
+ * @param {HTMLSpanElement} b
+ * @returns {HTMLSpanElement}
+ */
+export function mergeInlines(a, b) {
+  a.append(...b.childNodes);
+  b.remove();
+  // We need to normalize Text nodes.
+  a.normalize();
+  return a;
+}
--- a/frontend/text-editor/editor/content/dom/Inline.test.js
+++ b/frontend/text-editor/editor/content/dom/Inline.test.js
@ -0,0 +1,111 @@
+import { describe, test, expect } from "vitest";
+import { createEmptyInline, createInline, getInline, getInlineLength, isInline, isInlineEnd, isInlineStart, isLikeInline, splitInline, TAG, TYPE } from "./Inline.js";
+import { createLineBreak } from "./LineBreak.js";
+
+/* @vitest-environment jsdom */
+describe("Inline", () => {
+  test("createInline should throw when passed an invalid child", () => {
+    expect(() => createInline("Hello, World!")).toThrowError(
+      "Invalid inline child"
+    );
+  });
+
+  test("createInline creates a new inline element with a <br> inside", () => {
+    const inline = createInline(createLineBreak());
+    expect(inline).toBeInstanceOf(HTMLSpanElement);
+    expect(inline.dataset.itype).toBe(TYPE);
+    expect(inline.nodeName).toBe(TAG);
+    expect(inline.textContent).toBe("");
+    expect(inline.firstChild).toBeInstanceOf(HTMLBRElement);
+  });
+
+  test("createInline creates a new inline element with a text inside", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    expect(inline).toBeInstanceOf(HTMLSpanElement);
+    expect(inline.dataset.itype).toBe(TYPE);
+    expect(inline.nodeName).toBe(TAG);
+    expect(inline.textContent).toBe("Hello, World!");
+    expect(inline.firstChild).toBeInstanceOf(Text);
+  });
+
+  test("createEmptyInline creates a new empty inline element with a <br> inside", () => {
+    const emptyInline = createEmptyInline();
+    expect(emptyInline).toBeInstanceOf(HTMLSpanElement);
+    expect(emptyInline.dataset.itype).toBe(TYPE);
+    expect(emptyInline.nodeName).toBe(TAG);
+    expect(emptyInline.textContent).toBe("");
+    expect(emptyInline.firstChild).toBeInstanceOf(HTMLBRElement);
+  });
+
+  test("isInline should return true on elements that are inlines", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    expect(isInline(inline)).toBe(true);
+    const a = document.createElement("a");
+    expect(isInline(a)).toBe(false);
+    const b = null;
+    expect(isInline(b)).toBe(false);
+    const c = document.createElement('span');
+    expect(isInline(c)).toBe(false);
+  });
+
+  test("isLikeInline should return true on elements that have inline behavior by default", () => {
+    expect(isLikeInline(Infinity)).toBe(false);
+    expect(isLikeInline(null)).toBe(false);
+    expect(isLikeInline(document.createElement("A"))).toBe(true);
+  });
+
+  // FIXME: Should throw?
+  test("isInlineStart returns false when passed node is not an inline", () => {
+    const inline = document.createElement("div");
+    expect(isInlineStart(inline, 0)).toBe(false);
+    expect(isInlineStart(inline, "Hello, World!".length)).toBe(false);
+  });
+
+  test("isInlineStart returns if we're at the start of an inline", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    expect(isInlineStart(inline, 0)).toBe(true);
+    expect(isInlineStart(inline, "Hello, World!".length)).toBe(false);
+  });
+
+  // FIXME: Should throw?
+  test("isInlineEnd returns false when passed node is not an inline", () => {
+    const inline = document.createElement("div");
+    expect(isInlineEnd(inline, 0)).toBe(false);
+    expect(isInlineEnd(inline, "Hello, World!".length)).toBe(false);
+  });
+
+  test("isInlineEnd returns if we're in the end of an inline", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    expect(isInlineEnd(inline, 0)).toBe(false);
+    expect(isInlineEnd(inline, "Hello, World!".length)).toBe(true);
+  });
+
+  test("getInline ", () => {
+    expect(getInline(null)).toBe(null);
+  })
+
+  test("getInlineLength throws when the passed node is not an inline", () => {
+    const inline = document.createElement('div');
+    expect(() => getInlineLength(inline)).toThrowError('Invalid inline');
+  });
+
+  test("getInlineLength returns the length of the inline content", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    expect(getInlineLength(inline)).toBe(13);
+  });
+
+  test("getInlineLength should return 0 when the inline content is a <br>", () => {
+    const emptyInline = createEmptyInline();
+    expect(getInlineLength(emptyInline)).toBe(0);
+  });
+
+  test("splitInline returns a new inline from the splitted inline", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    const newInline = splitInline(inline, 5);
+    expect(newInline).toBeInstanceOf(HTMLSpanElement);
+    expect(newInline.firstChild).toBeInstanceOf(Text);
+    expect(newInline.textContent).toBe(", World!");
+    expect(newInline.dataset.itype).toBe(TYPE);
+    expect(newInline.nodeName).toBe(TAG);
+  });
+});
--- a/frontend/text-editor/editor/content/dom/LineBreak.js
+++ b/frontend/text-editor/editor/content/dom/LineBreak.js
@ -0,0 +1,28 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+export const TAG = "BR";
+
+/**
+ * Creates a new line break.
+ *
+ * @returns {HTMLBRElement}
+ */
+export function createLineBreak() {
+  return document.createElement(TAG);
+}
+
+/**
+ * Returns true if the passed node is a line break.
+ *
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isLineBreak(node) {
+  return node && node.nodeType === Node.ELEMENT_NODE && node.nodeName === TAG;
+}
--- a/frontend/text-editor/editor/content/dom/LineBreak.test.js
+++ b/frontend/text-editor/editor/content/dom/LineBreak.test.js
@ -0,0 +1,11 @@
+import { describe, expect, test } from 'vitest';
+import { createLineBreak } from './LineBreak.js';
+
+/* @vitest-environment jsdom */
+describe('LineBreak', () => {
+  test("createLineBreak should return a <br> element", () => {
+    const br = createLineBreak();
+    expect(br.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(br.nodeName).toBe('BR');
+  })
+});
--- a/frontend/text-editor/editor/content/dom/Paragraph.js
+++ b/frontend/text-editor/editor/content/dom/Paragraph.js
@ -0,0 +1,259 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import {
+  createElement,
+  isElement,
+  isOffsetAtStart,
+  isOffsetAtEnd,
+} from "./Element.js";
+import {
+  isInline,
+  isLikeInline,
+  getInline,
+  getInlinesFrom,
+  createInline,
+  createEmptyInline,
+  isInlineEnd,
+  splitInline,
+} from "./Inline.js";
+import { createLineBreak, isLineBreak } from "./LineBreak.js";
+import { setStyles } from "./Style.js";
+import { createRandomId } from "./Element.js";
+import { isEmptyTextNode, isTextNode } from './TextNode.js';
+
+export const TAG = "DIV";
+export const TYPE = "paragraph";
+export const QUERY = `[data-itype="${TYPE}"]`;
+export const STYLES = [
+  ["--typography-ref-id"],
+  ["--typography-ref-file"],
+  ["--font-id"],
+  ["--font-variant-id"],
+  ["--fills"],
+  ["font-variant"],
+  ["font-family"],
+  ["font-size", "px"],
+  ["font-weight"],
+  ["font-style"],
+  ["line-height"],
+  ["letter-spacing", "px"],
+  ["text-decoration"],
+  ["text-transform"],
+  ["text-align"],
+  ["direction"]
+];
+
+/**
+ * FIXME: This is a fix for Chrome that removes the
+ * current inline when the last character is deleted
+ * in `insertCompositionText`.
+ *
+ * @param {*} node
+ */
+export function fixParagraph(node) {
+  if  (!isParagraph(node) || !isLineBreak(node.firstChild)) {
+    return;
+  }
+  const br = createLineBreak();
+  node.replaceChildren(
+    createInline(br)
+  );
+  return br;
+}
+
+/**
+ * Returns true if the passed node behaves like a paragraph.
+ *
+ * NOTE: This is mainly used in paste operations. Every element node
+ * it's going to be treated as paragraph it
+ *
+ * @param {Node} element
+ * @returns {boolean}
+ */
+export function isLikeParagraph(element) {
+  return !isLikeInline(element);
+}
+
+/**
+ * Returns true if we have an empty paragraph.
+ *
+ * @param {Node} element
+ * @returns {boolean}
+ */
+export function isEmptyParagraph(element) {
+  if (!isParagraph(element)) throw new TypeError("Invalid paragraph");
+  const inline = element.firstChild;
+  if (!isInline(inline)) throw new TypeError("Invalid inline");
+  return isLineBreak(inline.firstChild);
+}
+
+/**
+ * Returns true if passed node is a paragraph.
+ *
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isParagraph(node) {
+  if (!node) return false;
+  if (!isElement(node, TAG)) return false;
+  if (node.dataset.itype !== TYPE) return false;
+  return true;
+}
+
+/**
+ * Creates a new paragraph.
+ *
+ * @param {Array<HTMLDivElement>} inlines
+ * @param {Object.<string, *>|CSSStyleDeclaration} styles
+ * @param {Object.<string, *>} [attrs]
+ * @returns {HTMLDivElement}
+ */
+export function createParagraph(inlines, styles, attrs) {
+  if (inlines && (!Array.isArray(inlines) || !inlines.every(isInline)))
+    throw new TypeError("Invalid paragraph children");
+  return createElement(TAG, {
+    attributes: { id: createRandomId(), ...attrs },
+    data: { itype: TYPE },
+    styles: styles,
+    allowedStyles: STYLES,
+    children: inlines,
+  });
+}
+
+/**
+ * Returns a new empty paragraph
+ *
+ * @param {Object.<string, *>} styles
+ * @returns {HTMLDivElement}
+ */
+export function createEmptyParagraph(styles) {
+  return createParagraph([
+    createEmptyInline(styles)
+  ], styles);
+}
+
+/**
+ * Sets the paragraph styles.
+ *
+ * @param {HTMLDivElement} element
+ * @param {Object.<string,*>|CSSStyleDeclaration} styles
+ * @returns {HTMLDivElement}
+ */
+export function setParagraphStyles(element, styles) {
+  return setStyles(element, STYLES, styles);
+}
+
+/**
+ * Gets the closest paragraph from a node.
+ *
+ * @param {Text|HTMLBRElement} node
+ * @returns {HTMLElement|null}
+ */
+export function getParagraph(node) {
+  if (!node) return null;
+  if (isParagraph(node)) return node;
+  if (node.nodeType === Node.TEXT_NODE
+   || isLineBreak(node)) {
+    const paragraph = node?.parentElement?.parentElement;
+    if (!paragraph) {
+      return null;
+    }
+    if (!isParagraph(paragraph)) {
+      return null;
+    }
+    return paragraph;
+  }
+  return node.closest(QUERY);
+}
+
+/**
+ * Returns if the specified node and offset represents
+ * the start of the paragraph.
+ *
+ * @param {Text|HTMLBRElement} node
+ * @param {number} offset
+ * @returns {boolean}
+ */
+export function isParagraphStart(node, offset) {
+  const paragraph = getParagraph(node);
+  if (!paragraph) throw new Error("Can't find the paragraph");
+  const inline = getInline(node);
+  if (!inline) throw new Error("Can't find the inline");
+  return (
+    paragraph.firstElementChild === inline &&
+    isOffsetAtStart(inline.firstChild, offset)
+  );
+}
+
+/**
+ * Returns if the specified node and offset represents
+ * the end of the paragraph.
+ *
+ * @param {Text|HTMLBRElement} node
+ * @param {number} offset
+ * @returns {boolean}
+ */
+export function isParagraphEnd(node, offset) {
+  const paragraph = getParagraph(node);
+  if (!paragraph) throw new Error("Cannot find the paragraph");
+  const inline = getInline(node);
+  if (!inline) throw new Error("Cannot find the inline");
+  return (
+    paragraph.lastElementChild === inline &&
+    isOffsetAtEnd(inline.firstChild, offset)
+  );
+}
+
+/**
+ * Splits a paragraph.
+ *
+ * @param {HTMLDivElement} paragraph
+ * @param {HTMLSpanElement} inline
+ * @param {number} offset
+ */
+export function splitParagraph(paragraph, inline, offset) {
+  const style = paragraph.style;
+  if (isInlineEnd(inline, offset)) {
+    const newParagraph = createParagraph(getInlinesFrom(inline), style);
+    return newParagraph;
+  }
+  const newInline = splitInline(inline, offset);
+  const newParagraph = createParagraph([newInline], style);
+  return newParagraph;
+}
+
+/**
+ * Splits a paragraph at a specified child node index
+ *
+ * @param {HTMLDivElement} paragraph
+ * @param {number} startIndex
+ */
+export function splitParagraphAtNode(paragraph, startIndex) {
+  const style = paragraph.style;
+  const newParagraph = createParagraph(null, style);
+  const newInlines = [];
+  for (let index = startIndex; index < paragraph.children.length; index++) {
+    newInlines.push(paragraph.children.item(index));
+  }
+  newParagraph.append(...newInlines);
+  return newParagraph;
+}
+
+/**
+ * Merges two paragraphs.
+ *
+ * @param {HTMLDivElement} a
+ * @param {HTMLDivElement} b
+ * @returns {HTMLDivElement}
+ */
+export function mergeParagraphs(a, b) {
+  a.append(...b.children);
+  b.remove();
+  return a;
+}
--- a/frontend/text-editor/editor/content/dom/Paragraph.test.js
+++ b/frontend/text-editor/editor/content/dom/Paragraph.test.js
@ -0,0 +1,172 @@
+import { describe, test, expect } from "vitest";
+import {
+  createEmptyParagraph,
+  createParagraph,
+  getParagraph,
+  isLikeParagraph,
+  isParagraph,
+  isParagraphStart,
+  isParagraphEnd,
+  TAG,
+  TYPE,
+  splitParagraph,
+  splitParagraphAtNode,
+  isEmptyParagraph,
+} from "./Paragraph.js";
+import { createInline, isInline } from "./Inline.js";
+
+/* @vitest-environment jsdom */
+describe("Paragraph", () => {
+  test("createParagraph should throw when passed invalid children", () => {
+    expect(() => createParagraph([
+      "Whatever"
+    ])).toThrowError("Invalid paragraph children");
+  });
+
+  test("createEmptyParagraph should create a new empty paragraph", () => {
+    const emptyParagraph = createEmptyParagraph();
+    expect(emptyParagraph).toBeInstanceOf(HTMLDivElement);
+    expect(emptyParagraph.nodeName).toBe(TAG);
+    expect(emptyParagraph.dataset.itype).toBe(TYPE);
+    expect(isInline(emptyParagraph.firstChild)).toBe(true);
+  });
+
+  test("isParagraph should return true when the passed node is a paragraph", () => {
+    expect(isParagraph(null)).toBe(false);
+    expect(isParagraph(document.createElement('div'))).toBe(false);
+    expect(isParagraph(document.createElement('h1'))).toBe(false);
+    expect(isParagraph(createEmptyParagraph())).toBe(true);
+    expect(isParagraph(createParagraph([
+      createInline(new Text('Hello, World!'))
+    ]))).toBe(true);
+  });
+
+  test("isLikeParagraph should return true when node looks like a paragraph", () => {
+    const p = document.createElement('p');
+    expect(isLikeParagraph(p)).toBe(true);
+    const div = document.createElement('div');
+    expect(isLikeParagraph(div)).toBe(true);
+    const h1 = document.createElement('h1');
+    expect(isLikeParagraph(h1)).toBe(true);
+    const h2 = document.createElement('h2');
+    expect(isLikeParagraph(h2)).toBe(true);
+    const h3 = document.createElement('h3');
+    expect(isLikeParagraph(h3)).toBe(true);
+    const h4 = document.createElement('h4');
+    expect(isLikeParagraph(h4)).toBe(true);
+    const h5 = document.createElement('h5');
+    expect(isLikeParagraph(h5)).toBe(true);
+    const h6 = document.createElement('h6');
+    expect(isLikeParagraph(h6)).toBe(true);
+  });
+
+  test("getParagraph should return the closest paragraph of the passed node", () => {
+    const text = new Text("Hello, World!");
+    const inline = createInline(text);
+    const paragraph = createParagraph([inline]);
+    expect(getParagraph(text)).toBe(paragraph);
+  });
+
+  test("getParagraph should return null if there aren't closer paragraph nodes", () => {
+    const text = new Text("Hello, World!");
+    const whatever = document.createElement('div');
+    whatever.appendChild(text);
+    expect(getParagraph(text)).toBe(null);
+  });
+
+  test("isParagraphStart should return true on an empty paragraph", () => {
+    const paragraph = createEmptyParagraph();
+    expect(isParagraphStart(paragraph.firstChild.firstChild, 0)).toBe(true);
+  });
+
+  test("isParagraphStart should return true on a paragraph", () => {
+    const paragraph = createParagraph([
+      createInline(new Text("Hello, World!"))
+    ]);
+    expect(isParagraphStart(paragraph.firstChild.firstChild, 0)).toBe(true);
+  });
+
+  test("isParagraphEnd should return true on an empty paragraph", () => {
+    const paragraph = createEmptyParagraph();
+    expect(isParagraphEnd(paragraph.firstChild.firstChild, 0)).toBe(true);
+  });
+
+  test("isParagraphEnd should return true on a paragraph", () => {
+    const paragraph = createParagraph([
+      createInline(new Text("Hello, World!")),
+    ]);
+    expect(isParagraphEnd(paragraph.firstChild.firstChild, 13)).toBe(true);
+  });
+
+  test("splitParagraph should split a paragraph", () => {
+    const inline = createInline(new Text("Hello, World!"));
+    const paragraph = createParagraph([inline]);
+    const newParagraph = splitParagraph(paragraph, inline, 6);
+    expect(newParagraph).toBeInstanceOf(HTMLDivElement);
+    expect(newParagraph.nodeName).toBe(TAG);
+    expect(newParagraph.dataset.itype).toBe(TYPE);
+    expect(newParagraph.firstElementChild.textContent).toBe(" World!");
+  });
+
+  test("splitParagraphAtNode should split a paragraph at a specified node", () => {
+    const helloInline = createInline(new Text("Hello, "));
+    const worldInline = createInline(new Text("World"));
+    const exclInline = createInline(new Text("!"));
+    const paragraph = createParagraph([helloInline, worldInline, exclInline]);
+    const newParagraph = splitParagraphAtNode(paragraph, 1);
+    expect(newParagraph).toBeInstanceOf(HTMLDivElement);
+    expect(newParagraph.nodeName).toBe(TAG);
+    expect(newParagraph.dataset.itype).toBe(TYPE);
+    expect(newParagraph.children.length).toBe(2);
+    expect(newParagraph.textContent).toBe("World!");
+  });
+
+  test("isLikeParagraph should return true if the element it's not an inline element", () => {
+    const span = document.createElement("span");
+    const a = document.createElement("a");
+    const br = document.createElement("br");
+    const i = document.createElement("span");
+    const u = document.createElement("span");
+    const div = document.createElement("div");
+    const blockquote = document.createElement("blockquote");
+    const table = document.createElement("table");
+    expect(isLikeParagraph(span)).toBe(false);
+    expect(isLikeParagraph(a)).toBe(false);
+    expect(isLikeParagraph(br)).toBe(false);
+    expect(isLikeParagraph(i)).toBe(false);
+    expect(isLikeParagraph(u)).toBe(false);
+    expect(isLikeParagraph(div)).toBe(true);
+    expect(isLikeParagraph(blockquote)).toBe(true);
+    expect(isLikeParagraph(table)).toBe(true);
+  });
+
+  test("isEmptyParagraph should return true if the paragraph is empty", () => {
+    expect(() => {
+      isEmptyParagraph(document.createElement("svg"));
+    }).toThrowError("Invalid paragraph");
+    expect(() => {
+      const paragraph = document.createElement("div");
+      paragraph.dataset.itype = "paragraph";
+      paragraph.appendChild(document.createElement("svg"));
+      isEmptyParagraph(paragraph);
+    }).toThrowError("Invalid inline");
+
+    const lineBreak = document.createElement("br");
+    const emptyInline = document.createElement("span");
+    emptyInline.dataset.itype = "inline";
+    emptyInline.appendChild(lineBreak);
+    const emptyParagraph = document.createElement("div");
+    emptyParagraph.dataset.itype = "paragraph";
+    emptyParagraph.appendChild(emptyInline);
+    expect(isEmptyParagraph(emptyParagraph)).toBe(true);
+
+    const nonEmptyInline = document.createElement("span");
+    nonEmptyInline.dataset.itype = "inline";
+    nonEmptyInline.appendChild(new Text('Not empty!'));
+    const nonEmptyParagraph = document.createElement("div");
+    nonEmptyParagraph.dataset.itype = "paragraph";
+    nonEmptyParagraph.appendChild(nonEmptyInline);
+    expect(isEmptyParagraph(nonEmptyParagraph)).toBe(false);
+
+  });
+});
--- a/frontend/text-editor/editor/content/dom/Root.js
+++ b/frontend/text-editor/editor/content/dom/Root.js
@ -0,0 +1,71 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { createElement, isElement } from "./Element.js";
+import { createEmptyParagraph, isParagraph } from "./Paragraph.js";
+import { setStyles } from "./Style.js";
+import { createRandomId } from "./Element.js";
+
+export const TAG = "DIV";
+export const TYPE = "root";
+export const QUERY = `[data-itype="${TYPE}"]`;
+export const STYLES = [["--vertical-align"]];
+
+/**
+ * Returns true if passed node is a root.
+ *
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isRoot(node) {
+  if (!node) return false;
+  if (!isElement(node, TAG)) return false;
+  if (node.dataset.itype !== TYPE) return false;
+  return true;
+}
+
+/**
+ * Create a new root element
+ *
+ * @param {Array<HTMLDivElement>} paragraphs
+ * @param {Object.<string, *>|CSSStyleDeclaration} styles,
+ * @param {Object.<string, *>} [attrs]
+ * @returns {HTMLDivElement}
+ */
+export function createRoot(paragraphs, styles, attrs) {
+  if (!Array.isArray(paragraphs) || !paragraphs.every(isParagraph))
+    throw new TypeError("Invalid root children");
+
+  return createElement(TAG, {
+    attributes: { id: createRandomId(), ...attrs },
+    data: { itype: TYPE },
+    styles: styles,
+    allowedStyles: STYLES,
+    children: paragraphs,
+  });
+}
+
+/**
+ * Creates a new empty root element
+ *
+ * @param {Object.<string,*>|CSSStyleDeclaration} styles
+ */
+export function createEmptyRoot(styles) {
+  return createRoot([createEmptyParagraph(styles)], styles);
+}
+
+/**
+ * Sets the root styles.
+ *
+ * @param {HTMLDivElement} element
+ * @param {Object.<string,*>|CSSStyleDeclaration} styles
+ * @returns {HTMLDivElement}
+ */
+export function setRootStyles(element, styles) {
+  return setStyles(element, STYLES, styles);
+}
--- a/frontend/text-editor/editor/content/dom/Root.test.js
+++ b/frontend/text-editor/editor/content/dom/Root.test.js
@ -0,0 +1,33 @@
+import { describe, test, expect } from "vitest";
+import { createEmptyRoot, createRoot, setRootStyles, TAG, TYPE } from './Root.js'
+
+/* @vitest-environment jsdom */
+describe("Root", () => {
+  test("createRoot should throw when passed invalid children", () => {
+    expect(() => createRoot(["Whatever"])).toThrowError(
+      "Invalid root children"
+    );
+  });
+
+  test("createEmptyRoot should create a new root with an empty paragraph", () => {
+    const emptyRoot = createEmptyRoot();
+    expect(emptyRoot).toBeInstanceOf(HTMLDivElement);
+    expect(emptyRoot.nodeName).toBe(TAG);
+    expect(emptyRoot.dataset.itype).toBe(TYPE);
+    expect(emptyRoot.firstChild).toBeInstanceOf(HTMLDivElement);
+    expect(emptyRoot.firstChild.firstChild).toBeInstanceOf(HTMLSpanElement);
+    expect(emptyRoot.firstChild.firstChild.firstChild).toBeInstanceOf(HTMLBRElement);
+  });
+
+  test("setRootStyles should apply only the styles of root to the root", () => {
+    const emptyRoot = createEmptyRoot();
+    setRootStyles(emptyRoot, {
+      ["--vertical-align"]: "top",
+      ["font-size"]: "25px"
+    });
+    expect(emptyRoot.style.getPropertyValue("--vertical-align")).toBe("top");
+    // We expect this style to be empty because we don't apply it
+    // to the root.
+    expect(emptyRoot.style.getPropertyValue("font-size")).toBe("");
+  })
+});
--- a/frontend/text-editor/editor/content/dom/Style.js
+++ b/frontend/text-editor/editor/content/dom/Style.js
@ -0,0 +1,329 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { getFills } from "./Color.js";
+
+const DEFAULT_FONT_SIZE = "16px";
+const DEFAULT_LINE_HEIGHT = "1.2";
+
+/**
+ * Merges two style declarations. `source` -> `target`.
+ *
+ * @param {CSSStyleDeclaration} target
+ * @param {CSSStyleDeclaration} source
+ * @returns {CSSStyleDeclaration}
+ */
+export function mergeStyleDeclarations(target, source) {
+  // This is better but it doesn't work in JSDOM
+  // for (const styleName of source) {
+  for (let index = 0; index < source.length; index++) {
+    const styleName = source.item(index);
+    target.setProperty(styleName, source.getPropertyValue(styleName));
+  }
+  return target
+}
+
+/**
+ * Resets the properties of a style declaration.
+ *
+ * @param {CSSStyleDeclaration} styleDeclaration
+ * @returns {CSSStyleDeclaration}
+ */
+function resetStyleDeclaration(styleDeclaration) {
+  for (let index = 0; index < styleDeclaration.length; index++) {
+    const styleName = styleDeclaration.item(index);
+    styleDeclaration.removeProperty(styleName);
+  }
+  return styleDeclaration
+}
+
+/**
+ * An inert element that only keeps the style
+ * declaration used for merging other styleDeclarations.
+ *
+ * @type {HTMLDivElement|null}
+ */
+let inertElement = null
+
+/**
+ * Resets the style declaration of the inert
+ * element.
+ */
+function resetInertElement() {
+  if (!inertElement) throw new Error('Invalid inert element');
+  resetStyleDeclaration(inertElement.style);
+  return inertElement;
+}
+
+/**
+ * Returns an instance of a <div> element used
+ * to keep style declarations.
+ *
+ * @returns {HTMLDivElement}
+ */
+function getInertElement() {
+  if (!inertElement) {
+    inertElement = document.createElement("div");
+    return inertElement;
+  }
+  resetInertElement();
+  return inertElement;
+}
+
+/**
+ * Computes the styles of an element the same way `window.getComputedStyle` does.
+ *
+ * @param {Element} element
+ * @returns {CSSStyleDeclaration}
+ */
+export function getComputedStyle(element) {
+  const inertElement = getInertElement();
+  let currentElement = element;
+  while (currentElement) {
+    // This is better but it doesn't work in JSDOM.
+    // for (const styleName of currentElement.style) {
+    for (let index = 0; index < currentElement.style.length; index++) {
+      const styleName = currentElement.style.item(index);
+      const currentValue = inertElement.style.getPropertyValue(styleName);
+      if (currentValue) {
+        const priority = currentElement.style.getPropertyPriority(styleName);
+        if (priority === "important") {
+          const newValue = currentElement.style.getPropertyValue(styleName);
+          inertElement.style.setProperty(styleName, newValue);
+        }
+      } else {
+        inertElement.style.setProperty(
+          styleName,
+          currentElement.style.getPropertyValue(styleName)
+        );
+      }
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return inertElement.style;
+}
+
+/**
+ * Normalizes style declaration.
+ *
+ * TODO: I think that this also needs to remove some "conflicting"
+ *       CSS properties like `font-family` or some CSS variables.
+ *
+ * @param {Node} node
+ * @param {CSSStyleDeclaration} styleDefaults
+ * @returns {CSSStyleDeclaration}
+ */
+export function normalizeStyles(node, styleDefaults) {
+  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) {
+    styleDeclaration.removeProperty("color");
+    styleDeclaration.setProperty("--fills", getFills(color));
+  }
+  // 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");
+  const fontId = styleDeclaration.getPropertyPriority("--font-id");
+  if (fontFamily && !fontId) {
+    styleDeclaration.removeProperty("font-family");
+  }
+
+  const fontSize = styleDeclaration.getPropertyValue("font-size");
+  if (!fontSize || fontSize === "0px") {
+    styleDeclaration.setProperty("font-size", DEFAULT_FONT_SIZE);
+  }
+
+  const lineHeight = styleDeclaration.getPropertyValue("line-height");
+  if (!lineHeight || lineHeight === "") {
+    styleDeclaration.setProperty("line-height", DEFAULT_LINE_HEIGHT);
+  }
+  return styleDeclaration
+}
+/**
+ * Sets a single style property value of an element.
+ *
+ * @param {HTMLElement} element
+ * @param {string} styleName
+ * @param {*} styleValue
+ * @param {string} [styleUnit]
+ * @returns {HTMLElement}
+ */
+export function setStyle(element, styleName, styleValue, styleUnit) {
+  if (
+    styleName.startsWith("--") &&
+    typeof styleValue !== "string" &&
+    typeof styleValue !== "number"
+  ) {
+    if (styleName === "--fills" && styleValue === null) debugger;
+    element.style.setProperty(styleName, JSON.stringify(styleValue));
+  } else {
+    element.style.setProperty(styleName, styleValue + (styleUnit ?? ""));
+  }
+  return element;
+}
+
+/**
+ * Returns the value of a style from a declaration.
+ *
+ * @param {CSSStyleDeclaration} style
+ * @param {string} styleName
+ * @param {string|undefined} [styleUnit]
+ * @returns {*}
+ */
+export function getStyleFromDeclaration(style, styleName, styleUnit) {
+  if (styleName.startsWith("--")) {
+    return style.getPropertyValue(styleName);
+  }
+  const styleValue = style.getPropertyValue(styleName);
+  if (styleValue.endsWith(styleUnit)) {
+    return styleValue.slice(0, -styleUnit.length);
+  }
+  return styleValue;
+}
+
+/**
+ * Returns the value of a style.
+ *
+ * @param {HTMLElement} element
+ * @param {string} styleName
+ * @param {string|undefined} [styleUnit]
+ * @returns {*}
+ */
+export function getStyle(element, styleName, styleUnit) {
+  return getStyleFromDeclaration(element.style, styleName, styleUnit);
+}
+
+/**
+ * Sets the styles of an element using an object and a list of
+ * allowed styles.
+ *
+ * @param {HTMLElement} element
+ * @param {Array<[string,?string]>} allowedStyles
+ * @param {Object.<string, *>} styleObject
+ * @returns {HTMLElement}
+ */
+export function setStylesFromObject(element, allowedStyles, styleObject) {
+  for (const [styleName, styleUnit] of allowedStyles) {
+    if (!(styleName in styleObject)) {
+      continue;
+    }
+    const styleValue = styleObject[styleName];
+    if (styleValue) {
+      setStyle(element, styleName, styleValue, styleUnit);
+    }
+  }
+  return element;
+}
+
+/**
+ * Sets the styles of an element using a CSS Style Declaration and a list
+ * of allowed styles.
+ *
+ * @param {HTMLElement} element
+ * @param {Array<[string,?string]>} allowedStyles
+ * @param {CSSStyleDeclaration} styleDeclaration
+ * @returns {HTMLElement}
+ */
+export function setStylesFromDeclaration(
+  element,
+  allowedStyles,
+  styleDeclaration
+) {
+  for (const [styleName, styleUnit] of allowedStyles) {
+    const styleValue = getStyleFromDeclaration(styleDeclaration, styleName, styleUnit);
+    if (styleValue) {
+      setStyle(element, styleName, styleValue, styleUnit);
+    }
+  }
+  return element;
+}
+
+/**
+ * Sets the styles of an element using an Object or a CSS Style Declaration and
+ * a list of allowed styles.
+ *
+ * @param {HTMLElement} element
+ * @param {Array<[string,?string]} allowedStyles
+ * @param {Object.<string,*>|CSSStyleDeclaration} styleObjectOrDeclaration
+ * @returns {HTMLElement}
+ */
+export function setStyles(element, allowedStyles, styleObjectOrDeclaration) {
+  if (styleObjectOrDeclaration instanceof CSSStyleDeclaration) {
+    return setStylesFromDeclaration(
+      element,
+      allowedStyles,
+      styleObjectOrDeclaration
+    );
+  }
+  return setStylesFromObject(element, allowedStyles, styleObjectOrDeclaration);
+}
+
+/**
+ * Gets the styles of an element using a list of allowed styles.
+ *
+ * @param {HTMLElement} element
+ * @param {Array<[string,?string]} allowedStyles
+ * @returns {Object.<string, *>}
+ */
+export function getStyles(element, allowedStyles) {
+  const styleObject = {};
+  for (const [styleName, styleUnit] of allowedStyles) {
+    const styleValue = getStyle(element, styleName, styleUnit);
+    if (styleValue) {
+      styleObject[styleName] = styleValue;
+    }
+  }
+  return styleObject;
+}
+
+/**
+ * Returns a series of merged styles.
+ *
+ * @param {Array<[string,?string]} allowedStyles
+ * @param {CSSStyleDeclaration} styleDeclaration
+ * @param {Object.<string,*>} newStyles
+ * @returns {Object.<string,*>}
+ */
+export function mergeStyles(allowedStyles, styleDeclaration, newStyles) {
+  const mergedStyles = {};
+  for (const [styleName, styleUnit] of allowedStyles) {
+    if (styleName in newStyles) {
+      mergedStyles[styleName] = newStyles[styleName];
+    } else {
+      mergedStyles[styleName] = getStyleFromDeclaration(styleDeclaration, styleName, styleUnit);
+    }
+  }
+  return mergedStyles;
+}
+
+/**
+ * Returns true if the specified style declaration has a display block.
+ *
+ * @param {CSSStyleDeclaration} style
+ * @returns {boolean}
+ */
+export function isDisplayBlock(style) {
+  return style.display === "block";
+}
+
+/**
+ * Returns true if the specified style declaration has a display inline
+ * or inline-block.
+ *
+ * @param {CSSStyleDeclaration} style
+ * @returns {boolean}
+ */
+export function isDisplayInline(style) {
+  return style.display === "inline" || style.display === "inline-block";
+}
--- a/frontend/text-editor/editor/content/dom/Style.test.js
+++ b/frontend/text-editor/editor/content/dom/Style.test.js
@ -0,0 +1,76 @@
+import { describe, test, expect, vi } from "vitest";
+import { getStyles, isDisplayBlock, isDisplayInline, setStyle, setStyles } from "./Style.js";
+
+/* @vitest-environment jsdom */
+describe("Style", () => {
+  test("setStyle should apply a style to an element", () => {
+    const element = document.createElement("div");
+    setStyle(element, "display", "none");
+    expect(element.style.display).toBe("none");
+  });
+
+  test("setStyles should apply multiple styles to an element using an Object", () => {
+    const element = document.createElement("div");
+    setStyles(element, [["display"]], {
+      "text-decoration": "none",
+      "font-size": "32px",
+      display: "none",
+    });
+    expect(element.style.display).toBe("none");
+    expect(element.style.fontSize).toBe("");
+    expect(element.style.textDecoration).toBe("");
+  });
+
+  test("setStyles should apply multiple styles to an element using a CSSStyleDeclaration", () => {
+    const a = document.createElement("div");
+    setStyles(a, [["display"]], {
+      display: "none",
+    });
+    expect(a.style.display).toBe("none");
+    expect(a.style.fontSize).toBe("");
+    expect(a.style.textDecoration).toBe("");
+
+    const b = document.createElement("div");
+    setStyles(b, [["display"]], a.style);
+    expect(b.style.display).toBe("none");
+    expect(b.style.fontSize).toBe("");
+    expect(b.style.textDecoration).toBe("");
+  });
+
+  test("getStyles should retrieve a list of allowed styles", () => {
+    const element = document.createElement("div");
+    element.style.display = 'block';
+    element.style.textDecoration = 'underline';
+    element.style.fontSize = '32px';
+    const textDecorationStyles = getStyles(element, [["text-decoration"]]);
+    expect(textDecorationStyles).toStrictEqual({
+      "text-decoration": "underline"
+    });
+    const displayStyles = getStyles(element, [["display"]]);
+    expect(displayStyles).toStrictEqual({
+      "display": "block",
+    });
+    const fontSizeStyles = getStyles(element, [["font-size", "px"]]);
+    expect(fontSizeStyles).toStrictEqual({
+      "font-size": "32",
+    });
+  });
+
+  test("isDisplayBlock should return true if display is 'block'", () => {
+    const div = document.createElement("div");
+    div.style.display = "block";
+    expect(isDisplayBlock(div.style)).toBe(true);
+    const span = document.createElement("span");
+    span.style.display = "inline";
+    expect(isDisplayBlock(span)).toBe(false);
+  });
+
+  test("isDisplayInline should return true if display is 'inline'", () => {
+    const span = document.createElement("span");
+    span.style.display = "inline";
+    expect(isDisplayInline(span.style)).toBe(true);
+    const div = document.createElement("div");
+    div.style.display = "block";
+    expect(isDisplayInline(div)).toBe(false);
+  });
+});
--- a/frontend/text-editor/editor/content/dom/TextNode.js
+++ b/frontend/text-editor/editor/content/dom/TextNode.js
@ -0,0 +1,64 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import { isInline } from "./Inline.js";
+import { isLineBreak } from "./LineBreak.js";
+import { isParagraph } from "./Paragraph.js";
+import { isRoot } from "./Root.js";
+
+/**
+ * Returns true if the node is "like"
+ * text, this means that it is a Text
+ * node or a <br> element.
+ *
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isTextNode(node) {
+  if (!node) throw new TypeError("Invalid text node");
+  return node.nodeType === Node.TEXT_NODE
+      || isLineBreak(node);
+}
+
+/**
+ * Returns true if the text node is empty.
+ *
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isEmptyTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE
+      && node.nodeValue === "";
+}
+
+/**
+ * Returns the content length of the
+ * node.
+ *
+ * @param {Node} node
+ * @returns {number}
+ */
+export function getTextNodeLength(node) {
+  if (!node) throw new TypeError("Invalid text node");
+  if (isLineBreak(node)) return 0;
+  return node.nodeValue.length;
+}
+
+/**
+ * Gets the closest text node.
+ *
+ * @param {Node} node
+ * @returns {Node}
+ */
+export function getClosestTextNode(node) {
+  if (isTextNode(node)) return node;
+  if (isInline(node)) return node.firstChild;
+  if (isParagraph(node)) return node.firstChild.firstChild;
+  if (isRoot(node)) return node.firstChild.firstChild.firstChild;
+  throw new Error("Cannot find a text node");
+}
--- a/frontend/text-editor/editor/content/dom/TextNode.test.js
+++ b/frontend/text-editor/editor/content/dom/TextNode.test.js
@ -0,0 +1,26 @@
+import { describe, test, expect } from 'vitest';
+import { isTextNode, getTextNodeLength } from './TextNode.js';
+import { createLineBreak } from './LineBreak.js';
+
+/* @vitest-environment jsdom */
+describe("TextNode", () => {
+  test("isTextNode should return true when the passed node is a Text", () => {
+    expect(isTextNode(new Text("Hello, World!"))).toBe(true);
+    expect(isTextNode(Infinity)).toBe(false);
+    expect(isTextNode(true)).toBe(false);
+    expect(isTextNode("hola")).toBe(false);
+    expect(isTextNode({})).toBe(false);
+    expect(isTextNode([])).toBe(false);
+    expect(() => isTextNode(undefined)).toThrowError('Invalid text node');
+    expect(() => isTextNode(null)).toThrowError('Invalid text node');
+    expect(() => isTextNode(0)).toThrowError('Invalid text node');
+  });
+
+  test("getTextNodeLength should return the length of the text node or 0 if it is a <br>", () => {
+    expect(getTextNodeLength(new Text("Hello, World!"))).toBe(13);
+    expect(getTextNodeLength(createLineBreak())).toBe(0);
+    expect(() => getTextNodeLength(undefined)).toThrowError('Invalid text node');
+    expect(() => getTextNodeLength(null)).toThrowError('Invalid text node');
+    expect(() => getTextNodeLength(0)).toThrowError('Invalid text node');
+  });
+});
--- a/frontend/text-editor/editor/content/dom/TextNodeIterator.js
+++ b/frontend/text-editor/editor/content/dom/TextNodeIterator.js
@ -0,0 +1,250 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Iterator direction.
+ *
+ * @enum {number}
+ */
+export const TextNodeIteratorDirection = {
+  FORWARD: 1,
+  BACKWARD: 0,
+};
+
+/**
+ * TextNodeIterator
+ */
+export class TextNodeIterator {
+  /**
+   * Returns if a specific node is a text node.
+   *
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  static isTextNode(node) {
+    return (
+      node.nodeType === Node.TEXT_NODE ||
+      (node.nodeType === Node.ELEMENT_NODE && node.nodeName === "BR")
+    );
+  }
+
+  /**
+   * Returns if a specific node is a container node.
+   *
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  static isContainerNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "BR";
+  }
+
+  /**
+   * Finds a node from an initial node and down the tree.
+   *
+   * @param {Node} startNode
+   * @param {Node} rootNode
+   * @param {Set<Node>} skipNodes
+   * @param {number} direction
+   * @returns {Node}
+   */
+  static findDown(
+    startNode,
+    rootNode,
+    skipNodes = new Set(),
+    direction = TextNodeIteratorDirection.FORWARD
+  ) {
+    if (startNode === rootNode) {
+      return TextNodeIterator.findDown(
+        direction === TextNodeIteratorDirection.FORWARD
+          ? startNode.firstChild
+          : startNode.lastChild,
+        rootNode,
+        skipNodes,
+        direction
+      );
+    }
+
+    // NOTE: This should not use the SafeGuard
+    // module.
+    let safeGuard = Date.now();
+    let currentNode = startNode;
+    while (currentNode) {
+      if (Date.now() - safeGuard >= 1000) {
+        throw new Error("Iteration timeout");
+      }
+      if (skipNodes.has(currentNode)) {
+        currentNode =
+          direction === TextNodeIteratorDirection.FORWARD
+            ? currentNode.nextSibling
+            : currentNode.previousSibling;
+        continue;
+      }
+      if (TextNodeIterator.isTextNode(currentNode)) {
+        return currentNode;
+      } else if (TextNodeIterator.isContainerNode(currentNode)) {
+        return TextNodeIterator.findDown(
+          direction === TextNodeIteratorDirection.FORWARD
+            ? currentNode.firstChild
+            : currentNode.lastChild,
+          rootNode,
+          skipNodes,
+          direction
+        );
+      }
+      currentNode =
+        direction === TextNodeIteratorDirection.FORWARD
+          ? currentNode.nextSibling
+          : currentNode.previousSibling;
+    }
+    return null;
+  }
+
+  /**
+   * Finds a node from an initial node and up the tree.
+   *
+   * @param {Node} startNode
+   * @param {Node} rootNode
+   * @param {Set} backTrack
+   * @param {number} direction
+   * @returns {Node}
+   */
+  static findUp(
+    startNode,
+    rootNode,
+    backTrack = new Set(),
+    direction = TextNodeIteratorDirection.FORWARD
+  ) {
+    backTrack.add(startNode);
+    if (TextNodeIterator.isTextNode(startNode)) {
+      return TextNodeIterator.findUp(
+        startNode.parentNode,
+        rootNode,
+        backTrack,
+        direction
+      );
+    } else if (TextNodeIterator.isContainerNode(startNode)) {
+      const found = TextNodeIterator.findDown(
+        startNode,
+        rootNode,
+        backTrack,
+        direction
+      );
+      if (found) {
+        return found;
+      }
+      if (startNode !== rootNode) {
+        return TextNodeIterator.findUp(
+          startNode.parentNode,
+          rootNode,
+          backTrack,
+          direction
+        );
+      }
+    }
+    return null;
+  }
+
+  /**
+   * This is the root text node.
+   *
+   * @type {HTMLElement}
+   */
+  #rootNode = null;
+
+  /**
+   * This is the current text node.
+   *
+   * @type {Text|null}
+   */
+  #currentNode = null;
+
+  /**
+   * Constructor
+   *
+   * @param {HTMLElement} rootNode
+   */
+  constructor(rootNode) {
+    if (!(rootNode instanceof HTMLElement)) {
+      throw new TypeError("Invalid root node");
+    }
+    this.#rootNode = rootNode;
+    this.#currentNode = TextNodeIterator.findDown(rootNode, rootNode);
+  }
+
+  /**
+   * Current node we're into.
+   *
+   * @type {TextNode|HTMLBRElement}
+   */
+  get currentNode() {
+    return this.#currentNode;
+  }
+
+  set currentNode(newCurrentNode) {
+    const isContained =
+      (newCurrentNode.compareDocumentPosition(this.#rootNode) &
+        Node.DOCUMENT_POSITION_CONTAINS) ===
+      Node.DOCUMENT_POSITION_CONTAINS;
+    if (
+      !(newCurrentNode instanceof Node) ||
+      !TextNodeIterator.isTextNode(newCurrentNode) ||
+      !isContained
+    ) {
+      throw new TypeError("Invalid new current node");
+    }
+    this.#currentNode = newCurrentNode;
+  }
+
+  /**
+   * Returns the next Text node or <br> element or null if there are.
+   *
+   * @returns {Text|HTMLBRElement}
+   */
+  nextNode() {
+    if (!this.#currentNode) return null;
+
+    const nextNode = TextNodeIterator.findUp(
+      this.#currentNode,
+      this.#rootNode,
+      new Set(),
+      TextNodeIteratorDirection.FORWARD
+    );
+
+    if (!nextNode) {
+      return null;
+    }
+
+    this.#currentNode = nextNode;
+    return this.#currentNode;
+  }
+
+  /**
+   * Returns the previous Text node or <br> element or null.
+   *
+   * @returns {Text|HTMLBRElement}
+   */
+  previousNode() {
+    if (!this.#currentNode) return null;
+
+    const previousNode = TextNodeIterator.findUp(
+      this.#currentNode,
+      this.#rootNode,
+      new Set(),
+      TextNodeIteratorDirection.BACKWARD
+    );
+
+    if (!previousNode) {
+      return null;
+    }
+
+    this.#currentNode = previousNode;
+    return this.#currentNode;
+  }
+}
+
+export default TextNodeIterator;
--- a/frontend/text-editor/editor/content/dom/TextNodeIterator.test.js
+++ b/frontend/text-editor/editor/content/dom/TextNodeIterator.test.js
@ -0,0 +1,70 @@
+import { describe, test, expect } from "vitest";
+import TextNodeIterator from "./TextNodeIterator.js";
+import { createInline } from "./Inline.js";
+import { createParagraph } from "./Paragraph.js";
+import { createRoot } from "./Root.js";
+import { createLineBreak } from "./LineBreak.js";
+
+/* @vitest-environment jsdom */
+describe("TextNodeIterator", () => {
+  test("Create a new TextNodeIterator with an invalid root should throw", () => {
+    expect(() => new TextNodeIterator(null)).toThrowError("Invalid root node");
+    expect(() => new TextNodeIterator(Infinity)).toThrowError(
+      "Invalid root node"
+    );
+    expect(() => new TextNodeIterator(1)).toThrowError("Invalid root node");
+    expect(() => new TextNodeIterator("hola")).toThrowError(
+      "Invalid root node"
+    );
+  });
+
+  test("Create a new TextNodeIterator and iterate only over text nodes", () => {
+    const rootNode = createRoot([
+      createParagraph([
+        createInline(new Text("Hello, ")),
+        createInline(new Text("World!")),
+        createInline(new Text("Whatever")),
+      ]),
+      createParagraph([createInline(createLineBreak())]),
+      createParagraph([createInline(new Text("This is a ")), createInline(new Text("test"))]),
+      createParagraph([createInline(new Text("Hi!"))]),
+    ]);
+
+    const textNodeIterator = new TextNodeIterator(rootNode);
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Hello, ");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("World!");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Whatever");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(textNodeIterator.currentNode.nodeName).toBe("BR");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("This is a ");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("test");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Hi!");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("test");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("This is a ");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(textNodeIterator.currentNode.nodeName).toBe("BR");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Whatever");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("World!");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Hello, ");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("World!");
+    textNodeIterator.previousNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Hello, ");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("World!");
+    textNodeIterator.nextNode();
+    expect(textNodeIterator.currentNode.nodeValue).toBe("Whatever");
+  });
+});
--- a/frontend/text-editor/editor/controllers/ChangeController.js
+++ b/frontend/text-editor/editor/controllers/ChangeController.js
@ -0,0 +1,92 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Change controller is responsible of notifying when a change happens.
+ */
+export class ChangeController extends EventTarget {
+  /**
+   * Keeps the timeout id.
+   *
+   * @type {number}
+   */
+  #timeout = null;
+
+  /**
+   * Keeps the time at which we're going to
+   * call the debounced change calls.
+   *
+   * @type {number}
+   */
+  #time = 1000;
+
+  /**
+   * Keeps if we have some pending changes or not.
+   *
+   * @type {boolean}
+   */
+  #hasPendingChanges = false;
+
+  /**
+   * Constructor
+   *
+   * @param {number} [time=500]
+   */
+  constructor(time = 500) {
+    super()
+    if (typeof time === "number" && (!Number.isInteger(time) || time <= 0)) {
+      throw new TypeError("Invalid time");
+    }
+    this.#time = time ?? 500;
+  }
+
+  /**
+   * Indicates that there are some pending changes.
+   *
+   * @type {boolean}
+   */
+  get hasPendingChanges() {
+    return this.#hasPendingChanges;
+  }
+
+  #onTimeout = () => {
+    this.dispatchEvent(new Event("change"));
+  };
+
+  /**
+   * Tells the ChangeController that a change has been made
+   * but that you need to delay the notification (and debounce)
+   * for sometime.
+   */
+  notifyDebounced() {
+    this.#hasPendingChanges = true;
+    clearTimeout(this.#timeout);
+    this.#timeout = setTimeout(this.#onTimeout, this.#time);
+  }
+
+  /**
+   * Tells the ChangeController that a change should be notified
+   * immediately.
+   */
+  notifyImmediately() {
+    clearTimeout(this.#timeout);
+    this.#onTimeout();
+  }
+
+  /**
+   * Disposes the referenced resources.
+   */
+  dispose() {
+    if (this.hasPendingChanges) {
+      this.notifyImmediately();
+    }
+    clearTimeout(this.#timeout);
+  }
+}
+
+export default ChangeController;
--- a/frontend/text-editor/editor/controllers/ChangeController.test.js
+++ b/frontend/text-editor/editor/controllers/ChangeController.test.js
@ -0,0 +1,36 @@
+import { expect, describe, test, vi } from 'vitest'
+import ChangeController from './ChangeController'
+
+describe("ChangeController", () => {
+  test("Creating a ChangeController without a valid time should throw", () => {
+    expect(() => new ChangeController(Infinity)).toThrowError('Invalid time')
+  });
+
+  test("A ChangeController should dispatch an event when `notifyImmediately` is called", () => {
+    const changeListener = vi.fn();
+    const changeController = new ChangeController(10);
+    changeController.addEventListener("change", changeListener)
+    changeController.notifyImmediately();
+    expect(changeController.hasPendingChanges).toBe(false);
+    expect(changeListener).toBeCalled(1);
+  });
+
+  test("A ChangeController should dispatch an event when `notifyDebounced` is called", async () => {
+    return new Promise((resolve) => {
+      const changeController = new ChangeController(10);
+      changeController.addEventListener("change", () => resolve());
+      changeController.notifyDebounced();
+      expect(changeController.hasPendingChanges).toBe(true);
+    });
+  });
+
+  test("A ChangeController should dispatch an event when `notifyDebounced` is called and disposed is called right after", async () => {
+    return new Promise((resolve) => {
+      const changeController = new ChangeController(10);
+      changeController.addEventListener("change", () => resolve());
+      changeController.notifyDebounced();
+      expect(changeController.hasPendingChanges).toBe(true);
+      changeController.dispose();
+    });
+  });
+});
--- a/frontend/text-editor/editor/controllers/SafeGuard.js
+++ b/frontend/text-editor/editor/controllers/SafeGuard.js
@ -0,0 +1,34 @@
+/**
+ * Max. amount of time we should allow.
+ *
+ * @type {number}
+ */
+const SAFE_GUARD_TIME = 1000;
+
+/**
+ * Time at which the safeguard started.
+ *
+ * @type {number}
+ */
+let startTime = Date.now();
+
+/**
+ * Marks the start of the safeguard.
+ */
+export function start() {
+  startTime = Date.now();
+}
+
+/**
+ * Checks if the safeguard should throw.
+ */
+export function update() {
+  if (Date.now - startTime >= SAFE_GUARD_TIME) {
+    throw new Error('Safe guard timeout');
+  }
+}
+
+export default {
+  start,
+  update,
+}
--- a/frontend/text-editor/editor/controllers/SelectionController.js
+++ b/frontend/text-editor/editor/controllers/SelectionController.js
--- a/frontend/text-editor/editor/controllers/SelectionController.test.js
+++ b/frontend/text-editor/editor/controllers/SelectionController.test.js
--- a/frontend/text-editor/editor/controllers/SelectionDirection.js
+++ b/frontend/text-editor/editor/controllers/SelectionDirection.js
@ -0,0 +1,16 @@
+/**
+ * Indicates the direction of the selection.
+ *
+ * @readonly
+ * @enum {number}
+ */
+export const SelectionDirection = {
+  /** The anchorNode is behind the focusNode  */
+  FORWARD: 1,
+  /** The focusNode and the anchorNode are collapsed */
+  NONE: 0,
+  /** The focusNode is behind the anchorNode */
+  BACKWARD: -1,
+};
+
+export default SelectionDirection;
--- a/frontend/text-editor/editor/debug/SelectionControllerDebug.js
+++ b/frontend/text-editor/editor/debug/SelectionControllerDebug.js
@ -0,0 +1,75 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Used for handling debugging.
+ */
+export class SelectionControllerDebug {
+  /**
+   * @type {Object.<string, HTMLElement>}
+   */
+  #elements = null;
+
+  /**
+   * Constructor
+   *
+   * @param {Object.<string, HTMLElement>} elements List of elements used to debug the SelectionController
+   */
+  constructor(elements) {
+    this.#elements = elements;
+  }
+
+  getNodeDescription(node, offset) {
+    if (!node) return "null";
+    return `${node.nodeName} ${
+      node.nodeType === Node.TEXT_NODE
+        ? node.nodeValue + (typeof offset === "number" ? `(${offset})` : "")
+        : node.dataset.itype
+    }`;
+  }
+
+  update(selectionController) {
+    this.#elements.direction.value = selectionController.direction;
+    this.#elements.multiElement.checked = selectionController.isMulti;
+    this.#elements.multiInlineElement.checked =
+      selectionController.isMultiInline;
+    this.#elements.multiParagraphElement.checked =
+      selectionController.isMultiParagraph;
+    this.#elements.isParagraphStart.checked =
+      selectionController.isParagraphStart;
+    this.#elements.isParagraphEnd.checked = selectionController.isParagraphEnd;
+    this.#elements.isInlineStart.checked = selectionController.isInlineStart;
+    this.#elements.isInlineEnd.checked = selectionController.isInlineEnd;
+    this.#elements.isTextAnchor.checked = selectionController.isTextAnchor;
+    this.#elements.isTextFocus.checked = selectionController.isTextFocus;
+    this.#elements.focusNode.value = this.getNodeDescription(
+      selectionController.focusNode,
+      selectionController.focusOffset
+    );
+    this.#elements.focusOffset.value = selectionController.focusOffset;
+    this.#elements.anchorNode.value = this.getNodeDescription(
+      selectionController.anchorNode,
+      selectionController.anchorOffset
+    );
+    this.#elements.anchorOffset.value = selectionController.anchorOffset;
+    this.#elements.focusInline.value = this.getNodeDescription(
+      selectionController.focusInline
+    );
+    this.#elements.anchorInline.value = this.getNodeDescription(
+      selectionController.anchorInline
+    );
+    this.#elements.focusParagraph.value = this.getNodeDescription(
+      selectionController.focusParagraph
+    );
+    this.#elements.anchorParagraph.value = this.getNodeDescription(
+      selectionController.anchorParagraph
+    );
+    this.#elements.startContainer.value = this.getNodeDescription(selectionController.startContainer);
+    this.#elements.endContainer.value = this.getNodeDescription(selectionController.endContainer);
+  }
+}
--- a/frontend/text-editor/editor/layout/LayoutType.js
+++ b/frontend/text-editor/editor/layout/LayoutType.js
@ -0,0 +1,19 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Enumeration of types of layout.
+ *
+ * @enum {string}
+ */
+export const LayoutType = {
+  FULL: "full",
+  PARTIAL: "partial",
+};
+
+export default LayoutType;
--- a/frontend/text-editor/editor/selection/Imposter.js
+++ b/frontend/text-editor/editor/selection/Imposter.js
@ -0,0 +1,31 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+/**
+ * Creates a new selection imposter from a list of client rects.
+ *
+ * @param {DOMRect} referenceRect
+ * @param {DOMRectList} clientRects
+ * @returns {DocumentFragment}
+ */
+export function createSelectionImposterFromClientRects(
+  referenceRect,
+  clientRects
+) {
+  const fragment = document.createDocumentFragment();
+  for (const rect of clientRects) {
+    const rectElement = document.createElement("div");
+    rectElement.className = "selection-imposter-rect";
+    rectElement.style.left = `${rect.x - referenceRect.x}px`;
+    rectElement.style.top = `${rect.y - referenceRect.y}px`;
+    rectElement.style.width = `${rect.width}px`;
+    rectElement.style.height = `${rect.height}px`;
+    fragment.appendChild(rectElement);
+  }
+  return fragment;
+}
--- a/frontend/text-editor/editor/selection/Imposter.spec.js
+++ b/frontend/text-editor/editor/selection/Imposter.spec.js
@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+import { createSelectionImposterFromClientRects } from "./Imposter.js";
+
+/* @vitest-environment jsdom */
+test("Create selection DOM rects from client rects", () => {
+  const rect = new DOMRect(20, 20, 100, 50);
+  const clientRects = [
+    new DOMRect(20, 20, 100, 20),
+    new DOMRect(20, 50, 50, 20)
+  ];
+  const fragment = createSelectionImposterFromClientRects(rect, clientRects);
+  expect(fragment).toBeInstanceOf(DocumentFragment);
+  expect(fragment.childNodes).toHaveLength(2);
+});
--- a/frontend/text-editor/index.html
+++ b/frontend/text-editor/index.html
@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playwrite+ES:wght@100..400&family=Playwrite+NZ:wght@100..400&family=Playwrite+US+Trad:wght@100..400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Penpot - Text Editor Playground</title>
+    <style>
+      #output {
+        white-space: pre-wrap;
+      }
+    </style>
+  </head>
+  <body>
+    <form>
+      <fieldset>
+        <legend>Styles</legend>
+        <!-- Font -->
+        <div class="form-group">
+          <label for="font-family">Font family</label>
+          <select id="font-family">
+            <option value="Open+Sans">Open Sans</option>
+            <option value="sourcesanspro">Source Sans Pro</option>
+            <option value="whatever">Whatever</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="font-size">Font size</label>
+          <input id="font-size" type="number" value="14" />
+        </div>
+        <div class="form-group">
+          <label for="font-weight">Font weight</label>
+          <select id="font-weight">
+            <option value="100">100</option>
+            <option value="200">200</option>
+            <option value="300">300</option>
+            <option value="400">400 (normal)</option>
+            <option value="500">500</option>
+            <option value="600">600</option>
+            <option value="700">700 (bold)</option>
+            <option value="800">800</option>
+            <option value="900">900</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="font-style">Font style</label>
+          <select id="font-style">
+            <option value="normal">normal</option>
+            <option value="italic">italic</option>
+            <option value="oblique">oblique</option>
+          </select>
+        </div>
+        <!-- Text attributes -->
+        <div class="form-group">
+          <label for="line-height">Line height</label>
+          <input id="line-height" type="number" value="1.0" />
+        </div>
+        <div class="form-group">
+          <label for="letter-spacing">Letter spacing</label>
+          <input id="letter-spacing" type="number" value="0.0" />
+        </div>
+        <div class="form-group">
+          <label for="direction-ltr">LTR</label>
+          <input id="direction-ltr" type="radio" name="direction" value="ltr" checked />
+        </div>
+        <div class="form-group">
+          <label for="direction-rtl">RTL</label>
+          <input id="direction-rtl" type="radio" name="direction" value="rtl" />
+        </div>
+        <!-- Text Align -->
+        <div class="form-group">
+          <label for="text-align-left">Align left</label>
+          <input id="text-align-left" type="radio" name="text-align" value="left" checked />
+        </div>
+        <div class="form-group">
+          <label for="text-align-center">Align center</label>
+          <input id="text-align-center" type="radio" name="text-align" value="center" />
+        </div>
+        <div class="form-group">
+          <label for="text-align-right">Align right</label>
+          <input id="text-align-right" type="radio" name="text-align" value="right" />
+        </div>
+        <div class="form-group">
+          <label for="text-align-justify">Align justify</label>
+          <input id="text-align-justify" type="radio" name="text-align" value="justify" />
+        </div>
+        <!-- Text Transform -->
+        <div class="form-group">
+          <label for="text-transform-none">None</label>
+          <input id="text-transform-none" type="radio" name="text-transform" value="none" checked />
+        </div>
+        <div class="form-group">
+          <label for="text-transform-uppercase">Uppercase</label>
+          <input id="text-transform-uppercase" type="radio" name="text-transform" value="uppercase" checked />
+        </div>
+        <div class="form-group">
+          <label for="text-transform-capitalize">Capitalize</label>
+          <input id="text-transform-capitalize" type="radio" name="text-transform" value="capitalize" />
+        </div>
+        <div class="form-group">
+          <label for="text-transform-lowercase">Lowercase</label>
+          <input id="text-transform-lowercase" type="radio" name="text-transform" value="lowercase" />
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Debug</legend>
+        <div class="form-group">
+          <label for="direction">Direction</label>
+          <input id="direction" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="focus-node">Focus Node</label>
+          <input id="focus-node" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="focus-offset">Focus offset</label>
+          <input id="focus-offset" readonly type="number">
+        </div>
+        <div class="form-group">
+          <label for="focus-inline">Focus Inline</label>
+          <input id="focus-inline" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="focus-paragraph">Focus Paragraph</label>
+          <input id="focus-paragraph" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="anchor-node">Anchor Node</label>
+          <input id="anchor-node" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="anchor-offset">Anchor offset</label>
+          <input id="anchor-offset" readonly type="number">
+        </div>
+        <div class="form-group">
+          <label for="anchor-inline">Anchor Inline</label>
+          <input id="anchor-inline" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="anchor-paragraph">Anchor Paragraph</label>
+          <input id="anchor-paragraph" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="start-container">Start container</label>
+          <input id="start-container" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="start-offset">Start offset</label>
+          <input id="start-offset" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="end-container">End container</label>
+          <input id="end-container" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="end-offset">End offset</label>
+          <input id="end-offset" readonly type="text" />
+        </div>
+        <div class="form-group">
+          <label for="multi">Multi?</label>
+          <input id="multi" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="multi-inline">Multi inline?</label>
+          <input id="multi-inline" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="multi-paragraph">Multi paragraph?</label>
+          <input id="multi-paragraph" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="is-text-focus">Is text focus?</label>
+          <input id="is-text-focus" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="is-text-anchor">Is text anchor?</label>
+          <input id="is-text-anchor" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="is-paragraph-start">Is paragraph start?</label>
+          <input id="is-paragraph-start" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="is-paragraph-end">Is paragraph end?</label>
+          <input id="is-paragraph-end" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="is-inline-start">Is inline start?</label>
+          <input id="is-inline-start" readonly type="checkbox" />
+        </div>
+        <div class="form-group">
+          <label for="is-inline-end">Is inline end?</label>
+          <input id="is-inline-end" readonly type="checkbox">
+        </div>
+      </fieldset>
+    </form>
+    <!--
+
+      Editor
+
+    -->
+    <div class="text-editor-container align-top">
+      <div
+        id="text-editor-selection-imposter"
+        class="text-editor-selection-imposter"></div>
+      <div
+        class="text-editor-content"
+        contenteditable="true"
+        role="textbox"
+        aria-multiline="true"
+        aria-autocomplete="none"
+        spellcheck="false"
+        autocapitalize="false"></div>
+    </div>
+    <!--
+
+      Text output
+
+    -->
+    <div id="output"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
--- a/frontend/text-editor/jsconfig.json
+++ b/frontend/text-editor/jsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["./*"]
+    }
+  }
+}
--- a/frontend/text-editor/main.js
+++ b/frontend/text-editor/main.js
@ -0,0 +1,216 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) KALEIDOS INC
+ */
+
+import "./style.css";
+import "./editor/TextEditor.css";
+import { TextEditor } from "./editor/TextEditor";
+import { SelectionControllerDebug } from "./editor/debug/SelectionControllerDebug";
+
+const searchParams = new URLSearchParams(location.search);
+const debug = searchParams.has("debug")
+  ? searchParams.get("debug").split(",")
+  : [];
+
+const textEditorSelectionImposterElement = document.getElementById(
+  "text-editor-selection-imposter"
+);
+
+const textEditorElement = document.querySelector(".text-editor-content");
+const textEditor = new TextEditor(textEditorElement, {
+  styleDefaults: {
+    "font-family": "sourcesanspro",
+    "font-size": "14",
+    "font-weight": "400",
+    "font-style": "normal",
+    "line-height": "1.2",
+    "letter-spacing": "0",
+    "direction": "ltr",
+    "text-align": "left",
+    "text-transform": "none",
+    "text-decoration": "none",
+    "--typography-ref-id": '["~#\'",null]',
+    "--typography-ref-file": '["~#\'",null]',
+    "--font-id": '["~#\'","sourcesanspro"]',
+    "--fills": '[["^ ","~:fill-color","#000000","~:fill-opacity",1]]'
+  },
+  selectionImposterElement: textEditorSelectionImposterElement,
+  debug: new SelectionControllerDebug({
+    direction: document.getElementById("direction"),
+    multiElement: document.getElementById("multi"),
+    multiInlineElement: document.getElementById("multi-inline"),
+    multiParagraphElement: document.getElementById("multi-paragraph"),
+    isParagraphStart: document.getElementById("is-paragraph-start"),
+    isParagraphEnd: document.getElementById("is-paragraph-end"),
+    isInlineStart: document.getElementById("is-inline-start"),
+    isInlineEnd: document.getElementById("is-inline-end"),
+    isTextAnchor: document.getElementById("is-text-anchor"),
+    isTextFocus: document.getElementById("is-text-focus"),
+    focusNode: document.getElementById("focus-node"),
+    focusOffset: document.getElementById("focus-offset"),
+    focusInline: document.getElementById("focus-inline"),
+    focusParagraph: document.getElementById("focus-paragraph"),
+    anchorNode: document.getElementById("anchor-node"),
+    anchorOffset: document.getElementById("anchor-offset"),
+    anchorInline: document.getElementById("anchor-inline"),
+    anchorParagraph: document.getElementById("anchor-paragraph"),
+    startContainer: document.getElementById("start-container"),
+    startOffset: document.getElementById("start-offset"),
+    endContainer: document.getElementById("end-container"),
+    endOffset: document.getElementById("end-offset"),
+  }),
+});
+
+const fontFamilyElement = document.getElementById("font-family");
+const fontSizeElement = document.getElementById("font-size");
+const fontWeightElement = document.getElementById("font-weight");
+const fontStyleElement = document.getElementById("font-style");
+
+const directionLTRElement = document.getElementById("direction-ltr");
+const directionRTLElement = document.getElementById("direction-rtl");
+
+const lineHeightElement = document.getElementById("line-height");
+const letterSpacingElement = document.getElementById("letter-spacing");
+
+const textAlignLeftElement = document.getElementById("text-align-left");
+const textAlignCenterElement = document.getElementById("text-align-center");
+const textAlignRightElement = document.getElementById("text-align-right");
+const textAlignJustifyElement = document.getElementById("text-align-justify");
+
+function onDirectionChange(e) {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  if (e.target.checked) {
+    textEditor.applyStylesToSelection({
+      "direction": e.target.value
+    });
+  }
+}
+
+directionLTRElement.addEventListener("change", onDirectionChange);
+directionRTLElement.addEventListener("change", onDirectionChange);
+
+function onTextAlignChange(e) {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  if (e.target.checked) {
+    textEditor.applyStylesToSelection({
+      "text-align": e.target.value
+    });
+  }
+}
+
+textAlignLeftElement.addEventListener("change", onTextAlignChange);
+textAlignCenterElement.addEventListener("change", onTextAlignChange);
+textAlignRightElement.addEventListener("change", onTextAlignChange);
+textAlignJustifyElement.addEventListener("change", onTextAlignChange);
+
+fontFamilyElement.addEventListener("change", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  textEditor.applyStylesToSelection({
+    "font-family": e.target.value,
+  });
+});
+
+fontWeightElement.addEventListener("change", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  textEditor.applyStylesToSelection({
+    "font-weight": e.target.value,
+  });
+});
+
+fontSizeElement.addEventListener("change", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  textEditor.applyStylesToSelection({
+    "font-size": e.target.value,
+  });
+});
+
+lineHeightElement.addEventListener("change", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  textEditor.applyStylesToSelection({
+    "line-height": e.target.value
+  })
+})
+
+letterSpacingElement.addEventListener("change", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  textEditor.applyStylesToSelection({
+    "letter-spacing": e.target.value
+  })
+})
+
+fontStyleElement.addEventListener("change", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  textEditor.applyStylesToSelection({
+    "font-style": e.target.value,
+  });
+});
+
+function formatHTML(html, options) {
+  const spaces = options?.spaces ?? 4;
+  let indent = 0;
+  return html.replace(/<\/?(.*?)>/g, (fullMatch) => {
+    let str = fullMatch + "\n";
+    if (fullMatch.startsWith("</")) {
+      --indent;
+      str = " ".repeat(indent * spaces) + str;
+    } else {
+      str = " ".repeat(indent * spaces) + str;
+      ++indent;
+      if (fullMatch === "<br>") --indent;
+    }
+    return str;
+  });
+}
+
+const outputElement = document.getElementById("output");
+textEditorElement.addEventListener("input", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  outputElement.textContent = formatHTML(textEditor.element.innerHTML);
+});
+
+textEditor.addEventListener("stylechange", (e) => {
+  if (debug.includes("events")) {
+    console.log(e);
+  }
+  const fontSize = parseInt(e.detail.getPropertyValue("font-size"), 10);
+  const fontWeight = e.detail.getPropertyValue("font-weight");
+  const fontStyle = e.detail.getPropertyValue("font-style");
+  const fontFamily = e.detail.getPropertyValue("font-family");
+
+  fontFamilyElement.value = fontFamily;
+  fontSizeElement.value = fontSize;
+  fontStyleElement.value = fontStyle;
+  fontWeightElement.value = fontWeight;
+
+  const textAlign = e.detail.getPropertyValue("text-align");
+  textAlignLeftElement.checked = textAlign === "left";
+  textAlignCenterElement.checked = textAlign === "center";
+  textAlignRightElement.checked = textAlign === "right";
+  textAlignJustifyElement.checked = textAlign === "justify";
+
+  const direction = e.detail.getPropertyValue("direction");
+  directionLTRElement.checked = direction === "ltr";
+  directionRTLElement.checked = direction === "rtl";
+});
--- a/frontend/text-editor/package.json
+++ b/frontend/text-editor/package.json
@ -0,0 +1,30 @@
+{
+  "name": "@penpot/text-editor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "editor/TextEditor.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "./scripts/build.sh",
+    "preview": "vite preview",
+    "coverage": "vitest run --coverage",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:watch:ui": "vitest --ui",
+    "test:watch:e2e": "vitest --browser"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@types/node": "^20.14.10",
+    "@vitest/browser": "^1.6.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "esbuild": "^0.24.0",
+    "jsdom": "^25.0.0",
+    "playwright": "^1.45.1",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
+  },
+  "packageManager": "yarn@4.3.1"
+}
--- a/frontend/text-editor/public/javascript.svg
+++ b/frontend/text-editor/public/javascript.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
--- a/frontend/text-editor/public/vite.svg
+++ b/frontend/text-editor/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/text-editor/scripts/build.sh
+++ b/frontend/text-editor/scripts/build.sh
@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+esbuild --bundle --minify --sourcemap --target=es2021 --format=esm --platform=browser editor/TextEditor.js --outfile=dist/TextEditor.mjs
--- a/frontend/text-editor/style.css
+++ b/frontend/text-editor/style.css
@ -0,0 +1,14 @@
+:root {
+  background-color: #333;
+  color: #eee;
+}
+
+.text-editor-container {
+  background-color: white;
+}
+
+#output {
+  font-family: monospace;
+  padding: 1rem;
+  border: 1px solid #333;
+}
--- a/frontend/text-editor/test/TextEditorMock.js
+++ b/frontend/text-editor/test/TextEditorMock.js
@ -0,0 +1,127 @@
+import { createRoot } from "~/editor/content/dom/Root";
+import { createParagraph } from "~/editor/content/dom/Paragraph";
+import { createEmptyInline, createInline } from "~/editor/content/dom/Inline";
+import { createLineBreak } from "~/editor/content/dom/LineBreak";
+
+export class TextEditorMock extends EventTarget {
+  /**
+   * Returns the template used for the text editor mock.
+   *
+   * @returns {HTMLDivElement}
+   */
+  static getTemplate() {
+    const container = document.createElement("div");
+    container.id = "test";
+    container.innerHTML = `<div class="text-editor-container align-top">
+    <div
+      id="text-editor-selection-imposter"
+      class="text-editor-selection-imposter"></div>
+    <div
+      class="text-editor-content"
+      contenteditable="true"
+      role="textbox"
+      aria-multiline="true"
+      aria-autocomplete="none"
+      spellcheck="false"
+      autocapitalize="false"></div>
+  </div>`;
+    document.body.appendChild(container);
+    return container;
+  }
+
+  /**
+   * Creates an editor with a custom root.
+   *
+   * @param {HTMLDivElement} root
+   * @returns {HTMLDivElement}
+   */
+  static createTextEditorMockWithRoot(root) {
+    const container = TextEditorMock.getTemplate();
+    const selectionImposterElement = container.querySelector(
+      ".text-editor-selection-imposter"
+    );
+    const textEditorMock = new TextEditorMock(
+      container.querySelector(".text-editor-content"),
+      {
+        root,
+        selectionImposterElement,
+      }
+    );
+    return textEditorMock;
+  }
+
+  /**
+   * Creates a TextEditor mock with paragraphs.
+   *
+   * @param {Array<HTMLDivElement>} paragraphs
+   * @returns
+   */
+  static createTextEditorMockWithParagraphs(paragraphs) {
+    const root = createRoot(paragraphs);
+    return this.createTextEditorMockWithRoot(root);
+  }
+
+  /**
+   * Creates an empty TextEditor mock.
+   *
+   * @returns
+   */
+  static createTextEditorMockEmpty() {
+    const root = createRoot([
+      createParagraph([createInline(createLineBreak())]),
+    ]);
+    return this.createTextEditorMockWithRoot(root);
+  }
+
+  /**
+   * Creates a TextEditor mock with some text.
+   *
+   * NOTE: If the text is empty an empty inline will be
+   * created.
+   *
+   * @param {string} text
+   * @returns
+   */
+  static createTextEditorMockWithText(text) {
+    return this.createTextEditorMockWithParagraphs([
+      createParagraph([
+        text.length === 0
+        ? createEmptyInline()
+        : createInline(new Text(text))
+      ]),
+    ]);
+  }
+
+  /**
+   * Creates a TextEditor mock with some inlines and
+   * only one paragraph.
+   *
+   * @param {Array<HTMLSpanElement>} inlines
+   * @returns
+   */
+  static createTextEditorMockWithParagraph(inlines) {
+    return this.createTextEditorMockWithParagraphs([createParagraph(inlines)]);
+  }
+
+  #element = null;
+  #root = null;
+  #selectionImposterElement = null;
+
+  constructor(element, options) {
+    super();
+    this.#element = element;
+    this.#root = options?.root;
+    this.#selectionImposterElement = options?.selectionImposterElement;
+    this.#element.appendChild(options?.root);
+  }
+
+  get element() {
+    return this.#element;
+  }
+
+  get root() {
+    return this.#root;
+  }
+}
+
+export default TextEditorMock;
--- a/frontend/text-editor/vite.config.js
+++ b/frontend/text-editor/vite.config.js
@ -0,0 +1,46 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import { coverageConfigDefaults } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~": resolve("."),
+    },
+  },
+  build: {
+    minify: false,
+    sourcemap: true,
+    lib: {
+      entry: "editor/TextEditor.js",
+      name: "TextEditor",
+      fileName: "TextEditor",
+      formats: ["es"],
+    },
+    terserOptions: {
+      compress: true,
+      mangle: true,
+    },
+  },
+  test: {
+    coverage: {
+      enabled: true,
+      exclude: ["main.js", "**/scripts/**", ...coverageConfigDefaults.exclude],
+    },
+    poolOptions: {
+      threads: {
+        singleThread: true,
+      },
+    },
+    environmentOptions: {
+      jsdom: {
+        resources: "usable",
+      },
+    },
+    browser: {
+      name: "chromium",
+      provider: "playwright",
+    },
+    exclude: ["main.js", "**/scripts/**", "**/node_modules/**", "**/dist/**"],
+  },
+});
--- a/frontend/text-editor/yarn.lock
+++ b/frontend/text-editor/yarn.lock
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -948,12 +948,11 @@ __metadata:
  languageName: node
  linkType: hard

-"@penpot/text-editor@penpot/penpot-text-editor#a100aad8d0efcbb070bed9144dbd2782547e78ba":
-  version: 0.0.0
-  resolution: "@penpot/text-editor@https://github.com/penpot/penpot-text-editor.git#commit=a100aad8d0efcbb070bed9144dbd2782547e78ba"
-  checksum: 10c0/328c827cd740c5e05df678083cfb1d2b6d006b56523daa0bd2a3c2936a0490a2ae4d0e69a3aec428674609a22a5fafdd5600aae1399cb3f4ed5b80e497c74a5c
+"@penpot/text-editor@portal:./text-editor::locator=frontend%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@penpot/text-editor@portal:./text-editor::locator=frontend%40workspace%3A."
  languageName: node
-  linkType: hard
+  linkType: soft

 "@pkgjs/parseargs@npm:^0.11.0":
  version: 0.11.0
@ -4300,7 +4299,7 @@ __metadata:
    "@penpot/hljs": "portal:./vendor/hljs"
    "@penpot/mousetrap": "portal:./vendor/mousetrap"
    "@penpot/svgo": "penpot/svgo#c6fba7a4dcfbc27b643e7fc0c94fc98cf680b77b"
-    "@penpot/text-editor": "penpot/penpot-text-editor#a100aad8d0efcbb070bed9144dbd2782547e78ba"
+    "@penpot/text-editor": "portal:./text-editor"
    "@playwright/test": "npm:1.48.1"
    "@storybook/addon-essentials": "npm:^8.3.6"
    "@storybook/addon-themes": "npm:^8.3.6"
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>