slate.js 0.47 bug修复记录

1.一个页面两个相同数据编辑器，导致selection异常处理

// 取到当前focus node block节点
const parentEl = native.focusNode.parentElement
// 找到focus node block节点的编辑器div
const editorDom = this.closest(parentEl, "div[data-slate-editor='true']")
debug.update('onNativeSelectionChange', {
  anchorOffset: native.anchorOffset,
})
const isCurrentEditor = editorDom === this.props.editor.el
if (activeElement !== this.ref.current) {
  // The editor can't focus when readOnly  不是当前的editor触发的时候就 return
  if (!this.props.selectionChangeable || !isCurrentEditor) {
    return
  }
}

2.node和text节点attributes添加属性（为协同版本对比提供）

//  constants/data-attributes.js
VERSION_COMPARE_TYPE: 'data-version-compare-type',
// node.js
// 如果node.data中有versionCompareType字段，说明要显示对比样式，attributes添加versionCompareType字段
if (node.data && node.data.get('versionCompareType')) {
    attributes[DATA_ATTRS.VERSION_COMPARE_TYPE] = node.data.get('versionCompareType')
}  
// text.js
const attributes = {
    [DATA_ATTRS.OBJECT]: node.object,
    [DATA_ATTRS.KEY]: node.key,
}
// 如果node.data中有versionCompareType字段，说明要显示对比样式，attributes添加versionCompareType字段
if (node.data && node.data.get('versionCompareType')) {
  attributes[DATA_ATTRS.VERSION_COMPARE_TYPE] = node.data.get('versionCompareType')
}

3.被移除节点前后都有文本，如果前面文本和被移除文本不是在一个块，anchor移到后面的文本上去

removeNode(path) {
    let value = this
    let { document } = value
    const node = document.assertNode(path)
    const isText = node.object === 'text'
    const first = isText ? node : node.getFirstText() || node
    const last = isText ? node : node.getLastText() || node
    const prev = document.getPreviousText(first.key)
    const prevParent = prev ? document.getClosestBlock(prev.key) : null
    const currentParent = document.getClosestBlock(node.key)
    const next = document.getNextText(last.key)
    document = document.removeNode(path)
    value = value.set('document', document)
    value = value.mapRanges((range) => {
      const { anchor, focus } = range
      if (node.hasNode(anchor.key)) {
        if (isText) {
          if (prev) {
            // 被移除节点前后都有文本，如果前面文本和被移除文本不是在一个块，anchor移到后面的文本上去
            if (next) {
              if (prevParent === currentParent) {
                range = range.moveAnchorTo(prev.key, prev.text.length)
              } else {
                range = range.moveAnchorTo(next.key, 0)
              }
            }
            // 只有前面有文本 anchor移到前面的文本上去
            else {
              range = range.moveAnchorTo(prev.key, prev.text.length)
            }
          } else if (next) {
            range = range.moveAnchorTo(next.key, 0)
          } else {
            range = range.unset()
          }
        } else {
          range = prev
            ? range.moveAnchorTo(prev.key, prev.text.length)
            : next
            ? range.moveAnchorTo(next.key, 0)
            : range.unset()
        }
      }
      if (node.hasNode(focus.key)) {
        if (isText) {
          if (prev) {
            if (next) {
              if (prevParent === currentParent) {
                range = range.moveFocusTo(prev.key, prev.text.length)
              } else {
                range = range.moveFocusTo(next.key, 0)
              }
            } else {
              range = range.moveFocusTo(prev.key, prev.text.length)
            }
          } else if (next) {
            range = range.moveFocusTo(next.key, 0)
          } else {
            range = range.unset()
          }
        } else {
          range = prev
            ? range.moveFocusTo(prev.key, prev.text.length)
            : next
            ? range.moveFocusTo(next.key, 0)
            : range.unset()
        }
      }
      range = range.updatePoints((point) => point.setPath(null))
      return range
    })
    return value
  }

4.取消捕获异常，避免上层组件捕获不到错误

5.html serialize 忽略未知mark

6.两个text节点不在同一个块中 不取前一个mark 避免相邻块 后一个在开始位置输入，带上前面样式的问题

const currentBlock = this.getClosestBlock(path)
const previousBlock = this.getClosestBlock(this.getPath(previousText.key))
// 两个text节点不在同一个块中 不取前一个mark 避免相邻块 后一个在开始位置输入，带上前面样式的问题
if (previousBlock !== currentBlock) {
  return text.marks
}
return previousText.marks

7.导入石墨文档多个mark的style不能解析问题

将style中的所有mark，分别解析，进行递归解析

8.修复一直按住删除键时，光标异常的问题

9.safari 下获取焦点滚动的问题

10.解决从word复制内容出来的时候，text节点的内容是多个回车符的问题。原来的是匹配一个回车符

11.修复视频复制异常的问题，

因为视频前后都有一个空block节点，导致复制到了一个空block节点

12.解决react版本升级导致API废弃的bug

// unstable_flushControlled 在 reactDOM 16.13上已经删除了，替换为 flushSync API
const flushControlled = ReactDOM.flushSync

13.解决IOS删除最后一个时，没有添加空block节点的bug

// IOS删除最后一个字符导致 DOM结构出问题
if (Hotkeys.isDeleteBackward(event) && IS_IOS) {
  const size = value.document.nodes.size
  // 不是最后一个block，不是最后一个offset，因为value.document.getTexts()耗时
  if (size === 1 && start.offset === 1) {
    if (value.document.getTexts().get(0) === 1) {
      // deleteCharBackward 就会新增一个空block节点
      return editor.deleteCharBackward()
    }
  }
}

14. 避免回车换行光标异常

 const ops = editor.operations
 // 避免回车换行光标异常
 if (ops.size > 0 && ops.last().type === 'split_node') {
   debug(`onSelect ops.size > 0 && ops.last().type === 'split_node'`)
   return
 }