intable 0.0.8 → 0.0.9

package/packages/intable/README.md

@@ -1,379 +0,0 @@
----
-name: intable
-description: A high-performance, plugin-based Excel-like table component for SolidJS with virtual scroll, cell editing, validation, copy/paste, row grouping, tree data, column/row drag, merge cells, diff view, and multi-framework support (Vue, React).
----
-
-# intable
-
-## 特征
-
-- 类似 Excel 的表格组件
-- 单元格多选、复制、粘贴
-- 单元格编辑、数据校验
-- 列宽、行高可调整
-- 列、行可拖拽
-- 虚拟滚动
-- 数据分组
-- 行展开
-- 树嵌套
-- 插件易扩展
-- 多框架支持（Vue、React）
-- 多 UI库支持（Antd、ElementPlus）
-
-## 快速开始
-
-<details>
-<summary>solid-js</summary>
-
-**安装**
-
-```sh
-pnpm add intable
-```
-
-**使用**
-
-```jsx
-import Intable from 'intable'
-
-const App = () => {
-  const columns = [
-    { id: 'name', name: '名称' },
-    { id: 'date', name: '日期' },
-    { id: 'address', name: '地址' },
-  ]
-
-  const data = [
-    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  ]
-
-  return <Intable data={data} columns={columns} />
-}
-```
-</details>
-
-<details>
-<summary>vue</summary>
-
-**安装**
-
-```sh
-pnpm add @intable/vue
-```
-
-**使用**
-
-```html
-<template>
-  <Intable :data="data" :columns="columns" />
-</template>
-
-<script setup>
-import Intable from '@intable/vue'
-
-const columns = [
-  { id: 'name', name: '名称' },
-  { id: 'date', name: '日期' },
-  { id: 'address', name: '地址' },
-]
-
-const data = [
-  { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-]
-</script>
-```
-</details>
-
-<details>
-<summary>react</summary>
-
-**安装**
-
-```sh
-pnpm add @intable/react
-```
-
-**使用**
-
-```jsx
-import Intable from '@intable/react'
-
-const App = () => {
-  const columns = [
-    { id: 'name', name: '名称' },
-    { id: 'date', name: '日期' },
-    { id: 'address', name: '地址' },
-  ]
-
-  const data = [
-    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
-  ]
-
-  return <Intable data={data} columns={columns} />
-}
-```
-</details>
-
-## Props
-
-| 属性名       | 描述         | 类型                            | 默认值  |
-| ------------ | ------------ | ------------------------------- | ------- |
-| data         | 数据         | any[]                           |         |
-| columns      | 展示列       | Column[]                        |         |
-| rowKey       | 行唯一键字段 | string                          | `'id'`  |
-| index        | 显示序号     | boolean                         | false   |
-| border       | 显示纵向边框 | boolean                         | false   |
-| stickyHeader | 表头吸顶     | boolean                         | false   |
-| size         | 尺寸         | `'large' \| 'default' \| 'small'` | —     |
-| plugins      | 插件列表     | Plugin[]                        | `[]`    |
-
-## Column
-
-| 属性名   | 描述                   | 类型                          |
-| -------- | ---------------------- | ----------------------------- |
-| id       | 字段名，对应数据 key   | string \| symbol              |
-| name     | 表头显示名称           | string                        |
-| width    | 列宽（px）             | number                        |
-| fixed    | 固定列                 | `'left' \| 'right'`           |
-| render   | 自定义渲染器           | `string \| Render`            |
-| enum     | 枚举映射（用于渲染）   | `Record<string,any> \| {label?,value}[]` |
-| editable | 是否可编辑             | boolean                       |
-| editor   | 编辑器类型或自定义实现 | `string \| Editor`            |
-| resizable| 是否允许调整列宽       | boolean                       |
-
-## 插件
-
-插件通过 `plugins` 属性传入，部分插件需从对应路径手动引入。
-
----
-
-### VirtualScrollPlugin — 虚拟滚动
-
-大数据量下只渲染可见行列，显著提升性能。
-
-```jsx
-import { VirtualScrollPlugin } from 'intable/plugins/VirtualScrollPlugin'
-
-<Intable
-  plugins={[VirtualScrollPlugin]}
-  virtual={{
-    y: { estimateSize: () => 40, overscan: 10 },  // 行虚拟化参数
-    x: { overscan: 5 },                           // 列虚拟化参数
-  }}
-/>
-```
-
----
-
-### EditablePlugin — 单元格编辑
-
-在 Column 上设置 `editable: true` 开启单元格编辑，双击或输入字符进入编辑状态。
-
-```jsx
-const columns = [
-  { id: 'name', name: '姓名', editable: true },
-  { id: 'age',  name: '年龄', editable: true, editor: 'number' },
-  { id: 'type', name: '类型', editable: true, editor: 'select', enum: { 1: 'A', 2: 'B' } },
-  { id: 'date', name: '日期', editable: true, editor: 'date' },
-]
-
-<Intable columns={columns} onDataChange={setData} />
-```
-
-内置编辑器类型：`text`（默认）、`number`、`select`、`date`、`time`、`datetime`、`switch`、`checkbox`、`rate`、`color`、`file`。
-
-搭配 UI 库插件可直接使用对应组件：
-- **Antd**：`import { AntdPlugin } from '@intable/react/plugins/antd'`
-- **Element Plus**：`import { ElementPlusPlugin } from '@intable/vue/plugins/element-plus'`
-
----
-
-### RowSelectionPlugin — 行选择
-
-```jsx
-<Intable
-  rowSelection={{
-    enable: true,
-    multiple: true,              // 多选，默认 true
-    value: selectedRows,         // 受控选中值
-    selectable: row => row.age > 18,  // 可选条件
-    onChange: rows => setSelected(rows),
-  }}
-/>
-```
-
----
-
-### ExpandPlugin — 行展开
-
-点击行首箭头展开自定义内容区域。
-
-```jsx
-<Intable
-  expand={{
-    enable: true,
-    render: ({ data, y }) => <div>详情：{data.name}</div>,
-  }}
-/>
-```
-
----
-
-### RowGroupPlugin — 行分组
-
-按指定字段对行进行分级树形分组，支持展开/折叠。
-
-```jsx
-<Intable
-  rowGroup={{ fields: ['type', 'subType'] }}
-/>
-```
-
----
-
-### TreePlugin — 树形数据
-
-渲染嵌套 `children` 字段的树状数据，支持展开/折叠，自动缩进。
-
-```jsx
-const data = [
-  { id: 1, name: '总部', children: [
-    { id: 2, name: '研发部' },
-    { id: 3, name: '产品部', children: [
-      { id: 4, name: '设计组' },
-    ]},
-  ]},
-]
-
-<Intable
-  tree={{ children: 'children' }}  // 子节点字段名，默认 'children'
-  data={data}
-  columns={[{ id: 'name', name: '名称' }]}
-/>
-```
-
----
-
-### ResizePlugin — 调整列宽 / 行高
-
-拖动表头右侧边框调整列宽，拖动行底部边框调整行高。
-
-```jsx
-<Intable
-  resizable={{
-    col: { enable: true, min: 60, max: 600 },
-    row: { enable: true, min: 28, max: 200 },
-  }}
-  onColumnsChange={cols => setColumns(cols)}
-/>
-```
-
-也可在单列上单独控制：
-
-```js
-{ id: 'name', name: '姓名', resizable: false }  // 禁止该列拖拽
-```
-
----
-
-### DragPlugin — 列 / 行拖拽排序
-
-长按后拖拽列标题或行首单元格可重新排序。
-
-```jsx
-<Intable
-  colDrag={true}  // 开启列拖拽
-  rowDrag={true}  // 开启行拖拽
-  onColumnsChange={cols => setColumns(cols)}
-/>
-```
-
----
-
-### HistoryPlugin — 撤销 / 重做
-
-记录数据变更历史，支持 `Ctrl+Z` / `Ctrl+Y`。
-
-```jsx
-import { HistoryPlugin } from 'intable/plugins/HistoryPlugin'
-
-<Intable plugins={[HistoryPlugin]} />
-```
-
-通过命令调用：
-```js
-store.history.undo()
-store.history.redo()
-```
-
----
-
-### DiffPlugin — 数据差异对比
-
-将当前数据与快照进行比较，高亮新增/删除/修改行，支持提交。
-
-```jsx
-import { DiffPlugin } from 'intable/plugins/DiffPlugin'
-
-<Intable
-  plugins={[DiffPlugin]}
-  diff={{
-    added: true,    // 高亮新增行，默认 true
-    removed: true,  // 高亮删除行，默认 true
-    changed: true,  // 高亮修改行，默认 true
-    onCommit: (data, { added, removed, changed }) => save(data),
-  }}
-/>
-```
-
-`Ctrl+S` 触发提交，或通过命令：
-```js
-store.commands.diffCommit()
-```
-
----
-
-### CellMergePlugin — 单元格合并
-
-通过 `merge` 回调或 Column 的 `mergeRow` 快捷属性合并相邻单元格。
-
-```jsx
-// 方式一：全局 merge 回调
-<Intable
-  merge={(row, col, y, x) => {
-    if (col.id === 'name') {
-      let rowspan = 1
-      while (data[y + rowspan]?.name === row.name) rowspan++
-      return rowspan > 1 ? { rowspan } : null
-    }
-  }}
-/>
-
-// 方式二：列级 mergeRow 快捷属性（自动合并相邻等值行）
-const columns = [
-  { id: 'type', name: '类型', mergeRow: true },
-  { id: 'name', name: '名称' },
-]
-<Intable columns={columns} />
-```
-
----
-
-### CellSelectionPlugin — 单元格多选
-
-鼠标拖拽或 `Shift+点击` 选择矩形区域，箭头键移动焦点。
-
----
-
-### CopyPastePlugin — 复制粘贴
-
-`Ctrl+C` 复制选中区域为 TSV 格式，`Ctrl+V` 粘贴。

package/packages/intable/package.json

@@ -1,51 +0,0 @@
-{
-  "name": "intable",
-  "version": "0.0.8",
-  "license": "MIT",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": "./dist/index.js",
-    "./theme/*": "./dist/theme/*",
-    "./*": {
-      "import": "./dist/*.js",
-      "types": "./dist/*.d.ts"
-    }
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@solid-primitives/bounds": "^0.1.3",
-    "@solid-primitives/deep": "^0.3.3",
-    "@solid-primitives/event-listener": "^2.4.3",
-    "@solid-primitives/history": "^0.2.2",
-    "@solid-primitives/keyboard": "^1.3.3",
-    "@solid-primitives/media": "^2.3.3",
-    "@solid-primitives/memo": "^1.4.3",
-    "@solid-primitives/mutation-observer": "^1.2.2",
-    "@solid-primitives/pointer": "^0.3.3",
-    "@solid-primitives/props": "^3.2.2",
-    "@solid-primitives/resize-observer": "^2.1.3",
-    "@solid-primitives/scroll": "^2.1.3",
-    "@solid-primitives/storage": "^4.3.3",
-    "@solid-primitives/utils": "^6.3.2",
-    "@tanstack/solid-virtual": "^3.13.12",
-    "es-toolkit": "^1.39.10",
-    "floating-ui-solid": "^1.0.63",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "tinykeys": "^3.0.0",
-    "uuid": "^13.0.0",
-    "zod": "^4.3.6"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "diff": "^8.0.2"
-  }
-}

package/packages/intable/src/assets/ClearFormat.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="m14.031 1.888l9.657 9.657l-8.345 8.345l-.27.272H20v2H6.748L.253 15.667zm.322 16.164l6.507-6.507l-6.829-6.828l-6.828 6.828l6.828 6.828l.32-.323zM5.788 12.96l-2.707 2.707l4.495 4.495h4.68l.365-.37z" />
-</svg>

package/packages/intable/src/assets/Forms.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-    d="M12 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3m7-14h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7M5 7H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1m12-5h.01M13 12h.01" />
-</svg>

package/packages/intable/src/assets/MergeCell.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor"
-    d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z" />
-</svg>

package/packages/intable/src/assets/SplitCell.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor"
-    d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z" />
-</svg>

package/packages/intable/src/assets/gap.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="M19 5h-4v14h4v-2h-2V7h2zM5 5h4v14H5v-2h2V7H5zm8 2v10h-2V7z" />
-</svg>

package/packages/intable/src/assets/loading.svg

@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g>
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)" />
-    <rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
-    <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
-  </g>
-</svg>

package/packages/intable/src/assets/paint.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-    color="currentColor">
-    <path
-      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10c.842 0 2 .116 2-1c0-.609-.317-1.079-.631-1.546c-.46-.683-.917-1.359-.369-2.454c.667-1.333 1.778-1.333 3.482-1.333c.851 0 1.851 0 3.018-.167c2.101-.3 2.5-1.592 2.5-3.5M7 15.002L7.009 15" />
-    <circle cx="9.5" cy="8.5" r="1.5" />
-    <circle cx="16.5" cy="9.5" r="1.5" />
-  </g>
-</svg>

package/packages/intable/src/assets/solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

package/packages/intable/src/components/Columns.tsx

@@ -1,86 +0,0 @@
-import { createEffect, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from 'solid-js'
-import { render } from 'solid-js/web'
-import { createMutationObserver } from '@solid-primitives/mutation-observer'
-import { createElementBounds } from '@solid-primitives/bounds'
-import { clamp, sum } from 'es-toolkit'
-import { usePointerDrag } from '../hooks'
-
-export const Columns = (attrs: Partial<{ gap: number }>) => {
-  const [_, props] = splitProps(mergeProps({ gap: 0 }, attrs), ['children'])
-
-  let ref!: HTMLElement
-
-  const [children, setChildren] = createSignal<HTMLElement[]>([])
-  const cols = createMemo(() => children().length)
-  
-  const update = () => setChildren([...ref!.querySelectorAll('& > [tiptap-is="column"]')])
-  onMount(() => update())
-  createMutationObserver(() => ref, { childList: true }, () => {
-    update()
-    container.parentElement || ref.insertBefore(container, ref.firstChild)
-  })
-
-  const container = <div style='position: absolute; z-index: 1' /> as HTMLElement
-  const bounds2 = createElementBounds(() => container, { trackScroll: false })
-  createEffect(() => {
-    ref.insertBefore(container, ref.firstChild)
-    onCleanup(() => container.remove())
-  })
-
-  createEffect(() => {
-    children().forEach((el, i) => {
-      if (i == children().length - 1) return
-      const dispose = render(() => <Hand index={i} gap={props.gap} reference={el} bounds2={bounds2} onAdd={props.onAdd} />, container)
-      onCleanup(dispose)
-    })
-    const cw = ref.offsetWidth
-    const tgap = (cols() - 1) * props.gap
-    const meanw = (cw - tgap) / cols()
-    children().forEach(el => el.style.width ||= `${meanw}px`)
-    const ws = children().map(el => el.offsetWidth)
-    const sumw = sum(ws) + tgap
-    const sgap =  tgap / cols()
-    children().forEach((el, i) => el.style.width = `calc(${(ws[i] + sgap) / sumw * 100}% - ${sgap}px)`)
-  })
-  
-  return (
-    <div ref={ref} style={`display: flex; gap: ${props.gap}px;`} {...props} cols={cols()}>
-      {attrs.children}
-    </div>
-  )
-}
-
-const Hand = (props) => {
-  const bounds = createElementBounds(props.reference, { trackScroll: false })
-  
-  const style = createMemo(() => (`
-    position: absolute;
-    width: ${props.gap}px;
-    height: ${bounds.height}px;
-    transform: translate(${bounds.right - props.bounds2.left}px, ${bounds.top - props.bounds2.top}px);
-  `))
-
-  let el: HTMLElement
-  usePointerDrag(() => el, {
-    start(e, move) {
-      const col = props.reference!
-      const container = col.parentElement!, cw = container.offsetWidth
-      const [cols, gap] = [+container.getAttribute('cols')!, +container.getAttribute('gap')!]
-      const [left, right] = [col, col.nextElementSibling as HTMLElement]
-      const [lw, rw] = [left?.offsetWidth || 0, right?.offsetWidth || 0]
-      const minw = cw * .05, maxw = lw + rw - minw
-      const sgap = (cols - 1) * gap / cols
-
-      move((e, { ox }) => {
-        left && (left.style.width = `calc(${(clamp(lw + ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`)
-        right && (right.style.width = `calc(${(clamp(rw - ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`)
-      })
-    },
-  })
-  
-  return (
-    <div ref={el} ref={props.ref} class='col-hand' style={style()} contenteditable='false'>
-      {props.onAdd && <div class='dot' onClick={() => props.onAdd(props.index)} on:pointerdown={{ handleEvent: e => e.stopPropagation() }} />}
-    </div>
-  )
-}

package/packages/intable/src/components/DocTree.tsx

@@ -1,36 +0,0 @@
-import type { Editor, NodeType } from '@tiptap/core'
-import { useMemoAsync } from '../hooks'
-import { createEffect, createMemo, createSignal, splitProps } from 'solid-js'
-import { delay } from 'es-toolkit'
-import { Tree } from './Tree'
-
-export function DocTree(_: { editor: Editor }) {
-  const [props, attrs] = splitProps(_, ['editor'])
-
-  const [count, setCount] = createSignal(0)
-  createEffect(() => props.editor.on('update', () => setCount(v => ++v)))
-
-  const json = useMemoAsync(() => (count(), delay(300).then(() => props.editor.getJSON())), {})
-
-  const headings = createMemo(() => {
-    return (function walker (node: NodeType, queue = [], queue2 = []) {
-      if (node.type === 'heading') {
-        let i = queue.length
-        while (i--) if (queue[i].level < node.attrs.level) break
-        const item = { label: node.content?.map(e => e.text).join(''), level: node.attrs.level }
-        queue.push(item)
-        if (i > -1) (queue[i].children ??= []).push(item)
-        else queue2.push(item)
-      } else {
-        node.content?.forEach(e => walker(e, queue, queue2))
-      }
-      return queue2
-    })(json())
-  })
-
-  return (
-    <div class="doc-tree" {...attrs}>
-      <Tree data={headings()} class='min-h-40 max-h-100 overflow-auto' />
-    </div>
-  )
-}