diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
index 7e84778ac..c6d5eb39c 100644
--- a/apps/frontend/package-lock.json
+++ b/apps/frontend/package-lock.json
@@ -40,7 +40,11 @@
         "react-transition-group": "^4.4.5",
         "recharts": "^2.12.0",
         "redux": "^4.2.1",
+        "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
+        "slate": "^0.124.1",
+        "slate-history": "^0.113.1",
+        "slate-react": "^0.124.2",
         "uuid": "^11.1.0",
         "vite": "^6.3.5",
         "vite-plugin-svgr": "^4.3.0",
@@ -4014,6 +4018,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@material-ui/core": {
       "version": "4.12.4",
       "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
@@ -9985,6 +9995,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "license": "MIT"
@@ -11376,6 +11392,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/direction": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+      "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
+      "license": "MIT",
+      "bin": {
+        "direction": "cli.js"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "dev": true,
@@ -11445,11 +11474,14 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
-      "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.7.tgz",
+      "integrity": "sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==",
       "license": "(MPL-2.0 OR Apache-2.0)",
-      "optional": true
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
     },
     "node_modules/domutils": {
       "version": "3.2.2",
@@ -13588,6 +13620,74 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
@@ -13614,6 +13714,35 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5/node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -13626,6 +13755,33 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript/node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "license": "BSD-3-Clause",
@@ -13679,6 +13835,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/html2canvas": {
       "version": "1.4.1",
       "license": "MIT",
@@ -13701,16 +13867,6 @@
         "jspdf": "^3.0.0"
       }
     },
-    "node_modules/html2pdf.js/node_modules/dompurify": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
-      "integrity": "sha512-mLPd29uoRe9HpvwP2TxClGQBzGXeEC/we/q+bFlmPPmj2p2Ugl3r6ATu/UU1v77DXNcehiBg9zsr1dREyA/dJQ==",
-      "license": "(MPL-2.0 OR Apache-2.0)",
-      "optional": true,
-      "optionalDependencies": {
-        "@types/trusted-types": "^2.0.7"
-      }
-    },
     "node_modules/html2pdf.js/node_modules/jspdf": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
@@ -14180,6 +14336,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-hotkey": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
+      "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
+      "license": "MIT"
+    },
     "node_modules/is-in-browser": {
       "version": "1.1.3",
       "license": "MIT"
@@ -14231,6 +14393,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "dev": true,
@@ -14695,6 +14866,13 @@
         "html2canvas": "^1.0.0-rc.5"
       }
     },
+    "node_modules/jspdf/node_modules/dompurify": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.9.tgz",
+      "integrity": "sha512-i6mvVmWN4xo9LrhCOZrDgSs9noW6nOahbrmzjRbPF36YPyj5Ue5lgok0MHDWkG7xzpWFO2OYttXdzM7rJxHvNA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true
+    },
     "node_modules/jss": {
       "version": "10.10.0",
       "license": "MIT",
@@ -16689,7 +16867,6 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -16702,7 +16879,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
       "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -17579,6 +17755,21 @@
         }
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
@@ -18032,6 +18223,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -18240,6 +18440,76 @@
         "node": ">=8"
       }
     },
+    "node_modules/slate": {
+      "version": "0.124.1",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.124.1.tgz",
+      "integrity": "sha512-ii7DwezgvbLAyKtHBIunjTR1kzbNfYLCUKLMzJELlbTZkvHzX4DzN7HKIwcakf6dPxO6AoeT/P7kHOcyTym/hA==",
+      "license": "MIT"
+    },
+    "node_modules/slate-dom": {
+      "version": "0.124.1",
+      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.124.1.tgz",
+      "integrity": "sha512-D3yVibjLZM4Oj4MmXxOEXbjrlf4wJez3OvGABBNYrAP7gXb0d96tKNtWZ0hGm/5y84idw/LHjZ7W1uTYqFR9rQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
+        "direction": "^1.0.4",
+        "is-hotkey": "^0.2.0",
+        "is-plain-object": "^5.0.0",
+        "lodash": "^4.17.21",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "tiny-invariant": "1.3.1"
+      },
+      "peerDependencies": {
+        "slate": ">=0.121.0"
+      }
+    },
+    "node_modules/slate-dom/node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/slate-history": {
+      "version": "0.113.1",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.113.1.tgz",
+      "integrity": "sha512-J9NSJ+UG2GxoW0lw5mloaKcN0JI0x2IA5M5FxyGiInpn+QEutxT1WK7S/JneZCMFJBoHs1uu7S7e6pxQjubHmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^5.0.0"
+      },
+      "peerDependencies": {
+        "slate": ">=0.65.3"
+      }
+    },
+    "node_modules/slate-react": {
+      "version": "0.124.2",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.124.2.tgz",
+      "integrity": "sha512-2B6ZZX5qKYeISNaQ9cDuvvp0tWydnHUPuGxyVJZfjD+W00X34dGaAF/5ZyVMZt/O//sf0Glbgd7+NBHRWjiA7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
+        "direction": "^1.0.4",
+        "is-hotkey": "^0.2.0",
+        "lodash": "^4.17.21",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "tiny-invariant": "1.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0",
+        "slate": ">=0.121.0",
+        "slate-dom": ">=0.119.1"
+      }
+    },
+    "node_modules/slate-react/node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "license": "MIT"
+    },
     "node_modules/snake-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
@@ -19819,6 +20089,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
@@ -20542,6 +20826,16 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "2.1.4",
       "license": "Apache-2.0"
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 772cee9f0..32db0074e 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -53,7 +53,11 @@
     "react-transition-group": "^4.4.5",
     "recharts": "^2.12.0",
     "redux": "^4.2.1",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "slate": "^0.124.1",
+    "slate-history": "^0.113.1",
+    "slate-react": "^0.124.2",
     "uuid": "^11.1.0",
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.3.0",
diff --git a/apps/frontend/src/components/Questionnaire/ReviewFormDialog.test.tsx b/apps/frontend/src/components/Questionnaire/ReviewFormDialog.test.tsx
index e33969c07..3d4770cbd 100644
--- a/apps/frontend/src/components/Questionnaire/ReviewFormDialog.test.tsx
+++ b/apps/frontend/src/components/Questionnaire/ReviewFormDialog.test.tsx
@@ -5,6 +5,42 @@ import { render, waitFor, within } from "../../test-utils";
 
 import ReviewFormDialog from "./ReviewFormDialog";
 
+vi.mock("../RichTextEditor", () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  const { forwardRef } = require("react");
+  return {
+    default: forwardRef(
+      ({
+        value,
+        onChange,
+        onTextLengthChange,
+        "data-testid": dataTestId,
+        placeholder,
+        disabled,
+      }: {
+        value: string;
+        onChange: (v: string) => void;
+        onTextLengthChange?: (n: number) => void;
+        "data-testid"?: string;
+        placeholder?: string;
+        disabled?: boolean;
+      }) => (
+        <div data-testid={dataTestId}>
+          <textarea
+            placeholder={placeholder}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => {
+              onChange(e.target.value);
+              onTextLengthChange?.(e.target.value.length);
+            }}
+          />
+        </div>
+      )
+    ),
+  };
+});
+
 beforeEach(() => {
   vi.clearAllMocks();
 });
@@ -129,7 +165,7 @@ describe("Implementation Requirements", () => {
     expect(getByTestId("review-form-dialog-confirm-button")).not.toBeDisabled();
   });
 
-  it("should not allow typing more than 10,000 characters in the review comment input field", async () => {
+  it("should show a validation error when the review comment exceeds 10,000 characters", async () => {
     const mockOnSubmit = vi.fn();
 
     const { getByTestId } = render(
@@ -139,15 +175,13 @@ describe("Implementation Requirements", () => {
     const input = within(getByTestId("review-comment")).getByRole("textbox");
     userEvent.paste(input, "X".repeat(10_050));
 
-    expect(input).toHaveValue("X".repeat(10_000));
-
     userEvent.click(getByTestId("review-form-dialog-confirm-button"));
 
     await waitFor(() => {
-      expect(mockOnSubmit).toHaveBeenCalledTimes(1);
+      expect(getByTestId("review-comment-dialog-error")).toBeInTheDocument();
     });
 
-    expect(mockOnSubmit).toHaveBeenCalledWith(expect.stringMatching(/^X{10000}$/));
+    expect(mockOnSubmit).not.toHaveBeenCalled();
   });
 
   it("should display a character counter that updates as the user types", () => {
diff --git a/apps/frontend/src/components/Questionnaire/ReviewFormDialog.tsx b/apps/frontend/src/components/Questionnaire/ReviewFormDialog.tsx
index f95974ecf..77805c508 100644
--- a/apps/frontend/src/components/Questionnaire/ReviewFormDialog.tsx
+++ b/apps/frontend/src/components/Questionnaire/ReviewFormDialog.tsx
@@ -1,35 +1,14 @@
 import { LoadingButton } from "@mui/lab";
 import { Box, Button, ButtonProps, DialogProps, Typography, styled } from "@mui/material";
 import { isEqual } from "lodash";
-import { FC, ReactNode, memo, useMemo } from "react";
+import { FC, ReactNode, memo, useCallback, useMemo, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import Dialog from "../GenericDialog";
+import RichTextEditor from "../RichTextEditor";
+import type { RichTextEditorHandle } from "../RichTextEditor";
+import { getPlainTextLength } from "../RichTextEditor/utils/markdown/markdownSerializer";
 import StyledHelperText from "../StyledFormComponents/StyledHelperText";
-import BaseOutlinedInput from "../StyledFormComponents/StyledOutlinedInput";
-
-const StyledOutlinedInput = styled(BaseOutlinedInput)({
-  marginTop: "24px",
-  width: "fit-content",
-  maxWidth: "100%",
-  "&.MuiInputBase-multiline": {
-    padding: "12px",
-    alignItems: "flex-start",
-  },
-  "& textarea.MuiInputBase-inputMultiline": {
-    resize: "both",
-    overflow: "auto !important",
-    padding: 0,
-    lineHeight: "25px",
-    width: "min(600px, calc(100vw - 150px))",
-    minWidth: "min(750px, calc(100vw - 150px))",
-    maxWidth: "min(1440px, 80vw)",
-    height: "min(375px, calc(100vh - 340px))",
-    minHeight: "clamp(100px, calc(100vh - 340px), 375px)",
-    maxHeight: "min(500px, calc(100vh - 340px))",
-    boxSizing: "border-box",
-  },
-});
 
 const StyledCharacterCount = styled(Box)({
   display: "flex",
@@ -96,7 +75,6 @@ const ReviewFormDialog: FC<Props> = ({
 }) => {
   const {
     handleSubmit,
-    watch,
     control,
     reset,
     formState: { errors },
@@ -108,11 +86,13 @@ const ReviewFormDialog: FC<Props> = ({
     },
   });
 
-  const reviewComment = watch("reviewComment");
+  const [plainTextLength, setPlainTextLength] = useState(0);
+
+  const editorRef = useRef<RichTextEditorHandle>(null);
+
   const reviewCommentLengthLabel = useMemo(
-    () =>
-      Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(reviewComment?.length || 0),
-    [reviewComment]
+    () => Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(plainTextLength),
+    [plainTextLength]
   );
   const reviewCommentLimitLabel = Intl.NumberFormat("en-US", {
     maximumFractionDigits: 0,
@@ -126,11 +106,17 @@ const ReviewFormDialog: FC<Props> = ({
     onCancel?.();
   };
 
+  const handleExited = useCallback(() => {
+    reset();
+    setPlainTextLength(0);
+    editorRef.current?.reset();
+  }, [reset]);
+
   return (
     <StyledDialog
       open={open}
       onClose={handleOnCancel}
-      TransitionProps={{ onExited: () => reset() }}
+      TransitionProps={{ onExited: handleExited }}
       title={header}
       scroll="body"
       actions={
@@ -145,7 +131,7 @@ const ReviewFormDialog: FC<Props> = ({
           <LoadingButton
             data-testid="review-form-dialog-confirm-button"
             onClick={handleSubmit(handleOnSubmit)}
-            disabled={!reviewComment?.trim()?.length || loading}
+            disabled={!plainTextLength || loading}
             loading={loading}
             {...confirmButtonProps}
           >
@@ -160,25 +146,22 @@ const ReviewFormDialog: FC<Props> = ({
         control={control}
         rules={{
           validate: {
-            required: (v: string) => v.trim() !== "" || "This field is required",
+            required: (v: string) => getPlainTextLength(v) > 0 || "This field is required",
             maxLength: (v: string) =>
-              v.trim().length <= MAX_REVIEW_COMMENT_LIMIT ||
+              getPlainTextLength(v) <= MAX_REVIEW_COMMENT_LIMIT ||
               `Maximum of ${reviewCommentLimitLabel} characters allowed`,
           },
         }}
         render={({ field }) => (
-          <StyledOutlinedInput
-            {...field}
-            inputProps={{
-              maxLength: MAX_REVIEW_COMMENT_LIMIT,
-              "aria-label": "Review comment input",
-            }}
-            name="reviewComment"
+          <RichTextEditor
+            ref={editorRef}
+            value={field.value}
+            onChange={field.onChange}
+            onTextLengthChange={setPlainTextLength}
             placeholder={`${reviewCommentLimitLabel} characters allowed`}
+            disabled={loading}
+            aria-label="Review comment input"
             data-testid="review-comment"
-            sx={{ paddingY: "16px" }}
-            required
-            multiline
           />
         )}
       />
diff --git a/apps/frontend/src/components/ReviewCommentsDialog/index.tsx b/apps/frontend/src/components/ReviewCommentsDialog/index.tsx
index c7297cc0c..82603ca18 100644
--- a/apps/frontend/src/components/ReviewCommentsDialog/index.tsx
+++ b/apps/frontend/src/components/ReviewCommentsDialog/index.tsx
@@ -12,6 +12,7 @@ import { CSSProperties } from "react";
 
 import CloseIconSvg from "../../assets/icons/close_icon.svg?react";
 import { FormatDate } from "../../utils";
+import RichTextViewer from "../RichTextViewer";
 
 const StyledDialog = styled(Dialog, {
   shouldForwardProp: (prop) => prop !== "status" && prop !== "getColorScheme",
@@ -72,8 +73,18 @@ const StyledDialogContent = styled(DialogContent)({
   marginBottom: "11px",
   minHeight: "44px",
   overflowX: "hidden",
-  whiteSpace: "pre-line",
   overflowWrap: "break-word",
+  "& p": {
+    margin: "0 0 4px 0",
+    "&:last-child": { marginBottom: 0 },
+  },
+  "& ul, & ol": {
+    margin: "0 0 4px 0",
+    paddingLeft: "24px",
+  },
+  "& li": {
+    lineHeight: "1.6",
+  },
 });
 
 const StyledSubTitle = styled("p")({
@@ -177,7 +188,9 @@ const ReviewCommentsDialog = <T, H>({
         {`Based on submission from ${FormatDate(lastReview?.dateTime, "M/D/YYYY", "N/A")}:`}
       </StyledSubTitle>
     </StyledDialogTitle>
-    <StyledDialogContent>{lastReview?.reviewComment}</StyledDialogContent>
+    <StyledDialogContent>
+      <RichTextViewer content={lastReview?.reviewComment ?? ""} />
+    </StyledDialogContent>
     <DialogActions>
       <StyledCloseButton
         id="close-review-comments-button"
diff --git a/apps/frontend/src/components/RichTextEditor/Controller.test.tsx b/apps/frontend/src/components/RichTextEditor/Controller.test.tsx
new file mode 100644
index 000000000..94398462a
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/Controller.test.tsx
@@ -0,0 +1,63 @@
+import { createEditor } from "slate";
+import { withHistory } from "slate-history";
+import { withReact } from "slate-react";
+
+import { render } from "../../test-utils";
+
+import Controller from "./Controller";
+
+const mockReset = vi.fn();
+
+vi.mock("./hooks/useRichTextEditor", () => ({
+  useRichTextEditor: () => ({
+    editor: withHistory(withReact(createEditor())),
+    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
+    handleChange: vi.fn(),
+    handleKeyDown: vi.fn(),
+    renderElement: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    renderLeaf: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+    reset: mockReset,
+  }),
+}));
+
+vi.mock("./Toolbar", () => ({
+  default: () => <div data-testid="toolbar" />,
+}));
+
+describe("RichTextEditor Controller", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render without crashing", () => {
+    expect(() => render(<Controller value="" onChange={vi.fn()} />)).not.toThrow();
+  });
+
+  it("should render the toolbar when not disabled", () => {
+    const { getByTestId } = render(<Controller value="" onChange={vi.fn()} />);
+
+    expect(getByTestId("toolbar")).toBeInTheDocument();
+  });
+
+  it("should not render the toolbar when disabled", () => {
+    const { queryByTestId } = render(<Controller value="" onChange={vi.fn()} disabled />);
+
+    expect(queryByTestId("toolbar")).not.toBeInTheDocument();
+  });
+
+  it("should apply aria-label to the editable area", () => {
+    const { getByRole } = render(
+      <Controller value="" onChange={vi.fn()} aria-label="Comment input" />
+    );
+
+    expect(getByRole("textbox", { name: "Comment input" })).toBeInTheDocument();
+  });
+
+  it("should set the editable to read-only when disabled", () => {
+    const { getByLabelText } = render(
+      <Controller value="" onChange={vi.fn()} disabled aria-label="Comment input" />
+    );
+
+    expect(getByLabelText("Comment input")).toHaveAttribute("contenteditable", "false");
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/Controller.tsx b/apps/frontend/src/components/RichTextEditor/Controller.tsx
new file mode 100644
index 000000000..6694ead9d
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/Controller.tsx
@@ -0,0 +1,119 @@
+import { Box, styled } from "@mui/material";
+import type { ReactElement } from "react";
+import { forwardRef, useImperativeHandle } from "react";
+import { Editable, Slate } from "slate-react";
+
+import { useRichTextEditor } from "./hooks/useRichTextEditor";
+import Toolbar from "./Toolbar";
+
+const StyledEditorWrapper = styled(Box)({
+  marginTop: "24px",
+  border: "1px solid #6B7294",
+  borderRadius: "4px",
+  display: "flex",
+  flexDirection: "column",
+  width: "fit-content",
+  maxWidth: "100%",
+  boxSizing: "border-box",
+  backgroundColor: "white",
+  "&:hover": {
+    borderColor: "#6B7294",
+  },
+  "&:focus-within": {
+    borderColor: "#209D7D",
+    borderWidth: "1px",
+    boxShadow:
+      "2px 2px 4px 0px rgba(38, 184, 147, 0.10), -1px -1px 6px 0px rgba(38, 184, 147, 0.20)",
+  },
+});
+
+const StyledEditable = styled(Editable)({
+  padding: "12px",
+  lineHeight: "25px",
+  width: "min(750px, calc(100vw - 150px))",
+  minWidth: "min(750px, calc(100vw - 150px))",
+  maxWidth: "min(1440px, 80vw)",
+  height: "min(375px, calc(100vh - 340px))",
+  minHeight: "clamp(100px, calc(100vh - 340px), 375px) !important",
+  maxHeight: "min(500px, calc(100vh - 340px))",
+  resize: "both",
+  overflowY: "auto",
+  overflowX: "hidden",
+  boxSizing: "border-box",
+  outline: "none",
+  backgroundColor: "white",
+  "& [data-slate-placeholder]": {
+    top: "12px !important",
+  },
+  "& li [data-slate-placeholder]": {
+    display: "none !important",
+  },
+  "& p": {
+    margin: "0 0 4px 0",
+    "&:last-child": { marginBottom: 0 },
+  },
+  "& ul, & ol": {
+    margin: "0 0 4px 0",
+    paddingLeft: "24px",
+    "&:last-child": { marginBottom: 0 },
+  },
+  "& li": {
+    lineHeight: "25px",
+  },
+});
+
+export type RichTextEditorHandle = {
+  reset: () => void;
+};
+
+export type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  onTextLengthChange?: (length: number) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  "aria-label"?: string;
+  "data-testid"?: string;
+};
+
+const Controller = forwardRef<RichTextEditorHandle, Props>(
+  (
+    {
+      value,
+      onChange,
+      onTextLengthChange,
+      placeholder,
+      disabled = false,
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+    },
+    ref
+  ): ReactElement => {
+    const { editor, initialValue, handleChange, handleKeyDown, renderElement, renderLeaf, reset } =
+      useRichTextEditor({ value, onChange, onTextLengthChange });
+
+    useImperativeHandle(ref, () => ({ reset }), [reset]);
+
+    return (
+      <StyledEditorWrapper data-testid={dataTestId}>
+        <Slate editor={editor} initialValue={initialValue} onChange={handleChange}>
+          {!disabled ? <Toolbar /> : null}
+
+          <StyledEditable
+            renderElement={renderElement}
+            renderLeaf={renderLeaf}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            readOnly={disabled}
+            aria-label={ariaLabel}
+            aria-multiline
+          />
+        </Slate>
+      </StyledEditorWrapper>
+    );
+  }
+);
+
+Controller.displayName = "RichTextEditor";
+
+export default Controller;
diff --git a/apps/frontend/src/components/RichTextEditor/EditorElement.test.tsx b/apps/frontend/src/components/RichTextEditor/EditorElement.test.tsx
new file mode 100644
index 000000000..d402c991b
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/EditorElement.test.tsx
@@ -0,0 +1,71 @@
+import { FC, ReactNode } from "react";
+import { axe } from "vitest-axe";
+
+import { render } from "../../test-utils";
+
+import EditorElement from "./EditorElement";
+
+const baseAttributes = { "data-slate-node": "element" } as never;
+
+const TestParent: FC<{ children: ReactNode; type?: string }> = ({
+  children,
+  type = "paragraph",
+}) => (
+  <EditorElement attributes={baseAttributes} element={{ type, children: [] } as never}>
+    {children}
+  </EditorElement>
+);
+
+describe("Accessibility", () => {
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<TestParent>Hello</TestParent>);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should render without crashing", () => {
+    expect(() => render(<TestParent>Hello</TestParent>)).not.toThrow();
+  });
+
+  it("should render a paragraph by default", () => {
+    const { container } = render(<TestParent>Hello</TestParent>);
+
+    expect(container.querySelector("p")).toBeInTheDocument();
+    expect(container).toHaveTextContent("Hello");
+  });
+
+  it("should render a <ul> for bulleted-list", () => {
+    const { container } = render(<TestParent type="bulleted-list">Item</TestParent>);
+
+    expect(container.querySelector("ul")).toBeInTheDocument();
+  });
+
+  it("should render an <ol> for numbered-list", () => {
+    const { container } = render(<TestParent type="numbered-list">Item</TestParent>);
+
+    expect(container.querySelector("ol")).toBeInTheDocument();
+  });
+
+  it("should render an <li> for list-item", () => {
+    const { container } = render(
+      <ul>
+        <TestParent type="list-item">Item</TestParent>
+      </ul>
+    );
+
+    expect(container.querySelector("li")).toBeInTheDocument();
+  });
+
+  it("should fall back to a paragraph for an unknown type", () => {
+    const { container } = render(<TestParent type={"unknown" as never}>Hello</TestParent>);
+
+    expect(container.querySelector("p")).toBeInTheDocument();
+    expect(container).toHaveTextContent("Hello");
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/EditorElement.tsx b/apps/frontend/src/components/RichTextEditor/EditorElement.tsx
new file mode 100644
index 000000000..2607240d2
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/EditorElement.tsx
@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+import type { RenderElementProps } from "slate-react";
+
+import type { BlockFormat } from "./types";
+
+type ElementRenderer = (props: RenderElementProps) => ReactElement;
+
+const renderParagraph: ElementRenderer = ({ attributes, children }) => (
+  <p {...attributes}>{children}</p>
+);
+
+const ELEMENT_RENDERERS: Record<BlockFormat, ElementRenderer> = {
+  paragraph: renderParagraph,
+  "bulleted-list": ({ attributes, children }) => <ul {...attributes}>{children}</ul>,
+  "numbered-list": ({ attributes, children }) => <ol {...attributes}>{children}</ol>,
+  "list-item": ({ attributes, children }) => <li {...attributes}>{children}</li>,
+};
+
+/**
+ * Renders a Slate block element as its corresponding HTML element.
+ *
+ */
+const EditorElement = (props: RenderElementProps): ReactElement => {
+  const renderer = ELEMENT_RENDERERS[props.element.type] ?? renderParagraph;
+
+  return renderer(props);
+};
+
+export default EditorElement;
diff --git a/apps/frontend/src/components/RichTextEditor/EditorLeaf.test.tsx b/apps/frontend/src/components/RichTextEditor/EditorLeaf.test.tsx
new file mode 100644
index 000000000..07dbce462
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/EditorLeaf.test.tsx
@@ -0,0 +1,76 @@
+import { FC, ReactNode } from "react";
+import { axe } from "vitest-axe";
+
+import { render } from "../../test-utils";
+
+import EditorLeaf from "./EditorLeaf";
+
+const baseProps = {
+  attributes: { "data-slate-leaf": true } as never,
+  text: { text: "" },
+};
+
+const TestParent: FC<{ children: ReactNode; leaf?: Record<string, unknown> }> = ({
+  children,
+  leaf = {},
+}) => (
+  <EditorLeaf {...baseProps} leaf={{ text: "", ...leaf }} text={{ text: "" }}>
+    {children}
+  </EditorLeaf>
+);
+
+describe("Accessibility", () => {
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<TestParent>Hello</TestParent>);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should render without crashing", () => {
+    expect(() => render(<TestParent>Hello</TestParent>)).not.toThrow();
+  });
+
+  it("should render plain text without marks", () => {
+    const { container } = render(<TestParent>Hello</TestParent>);
+
+    expect(container.querySelector("strong")).not.toBeInTheDocument();
+    expect(container.querySelector("em")).not.toBeInTheDocument();
+    expect(container.querySelector("u")).not.toBeInTheDocument();
+    expect(container).toHaveTextContent("Hello");
+  });
+
+  it("should wrap text in <strong> when bold is true", () => {
+    const { container } = render(<TestParent leaf={{ bold: true }}>Hello</TestParent>);
+
+    expect(container.querySelector("strong")).toBeInTheDocument();
+  });
+
+  it("should wrap text in <em> when italic is true", () => {
+    const { container } = render(<TestParent leaf={{ italic: true }}>Hello</TestParent>);
+
+    expect(container.querySelector("em")).toBeInTheDocument();
+  });
+
+  it("should wrap text in <u> when underline is true", () => {
+    const { container } = render(<TestParent leaf={{ underline: true }}>Hello</TestParent>);
+
+    expect(container.querySelector("u")).toBeInTheDocument();
+  });
+
+  it("should nest all marks when bold, italic, and underline are true", () => {
+    const { container } = render(
+      <TestParent leaf={{ bold: true, italic: true, underline: true }}>Hello</TestParent>
+    );
+
+    expect(container.querySelector("strong")).toBeInTheDocument();
+    expect(container.querySelector("em")).toBeInTheDocument();
+    expect(container.querySelector("u")).toBeInTheDocument();
+    expect(container).toHaveTextContent("Hello");
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/EditorLeaf.tsx b/apps/frontend/src/components/RichTextEditor/EditorLeaf.tsx
new file mode 100644
index 000000000..6a9a33ebc
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/EditorLeaf.tsx
@@ -0,0 +1,23 @@
+import { createElement, type ReactElement, type ReactNode } from "react";
+import type { RenderLeafProps } from "slate-react";
+
+import { MARK_DEFINITIONS } from "@/config/EditorConfig";
+
+/**
+ * Renders a Slate text leaf with the appropriate inline formatting elements.
+ *
+ * @returns {JSX.Element}
+ */
+const EditorLeaf = ({ attributes, children, leaf }: RenderLeafProps): ReactElement => {
+  const markedContent = MARK_DEFINITIONS.reduce<ReactNode>((content, { format, htmlTag }) => {
+    if (!leaf[format]) {
+      return content;
+    }
+
+    return createElement(htmlTag, null, content);
+  }, children);
+
+  return <span {...attributes}>{markedContent}</span>;
+};
+
+export default EditorLeaf;
diff --git a/apps/frontend/src/components/RichTextEditor/Toolbar.test.tsx b/apps/frontend/src/components/RichTextEditor/Toolbar.test.tsx
new file mode 100644
index 000000000..6802184fd
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/Toolbar.test.tsx
@@ -0,0 +1,213 @@
+import userEvent from "@testing-library/user-event";
+import { FC, ReactNode } from "react";
+import { createEditor, Descendant } from "slate";
+import { withHistory } from "slate-history";
+import { Slate, withReact } from "slate-react";
+import { axe } from "vitest-axe";
+
+import * as EditorConfig from "../../config/EditorConfig";
+import { render } from "../../test-utils";
+
+import Toolbar from "./Toolbar";
+import { isBlockActive, isMarkActive, toggleBlock, toggleMark } from "./utils/editorTransforms";
+
+vi.mock("./utils/editorTransforms", () => ({
+  isMarkActive: vi.fn().mockReturnValue(false),
+  isBlockActive: vi.fn().mockReturnValue(false),
+  toggleMark: vi.fn(),
+  toggleBlock: vi.fn(),
+}));
+
+vi.mock("../../config/EditorConfig", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../config/EditorConfig")>();
+  return {
+    ...actual,
+    MARK_DEFINITIONS: actual.MARK_DEFINITIONS.map((d) => ({ ...d, enabled: true })),
+    BLOCK_DEFINITIONS: actual.BLOCK_DEFINITIONS.map((d) => ({ ...d, enabled: true })),
+  };
+});
+
+const initialValue: Descendant[] = [{ type: "paragraph", children: [{ text: "" }] }];
+
+const TestParent: FC<{ children: ReactNode }> = ({ children }) => {
+  const editor = withHistory(withReact(createEditor()));
+
+  return (
+    <Slate editor={editor} initialValue={initialValue}>
+      {children}
+    </Slate>
+  );
+};
+
+describe("Accessibility", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should render without crashing", () => {
+    const { getByTestId } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByTestId("rich-text-editor-toolbar")).toBeInTheDocument();
+  });
+
+  it("should render all mark buttons", () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByRole("button", { name: "Bold (Ctrl+B)" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Italic (Ctrl+I)" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Underline (Ctrl+U)" })).toBeInTheDocument();
+  });
+
+  it("should render all block buttons", () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByRole("button", { name: "Bullet List" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Numbered List" })).toBeInTheDocument();
+  });
+
+  it("should render undo and redo buttons", () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByRole("button", { name: "Undo" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Redo" })).toBeInTheDocument();
+  });
+
+  it("should disable undo when there is no history", () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByRole("button", { name: "Undo" })).toBeDisabled();
+  });
+
+  it("should disable redo when there is no redo history", () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByRole("button", { name: "Redo" })).toBeDisabled();
+  });
+});
+
+describe("Implementation Requirements", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should call toggleMark with 'bold' when the bold button is clicked", async () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    userEvent.click(getByRole("button", { name: "Bold (Ctrl+B)" }));
+
+    expect(toggleMark).toHaveBeenCalledWith(expect.anything(), "bold");
+  });
+
+  it("should call toggleMark with 'italic' when the italic button is clicked", async () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    userEvent.click(getByRole("button", { name: "Italic (Ctrl+I)" }));
+
+    expect(toggleMark).toHaveBeenCalledWith(expect.anything(), "italic");
+  });
+
+  it("should call toggleMark with 'underline' when the underline button is clicked", async () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    userEvent.click(getByRole("button", { name: "Underline (Ctrl+U)" }));
+
+    expect(toggleMark).toHaveBeenCalledWith(expect.anything(), "underline");
+  });
+
+  it("should call toggleBlock with 'bulleted-list' when the bullet list button is clicked", async () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    userEvent.click(getByRole("button", { name: "Bullet List" }));
+
+    expect(toggleBlock).toHaveBeenCalledWith(expect.anything(), "bulleted-list");
+  });
+
+  it("should call toggleBlock with 'numbered-list' when the numbered list button is clicked", async () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    userEvent.click(getByRole("button", { name: "Numbered List" }));
+
+    expect(toggleBlock).toHaveBeenCalledWith(expect.anything(), "numbered-list");
+  });
+
+  it("should check if the bold mark is active", () => {
+    render(<Toolbar />, { wrapper: TestParent });
+
+    expect(isMarkActive).toHaveBeenCalledWith(expect.anything(), "bold");
+  });
+
+  it("should check if the italic mark is active", () => {
+    render(<Toolbar />, { wrapper: TestParent });
+
+    expect(isMarkActive).toHaveBeenCalledWith(expect.anything(), "italic");
+  });
+
+  it("should check if the underline mark is active", () => {
+    render(<Toolbar />, { wrapper: TestParent });
+
+    expect(isMarkActive).toHaveBeenCalledWith(expect.anything(), "underline");
+  });
+
+  it("should check if the bulleted-list block is active", () => {
+    render(<Toolbar />, { wrapper: TestParent });
+
+    expect(isBlockActive).toHaveBeenCalledWith(expect.anything(), "bulleted-list");
+  });
+
+  it("should check if the numbered-list block is active", () => {
+    render(<Toolbar />, { wrapper: TestParent });
+
+    expect(isBlockActive).toHaveBeenCalledWith(expect.anything(), "numbered-list");
+  });
+
+  it("should hide mark buttons when enabled is false", () => {
+    const [first, ...rest] = EditorConfig.MARK_DEFINITIONS;
+    const spy = vi
+      .spyOn(EditorConfig, "MARK_DEFINITIONS", "get")
+      .mockReturnValue([{ ...first, enabled: false }, ...rest]);
+
+    const { queryByRole, getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(queryByRole("button", { name: "Bold (Ctrl+B)" })).not.toBeInTheDocument();
+    expect(getByRole("button", { name: "Italic (Ctrl+I)" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Underline (Ctrl+U)" })).toBeInTheDocument();
+
+    spy.mockRestore();
+  });
+
+  it("should hide block buttons when enabled is false", () => {
+    const [first, ...rest] = EditorConfig.BLOCK_DEFINITIONS;
+    const spy = vi
+      .spyOn(EditorConfig, "BLOCK_DEFINITIONS", "get")
+      .mockReturnValue([{ ...first, enabled: false }, ...rest]);
+
+    const { queryByRole, getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(queryByRole("button", { name: "Bullet List" })).not.toBeInTheDocument();
+    expect(getByRole("button", { name: "Numbered List" })).toBeInTheDocument();
+
+    spy.mockRestore();
+  });
+
+  it("should show buttons when enabled is true", () => {
+    const { getByRole } = render(<Toolbar />, { wrapper: TestParent });
+
+    expect(getByRole("button", { name: "Bold (Ctrl+B)" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Italic (Ctrl+I)" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Underline (Ctrl+U)" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Bullet List" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "Numbered List" })).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/Toolbar.tsx b/apps/frontend/src/components/RichTextEditor/Toolbar.tsx
new file mode 100644
index 000000000..e18d77058
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/Toolbar.tsx
@@ -0,0 +1,97 @@
+import RedoIcon from "@mui/icons-material/Redo";
+import UndoIcon from "@mui/icons-material/Undo";
+import { Box, styled } from "@mui/material";
+import type { MouseEvent, ReactElement } from "react";
+import { HistoryEditor } from "slate-history";
+import { useSlate } from "slate-react";
+
+import { BLOCK_DEFINITIONS, MARK_DEFINITIONS } from "../../config/EditorConfig";
+
+import ToolbarButton from "./ToolbarButton";
+import type { BlockFormat, MarkFormat } from "./types";
+import { isBlockActive, isMarkActive, toggleBlock, toggleMark } from "./utils/editorTransforms";
+
+const StyledToolbar = styled(Box)({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "2px",
+  padding: "6px 8px",
+  borderBottom: "1px solid #E0E0E0",
+  flexWrap: "wrap",
+});
+
+const ToolbarDivider = styled(Box)({
+  width: "1px",
+  height: "20px",
+  backgroundColor: "#E0E0E0",
+  margin: "0 4px",
+});
+
+const Toolbar = (): ReactElement => {
+  const editor = useSlate();
+
+  const handleMarkMouseDown = (format: MarkFormat) => (e: MouseEvent) => {
+    e.preventDefault();
+    toggleMark(editor, format);
+  };
+
+  const handleBlockMouseDown = (format: BlockFormat) => (e: MouseEvent) => {
+    e.preventDefault();
+    toggleBlock(editor, format);
+  };
+
+  const handleUndo = (e: MouseEvent) => {
+    e.preventDefault();
+    HistoryEditor.undo(editor);
+  };
+
+  const handleRedo = (e: MouseEvent) => {
+    e.preventDefault();
+    HistoryEditor.redo(editor);
+  };
+
+  return (
+    <StyledToolbar data-testid="rich-text-editor-toolbar">
+      {MARK_DEFINITIONS.filter(({ enabled }) => enabled).map(({ format, tooltip, icon }) => (
+        <ToolbarButton
+          key={format}
+          label={tooltip}
+          tooltip={tooltip}
+          icon={icon}
+          active={isMarkActive(editor, format)}
+          pressed={isMarkActive(editor, format)}
+          onMouseDown={handleMarkMouseDown(format)}
+        />
+      ))}
+      {BLOCK_DEFINITIONS.filter(({ enabled }) => enabled).map(({ format, tooltip, icon }) => (
+        <ToolbarButton
+          key={format}
+          label={tooltip}
+          tooltip={tooltip}
+          icon={icon}
+          active={isBlockActive(editor, format)}
+          pressed={isBlockActive(editor, format)}
+          onMouseDown={handleBlockMouseDown(format)}
+        />
+      ))}
+      <ToolbarDivider />
+      <ToolbarButton
+        label="Undo"
+        tooltip="Undo (Ctrl+Z)"
+        icon={UndoIcon}
+        disabled={editor.history.undos.length === 0}
+        onMouseDown={handleUndo}
+      />
+      <ToolbarButton
+        label="Redo"
+        tooltip="Redo (Ctrl+Y)"
+        icon={RedoIcon}
+        disabled={editor.history.redos.length === 0}
+        onMouseDown={handleRedo}
+      />
+    </StyledToolbar>
+  );
+};
+
+export default Toolbar;
diff --git a/apps/frontend/src/components/RichTextEditor/ToolbarButton.test.tsx b/apps/frontend/src/components/RichTextEditor/ToolbarButton.test.tsx
new file mode 100644
index 000000000..03cd211e2
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/ToolbarButton.test.tsx
@@ -0,0 +1,86 @@
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+
+import { render } from "../../test-utils";
+
+import ToolbarButton from "./ToolbarButton";
+
+const MockIcon = () => <svg data-testid="mock-icon" />;
+
+const defaultProps = {
+  label: "Bold",
+  tooltip: "Bold (Ctrl+B)",
+  icon: MockIcon,
+  onMouseDown: vi.fn(),
+};
+
+describe("Accessibility", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should not have any accessibility violations", async () => {
+    const { container } = render(<ToolbarButton {...defaultProps} />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("should not have any accessibility violations when disabled", async () => {
+    const { container } = render(<ToolbarButton {...defaultProps} disabled />);
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should render without crashing", () => {
+    const { getByRole } = render(<ToolbarButton {...defaultProps} />);
+
+    expect(getByRole("button", { name: "Bold" })).toBeInTheDocument();
+  });
+
+  it("should render the provided icon", () => {
+    const { getByTestId } = render(<ToolbarButton {...defaultProps} />);
+
+    expect(getByTestId("mock-icon")).toBeInTheDocument();
+  });
+
+  it("should display the tooltip on hover", async () => {
+    const { getByRole, findByRole } = render(<ToolbarButton {...defaultProps} />);
+
+    userEvent.hover(getByRole("button", { name: "Bold" }));
+
+    expect(await findByRole("tooltip")).toHaveTextContent("Bold (Ctrl+B)");
+  });
+
+  it("should call onMouseDown when clicked", async () => {
+    const { getByRole } = render(<ToolbarButton {...defaultProps} />);
+
+    userEvent.click(getByRole("button", { name: "Bold" }));
+
+    expect(defaultProps.onMouseDown).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call onMouseDown when disabled", () => {
+    const { getByRole } = render(<ToolbarButton {...defaultProps} disabled />);
+
+    expect(getByRole("button", { name: "Bold" })).toBeDisabled();
+    expect(defaultProps.onMouseDown).not.toHaveBeenCalled();
+  });
+
+  it("should set aria-pressed when pressed is true", () => {
+    const { getByRole } = render(<ToolbarButton {...defaultProps} pressed />);
+
+    expect(getByRole("button", { name: "Bold" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("should set aria-pressed to false when pressed is false", () => {
+    const { getByRole } = render(<ToolbarButton {...defaultProps} pressed={false} />);
+
+    expect(getByRole("button", { name: "Bold" })).toHaveAttribute("aria-pressed", "false");
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/ToolbarButton.tsx b/apps/frontend/src/components/RichTextEditor/ToolbarButton.tsx
new file mode 100644
index 000000000..ca80c09fb
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/ToolbarButton.tsx
@@ -0,0 +1,58 @@
+import { IconButton, Tooltip, styled } from "@mui/material";
+import type { MouseEvent, ReactElement } from "react";
+
+import type { ToolbarIcon } from "./types";
+
+const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active?: boolean }>(({ active }) => ({
+  borderRadius: "4px",
+  padding: "4px",
+  color: active ? "#1976d2" : "#616161",
+  backgroundColor: active ? "rgba(25, 118, 210, 0.08)" : "transparent",
+  "&:hover": {
+    backgroundColor: active ? "rgba(25, 118, 210, 0.12)" : "rgba(0, 0, 0, 0.04)",
+  },
+}));
+
+type Props = {
+  label: string;
+  tooltip: string;
+  icon: ToolbarIcon;
+  active?: boolean;
+  pressed?: boolean;
+  disabled?: boolean;
+  onMouseDown: (event: MouseEvent) => void;
+};
+
+/**
+ * An icon button displayed in the rich text toolbar.
+ *
+ * @returns {JSX.Element}
+ */
+const ToolbarButton = ({
+  label,
+  tooltip,
+  icon: Icon,
+  active = false,
+  pressed,
+  disabled = false,
+  onMouseDown,
+}: Props): ReactElement => (
+  <Tooltip title={tooltip} placement="top">
+    <span>
+      <StyledIconButton
+        active={active}
+        onMouseDown={onMouseDown}
+        aria-label={label}
+        aria-pressed={pressed}
+        size="small"
+        disabled={disabled}
+      >
+        <Icon />
+      </StyledIconButton>
+    </span>
+  </Tooltip>
+);
+
+export default ToolbarButton;
diff --git a/apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.test.tsx b/apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.test.tsx
new file mode 100644
index 000000000..7d9849e1b
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.test.tsx
@@ -0,0 +1,135 @@
+import { act } from "@testing-library/react";
+import type { Descendant } from "slate";
+
+import { renderHook } from "@/test-utils";
+
+import { useRichTextEditor } from "./useRichTextEditor";
+
+vi.mock("../utils/markdown/markdownDeserializer", () => ({
+  deserializeFromMarkdown: vi.fn((): Descendant[] => [
+    { type: "paragraph", children: [{ text: "deserialized" }] },
+  ]),
+}));
+
+vi.mock("../utils/markdown/markdownSerializer", () => ({
+  serializeToMarkdown: vi.fn(() => "serialized"),
+  getPlainTextLength: vi.fn(() => 10),
+}));
+
+vi.mock("../utils/keyboard/keyboardListHandlers", () => ({
+  handleRichTextEditorKeyDown: vi.fn(),
+}));
+
+const defaultProps = {
+  value: "initial",
+  onChange: vi.fn(),
+};
+
+describe("Basic Functionality", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should not throw when initialized", () => {
+    expect(() => renderHook(() => useRichTextEditor(defaultProps))).not.toThrow();
+  });
+
+  it("should return an editor instance", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(result.current.editor).toBeDefined();
+  });
+
+  it("should return the deserialized initial value", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(result.current.initialValue).toEqual([
+      { type: "paragraph", children: [{ text: "deserialized" }] },
+    ]);
+  });
+
+  it("should return renderElement as a function", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(result.current.renderElement).toBeTypeOf("function");
+  });
+
+  it("should return renderLeaf as a function", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(result.current.renderLeaf).toBeTypeOf("function");
+  });
+
+  it("should return handleKeyDown as a function", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(result.current.handleKeyDown).toBeTypeOf("function");
+  });
+
+  it("should return reset as a function", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(result.current.reset).toBeTypeOf("function");
+  });
+});
+
+describe("Implementation Requirements", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should call onChange with serialized markdown when handleChange is called", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() => useRichTextEditor({ ...defaultProps, onChange }));
+
+    act(() => {
+      result.current.handleChange([{ type: "paragraph", children: [{ text: "new" }] }]);
+    });
+
+    expect(onChange).toHaveBeenCalledWith("serialized");
+  });
+
+  it("should call onTextLengthChange when provided", () => {
+    const onTextLengthChange = vi.fn();
+    const { result } = renderHook(() => useRichTextEditor({ ...defaultProps, onTextLengthChange }));
+
+    act(() => {
+      result.current.handleChange([{ type: "paragraph", children: [{ text: "hello" }] }]);
+    });
+
+    expect(onTextLengthChange).toHaveBeenCalled();
+  });
+
+  it("should not throw when onTextLengthChange is not provided", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    expect(() => {
+      act(() => {
+        result.current.handleChange([{ type: "paragraph", children: [{ text: "hello" }] }]);
+      });
+    }).not.toThrow();
+  });
+
+  it("should reset the editor to an empty document", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.editor.children).toEqual([
+      { type: "paragraph", children: [{ text: "" }] },
+    ]);
+  });
+
+  it("should clear undo/redo history on reset", () => {
+    const { result } = renderHook(() => useRichTextEditor(defaultProps));
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.editor.history.undos).toEqual([]);
+    expect(result.current.editor.history.redos).toEqual([]);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.tsx b/apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.tsx
new file mode 100644
index 000000000..62a6fc1ea
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/hooks/useRichTextEditor.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useState } from "react";
+import type { KeyboardEvent, ReactElement } from "react";
+import { createEditor, Transforms } from "slate";
+import type { Descendant } from "slate";
+import { HistoryEditor } from "slate-history";
+import type { RenderElementProps, RenderLeafProps } from "slate-react";
+
+import EditorElement from "../EditorElement";
+import EditorLeaf from "../EditorLeaf";
+import { createEmptyDocument } from "../utils/documentUtils";
+import { withCustomEditor } from "../utils/editorTransforms";
+import { handleRichTextEditorKeyDown } from "../utils/keyboard/keyboardListHandlers";
+import { deserializeFromMarkdown } from "../utils/markdown/markdownDeserializer";
+import { getPlainTextLength, serializeToMarkdown } from "../utils/markdown/markdownSerializer";
+
+type UseRichTextEditorParams = {
+  value: string;
+  onChange: (value: string) => void;
+  onTextLengthChange?: (length: number) => void;
+};
+
+type UseRichTextEditorResult = {
+  editor: ReturnType<typeof withCustomEditor>;
+  initialValue: Descendant[];
+  handleChange: (newValue: Descendant[]) => void;
+  handleKeyDown: (event: KeyboardEvent) => void;
+  renderElement: (props: RenderElementProps) => ReactElement;
+  renderLeaf: (props: RenderLeafProps) => ReactElement;
+  reset: () => void;
+};
+
+/**
+ * Owns the Slate editor instance, initial value, serialization, render callbacks,
+ * and keyboard handler for the rich text editor component.
+ */
+export const useRichTextEditor = ({
+  value,
+  onChange,
+  onTextLengthChange,
+}: UseRichTextEditorParams): UseRichTextEditorResult => {
+  const [editor] = useState(() => withCustomEditor(createEditor()));
+  const [initialValue] = useState<Descendant[]>(() => deserializeFromMarkdown(value));
+
+  const handleChange = useCallback(
+    (newValue: Descendant[]): void => {
+      const serialized = serializeToMarkdown(newValue);
+      onChange(serialized);
+      onTextLengthChange?.(getPlainTextLength(serialized));
+    },
+    [onChange, onTextLengthChange]
+  );
+
+  const renderElement = useCallback(
+    (props: RenderElementProps): ReactElement => <EditorElement {...props} />,
+    []
+  );
+
+  const renderLeaf = useCallback(
+    (props: RenderLeafProps): ReactElement => <EditorLeaf {...props} />,
+    []
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent): void => {
+      handleRichTextEditorKeyDown(event, editor);
+    },
+    [editor]
+  );
+
+  const reset = useCallback((): void => {
+    Transforms.deselect(editor);
+    editor.children = createEmptyDocument();
+    if (HistoryEditor.isHistoryEditor(editor)) {
+      editor.history = { undos: [], redos: [] };
+    }
+    editor.onChange();
+  }, [editor]);
+
+  return {
+    editor,
+    initialValue,
+    handleChange,
+    handleKeyDown,
+    renderElement,
+    renderLeaf,
+    reset,
+  };
+};
diff --git a/apps/frontend/src/components/RichTextEditor/index.stories.tsx b/apps/frontend/src/components/RichTextEditor/index.stories.tsx
new file mode 100644
index 000000000..1e6ce826b
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/index.stories.tsx
@@ -0,0 +1,98 @@
+import { Box } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import React, { useEffect } from "react";
+
+import RichTextEditor from "./index";
+
+type StoryArgs = React.ComponentProps<typeof RichTextEditor>;
+
+const StatefulEditor = (args: StoryArgs): React.ReactElement => {
+  const { value: initialValue, onChange, onTextLengthChange, ...editorProps } = args;
+  const [value, setValue] = React.useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return (
+    <Box>
+      <RichTextEditor
+        {...editorProps}
+        value={value}
+        onChange={(nextValue) => {
+          setValue(nextValue);
+          onChange(nextValue);
+        }}
+        onTextLengthChange={(length) => {
+          onTextLengthChange?.(length);
+        }}
+      />
+    </Box>
+  );
+};
+
+const meta: Meta<StoryArgs> = {
+  title: "Miscellaneous / Rich Text Editor",
+  component: RichTextEditor,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    value: {
+      control: "text",
+      description: "Markdown value displayed in the editor.",
+    },
+    placeholder: {
+      control: "text",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    onChange: {
+      control: false,
+    },
+    onTextLengthChange: {
+      control: false,
+    },
+  },
+  args: {
+    value: "",
+    placeholder: "Start typing here...",
+    disabled: false,
+    "aria-label": "Rich text editor",
+    onChange: fn(),
+    onTextLengthChange: fn(),
+  },
+  render: (args) => <StatefulEditor {...args} />,
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {};
+
+export const PrefilledContent: Story = {
+  args: {
+    value: [
+      "# Study Summary",
+      "",
+      "This **rich text editor** supports markdown-compatible formatting.",
+      "",
+      "- Bullet one",
+      "- Bullet two",
+      "- Bullet three",
+      "",
+      "1. Ordered item",
+      "2. Another ordered item",
+    ].join("\n"),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: "This editor is in read-only mode.",
+    disabled: true,
+  },
+};
diff --git a/apps/frontend/src/components/RichTextEditor/index.test.tsx b/apps/frontend/src/components/RichTextEditor/index.test.tsx
new file mode 100644
index 000000000..1408df6e1
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/index.test.tsx
@@ -0,0 +1,31 @@
+import { axe } from "vitest-axe";
+
+import { render, waitFor } from "../../test-utils";
+
+import RichTextEditor from "./index";
+
+vi.mock("./Controller", () => ({
+  default: () => <div data-testid="rich-text-editor-controller">Controller</div>,
+}));
+
+describe("Accessibility", () => {
+  it("should have no accessibility violations", async () => {
+    const { container } = render(<RichTextEditor value="" onChange={vi.fn()} />);
+
+    await waitFor(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render without crashing", () => {
+    expect(() => render(<RichTextEditor value="" onChange={vi.fn()} />)).not.toThrow();
+  });
+
+  it("should render the Controller component", () => {
+    const { getByTestId } = render(<RichTextEditor value="" onChange={vi.fn()} />);
+
+    expect(getByTestId("rich-text-editor-controller")).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/index.tsx b/apps/frontend/src/components/RichTextEditor/index.tsx
new file mode 100644
index 000000000..ce720b18e
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/index.tsx
@@ -0,0 +1,17 @@
+import { Suspense, forwardRef, lazy } from "react";
+
+import type { RichTextEditorHandle, Props as RichTextEditorProps } from "./Controller";
+
+const Controller = lazy(() => import("./Controller"));
+
+const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>((props, ref) => (
+  <Suspense fallback={null}>
+    <Controller {...props} ref={ref} />
+  </Suspense>
+));
+
+RichTextEditor.displayName = "RichTextEditor";
+
+export type { RichTextEditorHandle, Props as RichTextEditorProps } from "./Controller";
+
+export default RichTextEditor;
diff --git a/apps/frontend/src/components/RichTextEditor/types.ts b/apps/frontend/src/components/RichTextEditor/types.ts
new file mode 100644
index 000000000..3b13dc39a
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/types.ts
@@ -0,0 +1,74 @@
+import type { SvgIconProps } from "@mui/material/SvgIcon/SvgIcon";
+import type { ElementType, KeyboardEvent } from "react";
+import type { BaseEditor } from "slate";
+import type { HistoryEditor } from "slate-history";
+import type { ReactEditor } from "slate-react";
+
+export type ToolbarIcon = ElementType<SvgIconProps>;
+
+export type MarkFormat = "bold" | "italic" | "underline";
+
+type EditorFormatDefinition = {
+  tooltip: string;
+  icon: ToolbarIcon;
+  enabled: boolean;
+  hotkey?: string;
+  htmlTag?: keyof React.ReactHTML;
+  markdownSyntax?: [prefix: string, suffix: string];
+};
+
+export type MarkDefinition = EditorFormatDefinition & {
+  format: MarkFormat;
+};
+
+export type BlockDefinition = EditorFormatDefinition & {
+  format: ListFormat;
+};
+
+export type TextMarks = Partial<Record<MarkFormat, true>>;
+
+export type ListFormat = "bulleted-list" | "numbered-list";
+
+export type BlockFormat = "paragraph" | ListFormat | "list-item";
+
+export type FormattedText = {
+  text: string;
+} & TextMarks;
+
+export type CustomText = FormattedText;
+
+export type ParagraphElement = {
+  type: "paragraph";
+  children: CustomText[];
+};
+
+export type ListItemElement = {
+  type: "list-item";
+  children: CustomText[];
+};
+
+export type BulletedListElement = {
+  type: "bulleted-list";
+  children: ListItemElement[];
+};
+
+export type NumberedListElement = {
+  type: "numbered-list";
+  children: ListItemElement[];
+};
+
+export type ListElement = BulletedListElement | NumberedListElement;
+
+export type CustomElement = ParagraphElement | ListElement | ListItemElement;
+
+export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
+
+export type KeyboardHandler = (event: KeyboardEvent, editor: CustomEditor) => boolean;
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: CustomEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}
diff --git a/apps/frontend/src/components/RichTextEditor/utils/documentUtils.test.ts b/apps/frontend/src/components/RichTextEditor/utils/documentUtils.test.ts
new file mode 100644
index 000000000..8ee9fbd58
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/documentUtils.test.ts
@@ -0,0 +1,151 @@
+import type { Descendant } from "slate";
+
+import * as utils from "./documentUtils";
+
+describe("isTextNode", () => {
+  it("should return true for a text node", () => {
+    expect(utils.isTextNode({ text: "hello" })).toBe(true);
+  });
+
+  it("should return true for an empty text node", () => {
+    expect(utils.isTextNode({ text: "" })).toBe(true);
+  });
+
+  it("should return false for an element node", () => {
+    const node: Descendant = { type: "paragraph", children: [{ text: "" }] };
+
+    expect(utils.isTextNode(node)).toBe(false);
+  });
+});
+
+describe("isElementNode", () => {
+  it("should return true for a paragraph element", () => {
+    const node: Descendant = { type: "paragraph", children: [{ text: "" }] };
+
+    expect(utils.isElementNode(node)).toBe(true);
+  });
+
+  it("should return true for a list element", () => {
+    const node: Descendant = { type: "bulleted-list", children: [] };
+
+    expect(utils.isElementNode(node)).toBe(true);
+  });
+
+  it("should return false for a text node", () => {
+    expect(utils.isElementNode({ text: "hello" })).toBe(false);
+  });
+});
+
+describe("createEmptyDocument", () => {
+  it("should return a single paragraph with an empty text node", () => {
+    const result = utils.createEmptyDocument();
+
+    expect(result).toEqual([{ type: "paragraph", children: [{ text: "" }] }]);
+  });
+
+  it("should return a new array on each call", () => {
+    const first = utils.createEmptyDocument();
+    const second = utils.createEmptyDocument();
+
+    expect(first).not.toBe(second);
+    expect(first[0]).not.toBe(second[0]);
+  });
+});
+
+describe("normalizeTextChildren", () => {
+  it("should return the same array when it has children", () => {
+    const children = [{ text: "hello" }];
+
+    expect(utils.normalizeTextChildren(children)).toBe(children);
+  });
+
+  it("should return an array with an empty text node when empty", () => {
+    expect(utils.normalizeTextChildren([])).toEqual([{ text: "" }]);
+  });
+});
+
+describe("createListElement", () => {
+  it("should create a bulleted-list element with empty children", () => {
+    const result = utils.createListElement("bulleted-list");
+
+    expect(result).toEqual({ type: "bulleted-list", children: [] });
+  });
+
+  it("should create a numbered-list element with empty children", () => {
+    const result = utils.createListElement("numbered-list");
+
+    expect(result).toEqual({ type: "numbered-list", children: [] });
+  });
+});
+
+describe("createListItem", () => {
+  it("should create a list-item with an empty text node by default", () => {
+    const result = utils.createListItem();
+
+    expect(result).toEqual({ type: "list-item", children: [{ text: "" }] });
+  });
+
+  it("should create a list-item with the provided children", () => {
+    const children = [{ text: "hello", bold: true as const }];
+
+    const result = utils.createListItem(children);
+
+    expect(result).toEqual({
+      type: "list-item",
+      children: [{ text: "hello", bold: true as const }],
+    });
+  });
+
+  it("should not share a reference with the default text node", () => {
+    const a = utils.createListItem();
+    const b = utils.createListItem();
+
+    expect(a.children[0]).not.toBe(b.children[0]);
+  });
+});
+
+describe("isEditorEmpty", () => {
+  it("should return true for an empty document", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "" }] }];
+
+    expect(utils.isEditorEmpty(nodes)).toBe(true);
+  });
+
+  it("should return true for whitespace-only text", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "   " }] }];
+
+    expect(utils.isEditorEmpty(nodes)).toBe(true);
+  });
+
+  it("should return false when text exists", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "hello" }] }];
+
+    expect(utils.isEditorEmpty(nodes)).toBe(false);
+  });
+
+  it("should return false when text exists in nested elements", () => {
+    const nodes: Descendant[] = [
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "item" }] }],
+      },
+    ];
+
+    expect(utils.isEditorEmpty(nodes)).toBe(false);
+  });
+
+  it("should return true when nested elements have no text", () => {
+    const nodes: Descendant[] = [
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "" }] }],
+      },
+    ];
+
+    expect(utils.isEditorEmpty(nodes)).toBe(true);
+  });
+
+  it("should return true for an empty array", () => {
+    expect(utils.isEditorEmpty([])).toBe(true);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/documentUtils.ts b/apps/frontend/src/components/RichTextEditor/utils/documentUtils.ts
new file mode 100644
index 000000000..89b43f4aa
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/documentUtils.ts
@@ -0,0 +1,117 @@
+import type { Descendant, Element } from "slate";
+
+import type {
+  FormattedText,
+  ListElement,
+  ListFormat,
+  ListItemElement,
+  ParagraphElement,
+} from "../types";
+
+/**
+ * Returns true when the node is a Slate text leaf.
+ *
+ * @param {Descendant} node - The node to check.
+ * @returns {boolean} True when the node has a `text` string property.
+ *
+ * @example
+ * isTextNode({ text: "hello" }); // true
+ * isTextNode({ type: "paragraph", children: [] }); // false
+ */
+export const isTextNode = (node: Descendant): node is Extract<Descendant, { text: string }> =>
+  typeof (node as { text?: unknown }).text === "string";
+
+/**
+ * Returns true when the node is a Slate element (has a `children` array).
+
+ * @param {Descendant} node - The node to check.
+ * @returns {boolean} True when the node has a `children` array property.
+ *
+ * @example
+ * isElementNode({ type: "paragraph", children: [] }); // true
+ * isElementNode({ text: "hello" }); // false
+ */
+export const isElementNode = (node: Descendant): node is Element =>
+  Array.isArray((node as { children?: unknown }).children);
+
+const EMPTY_TEXT_NODE: FormattedText = { text: "" };
+
+/**
+ * Creates a Slate list container for the requested list format.
+ *
+ * @param {ListFormat} format - The list format to create.
+ * @returns {ListElement} A list element node with no children.
+ *
+ * @example
+ * createListElement("bulleted-list"); // { type: "bulleted-list", children: [] }
+ */
+export const createListElement = (format: ListFormat): ListElement => ({
+  type: format,
+  children: [],
+});
+
+/**
+ * Creates a Slate list item with an empty text node by default.
+ *
+ * @param {FormattedText[]} [children] - Optional children for the list item.
+ * @returns {ListItemElement} A list item element node.
+ *
+ * @example
+ * createListItem(); // { type: "list-item", children: [{ text: "" }] }
+ */
+export const createListItem = (
+  children: FormattedText[] = [{ ...EMPTY_TEXT_NODE }]
+): ListItemElement => ({
+  type: "list-item",
+  children,
+});
+
+/**
+ * Creates the default Slate value used when no saved rich-text content exists.
+ *
+ * @returns {ParagraphElement[]} A single paragraph with an empty text node.
+ */
+export const createEmptyDocument = (): ParagraphElement[] => [
+  { type: "paragraph", children: [{ ...EMPTY_TEXT_NODE }] },
+];
+
+/**
+ * Ensures Slate element children always contain at least one text node.
+ *
+ * @param {FormattedText[]} children - The array of text nodes to normalize.
+ * @returns {FormattedText[]} The original array if non-empty, or a single empty text node.
+ *
+ * @example
+ * normalizeTextChildren([]); // [{ text: "" }]
+ * normalizeTextChildren([{ text: "hi" }]); // [{ text: "hi" }]
+ */
+export const normalizeTextChildren = (children: FormattedText[]): FormattedText[] => {
+  if (children.length > 0) {
+    return children;
+  }
+
+  return [{ ...EMPTY_TEXT_NODE }];
+};
+
+/**
+ * Checks whether a Slate document contains no non-whitespace text.
+ * Recursively traverses nested elements.
+ *
+ * @param {Descendant[]} nodes - The top-level Slate document nodes.
+ * @returns {boolean} `true` if the document has no visible text content.
+ */
+export const isEditorEmpty = (nodes: Descendant[]): boolean => {
+  const nodeHasText = (node: Descendant): boolean => {
+    if (isTextNode(node)) {
+      return Boolean(node.text.trim());
+    }
+
+    if (!isElementNode(node)) {
+      return false;
+    }
+
+    return node.children.some((childNode: Descendant) => nodeHasText(childNode));
+  };
+
+  return !nodes?.some(nodeHasText);
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/editorGuards.test.ts b/apps/frontend/src/components/RichTextEditor/utils/editorGuards.test.ts
new file mode 100644
index 000000000..04244c7b4
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/editorGuards.test.ts
@@ -0,0 +1,41 @@
+import * as utils from "./editorGuards";
+
+describe("isListFormat", () => {
+  it("should return true for bulleted-list", () => {
+    expect(utils.isListFormat("bulleted-list")).toBe(true);
+  });
+
+  it("should return true for numbered-list", () => {
+    expect(utils.isListFormat("numbered-list")).toBe(true);
+  });
+
+  it("should return false for paragraph", () => {
+    expect(utils.isListFormat("paragraph")).toBe(false);
+  });
+
+  it("should return false for list-item", () => {
+    expect(utils.isListFormat("list-item")).toBe(false);
+  });
+});
+
+describe("isListElement", () => {
+  it("should return true for a bulleted-list element", () => {
+    expect(utils.isListElement({ type: "bulleted-list", children: [] })).toBe(true);
+  });
+
+  it("should return true for a numbered-list element", () => {
+    expect(utils.isListElement({ type: "numbered-list", children: [] })).toBe(true);
+  });
+
+  it("should return false for a paragraph element", () => {
+    expect(utils.isListElement({ type: "paragraph", children: [] })).toBe(false);
+  });
+
+  it("should return false for a list-item element", () => {
+    expect(utils.isListElement({ type: "list-item", children: [] })).toBe(false);
+  });
+
+  it("should return false for a text node", () => {
+    expect(utils.isListElement({ text: "hello" })).toBe(false);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/editorGuards.ts b/apps/frontend/src/components/RichTextEditor/utils/editorGuards.ts
new file mode 100644
index 000000000..df71f15c6
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/editorGuards.ts
@@ -0,0 +1,31 @@
+import { Element, Node } from "slate";
+
+import type { BlockFormat, ListElement, ListFormat } from "../types";
+
+const LIST_FORMATS: readonly ListFormat[] = ["bulleted-list", "numbered-list"];
+
+/**
+ * Narrows a block format string to a list format type guard.
+ *
+ * @param {BlockFormat} format - The block format to check.
+ * @returns {boolean} `true` if the format is "bulleted-list" or "numbered-list".
+ *
+ * @example
+ * isListFormat("bulleted-list"); // true
+ * isListFormat("paragraph"); // false
+ */
+export const isListFormat = (format: BlockFormat): format is ListFormat =>
+  LIST_FORMATS.includes(format as ListFormat);
+
+/**
+ * Narrows a Slate node to one of the supported list elements.
+ *
+ * @param {Node} node - The Slate node to check.
+ * @returns {boolean} `true` if the node is a bulleted-list or numbered-list element.
+ *
+ * @example
+ * isListElement({ type: "bulleted-list", children: [] }); // true
+ * isListElement({ text: "hello" }); // false
+ */
+export const isListElement = (node: Node): node is ListElement =>
+  Element.isElement(node) && isListFormat(node.type as BlockFormat);
diff --git a/apps/frontend/src/components/RichTextEditor/utils/editorTransforms.test.ts b/apps/frontend/src/components/RichTextEditor/utils/editorTransforms.test.ts
new file mode 100644
index 000000000..223e12086
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/editorTransforms.test.ts
@@ -0,0 +1,125 @@
+import { createEditor, Transforms } from "slate";
+
+import * as utils from "./editorTransforms";
+
+const createTestEditor = () => {
+  const editor = utils.withCustomEditor(createEditor());
+  editor.children = [{ type: "paragraph", children: [{ text: "hello" }] }];
+  Transforms.select(editor, {
+    anchor: { path: [0, 0], offset: 0 },
+    focus: { path: [0, 0], offset: 5 },
+  });
+
+  return editor;
+};
+
+describe("withCustomEditor", () => {
+  it("should return an editor with history support", () => {
+    const editor = utils.withCustomEditor(createEditor());
+
+    expect(editor.history).toBeDefined();
+    expect(editor.history.undos).toEqual([]);
+    expect(editor.history.redos).toEqual([]);
+  });
+
+  it("should return an editor with React support", () => {
+    const editor = utils.withCustomEditor(createEditor());
+
+    expect(editor.insertData).toBeTypeOf("function");
+  });
+});
+
+describe("isMarkActive", () => {
+  it("should return false when no marks are applied", () => {
+    const editor = createTestEditor();
+
+    expect(utils.isMarkActive(editor, "bold")).toBe(false);
+  });
+
+  it("should return true when the mark is applied", () => {
+    const editor = createTestEditor();
+    editor.addMark("bold", true);
+
+    expect(utils.isMarkActive(editor, "bold")).toBe(true);
+  });
+
+  it("should return false for a different mark", () => {
+    const editor = createTestEditor();
+    editor.addMark("bold", true);
+
+    expect(utils.isMarkActive(editor, "italic")).toBe(false);
+  });
+});
+
+describe("toggleMark", () => {
+  it("should add a mark when it is not active", () => {
+    const editor = createTestEditor();
+
+    utils.toggleMark(editor, "bold");
+
+    expect(utils.isMarkActive(editor, "bold")).toBe(true);
+  });
+
+  it("should remove a mark when it is active", () => {
+    const editor = createTestEditor();
+    editor.addMark("bold", true);
+
+    utils.toggleMark(editor, "bold");
+
+    expect(utils.isMarkActive(editor, "bold")).toBe(false);
+  });
+});
+
+describe("isBlockActive", () => {
+  it("should return true when inside a paragraph", () => {
+    const editor = createTestEditor();
+
+    expect(utils.isBlockActive(editor, "paragraph")).toBe(true);
+  });
+
+  it("should return false when not inside the given block type", () => {
+    const editor = createTestEditor();
+
+    expect(utils.isBlockActive(editor, "bulleted-list")).toBe(false);
+  });
+});
+
+describe("toggleBlock", () => {
+  it("should convert a paragraph to a bulleted list", () => {
+    const editor = createTestEditor();
+
+    utils.toggleBlock(editor, "bulleted-list");
+
+    expect(utils.isBlockActive(editor, "bulleted-list")).toBe(true);
+    expect(utils.isBlockActive(editor, "list-item")).toBe(true);
+  });
+
+  it("should convert a paragraph to a numbered list", () => {
+    const editor = createTestEditor();
+
+    utils.toggleBlock(editor, "numbered-list");
+
+    expect(utils.isBlockActive(editor, "numbered-list")).toBe(true);
+    expect(utils.isBlockActive(editor, "list-item")).toBe(true);
+  });
+
+  it("should convert a bulleted list back to a paragraph", () => {
+    const editor = createTestEditor();
+    utils.toggleBlock(editor, "bulleted-list");
+
+    utils.toggleBlock(editor, "bulleted-list");
+
+    expect(utils.isBlockActive(editor, "paragraph")).toBe(true);
+    expect(utils.isBlockActive(editor, "bulleted-list")).toBe(false);
+  });
+
+  it("should switch from bulleted list to numbered list", () => {
+    const editor = createTestEditor();
+    utils.toggleBlock(editor, "bulleted-list");
+
+    utils.toggleBlock(editor, "numbered-list");
+
+    expect(utils.isBlockActive(editor, "numbered-list")).toBe(true);
+    expect(utils.isBlockActive(editor, "bulleted-list")).toBe(false);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/editorTransforms.ts b/apps/frontend/src/components/RichTextEditor/utils/editorTransforms.ts
new file mode 100644
index 000000000..eca8e999c
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/editorTransforms.ts
@@ -0,0 +1,137 @@
+import { Editor, Element, Transforms } from "slate";
+import { withHistory } from "slate-history";
+import { withReact } from "slate-react";
+
+import type { BlockFormat, CustomEditor, CustomElement, ListFormat, MarkFormat } from "../types";
+
+import { createListElement } from "./documentUtils";
+import { isListElement, isListFormat } from "./editorGuards";
+
+/**
+ * Adds React and history behavior to a base Slate editor.
+ *
+ * @param {Editor} editor - The base Slate editor instance.
+ * @returns {CustomEditor} The enhanced editor with React and history plugins.
+ *
+ * @example
+ * const editor = withCustomEditor(createEditor());
+ */
+export const withCustomEditor = (editor: Editor): CustomEditor =>
+  withHistory(withReact(editor)) as CustomEditor;
+
+/**
+ * Checks whether the given inline mark is active on the current selection.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {MarkFormat} format - The mark format to check.
+ * @returns {boolean} `true` if the mark is currently applied.
+ *
+ * @example
+ * isMarkActive(editor, "bold"); // true if selection is bold
+ */
+export const isMarkActive = (editor: CustomEditor, format: MarkFormat): boolean => {
+  const marks = Editor.marks(editor);
+
+  if (!marks) {
+    return false;
+  }
+
+  return marks[format] === true;
+};
+
+/**
+ * Toggles an inline mark on the current selection. Removes it if active, adds it otherwise.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {MarkFormat} format - The mark format to toggle.
+ * @returns {void}
+ *
+ * @example
+ * toggleMark(editor, "bold"); // toggles bold on/off
+ */
+export const toggleMark = (editor: CustomEditor, format: MarkFormat): void => {
+  if (isMarkActive(editor, format)) {
+    Editor.removeMark(editor, format);
+    return;
+  }
+
+  Editor.addMark(editor, format, true);
+};
+
+/**
+ * Checks whether the current selection is inside a block of the given format.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {BlockFormat} format - The block format to check.
+ * @returns {boolean} `true` if the selection is inside a matching block.
+ *
+ * @example
+ * isBlockActive(editor, "bulleted-list"); // true if inside a bullet list
+ */
+export const isBlockActive = (editor: CustomEditor, format: BlockFormat): boolean => {
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      match: (node) => !Editor.isEditor(node) && Element.isElement(node) && node.type === format,
+    })
+  );
+
+  return Boolean(match);
+};
+
+/**
+ * Determines the block type to apply when toggling a block format.
+ * Returns "paragraph" when deactivating, "list-item" for lists, or the format itself.
+ *
+ * @param {BlockFormat} format - The target block format.
+ * @param {boolean} isActive - Whether the format is currently active.
+ * @returns {BlockFormat} The block type to set on the selected nodes.
+ */
+const getNextBlockType = (format: BlockFormat, isActive: boolean): BlockFormat => {
+  if (isActive) {
+    return "paragraph";
+  }
+
+  if (isListFormat(format)) {
+    return "list-item";
+  }
+
+  return format;
+};
+
+/**
+ * Removes any list wrapper nodes around the current selection before re-wrapping.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {void}
+ */
+const unwrapExistingLists = (editor: CustomEditor): void => {
+  Transforms.unwrapNodes(editor, {
+    match: (node) => !Editor.isEditor(node) && isListElement(node),
+    split: true,
+  });
+};
+
+/**
+ * Toggles the current block between paragraph and the given block format.
+ * Handles wrapping/unwrapping list containers automatically.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {BlockFormat} format - The block format to toggle.
+ * @returns {void}
+ *
+ * @example
+ * toggleBlock(editor, "bulleted-list"); // wraps selection in a bullet list
+ */
+export const toggleBlock = (editor: CustomEditor, format: BlockFormat): void => {
+  const blockIsActive = isBlockActive(editor, format);
+  const nextBlockType = getNextBlockType(format, blockIsActive);
+
+  unwrapExistingLists(editor);
+  Transforms.setNodes<CustomElement>(editor, { type: nextBlockType });
+
+  if (blockIsActive || !isListFormat(format)) {
+    return;
+  }
+
+  Transforms.wrapNodes(editor, createListElement(format as ListFormat));
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/index.ts b/apps/frontend/src/components/RichTextEditor/utils/index.ts
new file mode 100644
index 000000000..73bb11e56
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/index.ts
@@ -0,0 +1,11 @@
+export * from "./documentUtils";
+export * from "./editorGuards";
+export * from "./editorTransforms";
+
+export * from "./keyboard/keyboardHotkeyHandlers";
+export * from "./keyboard/keyboardListHandlers";
+export * from "./keyboard/keyboardSelectionUtils";
+
+export * from "./markdown/markdownSerializer";
+export * from "./markdown/markdownDeserializer";
+export * from "./markdown/markdownInlineParser";
diff --git a/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.test.ts b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.test.ts
new file mode 100644
index 000000000..bfca85dac
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.test.ts
@@ -0,0 +1,139 @@
+import type { KeyboardEvent } from "react";
+import { HistoryEditor } from "slate-history";
+
+import * as EditorConfig from "@/config/EditorConfig";
+import { MARK_DEFINITIONS } from "@/config/EditorConfig";
+
+import type { CustomEditor } from "../../types";
+import { toggleMark } from "../editorTransforms";
+
+import * as utils from "./keyboardHotkeyHandlers";
+
+vi.mock("slate-history", () => ({
+  HistoryEditor: {
+    undo: vi.fn(),
+    redo: vi.fn(),
+  },
+}));
+
+vi.mock("../editorTransforms", () => ({
+  toggleMark: vi.fn(),
+}));
+
+vi.mock("@/config/EditorConfig", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/config/EditorConfig")>();
+  return {
+    ...actual,
+    MARK_DEFINITIONS: actual.MARK_DEFINITIONS.map((d) => ({ ...d, enabled: true })),
+  };
+});
+
+const createKeyboardEvent = (overrides: Partial<KeyboardEvent> = {}): KeyboardEvent =>
+  ({
+    key: "",
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    preventDefault: vi.fn(),
+    ...overrides,
+  }) as unknown as KeyboardEvent;
+
+const editor = {} as CustomEditor;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("handleModifierHotkeys", () => {
+  it("should return false when no modifier key is held", () => {
+    const event = createKeyboardEvent({ key: "b" });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(false);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it("should undo on Ctrl+Z", () => {
+    const event = createKeyboardEvent({ key: "z", ctrlKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(HistoryEditor.undo).toHaveBeenCalledWith(editor);
+  });
+
+  it("should undo on Cmd+Z", () => {
+    const event = createKeyboardEvent({ key: "z", metaKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(true);
+    expect(HistoryEditor.undo).toHaveBeenCalledWith(editor);
+  });
+
+  it("should redo on Ctrl+Y", () => {
+    const event = createKeyboardEvent({ key: "y", ctrlKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(HistoryEditor.redo).toHaveBeenCalledWith(editor);
+  });
+
+  it("should redo on Ctrl+Shift+Z", () => {
+    const event = createKeyboardEvent({ key: "z", ctrlKey: true, shiftKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(HistoryEditor.redo).toHaveBeenCalledWith(editor);
+  });
+
+  it("should not call undo when Shift is also held", () => {
+    const event = createKeyboardEvent({ key: "z", ctrlKey: true, shiftKey: true });
+
+    utils.handleModifierHotkeys(event, editor);
+
+    expect(HistoryEditor.undo).not.toHaveBeenCalled();
+  });
+
+  it.each(MARK_DEFINITIONS.filter((m) => m.hotkey).map((m) => [m.format, m.hotkey]))(
+    "should toggle %s mark for Ctrl+%s",
+    (format, hotkey) => {
+      const event = createKeyboardEvent({ key: hotkey, ctrlKey: true });
+
+      expect(utils.handleModifierHotkeys(event, editor)).toBe(true);
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(toggleMark).toHaveBeenCalledWith(editor, format);
+    }
+  );
+
+  it("should return false for an unrecognized key", () => {
+    const event = createKeyboardEvent({ key: "x", ctrlKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(false);
+    expect(toggleMark).not.toHaveBeenCalled();
+  });
+
+  it("should not toggle a mark when enabled is false", () => {
+    const [first, ...rest] = MARK_DEFINITIONS;
+    const spy = vi
+      .spyOn(EditorConfig, "MARK_DEFINITIONS", "get")
+      .mockReturnValue([{ ...first, enabled: false }, ...rest]);
+
+    const event = createKeyboardEvent({ key: "b", ctrlKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(false);
+    expect(toggleMark).not.toHaveBeenCalled();
+
+    spy.mockRestore();
+  });
+
+  it("should still toggle marks that remain enabled", () => {
+    const [first, ...rest] = MARK_DEFINITIONS;
+    const spy = vi
+      .spyOn(EditorConfig, "MARK_DEFINITIONS", "get")
+      .mockReturnValue([{ ...first, enabled: false }, ...rest]);
+
+    const event = createKeyboardEvent({ key: "i", ctrlKey: true });
+
+    expect(utils.handleModifierHotkeys(event, editor)).toBe(true);
+    expect(toggleMark).toHaveBeenCalledWith(editor, "italic");
+
+    spy.mockRestore();
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.ts b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.ts
new file mode 100644
index 000000000..4d40156cc
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardHotkeyHandlers.ts
@@ -0,0 +1,85 @@
+import type { KeyboardEvent } from "react";
+import { HistoryEditor } from "slate-history";
+
+import { MARK_DEFINITIONS } from "@/config/EditorConfig";
+
+import type { CustomEditor } from "../../types";
+import { toggleMark } from "../editorTransforms";
+
+/**
+ * Handles undo (Ctrl+Z) and redo (Ctrl+Y / Ctrl+Shift+Z) hotkeys.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance to apply history operations to.
+ * @param {string} key - The lowercase key character pressed.
+ * @returns {boolean} `true` if the event was handled, `false` otherwise.
+ */
+const handleUndoRedoHotkeys = (
+  event: KeyboardEvent,
+  editor: CustomEditor,
+  key: string
+): boolean => {
+  const shouldUndo = key === "z" && !event.shiftKey;
+
+  if (shouldUndo) {
+    event.preventDefault();
+    HistoryEditor.undo(editor);
+    return true;
+  }
+
+  const shouldRedo = key === "y" || (key === "z" && event.shiftKey);
+
+  if (!shouldRedo) {
+    return false;
+  }
+
+  event.preventDefault();
+  HistoryEditor.redo(editor);
+  return true;
+};
+
+/**
+ * Toggles an inline mark format when its hotkey is pressed defined in {@link MARK_DEFINITIONS}.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance to toggle the mark on.
+ * @param {string} key - The lowercase key character pressed (e.g. `"b"`, `"i"`, `"u"`).
+ * @returns {boolean} `true` if a matching mark was toggled, `false` otherwise.
+ */
+const handleMarkHotkeys = (event: KeyboardEvent, editor: CustomEditor, key: string): boolean => {
+  const mark = MARK_DEFINITIONS.find((m) => m.hotkey === key && m.enabled);
+
+  if (!mark) {
+    return false;
+  }
+
+  event.preventDefault();
+  toggleMark(editor, mark.format);
+  return true;
+};
+
+/**
+ * Handles editor keyboard shortcuts that require Ctrl/Command.
+ *
+ * @param {KeyboardEvent} event - The keyboard event from the editor's `onKeyDown` handler.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {boolean} `true` if the shortcut was handled, `false` if no modifier was held or no handler matched.
+ *
+ * @example
+ * ```tsx
+ * <Editable onKeyDown={(event) => handleModifierHotkeys(event, editor)} />
+ * ```
+ */
+export const handleModifierHotkeys = (event: KeyboardEvent, editor: CustomEditor): boolean => {
+  if (!event.ctrlKey && !event.metaKey) {
+    return false;
+  }
+
+  const key = event.key.toLowerCase();
+
+  if (handleUndoRedoHotkeys(event, editor, key)) {
+    return true;
+  }
+
+  return handleMarkHotkeys(event, editor, key);
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.test.ts b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.test.ts
new file mode 100644
index 000000000..d57996299
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.test.ts
@@ -0,0 +1,311 @@
+import type { KeyboardEvent } from "react";
+import { createEditor, Element, Transforms } from "slate";
+
+import type { CustomEditor } from "../../types";
+import { withCustomEditor } from "../editorTransforms";
+
+import * as utils from "./keyboardListHandlers";
+import { INDENTATION } from "./keyboardSelectionUtils";
+
+const createKeyboardEvent = (overrides: Partial<KeyboardEvent> = {}): KeyboardEvent =>
+  ({
+    key: "",
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    preventDefault: vi.fn(),
+    ...overrides,
+  }) as unknown as KeyboardEvent;
+
+const createTestEditor = (children: CustomEditor["children"]): CustomEditor => {
+  const editor = withCustomEditor(createEditor());
+  editor.children = children;
+
+  return editor;
+};
+
+const createParagraphEditor = (text = "hello"): CustomEditor => {
+  const editor = createTestEditor([{ type: "paragraph", children: [{ text }] }]);
+  Transforms.select(editor, {
+    anchor: { path: [0, 0], offset: text.length },
+    focus: { path: [0, 0], offset: text.length },
+  });
+
+  return editor;
+};
+
+const createListEditor = (
+  format: "bulleted-list" | "numbered-list",
+  text = "item"
+): CustomEditor => {
+  const editor = createTestEditor([
+    { type: format, children: [{ type: "list-item", children: [{ text }] }] },
+  ]);
+  Transforms.select(editor, {
+    anchor: { path: [0, 0, 0], offset: text.length },
+    focus: { path: [0, 0, 0], offset: text.length },
+  });
+
+  return editor;
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("handleTabKey", () => {
+  it("should return false for non-Tab keys", () => {
+    const editor = createParagraphEditor();
+    const event = createKeyboardEvent({ key: "Enter" });
+
+    expect(utils.handleTabKey(event, editor)).toBe(false);
+  });
+
+  it("should insert indentation on Tab", () => {
+    const editor = createParagraphEditor("");
+    const event = createKeyboardEvent({ key: "Tab" });
+
+    utils.handleTabKey(event, editor);
+
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: INDENTATION }] }]);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("should outdent a list item on Shift+Tab", () => {
+    const editor = createListEditor("bulleted-list");
+    const event = createKeyboardEvent({ key: "Tab", shiftKey: true });
+
+    utils.handleTabKey(event, editor);
+
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: "item" }] }]);
+  });
+
+  it("should remove indentation from a paragraph on Shift+Tab", () => {
+    const editor = createParagraphEditor(INDENTATION);
+    const event = createKeyboardEvent({ key: "Tab", shiftKey: true });
+
+    utils.handleTabKey(event, editor);
+
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: "" }] }]);
+  });
+});
+
+describe("handleEnterOnEmptyListItem", () => {
+  it("should return false for non-Enter keys", () => {
+    const editor = createListEditor("bulleted-list");
+    const event = createKeyboardEvent({ key: "Tab" });
+
+    expect(utils.handleEnterOnEmptyListItem(event, editor)).toBe(false);
+  });
+
+  it("should return false when not inside a list item", () => {
+    const editor = createParagraphEditor();
+    const event = createKeyboardEvent({ key: "Enter" });
+
+    expect(utils.handleEnterOnEmptyListItem(event, editor)).toBe(false);
+  });
+
+  it("should return false when list item has text", () => {
+    const editor = createListEditor("bulleted-list", "item");
+    const event = createKeyboardEvent({ key: "Enter" });
+
+    expect(utils.handleEnterOnEmptyListItem(event, editor)).toBe(false);
+  });
+
+  it("should exit list when Enter is pressed on an empty non-first list item", () => {
+    const editor = createTestEditor([
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "first" }] },
+          { type: "list-item", children: [{ text: "" }] },
+        ],
+      },
+    ]);
+    Transforms.select(editor, {
+      anchor: { path: [0, 1, 0], offset: 0 },
+      focus: { path: [0, 1, 0], offset: 0 },
+    });
+    const event = createKeyboardEvent({ key: "Enter" });
+
+    expect(utils.handleEnterOnEmptyListItem(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("should return false when the empty list item is the first item", () => {
+    const editor = createTestEditor([
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "" }] }],
+      },
+    ]);
+    Transforms.select(editor, {
+      anchor: { path: [0, 0, 0], offset: 0 },
+      focus: { path: [0, 0, 0], offset: 0 },
+    });
+    const event = createKeyboardEvent({ key: "Enter" });
+
+    expect(utils.handleEnterOnEmptyListItem(event, editor)).toBe(false);
+  });
+});
+
+describe("handleBackspaceKey", () => {
+  it("should return false for non-Backspace keys", () => {
+    const editor = createParagraphEditor();
+    const event = createKeyboardEvent({ key: "Delete" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(false);
+  });
+
+  it("should convert list item to paragraph at start of list item", () => {
+    const editor = createListEditor("bulleted-list", "item");
+    Transforms.select(editor, {
+      anchor: { path: [0, 0, 0], offset: 0 },
+      focus: { path: [0, 0, 0], offset: 0 },
+    });
+    const event = createKeyboardEvent({ key: "Backspace" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("should return false when cursor is not at the start of a block", () => {
+    const editor = createParagraphEditor("hello");
+    const event = createKeyboardEvent({ key: "Backspace" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(false);
+  });
+
+  it("should move cursor to end of previous list when at start of paragraph after a list", () => {
+    const editor = createTestEditor([
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "item" }] }],
+      },
+      { type: "paragraph", children: [{ text: "after" }] },
+    ]);
+    Transforms.select(editor, {
+      anchor: { path: [1, 0], offset: 0 },
+      focus: { path: [1, 0], offset: 0 },
+    });
+    const event = createKeyboardEvent({ key: "Backspace" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("should remove empty paragraph and move cursor to end of previous list", () => {
+    const editor = createTestEditor([
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "item" }] }],
+      },
+      { type: "paragraph", children: [{ text: "" }] },
+    ]);
+    Transforms.select(editor, {
+      anchor: { path: [1, 0], offset: 0 },
+      focus: { path: [1, 0], offset: 0 },
+    });
+    const event = createKeyboardEvent({ key: "Backspace" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(editor.children).toHaveLength(1);
+    expect(Element.isElement(editor.children[0]) && editor.children[0].type).toBe("bulleted-list");
+  });
+
+  it("should reset to an empty paragraph when deleting an expanded list selection", () => {
+    const editor = createListEditor("bulleted-list", "item");
+    Transforms.select(editor, {
+      anchor: { path: [0, 0, 0], offset: 0 },
+      focus: { path: [0, 0, 0], offset: 4 },
+    });
+    const event = createKeyboardEvent({ key: "Backspace" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: "" }] }]);
+  });
+
+  it("should reset to an empty paragraph when deleting an expanded selection spanning list and paragraph", () => {
+    const editor = createTestEditor([
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "item 1" }] },
+          { type: "list-item", children: [{ text: "item 2" }] },
+        ],
+      },
+      { type: "paragraph", children: [{ text: "Hello World!" }] },
+    ]);
+
+    Transforms.select(editor, {
+      anchor: { path: [0, 0, 0], offset: 0 },
+      focus: { path: [1, 0], offset: "Hello World!".length },
+    });
+
+    const event = createKeyboardEvent({ key: "Backspace" });
+
+    expect(utils.handleBackspaceKey(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: "" }] }]);
+  });
+});
+
+describe("handleMarkdownListShortcut", () => {
+  it("should return false for non-Space keys", () => {
+    const editor = createParagraphEditor("-");
+    const event = createKeyboardEvent({ key: "a" });
+
+    expect(utils.handleMarkdownListShortcut(event, editor)).toBe(false);
+  });
+
+  it("should convert '- ' to a bulleted list", () => {
+    const editor = createParagraphEditor("-");
+    const event = createKeyboardEvent({ key: " " });
+
+    expect(utils.handleMarkdownListShortcut(event, editor)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+
+    const [firstNode] = editor.children;
+
+    expect(Element.isElement(firstNode) && firstNode.type).toBe("bulleted-list");
+  });
+
+  it("should convert '1. ' to a numbered list", () => {
+    const editor = createParagraphEditor("1.");
+    const event = createKeyboardEvent({ key: " " });
+
+    expect(utils.handleMarkdownListShortcut(event, editor)).toBe(true);
+
+    const [firstNode] = editor.children;
+
+    expect(Element.isElement(firstNode) && firstNode.type).toBe("numbered-list");
+  });
+
+  it("should return false for unrecognized prefixes", () => {
+    const editor = createParagraphEditor("hello");
+    const event = createKeyboardEvent({ key: " " });
+
+    expect(utils.handleMarkdownListShortcut(event, editor)).toBe(false);
+  });
+});
+
+describe("handleRichTextEditorKeyDown", () => {
+  it("should not throw for unhandled keys", () => {
+    const editor = createParagraphEditor();
+    const event = createKeyboardEvent({ key: "a" });
+
+    expect(() => utils.handleRichTextEditorKeyDown(event, editor)).not.toThrow();
+  });
+
+  it("should delegate Tab to handleTabKey", () => {
+    const editor = createParagraphEditor("");
+    const event = createKeyboardEvent({ key: "Tab" });
+
+    utils.handleRichTextEditorKeyDown(event, editor);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: INDENTATION }] }]);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.ts b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.ts
new file mode 100644
index 000000000..28ede687b
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardListHandlers.ts
@@ -0,0 +1,397 @@
+import type { KeyboardEvent } from "react";
+import { Editor, Element, Node, Point, Range, Transforms } from "slate";
+
+import type { CustomEditor, KeyboardHandler, ListFormat } from "../../types";
+import { createEmptyDocument } from "../documentUtils";
+import { isListElement } from "../editorGuards";
+import { toggleBlock } from "../editorTransforms";
+
+import { handleModifierHotkeys } from "./keyboardHotkeyHandlers";
+import {
+  getCollapsedSelection,
+  getCurrentListFormat,
+  getFirstElementEntry,
+  getPreviousSiblingPath,
+  INDENTATION,
+  removeCharactersBeforeCursor,
+} from "./keyboardSelectionUtils";
+
+/**
+ * Determines the number of whitespace characters to remove when outdenting.
+ *
+ * @param {string} textBeforeCursor - The text content before the cursor position.
+ * @returns {number} The number of characters to remove (tab width, single space, or 0).
+ */
+const getIndentationDistanceToRemove = (textBeforeCursor: string): number => {
+  if (textBeforeCursor.endsWith(INDENTATION)) {
+    return INDENTATION.length;
+  }
+
+  if (textBeforeCursor.endsWith(" ")) {
+    return 1;
+  }
+
+  return 0;
+};
+
+/**
+ * Removes leading indentation from a paragraph when Shift+Tab is pressed.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {Range} selection - The current collapsed selection.
+ */
+const removeParagraphIndentation = (editor: CustomEditor, selection: Range): void => {
+  const paragraphEntry = getFirstElementEntry(editor, "paragraph");
+
+  if (!paragraphEntry) {
+    return;
+  }
+
+  const [, paragraphPath] = paragraphEntry;
+  const paragraphStart = Editor.start(editor, paragraphPath);
+  const rangeBeforeCursor: Range = { anchor: paragraphStart, focus: selection.focus };
+  const textBeforeCursor = Editor.string(editor, rangeBeforeCursor);
+  const indentationDistance = getIndentationDistanceToRemove(textBeforeCursor);
+
+  if (indentationDistance === 0) {
+    return;
+  }
+
+  removeCharactersBeforeCursor(editor, indentationDistance);
+};
+
+/**
+ * Converts a list item back to a paragraph when Shift+Tab is pressed inside a list.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {boolean} `true` if the list item was outdented, `false` if not inside a list item.
+ */
+const outdentListItem = (editor: CustomEditor): boolean => {
+  const listItemEntry = getFirstElementEntry(editor, "list-item");
+
+  if (!listItemEntry) {
+    return false;
+  }
+
+  toggleBlock(editor, getCurrentListFormat(editor));
+  return true;
+};
+
+/**
+ * Handles Tab and Shift+Tab indentation behavior.
+ *
+ * Tab inserts indentation. Shift+Tab outdents a list item or removes
+ * leading whitespace from a paragraph.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {boolean} `true` if the Tab key was handled, `false` otherwise.
+ */
+export const handleTabKey = (event: KeyboardEvent, editor: CustomEditor): boolean => {
+  if (event.key !== "Tab") {
+    return false;
+  }
+
+  event.preventDefault();
+
+  if (!event.shiftKey) {
+    Transforms.insertText(editor, INDENTATION);
+    return true;
+  }
+
+  const selection = getCollapsedSelection(editor);
+
+  if (!selection) {
+    return true;
+  }
+
+  if (outdentListItem(editor)) {
+    return true;
+  }
+
+  removeParagraphIndentation(editor, selection);
+  return true;
+};
+
+/**
+ * Exits a list when Enter is pressed on an empty list item that is not the first item.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {boolean} `true` if the list was exited, `false` otherwise.
+ */
+export const handleEnterOnEmptyListItem = (event: KeyboardEvent, editor: CustomEditor): boolean => {
+  if (event.key !== "Enter") {
+    return false;
+  }
+
+  const selection = getCollapsedSelection(editor);
+
+  if (!selection) {
+    return false;
+  }
+
+  const listItemEntry = getFirstElementEntry(editor, "list-item");
+
+  if (!listItemEntry) {
+    return false;
+  }
+
+  const [listItemNode, listItemPath] = listItemEntry;
+  const listItemIsEmpty = Node.string(listItemNode) === "";
+  const isFirstItem = listItemPath[listItemPath.length - 1] === 0;
+  const shouldExitList = listItemIsEmpty && !isFirstItem;
+
+  if (!shouldExitList) {
+    return false;
+  }
+
+  event.preventDefault();
+  toggleBlock(editor, getCurrentListFormat(editor));
+  return true;
+};
+
+/**
+ * Moves the cursor to the end of a previous sibling list when Backspace is pressed
+ * at the start of a paragraph that follows a list.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {Range} selection - The current collapsed selection.
+ * @returns {boolean} `true` if the cursor was moved, `false` otherwise.
+ */
+const moveCursorToEndOfPreviousList = (
+  event: KeyboardEvent,
+  editor: CustomEditor,
+  selection: Range
+): boolean => {
+  const paragraphEntry = getFirstElementEntry(editor, "paragraph");
+
+  if (!paragraphEntry) {
+    return false;
+  }
+
+  const [, paragraphPath] = paragraphEntry;
+  const paragraphStart = Editor.start(editor, paragraphPath);
+
+  if (!Point.equals(selection.focus, paragraphStart)) {
+    return false;
+  }
+
+  const previousPath = getPreviousSiblingPath(paragraphPath);
+
+  if (!previousPath || !Node.has(editor, previousPath)) {
+    return false;
+  }
+
+  const previousNode = Node.get(editor, previousPath);
+
+  if (!isListElement(previousNode)) {
+    return false;
+  }
+
+  event.preventDefault();
+
+  const paragraphIsEmpty = Node.string(paragraphEntry[0]) === "";
+
+  if (paragraphIsEmpty) {
+    Transforms.removeNodes(editor, { at: paragraphPath });
+  }
+
+  const lastListItemPath = [...previousPath, previousNode.children.length - 1];
+  Transforms.select(editor, Editor.end(editor, lastListItemPath));
+  return true;
+};
+
+/**
+ * Converts a list item to a paragraph when Backspace is pressed at the start of a list item.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {Range} selection - The current collapsed selection.
+ * @returns {boolean} `true` if the list item was converted, `false` otherwise.
+ */
+const convertListItemToParagraph = (
+  event: KeyboardEvent,
+  editor: CustomEditor,
+  selection: Range
+): boolean => {
+  const listItemEntry = getFirstElementEntry(editor, "list-item");
+
+  if (!listItemEntry) {
+    return false;
+  }
+
+  const [, listItemPath] = listItemEntry;
+  const listItemStart = Editor.start(editor, listItemPath);
+
+  if (!Point.equals(selection.focus, listItemStart)) {
+    return false;
+  }
+
+  event.preventDefault();
+  toggleBlock(editor, getCurrentListFormat(editor));
+  return true;
+};
+
+/**
+ * Ensures an empty editor is represented as a single empty paragraph.
+ * This prevents clearing the editor from leaving it in an invalid empty state with no nodes.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {void}
+ */
+const normalizeEmptyEditorToParagraph = (editor: CustomEditor): void => {
+  const firstNode = editor.children[0];
+  const isSingleEmptyParagraph =
+    editor.children.length === 1 &&
+    Element.isElement(firstNode) &&
+    firstNode.type === "paragraph" &&
+    Node.string(firstNode) === "";
+
+  if (isSingleEmptyParagraph || Node.string(editor) !== "") {
+    return;
+  }
+
+  while (editor.children.length > 0) {
+    Transforms.removeNodes(editor, { at: [0] });
+  }
+
+  Transforms.insertNodes(editor, createEmptyDocument(), { at: [0] });
+  Transforms.select(editor, Editor.start(editor, [0]));
+};
+
+/**
+ * Handles Backspace at list boundaries.
+ *
+ * Moves the cursor into a preceding list or converts a list item to a paragraph
+ * when Backspace is pressed at the start of a block.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {boolean} `true` if the Backspace was handled, `false` otherwise.
+ */
+export const handleBackspaceKey = (event: KeyboardEvent, editor: CustomEditor): boolean => {
+  if (event.key !== "Backspace") {
+    return false;
+  }
+
+  if (!editor.selection) {
+    return false;
+  }
+
+  if (Range.isExpanded(editor.selection)) {
+    event.preventDefault();
+    Transforms.delete(editor, { at: editor.selection });
+    normalizeEmptyEditorToParagraph(editor);
+    return true;
+  }
+
+  const selection = getCollapsedSelection(editor);
+
+  if (!selection) {
+    return false;
+  }
+
+  if (moveCursorToEndOfPreviousList(event, editor, selection)) {
+    return true;
+  }
+
+  return convertListItemToParagraph(event, editor, selection);
+};
+
+/**
+ * Maps a text prefix to its corresponding list format.
+ *
+ * @param {string} textBeforeCursor - The text content before the cursor.
+ * @returns {ListFormat | null} The matching list format, or `null` if no match.
+ *
+ * @example
+ * ```ts
+ * getMarkdownShortcutListFormat("-");  // "bulleted-list"
+ * getMarkdownShortcutListFormat("1."); // "numbered-list"
+ * getMarkdownShortcutListFormat("abc"); // null
+ * ```
+ */
+const getMarkdownShortcutListFormat = (textBeforeCursor: string): ListFormat | null => {
+  if (textBeforeCursor === "-") {
+    return "bulleted-list";
+  }
+
+  if (textBeforeCursor === "1.") {
+    return "numbered-list";
+  }
+
+  return null;
+};
+
+/**
+ * Converts markdown list shortcuts (`-` or `1.`) into Slate list blocks when Space is pressed.
+ *
+ * @param {KeyboardEvent} event - The keyboard event to evaluate.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {boolean} `true` if a shortcut was converted, `false` otherwise.
+ *
+ * @example
+ * Typing `- ` at the start of a paragraph converts it to a bulleted list.
+ * Typing `1. ` at the start of a paragraph converts it to a numbered list.
+ */
+export const handleMarkdownListShortcut = (event: KeyboardEvent, editor: CustomEditor): boolean => {
+  if (event.key !== " ") {
+    return false;
+  }
+
+  const selection = getCollapsedSelection(editor);
+
+  if (!selection) {
+    return false;
+  }
+
+  const [blockEntry] = Editor.nodes(editor, {
+    match: (node) =>
+      Element.isElement(node) && Editor.isBlock(editor, node) && node.type === "paragraph",
+  });
+
+  if (!blockEntry) {
+    return false;
+  }
+
+  const [, blockPath] = blockEntry;
+  const blockStart = Editor.start(editor, blockPath);
+  const rangeBeforeCursor: Range = { anchor: blockStart, focus: selection.focus };
+  const textBeforeCursor = Editor.string(editor, rangeBeforeCursor);
+  const listFormat = getMarkdownShortcutListFormat(textBeforeCursor);
+
+  if (!listFormat) {
+    return false;
+  }
+
+  event.preventDefault();
+  Transforms.select(editor, rangeBeforeCursor);
+  Transforms.delete(editor);
+  toggleBlock(editor, listFormat);
+  return true;
+};
+
+/**
+ * Runs the configured keyboard handlers for a Slate editor instance.
+ *
+ * @param {KeyboardEvent} event - The keyboard event from the editor's `onKeyDown` handler.
+ * @param {CustomEditor} editor - The Slate editor instance.
+ *
+ * @example
+ * ```tsx
+ * <Editable onKeyDown={(event) => handleRichTextEditorKeyDown(event, editor)} />
+ * ```
+ */
+export const handleRichTextEditorKeyDown = (event: KeyboardEvent, editor: CustomEditor): void => {
+  const handlers: KeyboardHandler[] = [
+    handleTabKey,
+    handleEnterOnEmptyListItem,
+    handleBackspaceKey,
+    handleMarkdownListShortcut,
+    handleModifierHotkeys,
+  ];
+
+  handlers.some((handler) => handler(event, editor));
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.test.ts b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.test.ts
new file mode 100644
index 000000000..5cd5e3d15
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.test.ts
@@ -0,0 +1,148 @@
+import { createEditor, Transforms } from "slate";
+
+import { withCustomEditor } from "../editorTransforms";
+
+import * as utils from "./keyboardSelectionUtils";
+
+const createParagraphEditor = (text = "hello") => {
+  const editor = withCustomEditor(createEditor());
+  editor.children = [{ type: "paragraph", children: [{ text }] }];
+  Transforms.select(editor, {
+    anchor: { path: [0, 0], offset: text.length },
+    focus: { path: [0, 0], offset: text.length },
+  });
+
+  return editor;
+};
+
+describe("getCollapsedSelection", () => {
+  it("should return the selection when collapsed", () => {
+    const editor = createParagraphEditor();
+
+    const result = utils.getCollapsedSelection(editor);
+
+    expect(result).not.toBeNull();
+    expect(result).toEqual(editor.selection);
+  });
+
+  it("should return null when no selection exists", () => {
+    const editor = withCustomEditor(createEditor());
+    editor.children = [{ type: "paragraph", children: [{ text: "hello" }] }];
+
+    expect(utils.getCollapsedSelection(editor)).toBeNull();
+  });
+
+  it("should return null when the selection is expanded", () => {
+    const editor = createParagraphEditor();
+    Transforms.select(editor, {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 5 },
+    });
+
+    expect(utils.getCollapsedSelection(editor)).toBeNull();
+  });
+});
+
+describe("getFirstElementEntry", () => {
+  it("should return the entry for a matching block type", () => {
+    const editor = createParagraphEditor();
+
+    const result = utils.getFirstElementEntry(editor, "paragraph");
+
+    expect(result).toBeDefined();
+    expect(result[0].type).toBe("paragraph");
+  });
+
+  it("should return undefined when no matching block exists", () => {
+    const editor = createParagraphEditor();
+
+    expect(utils.getFirstElementEntry(editor, "bulleted-list")).toBeUndefined();
+  });
+
+  it("should return the first match when multiple exist", () => {
+    const editor = withCustomEditor(createEditor());
+    editor.children = [
+      { type: "paragraph", children: [{ text: "first" }] },
+      { type: "paragraph", children: [{ text: "second" }] },
+    ];
+    Transforms.select(editor, {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 0 },
+    });
+
+    const result = utils.getFirstElementEntry(editor, "paragraph");
+
+    expect(result).toBeDefined();
+    expect(result[1]).toEqual([0]);
+  });
+});
+
+describe("getCurrentListFormat", () => {
+  it("should return 'bulleted-list' when inside a bulleted list", () => {
+    const editor = withCustomEditor(createEditor());
+    editor.children = [
+      { type: "bulleted-list", children: [{ type: "list-item", children: [{ text: "item" }] }] },
+    ];
+    Transforms.select(editor, {
+      anchor: { path: [0, 0, 0], offset: 0 },
+      focus: { path: [0, 0, 0], offset: 0 },
+    });
+
+    expect(utils.getCurrentListFormat(editor)).toBe("bulleted-list");
+  });
+
+  it("should return 'numbered-list' when inside a numbered list", () => {
+    const editor = withCustomEditor(createEditor());
+    editor.children = [
+      { type: "numbered-list", children: [{ type: "list-item", children: [{ text: "item" }] }] },
+    ];
+    Transforms.select(editor, {
+      anchor: { path: [0, 0, 0], offset: 0 },
+      focus: { path: [0, 0, 0], offset: 0 },
+    });
+
+    expect(utils.getCurrentListFormat(editor)).toBe("numbered-list");
+  });
+
+  it("should default to 'numbered-list' when not inside any list", () => {
+    const editor = createParagraphEditor();
+
+    expect(utils.getCurrentListFormat(editor)).toBe("numbered-list");
+  });
+});
+
+describe("removeCharactersBeforeCursor", () => {
+  it("should remove the specified number of characters before the cursor", () => {
+    const editor = createParagraphEditor("hello");
+
+    utils.removeCharactersBeforeCursor(editor, 3);
+
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: "he" }] }]);
+  });
+
+  it("should remove all characters when distance equals text length", () => {
+    const editor = createParagraphEditor("hi");
+
+    utils.removeCharactersBeforeCursor(editor, 2);
+
+    expect(editor.children).toEqual([{ type: "paragraph", children: [{ text: "" }] }]);
+  });
+});
+
+describe("getPreviousSiblingPath", () => {
+  it("should return the previous sibling path", () => {
+    expect(utils.getPreviousSiblingPath([0, 2])).toEqual([0, 1]);
+  });
+
+  it("should return null for the first child", () => {
+    expect(utils.getPreviousSiblingPath([0, 0])).toBeNull();
+  });
+
+  it("should return null for a single-segment path at index 0", () => {
+    expect(utils.getPreviousSiblingPath([0])).toBeNull();
+  });
+
+  it("should decrement only the last segment", () => {
+    expect(utils.getPreviousSiblingPath([1, 3, 5])).toEqual([1, 3, 4]);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.ts b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.ts
new file mode 100644
index 000000000..cedd8a583
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/keyboard/keyboardSelectionUtils.ts
@@ -0,0 +1,93 @@
+import { Editor, Element, NodeEntry, Path, Range, Transforms } from "slate";
+
+import type { BlockFormat, CustomEditor, CustomElement, ListFormat } from "../../types";
+
+export const INDENTATION = "  ";
+
+/**
+ * Returns the current selection only when it is collapsed to a single cursor point.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {Range | null} The collapsed selection, or `null` if expanded or absent.
+ */
+export const getCollapsedSelection = (editor: CustomEditor): Range | null => {
+  const { selection } = editor;
+
+  if (!selection || !Range.isCollapsed(selection)) {
+    return null;
+  }
+
+  return selection;
+};
+
+/**
+ * Finds the first Slate element entry matching the requested block type.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {BlockFormat} type - The block type to search for (e.g. `"paragraph"`, `"list-item"`).
+ * @returns {NodeEntry<CustomElement> | undefined} The matching entry, or `undefined` if not found.
+ */
+export const getFirstElementEntry = (
+  editor: CustomEditor,
+  type: BlockFormat
+): NodeEntry<CustomElement> | undefined => {
+  const [entry] = Editor.nodes(editor, {
+    match: (node) => Element.isElement(node) && node.type === type,
+  });
+
+  return entry as NodeEntry<CustomElement> | undefined;
+};
+
+/**
+ * Determines the active list format for keyboard operations.
+ *
+ * Returns `"bulleted-list"` if the cursor is inside one, otherwise defaults to `"numbered-list"`.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @returns {ListFormat} The active list format.
+ */
+export const getCurrentListFormat = (editor: CustomEditor): ListFormat => {
+  const bulletListEntry = getFirstElementEntry(editor, "bulleted-list");
+
+  if (bulletListEntry) {
+    return "bulleted-list";
+  }
+
+  return "numbered-list";
+};
+
+/**
+ * Deletes a number of characters immediately before the cursor.
+ *
+ * @param {CustomEditor} editor - The Slate editor instance.
+ * @param {number} distance - The number of characters to delete.
+ */
+export const removeCharactersBeforeCursor = (editor: CustomEditor, distance: number): void => {
+  Transforms.delete(editor, {
+    unit: "character",
+    reverse: true,
+    distance,
+  });
+};
+
+/**
+ * Returns the path of the previous sibling node in the Slate document tree.
+ *
+ * @param {Path} path - The Slate path to find the previous sibling for.
+ * @returns {Path | null} The previous sibling path, or `null` if the node is the first child.
+ *
+ * @example
+ * ```ts
+ * getPreviousSiblingPath([0, 2]); // [0, 1]
+ * getPreviousSiblingPath([0, 0]); // null
+ * ```
+ */
+export const getPreviousSiblingPath = (path: Path): Path | null => {
+  const currentIndex = path[path.length - 1];
+
+  if (currentIndex <= 0) {
+    return null;
+  }
+
+  return [...path.slice(0, -1), currentIndex - 1];
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.test.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.test.ts
new file mode 100644
index 000000000..2bbf6dcbe
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.test.ts
@@ -0,0 +1,140 @@
+import * as utils from "./markdownDeserializer";
+
+describe("deserializeFromMarkdown", () => {
+  it("should return an empty document for an empty string", () => {
+    expect(utils.deserializeFromMarkdown("")).toEqual([
+      { type: "paragraph", children: [{ text: "" }] },
+    ]);
+  });
+
+  it("should return an empty document for whitespace-only content", () => {
+    expect(utils.deserializeFromMarkdown("   ")).toEqual([
+      { type: "paragraph", children: [{ text: "" }] },
+    ]);
+  });
+
+  it("should parse a plain text line into a paragraph", () => {
+    expect(utils.deserializeFromMarkdown("hello")).toEqual([
+      { type: "paragraph", children: [{ text: "hello" }] },
+    ]);
+  });
+
+  it("should parse inline bold markdown within a paragraph", () => {
+    expect(utils.deserializeFromMarkdown("**bold**")).toEqual([
+      { type: "paragraph", children: [{ text: "bold", bold: true }] },
+    ]);
+  });
+
+  it("should parse inline italic markdown within a paragraph", () => {
+    expect(utils.deserializeFromMarkdown("_italic_")).toEqual([
+      { type: "paragraph", children: [{ text: "italic", italic: true }] },
+    ]);
+  });
+
+  it("should parse multiple paragraphs separated by blank lines", () => {
+    expect(utils.deserializeFromMarkdown("first\n\nsecond")).toEqual([
+      { type: "paragraph", children: [{ text: "first" }] },
+      { type: "paragraph", children: [{ text: "second" }] },
+    ]);
+  });
+
+  it("should parse a bulleted list", () => {
+    expect(utils.deserializeFromMarkdown("- item one\n- item two")).toEqual([
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "item one" }] },
+          { type: "list-item", children: [{ text: "item two" }] },
+        ],
+      },
+    ]);
+  });
+
+  it("should parse a numbered list", () => {
+    expect(utils.deserializeFromMarkdown("1. first\n2. second")).toEqual([
+      {
+        type: "numbered-list",
+        children: [
+          { type: "list-item", children: [{ text: "first" }] },
+          { type: "list-item", children: [{ text: "second" }] },
+        ],
+      },
+    ]);
+  });
+
+  it("should parse a paragraph followed by a list", () => {
+    expect(utils.deserializeFromMarkdown("intro\n- a\n- b")).toEqual([
+      { type: "paragraph", children: [{ text: "intro" }] },
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "a" }] },
+          { type: "list-item", children: [{ text: "b" }] },
+        ],
+      },
+    ]);
+  });
+
+  it("should parse a list followed by a paragraph", () => {
+    expect(utils.deserializeFromMarkdown("- a\n- b\nafter")).toEqual([
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "a" }] },
+          { type: "list-item", children: [{ text: "b" }] },
+        ],
+      },
+      { type: "paragraph", children: [{ text: "after" }] },
+    ]);
+  });
+
+  it("should parse inline marks within list items", () => {
+    expect(utils.deserializeFromMarkdown("- **bold item**\n- _italic item_")).toEqual([
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "bold item", bold: true }] },
+          { type: "list-item", children: [{ text: "italic item", italic: true }] },
+        ],
+      },
+    ]);
+  });
+
+  it("should skip empty lines between content", () => {
+    expect(utils.deserializeFromMarkdown("first\n\n\nsecond")).toEqual([
+      { type: "paragraph", children: [{ text: "first" }] },
+      { type: "paragraph", children: [{ text: "second" }] },
+    ]);
+  });
+
+  it("should handle Windows-style line endings", () => {
+    expect(utils.deserializeFromMarkdown("first\r\nsecond")).toEqual([
+      { type: "paragraph", children: [{ text: "first" }] },
+      { type: "paragraph", children: [{ text: "second" }] },
+    ]);
+  });
+
+  it("should return an empty document when all lines are blank", () => {
+    expect(utils.deserializeFromMarkdown("\n\n\n")).toEqual([
+      { type: "paragraph", children: [{ text: "" }] },
+    ]);
+  });
+
+  it("should parse a single list item", () => {
+    expect(utils.deserializeFromMarkdown("- only")).toEqual([
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "only" }] }],
+      },
+    ]);
+  });
+
+  it("should parse a bulleted list using asterisk syntax", () => {
+    expect(utils.deserializeFromMarkdown("* item")).toEqual([
+      {
+        type: "bulleted-list",
+        children: [{ type: "list-item", children: [{ text: "item" }] }],
+      },
+    ]);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.ts
new file mode 100644
index 000000000..b29f97801
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownDeserializer.ts
@@ -0,0 +1,127 @@
+import type { Descendant } from "slate";
+
+import type { ListFormat, ListItemElement } from "../../types";
+import { createEmptyDocument, createListItem } from "../documentUtils";
+
+import { parseMarkdownInline } from "./markdownInlineParser";
+import { normalizeLineEndings, readListLine } from "./markdownUtils";
+
+type MarkdownBlockResult = {
+  nodes: Descendant[];
+  nextLineIndex: number;
+};
+
+/**
+ * Reads consecutive list item lines into a single list block node.
+ *
+ * @param {string[]} lines - All lines in the markdown document.
+ * @param {number} startLineIndex - The index of the first list item line.
+ * @param {ListFormat} format - The list format to read.
+ * @returns {MarkdownBlockResult} The list node(s) and the next line index to process.
+ *
+ * @example
+ * readMarkdownListBlock(["- a", "- b", "text"], 0, "bulleted-list");
+ * // { nodes: [{ type: "bulleted-list", children: [...] }], nextLineIndex: 2 }
+ */
+const readMarkdownListBlock = (
+  lines: string[],
+  startLineIndex: number,
+  format: ListFormat
+): MarkdownBlockResult => {
+  const items: ListItemElement[] = [];
+  let lineIndex = startLineIndex;
+
+  while (lineIndex < lines.length) {
+    const listLine = readListLine(lines[lineIndex]);
+
+    if (!listLine || listLine.format !== format) {
+      break;
+    }
+
+    items.push(createListItem(parseMarkdownInline(listLine.content)));
+    lineIndex += 1;
+  }
+
+  return {
+    nodes: [{ type: format, children: items }],
+    nextLineIndex: lineIndex,
+  };
+};
+
+/**
+ * Reads a single block from the markdown lines.
+ *
+ * @param {string[]} lines - All lines in the markdown document.
+ * @param {number} lineIndex - The current line index to process.
+ * @returns {MarkdownBlockResult} The parsed node(s) and the next line index.
+ *
+ * @example
+ * readMarkdownBlock(["hello"], 0); // { nodes: [{ type: "paragraph", ... }], nextLineIndex: 1 }
+ */
+const readMarkdownBlock = (lines: string[], lineIndex: number): MarkdownBlockResult => {
+  const line = lines[lineIndex];
+  const listLine = readListLine(line);
+
+  if (listLine) {
+    return readMarkdownListBlock(lines, lineIndex, listLine.format);
+  }
+
+  if (line.trim() === "") {
+    return {
+      nodes: [],
+      nextLineIndex: lineIndex + 1,
+    };
+  }
+
+  return {
+    nodes: [{ type: "paragraph", children: parseMarkdownInline(line) }],
+    nextLineIndex: lineIndex + 1,
+  };
+};
+
+/**
+ * Parses all lines of a markdown document into Slate nodes.
+ *
+ * @param {string[]} lines - The lines of the markdown document.
+ * @returns {Descendant[]} The parsed Slate document nodes.
+ *
+ * @example
+ * readMarkdownDocument(["hello", "", "- item"]); // [paragraph, bulleted-list]
+ */
+const readMarkdownDocument = (lines: string[]): Descendant[] => {
+  const nodes: Descendant[] = [];
+  let lineIndex = 0;
+
+  while (lineIndex < lines.length) {
+    const block = readMarkdownBlock(lines, lineIndex);
+
+    nodes.push(...block.nodes);
+    lineIndex = block.nextLineIndex;
+  }
+
+  return nodes;
+};
+
+/**
+ * Converts stored markdown rich-text content into a Slate value.
+ *
+ * @param {string} content - The stored markdown string.
+ * @returns {Descendant[]} The Slate document nodes.
+ *
+ * @example
+ * deserializeFromMarkdown("**hello**"); // [{ type: "paragraph", children: [{ text: "hello", bold: true }] }]
+ * deserializeFromMarkdown(""); // [{ type: "paragraph", children: [{ text: "" }] }]
+ */
+export const deserializeFromMarkdown = (content: string): Descendant[] => {
+  if (!content.trim()) {
+    return createEmptyDocument();
+  }
+
+  const nodes = readMarkdownDocument(normalizeLineEndings(content).split("\n"));
+
+  if (nodes.length > 0) {
+    return nodes;
+  }
+
+  return createEmptyDocument();
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.test.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.test.ts
new file mode 100644
index 000000000..464f79fe6
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.test.ts
@@ -0,0 +1,108 @@
+import * as utils from "./markdownInlineParser";
+
+describe("parseMarkdownInline", () => {
+  it("should return an empty array for empty string", () => {
+    expect(utils.parseMarkdownInline("")).toEqual([]);
+  });
+
+  it("should return a default text node for plain text", () => {
+    expect(utils.parseMarkdownInline("hello")).toEqual([{ text: "hello" }]);
+  });
+
+  it("should parse bold markdown", () => {
+    expect(utils.parseMarkdownInline("**bold**")).toEqual([{ text: "bold", bold: true }]);
+  });
+
+  it("should parse italic markdown with underscores", () => {
+    expect(utils.parseMarkdownInline("_italic_")).toEqual([{ text: "italic", italic: true }]);
+  });
+
+  it("should parse italic markdown with asterisks", () => {
+    expect(utils.parseMarkdownInline("*italic*")).toEqual([{ text: "italic", italic: true }]);
+  });
+
+  it("should parse underline markdown", () => {
+    expect(utils.parseMarkdownInline("<u>underline</u>")).toEqual([
+      { text: "underline", underline: true },
+    ]);
+  });
+
+  it("should parse bold and italic together", () => {
+    expect(utils.parseMarkdownInline("**_bold italic_**")).toEqual([
+      { text: "bold italic", bold: true, italic: true },
+    ]);
+  });
+
+  it("should parse mixed plain text and marks", () => {
+    expect(utils.parseMarkdownInline("hello **world**")).toEqual([
+      { text: "hello " },
+      { text: "world", bold: true },
+    ]);
+  });
+
+  it("should parse multiple different marks in sequence", () => {
+    expect(utils.parseMarkdownInline("**bold** _italic_")).toEqual([
+      { text: "bold", bold: true },
+      { text: " " },
+      { text: "italic", italic: true },
+    ]);
+  });
+
+  it("should merge adjacent nodes with the same marks", () => {
+    expect(utils.parseMarkdownInline("hello world")).toEqual([{ text: "hello world" }]);
+  });
+
+  it("should decode escaped markdown characters", () => {
+    expect(utils.parseMarkdownInline("\\*")).toEqual([{ text: "*" }]);
+    expect(utils.parseMarkdownInline("\\_")).toEqual([{ text: "_" }]);
+    expect(utils.parseMarkdownInline("\\\\")).toEqual([{ text: "\\" }]);
+  });
+
+  it("should inherit marks from the parent context", () => {
+    expect(utils.parseMarkdownInline("hello", { bold: true })).toEqual([
+      { text: "hello", bold: true },
+    ]);
+  });
+
+  it("should combine inherited marks with parsed marks", () => {
+    expect(utils.parseMarkdownInline("**bold**", { italic: true })).toEqual([
+      { text: "bold", bold: true, italic: true },
+    ]);
+  });
+
+  it("should parse nested marks", () => {
+    expect(utils.parseMarkdownInline("_**nested**_")).toEqual([
+      { text: "nested", italic: true, bold: true },
+    ]);
+  });
+
+  it("should parse bold wrapping underline", () => {
+    expect(utils.parseMarkdownInline("**<u>both</u>**")).toEqual([
+      { text: "both", bold: true, underline: true },
+    ]);
+  });
+
+  it("should parse all three marks nested", () => {
+    expect(utils.parseMarkdownInline("**_<u>all</u>_**")).toEqual([
+      { text: "all", bold: true, italic: true, underline: true },
+    ]);
+  });
+
+  it("should handle a single special character", () => {
+    expect(utils.parseMarkdownInline("<")).toEqual([{ text: "<" }]);
+  });
+
+  it("should handle text with marks followed by plain text", () => {
+    expect(utils.parseMarkdownInline("**bold** and plain")).toEqual([
+      { text: "bold", bold: true },
+      { text: " and plain" },
+    ]);
+  });
+
+  it("should handle plain text followed by marks", () => {
+    expect(utils.parseMarkdownInline("plain and **bold**")).toEqual([
+      { text: "plain and " },
+      { text: "bold", bold: true },
+    ]);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.ts
new file mode 100644
index 000000000..3d1dea937
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownInlineParser.ts
@@ -0,0 +1,327 @@
+import { MARK_DEFINITIONS } from "@/config/EditorConfig";
+
+import type { FormattedText, MarkFormat, TextMarks } from "../../types";
+import { normalizeTextChildren } from "../documentUtils";
+
+import { ESCAPABLE_MARKDOWN_CHARACTERS } from "./markdownUtils";
+
+type MarkdownTokenResult = {
+  nodes: FormattedText[];
+  consumedText: string;
+};
+
+type MarkSyntax = {
+  format: MarkFormat;
+  prefix: string;
+  suffix: string;
+};
+
+/**
+ * Returns the configured markdown syntaxes for the editor's supported marks.
+ *
+ * @returns {MarkSyntax[]} An array of mark syntax configurations.
+ *
+ * @example
+ * getMarkSyntaxes(); // [{ format: "bold", prefix: "**", suffix: "**" }, ...]
+ */
+const getMarkSyntaxes = (): MarkSyntax[] =>
+  MARK_DEFINITIONS.flatMap(({ format, markdownSyntax }) => {
+    if (!markdownSyntax) {
+      return [];
+    }
+
+    const [prefix, suffix] = markdownSyntax;
+
+    return [{ format, prefix, suffix }];
+  });
+
+/**
+ * Decodes escaped markdown characters back to raw text.
+ *
+ * @param {string} text - The serialized markdown text to decode.
+ * @returns {string} The decoded plain text.
+ *
+ * @example
+ * decodeMarkdownEscapes("\\*"); // "*"
+ */
+const decodeMarkdownEscapes = (text: string): string => {
+  let decodedText = "";
+  let index = 0;
+
+  while (index < text.length) {
+    const currentCharacter = text[index];
+    const nextCharacter = text[index + 1];
+    const isEscapedMarkdownCharacter =
+      currentCharacter === "\\" && ESCAPABLE_MARKDOWN_CHARACTERS.has(nextCharacter);
+
+    if (isEscapedMarkdownCharacter) {
+      decodedText += nextCharacter;
+      index += 2;
+    } else {
+      decodedText += currentCharacter;
+      index += 1;
+    }
+  }
+
+  return decodedText;
+};
+
+/**
+ * Returns a new collection with the text nodes appended, merging adjacent nodes with matching marks.
+ *
+ * @param {FormattedText[]} target - The existing collection.
+ * @param {FormattedText[]} nextTexts - The text nodes to append.
+ * @returns {FormattedText[]} A new collection with all text nodes appended or merged.
+ *
+ * @example
+ * appendFormattedTexts(
+ *   [{ text: "hello", bold: true }],
+ *   [{ text: " world", bold: true }]
+ * ); // [{ text: "hello world", bold: true }]
+ */
+const appendFormattedTexts = (
+  target: FormattedText[],
+  nextTexts: FormattedText[]
+): FormattedText[] =>
+  nextTexts.reduce((acc, nextText) => {
+    const previousText = acc[acc.length - 1];
+    const hasSameMarks =
+      previousText &&
+      MARK_DEFINITIONS.every(({ format }) => previousText[format] === nextText[format]);
+
+    if (!hasSameMarks) {
+      return [...acc, nextText];
+    }
+
+    return [...acc.slice(0, -1), { ...previousText, text: previousText.text + nextText.text }];
+  }, target);
+
+/**
+ * Checks whether the text has an escaped markdown character at the given index.
+ *
+ * @param {string} text - The text to inspect.
+ * @param {number} index - The index to check.
+ * @returns {boolean} True when the character at the index is a markdown escape sequence.
+ *
+ * @example
+ * isEscapedMarkdownCharacterAt("\\*", 0); // true
+ * isEscapedMarkdownCharacterAt("*", 0); // false
+ */
+const isEscapedMarkdownCharacterAt = (text: string, index: number): boolean =>
+  text[index] === "\\" && ESCAPABLE_MARKDOWN_CHARACTERS.has(text[index + 1]);
+
+/**
+ * Finds the next closing markdown syntax token, ignoring escaped markdown characters.
+ *
+ * @param {string} text - The text to search.
+ * @param {number} startIndex - The index where the search should begin.
+ * @param {string} suffix - The closing markdown syntax to find.
+ * @returns {number} The closing syntax index, or -1 when no closing syntax is found.
+ *
+ * @example
+ * findClosingSyntaxIndex("**bold**", 2, "**"); // 6
+ */
+const findClosingSyntaxIndex = (text: string, startIndex: number, suffix: string): number => {
+  let index = startIndex;
+
+  while (index < text.length) {
+    const isEscapedMarkdownCharacter = isEscapedMarkdownCharacterAt(text, index);
+    const isClosingSyntax = text.startsWith(suffix, index);
+
+    if (isEscapedMarkdownCharacter) {
+      index += 2;
+    } else if (isClosingSyntax) {
+      return index;
+    } else {
+      index += 1;
+    }
+  }
+
+  return -1;
+};
+
+/**
+ * Attempts to read a configured markdown mark token from the start of the text.
+ *
+ * @param {string} text - The remaining markdown text.
+ * @param {TextMarks} marks - The currently active inherited marks.
+ * @returns {MarkdownTokenResult | null} The parsed mark token, or null when no configured token matches.
+ *
+ * @example
+ * readConfiguredMarkToken("**bold**", {}); // { nodes: [{ text: "bold", bold: true }], consumedText: "**bold**" }
+ */
+const readConfiguredMarkToken = (text: string, marks: TextMarks): MarkdownTokenResult | null => {
+  for (const { format, prefix, suffix } of getMarkSyntaxes()) {
+    const startsWithPrefix = text.startsWith(prefix);
+    const closingIndex = startsWithPrefix
+      ? findClosingSyntaxIndex(text, prefix.length, suffix)
+      : -1;
+    const hasWrappedContent = closingIndex > prefix.length;
+
+    if (startsWithPrefix && hasWrappedContent) {
+      return {
+        nodes: parseMarkdownInline(text.slice(prefix.length, closingIndex), {
+          ...marks,
+          [format]: true,
+        }),
+        consumedText: text.slice(0, closingIndex + suffix.length),
+      };
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Attempts to read single-asterisk italic markdown from the start of the text.
+ *
+ * @param {string} text - The remaining markdown text.
+ * @param {TextMarks} marks - The currently active inherited marks.
+ * @returns {MarkdownTokenResult | null} The parsed italic token, or null when it does not match.
+ *
+ * @example
+ * readAsteriskItalicToken("*italic*", {}); // { nodes: [{ text: "italic", italic: true }], consumedText: "*italic*" }
+ */
+const readAsteriskItalicToken = (text: string, marks: TextMarks): MarkdownTokenResult | null => {
+  const startsWithSingleAsterisk = text.startsWith("*") && !text.startsWith("**");
+
+  if (!startsWithSingleAsterisk) {
+    return null;
+  }
+
+  const closingIndex = findClosingSyntaxIndex(text, 1, "*");
+
+  if (closingIndex <= 1) {
+    return null;
+  }
+
+  return {
+    nodes: parseMarkdownInline(text.slice(1, closingIndex), {
+      ...marks,
+      italic: true,
+    }),
+    consumedText: text.slice(0, closingIndex + 1),
+  };
+};
+
+/**
+ * Checks whether a markdown mark token starts at the given index.
+ *
+ * @param {string} text - The markdown text to inspect.
+ * @param {number} index - The index to check.
+ * @returns {boolean} True when a markdown token starts at the index.
+ *
+ * @example
+ * hasMarkTokenAt("hello **bold**", 6); // true
+ */
+const hasMarkTokenAt = (text: string, index: number): boolean => {
+  const remainingText = text.slice(index);
+
+  if (isEscapedMarkdownCharacterAt(text, index)) {
+    return true;
+  }
+
+  const hasConfiguredMarkToken = getMarkSyntaxes().some(({ prefix, suffix }) => {
+    if (!remainingText.startsWith(prefix)) {
+      return false;
+    }
+
+    return findClosingSyntaxIndex(remainingText, prefix.length, suffix) > prefix.length;
+  });
+
+  if (hasConfiguredMarkToken) {
+    return true;
+  }
+
+  return (
+    remainingText.startsWith("*") &&
+    !remainingText.startsWith("**") &&
+    findClosingSyntaxIndex(remainingText, 1, "*") > 1
+  );
+};
+
+/**
+ * Reads plain text until the next markdown mark token.
+ *
+ * @param {string} text - The remaining markdown text.
+ * @param {TextMarks} marks - The currently active inherited marks.
+ * @returns {MarkdownTokenResult} The plain text token result.
+ *
+ * @example
+ * readPlainTextToken("hello **bold**", {}); // { nodes: [{ text: "hello " }], consumedText: "hello " }
+ */
+const readPlainTextToken = (text: string, marks: TextMarks): MarkdownTokenResult => {
+  let endIndex = 1;
+
+  while (endIndex < text.length && !hasMarkTokenAt(text, endIndex)) {
+    endIndex += 1;
+  }
+
+  const consumedText = text.slice(0, endIndex);
+
+  return {
+    nodes: [{ text: decodeMarkdownEscapes(consumedText), ...marks }],
+    consumedText,
+  };
+};
+
+/**
+ * Parses the next markdown token from the start of the text.
+ *
+ * @param {string} text - The remaining text to parse.
+ * @param {TextMarks} marks - The currently active marks.
+ * @returns {MarkdownTokenResult} The parsed token result.
+ *
+ * @example
+ * parseNextMarkdownToken("**bold**", {}); // { nodes: [{ text: "bold", bold: true }], consumedText: "**bold**" }
+ */
+const parseNextMarkdownToken = (text: string, marks: TextMarks): MarkdownTokenResult => {
+  if (isEscapedMarkdownCharacterAt(text, 0)) {
+    return {
+      nodes: [{ text: text[1], ...marks }],
+      consumedText: text.slice(0, 2),
+    };
+  }
+
+  const configuredMarkToken = readConfiguredMarkToken(text, marks);
+
+  if (configuredMarkToken) {
+    return configuredMarkToken;
+  }
+
+  const asteriskItalicToken = readAsteriskItalicToken(text, marks);
+
+  if (asteriskItalicToken) {
+    return asteriskItalicToken;
+  }
+
+  return readPlainTextToken(text, marks);
+};
+
+/**
+ * Parses inline markdown into Slate text nodes using the editor's supported mark subset.
+ *
+ * @param {string} text - The inline markdown string to parse.
+ * @param {TextMarks} [marks={}] - The inherited marks from a parent token.
+ * @returns {FormattedText[]} The parsed and normalized text nodes.
+ *
+ * @example
+ * parseMarkdownInline("**bold**"); // [{ text: "bold", bold: true }]
+ * parseMarkdownInline("_italic_"); // [{ text: "italic", italic: true }]
+ */
+export const parseMarkdownInline = (text: string, marks: TextMarks = {}): FormattedText[] => {
+  if (!text) {
+    return [];
+  }
+
+  let result: FormattedText[] = [];
+  let remainingText = text;
+
+  while (remainingText.length > 0) {
+    const nextToken = parseNextMarkdownToken(remainingText, marks);
+    result = appendFormattedTexts(result, nextToken.nodes);
+    remainingText = remainingText.slice(nextToken.consumedText.length);
+  }
+
+  return normalizeTextChildren(result);
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.test.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.test.ts
new file mode 100644
index 000000000..77172bd84
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.test.ts
@@ -0,0 +1,221 @@
+import type { Descendant } from "slate";
+
+import * as utils from "./markdownSerializer";
+
+describe("escapeMarkdownText", () => {
+  it("should preserve ampersands", () => {
+    expect(utils.escapeMarkdownText("a & b")).toBe("a & b");
+  });
+
+  it("should preserve angle brackets", () => {
+    expect(utils.escapeMarkdownText("<div>")).toBe("<div>");
+  });
+
+  it("should escape backslashes", () => {
+    expect(utils.escapeMarkdownText("a\\b")).toBe("a\\\\b");
+  });
+
+  it("should escape asterisks", () => {
+    expect(utils.escapeMarkdownText("2 * 3")).toBe("2 \\* 3");
+  });
+
+  it("should escape underscores", () => {
+    expect(utils.escapeMarkdownText("a_b")).toBe("a\\_b");
+  });
+
+  it("should return plain text unchanged", () => {
+    expect(utils.escapeMarkdownText("hello world")).toBe("hello world");
+  });
+
+  it("should handle empty string", () => {
+    expect(utils.escapeMarkdownText("")).toBe("");
+  });
+});
+
+describe("applyMarkdownMarks", () => {
+  it("should wrap text in bold syntax", () => {
+    expect(utils.applyMarkdownMarks("hello", { bold: true })).toBe("**hello**");
+  });
+
+  it("should wrap text in italic syntax", () => {
+    expect(utils.applyMarkdownMarks("hello", { italic: true })).toBe("_hello_");
+  });
+
+  it("should wrap text in underline syntax", () => {
+    expect(utils.applyMarkdownMarks("hello", { underline: true })).toBe("<u>hello</u>");
+  });
+
+  it("should apply multiple marks", () => {
+    expect(utils.applyMarkdownMarks("hello", { bold: true, italic: true })).toBe("_**hello**_");
+  });
+
+  it("should preserve leading whitespace", () => {
+    expect(utils.applyMarkdownMarks("  hello", { bold: true })).toBe("  **hello**");
+  });
+
+  it("should preserve trailing whitespace", () => {
+    expect(utils.applyMarkdownMarks("hello  ", { bold: true })).toBe("**hello**  ");
+  });
+
+  it("should return preserved whitespace for whitespace-only text", () => {
+    expect(utils.applyMarkdownMarks("  ", {})).toBe("  ");
+  });
+
+  it("should return plain text when no marks are active", () => {
+    expect(utils.applyMarkdownMarks("hello", {})).toBe("hello");
+  });
+
+  it("should preserve ampersands in marked text", () => {
+    expect(utils.applyMarkdownMarks("a & b", { bold: true })).toBe("**a & b**");
+  });
+});
+
+describe("serializeToMarkdown", () => {
+  it("should serialize a paragraph", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "hello" }] }];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("hello");
+  });
+
+  it("should serialize bold text", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "hello", bold: true }] }];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("**hello**");
+  });
+
+  it("should serialize italic text", () => {
+    const nodes: Descendant[] = [
+      { type: "paragraph", children: [{ text: "hello", italic: true }] },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("_hello_");
+  });
+
+  it("should serialize underline text", () => {
+    const nodes: Descendant[] = [
+      { type: "paragraph", children: [{ text: "hello", underline: true }] },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("<u>hello</u>");
+  });
+
+  it("should serialize mixed inline formatting", () => {
+    const nodes: Descendant[] = [
+      {
+        type: "paragraph",
+        children: [
+          { text: "plain " },
+          { text: "bold", bold: true },
+          { text: " and " },
+          { text: "italic", italic: true },
+        ],
+      },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("plain **bold** and _italic_");
+  });
+
+  it("should serialize a bulleted list", () => {
+    const nodes: Descendant[] = [
+      {
+        type: "bulleted-list",
+        children: [
+          { type: "list-item", children: [{ text: "first" }] },
+          { type: "list-item", children: [{ text: "second" }] },
+        ],
+      },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("- first\n- second");
+  });
+
+  it("should serialize a numbered list", () => {
+    const nodes: Descendant[] = [
+      {
+        type: "numbered-list",
+        children: [
+          { type: "list-item", children: [{ text: "first" }] },
+          { type: "list-item", children: [{ text: "second" }] },
+        ],
+      },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("1. first\n2. second");
+  });
+
+  it("should separate multiple blocks with double newlines", () => {
+    const nodes: Descendant[] = [
+      { type: "paragraph", children: [{ text: "first" }] },
+      { type: "paragraph", children: [{ text: "second" }] },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("first\n\nsecond");
+  });
+
+  it("should skip empty paragraphs", () => {
+    const nodes: Descendant[] = [
+      { type: "paragraph", children: [{ text: "hello" }] },
+      { type: "paragraph", children: [{ text: "" }] },
+    ];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("hello");
+  });
+
+  it("should trim trailing whitespace", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "hello   " }] }];
+
+    expect(utils.serializeToMarkdown(nodes)).not.toMatch(/\s$/);
+  });
+
+  it("should escape special characters in plain text nodes", () => {
+    const nodes: Descendant[] = [{ type: "paragraph", children: [{ text: "a * b" }] }];
+
+    expect(utils.serializeToMarkdown(nodes)).toBe("a \\* b");
+  });
+});
+
+describe("getPlainTextLength", () => {
+  it("should return 0 for empty string", () => {
+    expect(utils.getPlainTextLength("")).toBe(0);
+  });
+
+  it("should return 0 for whitespace-only string", () => {
+    expect(utils.getPlainTextLength("   ")).toBe(0);
+  });
+
+  it("should return 0 for null-ish content", () => {
+    expect(utils.getPlainTextLength(null as unknown as string)).toBe(0);
+  });
+
+  it("should strip bold syntax", () => {
+    expect(utils.getPlainTextLength("**bold**")).toBe(4);
+  });
+
+  it("should strip italic asterisk syntax", () => {
+    expect(utils.getPlainTextLength("*italic*")).toBe(6);
+  });
+
+  it("should strip italic underscore syntax", () => {
+    expect(utils.getPlainTextLength("_italic_")).toBe(6);
+  });
+
+  it("should strip underline syntax", () => {
+    expect(utils.getPlainTextLength("<u>underline</u>")).toBe(9);
+  });
+
+  it("should strip bulleted list prefix", () => {
+    expect(utils.getPlainTextLength("- item")).toBe(4);
+  });
+
+  it("should strip numbered list prefix", () => {
+    expect(utils.getPlainTextLength("1. item")).toBe(4);
+  });
+
+  it("should unescape escaped characters", () => {
+    expect(utils.getPlainTextLength("a \\* b")).toBe(5);
+  });
+
+  it("should return the correct length for plain text", () => {
+    expect(utils.getPlainTextLength("hello world")).toBe(11);
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.ts
new file mode 100644
index 000000000..37e4d9b30
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownSerializer.ts
@@ -0,0 +1,212 @@
+import type { Descendant } from "slate";
+
+import { MARK_DEFINITIONS } from "@/config/EditorConfig";
+
+import type { FormattedText, TextMarks } from "../../types";
+import { isElementNode, isTextNode } from "../documentUtils";
+
+import { parseMarkdownInline } from "./markdownInlineParser";
+import { ESCAPABLE_MARKDOWN_CHARACTERS, normalizeLineEndings, readListLine } from "./markdownUtils";
+
+/**
+ * Escapes only markdown syntax characters.
+ *
+ * @param {string} text - The raw text to escape.
+ * @returns {string} The text with markdown syntax characters escaped.
+ *
+ * @example
+ * escapeMarkdownText("**not bold**"); // "\\*\\*not bold\\*\\*"
+ */
+export const escapeMarkdownText = (text: string): string => {
+  let escapedText = "";
+
+  Array.from(text).forEach((character) => {
+    if (ESCAPABLE_MARKDOWN_CHARACTERS.has(character)) {
+      escapedText += `\\${character}`;
+      return;
+    }
+
+    escapedText += character;
+  });
+
+  return escapedText;
+};
+
+/**
+ * Splits text into leading whitespace, inner content, and trailing whitespace.
+ *
+ * @param {string} text - The text to split.
+ * @returns {{ leadingWhitespace: string; markableText: string; trailingWhitespace: string }}
+ *
+ * @example
+ * splitSurroundingWhitespace("  hello  ");
+ * // { leadingWhitespace: "  ", markableText: "hello", trailingWhitespace: "  " }
+ */
+const splitSurroundingWhitespace = (
+  text: string
+): { leadingWhitespace: string; markableText: string; trailingWhitespace: string } => {
+  let startIndex = 0;
+  let endIndex = text.length;
+
+  while (startIndex < text.length && (text[startIndex] === " " || text[startIndex] === "\t")) {
+    startIndex += 1;
+  }
+
+  while (endIndex > startIndex && (text[endIndex - 1] === " " || text[endIndex - 1] === "\t")) {
+    endIndex -= 1;
+  }
+
+  return {
+    leadingWhitespace: text.slice(0, startIndex),
+    markableText: text.slice(startIndex, endIndex),
+    trailingWhitespace: text.slice(endIndex),
+  };
+};
+
+/**
+ * Wraps escaped text in markdown syntax for each active mark.
+ *
+ * @param {string} text - The raw text to format.
+ * @param {TextMarks} marks - The active formatting marks.
+ * @returns {string} The text with markdown syntax applied.
+ *
+ * @example
+ * applyMarkdownMarksToText("hello", { bold: true, italic: true }); // "_**hello**_"
+ */
+const applyMarkdownMarksToText = (text: string, marks: TextMarks): string =>
+  MARK_DEFINITIONS.reduce((markedText, { format, markdownSyntax }) => {
+    if (!markdownSyntax || !marks[format]) {
+      return markedText;
+    }
+
+    const [prefix, suffix] = markdownSyntax;
+
+    return `${prefix}${markedText}${suffix}`;
+  }, escapeMarkdownText(text));
+
+/**
+ * Applies markdown-compatible formatting marks to a plain text value.
+ *
+ * @param {string} text - The plain text to format.
+ * @param {TextMarks} marks - The formatting marks to apply.
+ * @returns {string} The text wrapped in the appropriate markdown syntax.
+ *
+ * @example
+ * applyMarkdownMarks("hello", { bold: true }); // "**hello**"
+ * applyMarkdownMarks("hello", { italic: true }); // "_hello_"
+ */
+export const applyMarkdownMarks = (text: string, marks: TextMarks): string => {
+  const { leadingWhitespace, markableText, trailingWhitespace } = splitSurroundingWhitespace(text);
+
+  if (!markableText) {
+    return text;
+  }
+
+  return [
+    leadingWhitespace,
+    applyMarkdownMarksToText(markableText, marks),
+    trailingWhitespace,
+  ].join("");
+};
+
+/**
+ * Serializes text children into a concatenated markdown string.
+ *
+ * @param {FormattedText[]} children - The text nodes to serialize.
+ * @returns {string} The concatenated markdown output.
+ *
+ * @example
+ * serializeTextChildren([{ text: "hello " }, { text: "world", bold: true }]); // "hello **world**"
+ */
+const serializeTextChildren = (children: FormattedText[]): string =>
+  children
+    .map(({ text, bold, italic, underline }) =>
+      applyMarkdownMarks(text, { bold, italic, underline })
+    )
+    .join("");
+
+/**
+ * Serializes a single top-level Slate node into its markdown representation.
+ *
+ * @param {Descendant} node - The Slate document node.
+ * @returns {string} The markdown string for the node.
+ *
+ * @example
+ * serializeMarkdownBlock({ type: "paragraph", children: [{ text: "hello" }] }); // "hello"
+ */
+const serializeMarkdownBlock = (node: Descendant): string => {
+  if (isTextNode(node)) {
+    return escapeMarkdownText(node.text);
+  }
+
+  if (!isElementNode(node)) {
+    return "";
+  }
+
+  if (node.type === "paragraph") {
+    return serializeTextChildren(node.children);
+  }
+
+  if (node.type === "bulleted-list") {
+    return node.children.map((item) => `- ${serializeTextChildren(item.children)}`).join("\n");
+  }
+
+  if (node.type === "numbered-list") {
+    return node.children
+      .map((item, index) => `${index + 1}. ${serializeTextChildren(item.children)}`)
+      .join("\n");
+  }
+
+  return "";
+};
+
+/**
+ * Converts a Slate rich-text value into the markdown subset used for storage.
+ *
+ * @param {Descendant[]} nodes - The top-level Slate document nodes.
+ * @returns {string} The serialized markdown string.
+ *
+ * @example
+ * serializeToMarkdown([{ type: "paragraph", children: [{ text: "hello" }] }]); // "hello"
+ */
+export const serializeToMarkdown = (nodes: Descendant[]): string =>
+  nodes.map(serializeMarkdownBlock).join("\n\n").trimEnd();
+
+/**
+ * Gets the plain text content of a markdown line.
+ *
+ * @param {string} line - The markdown line to extract text from.
+ * @returns {string} The visible plain text content of the line.
+ *
+ * @example
+ * getMarkdownLinePlainText("- **bold** item"); // "bold item"
+ */
+const getMarkdownLinePlainText = (line: string): string => {
+  const listLine = readListLine(line);
+  const inlineMarkdown = listLine ? listLine.content : line;
+
+  return parseMarkdownInline(inlineMarkdown)
+    .map(({ text }) => text)
+    .join("");
+};
+
+/**
+ * Gets the user-visible text length from stored markdown rich-text content.
+ *
+ * @param {string} content - The stored markdown rich-text content.
+ * @returns {number} The length of the visible text after stripping markdown syntax.
+ *
+ * @example
+ * getPlainTextLength("**bold**"); // 4
+ * getPlainTextLength("- item"); // 4
+ */
+export const getPlainTextLength = (content: string): number => {
+  if (!content?.trim()) {
+    return 0;
+  }
+
+  const normalizedContent = normalizeLineEndings(content);
+  const visibleText = normalizedContent.split("\n").map(getMarkdownLinePlainText).join("").trim();
+
+  return visibleText.length;
+};
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.test.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.test.ts
new file mode 100644
index 000000000..3f721ab18
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.test.ts
@@ -0,0 +1,68 @@
+import * as utils from "./markdownUtils";
+
+describe("normalizeLineEndings", () => {
+  it("should convert CRLF to LF", () => {
+    expect(utils.normalizeLineEndings("a\r\nb")).toBe("a\nb");
+  });
+
+  it("should convert CR to LF", () => {
+    expect(utils.normalizeLineEndings("a\rb")).toBe("a\nb");
+  });
+
+  it("should leave LF unchanged", () => {
+    expect(utils.normalizeLineEndings("a\nb")).toBe("a\nb");
+  });
+
+  it("should handle mixed line endings", () => {
+    expect(utils.normalizeLineEndings("a\r\nb\rc\nd")).toBe("a\nb\nc\nd");
+  });
+
+  it("should return an empty string unchanged", () => {
+    expect(utils.normalizeLineEndings("")).toBe("");
+  });
+});
+
+describe("readListLine", () => {
+  it("should parse a '-' bulleted list line", () => {
+    expect(utils.readListLine("- item")).toEqual({ format: "bulleted-list", content: "item" });
+  });
+
+  it("should parse a '*' bulleted list line", () => {
+    expect(utils.readListLine("* item")).toEqual({ format: "bulleted-list", content: "item" });
+  });
+
+  it("should parse a single-digit numbered list line", () => {
+    expect(utils.readListLine("1. first")).toEqual({ format: "numbered-list", content: "first" });
+  });
+
+  it("should parse a multi-digit numbered list line", () => {
+    expect(utils.readListLine("12. item")).toEqual({ format: "numbered-list", content: "item" });
+  });
+
+  it("should return null for a plain text line", () => {
+    expect(utils.readListLine("hello world")).toBeNull();
+  });
+
+  it("should return null for a bullet marker without a trailing space", () => {
+    expect(utils.readListLine("-item")).toBeNull();
+  });
+
+  it("should return null for a number without a dot separator", () => {
+    expect(utils.readListLine("1 item")).toBeNull();
+  });
+
+  it("should return null for a number with a dot but no trailing space", () => {
+    expect(utils.readListLine("1.item")).toBeNull();
+  });
+
+  it("should return null for an empty string", () => {
+    expect(utils.readListLine("")).toBeNull();
+  });
+
+  it("should preserve inline markdown in the content", () => {
+    expect(utils.readListLine("- **bold** item")).toEqual({
+      format: "bulleted-list",
+      content: "**bold** item",
+    });
+  });
+});
diff --git a/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.ts b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.ts
new file mode 100644
index 000000000..cb58b1a69
--- /dev/null
+++ b/apps/frontend/src/components/RichTextEditor/utils/markdown/markdownUtils.ts
@@ -0,0 +1,64 @@
+import type { ListFormat } from "../../types";
+
+/**
+ * Markdown characters that are escaped/unescaped by this editor's inline markdown subset.
+ */
+export const ESCAPABLE_MARKDOWN_CHARACTERS = new Set(["\\", "*", "_"]);
+
+/**
+ * Characters recognized as bulleted list markers.
+ */
+export const BULLET_MARKERS = new Set(["-", "*"]);
+
+export type ParsedListLine = {
+  format: ListFormat;
+  content: string;
+};
+
+/**
+ * Normalizes all line ending styles (CRLF, CR) to LF.
+ *
+ * @param {string} content - The raw string content.
+ * @returns {string} The content with all line endings replaced by `\n`.
+ */
+export const normalizeLineEndings = (content: string): string =>
+  content.split("\r\n").join("\n").split("\r").join("\n");
+
+/**
+ * Parses the list marker prefix from a markdown line.
+ *
+ * @param {string} line - A single markdown line.
+ * @returns {ParsedListLine | null} The list format and content, or null if not a list line.
+ *
+ * @example
+ * readListLine("- hello"); // { format: "bulleted-list", content: "hello" }
+ * readListLine("1. hello"); // { format: "numbered-list", content: "hello" }
+ * readListLine("hello");   // null
+ */
+export const readListLine = (line: string): ParsedListLine | null => {
+  if (BULLET_MARKERS.has(line[0]) && line[1] === " ") {
+    return {
+      format: "bulleted-list",
+      content: line.slice(2),
+    };
+  }
+
+  let index = 0;
+  const isDigitChar = (char: string): boolean => /^\d$/.test(char);
+
+  while (index < line.length && isDigitChar(line[index])) {
+    index += 1;
+  }
+
+  const hasNumber = index > 0;
+  const hasNumberedListSeparator = line[index] === "." && line[index + 1] === " ";
+
+  if (!hasNumber || !hasNumberedListSeparator) {
+    return null;
+  }
+
+  return {
+    format: "numbered-list",
+    content: line.slice(index + 2),
+  };
+};
diff --git a/apps/frontend/src/components/RichTextViewer/index.stories.tsx b/apps/frontend/src/components/RichTextViewer/index.stories.tsx
new file mode 100644
index 000000000..b3ebafcbc
--- /dev/null
+++ b/apps/frontend/src/components/RichTextViewer/index.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import RichTextViewer from "./index";
+
+type StoryArgs = React.ComponentProps<typeof RichTextViewer>;
+
+const meta: Meta<StoryArgs> = {
+  title: "Miscellaneous / Rich Text Viewer",
+  component: RichTextViewer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    content: {
+      control: "text",
+      description: "Markdown content rendered by the viewer.",
+    },
+    className: {
+      control: "text",
+    },
+  },
+  args: {
+    content: "Simple paragraph content.",
+  },
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {};
+
+export const FormattedContent: Story = {
+  args: {
+    content: [
+      "item 1",
+      "",
+      "  item 2",
+      "",
+      "    **item 3**",
+      "",
+      "      _**item 4**_",
+      "",
+      "",
+      "Hello _**World!          &lt;-10 spaces**_",
+      "",
+      "",
+      "1. **first** item",
+      "2. second item",
+      "3. third _**item**_",
+      "",
+      "",
+      "",
+      "",
+      "- item 1",
+      "- **item 2**",
+      "- _**item 3**_",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "**Hello World!**",
+    ].join("\n"),
+  },
+};
+
+export const EmptyContent: Story = {
+  args: {
+    content: "   ",
+  },
+};
diff --git a/apps/frontend/src/components/RichTextViewer/index.test.tsx b/apps/frontend/src/components/RichTextViewer/index.test.tsx
new file mode 100644
index 000000000..8079713bb
--- /dev/null
+++ b/apps/frontend/src/components/RichTextViewer/index.test.tsx
@@ -0,0 +1,57 @@
+import { axe } from "vitest-axe";
+
+import { render, waitFor } from "../../test-utils";
+
+import RichTextViewer from "./index";
+
+describe("Accessibility", () => {
+  it("should have no accessibility violations", async () => {
+    const { container } = render(<RichTextViewer content="**hello**" />);
+
+    await waitFor(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});
+
+describe("Basic Functionality", () => {
+  it("should render without crashing", () => {
+    expect(() => render(<RichTextViewer content="**hello**" />)).not.toThrow();
+  });
+
+  it("should render markdown content", () => {
+    const { getByText } = render(<RichTextViewer content="**hello**" />);
+
+    expect(getByText("hello")).toBeInTheDocument();
+  });
+
+  it("should not render when content is empty", () => {
+    const { container } = render(<RichTextViewer content="   " />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should strip style attributes from allowed elements", () => {
+    const { container } = render(
+      <RichTextViewer content='<u style="background:red;color:red">text</u>' />
+    );
+
+    expect(container.querySelector("u")).toBeInTheDocument();
+    expect(container.querySelector("u")).not.toHaveAttribute("style");
+  });
+
+  it("should strip event handler attributes from allowed elements", () => {
+    const { container } = render(<RichTextViewer content='<p onmouseover="alert(1)">text</p>' />);
+
+    const p = container.querySelector("p");
+
+    expect(p).toBeInTheDocument();
+    expect(p?.getAttribute("onmouseover")).toBeNull();
+  });
+
+  it("should strip class attributes from allowed elements", () => {
+    const { container } = render(<RichTextViewer content='<p class="injected">text</p>' />);
+
+    expect(container.querySelector("p")).not.toHaveAttribute("class");
+  });
+});
diff --git a/apps/frontend/src/components/RichTextViewer/index.tsx b/apps/frontend/src/components/RichTextViewer/index.tsx
new file mode 100644
index 000000000..39afc9f77
--- /dev/null
+++ b/apps/frontend/src/components/RichTextViewer/index.tsx
@@ -0,0 +1,150 @@
+import { styled } from "@mui/material";
+import { createElement, type ReactElement, type ReactNode } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+
+const MARKDOWN_ALLOWED_ELEMENTS = ["p", "br", "strong", "em", "u", "ul", "ol", "li"] as const;
+
+const BLANK_LINE_RUN_PATTERN = /\n{3,}/g;
+const NON_BREAKING_SPACE = "\u00A0";
+const TAB_SIZE = 2;
+
+const StyledMarkdown = styled(ReactMarkdown)({
+  lineHeight: "25px",
+
+  "& p": {
+    margin: "0 0 4px 0",
+    whiteSpace: "pre-wrap",
+    "&:last-child": { marginBottom: 0 },
+  },
+
+  "& ul, & ol": {
+    margin: "0 0 4px 0",
+    paddingLeft: "24px",
+    "&:last-child": { marginBottom: 0 },
+  },
+
+  "& li": {
+    lineHeight: "25px",
+    whiteSpace: "pre-wrap",
+  },
+});
+
+/**
+ * Normalize line endings so blank paragraph handling is consistent.
+ *
+ * @param {string} value - The markdown content.
+ * @returns {string} The content with normalized line endings.
+ */
+const normalizeLineEndings = (value: string): string => value.replace(/\r\n?/g, "\n");
+
+/**
+ * Replace hard blank-line runs with explicit <br /> blocks.
+ *
+ * This preserves multiple empty rows in the viewer without changing the stored value.
+ *
+ * @param {string} value - The markdown content with normalized line endings.
+ * @returns {string} The markdown content with blank paragraph placeholders.
+ */
+const preserveBlankParagraphs = (value: string): string =>
+  value.replace(BLANK_LINE_RUN_PATTERN, (lineBreaks) => {
+    const blankParagraphCount = Math.ceil((lineBreaks.length - 2) / 2);
+    const blankParagraphs = Array.from({ length: blankParagraphCount }, () => "<br />").join(
+      "\n\n"
+    );
+
+    return `\n\n${blankParagraphs}\n\n`;
+  });
+
+/**
+ * Convert leading spaces and tabs to real non-breaking space characters for rendering.
+ *
+ * @param {string} line - A single markdown line.
+ * @returns {string} The same line with leading whitespace converted for display.
+ */
+const preserveLeadingWhitespace = (line: string): string => {
+  let index = 0;
+  let preservedWhitespace = "";
+
+  while (index < line.length) {
+    const character = line[index];
+
+    if (character === " ") {
+      preservedWhitespace += NON_BREAKING_SPACE;
+      index += 1;
+    } else if (character === "\t") {
+      preservedWhitespace += NON_BREAKING_SPACE.repeat(TAB_SIZE);
+      index += 1;
+    } else {
+      break;
+    }
+  }
+
+  return `${preservedWhitespace}${line.slice(index)}`;
+};
+
+/**
+ * Preserve leading indentation while leaving raw HTML placeholder lines alone.
+ *
+ * @param {string} line - A single markdown line.
+ * @returns {string} A viewer-safe markdown line.
+ */
+const prepareLineForViewer = (line: string): string => {
+  const trimmedLine = line.trim();
+
+  if (trimmedLine === "<br />") {
+    return line;
+  }
+
+  return preserveLeadingWhitespace(line);
+};
+
+/**
+ * Prepare markdown for display only.
+ *
+ * @param {string} value - The stored markdown content.
+ * @returns {string} Markdown adjusted for viewer rendering.
+ */
+const prepareMarkdownForViewer = (value: string): string => {
+  const normalizedContent = normalizeLineEndings(value);
+  const contentWithBlankParagraphs = preserveBlankParagraphs(normalizedContent);
+
+  return contentWithBlankParagraphs.split("\n").map(prepareLineForViewer).join("\n");
+};
+
+/**
+ * Removed attributes from elements to avoid unsafe assignments.
+ */
+const SANITIZED_COMPONENTS: Components = Object.fromEntries(
+  MARKDOWN_ALLOWED_ELEMENTS.map((tag) => [
+    tag,
+    ({ children }: { children?: ReactNode }) => createElement(tag, null, children),
+  ])
+) as Components;
+
+type Props = {
+  content: string;
+  className?: string;
+};
+
+const RichTextViewer = ({ content, className }: Props): ReactElement | null => {
+  if (!content.trim()) {
+    return null;
+  }
+
+  return (
+    <StyledMarkdown
+      className={className}
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      allowedElements={[...MARKDOWN_ALLOWED_ELEMENTS]}
+      unwrapDisallowed
+      components={SANITIZED_COMPONENTS}
+    >
+      {prepareMarkdownForViewer(content)}
+    </StyledMarkdown>
+  );
+};
+
+export default RichTextViewer;
diff --git a/apps/frontend/src/config/EditorConfig.ts b/apps/frontend/src/config/EditorConfig.ts
new file mode 100644
index 000000000..ff30d12e8
--- /dev/null
+++ b/apps/frontend/src/config/EditorConfig.ts
@@ -0,0 +1,58 @@
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
+
+import { BlockDefinition, MarkDefinition } from "@/components/RichTextEditor/types";
+
+/**
+ * Defines the supported inline mark formats.
+ */
+export const MARK_DEFINITIONS: MarkDefinition[] = [
+  {
+    format: "bold",
+    tooltip: "Bold (Ctrl+B)",
+    icon: FormatBoldIcon,
+    enabled: true,
+    hotkey: "b",
+    htmlTag: "strong",
+    markdownSyntax: ["**", "**"],
+  },
+  {
+    format: "italic",
+    tooltip: "Italic (Ctrl+I)",
+    icon: FormatItalicIcon,
+    enabled: true,
+    hotkey: "i",
+    htmlTag: "em",
+    markdownSyntax: ["_", "_"],
+  },
+  {
+    format: "underline",
+    tooltip: "Underline (Ctrl+U)",
+    icon: FormatUnderlinedIcon,
+    enabled: false,
+    hotkey: "u",
+    htmlTag: "u",
+    markdownSyntax: ["<u>", "</u>"],
+  },
+];
+
+/**
+ * Defines the supported block mark formats.
+ */
+export const BLOCK_DEFINITIONS: BlockDefinition[] = [
+  {
+    format: "bulleted-list",
+    tooltip: "Bullet List",
+    icon: FormatListBulletedIcon,
+    enabled: true,
+  },
+  {
+    format: "numbered-list",
+    tooltip: "Numbered List",
+    icon: FormatListNumberedIcon,
+    enabled: true,
+  },
+];
diff --git a/apps/frontend/src/content/questionnaire/FormView.test.tsx b/apps/frontend/src/content/questionnaire/FormView.test.tsx
index 529ab7b5f..17c566a2f 100644
--- a/apps/frontend/src/content/questionnaire/FormView.test.tsx
+++ b/apps/frontend/src/content/questionnaire/FormView.test.tsx
@@ -67,6 +67,42 @@ vi.mock("../../components/SuspenseLoader", () => ({
   default: () => <div data-testid="mock-loader">Loading...</div>,
 }));
 
+vi.mock("../../components/RichTextEditor", () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  const { forwardRef } = require("react");
+  return {
+    default: forwardRef(
+      ({
+        value,
+        onChange,
+        onTextLengthChange,
+        "data-testid": dataTestId,
+        placeholder,
+        disabled,
+      }: {
+        value: string;
+        onChange: (v: string) => void;
+        onTextLengthChange?: (n: number) => void;
+        "data-testid"?: string;
+        placeholder?: string;
+        disabled?: boolean;
+      }) => (
+        <div data-testid={dataTestId}>
+          <textarea
+            placeholder={placeholder}
+            disabled={disabled}
+            value={value}
+            onChange={(e) => {
+              onChange(e.target.value);
+              onTextLengthChange?.(e.target.value.length);
+            }}
+          />
+        </div>
+      )
+    ),
+  };
+});
+
 vi.mock("../../components/CancelApplicationButton", () => ({
   default: () => <div data-testid="mock-cancel-button">Cancel</div>,
 }));