// 使用插件为编辑器添加装饰器
const placeholderPlugin = new Plugin({
  // 插件自带的状态
  state: {
    // 设置 state 初始值
    init() {
      // 返回一个空的 DecorationSet 装饰器集合，作为 decorations 的初始值
      // 即使用插件的自带状态来保存装饰器集合的值
      return DecorationSet.empty
    },
    // 设置 state 的更新方式
    // 在 state 更新时同步更新 decorations
    apply(tr, decoSet) {
      // 使用 decorationSet.map(mapping, doc) 映射调整已存在的装饰器的位置（以复用这些装饰器，而不是全部都重新创建）
      // Adjust decoration positions to changes made by the transaction
      let updateDecoSet = decoSet.map(tr.mapping, tr.doc)

      // 读取当前 tr 事务对象的特定（关于该插件的）元信息
      // See if the transaction adds or removes any placeholders
      let action = tr.getMeta(placeholderPlugin)

      if (action && action.add) {
        // 如果元信息存在，且为 add 添加装饰器相关
        // 则创建一个 widget decorator 挂件装饰器，添加到相应的位置
        let widgetDOM = document.createElement("placeholder")
        let widgetDeco = Decoration.widget(action.add.pos, widgetDOM, {id: action.add.id})
        // 并添加到 decorationSet 装饰器集合里
        updateDecoSet = updateDecoSet.add(tr.doc, [widgetDeco])
      } else if (action && action.remove) {
        // 如果元信息存在，且为 remove 删除装饰器相关
        // 则根据 id 从装饰器集合里移除相应的装饰器
        updateDecoSet = updateDecoSet.remove(updateDecoSet.find(undefined, undefined, (spec) => {
          return spec.id == action.remove.id
        }))
      }

      // 返回更新后的装饰器集合，作为 state 的更新值
      // 即使用插件的自带状态来保存装饰器集合的值
      return updateDecoSet
    }
  },
  // 插件的其他配置
  props: {
    // 设置装饰器集合
    decorations(state) {
      // 从插件的自带状态里读取
      return this.getState(state)
    }
  }
});

// 上传图片的核心代码
// 会先在编辑器相应位置添加一个挂件装饰器作为「占位」图标
// 待图片上传成功后，再将相应的挂件装饰器移除，将图片节点添加到该位置
function startImageUpload(view: EditorView, file: File) {
  // A fresh object as the ID for this upload
  // 创建一个空对象作为 id 唯一标识符
  // 它在后面会用作指向/索引相应的（新建的）挂件装饰器
  let id = {};

  // 创建一个空的事务
  // Replace the selection with a placeholder
  let tr = view.state.tr;
  if (!tr.selection.empty) tr.deleteSelection(); // 首先删除选中的内容

  // 为该事务添加元信息（key-value 的形式
  // 使用 placeholderPlugin 插件作为键名
  tr.setMeta(placeholderPlugin, {
    add: {
      id, // 空对象 id 标识这一次的操作，会被用于指向/索引相应（新建）的装饰器
      pos: tr.selection.from // 该操作所发生的位置，会在该位置插入（新建）的装饰器
    }
  })

  view.dispatch(tr);

  // `uploadFile` 是一个异步方法
  // 具体可以参考 https://github.com/Benbinbin/prosemirror-mini-example/blob/upload-editor/src/main.ts#L177-L188
  // 它模拟了将文件上传到远端服务器的异步上传文件的操作
  uploadFile(file).then(url => {
    // 对上传文件的返回结果进行后续处理

    // 基于当前的视图，获取 decoratorSet（它保存为 placeholderPlugin 的自带状态里）
    const decoSet = placeholderPlugin.getState(view.state);
    if(!decoSet) return;
    // 则根据 id 从装饰器集合里寻找相应的装饰器
    const found = decoSet.find(undefined, undefined, spec => spec.id == id);

    // 获取相应的「占位」装饰器在文档中的位置
    const pos = found.length ? found[0].from : null;

    // If the content around the placeholder has been deleted, drop
    // the image
    // 如果没有找到位置（可能是由于该占位装饰器在等待异步操作的响应过程中，被用户删除了），则直接返回（不进行后续插入图片操作）
    if (pos == null) return;

    // Otherwise, insert it at the placeholder's position, and remove
    // the placeholder
    view.dispatch(view.state.tr
                  // 在该位置插入图片节点
                  .replaceWith(pos, pos, uploadSchema.nodes.image.create({src: url}))
                  // 同时为该事务设置元信息，让插件会作出响应，删除相应的挂件装饰器
                  .setMeta(placeholderPlugin, {remove: {id}}));
  }, () => {
    // On failure, just clean up the placeholder
    // 如果上传失败，分发事务，该事务设置了元信息，让插件作出响应，删除相应的挂件装饰器
    view.dispatch(tr.setMeta(placeholderPlugin, {remove: {id}}));
  })
};

// 创建 DecorationSet
function lintDeco(doc: Node) {
  let decos: Decoration[] = [];
  // loop for each lint error to build a decoration
  lint(doc).forEach(prob => {
    // each lint error use two decorations to annotation:
    // * a inline decoration to show the highlight
    // * a widget decoration to show an icon
    decos.push(
      Decoration.inline(prob.from, prob.to, {class: "problem"}),
      Decoration.widget(prob.from, lintIcon(prob), {key: prob.msg})
    );
  })
  return DecorationSet.create(doc, decos);
}

// widget decoration 所对应的 HTML 元素，表示格式错误的图标
// prob 是一个对象，符合 ProblemResult interface
// interface ProblemResult {
//   msg: string; // 描述格式错误的信息
//   from: number; // 该格式错误在文档中的开始位置
//   to: number; // 该格式错误在文档中的结束位置
//   fix?: (view: EditorView) => void; // （可选）属性，该方法用于修复格式错误
// }
function lintIcon(prob: ProblemResult) {
  return () => {
    // 创建一个 DOM 元素表示 widget decoration 挂件装饰器
    let icon = document.createElement("span");
    icon.className = "lint-icon";
    icon.title = prob.msg;
    // 将 prob 对象存储到 DOM 元素的自定义属性 problem 里
    (icon as any).problem = prob;
    return icon
  }
}

// 使用 Plugin 为编辑器添加 decoration，并实现交互功能
const lintPlugin = new Plugin({
  state: {
    init(_, { doc }) {
      return lintDeco(doc);
    },
    apply(tr, old) {
      // 当文档发生改变，就重新扫描文档内容，并构建所有 decorations 装饰器
      // 💡 重新生成所有装饰器可以确保它们都及时更新，但是全量更新会导致性能较差，可以复用未被 tr 影响的装饰器以优化性能
      return tr.docChanged ? lintDeco(tr.doc) : old;
    }
  },
  props: {
    decorations(state) {
      return this.getState(state);
    },
    // 单击 widget decoration 的 icon 图标执行一次以下函数
    handleClick(view, _, event) {
      if (event.target instanceof HTMLElement && /lint-icon/.test(event.target.className)) {
        let { from, to } = (event.target as any).problem as ProblemResult;
        // 单击图标后，选中（以高亮）带有格式错误的相应内容
        // 并将选区滚动到视图中
        view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)).scrollIntoView()
        );
        return true;
      }
    },
    // 双击 widget decoration 的 icon 图标执行一次以下函数
    handleDoubleClick(view, _, event) {
      if (event.target instanceof HTMLElement && /lint-icon/.test(event.target.className)) {
        let prob = (event.target as any).problem as ProblemResult;
        // 双击图标后，执行修正操作
        if (prob.fix) {
          prob.fix(view);
          // 并重新聚焦到编辑器里
          view.focus();
          return true;
        }
      }
    }
  }
})