@mzebley/mark-down-react 1.2.2 → 1.2.3

package/README.md

@@ -1,5 +1,6 @@
 # mark↓ React Adapter
-*(published as `@mzebley/mark-down-react`)*
+
+_(published as `@mzebley/mark-down-react`)_
 
 React bindings for the [mark↓ core runtime](../core/README.md). This package exposes context providers, hooks, and ready-to-use components that make it simple to render Markdown snippets safely. For a broader overview of the project, start with the [root README](../../README.md).
 
@@ -29,11 +30,11 @@ Generate a manifest with the [CLI](../cli/README.md) before rendering snippets.
 Wrap your app with the `SnippetProvider` so that hooks and components can access a shared client instance:
 
 ```tsx
-import { SnippetProvider } from '@mzebley/mark-down-react';
+import { SnippetProvider } from "@mzebley/mark-down-react";
 
 export function App({ children }: { children: React.ReactNode }) {
   return (
-    <SnippetProvider options={{ manifest: '/snippets-index.json' }}>
+    <SnippetProvider options={{ manifest: "/snippets-index.json" }}>
       {children}
     </SnippetProvider>
   );
@@ -49,10 +50,10 @@ export function App({ children }: { children: React.ReactNode }) {
 Fetch a single snippet and track loading / error state:
 
 ```tsx
-import { useSnippet } from '@mzebley/mark-down-react';
+import { useSnippet } from "@mzebley/mark-down-react";
 
 export function Hero() {
-  const { snippet, loading, error } = useSnippet('getting-started-welcome');
+  const { snippet, loading, error } = useSnippet("getting-started-welcome");
 
   if (loading) return <p>Loading…</p>;
   if (error) return <p role="alert">Failed to load snippet.</p>;
@@ -67,13 +68,13 @@ export function Hero() {
 Render snippets declaratively with built-in loading and error fallbacks:
 
 ```tsx
-import { SnippetView } from '@mzebley/mark-down-react';
+import { SnippetView } from "@mzebley/mark-down-react";
 
 <SnippetView
   slug="components-button"
   loadingFallback={<p>Loading…</p>}
   errorFallback={<p role="alert">Unable to load snippet.</p>}
-  onLoaded={(snippet) => console.log('Rendered', snippet.slug)}
+  onLoaded={(snippet) => console.log("Rendered", snippet.slug)}
 />;
 ```
 
@@ -88,18 +89,19 @@ Features:
 When using Next.js, Remix, or another SSR framework, provide a server-safe fetch implementation:
 
 ```tsx
-import fetch from 'node-fetch';
-import { SnippetProvider } from '@mzebley/mark-down-react';
+import fetch from "node-fetch";
+import { SnippetProvider } from "@mzebley/mark-down-react";
 
 <SnippetProvider
   options={{
-    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;
+      }),
   }}
 >
   {children}

package/dist/index.cjs

@@ -42,7 +42,11 @@ var import_react = require("react");
 var import_mark_down = require("@mzebley/mark-down");
 var import_jsx_runtime = require("react/jsx-runtime");
 var SnippetClientContext = (0, import_react.createContext)(null);
-function SnippetProvider({ client, options, children }) {
+function SnippetProvider({
+  client,
+  options,
+  children
+}) {
   const value = (0, import_react.useMemo)(() => {
     if (client) {
       return client;
@@ -102,7 +106,15 @@ function SnippetView({
   onLoaded
 }) {
   const state = useSnippet(slug);
-  const safeHtml = (0, import_react3.useMemo)(() => state.snippet ? import_dompurify.default.sanitize(state.snippet.html) : void 0, [state.snippet]);
+  const safeHtml = (0, import_react3.useMemo)(() => {
+    if (!state.snippet) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return state.snippet.html;
+    }
+    return import_dompurify.default.sanitize(state.snippet.html);
+  }, [state.snippet]);
   (0, import_react3.useEffect)(() => {
     onLoaded?.(state.snippet);
   }, [state.snippet, onLoaded]);
@@ -115,7 +127,13 @@ function SnippetView({
   if (!state.snippet) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: "Snippet not found" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, dangerouslySetInnerHTML: { __html: safeHtml ?? "" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: safeHtml ?? "" }
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -7,7 +7,7 @@ interface SnippetProviderProps {
     options?: SnippetClientOptions;
     children: ReactNode;
 }
-declare function SnippetProvider({ client, options, children }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
+declare function SnippetProvider({ client, options, children, }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSnippetClient(): SnippetClient;
 
 interface UseSnippetResult {
@@ -24,6 +24,6 @@ interface SnippetViewProps {
     errorFallback?: ReactNode;
     onLoaded?: (snippet?: Snippet) => void;
 }
-declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded }: SnippetViewProps): react_jsx_runtime.JSX.Element;
+declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded, }: SnippetViewProps): react_jsx_runtime.JSX.Element;
 
 export { SnippetProvider, type SnippetProviderProps, SnippetView, type SnippetViewProps, type UseSnippetResult, useSnippet, useSnippetClient };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ interface SnippetProviderProps {
     options?: SnippetClientOptions;
     children: ReactNode;
 }
-declare function SnippetProvider({ client, options, children }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
+declare function SnippetProvider({ client, options, children, }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSnippetClient(): SnippetClient;
 
 interface UseSnippetResult {
@@ -24,6 +24,6 @@ interface SnippetViewProps {
     errorFallback?: ReactNode;
     onLoaded?: (snippet?: Snippet) => void;
 }
-declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded }: SnippetViewProps): react_jsx_runtime.JSX.Element;
+declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded, }: SnippetViewProps): react_jsx_runtime.JSX.Element;
 
 export { SnippetProvider, type SnippetProviderProps, SnippetView, type SnippetViewProps, type UseSnippetResult, useSnippet, useSnippetClient };

package/dist/index.js

@@ -3,7 +3,11 @@ import { createContext, useContext, useMemo } from "react";
 import { SnippetClient } from "@mzebley/mark-down";
 import { jsx } from "react/jsx-runtime";
 var SnippetClientContext = createContext(null);
-function SnippetProvider({ client, options, children }) {
+function SnippetProvider({
+  client,
+  options,
+  children
+}) {
   const value = useMemo(() => {
     if (client) {
       return client;
@@ -63,7 +67,15 @@ function SnippetView({
   onLoaded
 }) {
   const state = useSnippet(slug);
-  const safeHtml = useMemo2(() => state.snippet ? DOMPurify.sanitize(state.snippet.html) : void 0, [state.snippet]);
+  const safeHtml = useMemo2(() => {
+    if (!state.snippet) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return state.snippet.html;
+    }
+    return DOMPurify.sanitize(state.snippet.html);
+  }, [state.snippet]);
   useEffect2(() => {
     onLoaded?.(state.snippet);
   }, [state.snippet, onLoaded]);
@@ -76,7 +88,13 @@ function SnippetView({
   if (!state.snippet) {
     return /* @__PURE__ */ jsx2("div", { className, children: "Snippet not found" });
   }
-  return /* @__PURE__ */ jsx2("div", { className, dangerouslySetInnerHTML: { __html: safeHtml ?? "" } });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: safeHtml ?? "" }
+    }
+  );
 }
 export {
   SnippetProvider,

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@mzebley/mark-down-react",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "mark↓ React Adapter",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },