markmap-plus 0.1.0 → 0.1.2
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 +155 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,6 +11,8 @@ It keeps the original “Markdown → mind map” workflow, and adds rich editin
|
|
|
11
11
|
|
|
12
12
|
All these operations are applied incrementally without re-rendering the whole SVG tree, which keeps large diagrams responsive.
|
|
13
13
|
|
|
14
|
+
|
|
15
|
+
|
|
14
16
|
### Features
|
|
15
17
|
|
|
16
18
|
- Markdown-driven mind map rendering
|
|
@@ -46,19 +48,48 @@ The basic workflow is:
|
|
|
46
48
|
<title>markmap-plus basic example</title>
|
|
47
49
|
</head>
|
|
48
50
|
<body>
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
+
<button id="export-btn">Export to Markdown</button>
|
|
52
|
+
<svg id="mindmap" style="width: 100%; height: 800px"></svg>
|
|
51
53
|
<script type="module">
|
|
52
|
-
import { Markmap, Transformer } from 'markmap-plus';
|
|
53
|
-
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
-
|
|
54
|
+
import { Markmap, Transformer, toMarkdown } from 'markmap-plus';
|
|
55
|
+
|
|
56
|
+
const initValue = `# Markmap Editor Demo
|
|
57
|
+
|
|
58
|
+
## How to use
|
|
59
|
+
- Edit node
|
|
60
|
+
- Double-click any node to edit
|
|
61
|
+
- Press Enter to save edits
|
|
62
|
+
- Press Esc to cancel edits
|
|
63
|
+
- Clicking elsewhere also saves
|
|
64
|
+
- Add node
|
|
65
|
+
- Press Enter to add sibling node
|
|
66
|
+
- Press Tab to add child node
|
|
67
|
+
- Click + button to add arbitrary node
|
|
68
|
+
- Delete node
|
|
69
|
+
- Press Delete to remove node
|
|
70
|
+
|
|
71
|
+
## Supported Markdown Syntax
|
|
72
|
+
### Heading Levels
|
|
73
|
+
- Level 1 Heading
|
|
74
|
+
- Level 2 Heading
|
|
75
|
+
- Level 3 Heading
|
|
76
|
+
|
|
77
|
+
### Text Formatting
|
|
78
|
+
- **Bold text**
|
|
79
|
+
- *Italic text*
|
|
80
|
+
- ~~Strikethrough~~
|
|
81
|
+
- \`Inline code\`
|
|
82
|
+
|
|
83
|
+
## Interaction
|
|
84
|
+
### Node Operations
|
|
85
|
+
- Click to expand/collapse
|
|
86
|
+
- Double-click to edit content
|
|
87
|
+
- Drag to pan
|
|
88
|
+
- Scroll to zoom
|
|
58
89
|
`;
|
|
59
90
|
|
|
60
91
|
const transformer = new Transformer();
|
|
61
|
-
const { root } = transformer.transform(
|
|
92
|
+
const { root } = transformer.transform(initValue);
|
|
62
93
|
|
|
63
94
|
const svg = document.getElementById('mindmap');
|
|
64
95
|
const mm = Markmap.create(svg, {
|
|
@@ -68,6 +99,27 @@ The basic workflow is:
|
|
|
68
99
|
mm.setData(root).then(() => {
|
|
69
100
|
mm.fit();
|
|
70
101
|
});
|
|
102
|
+
|
|
103
|
+
document.getElementById('export-btn').addEventListener('click', () => {
|
|
104
|
+
const pureNode = mm.getData(true);
|
|
105
|
+
if (pureNode) {
|
|
106
|
+
const exportedMarkdown = toMarkdown(pureNode);
|
|
107
|
+
console.log(exportedMarkdown);
|
|
108
|
+
// Create Blob object
|
|
109
|
+
const blob = new Blob([exportedMarkdown], { type: 'text/markdown' });
|
|
110
|
+
// Create download link
|
|
111
|
+
const url = URL.createObjectURL(blob);
|
|
112
|
+
const a = document.createElement('a');
|
|
113
|
+
a.href = url;
|
|
114
|
+
a.download = 'markmap.md';
|
|
115
|
+
// Trigger download
|
|
116
|
+
document.body.appendChild(a);
|
|
117
|
+
a.click();
|
|
118
|
+
// Cleanup
|
|
119
|
+
document.body.removeChild(a);
|
|
120
|
+
URL.revokeObjectURL(url);
|
|
121
|
+
}
|
|
122
|
+
});
|
|
71
123
|
</script>
|
|
72
124
|
</body>
|
|
73
125
|
</html>
|
|
@@ -215,6 +267,100 @@ function exportMarkdown() {
|
|
|
215
267
|
</template>
|
|
216
268
|
```
|
|
217
269
|
|
|
270
|
+
### API
|
|
271
|
+
|
|
272
|
+
#### View Options
|
|
273
|
+
|
|
274
|
+
The `Markmap.create` call accepts a set of options that control how users can interact with the mind map:
|
|
275
|
+
|
|
276
|
+
- `mode`: rendering mode, either `'display'` or `'editable'`.
|
|
277
|
+
- `editable`: whether node text can be edited in-place.
|
|
278
|
+
- `addable`: whether users can create new nodes from the UI.
|
|
279
|
+
- `deletable`: whether nodes can be deleted.
|
|
280
|
+
- `collapseOnHover`: whether child branches auto-collapse when the mouse leaves a node.
|
|
281
|
+
- `hoverBorder`: whether a border is shown when the mouse hovers a node.
|
|
282
|
+
- `clickBorder`: whether a border is shown when a node is selected by click.
|
|
283
|
+
- `inputPlaceholder`: placeholder text shown in the inline input for new nodes.
|
|
284
|
+
|
|
285
|
+
Example:
|
|
286
|
+
|
|
287
|
+
```ts
|
|
288
|
+
const mm = Markmap.create(svgElement, {
|
|
289
|
+
mode: 'editable',
|
|
290
|
+
editable: true,
|
|
291
|
+
addable: true,
|
|
292
|
+
deletable: true,
|
|
293
|
+
collapseOnHover: true,
|
|
294
|
+
hoverBorder: true,
|
|
295
|
+
clickBorder: true,
|
|
296
|
+
inputPlaceholder: 'Enter text',
|
|
297
|
+
});
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
#### Transformer
|
|
301
|
+
|
|
302
|
+
`Transformer` is responsible for turning Markdown text into the data structure that Markmap uses to render mind maps.
|
|
303
|
+
|
|
304
|
+
```ts
|
|
305
|
+
import { Transformer } from 'markmap-plus';
|
|
306
|
+
|
|
307
|
+
const transformer = new Transformer();
|
|
308
|
+
const { root, features, frontmatter } = transformer.transform(markdown);
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
- `root` is the mind map tree (an `IPureNode`) that you pass to `mm.setData(root)`.
|
|
312
|
+
- `features` describes which plugins and features are used in the Markdown.
|
|
313
|
+
- `frontmatter` contains parsed front‑matter metadata.
|
|
314
|
+
|
|
315
|
+
#### setData
|
|
316
|
+
|
|
317
|
+
`setData` is an instance method on `Markmap`. It applies a new mind map tree to the current instance and triggers a re-render.
|
|
318
|
+
|
|
319
|
+
```ts
|
|
320
|
+
setData(data?: IPureNode | null, opts?: Partial<IMarkmapOptions>): Promise<void>;
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
- `data`: the `IPureNode` tree returned from `Transformer.transform`. When omitted, the previous tree is kept.
|
|
324
|
+
- `opts`: optional view options to update together with the data.
|
|
325
|
+
|
|
326
|
+
#### getData
|
|
327
|
+
|
|
328
|
+
`getData` is an instance method on `Markmap` used to export data. It returns the current mind map tree data.
|
|
329
|
+
|
|
330
|
+
```ts
|
|
331
|
+
getData(): INode | undefined;
|
|
332
|
+
getData(pure: true): IPureNode | undefined;
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
- `mm.getData()` returns the internal runtime tree (`INode`) including layout `state`.
|
|
336
|
+
- `mm.getData(true)` returns a plain data tree (`IPureNode`) without layout `state`, suitable for serialization and storage.
|
|
337
|
+
|
|
338
|
+
#### toMarkdown
|
|
339
|
+
|
|
340
|
+
`toMarkdown` converts an `IPureNode` tree back into a Markdown string.
|
|
341
|
+
|
|
342
|
+
```ts
|
|
343
|
+
function toMarkdown(root: IPureNode): string;
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
Example:
|
|
347
|
+
// Get the current pure data
|
|
348
|
+
const pureNode = mm.getData(true);
|
|
349
|
+
if (pureNode) {
|
|
350
|
+
// Convert back to Markdown string
|
|
351
|
+
const markdown = toMarkdown(pureNode);
|
|
352
|
+
console.log('Exported Markdown:', markdown);
|
|
353
|
+
}
|
|
354
|
+
```ts
|
|
355
|
+
import { toMarkdown } from 'markmap-plus';
|
|
356
|
+
|
|
357
|
+
const pureNode = mm.getData(true);
|
|
358
|
+
if (pureNode) {
|
|
359
|
+
const markdown = toMarkdown(pureNode);
|
|
360
|
+
console.log(markdown);
|
|
361
|
+
}
|
|
362
|
+
```
|
|
363
|
+
|
|
218
364
|
### More Documentation
|
|
219
365
|
|
|
220
366
|
For more details about interaction, keyboard shortcuts, and full API reference, see the [docs](https://tem-man.github.io/markmap-plus-docs) or the published documentation site.
|
package/package.json
CHANGED