chore: migrate to standalone

.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"
@@ -68,6 +69,7 @@
             "order": "asc",
             "caseInsensitive": true
           },
+          "newlines-between": "never",
           "pathGroups": [
             {
               "pattern": "@*/**",

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
 ```
 
 ### Syntax highlight
@@ -588,8 +577,6 @@ MarkdownModule.forRoot({
       gfm: true,
       breaks: false,
       pedantic: false,
-      smartLists: true,
-      smartypants: false,
     },
   },
 }),
@@ -617,8 +604,6 @@ export function markedOptionsFactory(): MarkedOptions {
     gfm: true,
     breaks: false,
     pedantic: false,
-    smartLists: true,
-    smartypants: false,
   };
 }
 
@@ -632,6 +617,29 @@ MarkdownModule.forRoot({
 }),
 ```
 
+
+### provide marked extensions
+
+there is an Angular token `MARKDOWN_EXTENSIONS` that you can provide with array of extensions to be used
+
+usage example for `app.config.ts` (but it's the same for `NgModule` or `Component` providers)
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { gfmHeadingId } from 'marked-gfm-heading-id';
+import { MARKDOWN_EXTENSIONS } from 'ngx-markdown';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // other providers
+    {
+      provide: MARKDOWN_EXTENSIONS,
+      useValue: [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 +668,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 +679,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 +709,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>

demo/src/app/app-routes.ts

@@ -0,0 +1,38 @@
+import { Routes } from '@angular/router';
+
+export const appRoutes: Routes = [
+  {
+    path: 'get-started',
+    loadComponent: () => import('./get-started/get-started.component'),
+    data: { label: 'Get Started' },
+  },
+  {
+    path: 'cheat-sheet',
+    loadComponent: () => import('./cheat-sheet/cheat-sheet.component'),
+    data: { label: 'Cheat Sheet' },
+  },
+  {
+    path: 'syntax-highlight',
+    loadComponent: () => import('./syntax-highlight/syntax-highlight.component'),
+    data: { label: 'Syntax Highlight' },
+  },
+  {
+    path: 'bindings',
+    loadComponent: () => import('./bindings/bindings.component'),
+    data: { label: 'Bindings' },
+  },
+  {
+    path: 'plugins',
+    loadComponent: () => import('./plugins/plugins.component'),
+    data: { label: 'Plugins' },
+  },
+  {
+    path: 're-render',
+    loadComponent: () => import('./rerender/rerender.component'),
+    data: { label: 'Re-render' },
+  },
+  {
+    path: '**',
+    redirectTo: 'get-started',
+  },
+];

demo/src/app/app.component.ts

@@ -1,7 +1,11 @@
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, OnInit, ViewChild } from '@angular/core';
-import { Route, Router, RouterOutlet } from '@angular/router';
-
+import { FlexModule } from '@angular/flex-layout/flex';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Route, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { AnchorService } from '@shared/anchor/anchor.service';
 import { ROUTE_ANIMATION } from './app.animation';
 import { DEFAULT_THEME, LOCAL_STORAGE_THEME_KEY } from './app.constant';
@@ -13,6 +17,18 @@ import { isTheme, Theme } from './app.models';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatToolbarModule,
+    FlexModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTabsModule,
+    NgFor,
+    RouterLinkActive,
+    RouterLink,
+    RouterOutlet,
+  ],
 })
 export class AppComponent implements OnInit {
 

demo/src/app/app.config.ts

@@ -0,0 +1,37 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { ApplicationConfig, SecurityContext } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, withInMemoryScrolling } from '@angular/router';
+import { gfmHeadingId } from 'marked-gfm-heading-id';
+import { ClipboardOptions, MARKDOWN_EXTENSIONS, MarkedOptions } from 'ngx-markdown';
+import { provideMarkdown } from 'ngx-markdown';
+import { markedOptionsFactory } from '@app/marked-options-factory';
+import { AnchorService } from '@shared/anchor/anchor.service';
+import { ClipboardButtonComponent } from '@shared/clipboard-button';
+import { appRoutes } from './app-routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideMarkdown({
+      markedOptions: {
+        provide: MarkedOptions,
+        useFactory: markedOptionsFactory,
+        deps: [AnchorService],
+      },
+      clipboardOptions: {
+        provide: ClipboardOptions,
+        useValue: {
+          buttonComponent: ClipboardButtonComponent,
+        },
+      },
+      sanitize: SecurityContext.NONE,
+    }),
+    provideRouter(appRoutes, withInMemoryScrolling({scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled'})),
+    {
+      provide: MARKDOWN_EXTENSIONS,
+      useValue: [gfmHeadingId()],
+    },
+    provideAnimations(),
+    provideHttpClient(withInterceptorsFromDi()),
+  ],
+};

demo/src/app/bindings/bindings.component.ts

@@ -1,12 +1,31 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout/flex';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { LanguagePipe } from '../../../../lib/src/language.pipe';
+import { MarkdownComponent } from '../../../../lib/src/markdown.component';
+import { MarkdownPipe } from '../../../../lib/src/markdown.pipe';
+import { ScrollspyNavLayoutComponent } from '../shared/scrollspy-nav-layout/scrollspy-nav-layout.component';
 
 @Component({
-  selector: 'app-bindings',
-  templateUrl: './bindings.component.html',
-  styleUrls: ['./bindings.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-bindings',
+    templateUrl: './bindings.component.html',
+    styleUrls: ['./bindings.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        ScrollspyNavLayoutComponent,
+        MarkdownComponent,
+        FlexModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        LanguagePipe,
+        MarkdownPipe,
+    ],
 })
-export class BindingsComponent implements OnInit {
+export default class BindingsComponent implements OnInit {
 
   // remote url
   demoPython = require('raw-loader!./remote/demo.py').default;