Editor spellcheck

client/app/components/editor/editor.tsx

@@ -10,12 +10,20 @@ import { yCollab } from 'y-codemirror.next';
 import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 
-import { config } from '@client/config';
+import { langEnum } from '@server/db/schema';
 
-import { Loader } from '../ui/loader';
+import { getSpellcheckExtension } from '@client/components/editor/spellcheck';
+import { Loader } from '@client/components/ui/loader';
+import { config } from '@client/config';
 
 const Editor = forwardRef(
-	({ textId }: { textId: number }, ref: ForwardedRef<HTMLDivElement>) => {
+	(
+		{
+			textId,
+			lang,
+		}: { textId: number; lang: (typeof langEnum.enumValues)[number] },
+		ref: ForwardedRef<HTMLDivElement>
+	) => {
 		const auth = useAuth();
 		const ydocRef = useRef(new Y.Doc());
 		const providerRef = useRef<WebsocketProvider | null>(null);
@@ -124,7 +132,6 @@ const Editor = forwardRef(
 						fontSize: '14px',
 					}}
 					className="grow h-px"
-					spellCheck="true"
 					extensions={[
 						latex(),
 						linter(latexLinter),
@@ -137,6 +144,7 @@ const Editor = forwardRef(
 							}
 						),
 						EditorView.lineWrapping,
+						getSpellcheckExtension(lang),
 					]}
 					basicSetup={{ foldGutter: true, dropCursor: true }}
 				/>

client/app/components/editor/editorLayout.tsx

@@ -235,6 +235,7 @@ export function EditorLayout({ problemId }: { problemId: number }) {
 					<>
 						<Editor
 							textId={text.textId}
+							lang={text.lang}
 							key={'editor-' + text.textId}
 							ref={(node) => {
 								const refMap = taskEditorRefs.current;

client/app/components/editor/spellcheck.css

@@ -0,0 +1,3 @@
+.cm-spell-error {
+	text-decoration: red wavy underline;
+}

client/app/components/editor/spellcheck.ts

@@ -0,0 +1,98 @@
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import {
+	Decoration,
+	DecorationSet,
+	EditorView,
+	ViewPlugin,
+	ViewUpdate,
+} from '@codemirror/view';
+import Typo from 'typo-js';
+
+import { langEnum } from '@server/db/schema';
+
+import './spellcheck.css';
+
+const spellErrorMark = Decoration.mark({ class: 'cm-spell-error' });
+
+const dictionaries = {
+	cs: new Typo('cs_CZ', null, null, {
+		dictionaryPath: '/dictionaries',
+	}),
+	en: new Typo('en_US', null, null, {
+		dictionaryPath: '/dictionaries',
+	}),
+};
+
+// Spellchecker ViewPlugin implemented as a normal class
+class SpellcheckViewPlugin {
+	decorations: DecorationSet;
+	dictionary: Typo;
+
+	constructor(
+		public view: EditorView,
+		lang: (typeof langEnum.enumValues)[number]
+	) {
+		this.dictionary = dictionaries[lang];
+		this.decorations = this.computeDecorations(view);
+	}
+
+	update(update: ViewUpdate) {
+		if (update.docChanged || update.viewportChanged) {
+			this.decorations = this.computeDecorations(update.view);
+		}
+	}
+
+	computeDecorations(view: EditorView): DecorationSet {
+		console.log('compute decorations');
+		const builder = new RangeSetBuilder<Decoration>();
+		const tree = syntaxTree(view.state);
+
+		const punctuation = `!"#$%&()*+,-./:;<=>?@[\\\\\\]^_\`{|}~`;
+		const splitRegex = new RegExp(`[^\\s${punctuation}]+`, 'g');
+
+		for (const { from, to } of view.visibleRanges) {
+			tree.iterate({
+				from,
+				to,
+				enter: (node) => {
+					if (node.name === 'Text') {
+						const text = view.state.doc.sliceString(
+							node.from,
+							node.to
+						);
+						let match;
+						while ((match = splitRegex.exec(text)) !== null) {
+							const word = match[0];
+							const start = node.from + match.index;
+							const end = start + word.length;
+
+							if (!this.dictionary.check(word)) {
+								builder.add(start, end, spellErrorMark);
+							}
+						}
+					}
+				},
+			});
+		}
+
+		return builder.finish();
+	}
+}
+
+// Export the plugin and extension
+
+export function getSpellcheckExtension(
+	lang: (typeof langEnum.enumValues)[number]
+) {
+	return ViewPlugin.fromClass(
+		class extends SpellcheckViewPlugin {
+			constructor(view: EditorView) {
+				super(view, lang);
+			}
+		},
+		{
+			decorations: (plugin) => plugin.decorations,
+		}
+	);
+}

client/package.json

@@ -61,6 +61,7 @@
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "typo-js": "^1.2.5",
     "y-codemirror": "^3.0.1",
     "y-codemirror.next": "^0.3.5",
     "y-websocket": "^2.1.0",
@@ -74,6 +75,7 @@
     "@types/node": "^20.17.19",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/typo-js": "^1.2.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.21.0",
     "jiti": "^2.4.2",