@riebeckite/plugin-markmap 0.0.31 → 0.0.33

package/README.md

@@ -48,6 +48,19 @@ becomes the tree. Content other than headings is ignored.
 
 The caption comes from the code-block `title`.
 
+## Live example
+
+~~~markmap
+# Project
+
+## Design
+
+### Notation
+### Rendering
+
+## Delivery
+~~~
+
 ## How it renders
 
 A ` ```markmap ` block becomes a `figure.rb-markmap`:
@@ -121,7 +134,7 @@ point for that purpose.
 
 ## Main exports
 
-- `markmap(options?)`: create the plugin (`markmapPlugin` is an alias)
+- `markmap(options?)`: create the plugin (`markmap` is an alias)
 - `initMarkmap`: initialize client-side rendering
 - `parseMarkmapSource`: parse the standard notation into a tree
 - `describeMarkmapTree`: derive an accessible label from a tree

package/README_ja.md

@@ -2,11 +2,11 @@
 
 <!-- Generated from docs/docs/plugins/markmap.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
 
-` ```markmap ` コードブロックを、Markdown の見出しから組み立てるマインドマップとして表示するプラグインです。マインドマップはブラウザ側で `markmap-lib` と `markmap-view` により描画し、これらのライブラリは図があるときだけ CDN から読み込みます。
+` ```markmap ` コードブロックを、Markdown の見出しから組み立てるマインドマップとして表示するプラグインです。マインドマップはブラウザ側で `markmap-lib` と `markmap-view` により描画します。これらのライブラリは図があるときだけ CDN から読み込みます。
 
 [English](./README.md)
 
-## 設定する
+## 使い方
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -28,7 +28,7 @@ export default defineConfig({
 
 ## 記法
 
-コードブロックの本文は通常の Markdown です。見出しがノードになり、見出しの階層が木構造になります。見出し以外の内容は無視します。
+コードブロックの本文は通常の Markdown です。見出しがノードになり、見出しの階層が木構造になります。見出し以外の内容は無視されます。
 
 ````markdown
 ```markmap
@@ -45,7 +45,20 @@ export default defineConfig({
 
 キャプションにはコードブロックの `title` を使います。
 
-## どのように描画されるか
+## 実行例
+
+~~~markmap
+# Project
+
+## Design
+
+### Notation
+### Rendering
+
+## Delivery
+~~~
+
+## 描画の仕組み
 
 ` ```markmap ` のコードブロックは `figure.rb-markmap` に置き換わります。
 
@@ -69,15 +82,15 @@ Markdown の見出しを 1 つも含まないコードブロックは置き換
 | `className` | `"rb-markmap"` | figure に付ける基準クラス |
 | `language` | `"markmap"` | 対象にするコードブロックの言語 |
 | `fallback` | `true` | 元の Markdown を表示する `details` を描画する |
-| `colorFreezeLevel` |：| ノードの色を固定する深さ |
+| `colorFreezeLevel` | — | ノードの色を固定する深さ |
 
 ## クライアント側の描画
 
-クライアントの初期化コードは静的なので、プラグインのオプションは受け取りません。`height` と `colorFreezeLevel` は figure の `data-markmap-*` 属性に埋め込まれ、`initMarkmap` がそこから読み取ります。
+クライアントの初期化コードは固定で、プラグインのオプションを受け取りません。`height` と `colorFreezeLevel` は figure の `data-markmap-*` 属性に埋め込まれ、`initMarkmap` がそこから読み取ります。
 
-`markmap-lib` と `markmap-view` は計算された import 指定子で jsDelivr から取得するため、ホストのクライアントバンドルには含まれません。`markmap-view` は依存として `d3` を読み込みます。ライブラリを遅延して読み込むので、JavaScript を無効にしていてもページは表示され、元の Markdown はフォールバックの `details` から読めます。
+`markmap-lib` と `markmap-view` は動的に組み立てた import 指定子で jsDelivr から取得するため、ホスト側のクライアントバンドルには含まれません。`markmap-view` は依存として `d3` を読み込みます。遅延読み込みなので、JavaScript を無効にしていてもページは表示され、元の Markdown はフォールバックの `details` から読めます。
 
-## 入力記法の継ぎ目（notation seam）
+## 入力記法の拡張点
 
 コードブロックの本文は、`src/parse.ts` にある単一の純粋関数でマインドマップの木に変換します。
 
@@ -85,9 +98,9 @@ Markdown の見出しを 1 つも含まないコードブロックは置き換
 parseMarkmapSource(source: string): MarkmapNode | null
 ```
 
-`MarkmapNode` は記法に依存しない木（`{ content, children, payload? }`）です。現在は標準の Markdown 見出し記法だけを実装しています。将来別の入力記法（たとえば "ExcaliMindMap" 風のアウトライン）を追加するときは、同じ `MarkmapNode` を返すパーサーを実装するだけです。figure の生成と描画の経路は記法を解析しないため、変更する必要はありません。`parseMarkmapSource` はそのためにパッケージのエントリーポイントから公開しています。
+`MarkmapNode` は記法に依存しない木（`{ content, children, payload? }`）です。現在は標準の Markdown 見出し記法だけを実装しています。将来別の入力記法（たとえば "ExcaliMindMap" 風のアウトライン）を追加するときは、同じ `MarkmapNode` を返すパーサーを実装するだけです。figure の生成と描画の処理は記法を解析しないため、変更する必要はありません。`parseMarkmapSource` はそのためにパッケージのエントリーポイントから公開しています。
 
-## 出力のフック
+## 出力フック
 
 - `figure[data-markmap]`: 状態（`pending` / `rendered` / `error`）
 - `figure[data-markmap-source]`: 元の Markdown
@@ -97,7 +110,7 @@ parseMarkmapSource(source: string): MarkmapNode | null
 
 ## 主なエクスポート
 
-- `markmap(options?)`: プラグインを作成する（`markmapPlugin` は別名）
+- `markmap(options?)`: プラグインを作成する（`markmap` は別名）
 - `initMarkmap`: クライアント側の描画を初期化する
 - `parseMarkmapSource`: 標準記法を木に変換する
 - `describeMarkmapTree`: 木からアクセシブルなラベルを作る

package/dist/index.d.ts

@@ -8,5 +8,3 @@ export type { MarkmapClientOptions, MarkmapNode, MarkmapOptions, MarkmapResolved
  * `markmap-view` from the CDN only when a figure is present.
  */
 export declare function markmap(options?: MarkmapOptions): import("@riebeckite/core").RiebeckitePlugin<MarkmapOptions>;
-/** Alias kept for symmetry with the other plugin factories. */
-export declare const markmapPlugin: typeof markmap;

package/dist/index.js

@@ -5,6 +5,22 @@ import {
   definePlugin
 } from "@riebeckite/core";
 
+// src/hast.ts
+import {
+  element as sharedElement,
+  getStringProperty as sharedGetStringProperty,
+  getTextContent as sharedGetTextContent,
+  hasClass as sharedHasClass,
+  text as sharedText,
+  visitElements as sharedVisitElements
+} from "@riebeckite/diagram";
+var element = sharedElement;
+var text = sharedText;
+var getTextContent = sharedGetTextContent;
+var getStringProperty = sharedGetStringProperty;
+var hasClass = sharedHasClass;
+var visitElements = sharedVisitElements;
+
 // src/options.ts
 var DEFAULT_MARKMAP_CLASS_NAME = "rb-markmap";
 var DEFAULT_MARKMAP_HEIGHT = 320;
@@ -129,10 +145,14 @@ function buildFigure(input) {
   }
   if (input.fallback) {
     children.push(
-      element("details", { className: `${base}__fallback` }, [
-        element("summary", {}, [text("Markdown source")]),
-        element("pre", {}, [element("code", {}, [text(input.source)])])
-      ])
+      element(
+        "details",
+        { className: `${base}__fallback rb-source-fallback` },
+        [
+          element("summary", {}, [text("Markdown source")]),
+          element("pre", {}, [element("code", {}, [text(input.source)])])
+        ]
+      )
     );
   }
   return element(
@@ -172,50 +192,6 @@ function reportDiagnostic(file, message) {
     });
   }
 }
-function visitElements(node, visitor, parent, index) {
-  if (isElementNode(node)) visitor(node, parent, index);
-  for (const [childIndex, child] of [...getChildren(node)].entries()) {
-    visitElements(
-      child,
-      visitor,
-      hasChildren(node) ? node : parent,
-      childIndex
-    );
-  }
-}
-function element(tagName, properties = {}, children = []) {
-  return { type: "element", tagName, properties, children };
-}
-function text(value) {
-  return { type: "text", value };
-}
-function getTextContent(node) {
-  if (node.type === "text" && "value" in node && typeof node.value === "string") {
-    return node.value;
-  }
-  return getChildren(node).map(getTextContent).join("");
-}
-function getStringProperty(node, key) {
-  const value = node.properties?.[key];
-  if (typeof value === "string") return value;
-  if (Array.isArray(value)) return value.join(" ");
-  return null;
-}
-function hasClass(node, className) {
-  const value = node.properties?.className;
-  const classes = Array.isArray(value) ? value.map(String) : typeof value === "string" ? value.split(/\s+/) : [];
-  return classes.includes(className);
-}
-function isElementNode(node) {
-  return node.type === "element";
-}
-function hasChildren(node) {
-  return Array.isArray(node.children);
-}
-function getChildren(node) {
-  const children = node.children;
-  return Array.isArray(children) ? children : [];
-}
 
 // index.ts
 function markmap(options = {}) {
@@ -243,7 +219,6 @@ function markmap(options = {}) {
     ]
   });
 }
-var markmapPlugin = markmap;
 function validateMarkmapOptions(options) {
   if (!options) return [];
   const issues = [];
@@ -272,7 +247,6 @@ function validateMarkmapOptions(options) {
 export {
   describeMarkmapTree,
   markmap,
-  markmapPlugin,
   parseMarkmapSource,
   resolveMarkmapOptions
 };

package/dist/src/hast.d.ts

@@ -0,0 +1,7 @@
+import type { ElementNode, HastNode, ParentNode, TextNode } from "./types.js";
+export declare const element: (tagName: string, properties?: Record<string, unknown>, children?: HastNode[]) => ElementNode;
+export declare const text: (value: string) => TextNode;
+export declare const getTextContent: (node: HastNode) => string;
+export declare const getStringProperty: (node: ElementNode, key: string) => string | null;
+export declare const hasClass: (node: ElementNode, className: string) => boolean;
+export declare const visitElements: (node: HastNode, visitor: (node: ElementNode, parent?: ParentNode, index?: number) => void, parent?: ParentNode, index?: number) => void;

package/dist/src/options.d.ts

@@ -1,10 +1,4 @@
 import type { MarkmapOptions, MarkmapResolvedOptions } from "./types.js";
-/** Default base class for the generated figure. */
-export declare const DEFAULT_MARKMAP_CLASS_NAME = "rb-markmap";
-/** Default canvas height in pixels. */
-export declare const DEFAULT_MARKMAP_HEIGHT = 320;
-/** Default fenced-code language. */
-export declare const DEFAULT_MARKMAP_LANGUAGE = "markmap";
 /**
  * Applies defaults to the user-provided options.
  *

package/dist/src/types.d.ts

@@ -104,7 +104,7 @@ export type TextNode = {
     type: "text";
     value: string;
 };
-export type RawNode = {
+type RawNode = {
     type: "raw";
     value: string;
 };
@@ -112,3 +112,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
     type: string;
     [key: string]: unknown;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-markmap",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,9 +21,10 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
+    "@riebeckite/core": "0.0.33",
+    "@riebeckite/diagram": "0.0.33",
     "markmap-lib": "^0.18.12",
-    "markmap-view": "^0.18.12",
-    "@riebeckite/core": "0.0.31"
+    "markmap-view": "^0.18.12"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -34,26 +34,6 @@
   max-width: 100%;
 }
 
-.rb-markmap__fallback {
-  border-top: 1px solid var(--rb-markmap-rule);
-  color: var(--rb-markmap-muted);
-  font-size: 0.8125rem;
-}
-
-.rb-markmap__fallback summary {
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-}
-
-.rb-markmap__fallback pre {
-  overflow: auto;
-  margin: 0 1rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--rb-markmap-rule);
-  color: var(--rb-markmap-ink);
-  background: color-mix(in srgb, var(--rb-markmap-ink) 6%, transparent);
-}
-
 .rb-markmap[data-markmap="error"] .rb-markmap__canvas:empty::before,
 .rb-markmap[data-markmap="pending"] .rb-markmap__canvas:empty::before {
   content: "Mind map could not be rendered.";