Add marked 12 support (#512)

Author: jfcere

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
 
   "files.associations": {

README.md

@@ -15,7 +15,7 @@
     <img alt="License" src="https://img.shields.io/npm/l/ngx-markdown.svg">
   </a>
   <br>
-  <img alt="Dependency Status" src="https://img.shields.io/librariesio/release/npm/ngx-markdown/17.1.0">
+  <img alt="Dependency Status" src="https://img.shields.io/librariesio/release/npm/ngx-markdown/17.2.0">
   <a href="https://www.npmjs.com/package/ngx-markdown">
     <img alt="Monthly Downloads" src="https://img.shields.io/npm/dm/ngx-markdown.svg">
   </a>
@@ -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

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"
   },

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<ExtendedRenderer>;
+        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<ExtendedRenderer>;
+        delete expectedMockRenderer.ɵNgxMarkdownRendererExtendedForExtensions;
+
+        expect(markedUseSpy).toHaveBeenCalledWith(...mockExtensions);
+        expect(markedUseSpy).toHaveBeenCalledWith({ renderer: expectedMockRenderer });
       });
 
       it('should return empty string when raw is null/undefined/empty', () => {

lib/src/markdown.service.ts

@@ -319,11 +319,18 @@ export class MarkdownService {
   }
 
   private parseMarked(html: string, markedOptions: MarkedOptions, inline = false): string | Promise<string> {
-    // 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<ExtendedRenderer>;
+      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

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",

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: