feat!: update marked lib to 15.0.0 (#559)

Author: jfcere

README.md

@@ -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@^12.0.0 --save
+npm install ngx-markdown marked@^15.0.0 --save
 ```
 
 ### Syntax highlight

demo/src/app/marked-options-factory.ts

@@ -5,8 +5,8 @@ export function markedOptionsFactory(anchorService: AnchorService): MarkedOption
   const renderer = new MarkedRenderer();
 
   // fix `href` for absolute link with fragments so that _copy-paste_ urls are correct
-  renderer.link = (href: string, title: string, text: string) => {
-    return MarkedRenderer.prototype.link.call(renderer, anchorService.normalizeExternalUrl(href), title, text);
+  renderer.link = ({ href, text })  => {
+    return `<a href="${anchorService.normalizeExternalUrl(href)}">${text}</a>`;
   };
 
   return { renderer };

demo/src/app/rerender/rerender.component.ts

@@ -42,7 +42,7 @@ export default class RerenderComponent implements OnInit, OnDestroy {
 
   headings: Element[] | undefined;
 
-  markdown = `## Markdown __rulez__!
+  markdown = `## Markdown rulez!
 ---
 
 ### Syntax highlight
@@ -85,9 +85,9 @@ const language = 'typescript';
   private overrideRenderer(styleAttribute: string): void {
     this.overrideEnabled = true;
 
-    this.markdownService.renderer.heading = (text: string, level: number): string => {
+    this.markdownService.renderer.heading = ({ text, depth }): string => {
       return this.overrideEnabled
-        ? `<h${level}${styleAttribute}>${text}</h${level}>`
+        ? `<h${depth}${styleAttribute}>${text}</h${depth}>`
         : false as unknown as string;
     };
   }

lib/package.json

@@ -33,7 +33,7 @@
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/platform-browser": "^19.0.0",
-    "marked": ">= 9.0.0 < 13.0.0",
+    "marked": "^15.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
     "zone.js": "~0.15.0"
   },

lib/src/markdown.service.spec.ts

@@ -4,7 +4,7 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { ComponentRef, EmbeddedViewRef, SecurityContext, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
-import { marked, MarkedExtension } from 'marked';
+import { marked, MarkedExtension, Tokens } from 'marked';
 import { first } from 'rxjs/operators';
 import { ClipboardButtonComponent } from './clipboard-button.component';
 import { KatexOptions } from './katex-options';
@@ -139,14 +139,14 @@ describe('MarkdownService', () => {
 
       it('should update option.renderer when updated', () => {
 
-        const blockquote = (quote: string) => `<mock-blockquote>${quote}</mock-blockquote>`;
+        const blockquote = ({ text }: Tokens.Blockquote) => `<mock-blockquote>${text}</mock-blockquote>`;
 
         markdownService.renderer.blockquote = blockquote;
 
-        const quoteText = 'foobar';
-        const expectedBlockquote = blockquote(quoteText);
-        const rendererBlockquote = (markdownService.renderer as any).blockquote(quoteText);
-        const optionsRendererBlockquote = (markdownService.options.renderer as any)!.blockquote(quoteText);
+        const blockquoteToken = { text: 'foobar' } as Tokens.Blockquote;
+        const expectedBlockquote = blockquote(blockquoteToken);
+        const rendererBlockquote = markdownService.renderer.blockquote(blockquoteToken);
+        const optionsRendererBlockquote = markdownService.options.renderer!.blockquote(blockquoteToken);
 
         expect(rendererBlockquote).toBe(expectedBlockquote);
         expect(optionsRendererBlockquote).toBe(expectedBlockquote);

lib/src/markdown.service.ts

@@ -51,15 +51,13 @@ declare let Prism: {
   highlightAllUnder: (element: Element | Document) => void;
 };
 
-
 export const errorJoyPixelsNotLoaded = '[ngx-markdown] When using the `emoji` attribute you *have to* include Emoji-Toolkit files to `angular.json` or use imports. See README for more information';
 export const errorKatexNotLoaded = '[ngx-markdown] When using the `katex` attribute you *have to* include KaTeX files to `angular.json` or use imports. See README for more information';
 export const errorMermaidNotLoaded = '[ngx-markdown] When using the `mermaid` attribute you *have to* include Mermaid files to `angular.json` or use imports. See README for more information';
 export const errorClipboardNotLoaded = '[ngx-markdown] When using the `clipboard` attribute you *have to* include Clipboard files to `angular.json` or use imports. See README for more information';
 export const errorClipboardViewContainerRequired = '[ngx-markdown] When using the `clipboard` attribute you *have to* provide the `viewContainerRef` parameter to `MarkdownService.render()` function';
 export const errorSrcWithoutHttpClient = '[ngx-markdown] When using the `src` attribute you *have to* pass the `HttpClient` as a parameter of the `forRoot` method. See README for more information';
 
-
 export const SECURITY_CONTEXT = new InjectionToken<SecurityContext>('SECURITY_CONTEXT');
 
 export interface ParseOptions {
@@ -284,10 +282,10 @@ export class MarkdownService {
     }
 
     const defaultCode = renderer.code;
-    renderer.code = function (code: string, language: string | undefined, isEscaped: boolean) {
-      return language === 'mermaid'
-        ? `<div class="mermaid">${code}</div>`
-        : defaultCode.call(this, code, language, isEscaped);
+    renderer.code = (token) => {
+      return token.lang === 'mermaid'
+        ? `<div class="mermaid">${token.text}</div>`
+        : defaultCode(token);
     };
 
     extendedRenderer.ɵNgxMarkdownRendererExtendedForMermaid = true;

package.json

@@ -64,8 +64,8 @@
     "gumshoejs": "^5.1.2",
     "hammerjs": "~2.0.8",
     "katex": "^0.16.2",
-    "marked": "^12.0.0",
-    "marked-gfm-heading-id": "^3.1.3",
+    "marked": "^15.0.0",
+    "marked-gfm-heading-id": "^4.1.1",
     "mermaid": "^11.2.1",
     "ngx-markdown": "file:lib",
     "prismjs": "^1.29.0",

yarn.lock

@@ -7522,23 +7522,23 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-marked-gfm-heading-id@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/marked-gfm-heading-id/-/marked-gfm-heading-id-3.2.0.tgz#d0344f786b4ab55415048260aad147f4e8e904b6"
-  integrity sha512-Xfxpr5lXLDLY10XqzSCA9l2dDaiabQUgtYM9hw8yunyVsB/xYBRpiic6BOiY/EAJw1ik1eWr1ET1HKOAPZBhXg==
+marked-gfm-heading-id@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/marked-gfm-heading-id/-/marked-gfm-heading-id-4.1.1.tgz#c6a46a10272745f63c6b03439dc239543a8324e8"
+  integrity sha512-EeQZieAQmsI6c2tWLx0ETd0VjPwLV8qi+HT0dIsfVMERm0rCIuXfRvZXJbo1SgUi++lmuR1LVY+QzgNiLNvVpw==
   dependencies:
     github-slugger "^2.0.0"
 
-marked@^12.0.0:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-12.0.2.tgz#b31578fe608b599944c69807b00f18edab84647e"
-  integrity sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==
-
 marked@^13.0.2:
   version "13.0.3"
   resolved "https://registry.yarnpkg.com/marked/-/marked-13.0.3.tgz#5c5b4a5d0198060c7c9bc6ef9420a7fed30f822d"
   integrity sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==
 
+marked@^15.0.0:
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-15.0.1.tgz#ed4a33b40b631623a1c3e68eb94663de740c5710"
+  integrity sha512-VnnE19XO2Vb2oZeH8quAepfrb6Aaz4OoY8yZQACfuy/5KVJ0GxYC0Qxzz/iuc+g5UF7H0HJ+QROfvH26XeBdDA==
+
 [email protected]:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"