add provideMarkdocOptions

README.md

@@ -28,16 +28,13 @@ Import `Markdoc` into your component and use `<markdoc></markdoc>` in your templ
 
 ```ts
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Markdoc } from '@notiz/ngx-markdoc';
 
 @Component({
   selector: 'app-docs',
   standalone: true,
   imports: [Markdoc],
-  template: `
-    <markdoc #markdoc src="assets/md/docs/getting-started.md"></markdoc>
-  `,
+  template: ` <markdoc src="assets/md/docs/getting-started.md"></markdoc> `,
 })
 export class DocsComponent {}
 ```
@@ -59,3 +56,51 @@ export class DocsComponent {}
 ```html
 <markdoc src="assets/md/example.md"></markdoc>
 ```
+
+## Options
+
+Use `provideMarkdocOptions` to optionally pass a Markdoc configuration options.
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+
+import { provideMarkdocOptions } from '@notiz/ngx-markdoc';
+import { Config, Node, Tag } from '@markdoc/markdoc';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(),
+    provideMarkdocOptions({
+      config: {
+        tags: {
+          figure: {
+            selfClosing: true,
+            attributes: {
+              src: { type: String, required: true },
+              alt: { type: String, required: true },
+              caption: { type: String, required: true },
+            },
+            transform: (node: Node, config: Config) => {
+              const { src, alt, caption } = node.transformAttributes(config);
+              const imageTag = new Tag('img', { src, alt });
+              const captionTag = new Tag('figcaption', {}, [caption]);
+              return new Tag('figure', {}, [imageTag, captionTag]);
+            },
+          },
+        },
+      },
+    }),
+  ],
+};
+```
+
+Now you can use `{% figure %}` tag in your Markdown file
+
+```md
+{% figure src="https://images.unsplash.com/photo-1610296669228-602fa827fc1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1675&q=80" alt="Pelican nebulae mosaic" caption="Pelican nebulae mosaic" /%}
+```

projects/ngx-markdoc/src/lib/extensions/index.ts

@@ -1,3 +1,4 @@
+export * from './figure.markdoc';
 export * from './heading.markdoc';
 export * from './image.markdoc';
 export * from './toc.markdoc';

projects/ngx-markdoc/src/lib/markdoc.component.ts

@@ -21,7 +21,7 @@ import MarkdocRenderer, {
   Tag,
 } from '@markdoc/markdoc';
 import * as yaml from 'js-yaml';
-import { defaultConfig } from './config';
+import { MARKDOC_CONFIG } from './provide-markdoc-options';
 
 @Component({
   selector: 'markdoc, [markdoc]',
@@ -31,11 +31,25 @@ import { defaultConfig } from './config';
 export class Markdoc implements OnChanges, AfterViewInit {
   private element = inject(ElementRef<HTMLElement>);
   private http = inject(HttpClient);
+  private _defaultConfig = inject(MARKDOC_CONFIG, { optional: true });
+
+  private get defaultConfig(): Config {
+    return this._defaultConfig ?? {};
+  }
 
   @Input() content: string | undefined;
   @Input() src: string | undefined;
 
-  @Input() config: Config | undefined;
+  private _config: Config | undefined;
+  @Input()
+  public get config(): Config | undefined {
+    return this._config;
+  }
+  public set config(value: Config | undefined) {
+    this._config = value
+      ? { ...this.defaultConfig, ...value }
+      : this.defaultConfig;
+  }
 
   private _contentNode: RenderableTreeNode | undefined;
   /**
@@ -80,6 +94,10 @@ export class Markdoc implements OnChanges, AfterViewInit {
   }
   @Output() frontmatterChange = new EventEmitter<Record<string, any>>();
 
+  constructor() {
+    this.config = this.defaultConfig;
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (this.content != undefined) {
       this.render(this.content);
@@ -142,10 +160,9 @@ export class Markdoc implements OnChanges, AfterViewInit {
     const variables = { ...(config?.variables || {}), markdoc };
 
     const nodes = {
-      ...defaultConfig.nodes,
       ...(config?.nodes || {}),
     };
-    return { ...config, tags: { ...defaultConfig.tags }, nodes, variables };
+    return { ...config, tags: { ...config?.tags }, nodes, variables };
   }
 
   private loadFrontmatter(ast: Node) {

projects/ngx-markdoc/src/lib/provide-markdoc-options.ts

@@ -0,0 +1,29 @@
+import {
+  EnvironmentProviders,
+  InjectionToken,
+  makeEnvironmentProviders,
+} from '@angular/core';
+import { Config } from '@markdoc/markdoc';
+import { figure, heading, image } from './extensions';
+
+export const MARKDOC_CONFIG = new InjectionToken<Config>('MARKDOC_CONFIG');
+
+export interface MarkdocOptions {
+  config?: Config;
+}
+
+const defaultConfig: Config = {
+  nodes: { heading, image },
+  tags: { figure },
+};
+
+export function provideMarkdocOptions(
+  markdocOptions?: MarkdocOptions,
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: MARKDOC_CONFIG,
+      useValue: markdocOptions?.config ?? defaultConfig,
+    },
+  ]);
+}

projects/ngx-markdoc/src/public-api.ts

@@ -1,3 +1,3 @@
 export * from './lib/extensions';
-export * from './lib/config';
 export * from './lib/markdoc.component';
+export * from './lib/provide-markdoc-options';

src/app/app.config.ts

@@ -4,6 +4,14 @@ import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { provideClientHydration } from '@angular/platform-browser';
+import {
+  figure,
+  heading,
+  image,
+  provideMarkdocOptions,
+} from '@notiz/ngx-markdoc';
+import { Config, Node, Tag } from '@markdoc/markdoc';
+import { markdocExample } from './markdoc-example';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -15,5 +23,11 @@ export const appConfig: ApplicationConfig = {
     ),
     provideHttpClient(withFetch()),
     provideClientHydration(),
+    provideMarkdocOptions({
+      config: {
+        nodes: { heading, image },
+        tags: { figure, markdocExample },
+      },
+    }),
   ],
 };

src/app/markdoc-example.ts

@@ -0,0 +1,13 @@
+import { Schema, Tag } from '@markdoc/markdoc';
+
+export const markdocExample: Schema = {
+  render: 'pre',
+  attributes: {},
+  transform(node, config) {
+    console.log('test');
+    const attributes = node.transformAttributes(config);
+    const { content, language } = node.children[0].attributes;
+
+    return new Tag('pre', { ...attributes, language }, [content]);
+  },
+};

src/app/pages/landing.component.ts

@@ -1,12 +1,14 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { Markdoc } from '@notiz/ngx-markdoc';
 import { Prose } from '../components/prose.component';
 import { Hero } from '../components/hero.component';
 
 @Component({
   selector: 'app-landing',
+  standalone: true,
+  imports: [Hero, Prose, Markdoc, AsyncPipe],
   template: `
     <hero></hero>
 
@@ -34,13 +36,9 @@ import { Hero } from '../components/hero.component';
       </div>
     </div>
   `,
-  styles: [],
-  standalone: true,
-  imports: [Hero, Prose, Markdoc, AsyncPipe],
 })
-export class LandingComponent implements OnInit {
-  example$ = this.http.get('assets/md/example.md', { responseType: 'text' });
-  constructor(private http: HttpClient) {}
+export class LandingComponent {
+  private http = inject(HttpClient);
 
-  ngOnInit(): void {}
+  example$ = this.http.get('assets/md/example.md', { responseType: 'text' });
 }

src/assets/md/docs/installation.md

@@ -39,9 +39,7 @@ import { Markdoc } from '@notiz/ngx-markdoc';
   selector: 'app-docs',
   standalone: true,
   imports: [Markdoc],
-  template: `
-    <markdoc #markdoc src="assets/md/docs/getting-started.md"></markdoc>
-  `,
+  template: ` <markdoc src="assets/md/docs/getting-started.md"></markdoc> `,
 })
 export class DocsComponent {}
 ```
@@ -63,3 +61,55 @@ export class DocsComponent {}
 ```html
 <markdoc src="assets/md/example.md"></markdoc>
 ```
+
+## Options
+
+Use `provideMarkdocOptions` to optionally pass a Markdoc configuration options.
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+
+import { provideMarkdocOptions } from '@notiz/ngx-markdoc';
+import { Config, Node, Tag } from '@markdoc/markdoc';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(),
+    provideMarkdocOptions({
+      config: {
+        tags: {
+          figure: {
+            selfClosing: true,
+            attributes: {
+              src: { type: String, required: true },
+              alt: { type: String, required: true },
+              caption: { type: String, required: true },
+            },
+            transform: (node: Node, config: Config) => {
+              const { src, alt, caption } = node.transformAttributes(config);
+              const imageTag = new Tag('img', { src, alt });
+              const captionTag = new Tag('figcaption', {}, [caption]);
+              return new Tag('figure', {}, [imageTag, captionTag]);
+            },
+          },
+        },
+      },
+    }),
+  ],
+};
+```
+
+Now you can use `{% figure %}` tag in your Markdown file
+
+{% markdocExample %}
+
+```md
+{% figure src="https://images.unsplash.com/photo-1610296669228-602fa827fc1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1675&q=80" alt="Pelican nebulae mosaic" caption="Pelican nebulae mosaic" /%}
+```
+
+{% /markdocExample %}