From 07a9ed504c0658fe74b32a394d6f9ff3c8b05213 Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Sat, 30 Mar 2024 20:15:05 -0400 Subject: [PATCH] Add marked 12 support (#512) --- .vscode/settings.json | 2 +- README.md | 4 ++-- lib/package.json | 4 ++-- lib/src/markdown.service.spec.ts | 27 +++++++++++++++++++++++++-- lib/src/markdown.service.ts | 13 ++++++++++--- package.json | 6 +++--- yarn.lock | 18 +++++++++--------- 7 files changed, 52 insertions(+), 22 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 4178f74..81d01e1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,6 @@ { "editor.codeActionsOnSave": { - "source.fixAll": true + "source.fixAll": "explicit" }, "files.associations": { diff --git a/README.md b/README.md index b255671..5106967 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ License
- Dependency Status + Dependency Status Monthly Downloads @@ -54,7 +54,7 @@ StackBlitz available @ [https://stackblitz.com/edit/ngx-markdown](https://stackb To add ngx-markdown along with the required marked library to your `package.json` use the following commands. ```bash -npm install ngx-markdown marked@^9.0.0 --save +npm install ngx-markdown marked@^12.0.0 --save ``` ### Syntax highlight diff --git a/lib/package.json b/lib/package.json index bf5b619..57549ea 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "ngx-markdown", - "version": "17.1.1", + "version": "17.2.0", "description": "Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights", "homepage": "https://github.com/jfcere/ngx-markdown", "license": "MIT", @@ -33,7 +33,7 @@ "@angular/common": "^17.0.0", "@angular/core": "^17.0.0", "@angular/platform-browser": "^17.0.0", - "marked": "^9.0.0", + "marked": ">= 9.0.0 < 13.0.0", "rxjs": "^6.5.3 || ^7.4.0", "zone.js": "~0.14.0" }, diff --git a/lib/src/markdown.service.spec.ts b/lib/src/markdown.service.spec.ts index c29b6d3..272d311 100644 --- a/lib/src/markdown.service.spec.ts +++ b/lib/src/markdown.service.spec.ts @@ -16,6 +16,7 @@ import { errorJoyPixelsNotLoaded, errorKatexNotLoaded, errorMermaidNotLoaded, + ExtendedRenderer, MarkdownService, ParseOptions, SECURITY_CONTEXT, @@ -203,6 +204,25 @@ describe('MarkdownService', () => { expect(parsed).toBe(marked.parse(mockRaw)); }); + it('should not pass extended flags to `marked.use` when parsing', () => { + + const mockRaw = '### Markdown-x'; + const mockRenderer = new MarkedRenderer(); + const mockMarkedOptions: MarkedOptions = { renderer: mockRenderer }; + + const markedUseSpy = spyOn(marked, 'use'); + + markdownService.options = mockMarkedOptions; + markdownService.parse(mockRaw, { mermaid: true }); + + const expectedMockRenderer = { ...mockRenderer } as Partial; + delete expectedMockRenderer.ɵNgxMarkdownRendererExtendedForExtensions; + delete expectedMockRenderer.ɵNgxMarkdownRendererExtendedForMermaid; + + expect(markedUseSpy).toHaveBeenCalledWith(...mockExtensions); + expect(markedUseSpy).toHaveBeenCalledWith({ renderer: expectedMockRenderer }); + }); + it('should remove leading whitespaces offset while keeping indent', () => { const mockRaw = [ @@ -403,8 +423,11 @@ describe('MarkdownService', () => { markdownService.options = mockMarkedOptions; markdownService.parse(mockRaw); - expect(markedUseSpy).toHaveBeenCalled(); - expect(markedUseSpy).toHaveBeenCalledWith({ renderer: mockRenderer }); + const expectedMockRenderer = { ...mockRenderer } as Partial; + delete expectedMockRenderer.ɵNgxMarkdownRendererExtendedForExtensions; + + expect(markedUseSpy).toHaveBeenCalledWith(...mockExtensions); + expect(markedUseSpy).toHaveBeenCalledWith({ renderer: expectedMockRenderer }); }); it('should return empty string when raw is null/undefined/empty', () => { diff --git a/lib/src/markdown.service.ts b/lib/src/markdown.service.ts index 727d4ab..0e60281 100644 --- a/lib/src/markdown.service.ts +++ b/lib/src/markdown.service.ts @@ -319,11 +319,18 @@ export class MarkdownService { } private parseMarked(html: string, markedOptions: MarkedOptions, inline = false): string | Promise { - // remove renderer from markedOptions because if renderer - // is passed to parse method, it will ignore all extensions if (markedOptions.renderer) { - marked.use({ renderer: markedOptions.renderer }); + // clone renderer and remove extended flags otherwise + // marked throws an error thinking it is a renderer prop + const renderer = { ...markedOptions.renderer } as Partial; + delete renderer.ɵNgxMarkdownRendererExtendedForExtensions; + delete renderer.ɵNgxMarkdownRendererExtendedForMermaid; + + // remove renderer from markedOptions because if renderer is + // passed to marked.parse method, it will ignore all extensions delete markedOptions.renderer; + + marked.use({ renderer }); } return inline diff --git a/package.json b/package.json index c8bee16..e474814 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-markdown", - "version": "17.1.1", + "version": "17.2.0", "description": "Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights", "homepage": "https://github.com/jfcere/ngx-markdown", "license": "MIT", @@ -64,8 +64,8 @@ "gumshoejs": "^5.1.2", "hammerjs": "~2.0.8", "katex": "^0.16.2", - "marked": "^9.1.2", - "marked-gfm-heading-id": "^3.1.0", + "marked": "^12.0.0", + "marked-gfm-heading-id": "^3.1.3", "mermaid": "^10.6.0", "ngx-markdown": "file:lib", "prismjs": "^1.29.0", diff --git a/yarn.lock b/yarn.lock index 5688b7c..9b1e4c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8100,17 +8100,17 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" -marked-gfm-heading-id@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/marked-gfm-heading-id/-/marked-gfm-heading-id-3.1.0.tgz#f414c987a6d1cac4078829089a8cb01e9a07c005" - integrity sha512-PYgLXDbL64Ga6kCpvVuKVoIVsV6MKUtkOXnR8mIqyjiycAeKNhQxcGpO0mHEogOTzyY8A8TcK49k5VwYMUCCbg== +marked-gfm-heading-id@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/marked-gfm-heading-id/-/marked-gfm-heading-id-3.1.3.tgz#7bcfea85901843baf214b96ccc4ff67581c972a9" + integrity sha512-A0cRU4PCueX/5m8VE4mT8uTQ36l3xMYRojz3Eqnk4BmUFZ0T+9Xhn2KvHcANP4qbhfOeuMrWJCTQbASIBR5xeg== dependencies: github-slugger "^2.0.0" -marked@^9.1.2: - version "9.1.5" - resolved "https://registry.yarnpkg.com/marked/-/marked-9.1.5.tgz#fcada4702ea64a5c05a4ff0e0639628aac8a1e5f" - integrity sha512-14QG3shv8Kg/xc0Yh6TNkMj90wXH9mmldi5941I2OevfJ/FQAFLEwtwU2/FfgSAOMlWHrEukWSGQf8MiVYNG2A== +marked@^12.0.0: + version "12.0.1" + resolved "https://registry.yarnpkg.com/marked/-/marked-12.0.1.tgz#8ab1eb15560c7cbe3b011074845d7ca6c4d392b0" + integrity sha512-Y1/V2yafOcOdWQCX0XpAKXzDakPOpn6U0YLxTJs3cww6VxOzZV1BTOOYWLvH3gX38cq+iLwljHHTnMtlDfg01Q== mdast-util-from-markdown@^1.3.0: version "1.3.1" @@ -8772,7 +8772,7 @@ ng-packagr@^17.0.0: esbuild "^0.19.0" "ngx-markdown@file:lib": - version "17.1.1" + version "17.2.0" dependencies: tslib "^2.3.0" optionalDependencies: