mind-elixir 5.1.1 → 5.2.0-beta.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 CHANGED
@@ -1,432 +1,432 @@
1
- <p align="center">
2
- <a href="https://docs.mind-elixir.com" target="_blank" rel="noopener noreferrer">
3
- <img width="150" src="https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png" alt="mindelixir logo2">
4
- </a>
5
- <h1 align="center">Mind Elixir</h1>
6
- </p>
7
-
8
- <p align="center">
9
- <a href="https://www.npmjs.com/package/mind-elixir">
10
- <img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
11
- </a>
12
- <a href="https://github.com/ssshooter/mind-elixir-core/blob/master/LICENSE">
13
- <img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
14
- </a>
15
- <a href="https://app.codacy.com/gh/ssshooter/mind-elixir-core?utm_source=github.com&utm_medium=referral&utm_content=ssshooter/mind-elixir-core&utm_campaign=Badge_Grade_Settings">
16
- <img src="https://api.codacy.com/project/badge/Grade/09fadec5bf094886b30cea6aabf3a88b" alt="code quality">
17
- </a>
18
- <a href="https://bundlephobia.com/result?p=mind-elixir">
19
- <img src="https://badgen.net/bundlephobia/dependency-count/mind-elixir" alt="dependency-count">
20
- </a>
21
- <a href="https://packagephobia.com/result?p=mind-elixir">
22
- <img src="https://packagephobia.com/badge?p=mind-elixir" alt="package size">
23
- </a>
24
- </p>
25
-
26
- [English](/readme.md) |
27
- [中文](/readme/zh.md) |
28
- [Español](/readme/es.md) |
29
- [Français](/readme/fr.md) |
30
- [Português](/readme/pt.md) |
31
- [Русский](/readme/ru.md) |
32
- [日本語](/readme/ja.md) |
33
- [한국어](/readme/ko.md)
34
-
35
- Mind elixir is a open source JavaScript mind map core. You can use it with any frontend framework you like.
36
-
37
- ## Features
38
-
39
- ### 🎨 **User Experience**
40
-
41
- - **Fluent UX** - Smooth and intuitive interactions
42
- - **Well designed** - Clean and modern interface
43
- - **Mobile friendly** - Touch events for mobile devices
44
- - **Efficient shortcuts** - Keyboard shortcuts for power users
45
-
46
- ### ⚡ **Performance & Architecture**
47
-
48
- - **Lightweight** - Minimal bundle size
49
- - **High performance** - Optimized for large mind maps
50
- - **Framework agnostic** - Works with any frontend framework
51
- - **Pluginable** - Extensible architecture
52
-
53
- ### 🛠️ **Core Features**
54
-
55
- - **Interactive editing** - Built-in drag and drop / node edit capabilities
56
- - **Bulk operations** - Multi-node selection and operations
57
- - **Undo / Redo** - Complete operation history
58
- - **Node connections & summarization** - Custom node linking and content summarization
59
-
60
- ### 📤 **Export & Customization**
61
-
62
- - **Multiple export formats** - SVG / PNG / HTML export
63
- - **Easy styling** - Customize mindmap with CSS variables
64
- - **Theme support** - Built-in themes and custom styling
65
-
66
- [v5 Breaking Changes](https://github.com/SSShooter/mind-elixir-core/wiki/Breaking-Change#500)
67
-
68
- <details>
69
- <summary>Table of Contents</summary>
70
-
71
- - [Features](#features)
72
- - [🎨 **User Experience**](#-user-experience)
73
- - [⚡ **Performance \& Architecture**](#-performance--architecture)
74
- - [🛠️ **Core Features**](#️-core-features)
75
- - [📤 **Export \& Customization**](#-export--customization)
76
- - [Try now](#try-now)
77
- - [Playground](#playground)
78
- - [Documentation](#documentation)
79
- - [Usage](#usage)
80
- - [Install](#install)
81
- - [NPM](#npm)
82
- - [Script tag](#script-tag)
83
- - [Init](#init)
84
- - [Data Structure](#data-structure)
85
- - [Event Handling](#event-handling)
86
- - [Data Export And Import](#data-export-and-import)
87
- - [Operation Guards](#operation-guards)
88
- - [Export as a Image](#export-as-a-image)
89
- - [Theme](#theme)
90
- - [Shortcuts](#shortcuts)
91
- - [Who's using](#whos-using)
92
- - [Ecosystem](#ecosystem)
93
- - [Development](#development)
94
- - [Thanks](#thanks)
95
- - [Contributors](#contributors)
96
-
97
- </details>
98
-
99
- ## Try now
100
-
101
- ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot5.jpg)
102
-
103
- https://mind-elixir.com/
104
-
105
- ### Playground
106
-
107
- - Vanilla JS - https://codepen.io/ssshooter/pen/vEOqWjE
108
- - React - https://codesandbox.io/p/devbox/mind-elixir-3-x-react-18-x-forked-f3mtcd
109
- - Vue3 - https://codesandbox.io/p/sandbox/mind-elixir-3-x-vue3-lth484
110
-
111
- ## Documentation
112
-
113
- https://docs.mind-elixir.com/
114
-
115
- ## Usage
116
-
117
- ### Install
118
-
119
- #### NPM
120
-
121
- ```bash
122
- npm i mind-elixir -S
123
- ```
124
-
125
- ```javascript
126
- import MindElixir from 'mind-elixir'
127
- import 'mind-elixir/style.css'
128
- ```
129
-
130
- #### Script tag
131
-
132
- ```html
133
- <script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
134
- ```
135
-
136
- And in your CSS file:
137
-
138
- ```css
139
- @import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';
140
- ```
141
-
142
- ### Init
143
-
144
- ```html
145
- <div id="map"></div>
146
- <style>
147
- #map {
148
- height: 500px;
149
- width: 100%;
150
- }
151
- </style>
152
- ```
153
-
154
- ```javascript
155
- import MindElixir from 'mind-elixir'
156
- import 'mind-elixir/style.css'
157
- import example from 'mind-elixir/dist/example1'
158
-
159
- let options = {
160
- el: '#map', // or HTMLDivElement
161
- direction: MindElixir.LEFT,
162
- draggable: true, // default true
163
- toolBar: true, // default true
164
- nodeMenu: true, // default true
165
- keypress: true, // default true
166
- locale: 'en', // [zh_CN,zh_TW,en,ja,pt,ru] waiting for PRs
167
- overflowHidden: false, // default false
168
- mainLinkStyle: 2, // [1,2] default 1
169
- mouseSelectionButton: 0, // 0 for left button, 2 for right button, default 0
170
- contextMenu: {
171
- focus: true,
172
- link: true,
173
- extend: [
174
- {
175
- name: 'Node edit',
176
- onclick: () => {
177
- alert('extend menu')
178
- },
179
- },
180
- ],
181
- }, // default true
182
- before: {
183
- insertSibling(type, obj) {
184
- return true
185
- },
186
- },
187
- // Custom markdown parser (optional)
188
- // markdown: (text) => customMarkdownParser(text), // provide your own markdown parser function
189
- }
190
-
191
- let mind = new MindElixir(options)
192
-
193
- mind.install(plugin) // install your plugin
194
-
195
- // create new map data
196
- const data = MindElixir.new('new topic')
197
- // or `example`
198
- // or the data return from `.getData()`
199
- mind.init(data)
200
-
201
- // get a node
202
- MindElixir.E('node-id')
203
- ```
204
-
205
- ### Data Structure
206
-
207
- ```javascript
208
- // whole node data structure up to now
209
- const nodeData = {
210
- topic: 'node topic',
211
- id: 'bd1c24420cd2c2f5',
212
- style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
213
- expanded: true,
214
- parent: null,
215
- tags: ['Tag'],
216
- icons: ['😀'],
217
- hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
218
- image: {
219
- url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // required
220
- // you need to query the height and width of the image and calculate the appropriate value to display the image
221
- height: 90, // required
222
- width: 90, // required
223
- },
224
- children: [
225
- {
226
- topic: 'child',
227
- id: 'xxxx',
228
- // ...
229
- },
230
- ],
231
- }
232
- ```
233
-
234
- ### Event Handling
235
-
236
- ```javascript
237
- mind.bus.addListener('operation', operation => {
238
- console.log(operation)
239
- // return {
240
- // name: action name,
241
- // obj: target object
242
- // }
243
-
244
- // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
245
- // obj: target
246
-
247
- // name: moveNode
248
- // obj: {from:target1,to:target2}
249
- })
250
-
251
- mind.bus.addListener('selectNodes', nodes => {
252
- console.log(nodes)
253
- })
254
-
255
- mind.bus.addListener('expandNode', node => {
256
- console.log('expandNode: ', node)
257
- })
258
- ```
259
-
260
- ### Data Export And Import
261
-
262
- ```javascript
263
- // data export
264
- const data = mind.getData() // javascript object, see src/example.js
265
- mind.getDataString() // stringify object
266
-
267
- // data import
268
- // initiate
269
- let mind = new MindElixir(options)
270
- mind.init(data)
271
- // data update
272
- mind.refresh(data)
273
- ```
274
-
275
- ### Markdown Support
276
-
277
- Mind Elixir supports custom markdown parsing:
278
-
279
- ```javascript
280
- // Disable markdown (default)
281
- let mind = new MindElixir({
282
- // markdown option omitted - no markdown processing
283
- })
284
-
285
- // Use custom markdown parser
286
- let mind = new MindElixir({
287
- markdown: (text) => {
288
- // Your custom markdown implementation
289
- return text
290
- .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
291
- .replace(/\*(.*?)\*/g, '<em>$1</em>')
292
- .replace(/`(.*?)`/g, '<code>$1</code>')
293
- },
294
- })
295
-
296
- // Use any markdown library (e.g., marked, markdown-it, etc.)
297
- import { marked } from 'marked'
298
- let mind = new MindElixir({
299
- markdown: (text) => marked(text),
300
- })
301
- ```
302
-
303
- For detailed markdown configuration examples, see [docs/markdown-configuration.md](docs/markdown-configuration.md).
304
-
305
- ### Operation Guards
306
-
307
- ```javascript
308
- let mind = new MindElixir({
309
- // ...
310
- before: {
311
- async addChild(el, obj) {
312
- await saveDataToDb()
313
- return true
314
- },
315
- },
316
- })
317
- ```
318
-
319
- ## Export as a Image
320
-
321
- Install `@ssshooter/modern-screenshot`, then:
322
-
323
- ```typescript
324
- import { domToPng } from '@ssshooter/modern-screenshot'
325
-
326
- const download = async () => {
327
- const dataUrl = await domToPng(mind.nodes, {
328
- padding: 300,
329
- quality: 1,
330
- })
331
- const link = document.createElement('a')
332
- link.download = 'screenshot.png'
333
- link.href = dataUrl
334
- link.click()
335
- }
336
- ```
337
-
338
- ## Theme
339
-
340
- ```javascript
341
- const options = {
342
- // ...
343
- theme: {
344
- name: 'Dark',
345
- // main lines color palette
346
- palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
347
- // overwrite css variables
348
- cssVar: {
349
- '--main-color': '#ffffff',
350
- '--main-bgcolor': '#4c4f69',
351
- '--color': '#cccccc',
352
- '--bgcolor': '#252526',
353
- '--panel-color': '255, 255, 255',
354
- '--panel-bgcolor': '45, 55, 72',
355
- },
356
- // all variables see /src/index.less
357
- },
358
- // ...
359
- }
360
-
361
- // ...
362
-
363
- mind.changeTheme({
364
- name: 'Latte',
365
- palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
366
- cssVar: {
367
- '--main-color': '#444446',
368
- '--main-bgcolor': '#ffffff',
369
- '--color': '#777777',
370
- '--bgcolor': '#f6f6f6',
371
- },
372
- })
373
- ```
374
-
375
- Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`. Please change the theme **manually** when the scheme changes.
376
-
377
- ## Shortcuts
378
-
379
- See [Shortcuts Guide](https://docs.mind-elixir.com/docs/guides/shortcuts) for detailed information.
380
-
381
- ## Who's using
382
-
383
- - [Mind Elixir Desktop](https://desktop.mind-elixir.com/)
384
-
385
- ## Ecosystem
386
-
387
- - [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)
388
- - [@mind-elixir/node-menu-neo](https://github.com/ssshooter/node-menu-neo)
389
- - [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)
390
- - [@mind-elixir/export-html](https://github.com/ssshooter/export-html)
391
- - [mind-elixir-react](https://github.com/ssshooter/mind-elixir-react)
392
-
393
- PRs are welcome!
394
-
395
- ## Development
396
-
397
- ```
398
- pnpm i
399
- pnpm dev
400
- ```
401
-
402
- Test generated files with `dev.dist.ts`:
403
-
404
- ```
405
- pnpm build
406
- pnpm link ./
407
- ```
408
-
409
- Update docs:
410
-
411
- ```
412
- # Install api-extractor
413
- pnpm install -g @microsoft/api-extractor
414
- # Maintain /src/docs.ts
415
- # Generate docs
416
- pnpm doc
417
- pnpm doc:md
418
- ```
419
-
420
- Use [DeepWiki](https://deepwiki.com/SSShooter/mind-elixir-core) to learn more about Mind Elixir
421
-
422
- ## Thanks
423
-
424
- - [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla)
425
-
426
- ## Contributors
427
-
428
- Thanks for your contributions to Mind Elixir! Your support and dedication make this project better.
429
-
430
- <a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
431
- <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core" />
432
- </a>
1
+ <p align="center">
2
+ <a href="https://docs.mind-elixir.com" target="_blank" rel="noopener noreferrer">
3
+ <img width="150" src="https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png" alt="mindelixir logo2">
4
+ </a>
5
+ <h1 align="center">Mind Elixir</h1>
6
+ </p>
7
+
8
+ <p align="center">
9
+ <a href="https://www.npmjs.com/package/mind-elixir">
10
+ <img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
11
+ </a>
12
+ <a href="https://github.com/ssshooter/mind-elixir-core/blob/master/LICENSE">
13
+ <img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
14
+ </a>
15
+ <a href="https://app.codacy.com/gh/ssshooter/mind-elixir-core?utm_source=github.com&utm_medium=referral&utm_content=ssshooter/mind-elixir-core&utm_campaign=Badge_Grade_Settings">
16
+ <img src="https://api.codacy.com/project/badge/Grade/09fadec5bf094886b30cea6aabf3a88b" alt="code quality">
17
+ </a>
18
+ <a href="https://bundlephobia.com/result?p=mind-elixir">
19
+ <img src="https://badgen.net/bundlephobia/dependency-count/mind-elixir" alt="dependency-count">
20
+ </a>
21
+ <a href="https://packagephobia.com/result?p=mind-elixir">
22
+ <img src="https://packagephobia.com/badge?p=mind-elixir" alt="package size">
23
+ </a>
24
+ </p>
25
+
26
+ [English](/readme.md) |
27
+ [中文](/readme/zh.md) |
28
+ [Español](/readme/es.md) |
29
+ [Français](/readme/fr.md) |
30
+ [Português](/readme/pt.md) |
31
+ [Русский](/readme/ru.md) |
32
+ [日本語](/readme/ja.md) |
33
+ [한국어](/readme/ko.md)
34
+
35
+ Mind elixir is a open source JavaScript mind map core. You can use it with any frontend framework you like.
36
+
37
+ ## Features
38
+
39
+ ### 🎨 **User Experience**
40
+
41
+ - **Fluent UX** - Smooth and intuitive interactions
42
+ - **Well designed** - Clean and modern interface
43
+ - **Mobile friendly** - Touch events for mobile devices
44
+ - **Efficient shortcuts** - Keyboard shortcuts for power users
45
+
46
+ ### ⚡ **Performance & Architecture**
47
+
48
+ - **Lightweight** - Minimal bundle size
49
+ - **High performance** - Optimized for large mind maps
50
+ - **Framework agnostic** - Works with any frontend framework
51
+ - **Pluginable** - Extensible architecture
52
+
53
+ ### 🛠️ **Core Features**
54
+
55
+ - **Interactive editing** - Built-in drag and drop / node edit capabilities
56
+ - **Bulk operations** - Multi-node selection and operations
57
+ - **Undo / Redo** - Complete operation history
58
+ - **Node connections & summarization** - Custom node linking and content summarization
59
+
60
+ ### 📤 **Export & Customization**
61
+
62
+ - **Multiple export formats** - SVG / PNG / HTML export
63
+ - **Easy styling** - Customize mindmap with CSS variables
64
+ - **Theme support** - Built-in themes and custom styling
65
+
66
+ [v5 Breaking Changes](https://github.com/SSShooter/mind-elixir-core/wiki/Breaking-Change#500)
67
+
68
+ <details>
69
+ <summary>Table of Contents</summary>
70
+
71
+ - [Features](#features)
72
+ - [🎨 **User Experience**](#-user-experience)
73
+ - [⚡ **Performance \& Architecture**](#-performance--architecture)
74
+ - [🛠️ **Core Features**](#️-core-features)
75
+ - [📤 **Export \& Customization**](#-export--customization)
76
+ - [Try now](#try-now)
77
+ - [Playground](#playground)
78
+ - [Documentation](#documentation)
79
+ - [Usage](#usage)
80
+ - [Install](#install)
81
+ - [NPM](#npm)
82
+ - [Script tag](#script-tag)
83
+ - [Init](#init)
84
+ - [Data Structure](#data-structure)
85
+ - [Event Handling](#event-handling)
86
+ - [Data Export And Import](#data-export-and-import)
87
+ - [Operation Guards](#operation-guards)
88
+ - [Export as a Image](#export-as-a-image)
89
+ - [Theme](#theme)
90
+ - [Shortcuts](#shortcuts)
91
+ - [Who's using](#whos-using)
92
+ - [Ecosystem](#ecosystem)
93
+ - [Development](#development)
94
+ - [Thanks](#thanks)
95
+ - [Contributors](#contributors)
96
+
97
+ </details>
98
+
99
+ ## Try now
100
+
101
+ ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot5.jpg)
102
+
103
+ https://mind-elixir.com/
104
+
105
+ ### Playground
106
+
107
+ - Vanilla JS - https://codepen.io/ssshooter/pen/vEOqWjE
108
+ - React - https://codesandbox.io/p/devbox/mind-elixir-3-x-react-18-x-forked-f3mtcd
109
+ - Vue3 - https://codesandbox.io/p/sandbox/mind-elixir-3-x-vue3-lth484
110
+
111
+ ## Documentation
112
+
113
+ https://docs.mind-elixir.com/
114
+
115
+ ## Usage
116
+
117
+ ### Install
118
+
119
+ #### NPM
120
+
121
+ ```bash
122
+ npm i mind-elixir -S
123
+ ```
124
+
125
+ ```javascript
126
+ import MindElixir from 'mind-elixir'
127
+ import 'mind-elixir/style.css'
128
+ ```
129
+
130
+ #### Script tag
131
+
132
+ ```html
133
+ <script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
134
+ ```
135
+
136
+ And in your CSS file:
137
+
138
+ ```css
139
+ @import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';
140
+ ```
141
+
142
+ ### Init
143
+
144
+ ```html
145
+ <div id="map"></div>
146
+ <style>
147
+ #map {
148
+ height: 500px;
149
+ width: 100%;
150
+ }
151
+ </style>
152
+ ```
153
+
154
+ ```javascript
155
+ import MindElixir from 'mind-elixir'
156
+ import 'mind-elixir/style.css'
157
+ import example from 'mind-elixir/dist/example1'
158
+
159
+ let options = {
160
+ el: '#map', // or HTMLDivElement
161
+ direction: MindElixir.LEFT,
162
+ draggable: true, // default true
163
+ toolBar: true, // default true
164
+ nodeMenu: true, // default true
165
+ keypress: true, // default true
166
+ locale: 'en', // [zh_CN,zh_TW,en,ja,pt,ru] waiting for PRs
167
+ overflowHidden: false, // default false
168
+ mainLinkStyle: 2, // [1,2] default 1
169
+ mouseSelectionButton: 0, // 0 for left button, 2 for right button, default 0
170
+ contextMenu: {
171
+ focus: true,
172
+ link: true,
173
+ extend: [
174
+ {
175
+ name: 'Node edit',
176
+ onclick: () => {
177
+ alert('extend menu')
178
+ },
179
+ },
180
+ ],
181
+ }, // default true
182
+ before: {
183
+ insertSibling(type, obj) {
184
+ return true
185
+ },
186
+ },
187
+ // Custom markdown parser (optional)
188
+ // markdown: (text) => customMarkdownParser(text), // provide your own markdown parser function
189
+ }
190
+
191
+ let mind = new MindElixir(options)
192
+
193
+ mind.install(plugin) // install your plugin
194
+
195
+ // create new map data
196
+ const data = MindElixir.new('new topic')
197
+ // or `example`
198
+ // or the data return from `.getData()`
199
+ mind.init(data)
200
+
201
+ // get a node
202
+ MindElixir.E('node-id')
203
+ ```
204
+
205
+ ### Data Structure
206
+
207
+ ```javascript
208
+ // whole node data structure up to now
209
+ const nodeData = {
210
+ topic: 'node topic',
211
+ id: 'bd1c24420cd2c2f5',
212
+ style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
213
+ expanded: true,
214
+ parent: null,
215
+ tags: ['Tag'],
216
+ icons: ['😀'],
217
+ hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
218
+ image: {
219
+ url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // required
220
+ // you need to query the height and width of the image and calculate the appropriate value to display the image
221
+ height: 90, // required
222
+ width: 90, // required
223
+ },
224
+ children: [
225
+ {
226
+ topic: 'child',
227
+ id: 'xxxx',
228
+ // ...
229
+ },
230
+ ],
231
+ }
232
+ ```
233
+
234
+ ### Event Handling
235
+
236
+ ```javascript
237
+ mind.bus.addListener('operation', operation => {
238
+ console.log(operation)
239
+ // return {
240
+ // name: action name,
241
+ // obj: target object
242
+ // }
243
+
244
+ // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
245
+ // obj: target
246
+
247
+ // name: moveNode
248
+ // obj: {from:target1,to:target2}
249
+ })
250
+
251
+ mind.bus.addListener('selectNodes', nodes => {
252
+ console.log(nodes)
253
+ })
254
+
255
+ mind.bus.addListener('expandNode', node => {
256
+ console.log('expandNode: ', node)
257
+ })
258
+ ```
259
+
260
+ ### Data Export And Import
261
+
262
+ ```javascript
263
+ // data export
264
+ const data = mind.getData() // javascript object, see src/example.js
265
+ mind.getDataString() // stringify object
266
+
267
+ // data import
268
+ // initiate
269
+ let mind = new MindElixir(options)
270
+ mind.init(data)
271
+ // data update
272
+ mind.refresh(data)
273
+ ```
274
+
275
+ ### Markdown Support
276
+
277
+ Mind Elixir supports custom markdown parsing:
278
+
279
+ ```javascript
280
+ // Disable markdown (default)
281
+ let mind = new MindElixir({
282
+ // markdown option omitted - no markdown processing
283
+ })
284
+
285
+ // Use custom markdown parser
286
+ let mind = new MindElixir({
287
+ markdown: (text) => {
288
+ // Your custom markdown implementation
289
+ return text
290
+ .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
291
+ .replace(/\*(.*?)\*/g, '<em>$1</em>')
292
+ .replace(/`(.*?)`/g, '<code>$1</code>')
293
+ },
294
+ })
295
+
296
+ // Use any markdown library (e.g., marked, markdown-it, etc.)
297
+ import { marked } from 'marked'
298
+ let mind = new MindElixir({
299
+ markdown: (text) => marked(text),
300
+ })
301
+ ```
302
+
303
+ For detailed markdown configuration examples, see [docs/markdown-configuration.md](docs/markdown-configuration.md).
304
+
305
+ ### Operation Guards
306
+
307
+ ```javascript
308
+ let mind = new MindElixir({
309
+ // ...
310
+ before: {
311
+ async addChild(el, obj) {
312
+ await saveDataToDb()
313
+ return true
314
+ },
315
+ },
316
+ })
317
+ ```
318
+
319
+ ## Export as a Image
320
+
321
+ Install `@ssshooter/modern-screenshot`, then:
322
+
323
+ ```typescript
324
+ import { domToPng } from '@ssshooter/modern-screenshot'
325
+
326
+ const download = async () => {
327
+ const dataUrl = await domToPng(mind.nodes, {
328
+ padding: 300,
329
+ quality: 1,
330
+ })
331
+ const link = document.createElement('a')
332
+ link.download = 'screenshot.png'
333
+ link.href = dataUrl
334
+ link.click()
335
+ }
336
+ ```
337
+
338
+ ## Theme
339
+
340
+ ```javascript
341
+ const options = {
342
+ // ...
343
+ theme: {
344
+ name: 'Dark',
345
+ // main lines color palette
346
+ palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
347
+ // overwrite css variables
348
+ cssVar: {
349
+ '--main-color': '#ffffff',
350
+ '--main-bgcolor': '#4c4f69',
351
+ '--color': '#cccccc',
352
+ '--bgcolor': '#252526',
353
+ '--panel-color': '255, 255, 255',
354
+ '--panel-bgcolor': '45, 55, 72',
355
+ },
356
+ // all variables see /src/index.less
357
+ },
358
+ // ...
359
+ }
360
+
361
+ // ...
362
+
363
+ mind.changeTheme({
364
+ name: 'Latte',
365
+ palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
366
+ cssVar: {
367
+ '--main-color': '#444446',
368
+ '--main-bgcolor': '#ffffff',
369
+ '--color': '#777777',
370
+ '--bgcolor': '#f6f6f6',
371
+ },
372
+ })
373
+ ```
374
+
375
+ Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`. Please change the theme **manually** when the scheme changes.
376
+
377
+ ## Shortcuts
378
+
379
+ See [Shortcuts Guide](https://docs.mind-elixir.com/docs/guides/shortcuts) for detailed information.
380
+
381
+ ## Who's using
382
+
383
+ - [Mind Elixir Desktop](https://desktop.mind-elixir.com/)
384
+
385
+ ## Ecosystem
386
+
387
+ - [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)
388
+ - [@mind-elixir/node-menu-neo](https://github.com/ssshooter/node-menu-neo)
389
+ - [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)
390
+ - [@mind-elixir/export-html](https://github.com/ssshooter/export-html)
391
+ - [mind-elixir-react](https://github.com/ssshooter/mind-elixir-react)
392
+
393
+ PRs are welcome!
394
+
395
+ ## Development
396
+
397
+ ```
398
+ pnpm i
399
+ pnpm dev
400
+ ```
401
+
402
+ Test generated files with `dev.dist.ts`:
403
+
404
+ ```
405
+ pnpm build
406
+ pnpm link ./
407
+ ```
408
+
409
+ Update docs:
410
+
411
+ ```
412
+ # Install api-extractor
413
+ pnpm install -g @microsoft/api-extractor
414
+ # Maintain /src/docs.ts
415
+ # Generate docs
416
+ pnpm doc
417
+ pnpm doc:md
418
+ ```
419
+
420
+ Use [DeepWiki](https://deepwiki.com/SSShooter/mind-elixir-core) to learn more about Mind Elixir
421
+
422
+ ## Thanks
423
+
424
+ - [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla)
425
+
426
+ ## Contributors
427
+
428
+ Thanks for your contributions to Mind Elixir! Your support and dedication make this project better.
429
+
430
+ <a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
431
+ <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core" />
432
+ </a>