Update marked lib to 9.0.0 (#474) (#479)

* chore: update to marked version 9 (#474) * chore: update to marked version 9 * Update README.md * test: fix the Marked testing by providing it using Angular dependency rejection * feat: add `extensions` to the `MarkdownModuleConfig` * Revert "feat: add `extensions` to the `MarkdownModuleConfig`" * Re-add extensions to the MarkdownModuleConfig * Add missing unit tests --------- Co-authored-by: jfcere <[email protected]> * Add removed unit tests * Rename markdown-extentions file * Injection tokens uniformization * Add async pipe to MarkdownPipe demo and documentation * Remove marked.min.js from angular.json * Fix overriding of renderer functions * Fix named import lint error --------- Co-authored-by: robertIsaac <[email protected]> Co-authored-by: jfcere <[email protected]>
jfcere · Nov 11, 2023 · 3a68d38 · 3a68d38
1 parent 53648ca
commit 3a68d38
Show file tree

Hide file tree

Showing 29 changed files with 333 additions and 324 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -55,6 +55,7 @@
         "@typescript-eslint/no-unused-vars": "error",
         "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-floating-promises": "off",
         "comma-dangle": [
           "error",
           "always-multiline"
@@ -79,13 +80,16 @@
             }
           ]
         }],
+        "import/no-duplicates": "error",
+        "object-curly-spacing": ["error", "always"],
+        "object-shorthand": "off",
         "quotes": ["error", "single"],
         "semi": ["error", "always"],
+        "semi-spacing": "error",
         "sort-imports": ["error", {
           "ignoreCase": true,
           "ignoreDeclarationSort": true
-        }],
-        "object-shorthand": "off"
+        }]
       }
     },
     {

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,4 @@
 {
-  "auto-close-tag.activationOnLanguage": [
-    "html"
-  ],
-
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },

diff --git a/README.md b/README.md
@@ -54,18 +54,7 @@ StackBlitz available @ [https://stackblitz.com/edit/ngx-markdown](https://stackb
 To add ngx-markdown library to your `package.json` use the following commands.
 
 ```bash
-npm install ngx-markdown marked@^4.3.0 --save
-npm install @types/marked@^4.3.0 --save-dev
-```
-
-As the library is using [Marked](https://github.com/chjj/marked) parser you will need to add `node_modules/marked/marked.min.js` to your application.
-
-If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...
-
-```diff
-"scripts": [
-+ "node_modules/marked/marked.min.js"
-]
+npm install ngx-markdown marked@^9.0.0
 ```
 
 ### Syntax highlight
@@ -93,7 +82,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 + "node_modules/prismjs/themes/prism-okaidia.css"
 ],
 "scripts": [
-  "node_modules/marked/marked.min.js",
 + "node_modules/prismjs/prism.js",
 + "node_modules/prismjs/components/prism-csharp.min.js", # c-sharp language syntax
 + "node_modules/prismjs/components/prism-css.min.js" # css language syntax
@@ -116,7 +104,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 + "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
 ],
 "scripts": [
-  "node_modules/marked/marked.min.js",
   "node_modules/prismjs/prism.js",
   "node_modules/prismjs/components/prism-csharp.min.js",
   "node_modules/prismjs/components/prism-css.min.js",
@@ -152,7 +139,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 + "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"
 ],
 "scripts": [
-  "node_modules/marked/marked.min.js",
   "node_modules/prismjs/prism.js",
   "node_modules/prismjs/components/prism-csharp.min.js",
   "node_modules/prismjs/components/prism-css.min.js",
@@ -189,7 +175,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 + "node_modules/prismjs/plugins/command-line/prism-command-line.css"
 ],
 "scripts": [
-  "node_modules/marked/marked.min.js",
   "node_modules/prismjs/prism.js",
   "node_modules/prismjs/components/prism-csharp.min.js",
   "node_modules/prismjs/components/prism-css.min.js",
@@ -251,7 +236,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 
 ```diff
 "scripts": [
-  "node_modules/marked/marked.min.js",
 + "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
 ]
 ```
@@ -291,7 +275,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 + "node_modules/katex/dist/katex.min.css"
 ],
 "scripts": [
-  "node_modules/marked/marked.min.js",
 + "node_modules/katex/dist/katex.min.js",
 + "node_modules/katex/dist/contrib/auto-render.min.js",
 ]
@@ -349,7 +332,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 
 ```diff
 "scripts": [
-  "node_modules/marked/marked.min.js",
 + "node_modules/mermaid/dist/mermaid.min.js",
 ]
 ```
@@ -405,7 +387,6 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 
 ```diff
 "scripts": [
-  "node_modules/marked/marked.min.js",
 + "node_modules/clipboard/dist/clipboard.min.js",
 ]
 ```
@@ -435,7 +416,7 @@ You can provide a custom component to use globaly across your application with t
 MarkdownModule.forRoot({
   ...
   clipboardOptions: {
-    provide: ClipboardOptions,
+    provide: CLIPBOARD_OPTIONS,
     useValue: {
       buttonComponent: ClipboardButtonComponent,
     },
@@ -559,16 +540,16 @@ You can bypass sanitization using the markdown component, directive or pipe usin
 </div>
 
 <!-- disable sanitizer using markdown pipe -->
-<div [innerHTML]="markdown | markdown : { disableSanitizer: true }"></div>
+<div [innerHTML]="markdown | markdown : { disableSanitizer: true } | async"></div>
 ```
 
 #### MarkedOptions
 
-Optionally, markdown parsing can be configured by passing [MarkedOptions](https://marked.js.org/#/USING_ADVANCED.md#options) to the `forRoot` method of `MarkdownModule`.
+Optionally, markdown parsing can be configured using [MarkedOptions](https://marked.js.org/#/USING_ADVANCED.md#options) that can be provided with the `MARKED_OPTIONS` injection token via the `markedOptions` property of the `forRoot` method of `MarkdownModule`.
 
 Imports:
 ```typescript
-import { MarkdownModule, MarkedOptions } from 'ngx-markdown';
+import { MarkdownModule, MARKED_OPTIONS } from 'ngx-markdown';
 ```
 
 Default options:
@@ -583,13 +564,11 @@ Custom options and passing `HttpClient` to use `[src]` attribute:
 MarkdownModule.forRoot({
   loader: HttpClient, // optional, only if you use [src] attribute
   markedOptions: {
-    provide: MarkedOptions,
+    provide: MARKED_OPTIONS,
     useValue: {
       gfm: true,
       breaks: false,
       pedantic: false,
-      smartLists: true,
-      smartypants: false,
     },
   },
 }),
@@ -602,7 +581,7 @@ MarkdownModule.forRoot({
 The example below overrides the default blockquote token rendering by adding a CSS class for custom styling when using Bootstrap CSS:
 
 ```typescript
-import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';
+import { MARKED_OPTIONS, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
 
 // function that returns `MarkedOptions` with renderer override
 export function markedOptionsFactory(): MarkedOptions {
@@ -617,21 +596,32 @@ export function markedOptionsFactory(): MarkedOptions {
     gfm: true,
     breaks: false,
     pedantic: false,
-    smartLists: true,
-    smartypants: false,
   };
 }
 
 // using specific option with FactoryProvider
 MarkdownModule.forRoot({
   loader: HttpClient,
   markedOptions: {
-    provide: MarkedOptions,
+    provide: MARKED_OPTIONS,
     useFactory: markedOptionsFactory,
   },
 }),
 ```
 
+
+### Marked extensions
+
+You can provide [marked extensions](https://marked.js.org/using_advanced#extensions) using the `markedExtensions` property that accepts an array of extensions when configuring `MarkdownModule`.
+
+```ts
+import { gfmHeadingId } from 'marked-gfm-heading-id';
+
+MarkdownModule.forRoot({
+  markedExtensions: [gfmHeadingId()],
+}),
+```
+
 ### Other application modules
 
 Use `forChild` when importing `MarkdownModule` into other application modules to allow you to use the same parser configuration across your application.
@@ -660,7 +650,7 @@ https://angular.io/api/core/Component#preserveWhitespaces
 
 ### Component
 
-You can use `markdown` component to either parse static markdown directly from your HTML markup, load the content from a remote URL using `src` property or bind a variable to your component using `data` property. To enable relative oath for links/images when using `src` input property to load content remotely, set the `srcRelativeLink` input property to `true`. You can get a hook on load complete using `load` output event property, on loading error using `error` output event property or when parsing is completed using `ready` output event property.
+You can use `markdown` component to either parse static markdown directly from your HTML markup, load the content from a remote URL using `src` property or bind a variable to your component using `data` property. You can get a hook on load complete using `load` output event property, on loading error using `error` output event property or when parsing is completed using `ready` output event property.
 
 ```html
 <!-- static markdown -->
@@ -671,7 +661,6 @@ You can use `markdown` component to either parse static markdown directly from y
 <!-- loaded from remote url -->
 <markdown
   [src]="'path/to/file.md'"
-  [srcRelativeLink]="true"
   (load)="onLoad($event)"
   (error)="onError($event)">
 </markdown>
@@ -702,7 +691,6 @@ The same way the component works, you can use `markdown` directive to accomplish
 <!-- loaded from remote url -->
 <div markdown
   [src]="'path/to/file.md'"
-  [srcRelativeLink]="true"
   (load)="onLoad($event)"
   (error)="onError($event)">
 </div>
@@ -722,18 +710,18 @@ The same way the component works, you can use `markdown` directive to accomplish
 
 ### Pipe
 
-Using `markdown` pipe to transform markdown to HTML allow you to chain pipe transformations and will update the DOM when value changes.
+Using `markdown` pipe to transform markdown to HTML allow you to chain pipe transformations and will update the DOM when value changes. It is important to note that, because the `marked` parsing method returns a `Promise`, it requires the use of the `async` pipe.
 
 ```html
 <!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content -->
-<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown"></div>
+<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown | async"></div>
 ```
 
 The `markdown` pipe allow you to use all the same plugins as the component by providing the options parameters.
 
 ```html
 <!-- provide options parameters to activate plugins or for configuration -->
-<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown : { emoji: true, inline: true }"></div>
+<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown : { emoji: true, inline: true } | async"></div>
 ```
 
 This is the `MarkdownPipeOptions` parameters interface, those options are the same as the ones available for the `markdown` component:

diff --git a/angular.json b/angular.json
@@ -42,7 +42,6 @@
               "node_modules/katex/dist/katex.min.css"
             ],
             "scripts": [
-              "node_modules/marked/marked.min.js",
               "node_modules/prismjs/prism.js",
               "node_modules/prismjs/plugins/command-line/prism-command-line.js",
               "node_modules/prismjs/plugins/highlight-keywords/prism-highlight-keywords.min.js",

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -5,12 +5,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ClipboardOptions, MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
+import { gfmHeadingId } from 'marked-gfm-heading-id';
+import { CLIPBOARD_OPTIONS, MarkdownModule, MARKED_OPTIONS, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
 
 import { AnchorModule } from '@shared/anchor/anchor.module';
 import { AnchorService } from '@shared/anchor/anchor.service';
-import { ClipboardButtonModule } from '@shared/clipboard-button';
-import { ClipboardButtonComponent } from '@shared/clipboard-button/clipboard-button.component';
+import { ClipboardButtonComponent, ClipboardButtonModule } from '@shared/clipboard-button';
 import { SharedModule } from '@shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -20,7 +20,7 @@ export function markedOptionsFactory(anchorService: AnchorService): MarkedOption
 
   // 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) as string;
+    return MarkedRenderer.prototype.link.call(renderer, anchorService.normalizeExternalUrl(href), title, text);
   };
 
   return { renderer };
@@ -36,15 +36,14 @@ export function markedOptionsFactory(anchorService: AnchorService): MarkedOption
     MarkdownModule.forRoot({
       loader: HttpClient,
       markedOptions: {
-        provide: MarkedOptions,
+        provide: MARKED_OPTIONS,
         useFactory: markedOptionsFactory,
         deps: [AnchorService],
       },
+      markedExtensions: [gfmHeadingId()],
       clipboardOptions: {
-        provide: ClipboardOptions,
-        useValue: {
-          buttonComponent: ClipboardButtonComponent,
-        },
+        provide: CLIPBOARD_OPTIONS,
+        useValue: { buttonComponent: ClipboardButtonComponent },
       },
       sanitize: SecurityContext.NONE,
     }),

diff --git a/demo/src/app/bindings/bindings.component.html b/demo/src/app/bindings/bindings.component.html
@@ -55,7 +55,7 @@ <h2 id="variable-binding">Variable Binding</h2>
     <h2 id="pipe-usage">Pipe Usage</h2>
 
     <markdown>
-      Using `markdown` pipe to transform markdown to HTML allow you to chain pipe transformations and will update the DOM when value changes
+      Using `markdown` pipe to transform markdown to HTML allow you to chain pipe transformations and will update the DOM when value changes. It is important to note that, because the `marked` parsing method returns a `Promise`, it requires the use of the `async` pipe.
     </markdown>
 
     <markdown [src]="'app/bindings/remote/markdown-pipe.html'"></markdown>
@@ -69,7 +69,7 @@ <h2 id="pipe-usage">Pipe Usage</h2>
         <textarea matInput [(ngModel)]="typescriptMarkdown"></textarea>
       </mat-form-field>
 
-      <div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown" fxFlex.gt-sm="calc(50% - 8px)"></div>
+      <div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown | async" fxFlex.gt-sm="calc(50% - 8px)"></div>
     </div>
   </section>
 </app-scrollspy-nav-layout>
diff --git a/demo/src/app/bindings/bindings.component.ts b/demo/src/app/bindings/bindings.component.ts
@@ -16,7 +16,7 @@ export class BindingsComponent implements OnInit {
   markdown =
 `### Markdown example
 ---
-This is an **example** where we bind a variable to the \`markdown\` component that is also bind to a textarea.
+This is an **example** where we bind a variable to the \`markdown\` component that is also bound to a textarea.
 
 #### example.component.ts
 \`\`\`typescript

diff --git a/demo/src/app/bindings/remote/markdown-pipe.html b/demo/src/app/bindings/remote/markdown-pipe.html
@@ -1 +1 @@
-<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown"></div>
+<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown | async"></div>
diff --git a/demo/src/app/plugins/plugins.component.html b/demo/src/app/plugins/plugins.component.html
@@ -450,7 +450,7 @@ <h2 id="clipboard">Clipboard plugin</h2>
       MarkdownModule.forRoot(&#123;
         ...
         clipboardOptions: &#123;
-          provide: ClipboardOptions,
+          provide: CLIPBOARD_OPTIONS,
           useValue: &#123;
             buttonComponent: ClipboardButtonComponent,
           &#125;,

diff --git a/demo/src/app/plugins/plugins.component.ts b/demo/src/app/plugins/plugins.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ClipboardOptions, MermaidAPI } from 'ngx-markdown';
+import { CLIPBOARD_OPTIONS, MermaidAPI } from 'ngx-markdown';
 
 import { ClipboardButtonComponent } from '@shared/clipboard-button';
 
@@ -9,7 +9,7 @@ import { ClipboardButtonComponent } from '@shared/clipboard-button';
   templateUrl: './plugins.component.html',
   styleUrls: ['./plugins.component.scss'],
   providers: [
-    { provide: ClipboardOptions, useValue: {} },
+    { provide: CLIPBOARD_OPTIONS, useValue: {} },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/demo/src/app/plugins/plugins.module.ts b/demo/src/app/plugins/plugins.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatInputModule} from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MarkdownModule } from 'ngx-markdown';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div [innerHTML]="typescriptMarkdown \| language : 'typescript' \| markdown"></div>
		<div [innerHTML]="typescriptMarkdown \| language : 'typescript' \| markdown \| async"></div>