let view = new EditorView({
  state,
  nodeViews: {
    paragraph(node) { return new ParagraphView(node) }
  }
})

class ParagraphView {
  constructor(node) {
    // 将属性 contentDOM 和属性 dom 指向同一个 HTML 元素
    // 则 paragraph 节点的内容会直接渲染在外层容器里
    // 让 nodeView 的行为和普通的段落节点类似
    this.dom = this.contentDOM = document.createElement("p")
    if (node.content.size == 0) this.dom.classList.add("empty")
  }
}

update⁠?: fn(
  // 第一个参数是该 nodeView 所对应（新的）节点
  // ⚠️ 在新的状态下，甚至连节点类型也可以不同，只要新旧两种节点类型都对应同一种 nodeView 就可以
  node: Node,
  // 第二个参数是一个数组，它的元素是 decoration 装饰器对象，以表示应用到该节点的一系列装饰器
  // 这些装饰器可以是 node decoration 节点装饰器对象或 inline decoration 内联装饰器对象
  decorations: readonly Decoration[],
  // 第三个参数是一个对象，表示应用于节点内容/子节点上的装饰器
  innerDecorations: DecorationSource
) → boolean

let view = new EditorView({
  state,
  nodeViews: {
    paragraph(node) { return new ParagraphView(node) }
  }
})

class ParagraphView {
  constructor(node) {
    this.dom = this.contentDOM = document.createElement("p")
    if (node.content.size == 0) this.dom.classList.add("empty")
  }
  // 更精细地控制 nodeView 如何更新
  update(node) {
    // 如果 nodeView 所对应的 node 节点类型（与原节点类型）不同，则返回 false
    // 表示原来的 nodeView 实例无法复用，需要重新调用构建函数创建一个新的 nodeView 实例
    // 出现这种是因为存在其他类型的节点和 paragraph 段落节点都对应 paragraphView 节点视图
    // 一般不同的节点类型所对应 paragraphView 节点视图最终在页面上渲染的 DOM 元素也不同，所以原有的 nodeView 不能复用，需要创建一个新的实例
    if (node.type.name != "paragraph") return false

    // 根据 paragraph 节点是否包含内容，为外层容器设置不同的 css class 类名
    if (node.content.size > 0) this.dom.classList.remove("empty")
    else this.dom.classList.add("empty")

    // 返回 true 表示原来的 nodeView 可以复用，相应地在页面上渲染的 DOM 元素也可以复用（在该例子中只是更改了 CSS class 类名）
    return true
  }
}

// 内嵌编辑器分发事务前，所需执行的一些额外处理
dispatchInner(this: FootnoteView, tr: Transaction) {
  // 将事务应用于内嵌编辑器中
  // 💡 this 指向 nodeView 对象；this.innerView 是嵌套编辑器的视图对象
  // 使用方法 applyTransaction 将事务应用到编辑器当前状态上
  // 该方法返回一个对象 { state: EditorState, transactions: [Transaction] } 包含（关于这次状态更新的）详细信息
  // 其中属性 state 是新的编辑器状态，属性 transactions 是在此过程中（包括通过插件）所应用的诸多事务
  const {state, transactions} = this.innerView!.state.applyTransaction(tr);
  // 直接基于新的编辑器状态来更新编辑器的视图
  this.innerView!.updateState(state);

  // 判断内嵌编辑器当前所接收到的事务 tr 是否来自于/起源于外层编辑器
  if (!tr.getMeta("fromOutside")) {
    // 如果 tr 不是由外层编辑器引起的，即当前事务由内嵌编辑器分发的，例如用户在内嵌编辑器上进行操作（通过敲击键盘输入/删除文档内容）
    // ⚠️ 但并不包含通过按 Mod-z 或 Mod-y 快捷键对文档进行修改的操作，因为在前面配置插件时，已经将按下 Mod-z 或 Mod-y 快捷键分发指令的主体设置为外层编辑器
    // 则需要继续执行后续操作，将内嵌编辑器的修改同步到外层编辑器上

    // 为外层编辑器创建一个空事务
    let outerTr = this.outerView.state.tr;

    // 创建一个位置映射器 stepMap 实例，用于将当前事务所包含的各个操作步骤 step 进行偏移，让这些 step 原本只适用于操作内嵌编辑器的文档，变得适用于外层的编辑器
    // 所需偏移量是 this.getPos() + 1，即 nodeView 所对应的 node 节点在外层编辑器的位置，再加上 1（这 1 个 token 表示 node 的起始标签）
    // 原来的事务适用于嵌套编辑器，而内嵌编辑器的起始位置为 0；那么经过偏移后，起始位置变成了 node 内容的开始位置
    // 所以将这些步骤作用于外层编辑器时，就是对 node 的内容进行修改
    // ⚠️ 可以将原本适用于内嵌编辑器的步骤，应用于外层编辑器（对 node 的内容进行修改）除了要进行适当的位置偏移，还需要满足一个隐含条件，就是内层编辑器的内容和（外层编辑器）node 节点的内容（在修改前）是同步的（当然它们的 schema 也需要是相同的）
    // 这样就可以实现内嵌编辑器的修改，同步对（外层编辑器）node 节点的内容进行修改
    // 关于 StepMap 的作用可以参考 https://discuss.prosemirror.net/t/appending-one-block-to-another-preserving-cursor-position/942
    let offsetMap = StepMap.offset(this.getPos()! + 1);

    // 遍历已经应用到内嵌编辑器的诸多事务
    for (let i = 0; i < transactions.length; i++) {
      // 获取每个事务中所包含的操作步骤 steps
      let steps = transactions[i].steps;

      // 遍历各个操作步骤
      for (let j = 0; j < steps.length; j++) {
        // 将各个操作步骤进行适当的位置偏移，以便适用于外部编辑器
        const offsetStep = steps[j].map(offsetMap);

        if(offsetStep) {
          // 将经过位置偏移后的步骤添加到（即将应用到外部编辑器的）事务 outerTr 上
          outerTr.step(offsetStep);
        }
      }
    }

    // 如果事务 outerTr 含有操作步骤，就将其分发/应用到外层编辑器上
    if (outerTr.docChanged) {
      this.outerView.dispatch(outerTr);
    }
  }
}

// 通过节点视图对象的属性 nodeView.update()
// 以更精细地控制 nodeView 如何更新（是否可以复用该实例来表示最新的 node 状态，还是需要创建一个新的实例）
// 入参 node 是节点视图所对应（具有最新状态的）节点
update(node: ProseMirrorNode) {
  if (!node.sameMarkup(this.node)) {
    // 如果最新状态的节点的类型和原本节点 this.node 的类型不同，则返回 false，表示需要创建一个新的 nodeView 实例（不能复用当前的实例）
    return false;
  }

  // 如果最新状态的节点和原节点类型（所具有的样式标记）相同，则将将其赋值为 this.node 以更新 nodeView 所对应的节点
  this.node = node;

  // 若此时内部编辑器视图存在（footnote 被点开时）
  if (this.innerView) {
    // 获取内嵌编辑器的状态（未更新前）
    let state = this.innerView.state;

    // 对比（在外部编辑器的）node 节点的内容与内嵌编辑器的内容（两者都是 fragment 片段）
    // fragment.findDiffStart(otherFragment) 从左往右找出两个片段之间的差异的起始位置（遵循 index schema 规则）
    let start = node.content.findDiffStart(state.doc.content);

    // 如果两个片段存在差异，则继续执行后续操作
    // 需要进行内外编辑器的内容同步，基于（外部编辑器）node 节点的内容，对内部编辑器的内容进行修改
    if (start != null) {
      // fragment.findDiffEnd(otherFragment) 从左往右找出两个片段之间的差异的结束位置（遵循 index schema 规则）
      const endResult = node.content.findDiffEnd(state.doc.content);

      if (endResult) {
        let {a: endA, b: endB} = endResult;
        // 为了提高查找的效率，寻找差异时起始位置是从左往右查找，而结束位置是从右往左查找
        // 但是在特定的场景下，可能存在倒置的情况，即 start 比 end 更大，则需要进行校正
        // 具体可以参考 https://discuss.prosemirror.net/t/overlap-handling-of-finddiffstart-and-finddiffend/2856/4
        let overlap = start - Math.min(endA, endB);

        if (overlap > 0) {
          endA += overlap;
          endB += overlap
        }

        // 使用 node.slice(start, endA) 切片（基于外部编辑器 node 节点的内容构建）替换内嵌编辑器的相应部分，实现内外编辑器内容的同步
        this.innerView.dispatch(
          state.tr
            .replace(start, endB, node.slice(start, endA))
            // 并为该事务 tr 添加元信息，避免触发方法 dispatchTransaction 相应代码而陷入无限循环
            .setMeta("fromOutside", true));
      }
    }
  }
  // 返回 true 表示节点视图更新完成
  return true;
}

// 定义一个类 SectionView，其实例化对象是一个 nodeView 节点视图
// 用于自定义 section 节点的渲染展示方式和交互行为方式
class SectionView implements NodeView {
  dom: HTMLElement;
  contentDOM: HTMLElement;
  private foldButton: HTMLElement;
  private folded: boolean = false; // 记录该 section 内容的折叠/展开状态

  constructor(_node: Node, view: EditorView, getPos: () => number | undefined, deco: readonly Decoration[]) {
    // 通过 nodeView 的属性 dom 自定义该节点视图渲染到页面的 DOM 元素
    // 其结构示例如下：
    //  <section>
    //    <header contenteditable="false">
    //      <button>▵</button>
    //    </header>
    //    <div>
    //      <!-- content -->
    //    </div>
    // </section>
    this.dom = document.createElement("section");
    // section 的顶栏，包含一个可交互的按钮，点击可以 toggle 折叠/展开该节点的内容
    const header = this.dom.appendChild(document.createElement("header"));
    header.contentEditable = "false"; // 顶栏是不可编辑的

    this.foldButton = header.appendChild(document.createElement("button"));
    this.foldButton.title = "Toggle section folding";

    // 在按钮上设置鼠标事件 mousedown 的监听器
    // 当用户点击该按钮时，执行回调函数 foldClick()
    this.foldButton.onmousedown = e => this.foldClick(view, getPos, e);

    // 通过 nodeView 的属性 contentDOM 设置该节点内容的容器
    // 一个在顶栏后面的 <div> 元素，该节点的内容会插入到该元素里
    this.contentDOM = this.dom.appendChild(document.createElement("div"));
    // 基于应用到该 nodeView 的装饰器 deco 初始化该 section 内容的折叠/展开状态
    // 如果应用到该节点的任意一个装饰器的配置项中，包含属性 d.spec.foldSection，且它的值为 true 时，就折叠该 section 的内容；否则就展开该 section 的内容
    this.setFolded(deco.some(d => d.spec.foldSection));
  }

  // 折叠/展开状态 section
  setFolded(folded: boolean) {
    // 根据参数 folded，更新该 nodeView 的 folded 属性和按钮图标
    this.folded = folded;
    this.foldButton.textContent = folded ? "▿" : "▵";
    // 通过设置节点视图的属性 contentDOM 所对应的 <div> 元素的 CSS 样式 display 的值，来展开/折叠该 section 的内容
    this.contentDOM.style.display = folded ? "none" : "";
  }

  // 更精细地控制 nodeView 如何更新
  update(node: Node, deco: readonly Decoration[]) {
    // 如果 nodeView 所对应的 node 节点类型（与原节点类型）不同，则返回 false
    // 表示原来的 nodeView 实例无法复用，需要重新调用构建函数创建一个新的 nodeView 实例
    // 一般不同的节点类型所对应 paragraphView 节点视图最终在页面上渲染的 DOM 元素也不同，所以原有的 nodeView 不能复用，需要创建一个新的实例
    if (node.type.name != "section") return false;

    // 查看应用到该节点的任意一个装饰器的配置项中，是否包含属性 d.spec.foldSection，且它的值为 true
    let folded = deco.some(d => d.spec.foldSection);
    // 如果变量 folded 的值和当前 nodeView 属性 this.folded 不同
    // 则调用方法 setFolded() 设置该 section 内容的折叠/展开状态
    if (folded != this.folded) this.setFolded(folded);
    // 返回 true 表示原来的 nodeView 可以复用，相应地在页面上渲染的 DOM 元素也可以复用（在该例子中只是更改了 CSS 样式，以显示/隐藏该节点的内容）
    return true;
  }

  // 用户点击 section 顶栏的按钮时，执行以下回调函数
  foldClick(view: EditorView, getPos: () => number | undefined, event: MouseEvent) {
    // console.log(event);

    // 阻止该事件的默认行为
    event.preventDefault();
    // 调用方法 setFolding() 以响应用户的操作
    setFolding(view, getPos(), !this.folded);
  }
}

// toggle 切换（位于给定位置 pos 的）section 节点的内容的展开/折叠状态
function setFolding(view: EditorView, pos: number | undefined, fold: boolean) {
  // console.log(pos);

  if(pos===undefined) return; // 如果未给定位置，则不执行后续操作

  // 根据给定的位置 pos 获取相应的节点
  let section = view.state.doc.nodeAt(pos);

  // 如果该节点是 section 节点
  if (section && section.type.name == "section") {
    // 创建一个事务 tr，并为其添加元信息（采用键值对的方式）
    // 以插件对象 foldPlugin 作为键名，值是一个对象 {pos, fold} 包含该 section 节点的相关信息
    // 属性 pos 是一个数值，表示该 section 节点在文档中的位置
    // 属性 fold 是一个布尔值，表示该 section 所需变更的折叠/展开的最终目标状态
    let tr = view.state.tr.setMeta(foldPlugin, {pos, fold})

    // 如果选区本来是在该 section 里，则该 section 折叠后会隐藏调选区，所以可能需要在该事务 tr 中同时调整选区的位置，让选区/光标跳出该 section 的内容
    let {from, to} = view.state.selection;// 获取当前选区的两端位置
    let endPos = pos + section.nodeSize; // 该节点结尾位置

    // 判断选区是否位于该 section 节点里
    if (from < endPos && to > pos) {
      // 首先在节点的前面寻找合适位置插件一个文本选区；如果找不到就在节点的后面寻找
      let newSel = Selection.findFrom(view.state.doc.resolve(endPos), 1) ||
        Selection.findFrom(view.state.doc.resolve(pos), -1);
      // 在事务 tr 里手动调整选区
      if (newSel) tr.setSelection(newSel);
    }

    // 分发事务 tr，以更新编辑器的视图（toggle 切换相应 section 节点的展开/折叠状态）
    view.dispatch(tr);
  }
}

// 通过插件为编辑器添加 node decoration 节点型装饰器
// 将 decoration 应用到相应的 section 节点（位置）上，则表示该 section 节点需要折叠
// 💡 相当于采用该插件（所包含的一系列装饰器）维护/记录着所有处于折叠状态的 section 节点（位置信息）
// 采用这种方式可以让 nodeView 的折叠状态与其自身（DOM 元素）解耦（采用装饰器来记录），即使 nodeView（不小心）触发更新（如果需要重新实例化，其内部的属性 this.folded 会被重置），也可以根据这些装饰器恢复其折叠/展开状态
// 💡 另一个更简单的方法是将折叠状态保存在 section 节点的 attribute 里，这样即使 nodeView 更新时需要被重新实例化，也不会丢失折叠状态
const foldPlugin: Plugin = new Plugin({
  // 该插件的专属 state 状态
  state: {
    // 初始化插件的状态值，一个空的 decorationSet 装饰器合集
    init() { return DecorationSet.empty },
    // 更新插件的状态值
    apply(tr, value) {
      // 使用 decorationSet.map(mapping, doc) 映射调整已存在的装饰器的位置（以复用这些装饰器，而不是全部都重新创建）
      value = value.map(tr.mapping, tr.doc);

      // 读取当前事务对象 tr 的特定（关于该插件的）元信息
      let update = tr.getMeta(foldPlugin);

      if (update && update.fold) {
        // 如果元信息存在，且 update.fold 为 true，则将相应的 section 节点进行折叠
        // 获取给定位置 update.pos 的节点
        let node = tr.doc.nodeAt(update.pos);
        // 如果该节点为 section 节点
        if (node && node.type.name == "section") {
          // 创建一个 node decoration 节点型装饰器（其范围是从 update.pos 到 update.pos + node.nodeSize，即应用到相应的 section 节点上）
          // 并将该装饰器添加到 decorationSet 里
          value = value.add(tr.doc, [Decoration.node(update.pos, update.pos + node.nodeSize, {}, {foldSection: true})]);
        }
      } else if (update) {
        // 如果元信息存在，但是 update.fold 为 false，则将相应的 section 节点进行展开，通过将 decorationSet 里相应的装饰器进行移除来实现
        // 💡 使用 decorationSet.find(from, to) 从装饰器合集中，筛选出在给定范围内的装饰器
        // 这里搜索范围的上下限都是 update.pos+1 因为该位置正好是在相应 section 节点里，就可以确保所找到的装饰器是应用于该 section 节点
        // ⚠️ 如果搜索范围是 update.pos（section 节点的边界）则获得的装饰器可能是作用于前一个节点（而不是该 section 节点），由于 section 节点不是叶子节点（即它会包含内容），所以搜索范围采用 update.pos 会更准确保险
        // 💡 如果需要寻找作用于该 section 节点里面（即作用于其内容上的）装饰器，则搜索范围应该设置为 (pos+1, pos+node.nodeSize)
        let found = value.find(update.pos + 1, update.pos + 1);
        // 将找到的符合条件的装饰器从 decorationSet 装饰器合集中移除（则相应的 section 节点就会展开）
        if (found.length) value = value.remove(found)
      }
      // 返回更新后的 decorationSet
      return value;
    }
  },
  // 插件的其他配置
  props: {
    // 设置装饰器集合，从插件的自带状态里读取
    decorations: state => foldPlugin.getState(state),
    // 为 section 节点设置节点视图
    nodeViews: {
      section: (node, view, getPos, decorations) => new SectionView(node, view, getPos, decorations)
    }
  }
})