@riebeckite/plugin-markmap 0.0.32 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -1
- package/README_ja.md +24 -11
- package/dist/index.d.ts +0 -2
- package/dist/index.js +8 -6
- package/dist/src/options.d.ts +0 -6
- package/dist/src/types.d.ts +2 -1
- package/package.json +4 -4
- package/style.css +0 -20
package/README.md
CHANGED
|
@@ -48,6 +48,19 @@ becomes the tree. Content other than headings is ignored.
|
|
|
48
48
|
|
|
49
49
|
The caption comes from the code-block `title`.
|
|
50
50
|
|
|
51
|
+
## Live example
|
|
52
|
+
|
|
53
|
+
~~~markmap
|
|
54
|
+
# Project
|
|
55
|
+
|
|
56
|
+
## Design
|
|
57
|
+
|
|
58
|
+
### Notation
|
|
59
|
+
### Rendering
|
|
60
|
+
|
|
61
|
+
## Delivery
|
|
62
|
+
~~~
|
|
63
|
+
|
|
51
64
|
## How it renders
|
|
52
65
|
|
|
53
66
|
A ` ```markmap ` block becomes a `figure.rb-markmap`:
|
|
@@ -121,7 +134,7 @@ point for that purpose.
|
|
|
121
134
|
|
|
122
135
|
## Main exports
|
|
123
136
|
|
|
124
|
-
- `markmap(options?)`: create the plugin (`
|
|
137
|
+
- `markmap(options?)`: create the plugin (`markmap` is an alias)
|
|
125
138
|
- `initMarkmap`: initialize client-side rendering
|
|
126
139
|
- `parseMarkmapSource`: parse the standard notation into a tree
|
|
127
140
|
- `describeMarkmapTree`: derive an accessible label from a tree
|
package/README_ja.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
<!-- Generated from docs/docs/plugins/markmap.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
|
|
4
4
|
|
|
5
|
-
` ```markmap ` コードブロックを、Markdown の見出しから組み立てるマインドマップとして表示するプラグインです。マインドマップはブラウザ側で `markmap-lib` と `markmap-view`
|
|
5
|
+
` ```markmap ` コードブロックを、Markdown の見出しから組み立てるマインドマップとして表示するプラグインです。マインドマップはブラウザ側で `markmap-lib` と `markmap-view` により描画します。これらのライブラリは図があるときだけ CDN から読み込みます。
|
|
6
6
|
|
|
7
7
|
[English](./README.md)
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## 使い方
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
import { defineConfig } from "@riebeckite/core";
|
|
@@ -28,7 +28,7 @@ export default defineConfig({
|
|
|
28
28
|
|
|
29
29
|
## 記法
|
|
30
30
|
|
|
31
|
-
コードブロックの本文は通常の Markdown
|
|
31
|
+
コードブロックの本文は通常の Markdown です。見出しがノードになり、見出しの階層が木構造になります。見出し以外の内容は無視されます。
|
|
32
32
|
|
|
33
33
|
````markdown
|
|
34
34
|
```markmap
|
|
@@ -45,7 +45,20 @@ export default defineConfig({
|
|
|
45
45
|
|
|
46
46
|
キャプションにはコードブロックの `title` を使います。
|
|
47
47
|
|
|
48
|
-
##
|
|
48
|
+
## 実行例
|
|
49
|
+
|
|
50
|
+
~~~markmap
|
|
51
|
+
# Project
|
|
52
|
+
|
|
53
|
+
## Design
|
|
54
|
+
|
|
55
|
+
### Notation
|
|
56
|
+
### Rendering
|
|
57
|
+
|
|
58
|
+
## Delivery
|
|
59
|
+
~~~
|
|
60
|
+
|
|
61
|
+
## 描画の仕組み
|
|
49
62
|
|
|
50
63
|
` ```markmap ` のコードブロックは `figure.rb-markmap` に置き換わります。
|
|
51
64
|
|
|
@@ -69,15 +82,15 @@ Markdown の見出しを 1 つも含まないコードブロックは置き換
|
|
|
69
82
|
| `className` | `"rb-markmap"` | figure に付ける基準クラス |
|
|
70
83
|
| `language` | `"markmap"` | 対象にするコードブロックの言語 |
|
|
71
84
|
| `fallback` | `true` | 元の Markdown を表示する `details` を描画する |
|
|
72
|
-
| `colorFreezeLevel`
|
|
85
|
+
| `colorFreezeLevel` | — | ノードの色を固定する深さ |
|
|
73
86
|
|
|
74
87
|
## クライアント側の描画
|
|
75
88
|
|
|
76
|
-
|
|
89
|
+
クライアントの初期化コードは固定で、プラグインのオプションを受け取りません。`height` と `colorFreezeLevel` は figure の `data-markmap-*` 属性に埋め込まれ、`initMarkmap` がそこから読み取ります。
|
|
77
90
|
|
|
78
|
-
`markmap-lib` と `markmap-view`
|
|
91
|
+
`markmap-lib` と `markmap-view` は動的に組み立てた import 指定子で jsDelivr から取得するため、ホスト側のクライアントバンドルには含まれません。`markmap-view` は依存として `d3` を読み込みます。遅延読み込みなので、JavaScript を無効にしていてもページは表示され、元の Markdown はフォールバックの `details` から読めます。
|
|
79
92
|
|
|
80
|
-
##
|
|
93
|
+
## 入力記法の拡張点
|
|
81
94
|
|
|
82
95
|
コードブロックの本文は、`src/parse.ts` にある単一の純粋関数でマインドマップの木に変換します。
|
|
83
96
|
|
|
@@ -85,9 +98,9 @@ Markdown の見出しを 1 つも含まないコードブロックは置き換
|
|
|
85
98
|
parseMarkmapSource(source: string): MarkmapNode | null
|
|
86
99
|
```
|
|
87
100
|
|
|
88
|
-
`MarkmapNode` は記法に依存しない木(`{ content, children, payload? }`)です。現在は標準の Markdown 見出し記法だけを実装しています。将来別の入力記法(たとえば "ExcaliMindMap" 風のアウトライン)を追加するときは、同じ `MarkmapNode` を返すパーサーを実装するだけです。figure
|
|
101
|
+
`MarkmapNode` は記法に依存しない木(`{ content, children, payload? }`)です。現在は標準の Markdown 見出し記法だけを実装しています。将来別の入力記法(たとえば "ExcaliMindMap" 風のアウトライン)を追加するときは、同じ `MarkmapNode` を返すパーサーを実装するだけです。figure の生成と描画の処理は記法を解析しないため、変更する必要はありません。`parseMarkmapSource` はそのためにパッケージのエントリーポイントから公開しています。
|
|
89
102
|
|
|
90
|
-
##
|
|
103
|
+
## 出力フック
|
|
91
104
|
|
|
92
105
|
- `figure[data-markmap]`: 状態(`pending` / `rendered` / `error`)
|
|
93
106
|
- `figure[data-markmap-source]`: 元の Markdown
|
|
@@ -97,7 +110,7 @@ parseMarkmapSource(source: string): MarkmapNode | null
|
|
|
97
110
|
|
|
98
111
|
## 主なエクスポート
|
|
99
112
|
|
|
100
|
-
- `markmap(options?)`: プラグインを作成する(`
|
|
113
|
+
- `markmap(options?)`: プラグインを作成する(`markmap` は別名)
|
|
101
114
|
- `initMarkmap`: クライアント側の描画を初期化する
|
|
102
115
|
- `parseMarkmapSource`: 標準記法を木に変換する
|
|
103
116
|
- `describeMarkmapTree`: 木からアクセシブルなラベルを作る
|
package/dist/index.d.ts
CHANGED
|
@@ -8,5 +8,3 @@ export type { MarkmapClientOptions, MarkmapNode, MarkmapOptions, MarkmapResolved
|
|
|
8
8
|
* `markmap-view` from the CDN only when a figure is present.
|
|
9
9
|
*/
|
|
10
10
|
export declare function markmap(options?: MarkmapOptions): import("@riebeckite/core").RiebeckitePlugin<MarkmapOptions>;
|
|
11
|
-
/** Alias kept for symmetry with the other plugin factories. */
|
|
12
|
-
export declare const markmapPlugin: typeof markmap;
|
package/dist/index.js
CHANGED
|
@@ -145,10 +145,14 @@ function buildFigure(input) {
|
|
|
145
145
|
}
|
|
146
146
|
if (input.fallback) {
|
|
147
147
|
children.push(
|
|
148
|
-
element(
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
148
|
+
element(
|
|
149
|
+
"details",
|
|
150
|
+
{ className: `${base}__fallback rb-source-fallback` },
|
|
151
|
+
[
|
|
152
|
+
element("summary", {}, [text("Markdown source")]),
|
|
153
|
+
element("pre", {}, [element("code", {}, [text(input.source)])])
|
|
154
|
+
]
|
|
155
|
+
)
|
|
152
156
|
);
|
|
153
157
|
}
|
|
154
158
|
return element(
|
|
@@ -215,7 +219,6 @@ function markmap(options = {}) {
|
|
|
215
219
|
]
|
|
216
220
|
});
|
|
217
221
|
}
|
|
218
|
-
var markmapPlugin = markmap;
|
|
219
222
|
function validateMarkmapOptions(options) {
|
|
220
223
|
if (!options) return [];
|
|
221
224
|
const issues = [];
|
|
@@ -244,7 +247,6 @@ function validateMarkmapOptions(options) {
|
|
|
244
247
|
export {
|
|
245
248
|
describeMarkmapTree,
|
|
246
249
|
markmap,
|
|
247
|
-
markmapPlugin,
|
|
248
250
|
parseMarkmapSource,
|
|
249
251
|
resolveMarkmapOptions
|
|
250
252
|
};
|
package/dist/src/options.d.ts
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import type { MarkmapOptions, MarkmapResolvedOptions } from "./types.js";
|
|
2
|
-
/** Default base class for the generated figure. */
|
|
3
|
-
export declare const DEFAULT_MARKMAP_CLASS_NAME = "rb-markmap";
|
|
4
|
-
/** Default canvas height in pixels. */
|
|
5
|
-
export declare const DEFAULT_MARKMAP_HEIGHT = 320;
|
|
6
|
-
/** Default fenced-code language. */
|
|
7
|
-
export declare const DEFAULT_MARKMAP_LANGUAGE = "markmap";
|
|
8
2
|
/**
|
|
9
3
|
* Applies defaults to the user-provided options.
|
|
10
4
|
*
|
package/dist/src/types.d.ts
CHANGED
|
@@ -104,7 +104,7 @@ export type TextNode = {
|
|
|
104
104
|
type: "text";
|
|
105
105
|
value: string;
|
|
106
106
|
};
|
|
107
|
-
|
|
107
|
+
type RawNode = {
|
|
108
108
|
type: "raw";
|
|
109
109
|
value: string;
|
|
110
110
|
};
|
|
@@ -112,3 +112,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
|
|
|
112
112
|
type: string;
|
|
113
113
|
[key: string]: unknown;
|
|
114
114
|
};
|
|
115
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/plugin-markmap",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.33",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"./style.css": "./style.css"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
+
"@riebeckite/core": "0.0.33",
|
|
25
|
+
"@riebeckite/diagram": "0.0.33",
|
|
24
26
|
"markmap-lib": "^0.18.12",
|
|
25
|
-
"markmap-view": "^0.18.12"
|
|
26
|
-
"@riebeckite/core": "0.0.32",
|
|
27
|
-
"@riebeckite/diagram": "0.0.32"
|
|
27
|
+
"markmap-view": "^0.18.12"
|
|
28
28
|
},
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
package/style.css
CHANGED
|
@@ -34,26 +34,6 @@
|
|
|
34
34
|
max-width: 100%;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.rb-markmap__fallback {
|
|
38
|
-
border-top: 1px solid var(--rb-markmap-rule);
|
|
39
|
-
color: var(--rb-markmap-muted);
|
|
40
|
-
font-size: 0.8125rem;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.rb-markmap__fallback summary {
|
|
44
|
-
cursor: pointer;
|
|
45
|
-
padding: 0.5rem 0.75rem;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.rb-markmap__fallback pre {
|
|
49
|
-
overflow: auto;
|
|
50
|
-
margin: 0 1rem;
|
|
51
|
-
padding: 0.75rem;
|
|
52
|
-
border-top: 1px solid var(--rb-markmap-rule);
|
|
53
|
-
color: var(--rb-markmap-ink);
|
|
54
|
-
background: color-mix(in srgb, var(--rb-markmap-ink) 6%, transparent);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
37
|
.rb-markmap[data-markmap="error"] .rb-markmap__canvas:empty::before,
|
|
58
38
|
.rb-markmap[data-markmap="pending"] .rb-markmap__canvas:empty::before {
|
|
59
39
|
content: "Mind map could not be rendered.";
|