From b558d3568ecf3c4a8c833aec794f23998de1aceb Mon Sep 17 00:00:00 2001 From: devleejb Date: Wed, 20 Nov 2024 20:54:03 +0900 Subject: [PATCH] Add markdown preview image lazy loading --- frontend/package.json | 1 + frontend/src/components/editor/Preview.tsx | 4 +++- frontend/src/global.d.ts | 1 + pnpm-lock.yaml | 26 ++++++++++++++++++++++ 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 12d491d0..815c0035 100755 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx index 51ccd315..15a95ca6 100644 --- a/frontend/src/components/editor/Preview.tsx +++ b/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(); diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts index 66e4d068..c953918b 100644 --- a/frontend/src/global.d.ts +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b37fde4f..3a08d0a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -267,6 +267,9 @@ importers: markdown-it: specifier: ^14.1.0 version: 14.1.0 + markdown-it-image-lazy-loading: + specifier: ^2.0.1 + version: 2.0.1 markdown-it-incremental-dom: specifier: ^2.1.0 version: 2.1.0(incremental-dom@0.6.0)(markdown-it@14.1.0) @@ -4425,6 +4428,11 @@ packages: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} + image-size@1.1.1: + resolution: {integrity: sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==} + engines: {node: '>=16.x'} + hasBin: true + immediate@3.0.6: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} @@ -5256,6 +5264,9 @@ packages: resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==} engines: {node: '>=0.10.0'} + markdown-it-image-lazy-loading@2.0.1: + resolution: {integrity: sha512-IN1DNE2ubw8yn0I7G2conoxSz0R5GgMuOczbxtV+k20MtXeHrDvMQPkQYYGQSd+ejy4eSKQOhqu3gk676Ca//A==} + markdown-it-incremental-dom@2.1.0: resolution: {integrity: sha512-dmTobpLZHkRbO57TPCrp0ci8ZJD4Bw6o6RToqgNsAPCSUgN/t/c+HTn/q62+Ox9zBwfU2+837NVjkt37bYnYDQ==} engines: {node: '>=6.14.4'} @@ -6033,6 +6044,9 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + queue@6.0.2: + resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==} + randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -11813,6 +11827,10 @@ snapshots: ignore@5.3.2: {} + image-size@1.1.1: + dependencies: + queue: 6.0.2 + immediate@3.0.6: {} immer@10.1.1: {} @@ -12764,6 +12782,10 @@ snapshots: map-obj@1.0.1: {} + markdown-it-image-lazy-loading@2.0.1: + dependencies: + image-size: 1.1.1 + markdown-it-incremental-dom@2.1.0(incremental-dom@0.6.0)(markdown-it@14.1.0): dependencies: htmlparser2: 3.10.1 @@ -13762,6 +13784,10 @@ snapshots: queue-microtask@1.2.3: {} + queue@6.0.2: + dependencies: + inherits: 2.0.4 + randombytes@2.1.0: dependencies: safe-buffer: 5.2.1