From c5af44909c7e7fa2eb7fb1e030e515f13ba6123f Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Sat, 12 Dec 2020 13:45:10 +0100 Subject: [PATCH] Update markmap (#834) Signed-off-by: Tilman Vatteroth --- package.json | 5 ++-- .../markmap/markmap-frame.tsx | 20 ++++++------- .../markmap/markmap-loader.ts | 25 +++++++++++++++++ yarn.lock | 28 +++++++++---------- 4 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts diff --git a/package.json b/package.json index 12167d38d..316f29865 100644 --- a/package.json +++ b/package.json @@ -78,8 +78,9 @@ "markdown-it-sup": "1.0.0", "markdown-it-task-lists": "2.1.1", "markdown-it-toc-done-right": "4.2.0", - "markmap-lib": "0.10.2", - "markmap-view": "0.1.2", + "markmap-common": "0.1.2", + "markmap-lib": "0.11.1", + "markmap-view": "0.2.1", "mermaid": "8.8.4", "node-sass": "4.14.1", "react": "17.0.1", diff --git a/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx b/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx index cf0c020cc..acf45522d 100644 --- a/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx +++ b/src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx @@ -45,17 +45,15 @@ export const MarkmapFrame: React.FC = ({ code }) => { return } const actualContainer = diagramContainer.current - Promise.all([import(/* webpackChunkName: "markmap" */ 'markmap-lib'), import(/* webpackChunkName: "markmap" */ 'markmap-view')]) - .then(([{ transform }, { Markmap }]) => { - const svg: SVGSVGElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg') - svg.setAttribute('width', '100%') - actualContainer.querySelectorAll('svg').forEach(child => child.remove()) - actualContainer.appendChild(svg) - const { root } = transform(code) - Markmap.create(svg, {}, root) - }).catch(() => { - console.error('error while loading markmap') - }) + import('./markmap-loader').then(({ markmapLoader }) => { + const svg: SVGSVGElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg') + svg.setAttribute('width', '100%') + actualContainer.querySelectorAll('svg').forEach(child => child.remove()) + actualContainer.appendChild(svg) + markmapLoader(svg, code) + }).catch(() => { + console.error('error while loading markmap') + }) }, [code]) return ( diff --git a/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts b/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts new file mode 100644 index 000000000..2ebf40d0e --- /dev/null +++ b/src/components/markdown-renderer/replace-components/markmap/markmap-loader.ts @@ -0,0 +1,25 @@ +/* +SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file) + +SPDX-License-Identifier: AGPL-3.0-only +*/ + +import { loadCSS, loadJS } from 'markmap-common' +import { Transformer } from 'markmap-lib' +import { Markmap } from 'markmap-view' + +const transformer: Transformer = new Transformer() + +export const markmapLoader = (svg: SVGSVGElement, code: string): void => { + const { root, features } = transformer.transform(code) + const { styles, scripts } = transformer.getUsedAssets(features) + + if (styles) { + loadCSS(styles) + } + if (scripts) { + loadJS(scripts).catch(console.log) + } + + Markmap.create(svg, {}, root) +} diff --git a/yarn.lock b/yarn.lock index 21682a227..00dbd9bf1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9473,35 +9473,35 @@ markdown-it@^11.0.0: mdurl "^1.0.1" uc.micro "^1.0.5" -markmap-common@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/markmap-common/-/markmap-common-0.1.0.tgz#0577825d030245ad4fe69cf5243e794c4e814bb4" - integrity sha512-J8j0cl4ua31NYADQfxJpBjfYe4GUtm5okWbab8Z25R274+cfezXIlrlnIATSI4HZi/qxiurGiEpXwbTB1rV+Bw== +markmap-common@0.1.2, markmap-common@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/markmap-common/-/markmap-common-0.1.2.tgz#2ffdfbcd9a7d27765d326c253174e606216c6762" + integrity sha512-2HcqhhXogGvofOJMfqCBU5ZGSgUxluz81f7uCSKu9iTQFirFp4xGlRn8VXhuRv5O7TONfnA9a/6g1++EPstjag== dependencies: "@babel/runtime" "^7.12.1" -markmap-lib@0.10.2: - version "0.10.2" - resolved "https://registry.yarnpkg.com/markmap-lib/-/markmap-lib-0.10.2.tgz#68c855021f5e43068fd2a47f398bb4daa52044a3" - integrity sha512-IKtYn3gZMB0wgG3D4N56HlwpQTI+adK03JpzEwe+05h7RlJhuIq466W8hTGRs7JE8r0gL8Q/8J5xoulkabKPFQ== +markmap-lib@0.11.1: + version "0.11.1" + resolved "https://registry.yarnpkg.com/markmap-lib/-/markmap-lib-0.11.1.tgz#08118d394b564218a660111d755b3316ca044695" + integrity sha512-oUJOy3EE/+0irnIsL+hb2+dnhdT4t7L0vUGSwtlX0I9F5nkuPmd0pInVAwzN2iasRg/qyuYo4NOb+yDw3vWjjA== dependencies: "@babel/runtime" "^7.12.5" katex "^0.12.0" - markmap-common "^0.1.0" + markmap-common "^0.1.2" prismjs "^1.21.0" remarkable "^2.0.0" remarkable-katex "^1.1.6" -markmap-view@0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/markmap-view/-/markmap-view-0.1.2.tgz#818ebed4f5f03f20b7e214a2b1663285397bec13" - integrity sha512-d0iD+fa47BuzrfQsVf4GZ/u5SCLH/kYltQbw76h/sDHMgVA2FNI+dPKhKmTJe8z5rudCGd2yEDJ3dx0QLntibw== +markmap-view@0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/markmap-view/-/markmap-view-0.2.1.tgz#012f42286785621a3025414da37d5daf267e1954" + integrity sha512-Z+ylQlWZA+SUQVpzJTJZyF50fNTpmm0bAAC/7Jf4Rp0mmSGJu8ROlqmTE6fNVl66xW9Yx6T8wiS5caqhTvlNgw== dependencies: "@babel/runtime" "^7.12.5" "@types/d3" "^6.0.0" d3 "^6.2.0" d3-flextree "^2.1.1" - markmap-common "^0.1.0" + markmap-common "^0.1.2" md5.js@^1.3.4: version "1.3.5"