Slate.js编辑器使用官方示例无法清楚地删除link

Question

CodeSandbox 示例：

https://codesandbox.io/s/slate-2-images-and-links-forked-s09wi

基本上就是官方文档中的withLink() example

当您按退格键或剪切以删除 link 时，JSON 输出仍然包含带有空文本的 link 数据。我不明白为什么它仍然保留在输出中。谁能为此提供解决方案？

withLink 示例：

const withLinks = editor => {
  const { insertData, insertText, isInline } = editor

  editor.isInline = element => {
    return element.type === 'link' ? true : isInline(element)
  }

  editor.insertText = text => {
    if (text && isUrl(text)) {
      wrapLink(editor, text)
    } else {
      insertText(text)
    }
  }

  editor.insertData = data => {
    const text = data.getData('text/plain')

    if (text && isUrl(text)) {
      wrapLink(editor, text)
    } else {
      insertData(data)
    }
  }

  return editor
}

const unwrapLink = editor => {
  Transforms.unwrapNodes(editor, {
    match: n =>
      !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === 'link',
  })
}

const wrapLink = (editor, url) => {
  if (isLinkActive(editor)) {
    unwrapLink(editor)
  }

  const { selection } = editor
  const isCollapsed = selection && Range.isCollapsed(selection)
  const link: LinkElement = {
    type: 'link',
    url,
    children: isCollapsed ? [{ text: url }] : [],
  }

  if (isCollapsed) {
    Transforms.insertNodes(editor, link)
  } else {
    Transforms.wrapNodes(editor, link, { split: true })
    Transforms.collapse(editor, { edge: 'end' })
  }
}

Answer 1

我通过在 withLinks 插件中添加 normalizeNode 解决了这个问题。

const { normalizeNode } = editor
editor.normalizeNode = entry => {
const [node, path] = entry
if (Element.isElement(node) && node.type === 'paragraph') {
  const children = Array.from(Node.children(editor, path))
  for (const [child, childPath] of children) {
    // remove link nodes whose text value is empty string.
    // empty text links happen when you move from link to next line or delete link line.
    if (Element.isElement(child) && child.type === 'link' && child.children[0].text === '') {
      if (children.length === 1) {
        Transforms.removeNodes(editor, { at: path })
        Transforms.insertNodes(editor,
          {
            type: 'paragraph',
            children: [{ text: '' }],
          })
      } else {
        Transforms.removeNodes(editor, { at: childPath })
      }
      return
    }
  }
}
normalizeNode(entry)

}

Slate.js编辑器使用官方示例无法清楚地删除link

Unable to delete a link clearly in Slate.js editor using the official example

javascript

reactjs

slatejs

slate.js