From b2400c7051678faaa49c5f32aef06342db275f25 Mon Sep 17 00:00:00 2001 From: Xuezhou Dai Date: Tue, 18 Apr 2023 22:30:08 +0800 Subject: [PATCH] feat: debounced editor preview (#372) --- package.json | 1 + pnpm-lock.yaml | 55 ++++++++++++++++++++++ src/pages/dashboard/[subdomain]/editor.tsx | 33 ++++++++----- 3 files changed, 76 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index fbb6f2ea..1984ac2e 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "@tanstack/react-query-persist-client": "4.29.3", "@uiw/codemirror-extensions-events": "4.19.16", "@urql/core": "4.0.4", + "ahooks": "^3.7.6", "aplayer": "^1.10.1", "aplayer-react": "^1.0.5", "axios": "1.3.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9922e136..0f339891 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -94,6 +94,9 @@ dependencies: '@urql/core': specifier: 4.0.4 version: 4.0.4(graphql@16.6.0) + ahooks: + specifier: ^3.7.6 + version: 3.7.6(react@18.2.0) aplayer: specifier: ^1.10.1 version: 1.10.1 @@ -3634,6 +3637,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true optional: true @@ -3642,6 +3646,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true optional: true @@ -3650,6 +3655,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true optional: true @@ -3658,6 +3664,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true optional: true @@ -3756,6 +3763,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true dev: false optional: true @@ -3765,6 +3773,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true dev: false optional: true @@ -3774,6 +3783,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true dev: false optional: true @@ -3783,6 +3793,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true dev: false optional: true @@ -4469,6 +4480,10 @@ packages: hoist-non-react-statics: 3.3.2 dev: false + /@types/js-cookie@2.2.7: + resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==} + dev: false + /@types/js-yaml@4.0.5: resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==} dev: true @@ -5660,6 +5675,29 @@ packages: indent-string: 4.0.0 dev: true + /ahooks-v3-count@1.0.0: + resolution: {integrity: sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==} + dev: false + + /ahooks@3.7.6(react@18.2.0): + resolution: {integrity: sha512-p+2j4H/BI9vqXR0fZI7S/q6fUPxPklQnHqvU7zAVBljMFNSFeYRWB2iHHbjpXGOwUTOBYCh2OuvIHyJYj6Lpag==} + engines: {node: '>=8.0.0'} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.21.0 + '@types/js-cookie': 2.2.7 + ahooks-v3-count: 1.0.0 + dayjs: 1.11.7 + intersection-observer: 0.12.2 + js-cookie: 2.2.1 + lodash: 4.17.21 + react: 18.2.0 + resize-observer-polyfill: 1.5.1 + screenfull: 5.2.0 + tslib: 2.5.0 + dev: false + /ajv-formats@2.1.1(ajv@8.12.0): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} peerDependencies: @@ -9160,6 +9198,10 @@ packages: engines: {node: '>=12'} dev: false + /intersection-observer@0.12.2: + resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==} + dev: false + /invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} dependencies: @@ -9545,6 +9587,10 @@ packages: resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==} hasBin: true + /js-cookie@2.2.1: + resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==} + dev: false + /js-sdsl@4.4.0: resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==} dev: true @@ -12381,6 +12427,10 @@ packages: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} dev: false + /resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -12603,6 +12653,11 @@ packages: ajv-keywords: 5.1.0(ajv@8.12.0) dev: true + /screenfull@5.2.0: + resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==} + engines: {node: '>=0.10.0'} + dev: false + /scrypt-js@3.0.1: resolution: {integrity: sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==} dev: false diff --git a/src/pages/dashboard/[subdomain]/editor.tsx b/src/pages/dashboard/[subdomain]/editor.tsx index 906d2c9a..e51a3d8b 100644 --- a/src/pages/dashboard/[subdomain]/editor.tsx +++ b/src/pages/dashboard/[subdomain]/editor.tsx @@ -1,6 +1,7 @@ import { cn } from "~/lib/utils" import { useDate } from "~/hooks/useDate" import { useRouter } from "next/router" +import { useDebounceEffect } from "ahooks" import { ChangeEvent, useCallback, @@ -31,7 +32,7 @@ import { PageContent } from "~/components/common/PageContent" import type { Root } from "hast" import type { EditorView } from "@codemirror/view" -import { renderPageContent } from "~/markdown" +import { Rendered, renderPageContent } from "~/markdown" import { Button } from "~/components/ui/Button" import { Modal } from "~/components/ui/Modal" import { CSB_SCAN } from "~/lib/env" @@ -364,13 +365,21 @@ export default function SubdomainEditor() { // preview - const parsedContent = useMemo(() => { - if (values.content) { - const result = renderPageContent(values.content) - setTree(result.tree) - return result - } - }, [values.content]) + const [parsedContent, setParsedContent] = useState() + + useDebounceEffect( + () => { + if (values.content) { + const result = renderPageContent(values.content) + setTree(result.tree) + setParsedContent(result) + } + }, + [values.content], + { + wait: 500, + }, + ) const previewRef = useRef(null) @@ -573,10 +582,8 @@ export default function SubdomainEditor() { }`} >
@@ -629,7 +636,7 @@ export default function SubdomainEditor() { />
) : ( -
+