[Vue3 + TS + Vite] TipTap中遍历文档树所有节点，存储并设置所有标题

const load_headings = () => {
  const headings = [] as any[]
  if (!editor.value) return
  const transaction = editor.value.state.tr
  if (!transaction) return

/**
descendants 是一个用于遍历文档树中所有节点的方法。
它是一个迭代器，
可以用来访问文档中的每一个节点，包括文本节点和容器节点。

node 是当前遍历到的节点，
pos 是节点在文档中的位置，
而 parent 是节点的父节点

node.type.name 可以用来获取节点的类型名称，
node.textContent（或 node.text 对于纯文本节点）
则可以用来获取节点的文本内容。
**/
  editor.value?.state.doc.descendants((node, pos, parent) => {
    if (node.type.name === 'heading') {
      const start = pos
      const end = pos + node.content.size
      const id = `heading-${headings.length + 1}`
      if (node.attrs.id !== id) {
      	//使用事务来更新该节点的属性
      	//指定节点类型留空(undefined)，只是更新节点的属性
        transaction?.setNodeMarkup(pos, undefined, {
          ...node.attrs,
          //添加或覆盖 id 属性
          id
        })
      }
	  //将标题的相关信息添加到 headings 数组中
      headings.push({
        level: node.attrs.level,
        text: node.textContent,
        start,
        end,
        id
      })
    }
  })

  //告诉编辑器不要将此事务添加到历史中
  transaction?.setMeta('addToHistory', false)
  //不要触发常规的视图更新（为了避免不必要的 UI 渲染）
  transaction?.setMeta('preventUpdate', true)
  //提交事务，这会应用所有的更改到文档状态
  editor.value?.view.dispatch(transaction)
  //将收集到的标题信息更新到全局状态或存储中
  use_editor_store.setHeadings(headings)
}