Add markdown preview image lazy loading

frontend/package.json

@@ -55,6 +55,7 @@
 		"lib0": "^0.2.88",
 		"lodash": "^4.17.21",
 		"markdown-it": "^14.1.0",
+		"markdown-it-image-lazy-loading": "^2.0.1",
 		"markdown-it-incremental-dom": "^2.1.0",
 		"markdown-it-link-attributes": "^4.0.1",
 		"markdown-it-prism": "^2.3.0",

frontend/src/components/editor/Preview.tsx

@@ -11,6 +11,7 @@ import { refractor } from "refractor";
 import markdownItIncrementalDOM from "markdown-it-incremental-dom";
 import markdownItSanitizer from "markdown-it-sanitizer";
 import markdownItTaskCheckbox from "markdown-it-task-checkbox";
+import markdownItImageLazyLoading from "markdown-it-image-lazy-loading";
 import mila from "markdown-it-link-attributes";
 import * as IncrementalDOM from "incremental-dom";
 import "./editor.css";
@@ -47,7 +48,8 @@ const md = new MarkdownIt({
 		incrementalizeDefaultRules: false,
 	})
 	.use(markdownItKatex)
-	.use(markdownItSanitizer);
+	.use(markdownItSanitizer)
+	.use(markdownItImageLazyLoading);
 
 const Preview = () => {
 	const currentTheme = useCurrentTheme();

frontend/src/global.d.ts

@@ -2,3 +2,4 @@ declare module "markdown-it-incremental-dom";
 declare module "markdown-it-sanitizer";
 declare module "markdown-it-task-checkbox";
 declare module "markdown-it-link-attributes";
+declare module "markdown-it-image-lazy-loading";