fix bugs; add #40

Author: mProjectsCode

exampleVault/index.md

@@ -131,8 +131,10 @@ main :: proc() {
 
 
 ```cpp
+#include <foo>
 #include <iostream>
 
+
 int main() {
     std::cout << "Hello World!";
     return 0;

src/CodeBlock.ts

@@ -29,7 +29,7 @@ export class CodeBlock extends MarkdownRenderChild {
 		const startLine = lines[sectionInfo.lineStart];
 
 		// regexp to match the text after the code block language
-		const regex = new RegExp('^[^`~]*?(```+|~~~+)' + this.language + ' (.*)', 'g');
+		const regex = new RegExp('^[^`~]*?\\s*(```+|~~~+)' + this.language + ' (.*)', 'g');
 		const match = regex.exec(startLine);
 		if (match !== null) {
 			return match[2];

src/codemirror/Cm6_ViewPlugin.ts

@@ -8,7 +8,15 @@ import { Cm6_Util } from 'src/codemirror/Cm6_Util';
 import { type ThemedToken } from 'shiki';
 import { editorLivePreviewField } from 'obsidian';
 
-interface DecoQueueNode {
+enum DecorationUpdateType {
+	Insert,
+	Remove,
+}
+
+type DecorationUpdate = InsertDecoration | RemoveDecoration;
+
+interface InsertDecoration {
+	type: DecorationUpdateType.Insert;
 	from: number;
 	to: number;
 	lang: string;
@@ -17,6 +25,12 @@ interface DecoQueueNode {
 	hideTo?: number;
 }
 
+interface RemoveDecoration {
+	type: DecorationUpdateType.Remove;
+	from: number;
+	to: number;
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createCm6Plugin(plugin: ShikiPlugin) {
 	return ViewPlugin.fromClass(
@@ -30,7 +44,7 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 				void this.updateWidgets(view);
 
 				plugin.updateCm6Plugin = (): Promise<void> => {
-					return this.forceUpdate();
+					return this.updateWidgets(this.view);
 				};
 			}
 
@@ -50,12 +64,6 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 				}
 			}
 
-			async forceUpdate(): Promise<void> {
-				await this.updateWidgets(this.view);
-
-				this.view.dispatch(this.view.state.update({}));
-			}
-
 			isLivePreview(state: EditorState): boolean {
 				// @ts-ignore some strange private field not being assignable
 				return state.field(editorLivePreviewField);
@@ -70,7 +78,7 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 			async updateWidgets(view: EditorView, docChanged: boolean = true): Promise<void> {
 				let lang = '';
 				let state: SyntaxNode[] = [];
-				const decoQueue: DecoQueueNode[] = [];
+				const decorationUpdates: DecorationUpdate[] = [];
 
 				// const t1 = performance.now();
 
@@ -92,7 +100,8 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 								if (match) {
 									const hasSelectionOverlap = Cm6_Util.checkSelectionAndRangeOverlap(view.state.selection, node.from - 1, node.to + 1);
 
-									decoQueue.push({
+									decorationUpdates.push({
+										type: DecorationUpdateType.Insert,
 										from: node.from,
 										to: node.to,
 										lang: match[1],
@@ -123,42 +132,63 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 						if (props.has('HyperMD-codeblock-begin')) {
 							const content = Cm6_Util.getContent(view.state, node.from, node.to);
 
-							lang = /^```(\S+)/.exec(content)?.[1] ?? '';
+							lang = /^```\s*(\S+)/.exec(content)?.[1] ?? '';
 						}
 
 						if (props.has('HyperMD-codeblock-end')) {
 							if (state.length > 0 && lang !== '') {
 								const start = state[0].from;
 								const end = state[state.length - 1].to;
 
-								decoQueue.push({
+								decorationUpdates.push({
+									type: DecorationUpdateType.Insert,
 									from: start,
 									to: end,
 									lang,
 									content: Cm6_Util.getContent(view.state, start, end),
 								});
 							}
 
+							if (state.length > 0 && lang === '') {
+								const start = state[0].from;
+								const end = state[state.length - 1].to;
+
+								decorationUpdates.push({
+									type: DecorationUpdateType.Remove,
+									from: start,
+									to: end,
+								});
+							}
+
 							lang = '';
 							state = [];
 						}
 					},
 				});
 
-				for (const node of decoQueue) {
+				for (const node of decorationUpdates) {
 					try {
-						const decorations = await this.buildDecorations(node.hideTo ?? node.from, node.to, node.lang, node.content);
-						this.removeDecoration(node.from, node.to);
-						if (node.hideLang) {
-							// add the decoration that hides the language tag
-							decorations.unshift(Decoration.replace({}).range(node.from, node.hideTo));
+						if (node.type === DecorationUpdateType.Remove) {
+							this.removeDecoration(node.from, node.to);
+						} else if (node.type === DecorationUpdateType.Insert) {
+							const decorations = await this.buildDecorations(node.hideTo ?? node.from, node.to, node.lang, node.content);
+							this.removeDecoration(node.from, node.to);
+							if (node.hideLang) {
+								// add the decoration that hides the language tag
+								decorations.unshift(Decoration.replace({}).range(node.from, node.hideTo));
+							}
+							// add the highlight decorations
+							this.addDecoration(node.from, node.to, decorations);
 						}
-						// add the highlight decorations
-						this.addDecoration(node.from, node.to, decorations);
 					} catch (e) {
 						console.error(e);
 					}
 				}
+
+				if (decorationUpdates.length > 0) {
+					this.view.dispatch(this.view.state.update({}));
+				}
+
 				// console.log('Traversed syntax tree in', performance.now() - t1, 'ms');
 			}