@mzebley/mark-down-angular 1.2.2 → 1.2.3

package/README.md

@@ -1,5 +1,6 @@
 # mark↓ Angular Adapter
-*(published as `@mzebley/mark-down-angular`)*
+
+_(published as `@mzebley/mark-down-angular`)_
 
 Angular bindings for the [mark↓ core runtime](../core/README.md). This package wraps `SnippetClient` with Angular-friendly providers, services, and components so you can render Markdown snippets safely inside your application. For background on the monorepo, see the [root README](../../README.md).
 
@@ -29,14 +30,14 @@ You will also need a manifest generated by the [CLI](../cli/README.md).
 Provide a shared `SnippetClient` from your root bootstrap call or feature module:
 
 ```ts
-import { bootstrapApplication } from '@angular/platform-browser';
-import { provideSnippetClient } from '@mzebley/mark-down/angular';
+import { bootstrapApplication } from "@angular/platform-browser";
+import { provideSnippetClient } from "@mzebley/mark-down/angular";
 
 bootstrapApplication(AppComponent, {
   providers: [
     ...provideSnippetClient({
-      manifest: '/assets/content/snippets/manifest.json',
-      base: '/assets/content/snippets',
+      manifest: "/assets/content/snippets/manifest.json",
+      base: "/assets/content/snippets",
     }),
   ],
 });
@@ -46,12 +47,12 @@ bootstrapApplication(AppComponent, {
 
 ### Angular compatibility
 
-| Angular version | Status |
-| ---------------- | ------ |
-| 17.x             | ✅ Supported |
-| 18.x             | ✅ Supported |
-| 19.x             | ✅ Supported |
-| 20.x             | ✅ Supported |
+| Angular version | Status       |
+| --------------- | ------------ |
+| 17.x            | ✅ Supported |
+| 18.x            | ✅ Supported |
+| 19.x            | ✅ Supported |
+| 20.x            | ✅ Supported |
 
 The package declares peer dependency ranges `>=17 <21` so projects running any currently supported Angular major release can install without `--legacy-peer-deps`.
 
@@ -60,11 +61,11 @@ The package declares peer dependency ranges `>=17 <21` so projects running any c
 Inject `MarkdownSnippetService` into components or services to access Observables for snippets:
 
 ```ts
-import { Component, inject } from '@angular/core';
-import { MarkdownSnippetService } from '@mzebley/mark-down/angular';
+import { Component, inject } from "@angular/core";
+import { MarkdownSnippetService } from "@mzebley/mark-down/angular";
 
 @Component({
-  selector: 'docs-hero',
+  selector: "docs-hero",
   template: `
     <ng-container *ngIf="hero$ | async as hero">
       <h1>{{ hero.title }}</h1>
@@ -74,7 +75,7 @@ import { MarkdownSnippetService } from '@mzebley/mark-down/angular';
 })
 export class DocsHeroComponent {
   private readonly snippets = inject(MarkdownSnippetService);
-  readonly hero$ = this.snippets.get('getting-started-welcome');
+  readonly hero$ = this.snippets.get("getting-started-welcome");
 }
 ```
 
@@ -85,7 +86,10 @@ The service mirrors the core client APIs (`get`, `listAll`, `listByType`, `listB
 Render snippets declaratively with the bundled standalone component:
 
 ```html
-<snippet-view [slug]="'components-button'" (loaded)="onSnippetLoaded($event)"></snippet-view>
+<snippet-view
+  [slug]="'components-button'"
+  (loaded)="onSnippetLoaded($event)"
+></snippet-view>
 ```
 
 Features:
@@ -100,16 +104,17 @@ Features:
 When running in Angular Universal, supply a server-compatible fetch implementation:
 
 ```ts
-import fetch from 'node-fetch';
+import fetch from "node-fetch";
 
 provideSnippetClient({
-  manifest: () => import('../snippets-index.json'),
-  fetch: (url) => fetch(url).then((response) => {
-    if (!response.ok) {
-      throw new Error(`Request failed with status ${response.status}`);
-    }
-    return response;
-  }),
+  manifest: () => import("../snippets-index.json"),
+  fetch: (url) =>
+    fetch(url).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+      return response;
+    }),
 });
 ```
 

package/dist/index.cjs

@@ -84,6 +84,9 @@ var SnippetViewComponent = class {
         if (!snippet) {
           return null;
         }
+        if (typeof window === "undefined") {
+          return this.sanitizer.bypassSecurityTrustHtml(snippet.html);
+        }
         const sanitized = import_dompurify.default.sanitize(snippet.html);
         return this.sanitizer.bypassSecurityTrustHtml(sanitized);
       })

package/dist/index.js

@@ -59,6 +59,9 @@ var SnippetViewComponent = class {
         if (!snippet) {
           return null;
         }
+        if (typeof window === "undefined") {
+          return this.sanitizer.bypassSecurityTrustHtml(snippet.html);
+        }
         const sanitized = DOMPurify.sanitize(snippet.html);
         return this.sanitizer.bypassSecurityTrustHtml(sanitized);
       })

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@mzebley/mark-down-angular",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "mark↓ Angular Adapter",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,6 +26,9 @@
     "@mzebley/mark-down": "^1.2.2",
     "dompurify": "^3.0.9"
   },
+  "devDependencies": {
+    "@angular/platform-browser": ">=17 <21"
+  },
   "peerDependencies": {
     "@angular/common": ">=17 <21",
     "@angular/core": ">=17 <21",