From ff1a6180ff8532c0d4211971746d8b7e1edb0869 Mon Sep 17 00:00:00 2001
From: Dejan Vasic <dejanvasic24@gmail.com>
Date: Sat, 11 Jan 2025 19:11:48 +1100
Subject: [PATCH] Adding tip tap editor basic

---
 package-lock.json                | 587 ++++++++++++++++++++++++++++++-
 package.json                     |   3 +
 src/components/HtmlEditor.svelte |  45 +++
 src/components/Note.svelte       |   6 +-
 src/components/NoteEditor.svelte |  61 +---
 src/routes/+page.svelte          |   2 +-
 6 files changed, 645 insertions(+), 59 deletions(-)
 create mode 100644 src/components/HtmlEditor.svelte

diff --git a/package-lock.json b/package-lock.json
index e8890d1..e9adc3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,9 @@
 				"@auth0/auth0-spa-js": "^2.1.1",
 				"@aws-sdk/client-ses": "^3.540.0",
 				"@prisma/client": "^6.0.0",
+				"@tiptap/core": "^2.11.2",
+				"@tiptap/pm": "^2.11.2",
+				"@tiptap/starter-kit": "^2.11.2",
 				"fp-ts": "^2.16.5",
 				"jsonwebtoken": "^9.0.1",
 				"jwks-rsa": "^3.0.1",
@@ -1748,6 +1751,11 @@
 			"devOptional": true,
 			"license": "Apache-2.0"
 		},
+		"node_modules/@remirror/core-constants": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+			"integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg=="
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.1.4",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
@@ -3160,6 +3168,312 @@
 				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
 			}
 		},
+		"node_modules/@tiptap/core": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.11.2.tgz",
+			"integrity": "sha512-Z437c/sQg31yrRVgLJVkQuih+7Og5tjRx6FE/zE47QgEayqQ9yXH0LrTAbPiY6IfY1X+f2A0h3e5Y/WGD6rC3Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-blockquote": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.11.2.tgz",
+			"integrity": "sha512-5XeU1o5UfjMCFX3AwgeErwDKlpUr5YPhta2tQqNsQUQ7QvumIdK/3apNT15/d8pySAjdAphDWEd/CZ2di5hq6A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-bold": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.11.2.tgz",
+			"integrity": "sha512-pSls6UnKiPMm2c0m1viuZ0aFexxUmTRm17vDA2Gy5PhRm5qSsnHlSxyEuEcKNOi/rIx+oJehvG1oO4uI+kmCKg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-bullet-list": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.11.2.tgz",
+			"integrity": "sha512-zqZYT7lmmivEDEO+6w5bl5kV3UP1L2dw5mksyMGtxpvoDgbFHZ85+ron6SeHee8C7vJc6aIptc1p6NxIS5/l0A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-code": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.11.2.tgz",
+			"integrity": "sha512-G8vvb17QAYQij3haz9RoDvArK1LSOZHqGzQ2dJ3/d0W5oqOyUrTnseN66fRZjWhBT3pns0VL2erwe/NBIqLOIw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-code-block": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.11.2.tgz",
+			"integrity": "sha512-O6gVfql3uFZNq9yaUDa98VgV58BqaUSeOUnhZwLzpB/4VlqzTyW6/kvFxhKcSp7f+GmrMQaV4PXRs+tZcq6EFw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-document": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.11.2.tgz",
+			"integrity": "sha512-/EZhIAN1x7DYgGM0xv7y7wo5ceBmHb0+rOIPuBerVFeTn+VcC3tST/Q64bdvcxgNe2E59Ti0CUdYEA51wc2u5Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-dropcursor": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.11.2.tgz",
+			"integrity": "sha512-HbXC9cMVZUY3kyKwbDtVH452CY1qlyLbIvTaN0+dxkFgcVeQZZtfIxU7DwMmqCDmDnsh0CdDqUgUvcXS2UQTwA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-gapcursor": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.11.2.tgz",
+			"integrity": "sha512-ssJOrcc8dzlo5/Qq3+EixASDHTj3mqCyAv7Ohed1QYEYr+TsSpsTbjR0eMLjWHlgbt24TXL2Wr0ldjYCU8T1ZA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-hard-break": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.11.2.tgz",
+			"integrity": "sha512-FNcXemfuwkiP4drZ9m90BC6GD4nyikfYHYEUyYuVd74Mm6w5vXpueWXus3mUcdT78xTs1XpQVibDorilLu7X8w==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-heading": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.11.2.tgz",
+			"integrity": "sha512-y/wAEXYB0a8y5WmSYGCIXAhus1ydudn0pokKIzT/OD00XutAVh14qOB5h/+m8iXwGU/UYMP7SUCtK82txZqwKA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-history": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.11.2.tgz",
+			"integrity": "sha512-BamS6YjKsETgP7msmm0oIpqmNSLJWbivm3XurR3uSUqJZYrQo1Fv+No4HAR7eAACxoOnYGcDmYsrombRVs9lxw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-horizontal-rule": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.11.2.tgz",
+			"integrity": "sha512-R7MkTQzxkBy0bXJfq6L+6ax01/hmTEUvPPoyjwDSfU1Ktc1ihBJGUdTNtohT1KoQGQYt2d9khBohVspsXoCmFw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-italic": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.11.2.tgz",
+			"integrity": "sha512-652oTa+iDiR7sMtmePSy+303HSNJxvxmV/6IvQoMdffJU0oPiWcWnCCL0qrWgtHh15dplj36EtB/znENWbvVOw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-list-item": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.11.2.tgz",
+			"integrity": "sha512-cxysDCvw45bem53qLZtTCkle1pttO4Y/FGqYm1hl66ol3cZsuLbjpOb4aDB6wRhyd701Ws6MjOYM+cZsmtTNpw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-ordered-list": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.11.2.tgz",
+			"integrity": "sha512-TR8OqwKkQ0OCp40V9hcRJUcO1PSzCYWXy0mvW351lOYO8D6uE+1ouVkEV9qjXBC30sVCnQykSp/FR9UjsIuiVw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-paragraph": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.11.2.tgz",
+			"integrity": "sha512-iydTjeZbPJuqctOaAx7QebLPvz9J/hBxPptuhe4GZmqInknAk7+SFJagYeGNb14wfXKOvDZ9DMqv6mBiqSA90Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-strike": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.11.2.tgz",
+			"integrity": "sha512-n/rznmhqFlENGSlFY9t3pWnWzSmvDpUj3sjVhdpYteis+OCzabN9+c5KdQTBPMjtwRuRleQiKWnHmxvif0heEg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-text": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.11.2.tgz",
+			"integrity": "sha512-fJZeKYM5jeJ7NpS3FWLnC/NAvg+mZNbcTaRgXMo5ljBCgiMcYHhYg9p/RHk4SeICZBBpR9WSSZXHMACd9CbJiA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-text-style": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.11.2.tgz",
+			"integrity": "sha512-RAa7BTwEOJRZN3EB2lg03KXyu7JC/Ce96cerh3D0Fo78yrtKOArPaiVHoTki6ZEIG43ccHEit1PPjMYxivPPeg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/pm": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.2.tgz",
+			"integrity": "sha512-lNOMFRcD0mGy7Hf8tFMHW/fnglvq3dA0grs0QrSY4cHyYbH9BHtQjLMDceczXdXbXZq7nEqC40UBWNnqtaclpw==",
+			"dependencies": {
+				"prosemirror-changeset": "^2.2.1",
+				"prosemirror-collab": "^1.3.1",
+				"prosemirror-commands": "^1.6.2",
+				"prosemirror-dropcursor": "^1.8.1",
+				"prosemirror-gapcursor": "^1.3.2",
+				"prosemirror-history": "^1.4.1",
+				"prosemirror-inputrules": "^1.4.0",
+				"prosemirror-keymap": "^1.2.2",
+				"prosemirror-markdown": "^1.13.1",
+				"prosemirror-menu": "^1.2.4",
+				"prosemirror-model": "^1.23.0",
+				"prosemirror-schema-basic": "^1.2.3",
+				"prosemirror-schema-list": "^1.4.1",
+				"prosemirror-state": "^1.4.3",
+				"prosemirror-tables": "^1.6.1",
+				"prosemirror-trailing-node": "^3.0.0",
+				"prosemirror-transform": "^1.10.2",
+				"prosemirror-view": "^1.37.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			}
+		},
+		"node_modules/@tiptap/starter-kit": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.11.2.tgz",
+			"integrity": "sha512-FUIblP9BSmBzskf/aX7AIcUK5XP5Gi/VqUqm5evCkzlR1FrggLoy+vY+CX0me4oE/WYk4KAgIRXkE9tcbwotQA==",
+			"dependencies": {
+				"@tiptap/core": "^2.11.2",
+				"@tiptap/extension-blockquote": "^2.11.2",
+				"@tiptap/extension-bold": "^2.11.2",
+				"@tiptap/extension-bullet-list": "^2.11.2",
+				"@tiptap/extension-code": "^2.11.2",
+				"@tiptap/extension-code-block": "^2.11.2",
+				"@tiptap/extension-document": "^2.11.2",
+				"@tiptap/extension-dropcursor": "^2.11.2",
+				"@tiptap/extension-gapcursor": "^2.11.2",
+				"@tiptap/extension-hard-break": "^2.11.2",
+				"@tiptap/extension-heading": "^2.11.2",
+				"@tiptap/extension-history": "^2.11.2",
+				"@tiptap/extension-horizontal-rule": "^2.11.2",
+				"@tiptap/extension-italic": "^2.11.2",
+				"@tiptap/extension-list-item": "^2.11.2",
+				"@tiptap/extension-ordered-list": "^2.11.2",
+				"@tiptap/extension-paragraph": "^2.11.2",
+				"@tiptap/extension-strike": "^2.11.2",
+				"@tiptap/extension-text": "^2.11.2",
+				"@tiptap/extension-text-style": "^2.11.2",
+				"@tiptap/pm": "^2.11.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			}
+		},
 		"node_modules/@types/body-parser": {
 			"version": "1.19.5",
 			"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -3235,12 +3549,31 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/linkify-it": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+			"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="
+		},
 		"node_modules/@types/lodash": {
 			"version": "4.17.13",
 			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
 			"integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
 			"dev": true
 		},
+		"node_modules/@types/markdown-it": {
+			"version": "14.1.2",
+			"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+			"integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+			"dependencies": {
+				"@types/linkify-it": "^5",
+				"@types/mdurl": "^2"
+			}
+		},
+		"node_modules/@types/mdurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+			"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
+		},
 		"node_modules/@types/mime": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -3805,8 +4138,7 @@
 		"node_modules/argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-			"dev": true
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
 		},
 		"node_modules/aria-query": {
 			"version": "5.3.2",
@@ -4178,6 +4510,11 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/crelt": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4317,6 +4654,17 @@
 			"integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
 			"dev": true
 		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/environment": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
@@ -4387,7 +4735,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
 			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -5431,6 +5778,14 @@
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
 			"dev": true
 		},
+		"node_modules/linkify-it": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+			"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+			"dependencies": {
+				"uc.micro": "^2.0.0"
+			}
+		},
 		"node_modules/lint-staged": {
 			"version": "15.3.0",
 			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.3.0.tgz",
@@ -5664,6 +6019,27 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/markdown-it": {
+			"version": "14.1.0",
+			"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+			"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+			"dependencies": {
+				"argparse": "^2.0.1",
+				"entities": "^4.4.0",
+				"linkify-it": "^5.0.0",
+				"mdurl": "^2.0.0",
+				"punycode.js": "^2.3.1",
+				"uc.micro": "^2.1.0"
+			},
+			"bin": {
+				"markdown-it": "bin/markdown-it.mjs"
+			}
+		},
+		"node_modules/mdurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+			"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+		},
 		"node_modules/merge-stream": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5993,6 +6369,11 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/orderedmap": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+			"integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+		},
 		"node_modules/p-limit": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -6591,6 +6972,183 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/prosemirror-changeset": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz",
+			"integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==",
+			"dependencies": {
+				"prosemirror-transform": "^1.0.0"
+			}
+		},
+		"node_modules/prosemirror-collab": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+			"integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+			"dependencies": {
+				"prosemirror-state": "^1.0.0"
+			}
+		},
+		"node_modules/prosemirror-commands": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz",
+			"integrity": "sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==",
+			"dependencies": {
+				"prosemirror-model": "^1.0.0",
+				"prosemirror-state": "^1.0.0",
+				"prosemirror-transform": "^1.10.2"
+			}
+		},
+		"node_modules/prosemirror-dropcursor": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz",
+			"integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==",
+			"dependencies": {
+				"prosemirror-state": "^1.0.0",
+				"prosemirror-transform": "^1.1.0",
+				"prosemirror-view": "^1.1.0"
+			}
+		},
+		"node_modules/prosemirror-gapcursor": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+			"integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+			"dependencies": {
+				"prosemirror-keymap": "^1.0.0",
+				"prosemirror-model": "^1.0.0",
+				"prosemirror-state": "^1.0.0",
+				"prosemirror-view": "^1.0.0"
+			}
+		},
+		"node_modules/prosemirror-history": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+			"integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+			"dependencies": {
+				"prosemirror-state": "^1.2.2",
+				"prosemirror-transform": "^1.0.0",
+				"prosemirror-view": "^1.31.0",
+				"rope-sequence": "^1.3.0"
+			}
+		},
+		"node_modules/prosemirror-inputrules": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
+			"integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
+			"dependencies": {
+				"prosemirror-state": "^1.0.0",
+				"prosemirror-transform": "^1.0.0"
+			}
+		},
+		"node_modules/prosemirror-keymap": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+			"integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+			"dependencies": {
+				"prosemirror-state": "^1.0.0",
+				"w3c-keyname": "^2.2.0"
+			}
+		},
+		"node_modules/prosemirror-markdown": {
+			"version": "1.13.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz",
+			"integrity": "sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==",
+			"dependencies": {
+				"@types/markdown-it": "^14.0.0",
+				"markdown-it": "^14.0.0",
+				"prosemirror-model": "^1.20.0"
+			}
+		},
+		"node_modules/prosemirror-menu": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+			"integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
+			"dependencies": {
+				"crelt": "^1.0.0",
+				"prosemirror-commands": "^1.0.0",
+				"prosemirror-history": "^1.0.0",
+				"prosemirror-state": "^1.0.0"
+			}
+		},
+		"node_modules/prosemirror-model": {
+			"version": "1.24.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.24.1.tgz",
+			"integrity": "sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==",
+			"dependencies": {
+				"orderedmap": "^2.0.0"
+			}
+		},
+		"node_modules/prosemirror-schema-basic": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz",
+			"integrity": "sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==",
+			"dependencies": {
+				"prosemirror-model": "^1.19.0"
+			}
+		},
+		"node_modules/prosemirror-schema-list": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.0.tgz",
+			"integrity": "sha512-gg1tAfH1sqpECdhIHOA/aLg2VH3ROKBWQ4m8Qp9mBKrOxQRW61zc+gMCI8nh22gnBzd1t2u1/NPLmO3nAa3ssg==",
+			"dependencies": {
+				"prosemirror-model": "^1.0.0",
+				"prosemirror-state": "^1.0.0",
+				"prosemirror-transform": "^1.7.3"
+			}
+		},
+		"node_modules/prosemirror-state": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+			"integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+			"dependencies": {
+				"prosemirror-model": "^1.0.0",
+				"prosemirror-transform": "^1.0.0",
+				"prosemirror-view": "^1.27.0"
+			}
+		},
+		"node_modules/prosemirror-tables": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.2.tgz",
+			"integrity": "sha512-97dKocVLrEVTQjZ4GBLdrrMw7Gv3no8H8yMwf5IRM9OoHrzbWpcH5jJxYgNQIRCtdIqwDctT1HdMHrGTiwp1dQ==",
+			"dependencies": {
+				"prosemirror-keymap": "^1.2.2",
+				"prosemirror-model": "^1.24.1",
+				"prosemirror-state": "^1.4.3",
+				"prosemirror-transform": "^1.10.2",
+				"prosemirror-view": "^1.37.1"
+			}
+		},
+		"node_modules/prosemirror-trailing-node": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+			"integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+			"dependencies": {
+				"@remirror/core-constants": "3.0.0",
+				"escape-string-regexp": "^4.0.0"
+			},
+			"peerDependencies": {
+				"prosemirror-model": "^1.22.1",
+				"prosemirror-state": "^1.4.2",
+				"prosemirror-view": "^1.33.8"
+			}
+		},
+		"node_modules/prosemirror-transform": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz",
+			"integrity": "sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==",
+			"dependencies": {
+				"prosemirror-model": "^1.21.0"
+			}
+		},
+		"node_modules/prosemirror-view": {
+			"version": "1.37.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.1.tgz",
+			"integrity": "sha512-MEAnjOdXU1InxEmhjgmEzQAikaS6lF3hD64MveTPpjOGNTl87iRLA1HupC/DEV6YuK7m4Q9DHFNTjwIVtqz5NA==",
+			"dependencies": {
+				"prosemirror-model": "^1.20.0",
+				"prosemirror-state": "^1.0.0",
+				"prosemirror-transform": "^1.1.0"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6600,6 +7158,14 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/punycode.js": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+			"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6815,6 +7381,11 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/rope-sequence": {
+			"version": "1.3.4",
+			"resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+			"integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
+		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7695,6 +8266,11 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/uc.micro": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+			"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+		},
 		"node_modules/undici-types": {
 			"version": "6.19.8",
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@@ -7938,6 +8514,11 @@
 				}
 			}
 		},
+		"node_modules/w3c-keyname": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+		},
 		"node_modules/webidl-conversions": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 5b6f096..9482f54 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,9 @@
 		"@auth0/auth0-spa-js": "^2.1.1",
 		"@aws-sdk/client-ses": "^3.540.0",
 		"@prisma/client": "^6.0.0",
+		"@tiptap/core": "^2.11.2",
+		"@tiptap/pm": "^2.11.2",
+		"@tiptap/starter-kit": "^2.11.2",
 		"fp-ts": "^2.16.5",
 		"jsonwebtoken": "^9.0.1",
 		"jwks-rsa": "^3.0.1",
diff --git a/src/components/HtmlEditor.svelte b/src/components/HtmlEditor.svelte
new file mode 100644
index 0000000..83e29f1
--- /dev/null
+++ b/src/components/HtmlEditor.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+
+	type Props = {
+		initialContent: string;
+		onupdate(html: string, plaintext: string): void;
+	};
+
+	let { initialContent, onupdate }: Props = $props();
+	let element: HTMLDivElement;
+	let editor: Editor;
+
+	onMount(() => {
+		editor = new Editor({
+			autofocus: 'end',
+			editable: true,
+			editorProps: {
+				attributes: {
+					class: 'prose h-full p-4 focus:outline-none dark:prose-invert'
+				}
+			},
+			injectCSS: true,
+			element: element,
+			extensions: [StarterKit],
+			content: initialContent,
+			onTransaction: () => {
+				// force re-render so `editor.isActive` works as expected
+				editor = editor;
+			},
+			onUpdate: ({ editor }) => {
+				onupdate(editor.getHTML(), editor.getText());
+			}
+		});
+	});
+
+	onDestroy(() => {
+		if (editor) {
+			editor.destroy();
+		}
+	});
+</script>
+
+<div class="h-full" bind:this={element}></div>
diff --git a/src/components/Note.svelte b/src/components/Note.svelte
index a1c5b74..1ee6ef1 100644
--- a/src/components/Note.svelte
+++ b/src/components/Note.svelte
@@ -33,7 +33,7 @@
 <div
 	id={note.id}
 	aria-label={`Edit note ${index + 1}`}
-	class="h-full w-full overflow-hidden rounded-lg p-6 {className} relative select-none hover:cursor-grab hover:ring-2 dark:hover:ring-darkText {isDragging
+	class="prose h-full w-full overflow-hidden rounded-lg px-4 text-sm dark:prose-invert lg:text-base {className} relative select-none hover:cursor-grab hover:ring-2 dark:hover:ring-darkText {isDragging
 		? 'opacity-50'
 		: ''}"
 	tabindex={index}
@@ -47,7 +47,9 @@
 	onmouseleave={() => (isHovering = false)}
 >
 	{#if isDraggable}
-		<div class="absolute right-2 top-2 text-gray-700 {isHovering ? '' : 'md:hidden'}">
+		<div
+			class="absolute right-2 top-2 text-gray-700 dark:text-white {isHovering ? '' : 'md:hidden'}"
+		>
 			<Icon icon="squares-box" size={20} fill="none" title="Drag to reorder" />
 		</div>
 	{/if}
diff --git a/src/components/NoteEditor.svelte b/src/components/NoteEditor.svelte
index 5c8e0d9..650efde 100644
--- a/src/components/NoteEditor.svelte
+++ b/src/components/NoteEditor.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-
 	import { type Colour } from '$lib/colours';
 	import type { FriendSelection, NoteOrdered, ToggleFriendShare } from '$lib/types';
 
@@ -9,6 +7,7 @@
 	import Dialog from './Dialog.svelte';
 	import Icon from './Icon.svelte';
 	import Share from './Share.svelte';
+	import HtmlEditor from './HtmlEditor.svelte';
 
 	type Props = {
 		enableSharing?: boolean;
@@ -32,16 +31,9 @@
 		onupdateColour
 	}: Props = $props();
 
-	// Internal state
-	let editor: HTMLDivElement;
 	let noteText: string = $state(note.text);
 	let noteTextPlain: string = $state(note.textPlain);
 
-	// Internal handlers
-	async function handleModalOpen() {
-		await moveCursorToEnd();
-	}
-
 	function handleSave() {
 		onsavenote({
 			note: {
@@ -52,26 +44,6 @@
 		});
 	}
 
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.repeat) {
-			return;
-		}
-
-		if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-			handleSave();
-		}
-
-		if (event.key === 'Escape') {
-			handleClose();
-		}
-	}
-
-	function handlePaste(event: ClipboardEvent) {
-		event.preventDefault();
-		const text = event.clipboardData?.getData('text/plain') ?? '';
-		document.execCommand('insertHTML', false, text);
-	}
-
 	function handleDeleteClick() {
 		if (confirm('Are you sure you want to delete this note?')) {
 			ondeletenote({ note });
@@ -87,25 +59,17 @@
 		});
 	}
 
-	async function moveCursorToEnd() {
-		await tick();
-		const selection = window.getSelection();
-		const range = document.createRange();
-		selection?.removeAllRanges();
-		if (editor) {
-			range.selectNodeContents(editor);
-			range.collapse(false);
-			selection?.addRange(range);
-			editor.focus();
-		}
-	}
-
 	const handleClose = () => {
 		onclose();
 	};
+
+	const handleContentUpdate = (html: string, plaintext: string) => {
+		noteText = html;
+		noteTextPlain = plaintext;
+	};
 </script>
 
-<Dialog show={true} colour={note.colour} onopen={handleModalOpen}>
+<Dialog show={true} colour={note.colour}>
 	{#snippet header()}
 		<div class="px-2 pt-2">
 			<div class="flex justify-between">
@@ -138,16 +102,7 @@
 	{/snippet}
 
 	{#snippet body()}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			contenteditable="true"
-			class="h-full w-full p-4 outline-none"
-			bind:this={editor}
-			bind:innerHTML={noteText}
-			bind:innerText={noteTextPlain}
-			onkeydown={handleKeydown}
-			onpaste={handlePaste}
-		></div>
+		<HtmlEditor initialContent={noteText} onupdate={handleContentUpdate} />
 	{/snippet}
 
 	{#snippet footer()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2b3baa8..c939e02 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,7 +18,7 @@
 
 	onMount(() => {
 		boardState.reset();
-		boardState.createNewNote('Click here to edit me! You can also drag to reorder 😊');
+		boardState.createNewNote('<p>Click here to edit me! You can also drag to reorder 😊</p>');
 	});
 
 	function handleCreateNote() {