open-index/open-npm huggingface dataset:
npm package: @mind-elixir/export-xmind
Description: `@mind-elixir/export-xmind` is a plugin of [mind-elixir-core](https://github.com/ssshooter/mind-elixir-core). You can use `@mind-elixir/export-xmind` to export a `.xmind` file.
Latest version: 2.0.1

# @mind-elixir/export-xmind

`@mind-elixir/export-xmind` is a plugin of [mind-elixir-core](https://github.com/ssshooter/mind-elixir-core). You can use `@mind-elixir/export-xmind` to export a `.xmind` file.

## Install

```
npm i @mind-elixir/export-xmind jszip file-saver
```

## How To Use

### Use As A Plugin

```javascript
import MindElixir from 'mind-elixir'
import exportXmind from '@mind-elixir/export-xmind'

const mind = new MindElixir(options)
mind.install(exportXmind)
mind.init(data)

const blob = await mind.exportXmind() // get blob

mind.exportXmindFile(fileName) // download file
```

### MindElixir Data To Xmind

```javascript
import { data2Xmind } from '@mind-elixir/export-xmind'
// use this way to avoid creating instance
const blob = await data2Xmind(JSON.parse(JSON.stringify(data))) // data returned by getData()
```
npm package: @mind-elixir/node-menu
Description: It was originally a built-in plugin of [mind-elixir](https://github.com/ssshooter/mind-elixir-core), but it was extracted after version 2.0.0 because it should be highly customizable. Please feel free to fork this repository and create your own node menu.
Latest version: 5.0.1

# @mind-elixir/node-menu

It was originally a built-in plugin of [mind-elixir](https://github.com/ssshooter/mind-elixir-core), but it was extracted after version 2.0.0 because it should be highly customizable. Please feel free to fork this repository and create your own node menu.

[Playground](https://codepen.io/ssshooter/pen/NWJwBNV)

## How To Use

```
npm i @mind-elixir/node-menu
```

```javascript
import MindElixir from 'mind-elixir'
import nodeMenu from '@mind-elixir/node-menu'
import '@mind-elixir/node-menu/dist/style.css'

const mind = new MindElixir(options)
mind.install(nodeMenu)
mind.init(data)
```
npm package: @mind-elixir/node-menu-neo
Description: It was originally a built-in plugin of [mind-elixir](https://github.com/ssshooter/mind-elixir-core), but it was extracted after version 2.0.0 because it should be highly customizable. Please feel free to fork this repository and create your own node menu.
Latest version: 1.0.4

# @mind-elixir/node-menu-neo

It was originally a built-in plugin of [mind-elixir](https://github.com/ssshooter/mind-elixir-core), but it was extracted after version 2.0.0 because it should be highly customizable. Please feel free to fork this repository and create your own node menu.

## How To Use

```
npm i @mind-elixir/node-menu-neo
```

```javascript
import MindElixir from 'mind-elixir'
import nodeMenu from '@mind-elixir/node-menu-neo'

const mind = new MindElixir(options)
mind.install(nodeMenu)
mind.init(data)
```

## Tech Stack

- Svelte
- Vite
- Typescript

## Thanks

- https://undraw.co/illustrations
npm package: @mind-kit/outline-editor
Description: 大纲编辑器。
Latest version: 0.2.0

# @mind-kit/outlineEditor

大纲编辑器。

react 技术栈。
类似于幕布，workflowy，roamResearch，roamEdit等大纲类笔记所用。



## 如何运行

1. 运行一个例子。`git clone` 并 `npm start`。

2. 使用组件 - 
   ```jsx
    import { EditableTree } from "./EditableTree";
    import { data } from "./data";
    function App() {
        return <EditableTree treeData={data} 
            onDataChange={data=>console.log(data)}
        />;
    }
   ```
   
1. TODO 🏃， 作为Component发布。进一步设计封装好props、event，做好storybook之类的东西。



## 如何工作

1. 节点内容（待编辑内容）以`treeData`属性传入。
2. 节点内容借助react-sorted-tree展现。
3. 当树节点获得焦点时，转换到可编辑状态，节点内容可以编辑，变化以`onDataChange`事件传出。
4. TODO 🏃，当退出可编辑状态，特殊含义的文字转换为可操作的交互元素，比如链接，使editor可以直接用于相应交互操作。



## 操作说明

### 键盘操作

| 键盘操作       | 编辑中状态                                                   | 未在编辑中                                                   |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 上、下方向     | 变化选中的节点，本节点退出编辑状态，编辑生效                 | 变化选中的节点                                               |
| 空格           | 输入空格符                                                   | 进入编辑中状态                                               |
| esc            | 退出编辑状态，编辑生效                                       |                                                              |
| enter          | 退出编辑状态，编辑生效。生成新节点，位于本节点之下，同本节点同级。 | 生成新节点，位于本节点之下，同本节点同级。                   |
| tab、shift+tab | 变化本节点的级别，tab为缩进，即级别+1。shift+tab为反缩进，级别-1。 | 变化本节点的级别，tab为缩进，即级别+1。shift+tab为反缩进，级别-1。 |
### 鼠标操作
| 鼠标操作               | 编辑中状态                             | 未在编辑中                       |
| ---------------------- | -------------------------------------- | -------------------------------- |
| 点击节点中部，文字部分 |                                        | 选中点击的节点，并进入编辑状态。 |
| 点击节点右端           | 退出编辑状态，编辑生效。               | 选中点击的节点。                 |
| 拖动左侧圆点           | 退出编辑状态，编辑生效，拖动节点移动。 | 拖动节点移动。                   |



## 参考

| props        |                   |                                                     |
| ------------ | ----------------- | --------------------------------------------------- |
| treeData     |                   | TreeNode[] 必须，待编辑的初始内容。一级节点的数组。 |
|              | TreeNode.id       | string，必须，节点id，需要唯一。                    |
|              | TreeNode.text     | string，必须，节点文本，用于被编辑，和展示。        |
|              | TreeNode.children | TreeNode[]，可选，节点的子节点。                    |
|              | TreeNode.expanded | boolean，可选，初始时节点是否展开。                 |
| onDataChange |                   | (TreeNode[])=>void，事件监听，当内容变动时触发。    |



## 使用到的技术

1. react-sort-tree https://github.com/frontend-collective/react-sortable-tree 
2. react-contenteditabl https://github.com/lovasoa/react-contenteditable 由于一个中文输入法相关的bug，已强改，暂未单独开源。见 ./src/ContentEditable.ts



## 路线图/需要帮助

1. 展现为可交互。当退出可编辑状态，特殊含义的文字转换为可操作的交互元素，比如链接，使editor可以直接用于相应交互操作。
2. 多行或者说变高度的node没有考虑。
3. 嵌入网页等复杂内容。
4. 需要大量测试和debug。目前测试很有限。
5. storybook之类的封装。
6. contentediable部分可以进一步封装为一个组件。
npm package: @mind-oss/react-cyclonedx
Description: A React component library for displaying CycloneDX-formatted SBOMs.
Latest version: 0.3.0

# react-cyclonedx

A React component library for displaying CycloneDX-formatted SBOMs.

## Overview

This library provides composable components that let you build custom views for
your CycloneDX data.

Combine together the provided react components or create your own to display
exactly the information you need from your SBOM.

## Installation

```bash
npm install @mind-oss/react-cyclonedx
```

## Quick Start

Build a simple component detail view using provided entries:

```tsx
import { ComponentDetail, ComponentEntryName, ComponentEntryDescription } from '@mind-oss/react-cyclonedx'

function () {
  return (
    <ComponentDetail component={data}>
      <ComponentEntryName />
      <ComponentEntryDescription />
    </ComponentDetail>
  )
}
```

The same principle applies to create component overviews:

```tsx
import { ComponentDetail, ComponentEntryName, ComponentEntryDescription } from '@mind-oss/react-cyclonedx'

function () {
  return (
    <ComponentsTable components={data}>
      <ComponentEntryName />
      <ComponentEntryDescription />
    </ComponentsTable>
  )
}
```

## Custom Entries

Create custom table entries to display domain-specific data:

```tsx
import { ComponentDetail, ComponentEntryName, TableEntry } from '@mind-oss/react-cyclonedx'

export function CustomEntry() {
  return (
    <TableEntry label={'Custom Tag'} sortable={(row: Component) => row.properties.find(x => x.name === 'custom')} size={0.4}>
      {(row: Component) => (row.properties.find(x => x.name === 'custome')}
    </TableEntry>
  )
}

function () {
  return (
    <ComponetnDetail component={data}>
      <ComponentEntryName />
      <CustomEntry />
    </ComponentDetail>
  )
}
```

## Development

Running this library in dev mode require using node version 20. If your system
provide an older version of node, use [nvm](https://www.nvmnode.com/).

Use the following commands to set your node version to the latest LTS.

```bash
nvm install lts/jod
nvm use lts/jod
nvm alias default lts/jod
```

Install the dependencies and run the storybook dev server with:

```
npm install
npm run storybook
```