From e30c5e628c69884e7baf40a224f047836f87e471 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 20 Nov 2024 22:46:51 -0800
Subject: [PATCH 1/4] refac: rich text input

---
 package-lock.json                             | 895 +++++++++++++++++-
 package.json                                  |   7 +
 src/app.css                                   |  29 +-
 src/lib/components/chat/MessageInput.svelte   |  71 +-
 .../components/common/RichTextInput.svelte    | 556 +++--------
 5 files changed, 1072 insertions(+), 486 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0d310e9b4..f3feac815 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,12 @@
 				"@mediapipe/tasks-vision": "^0.10.17",
 				"@pyscript/core": "^0.4.32",
 				"@sveltejs/adapter-node": "^2.0.0",
+				"@tiptap/core": "^2.10.0",
+				"@tiptap/extension-highlight": "^2.10.0",
+				"@tiptap/extension-placeholder": "^2.10.0",
+				"@tiptap/extension-typography": "^2.10.0",
+				"@tiptap/pm": "^2.10.0",
+				"@tiptap/starter-kit": "^2.10.0",
 				"@xyflow/svelte": "^0.1.19",
 				"async": "^3.2.5",
 				"bits-ui": "^0.19.7",
@@ -73,6 +79,7 @@
 				"postcss": "^8.4.31",
 				"prettier": "^3.3.3",
 				"prettier-plugin-svelte": "^3.2.6",
+				"sass-embedded": "^1.81.0",
 				"svelte": "^4.2.18",
 				"svelte-check": "^3.8.5",
 				"svelte-confetti": "^1.3.2",
@@ -136,6 +143,13 @@
 			"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
 			"integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
 		},
+		"node_modules/@bufbuild/protobuf": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.2.2.tgz",
+			"integrity": "sha512-UNtPCbrwrenpmrXuRwn9jYpPoweNXj8X5sMvYgsqYyaH8jQ6LfUJSk3dJLnBK+6sfYPrF4iAIo5sd5HQ+tg75A==",
+			"devOptional": true,
+			"license": "(Apache-2.0 AND BSD-3-Clause)"
+		},
 		"node_modules/@codemirror/autocomplete": {
 			"version": "6.16.2",
 			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.2.tgz",
@@ -1901,6 +1915,12 @@
 				"type-checked-collections": "^0.1.7"
 			}
 		},
+		"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==",
+			"license": "MIT"
+		},
 		"node_modules/@rollup/plugin-commonjs": {
 			"version": "25.0.7",
 			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz",
@@ -2326,6 +2346,374 @@
 				"tailwindcss": ">=3.0.0 || insiders"
 			}
 		},
+		"node_modules/@tiptap/core": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.10.0.tgz",
+			"integrity": "sha512-58nAjPxLRFcXepdDqQRC1mhrw6E8Sanqr6bbO4Tz0+FWgDJMZvHG+dOK5wHaDVNSgK2iJDz08ETvQayfOOgDvg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-blockquote": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.10.0.tgz",
+			"integrity": "sha512-6Xmfo2lpfIRcbfkLD/NGX4YgQqfgAbu6XaZQZf5oGtHLPTrz4D7Mw20GgNBHzae2XwUCwLMt6zXOkBgU/LnlZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-bold": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.10.0.tgz",
+			"integrity": "sha512-1wL8UI1Aii0u2cbDEvwyqsZb2pgBt8HLJdsIax/ELoF2tKCD5821nElqTGLBBg4pUGPa0ru9ZemuL8GdXZp3Qg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-bullet-list": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.10.0.tgz",
+			"integrity": "sha512-Cl+DGu6D3SgF/hlKUDNet3gaZFy6cPEonOOkHwzXoybDXXdddFbaTvt9MLkBRUR3ldksXuVRP2/LwZsK5WyxJQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-code": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.10.0.tgz",
+			"integrity": "sha512-8JznKG1Jmv8gJezZGPoka8oRmfrcAAnMEOeMpKXjwMrIbQ6QynTZpqMGGVL1kfkZlLV84PYm+CGjGgjSsT4iZw==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-code-block": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.10.0.tgz",
+			"integrity": "sha512-QH+LP7L1s1EJlrDFnfgOP0q+Siqt0Zbkx4ICMcUGvEsycl53Ti8P0DRW7fAjRISdTCItuWJYvtmiYY7O3rYb+Q==",
+			"license": "MIT",
+			"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.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.10.0.tgz",
+			"integrity": "sha512-vseMW3EKiQAPgdbN48Y8F0nRqWhhrAo9DLacAfP7tu0x3uv44uotNjDBtAgp5QmJmqQVyrEdkLSZaU5vFzduhQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-dropcursor": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.10.0.tgz",
+			"integrity": "sha512-tifxp/a3NxTjLAuYBx9XAwVo4MSDoY/mQ8E18QtuXj0vuieCFxd8Bkyre0otubIAAQePXLTVGQoxPrKmMAa+Jg==",
+			"license": "MIT",
+			"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.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.10.0.tgz",
+			"integrity": "sha512-GViEnSnEBE74k7SYdXrQ4aXlKmWkrd9awdj/TgDSORgpZ4Dfyqtn+ENIWWby4NhL+BPM9P5hGCjkQXZsi6JKOw==",
+			"license": "MIT",
+			"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.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.10.0.tgz",
+			"integrity": "sha512-NL/xPYUhhvQyCnOO5Yn+BlBOMLC1ru32nw7ox12TShGmaeKBrnV0DhzBRkyJU0MqCS26oWjieNPxfu0lR3oMSA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-heading": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.10.0.tgz",
+			"integrity": "sha512-x2Uj5wrAHFaUdlChwLoQVmWtzZCuNyJpBRA19kA4idWL5z+6cIrUWepvwVBxA8ou6ictbzWW15o+blKtW7DlqA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-highlight": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.10.0.tgz",
+			"integrity": "sha512-HU8UuKU7ljlzNn7jg29pM8QtIX7QvePcBjcWAt6K3qVwF1cbBNguIjKRY2rmoonU2nu8I6GknQNgV847kZifCQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-history": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.10.0.tgz",
+			"integrity": "sha512-5aYOmxqaCnw7e7wmWqFZmkpYCxxDjEzFbgVI6WknqNwqeOizR4+YJf3aAt/lTbksLJe47XF+NBX51gOm/ZBCiw==",
+			"license": "MIT",
+			"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.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.10.0.tgz",
+			"integrity": "sha512-el1SzI/x/h4HW8UltxJlyMSrRsO55ypKPLQHJC9h7F6kTTR31fJUzQa3AeTFrZvXS0kNHIFRpAMstw+N0L5TYg==",
+			"license": "MIT",
+			"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.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.10.0.tgz",
+			"integrity": "sha512-MqPYbHAEeO8QBvZRIkF4J2OTf/uiUPzUiXGLJ50w1ozfMBIw1txMvfR3g2cpwfvZlcOgYTgy7M0Oq00nQz5eXg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-list-item": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.10.0.tgz",
+			"integrity": "sha512-BxC6NNHd2xcC+mk5hpYWURUdj/mRz6TGFwH5CsyrUXPxApx0+V+EPHaAgdpu8dr+jtTEzjXF62V6e2JmOAPimg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-ordered-list": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.10.0.tgz",
+			"integrity": "sha512-jsK+mvzs7HmxQuQOU3HgIga+v7zUbQlmSP4/danusqUihJ+lc1n0frDCIkVvJrnSB3FChvNgT6ZEA14HOhdJzg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-paragraph": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.10.0.tgz",
+			"integrity": "sha512-4LUkVaJYjNdNZ7QOX6TRcA+m7oCtyrLGk49G22wl7XcPBkQPILP1mCUCU4f41bhjfhCgK5PPWP63kMtD+cEACg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-placeholder": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.10.0.tgz",
+			"integrity": "sha512-1o6azk2plgYAFgMrV3prnBb1NZjl2V1T3wwnH4n3/h9z9lJ0v5BBAk9r+TRYSrcdXknwwHAWFYnQe6dc9buG2g==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-strike": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.10.0.tgz",
+			"integrity": "sha512-SxApLJMQkxnmPGR3lwaskvLK61yI+Bu9hGZGdwMZqNh6o3LoDOxDaXjHD5joeMYQiqQrBE9zg46506MsXtrU7Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-text": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.10.0.tgz",
+			"integrity": "sha512-SSnNncADS1KucdEcJlF6WGCs5+1pAhPrD68vlw34oj3NDT3Zh05KiyXsCV3Nw4wpHOnbWahV+z3uT2SnR+xgoQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-text-style": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.10.0.tgz",
+			"integrity": "sha512-VZtH1dp64wg1UcFtUPpRQK+kOm4JHBIv+WXuKX7EnpIEKjHKnyfV94BBVmaqY5UE4n3kbkkmIRB2Cmix/10AMg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/extension-typography": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-2.10.0.tgz",
+			"integrity": "sha512-03IOfJm4bk2hZ4SsSfxgBOVzcDxMRBlFD7ZY12H2EGNf1TKxj/0ANWhAH54FtquuOMoY5aWg5LZf0lk++8UDAw==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
+		"node_modules/@tiptap/pm": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.10.0.tgz",
+			"integrity": "sha512-ohshlWf4MlW6D3rQkNQnhmiQ2w4pwRoQcJmTPt8UJoIDGkeKmZh494fQp4Aeh80XuGd81SsCv//1HJeyaeHJYQ==",
+			"license": "MIT",
+			"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.36.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			}
+		},
+		"node_modules/@tiptap/starter-kit": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.10.0.tgz",
+			"integrity": "sha512-hMIM9a6HjYZo25EzhZHlKEIR7CFi0grRSOltEyggiyBuQqKFkI7iwCpZVVtviDV1FwV0EPANpIAxPS7aBRgFdg==",
+			"license": "MIT",
+			"dependencies": {
+				"@tiptap/core": "^2.10.0",
+				"@tiptap/extension-blockquote": "^2.10.0",
+				"@tiptap/extension-bold": "^2.10.0",
+				"@tiptap/extension-bullet-list": "^2.10.0",
+				"@tiptap/extension-code": "^2.10.0",
+				"@tiptap/extension-code-block": "^2.10.0",
+				"@tiptap/extension-document": "^2.10.0",
+				"@tiptap/extension-dropcursor": "^2.10.0",
+				"@tiptap/extension-gapcursor": "^2.10.0",
+				"@tiptap/extension-hard-break": "^2.10.0",
+				"@tiptap/extension-heading": "^2.10.0",
+				"@tiptap/extension-history": "^2.10.0",
+				"@tiptap/extension-horizontal-rule": "^2.10.0",
+				"@tiptap/extension-italic": "^2.10.0",
+				"@tiptap/extension-list-item": "^2.10.0",
+				"@tiptap/extension-ordered-list": "^2.10.0",
+				"@tiptap/extension-paragraph": "^2.10.0",
+				"@tiptap/extension-strike": "^2.10.0",
+				"@tiptap/extension-text": "^2.10.0",
+				"@tiptap/extension-text-style": "^2.10.0",
+				"@tiptap/pm": "^2.10.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -3425,6 +3813,13 @@
 				"ieee754": "^1.2.1"
 			}
 		},
+		"node_modules/buffer-builder": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+			"integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+			"devOptional": true,
+			"license": "MIT/X11"
+		},
 		"node_modules/buffer-crc32": {
 			"version": "0.2.13",
 			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -3898,6 +4293,13 @@
 			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
 			"dev": true
 		},
+		"node_modules/colorjs.io": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+			"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+			"devOptional": true,
+			"license": "MIT"
+		},
 		"node_modules/colors": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -5047,7 +5449,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"
 			},
@@ -5978,7 +6379,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -6241,6 +6642,13 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+			"integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+			"devOptional": true,
+			"license": "MIT"
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8604,14 +9012,33 @@
 				"node": "10.* || >= 12.*"
 			}
 		},
+		"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==",
+			"license": "MIT",
+			"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==",
+			"license": "MIT",
+			"dependencies": {
+				"prosemirror-state": "^1.0.0"
+			}
+		},
 		"node_modules/prosemirror-commands": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.0.tgz",
-			"integrity": "sha512-xn1U/g36OqXn2tn5nGmvnnimAj/g1pUx2ypJJIe8WkVX83WyJVC5LTARaxZa2AtQRwntu9Jc5zXs9gL9svp/mg==",
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz",
+			"integrity": "sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==",
+			"license": "MIT",
 			"dependencies": {
 				"prosemirror-model": "^1.0.0",
 				"prosemirror-state": "^1.0.0",
-				"prosemirror-transform": "^1.0.0"
+				"prosemirror-transform": "^1.10.2"
 			}
 		},
 		"node_modules/prosemirror-dropcursor": {
@@ -8737,18 +9164,48 @@
 				"prosemirror-view": "^1.27.0"
 			}
 		},
+		"node_modules/prosemirror-tables": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.1.tgz",
+			"integrity": "sha512-p8WRJNA96jaNQjhJolmbxTzd6M4huRE5xQ8OxjvMhQUP0Nzpo4zz6TztEiwk6aoqGBhz9lxRWR1yRZLlpQN98w==",
+			"license": "MIT",
+			"dependencies": {
+				"prosemirror-keymap": "^1.1.2",
+				"prosemirror-model": "^1.8.1",
+				"prosemirror-state": "^1.3.1",
+				"prosemirror-transform": "^1.2.1",
+				"prosemirror-view": "^1.13.3"
+			}
+		},
+		"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==",
+			"license": "MIT",
+			"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.0",
-			"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.0.tgz",
-			"integrity": "sha512-9UOgFSgN6Gj2ekQH5CTDJ8Rp/fnKR2IkYfGdzzp5zQMFsS4zDllLVx/+jGcX86YlACpG7UR5fwAXiWzxqWtBTg==",
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz",
+			"integrity": "sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==",
+			"license": "MIT",
 			"dependencies": {
 				"prosemirror-model": "^1.21.0"
 			}
 		},
 		"node_modules/prosemirror-view": {
-			"version": "1.34.3",
-			"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.34.3.tgz",
-			"integrity": "sha512-mKZ54PrX19sSaQye+sef+YjBbNu2voNwLS1ivb6aD2IRmxRGW64HU9B644+7OfJStGLyxvOreKqEgfvXa91WIA==",
+			"version": "1.36.0",
+			"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.36.0.tgz",
+			"integrity": "sha512-U0GQd5yFvV5qUtT41X1zCQfbw14vkbbKwLlQXhdylEmgpYVHkefXYcC4HHwWOfZa3x6Y8wxDLUBv7dxN5XQ3nA==",
+			"license": "MIT",
 			"dependencies": {
 				"prosemirror-model": "^1.20.0",
 				"prosemirror-state": "^1.0.0",
@@ -9236,7 +9693,7 @@
 			"version": "7.8.1",
 			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
 			"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"tslib": "^2.1.0"
 			}
@@ -9329,6 +9786,387 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass-embedded": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.81.0.tgz",
+			"integrity": "sha512-uZQ2Faxb1oWBHpeSSzjxnhClbMb3QadN0ql0ZFNuqWOLUxwaVhrMlMhPq6TDPbbfDUjihuwrMCuy695Bgna5RA==",
+			"devOptional": true,
+			"license": "MIT",
+			"dependencies": {
+				"@bufbuild/protobuf": "^2.0.0",
+				"buffer-builder": "^0.2.0",
+				"colorjs.io": "^0.5.0",
+				"immutable": "^5.0.2",
+				"rxjs": "^7.4.0",
+				"supports-color": "^8.1.1",
+				"sync-child-process": "^1.0.2",
+				"varint": "^6.0.0"
+			},
+			"bin": {
+				"sass": "dist/bin/sass.js"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"optionalDependencies": {
+				"sass-embedded-android-arm": "1.81.0",
+				"sass-embedded-android-arm64": "1.81.0",
+				"sass-embedded-android-ia32": "1.81.0",
+				"sass-embedded-android-riscv64": "1.81.0",
+				"sass-embedded-android-x64": "1.81.0",
+				"sass-embedded-darwin-arm64": "1.81.0",
+				"sass-embedded-darwin-x64": "1.81.0",
+				"sass-embedded-linux-arm": "1.81.0",
+				"sass-embedded-linux-arm64": "1.81.0",
+				"sass-embedded-linux-ia32": "1.81.0",
+				"sass-embedded-linux-musl-arm": "1.81.0",
+				"sass-embedded-linux-musl-arm64": "1.81.0",
+				"sass-embedded-linux-musl-ia32": "1.81.0",
+				"sass-embedded-linux-musl-riscv64": "1.81.0",
+				"sass-embedded-linux-musl-x64": "1.81.0",
+				"sass-embedded-linux-riscv64": "1.81.0",
+				"sass-embedded-linux-x64": "1.81.0",
+				"sass-embedded-win32-arm64": "1.81.0",
+				"sass-embedded-win32-ia32": "1.81.0",
+				"sass-embedded-win32-x64": "1.81.0"
+			}
+		},
+		"node_modules/sass-embedded-android-arm": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.81.0.tgz",
+			"integrity": "sha512-NWEmIuaIEsGFNsIRa+5JpIpPJyZ32H15E85CNZqEIhhwWlk9UNw7vlOCmTH8MtabtnACwC/2NG8VyNa3nxKzUQ==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-arm64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.81.0.tgz",
+			"integrity": "sha512-I36P77/PKAHx6sqOmexO2iEY5kpsmQ1VxcgITZSOxPMQhdB6m4t3bTabfDuWQQmCrqqiNFtLQHeytB65bUqwiw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-ia32": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.81.0.tgz",
+			"integrity": "sha512-k8V1usXw30w1GVxvrteG1RzgYJzYQ9PfL2aeOqGdroBN7zYTD9VGJXTGcxA4IeeRxmRd7szVW2mKXXS472fh8g==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-riscv64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.81.0.tgz",
+			"integrity": "sha512-RXlanyLXEpN/DEehXgLuKPsqT//GYlsGFxKXgRiCc8hIPAueFLQXKJmLWlL3BEtHgmFdbsStIu4aZCcb1hOFlQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-x64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.81.0.tgz",
+			"integrity": "sha512-RQG0FxGQ1DERNyUDED8+BDVaLIjI+BNg8lVcyqlLZUrWY6NhzjwYEeiN/DNZmMmHtqDucAPNDcsdVUNQqsBy2A==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-arm64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.81.0.tgz",
+			"integrity": "sha512-gLKbsfII9Ppua76N41ODFnKGutla9qv0OGAas8gxe0jYBeAQFi/1iKQYdNtQtKi4mA9n5TQTqz+HHCKszZCoyA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-x64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.81.0.tgz",
+			"integrity": "sha512-7uMOlT9hD2KUJCbTN2XcfghDxt/rc50ujjfSjSHjX1SYj7mGplkINUXvVbbvvaV2wt6t9vkGkCo5qNbeBhfwBg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.81.0.tgz",
+			"integrity": "sha512-REqR9qM4RchCE3cKqzRy9Q4zigIV82SbSpCi/O4O3oK3pg2I1z7vkb3TiJsivusG/li7aqKZGmYOtAXjruGQDA==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.81.0.tgz",
+			"integrity": "sha512-jy4bvhdUmqbyw1jv1f3Uxl+MF8EU/Y/GDx4w6XPJm4Ds+mwH/TwnyAwsxxoBhWfnBnW8q2ADy039DlS5p+9csQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-ia32": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.81.0.tgz",
+			"integrity": "sha512-ga/Jk4q5Bn1aC+iHJteDZuLSKnmBUiS3dEg1fnl/Z7GaHIChceKDJOw0zNaILRXI0qT2E1at9MwzoRaRA5Nn/g==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.81.0.tgz",
+			"integrity": "sha512-oWVUvQ4d5Kx1Md75YXZl5z1WBjc+uOhfRRqzkJ3nWc8tjszxJN+y/5EOJavhsNI3/2yoTt6eMXRTqDD9b0tWSQ==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.81.0.tgz",
+			"integrity": "sha512-hpntWf5kjkoxncA1Vh8vhsUOquZ8AROZKx0rQh7ZjSRs4JrYZASz1cfevPKaEM3wIim/nYa6TJqm0VqWsrERlA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-ia32": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.81.0.tgz",
+			"integrity": "sha512-UEXUYkBuqTSwg5JNWiNlfMZ1Jx6SJkaEdx+fsL3Tk099L8cKSoJWH2EPz4ZJjNbyIMymrSdVfymheTeZ8u24xA==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-riscv64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.81.0.tgz",
+			"integrity": "sha512-1D7OznytbIhx2XDHWi1nuQ8d/uCVR7FGGzELgaU//T8A9DapVTUgPKvB70AF1k4GzChR9IXU/WvFZs2hDTbaJg==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-x64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.81.0.tgz",
+			"integrity": "sha512-ia6VCTeVDQtBSMktXRFza1AZCt8/6aUoujot6Ugf4KmdytQqPJIHxkHaGftm5xwi9WdrMGYS7zgolToPijR11A==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-riscv64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.81.0.tgz",
+			"integrity": "sha512-KbxSsqu4tT1XbhZfJV/5NfW0VtJIGlD58RjqJqJBi8Rnjrx29/upBsuwoDWtsPV/LhoGwwU1XkSa9Q1ifCz4fQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-x64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.81.0.tgz",
+			"integrity": "sha512-AMDeVY2T9WAnSFkuQcsOn5c29GRs/TuqnCiblKeXfxCSKym5uKdBl/N7GnTV6OjzoxiJBbkYKdVIaS5By7Gj4g==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-arm64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.81.0.tgz",
+			"integrity": "sha512-YOmBRYnygwWUmCoH14QbMRHjcvCJufeJBAp0m61tOJXIQh64ziwV4mjdqjS/Rx3zhTT4T+nulDUw4d3kLiMncA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-ia32": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.81.0.tgz",
+			"integrity": "sha512-HFfr/C+uLJGGTENdnssuNTmXI/xnIasUuEHEKqI+2J0FHCWT5cpz3PGAOHymPyJcZVYGUG/7gIxIx/d7t0LFYw==",
+			"cpu": [
+				"ia32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-x64": {
+			"version": "1.81.0",
+			"resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.81.0.tgz",
+			"integrity": "sha512-wxj52jDcIAwWcXb7ShZ7vQYKcVUkJ+04YM9l46jDY+qwHzliGuorAUyujLyKTE9heGD3gShJ3wPPC1lXzq6v9A==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"devOptional": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.6.3",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -10044,6 +10882,29 @@
 			"integrity": "sha512-0K91MEXFpBUaywiwSSkmKjnGcasG/rVBXFLJz5DrgGabpYD6N+3yZrfD6uUIfpuTu65DZLHi7N8CizHc07BPZA==",
 			"dev": true
 		},
+		"node_modules/sync-child-process": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+			"integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+			"devOptional": true,
+			"license": "MIT",
+			"dependencies": {
+				"sync-message-port": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/sync-message-port": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
+			"integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+			"devOptional": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
 		"node_modules/tabbable": {
 			"version": "6.2.0",
 			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -10416,6 +11277,7 @@
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/turndown/-/turndown-7.2.0.tgz",
 			"integrity": "sha512-eCZGBN4nNNqM9Owkv9HAtWRYfLA4h909E/WGAWWBpmB275ehNhZyk87/Tpvjbp0jjNl9XwCsbe6bm6CqFsgD+A==",
+			"license": "MIT",
 			"dependencies": {
 				"@mixmark-io/domino": "^2.2.0"
 			}
@@ -10629,6 +11491,13 @@
 				"node": ">= 10.13.0"
 			}
 		},
+		"node_modules/varint": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+			"integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+			"devOptional": true,
+			"license": "MIT"
+		},
 		"node_modules/verror": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
diff --git a/package.json b/package.json
index 1b6e4cddc..cdc0ef578 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 		"postcss": "^8.4.31",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
+		"sass-embedded": "^1.81.0",
 		"svelte": "^4.2.18",
 		"svelte-check": "^3.8.5",
 		"svelte-confetti": "^1.3.2",
@@ -56,6 +57,12 @@
 		"@mediapipe/tasks-vision": "^0.10.17",
 		"@pyscript/core": "^0.4.32",
 		"@sveltejs/adapter-node": "^2.0.0",
+		"@tiptap/core": "^2.10.0",
+		"@tiptap/extension-highlight": "^2.10.0",
+		"@tiptap/extension-placeholder": "^2.10.0",
+		"@tiptap/extension-typography": "^2.10.0",
+		"@tiptap/pm": "^2.10.0",
+		"@tiptap/starter-kit": "^2.10.0",
 		"@xyflow/svelte": "^0.1.19",
 		"async": "^3.2.5",
 		"bits-ui": "^0.19.7",
diff --git a/src/app.css b/src/app.css
index 9d073d05d..cb211318d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -199,19 +199,34 @@ input[type='number'] {
 }
 
 .ProseMirror {
-	@apply h-full  min-h-fit max-h-full whitespace-pre-wrap;
+	@apply h-full min-h-fit max-h-full whitespace-pre-wrap;
 }
 
 .ProseMirror:focus {
 	outline: none;
 }
 
-.placeholder::after {
+.ProseMirror p.is-editor-empty:first-child::before {
 	content: attr(data-placeholder);
-	cursor: text;
-	pointer-events: none;
-
 	float: left;
-
-	@apply absolute inset-0 z-0 text-gray-500;
+	color: #adb5bd;
+	pointer-events: none;
+	height: 0;
+}
+
+.tiptap > pre > code {
+	border-radius: 0.4rem;
+	font-size: 0.85rem;
+	padding: 0.25em 0.3em;
+
+	@apply dark:bg-gray-800 bg-gray-100;
+}
+
+.tiptap > pre {
+	border-radius: 0.5rem;
+	font-family: 'JetBrainsMono', monospace;
+	margin: 1.5rem 0;
+	padding: 0.75rem 1rem;
+
+	@apply dark:bg-gray-800 bg-gray-100;
 }
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index a869a1d99..c922715d5 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -75,14 +75,6 @@
 		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
 	);
 
-	$: if (prompt) {
-		if (chatInputContainerElement) {
-			chatInputContainerElement.style.height = '';
-			chatInputContainerElement.style.height =
-				Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-		}
-	}
-
 	const scrollToBottom = () => {
 		const element = document.getElementById('messages-container');
 		element.scrollTo({
@@ -585,54 +577,47 @@
 
 									{#if $settings?.richTextInput ?? true}
 										<div
-											bind:this={chatInputContainerElement}
-											id="chat-input-container"
-											class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-[48px] overflow-auto"
+											class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-fit max-h-60 overflow-auto"
 										>
 											<RichTextInput
 												bind:this={chatInputElement}
 												id="chat-input"
-												trim={true}
-												placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
-												largeTextAsFile={$settings?.largeTextAsFile ?? false}
-												bind:value={prompt}
+												messageInput={true}
 												shiftEnter={!$mobile ||
 													!(
 														'ontouchstart' in window ||
 														navigator.maxTouchPoints > 0 ||
 														navigator.msMaxTouchPoints > 0
 													)}
+												placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
+												largeTextAsFile={$settings?.largeTextAsFile ?? false}
+												bind:value={prompt}
 												on:enter={async (e) => {
+													const commandsContainerElement =
+														document.getElementById('commands-container');
+													if (commandsContainerElement) {
+														e.preventDefault();
+
+														const commandOptionButton = [
+															...document.getElementsByClassName('selected-command-option-button')
+														]?.at(-1);
+
+														if (commandOptionButton) {
+															commandOptionButton?.click();
+															return;
+														}
+													}
+
 													if (prompt !== '') {
 														dispatch('submit', prompt);
 													}
 												}}
-												on:input={async (e) => {
-													if (chatInputContainerElement) {
-														chatInputContainerElement.style.height = '';
-														chatInputContainerElement.style.height =
-															Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-													}
-												}}
-												on:focus={async (e) => {
-													if (chatInputContainerElement) {
-														chatInputContainerElement.style.height = '';
-														chatInputContainerElement.style.height =
-															Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-													}
-												}}
 												on:keypress={(e) => {
 													e = e.detail.event;
 												}}
 												on:keydown={async (e) => {
 													e = e.detail.event;
 
-													if (chatInputContainerElement) {
-														chatInputContainerElement.style.height = '';
-														chatInputContainerElement.style.height =
-															Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
-													}
-
 													const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
 													const commandsContainerElement =
 														document.getElementById('commands-container');
@@ -692,22 +677,6 @@
 														commandOptionButton.scrollIntoView({ block: 'center' });
 													}
 
-													if (commandsContainerElement && e.key === 'Enter') {
-														e.preventDefault();
-
-														const commandOptionButton = [
-															...document.getElementsByClassName('selected-command-option-button')
-														]?.at(-1);
-
-														if (e.shiftKey) {
-															prompt = `${prompt}\n`;
-														} else if (commandOptionButton) {
-															commandOptionButton?.click();
-														} else {
-															document.getElementById('send-message-button')?.click();
-														}
-													}
-
 													if (commandsContainerElement && e.key === 'Tab') {
 														e.preventDefault();
 
diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 219d23c52..81543665c 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -1,241 +1,36 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { marked } from 'marked';
+	import TurndownService from 'turndown';
+	const turndownService = new TurndownService();
+
+	import { onMount, onDestroy } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
 	const eventDispatch = createEventDispatcher();
 
 	import { EditorState, Plugin, TextSelection } from 'prosemirror-state';
-	import { EditorView, Decoration, DecorationSet } from 'prosemirror-view';
-	import { undo, redo, history } from 'prosemirror-history';
-	import {
-		schema,
-		defaultMarkdownParser,
-		MarkdownParser,
-		defaultMarkdownSerializer
-	} from 'prosemirror-markdown';
 
-	import {
-		inputRules,
-		wrappingInputRule,
-		textblockTypeInputRule,
-		InputRule
-	} from 'prosemirror-inputrules'; // Import input rules
-	import { splitListItem, liftListItem, sinkListItem } from 'prosemirror-schema-list'; // Import from prosemirror-schema-list
-	import { keymap } from 'prosemirror-keymap';
-	import { baseKeymap, chainCommands } from 'prosemirror-commands';
-	import { DOMParser, DOMSerializer, Schema, Fragment } from 'prosemirror-model';
+	import { Editor } from '@tiptap/core';
+
+	import Placeholder from '@tiptap/extension-placeholder';
+	import Highlight from '@tiptap/extension-highlight';
+	import Typography from '@tiptap/extension-typography';
+	import StarterKit from '@tiptap/starter-kit';
+
 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
 
 	export let className = 'input-prose';
+	export let placeholder = 'Type here...';
+	export let value = '';
+	export let id = '';
+
+	export let messageInput = false;
 	export let shiftEnter = false;
 	export let largeTextAsFile = false;
 
-	export let id = '';
-	export let value = '';
-	export let placeholder = 'Type here...';
-	export let trim = false;
-
-	let element: HTMLElement; // Element where ProseMirror will attach
-	let state;
-	let view;
-
-	// Plugin to add placeholder when the content is empty
-	function placeholderPlugin(placeholder: string) {
-		return new Plugin({
-			props: {
-				decorations(state) {
-					const doc = state.doc;
-					if (
-						doc.childCount === 1 &&
-						doc.firstChild.isTextblock &&
-						doc.firstChild?.textContent === ''
-					) {
-						// If there's nothing in the editor, show the placeholder decoration
-						const decoration = Decoration.node(0, doc.content.size, {
-							'data-placeholder': placeholder,
-							class: 'placeholder'
-						});
-						return DecorationSet.create(doc, [decoration]);
-					}
-					return DecorationSet.empty;
-				}
-			}
-		});
-	}
-
-	function unescapeMarkdown(text: string): string {
-		return text
-			.replace(/\\([\\`*{}[\]()#+\-.!_>])/g, '$1') // unescape backslashed characters
-			.replace(/&amp;/g, '&')
-			.replace(/</g, '<')
-			.replace(/>/g, '>')
-			.replace(/&quot;/g, '"')
-			.replace(/&#39;/g, "'");
-	}
-
-	// Custom parsing rule that creates proper paragraphs for newlines and empty lines
-	function markdownToProseMirrorDoc(markdown: string) {
-		// Split the markdown into lines
-		const lines = markdown.split('\n\n');
-
-		// Create an array to hold our paragraph nodes
-		const paragraphs = [];
-
-		// Process each line
-		lines.forEach((line) => {
-			if (line.trim() === '') {
-				// For empty lines, create an empty paragraph
-				paragraphs.push(schema.nodes.paragraph.create());
-			} else {
-				// For non-empty lines, parse as usual
-				const doc = defaultMarkdownParser.parse(line);
-				// Extract the content of the parsed document
-				doc.content.forEach((node) => {
-					paragraphs.push(node);
-				});
-			}
-		});
-
-		// Create a new document with these paragraphs
-		return schema.node('doc', null, paragraphs);
-	}
-
-	// Create a custom serializer for paragraphs
-	// Custom paragraph serializer to preserve newlines for empty paragraphs (empty block).
-	function serializeParagraph(state, node: Node) {
-		const content = node.textContent.trim();
-
-		// If the paragraph is empty, just add an empty line.
-		if (content === '') {
-			state.write('\n\n');
-		} else {
-			state.renderInline(node);
-			state.closeBlock(node);
-		}
-	}
-
-	const customMarkdownSerializer = new defaultMarkdownSerializer.constructor(
-		{
-			...defaultMarkdownSerializer.nodes,
-
-			paragraph: (state, node) => {
-				serializeParagraph(state, node); // Use custom paragraph serialization
-			}
-
-			// Customize other block formats if needed
-		},
-
-		// Copy marks directly from the original serializer (or customize them if necessary)
-		defaultMarkdownSerializer.marks
-	);
-
-	// Utility function to convert ProseMirror content back to markdown text
-	function serializeEditorContent(doc) {
-		const markdown = customMarkdownSerializer.serialize(doc);
-		if (trim) {
-			return unescapeMarkdown(markdown).trim();
-		} else {
-			return unescapeMarkdown(markdown);
-		}
-	}
-
-	// ---- Input Rules ----
-	// Input rule for heading (e.g., # Headings)
-	function headingRule(schema) {
-		return textblockTypeInputRule(/^(#{1,6})\s$/, schema.nodes.heading, (match) => ({
-			level: match[1].length
-		}));
-	}
-
-	// Input rule for bullet list (e.g., `- item`)
-	function bulletListRule(schema) {
-		return wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list);
-	}
-
-	// Input rule for ordered list (e.g., `1. item`)
-	function orderedListRule(schema) {
-		return wrappingInputRule(/^(\d+)\.\s$/, schema.nodes.ordered_list, (match) => ({
-			order: +match[1]
-		}));
-	}
-
-	// Custom input rules for Bold/Italic (using * or _)
-	function markInputRule(regexp: RegExp, markType: any) {
-		return new InputRule(regexp, (state, match, start, end) => {
-			const { tr } = state;
-			if (match) {
-				tr.replaceWith(start, end, schema.text(match[1], [markType.create()]));
-			}
-			return tr;
-		});
-	}
-
-	function boldRule(schema) {
-		return markInputRule(/(?<=^|\s)\*([^*]+)\*(?=\s|$)/, schema.marks.strong);
-	}
-
-	function italicRule(schema) {
-		// Using lookbehind and lookahead to prevent the space from being consumed
-		return markInputRule(/(?<=^|\s)_([^*_]+)_(?=\s|$)/, schema.marks.em);
-	}
-
-	// Initialize Editor State and View
-	function afterSpacePress(state, dispatch) {
-		// Get the position right after the space was naturally inserted by the browser.
-		let { from, to, empty } = state.selection;
-
-		if (dispatch && empty) {
-			let tr = state.tr;
-
-			// Check for any active marks at `from - 1` (the space we just inserted)
-			const storedMarks = state.storedMarks || state.selection.$from.marks();
-
-			const hasBold = storedMarks.some((mark) => mark.type === state.schema.marks.strong);
-			const hasItalic = storedMarks.some((mark) => mark.type === state.schema.marks.em);
-
-			// Remove marks from the space character (marks applied to the space character will be marked as false)
-			if (hasBold) {
-				tr = tr.removeMark(from - 1, from, state.schema.marks.strong);
-			}
-			if (hasItalic) {
-				tr = tr.removeMark(from - 1, from, state.schema.marks.em);
-			}
-
-			// Dispatch the resulting transaction to update the editor state
-			dispatch(tr);
-		}
-
-		return true;
-	}
-
-	function toggleMark(markType) {
-		return (state, dispatch) => {
-			const { from, to } = state.selection;
-			if (state.doc.rangeHasMark(from, to, markType)) {
-				if (dispatch) dispatch(state.tr.removeMark(from, to, markType));
-				return true;
-			} else {
-				if (dispatch) dispatch(state.tr.addMark(from, to, markType.create()));
-				return true;
-			}
-		};
-	}
-
-	function isInList(state) {
-		const { $from } = state.selection;
-		return (
-			$from.parent.type === schema.nodes.paragraph && $from.node(-1).type === schema.nodes.list_item
-		);
-	}
-
-	function isEmptyListItem(state) {
-		const { $from } = state.selection;
-		return isInList(state) && $from.parent.content.size === 0 && $from.node(-1).childCount === 1;
-	}
-
-	function exitList(state, dispatch) {
-		return liftListItem(schema.nodes.list_item)(state, dispatch);
-	}
+	let element;
+	let editor;
 
+	// Function to find the next template in the document
 	function findNextTemplate(doc, from = 0) {
 		const patterns = [
 			{ start: '[', end: ']' },
@@ -270,6 +65,7 @@
 		return result;
 	}
 
+	// Function to select the next template in the document
 	function selectNextTemplate(state, dispatch) {
 		const { doc, selection } = state;
 		const from = selection.to;
@@ -290,220 +86,150 @@
 		return false;
 	}
 
-	// Replace tabs with four spaces
-	function handleTabIndentation(text: string): string {
-		// Replace each tab character with four spaces
-		return text.replace(/\t/g, '    ');
-	}
+	export const setContent = (content) => {
+		editor.commands.setContent(content);
+	};
+
+	const selectTemplate = () => {
+		if (value !== '') {
+			// After updating the state, try to find and select the next template
+			setTimeout(() => {
+				const templateFound = selectNextTemplate(editor.view.state, editor.view.dispatch);
+				if (!templateFound) {
+					// If no template found, set cursor at the end
+					const endPos = editor.view.state.doc.content.size;
+					editor.view.dispatch(
+						editor.view.state.tr.setSelection(TextSelection.create(editor.view.state.doc, endPos))
+					);
+				}
+			}, 0);
+		}
+	};
 
 	onMount(() => {
-		const initialDoc = markdownToProseMirrorDoc(value || ''); // Convert the initial content
+		editor = new Editor({
+			element: element,
+			extensions: [StarterKit, Highlight, Typography, Placeholder.configure({ placeholder })],
+			content: marked.parse(value),
+			autofocus: true,
+			onTransaction: () => {
+				// force re-render so `editor.isActive` works as expected
+				editor = editor;
 
-		state = EditorState.create({
-			doc: initialDoc,
-			schema,
-			plugins: [
-				history(),
-				placeholderPlugin(placeholder),
-				inputRules({
-					rules: [
-						headingRule(schema), // Handle markdown-style headings (# H1, ## H2, etc.)
-						bulletListRule(schema), // Handle `-` or `*` input to start bullet list
-						orderedListRule(schema), // Handle `1.` input to start ordered list
-						boldRule(schema), // Bold input rule
-						italicRule(schema) // Italic input rule
-					]
-				}),
-				keymap({
-					...baseKeymap,
-					'Mod-z': undo,
-					'Mod-y': redo,
-					Enter: (state, dispatch, view) => {
-						if (shiftEnter) {
-							eventDispatch('enter');
-							return true;
-						}
-						return chainCommands(
-							(state, dispatch, view) => {
-								if (isEmptyListItem(state)) {
-									return exitList(state, dispatch);
-								}
-								return false;
-							},
-							(state, dispatch, view) => {
-								if (isInList(state)) {
-									return splitListItem(schema.nodes.list_item)(state, dispatch);
-								}
-								return false;
-							},
-							baseKeymap.Enter
-						)(state, dispatch, view);
+				const newValue = turndownService.turndown(editor.getHTML());
+				if (value !== newValue) {
+					value = newValue; // Trigger parent updates
+				}
+			},
+			editorProps: {
+				attributes: { id },
+				handleDOMEvents: {
+					focus: (view, event) => {
+						eventDispatch('focus', { event });
+						return false;
 					},
-
-					'Shift-Enter': (state, dispatch, view) => {
-						if (shiftEnter) {
-							return chainCommands(
-								(state, dispatch, view) => {
-									if (isEmptyListItem(state)) {
-										return exitList(state, dispatch);
-									}
-									return false;
-								},
-								(state, dispatch, view) => {
-									if (isInList(state)) {
-										return splitListItem(schema.nodes.list_item)(state, dispatch);
-									}
-									return false;
-								},
-								baseKeymap.Enter
-							)(state, dispatch, view);
-						} else {
-							return baseKeymap.Enter(state, dispatch, view);
-						}
+					keypress: (view, event) => {
+						eventDispatch('keypress', { event });
 						return false;
 					},
 
-					// Prevent default tab navigation and provide indent/outdent behavior inside lists:
-					Tab: chainCommands((state, dispatch, view) => {
-						const { $from } = state.selection;
-						if (isInList(state)) {
-							return sinkListItem(schema.nodes.list_item)(state, dispatch);
-						} else {
-							return selectNextTemplate(state, dispatch);
+					keydown: (view, event) => {
+						// Handle Tab Key
+						if (event.key === 'Tab') {
+							const handled = selectNextTemplate(view.state, view.dispatch);
+							if (handled) {
+								event.preventDefault();
+								return true;
+							}
 						}
-						return true; // Prevent Tab from moving the focus
-					}),
-					'Shift-Tab': (state, dispatch, view) => {
-						const { $from } = state.selection;
-						if (isInList(state)) {
-							return liftListItem(schema.nodes.list_item)(state, dispatch);
-						}
-						return true; // Prevent Shift-Tab from moving the focus
-					},
-					'Mod-b': toggleMark(schema.marks.strong),
-					'Mod-i': toggleMark(schema.marks.em)
-				})
-			]
-		});
 
-		view = new EditorView(element, {
-			state,
-			dispatchTransaction(transaction) {
-				// Update editor state
-				let newState = view.state.apply(transaction);
-				view.updateState(newState);
-
-				value = serializeEditorContent(newState.doc); // Convert ProseMirror content to markdown text
-				eventDispatch('input', { value });
-			},
-			handleDOMEvents: {
-				focus: (view, event) => {
-					eventDispatch('focus', { event });
-					return false;
-				},
-				keypress: (view, event) => {
-					eventDispatch('keypress', { event });
-					return false;
-				},
-				keydown: (view, event) => {
-					eventDispatch('keydown', { event });
-					return false;
-				},
-				paste: (view, event) => {
-					if (event.clipboardData) {
-						// Extract plain text from clipboard and paste it without formatting
-						const plainText = event.clipboardData.getData('text/plain');
-						if (plainText) {
-							if (largeTextAsFile) {
-								if (plainText.length > PASTED_TEXT_CHARACTER_LIMIT) {
-									// Dispatch paste event to parent component
-									eventDispatch('paste', { event });
+						if (messageInput) {
+							// Handle shift + Enter for a line break
+							if (shiftEnter) {
+								if (event.key === 'Enter' && event.shiftKey) {
+									editor.commands.setHardBreak(); // Insert a hard break
+									event.preventDefault();
+									return true;
+								}
+								if (event.key === 'Enter') {
+									eventDispatch('enter', { event });
 									event.preventDefault();
 									return true;
 								}
 							}
 
-							const modifiedText = handleTabIndentation(plainText);
-							console.log(modifiedText);
+							if (event.key === 'Enter') {
+								eventDispatch('enter', { event });
+								event.preventDefault();
+								return true;
+							}
+						}
 
-							// Replace the current selection with the plain text content
-							const tr = view.state.tr.replaceSelectionWith(
-								view.state.schema.text(modifiedText),
-								false
+						eventDispatch('keydown', { event });
+						return false;
+					},
+					paste: (view, event) => {
+						if (event.clipboardData) {
+							// Extract plain text from clipboard and paste it without formatting
+							const plainText = event.clipboardData.getData('text/plain');
+							if (plainText) {
+								if (largeTextAsFile) {
+									if (plainText.length > PASTED_TEXT_CHARACTER_LIMIT) {
+										// Dispatch paste event to parent component
+										eventDispatch('paste', { event });
+										event.preventDefault();
+										return true;
+									}
+								}
+								return false;
+							}
+
+							// Check if the pasted content contains image files
+							const hasImageFile = Array.from(event.clipboardData.files).some((file) =>
+								file.type.startsWith('image/')
 							);
-							view.dispatch(tr.scrollIntoView());
-							event.preventDefault(); // Prevent the default paste behavior
-							return true;
+
+							// Check for image in dataTransfer items (for cases where files are not available)
+							const hasImageItem = Array.from(event.clipboardData.items).some((item) =>
+								item.type.startsWith('image/')
+							);
+							if (hasImageFile) {
+								// If there's an image, dispatch the event to the parent
+								eventDispatch('paste', { event });
+								event.preventDefault();
+								return true;
+							}
+
+							if (hasImageItem) {
+								// If there's an image item, dispatch the event to the parent
+								eventDispatch('paste', { event });
+								event.preventDefault();
+								return true;
+							}
 						}
 
-						// Check if the pasted content contains image files
-						const hasImageFile = Array.from(event.clipboardData.files).some((file) =>
-							file.type.startsWith('image/')
-						);
-
-						// Check for image in dataTransfer items (for cases where files are not available)
-						const hasImageItem = Array.from(event.clipboardData.items).some((item) =>
-							item.type.startsWith('image/')
-						);
-						if (hasImageFile) {
-							// If there's an image, dispatch the event to the parent
-							eventDispatch('paste', { event });
-							event.preventDefault();
-							return true;
-						}
-
-						if (hasImageItem) {
-							// If there's an image item, dispatch the event to the parent
-							eventDispatch('paste', { event });
-							event.preventDefault();
-							return true;
-						}
+						// For all other cases (text, formatted text, etc.), let ProseMirror handle it
+						view.dispatch(view.state.tr.scrollIntoView()); // Move viewport to the cursor after pasting
+						return false;
 					}
-
-					// For all other cases (text, formatted text, etc.), let ProseMirror handle it
-					return false;
-				},
-				// Handle space input after browser has completed it
-				keyup: (view, event) => {
-					if (event.key === ' ' && event.code === 'Space') {
-						afterSpacePress(view.state, view.dispatch);
-					}
-					return false;
 				}
-			},
-			attributes: { id }
+			}
 		});
+
+		selectTemplate();
 	});
 
-	// Reinitialize the editor if the value is externally changed (i.e. when `value` is updated)
-	$: if (view && value !== serializeEditorContent(view.state.doc)) {
-		const newDoc = markdownToProseMirrorDoc(value || '');
-
-		const newState = EditorState.create({
-			doc: newDoc,
-			schema,
-			plugins: view.state.plugins,
-			selection: TextSelection.atEnd(newDoc) // This sets the cursor at the end
-		});
-		view.updateState(newState);
-
-		if (value !== '') {
-			// After updating the state, try to find and select the next template
-			setTimeout(() => {
-				const templateFound = selectNextTemplate(view.state, view.dispatch);
-				if (!templateFound) {
-					// If no template found, set cursor at the end
-					const endPos = view.state.doc.content.size;
-					view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, endPos)));
-				}
-			}, 0);
-		}
-	}
-
-	// Destroy ProseMirror instance on unmount
 	onDestroy(() => {
-		view?.destroy();
+		if (editor) {
+			editor.destroy();
+		}
 	});
+
+	// Update the editor content if the external `value` changes
+	$: if (editor && value !== turndownService.turndown(editor.getHTML())) {
+		editor.commands.setContent(marked.parse(value)); // Update editor content
+		selectTemplate();
+	}
 </script>
 
-<div bind:this={element} class="relative w-full min-w-full h-full min-h-fit {className}"></div>
+<div bind:this={element} class="relative w-full min-w-full h-full min-h-fit {className}" />

From aca06f92e8178d7610dd1c3485e5ad1259a2453a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 20 Nov 2024 22:56:26 -0800
Subject: [PATCH 2/4] enh: rich text input

---
 package-lock.json                             | 58 +++++++++++++++++++
 package.json                                  |  1 +
 src/app.css                                   | 52 +++++++++++++++++
 .../components/common/RichTextInput.svelte    | 28 ++++++++-
 4 files changed, 138 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index f3feac815..4a0f1bb18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
 				"@pyscript/core": "^0.4.32",
 				"@sveltejs/adapter-node": "^2.0.0",
 				"@tiptap/core": "^2.10.0",
+				"@tiptap/extension-code-block-lowlight": "^2.10.0",
 				"@tiptap/extension-highlight": "^2.10.0",
 				"@tiptap/extension-placeholder": "^2.10.0",
 				"@tiptap/extension-typography": "^2.10.0",
@@ -2425,6 +2426,23 @@
 				"@tiptap/pm": "^2.7.0"
 			}
 		},
+		"node_modules/@tiptap/extension-code-block-lowlight": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.10.0.tgz",
+			"integrity": "sha512-dAv03XIHT5h+sdFmJzvx2FfpfFOOK9SBKHflRUdqTa8eA+0VZNAcPRjvJWVEWqts1fKZDJj774mO28NlhFzk9Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/extension-code-block": "^2.7.0",
+				"@tiptap/pm": "^2.7.0",
+				"highlight.js": "^11",
+				"lowlight": "^2 || ^3"
+			}
+		},
 		"node_modules/@tiptap/extension-document": {
 			"version": "2.10.0",
 			"resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.10.0.tgz",
@@ -2793,6 +2811,16 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
+		"node_modules/@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.15",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -5162,6 +5190,20 @@
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
 			"integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw=="
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -7390,6 +7432,22 @@
 				"get-func-name": "^2.0.1"
 			}
 		},
+		"node_modules/lowlight": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.1.0.tgz",
+			"integrity": "sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==",
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"devlop": "^1.0.0",
+				"highlight.js": "~11.9.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.11",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
diff --git a/package.json b/package.json
index cdc0ef578..ea934d4e7 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
 		"@pyscript/core": "^0.4.32",
 		"@sveltejs/adapter-node": "^2.0.0",
 		"@tiptap/core": "^2.10.0",
+		"@tiptap/extension-code-block-lowlight": "^2.10.0",
 		"@tiptap/extension-highlight": "^2.10.0",
 		"@tiptap/extension-placeholder": "^2.10.0",
 		"@tiptap/extension-typography": "^2.10.0",
diff --git a/src/app.css b/src/app.css
index cb211318d..3974974bc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -230,3 +230,55 @@ input[type='number'] {
 
 	@apply dark:bg-gray-800 bg-gray-100;
 }
+
+/* Code styling */
+.hljs-comment,
+.hljs-quote {
+	color: #616161;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+	color: #f98181;
+}
+
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+	color: #fbbc88;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+	color: #b9f18d;
+}
+
+.hljs-title,
+.hljs-section {
+	color: #faf594;
+}
+
+.hljs-keyword,
+.hljs-selector-tag {
+	color: #70cff8;
+}
+
+.hljs-emphasis {
+	font-style: italic;
+}
+
+.hljs-strong {
+	font-weight: 700;
+}
diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 81543665c..fdc98349a 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -11,13 +11,19 @@
 
 	import { Editor } from '@tiptap/core';
 
+	import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 	import Placeholder from '@tiptap/extension-placeholder';
 	import Highlight from '@tiptap/extension-highlight';
 	import Typography from '@tiptap/extension-typography';
 	import StarterKit from '@tiptap/starter-kit';
 
+	import { all, createLowlight } from 'lowlight';
+
 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
 
+	// create a lowlight instance with all languages loaded
+	const lowlight = createLowlight(all);
+
 	export let className = 'input-prose';
 	export let placeholder = 'Type here...';
 	export let value = '';
@@ -109,7 +115,15 @@
 	onMount(() => {
 		editor = new Editor({
 			element: element,
-			extensions: [StarterKit, Highlight, Typography, Placeholder.configure({ placeholder })],
+			extensions: [
+				StarterKit,
+				CodeBlockLowlight.configure({
+					lowlight
+				}),
+				Highlight,
+				Typography,
+				Placeholder.configure({ placeholder })
+			],
 			content: marked.parse(value),
 			autofocus: true,
 			onTransaction: () => {
@@ -144,10 +158,22 @@
 						}
 
 						if (messageInput) {
+							if (event.key === 'Enter') {
+								// Check if the current selection is inside a code block
+								const { state } = view;
+								const { $head } = state.selection;
+								const isInCodeBlock = $head.parent.type.name === 'codeBlock';
+
+								if (isInCodeBlock) {
+									return false; // Prevent Enter action inside a code block
+								}
+							}
+
 							// Handle shift + Enter for a line break
 							if (shiftEnter) {
 								if (event.key === 'Enter' && event.shiftKey) {
 									editor.commands.setHardBreak(); // Insert a hard break
+									view.dispatch(view.state.tr.scrollIntoView()); // Move viewport to the cursor
 									event.preventDefault();
 									return true;
 								}

From c5cd1e4403edff3d4d69d00d6fa7b7ff988317a2 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 20 Nov 2024 23:14:06 -0800
Subject: [PATCH 3/4] refac: rich text input

---
 .../components/common/RichTextInput.svelte    | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index fdc98349a..232a739c4 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -159,13 +159,30 @@
 
 						if (messageInput) {
 							if (event.key === 'Enter') {
-								// Check if the current selection is inside a code block
+								// Check if the current selection is inside a structured block (like codeBlock or list)
 								const { state } = view;
 								const { $head } = state.selection;
-								const isInCodeBlock = $head.parent.type.name === 'codeBlock';
 
-								if (isInCodeBlock) {
-									return false; // Prevent Enter action inside a code block
+								// Recursive function to check ancestors for specific node types
+								function isInside(nodeTypes: string[]): boolean {
+									let currentNode = $head;
+									while (currentNode) {
+										if (nodeTypes.includes(currentNode.parent.type.name)) {
+											return true;
+										}
+										if (!currentNode.depth) break; // Stop if we reach the top
+										currentNode = state.doc.resolve(currentNode.before()); // Move to the parent node
+									}
+									return false;
+								}
+
+								const isInCodeBlock = isInside(['codeBlock']);
+								const isInList = isInside(['listItem', 'bulletList', 'orderedList']);
+								const isInHeading = isInside(['heading']);
+
+								if (isInCodeBlock || isInList || isInHeading) {
+									// Let ProseMirror handle the normal Enter behavior
+									return false;
 								}
 							}
 
@@ -183,14 +200,12 @@
 									return true;
 								}
 							}
-
 							if (event.key === 'Enter') {
 								eventDispatch('enter', { event });
 								event.preventDefault();
 								return true;
 							}
 						}
-
 						eventDispatch('keydown', { event });
 						return false;
 					},

From 6088acf36dea664b2fcc25687b5cbac63cd20236 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 20 Nov 2024 23:31:46 -0800
Subject: [PATCH 4/4] refac: styling

---
 src/lib/components/chat/Messages/RateComment.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/RateComment.svelte b/src/lib/components/chat/Messages/RateComment.svelte
index 39ae17318..c774738c5 100644
--- a/src/lib/components/chat/Messages/RateComment.svelte
+++ b/src/lib/components/chat/Messages/RateComment.svelte
@@ -136,7 +136,7 @@
 						class="size-7 text-sm border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
 						rating
 							? 'bg-gray-100 dark:bg-gray-800'
-							: ''} transition rounded-full disabled:cursor-not-allowed disabled:bg-white disabled:dark:bg-gray-900"
+							: ''} transition rounded-full disabled:cursor-not-allowed disabled:text-gray-500 disabled:bg-white disabled:dark:bg-gray-900"
 						on:click={() => {
 							detailedRating = rating;
 						}}