From 213f85b719d3ac3582106072e68a83994ff553c0 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Fri, 9 Feb 2018 13:29:18 +0200 Subject: [PATCH] =?UTF-8?q?refactor:=20switch=20to=20marked=20(?= =?UTF-8?q?=F0=9F=97=9C=20-81kB=20to=20minified=20bundle=20size)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/services/MarkdownRenderer.ts | 85 +++++++++++--------------------- yarn.lock | 34 +++---------- 3 files changed, 40 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index 4f6a9dca4a..72c7090283 100644 --- a/package.json +++ b/package.json @@ -82,12 +82,14 @@ "react-dom": "^16.0.0" }, "dependencies": { + "@types/marked": "^0.3.0", "decko": "^1.2.0", "dompurify": "^1.0.2", "eventemitter3": "^3.0.0", "json-pointer": "^0.6.0", "json-schema-ref-parser": "^4.0.4", "lunr": "^2.1.5", + "marked": "^0.3.12", "mobx": "^3.3.0", "mobx-react": "^4.3.3", "openapi-sampler": "1.0.0-beta.8", @@ -98,7 +100,6 @@ "react-hot-loader": "3.1.3", "react-tabs": "^2.0.0", "react-tippy": "^1.2.2", - "remarkable": "^1.7.1", "slugify": "^1.2.1", "stickyfill": "^1.1.1", "styled-components": "^3.1.0", diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts index 07e2217ff5..4154b4d713 100644 --- a/src/services/MarkdownRenderer.ts +++ b/src/services/MarkdownRenderer.ts @@ -1,15 +1,14 @@ -import * as Remarkable from 'remarkable'; +import * as marked from 'marked'; import slugify from 'slugify'; import { MDComponent } from '../components/Markdown/Markdown'; import { highlight, html2Str } from '../utils'; import { SECTION_ATTR } from './MenuStore'; -const md = new Remarkable('default', { - html: true, - linkify: true, - breaks: false, - typographer: false, +const renderer = new marked.Renderer(); + +marked.setOptions({ + renderer, highlight: (str, lang) => { return highlight(str, lang); }, @@ -31,16 +30,13 @@ export class MarkdownRenderer { headings: MarkdownHeading[] = []; currentTopHeading: MarkdownHeading; - private _origRules: any = {}; - - saveOrigRules() { - this._origRules.open = md.renderer.rules.heading_open; - this._origRules.close = md.renderer.rules.heading_close; - } + private headingEnhanceRenderer: marked.Renderer; + private originalHeadingRule: typeof marked.Renderer.prototype.heading; - restoreOrigRules() { - md.renderer.rules.heading_open = this._origRules.open; - md.renderer.rules.heading_close = this._origRules.close; + constructor() { + this.headingEnhanceRenderer = new marked.Renderer(); + this.originalHeadingRule = this.headingEnhanceRenderer.heading; + this.headingEnhanceRenderer.heading = this.headingRule; } saveHeading(name: string, container: MarkdownHeading[] = this.headings): MarkdownHeading { @@ -87,53 +83,32 @@ export class MarkdownRenderer { prevHeading.description = html2Str(rawText.substring(prevPos)); } - headingOpenRule = (tokens, idx) => { - if (tokens[idx].hLevel > 2) { - return this._origRules.open(tokens, idx); - } else { - const content = tokens[idx + 1].content; - if (tokens[idx].hLevel === 1) { - this.currentTopHeading = this.saveHeading(content); - const id = this.currentTopHeading.id; - return ( - `` + - `` + - `` - ); - } else if (tokens[idx].hLevel === 2) { - const { id } = this.saveHeading( - content, - this.currentTopHeading && this.currentTopHeading.items, - ); - return ( - `` + - `` + - `` - ); - } - } - }; - - headingCloseRule = (tokens, idx) => { - if (tokens[idx].hLevel > 2) { - return this._origRules.close(tokens, idx); + headingRule = (text: string, level: number, raw: string) => { + if (level === 1) { + this.currentTopHeading = this.saveHeading(text); + const id = this.currentTopHeading.id; + return ( + `` + + `` + + `${text}` + ); + } else if (level === 2) { + const { id } = this.saveHeading(text, this.currentTopHeading && this.currentTopHeading.items); + return ( + `` + + `` + + `${text}` + ); } else { - return `\n`; + return this.originalHeadingRule(text, level, raw); } }; renderMd(rawText: string, raw: boolean = true): string { - if (!raw) { - this.saveOrigRules(); - md.renderer.rules.heading_open = this.headingOpenRule; - md.renderer.rules.heading_close = this.headingCloseRule; - } + const opts = raw ? undefined : { renderer: this.headingEnhanceRenderer }; - const res = md.render(rawText.toString()); + const res = marked(rawText.toString(), opts); - if (!raw) { - this.restoreOrigRules(); - } return res; } diff --git a/yarn.lock b/yarn.lock index c6ce863499..4dfa4e318b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -103,6 +103,10 @@ version "2.1.5" resolved "https://registry.yarnpkg.com/@types/lunr/-/lunr-2.1.5.tgz#afb90226a6d2eb472eb1732cef7493a02b0177fd" +"@types/marked@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.3.0.tgz#583c223dd33385a1dda01aaf77b0cd0411c4b524" + "@types/minimatch@3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.1.tgz#b683eb60be358304ef146f5775db4c0e3696a550" @@ -368,13 +372,6 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" -argparse@~0.1.15: - version "0.1.16" - resolved "https://registry.yarnpkg.com/argparse/-/argparse-0.1.16.tgz#cfd01e0fbba3d6caed049fbd758d40f65196f57c" - dependencies: - underscore "~1.7.0" - underscore.string "~2.4.0" - arr-diff@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf" @@ -524,10 +521,6 @@ atob@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d" -autolinker@~0.15.0: - version "0.15.3" - resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832" - autoprefixer@^6.3.1: version "6.7.7" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" @@ -4634,6 +4627,10 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +marked@^0.3.12: + version "0.3.12" + resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519" + math-expression-evaluator@^1.2.14: version "1.2.17" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac" @@ -6209,13 +6206,6 @@ relateurl@0.2.x: version "0.2.7" resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" -remarkable@^1.7.1: - version "1.7.1" - resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.1.tgz#aaca4972100b66a642a63a1021ca4bac1be3bff6" - dependencies: - argparse "~0.1.15" - autolinker "~0.15.0" - remove-trailing-separator@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" @@ -7420,18 +7410,10 @@ ultron@~1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c" -underscore.string@~2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-2.4.0.tgz#8cdd8fbac4e2d2ea1e7e2e8097c42f442280f85b" - underscore@~1.4.4: version "1.4.4" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604" -underscore@~1.7.0: - version "1.7.0" - resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209" - union-value@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"