import {Plugin} from "prosemirror-state"

let selectionSizePlugin = new Plugin({
  // 通过该插件的配置对象的属性 view 设置自定义视图
  // 属性值需要符合 TypeScript interface PluginView 接口的约束
  view(editorView) { return new SelectionSizeTooltip(editorView) }
})

// 该类的实例化对象符合 PluginView，包含方法 update 和 destroy
class SelectionSizeTooltip {
  constructor(view) {
    this.tooltip = document.createElement("div")
    this.tooltip.className = "tooltip"
    view.dom.parentNode.appendChild(this.tooltip)
    // 初始化时调用一次 update() 方法，以设置（表示 tooltip 的）DOM 元素的定位坐标
    this.update(view, null)
  }
  // 当编辑器的视图更新时，会调用该函数
  // 在这里设置自定义视图的更新方式
  // view 是（更新后）编辑器视图对象，lastState 是（更新前）编辑器状态
  update(view, lastState) {
    let state = view.state
    // Don't do anything if the document/selection didn't change
    // 对比视图更新前后的编辑器状态是否相同
    if (lastState && lastState.doc.eq(state.doc) &&
        lastState.selection.eq(state.selection)) return

    // Hide the tooltip if the selection is empty
    if (state.selection.empty) {
      this.tooltip.style.display = "none"
      return
    }

    // Otherwise, reposition it and update its content
    this.tooltip.style.display = ""
    let {from, to} = state.selection
    // These are in screen coordinates
    let start = view.coordsAtPos(from), end = view.coordsAtPos(to)
    // The box in which the tooltip is positioned, to use as base
    // 获取（包含 tooltip 元素）最近的祖父元素，它是定位元素（用于作为设置 tooltip 定位坐标的参考基准）
    let box = this.tooltip.offsetParent.getBoundingClientRect()
    // Find a center-ish x position from the selection endpoints (when
    // crossing lines, end may be more to the left)
    let left = Math.max((start.left + end.left) / 2, start.left + 3)
    this.tooltip.style.left = (left - box.left) + "px"
    this.tooltip.style.bottom = (box.bottom - start.top) + "px"
    this.tooltip.textContent = to - from
  }
  // 当编辑器的视图被销毁时，或当编辑器的状态对象被重新配置而 plugins 属性不包含该插件时，该函数被调用
  // 在以上情况发生时，应该从页面移除自定义视图
  destroy() { this.tooltip.remove() }
}