markmap-plus 0.0.5 → 0.0.6
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 +220 -0
- package/dist/index.d.ts +5 -5
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
## markmap-plus
|
|
2
|
+
|
|
3
|
+
markmap-plus is an enhanced version of markmap for building interactive mind maps directly in the browser.
|
|
4
|
+
|
|
5
|
+
It keeps the original “Markdown → mind map” workflow, and adds rich editing features on top of the rendered diagram:
|
|
6
|
+
- create new nodes in the mind map
|
|
7
|
+
- edit text of existing nodes
|
|
8
|
+
- delete nodes you no longer need
|
|
9
|
+
- select nodes for keyboard-driven operations
|
|
10
|
+
- export the current mind map back to Markdown
|
|
11
|
+
|
|
12
|
+
All these operations are applied incrementally without re-rendering the whole SVG tree, which keeps large diagrams responsive.
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
- Markdown-driven mind map rendering
|
|
17
|
+
- Display and editable modes
|
|
18
|
+
- In-place node editing
|
|
19
|
+
- Keyboard shortcuts for adding and removing nodes
|
|
20
|
+
- Incremental updates for better performance
|
|
21
|
+
- Export mind maps back to Markdown
|
|
22
|
+
|
|
23
|
+
### Installation
|
|
24
|
+
|
|
25
|
+
Use your preferred package manager to install:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install markmap-plus
|
|
29
|
+
# or
|
|
30
|
+
yarn add markmap-plus
|
|
31
|
+
# or
|
|
32
|
+
pnpm add markmap-plus
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Basic Usage (Vanilla JavaScript)
|
|
36
|
+
|
|
37
|
+
The basic workflow is:
|
|
38
|
+
- transform Markdown into a mind map tree using Transformer
|
|
39
|
+
- render the tree into an SVG using Markmap
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<!doctype html>
|
|
43
|
+
<html lang="en">
|
|
44
|
+
<head>
|
|
45
|
+
<meta charset="UTF-8" />
|
|
46
|
+
<title>markmap-plus basic example</title>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<svg id="mindmap" style="width: 100%; height: 500px"></svg>
|
|
50
|
+
|
|
51
|
+
<script type="module">
|
|
52
|
+
import { Markmap, Transformer } from 'markmap-plus';
|
|
53
|
+
|
|
54
|
+
const markdown = `# markmap-plus
|
|
55
|
+
|
|
56
|
+
- Built on markmap-lib
|
|
57
|
+
- Renders with markmap-view-plus
|
|
58
|
+
`;
|
|
59
|
+
|
|
60
|
+
const transformer = new Transformer();
|
|
61
|
+
const { root } = transformer.transform(markdown);
|
|
62
|
+
|
|
63
|
+
const svg = document.getElementById('mindmap');
|
|
64
|
+
const mm = Markmap.create(svg, {
|
|
65
|
+
mode: 'editable',
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
mm.setData(root).then(() => {
|
|
69
|
+
mm.fit();
|
|
70
|
+
});
|
|
71
|
+
</script>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### React Example
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
80
|
+
import { Markmap, Transformer, toMarkdown } from 'markmap-plus';
|
|
81
|
+
|
|
82
|
+
const transformer = new Transformer();
|
|
83
|
+
|
|
84
|
+
const initialMarkdown = `# markmap-plus in React
|
|
85
|
+
|
|
86
|
+
- Edit the text on the left
|
|
87
|
+
- The mind map updates automatically
|
|
88
|
+
`;
|
|
89
|
+
|
|
90
|
+
export function MarkmapReactDemo() {
|
|
91
|
+
const [value, setValue] = useState(initialMarkdown);
|
|
92
|
+
const svgRef = useRef<SVGSVGElement | null>(null);
|
|
93
|
+
const mmRef = useRef<Markmap | null>(null);
|
|
94
|
+
|
|
95
|
+
useEffect(() => {
|
|
96
|
+
if (mmRef.current || !svgRef.current) return;
|
|
97
|
+
const mm = Markmap.create(svgRef.current, {
|
|
98
|
+
mode: 'editable',
|
|
99
|
+
});
|
|
100
|
+
mmRef.current = mm;
|
|
101
|
+
}, []);
|
|
102
|
+
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
const mm = mmRef.current;
|
|
105
|
+
if (!mm) return;
|
|
106
|
+
const { root } = transformer.transform(value);
|
|
107
|
+
mm.setData(root).then(() => {
|
|
108
|
+
mm.fit();
|
|
109
|
+
});
|
|
110
|
+
}, [value]);
|
|
111
|
+
|
|
112
|
+
const handleExportMarkdown = () => {
|
|
113
|
+
const mm = mmRef.current;
|
|
114
|
+
if (!mm) return;
|
|
115
|
+
const pureNode = mm.getData(true);
|
|
116
|
+
if (!pureNode) return;
|
|
117
|
+
const markdown = toMarkdown(pureNode);
|
|
118
|
+
console.log('[markmap] exported markdown:', markdown);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
123
|
+
<textarea
|
|
124
|
+
style={{ width: '40%', height: 500 }}
|
|
125
|
+
value={value}
|
|
126
|
+
onChange={(e) => setValue(e.target.value)}
|
|
127
|
+
placeholder="Type Markdown here..."
|
|
128
|
+
/>
|
|
129
|
+
<div style={{ flex: 1 }}>
|
|
130
|
+
<button type="button" onClick={handleExportMarkdown}>
|
|
131
|
+
Export current mind map as Markdown
|
|
132
|
+
</button>
|
|
133
|
+
<svg
|
|
134
|
+
ref={svgRef}
|
|
135
|
+
style={{ width: '100%', height: 460, display: 'block', marginTop: 8 }}
|
|
136
|
+
/>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Vue 3 Example
|
|
144
|
+
|
|
145
|
+
```vue
|
|
146
|
+
<script setup lang="ts">
|
|
147
|
+
import { Markmap, Transformer, toMarkdown } from 'markmap-plus';
|
|
148
|
+
import { onMounted, ref, watch } from 'vue';
|
|
149
|
+
|
|
150
|
+
const transformer = new Transformer();
|
|
151
|
+
|
|
152
|
+
const initialMarkdown = `# markmap-plus in Vue 3
|
|
153
|
+
|
|
154
|
+
- Double-click a node to edit it
|
|
155
|
+
- Use Tab / Enter to add nodes
|
|
156
|
+
`;
|
|
157
|
+
|
|
158
|
+
const value = ref(initialMarkdown);
|
|
159
|
+
const svgRef = ref<SVGSVGElement | null>(null);
|
|
160
|
+
const mmRef = ref<Markmap | null>(null);
|
|
161
|
+
|
|
162
|
+
onMounted(() => {
|
|
163
|
+
if (mmRef.value || !svgRef.value) return;
|
|
164
|
+
const mm = Markmap.create(svgRef.value, {
|
|
165
|
+
mode: 'editable',
|
|
166
|
+
});
|
|
167
|
+
mmRef.value = mm;
|
|
168
|
+
|
|
169
|
+
const { root } = transformer.transform(value.value);
|
|
170
|
+
mm.setData(root).then(() => {
|
|
171
|
+
mm.fit();
|
|
172
|
+
});
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
watch(
|
|
176
|
+
() => value.value,
|
|
177
|
+
(newVal) => {
|
|
178
|
+
const mm = mmRef.value;
|
|
179
|
+
if (!mm) return;
|
|
180
|
+
const { root } = transformer.transform(newVal);
|
|
181
|
+
mm.setData(root).then(() => {
|
|
182
|
+
mm.fit();
|
|
183
|
+
});
|
|
184
|
+
},
|
|
185
|
+
);
|
|
186
|
+
|
|
187
|
+
function exportMarkdown() {
|
|
188
|
+
const mm = mmRef.value;
|
|
189
|
+
if (!mm) return;
|
|
190
|
+
const pureNode = mm.getData(true);
|
|
191
|
+
if (!pureNode) return;
|
|
192
|
+
const markdown = toMarkdown(pureNode);
|
|
193
|
+
console.log('[markmap] exported markdown:', markdown);
|
|
194
|
+
}
|
|
195
|
+
</script>
|
|
196
|
+
|
|
197
|
+
<template>
|
|
198
|
+
<div style="display: flex; gap: 16px">
|
|
199
|
+
<textarea
|
|
200
|
+
style="width: 40%; height: 500px"
|
|
201
|
+
:value="value"
|
|
202
|
+
@input="(e: Event) => (value = (e.target as HTMLTextAreaElement).value)"
|
|
203
|
+
placeholder="Type Markdown here..."
|
|
204
|
+
/>
|
|
205
|
+
<div style="flex: 1">
|
|
206
|
+
<button type="button" @click="exportMarkdown">
|
|
207
|
+
Export current mind map as Markdown
|
|
208
|
+
</button>
|
|
209
|
+
<svg
|
|
210
|
+
ref="svgRef"
|
|
211
|
+
style="width: 100%; height: 460px; display: block; margin-top: 8px"
|
|
212
|
+
/>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</template>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### More Documentation
|
|
219
|
+
|
|
220
|
+
For more details about interaction, keyboard shortcuts, and full API reference, see the docs in `docs/` or the published documentation site.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export type { IAssets } from
|
|
4
|
-
export * from
|
|
5
|
-
export type { IMarkmapJSONOptions } from
|
|
1
|
+
export * from 'markmap-common';
|
|
2
|
+
export * from 'markmap-view-plus';
|
|
3
|
+
export type { IAssets } from 'markmap-common';
|
|
4
|
+
export * from 'markmap-lib';
|
|
5
|
+
export type { IMarkmapJSONOptions } from 'markmap-lib';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markmap-plus",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "Full markmap package",
|
|
5
5
|
"author": "Lin Jiman <temman_lin@qq.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
"markdown",
|
|
10
10
|
"mindmap"
|
|
11
11
|
],
|
|
12
|
-
"homepage": "https://github.
|
|
12
|
+
"homepage": "https://tem-man.github.io/markmap-plus-docs",
|
|
13
13
|
"publishConfig": {
|
|
14
14
|
"access": "public",
|
|
15
15
|
"registry": "https://registry.npmjs.org/"
|
|
16
16
|
},
|
|
17
17
|
"repository": {
|
|
18
18
|
"type": "git",
|
|
19
|
-
"url": "git+https://github.com/
|
|
19
|
+
"url": "git+https://github.com/Tem-man/markmap-plus.git"
|
|
20
20
|
},
|
|
21
21
|
"scripts": {
|
|
22
22
|
"clean": "del-cli dist tsconfig.tsbuildinfo",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prepublishOnly": "pnpm build"
|
|
28
28
|
},
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/
|
|
30
|
+
"url": "https://github.com/Tem-man/markmap-plus/issues"
|
|
31
31
|
},
|
|
32
32
|
"type": "module",
|
|
33
33
|
"main": "dist/index.js",
|