@cocoar/vue-markdown-mermaid 2.14.0

package/README.md

@@ -0,0 +1,84 @@
+# @cocoar/vue-markdown-mermaid
+
+The thin adapter that plugs [`@cocoar/vue-mermaid`](../mermaid)'s diagram renderer
+into [`@cocoar/vue-markdown`](../markdown) as a **fenced-code-block renderer**, so
+` ```mermaid ` blocks render as diagrams.
+
+This package is **only** the markdown integration (the fence registry). The
+diagram component, its theming and zoom/pan live in the standalone,
+markdown-free `@cocoar/vue-mermaid` — import `CoarMermaidDiagram` from there to
+render diagrams outside of markdown.
+
+The markdown packages have **no dependency on Mermaid**. Installing this package
+and registering it is the opt-in; a consumer that doesn't opt in still sees a
+readable, syntax-highlighted code block. The markdown stays portable.
+
+## Install
+
+```bash
+pnpm add @cocoar/vue-markdown-mermaid
+```
+
+`vue` and `@cocoar/vue-markdown` are peer dependencies; `@cocoar/vue-mermaid`
+(which carries Mermaid) comes along as a regular dependency. Import its
+stylesheet once:
+
+```ts
+import '@cocoar/vue-mermaid/styles';
+```
+
+## Usage
+
+Pass the ready-made registry fragment to the viewer's `fenceRenderers` prop:
+
+```vue
+<template>
+  <CoarMarkdown :doc="doc" :fence-renderers="mermaidFenceRenderers" />
+</template>
+
+<script setup lang="ts">
+import { parse } from '@cocoar/vue-markdown-core';
+import { CoarMarkdown } from '@cocoar/vue-markdown';
+import { mermaidFenceRenderers } from '@cocoar/vue-markdown-mermaid';
+
+const doc = parse(source);
+</script>
+```
+
+An app-wide default works too — `app.provide(MARKDOWN_FENCE_RENDERERS_KEY, mermaidFenceRenderers)`.
+A per-instance `fence-renderers` prop wins over the provided value.
+
+## Zoom & pan
+
+The fence-renderer contract only passes `{ code, language }` to a component, so
+per-diagram options are configured on the **registry** via
+`createMermaidFenceRenderers`:
+
+```ts
+import { createMermaidFenceRenderers } from '@cocoar/vue-markdown-mermaid';
+
+const fenceRenderers = createMermaidFenceRenderers({ zoomable: true });
+```
+
+See [`@cocoar/vue-mermaid`](../mermaid) for the zoom/pan controls and behaviour.
+
+## Registering your own fence renderer
+
+The registry is open — any language can map to any component. Register your own
+alongside Mermaid, or replace it:
+
+```ts
+import type { FenceRegistry } from '@cocoar/vue-markdown';
+import { mermaidFenceRenderers } from '@cocoar/vue-markdown-mermaid';
+import MyGraphviz from './MyGraphviz.vue';
+
+const fenceRenderers: FenceRegistry = { ...mermaidFenceRenderers, dot: MyGraphviz };
+```
+
+## Exports
+
+| Export | Description |
+| --- | --- |
+| `mermaidFenceRenderers` | Ready-to-spread `FenceRegistry` fragment (`{ mermaid }`), no zoom. |
+| `createMermaidFenceRenderers(options?)` | Build a registry with options baked in — `{ zoomable }`. |
+| `MermaidFenceOptions` | The options type. |

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@cocoar/vue-markdown-mermaid` — the thin adapter that plugs
+ * `@cocoar/vue-mermaid`'s diagram renderer into `@cocoar/vue-markdown` as a
+ * fenced-code-block renderer, so ` ```mermaid ` blocks render as diagrams.
+ *
+ * This package is ONLY the markdown integration (the fence registry). The
+ * diagram component itself, its theming and zoom/pan live in the standalone,
+ * markdown-free `@cocoar/vue-mermaid` — import `CoarMermaidDiagram` from there to
+ * render diagrams outside of markdown.
+ *
+ * Registering it is the opt-in; a fence with no registered renderer stays a
+ * readable code block, so the markdown stays portable.
+ */
+export { createMermaidFenceRenderers, mermaidFenceRenderers, type MermaidFenceOptions, } from './registry';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EACL,2BAA2B,EAC3B,qBAAqB,EACrB,KAAK,mBAAmB,GACzB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,28 @@
+import { defineComponent as e, h as t } from "vue";
+import { CoarMermaidDiagram as n } from "@cocoar/vue-mermaid";
+//#region src/registry.ts
+function r(r = {}) {
+	return { mermaid: e({
+		name: "CoarMermaidFence",
+		props: {
+			code: {
+				type: String,
+				required: !0
+			},
+			language: {
+				type: String,
+				default: "mermaid"
+			}
+		},
+		setup(e) {
+			return () => t(n, {
+				code: e.code,
+				language: e.language,
+				zoomable: r.zoomable ?? !1
+			});
+		}
+	}) };
+}
+var i = r();
+//#endregion
+export { r as createMermaidFenceRenderers, i as mermaidFenceRenderers };

package/dist/registry.d.ts

@@ -0,0 +1,14 @@
+import { FenceRegistry } from '@cocoar/vue-markdown';
+export interface MermaidFenceOptions {
+    /** Enable wheel-zoom + drag-pan + double-click-reset on every diagram. */
+    zoomable?: boolean;
+}
+/**
+ * Build a `FenceRegistry` mapping the `mermaid` language to a diagram renderer
+ * configured with `options`. The wrapper forwards the fence's `{ code, language }`
+ * and applies the baked-in options.
+ */
+export declare function createMermaidFenceRenderers(options?: MermaidFenceOptions): FenceRegistry;
+/** Zero-config default: renders ```mermaid blocks, no pan/zoom. */
+export declare const mermaidFenceRenderers: FenceRegistry;
+//# sourceMappingURL=registry.d.ts.map

package/dist/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,mBAAwB,GAAG,aAAa,CAkB5F;AAED,mEAAmE;AACnE,eAAO,MAAM,qBAAqB,EAAE,aAA6C,CAAC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@cocoar/vue-markdown-mermaid",
+  "version": "2.14.0",
+  "description": "Thin adapter that registers @cocoar/vue-mermaid as a `mermaid` fenced-code-block renderer for @cocoar/vue-markdown, so ```mermaid blocks render as diagrams. The markdown packages have no dependency on Mermaid — installing this package is the opt-in.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cocoar-dev/cocoar-ui-vue.git",
+    "directory": "packages/markdown-mermaid"
+  },
+  "homepage": "https://docs.cocoar.dev/cocoar-ui-vue/",
+  "bugs": "https://github.com/cocoar-dev/cocoar-ui-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "markdown",
+    "mermaid",
+    "diagram"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@cocoar/vue-mermaid": "2.14.0"
+  },
+  "peerDependencies": {
+    "@cocoar/vue-markdown": "2.14.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@cocoar/vue-markdown": "workspace:*",
+    "vue": "^3.5.32"
+  }
+}