enh: rich text input

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;
+}

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;
 								}