https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480

要点:
  1. 树形文档结构是狗屎, 顺序结构才是王道.
  2. 好的编辑器有三个公理:
    1. dom内容和可见内容之间完美映射
      1. 也就是说同样的内容, 经过同样的操作得到同样的展示
      2. 同样的展示, 经过同样的逆操作可以变回同样的dom
      3. 这个明显就出事了, 同样的展示可是不能代表同样的dom
      4. 更别说各种不可见元素滑入了.
      5. 这一条是一个多对1关系, 多个dom对应同一个展示. 一个dom最多只有一种展示, 一个dom不会有多个展示.
    2. dom选择和可见选择之间完美映射
      1. 这一条要命了, 多对多
      2. 因为会有格式符嵌套这种事, 前面一堆标签然后出现了一个字, 那么我的光标定在哪一个层次上呢? 这事挺要命的, 我key进去的字是什么表现呢? 问帝哥都不行啊.
      3. 更要命的是行尾和下一行的开始也是同一个位置. 同样的dom位置不同的可见位置.
    3. 可见的编辑可以且只可以映射再可见的内容的全集
      1. 简单地说, 就是编辑的时候不要搞神秘代码, 比如手工注入标签.
  3. 然后作者提出了一个他认为很好的模型:
    1. 一个段落paragraph的list, 和一个小结section的list
    2. 段落paragraph包括
      1. 文本, 纯文本
      2. 格式说明
      3. 图片或者附件的元数据
      4. 布局, 这个段落如何布置
    3. 小结section描述了段落的背景, 可能是几个段落公用
    4. 任何的选择(selection)都被描述为两个点.
      1. 点包含段落和段落内的偏移量.
      2. 还有选择类型
        1. 一般情况都是文本类型的选择.
        2. 媒体类型的选择
        3. section类型的选择
    5. 相同的展示会有并且仅有相同的dom模型再背后.
    6. 然后作者说他们怎么copy html进来, 这个有点奇怪, 按道理应该当做代码copy进来.
    7. 编辑有6个操作
      1. 插入段落paragraph
      2. 移除段落
      3. 更新段落
      4. 三个同样针对section的操作
  4. 作者提出chrome准备用shadow dom和 polymer element