将制表符插入 SlateJS 文本编辑器答案

【问题标题】：Insert tab character into SlateJS text editor将制表符插入 SlateJS 文本编辑器
【发布时间】：2022-08-16 12:07:40
【问题描述】：

如何在 SlateJS 中插入制表符？

因此插入&emsp; 是一个制表符，但是，当将其作为文本插入时，它会显示为文字字符&emsp; 而不是带有制表符间距的文本。

// Don\'t work, inserts literal characters
const insertText = (editor, format) => {
    Editor.insertText(editor, `&emsp;\')
}

有什么简单的方法可以插入&emsp; 并让 Slatejs 将其识别为 html，而不是纯文本？

根据我的粗略理解，我可能需要在插入 html 之前对其进行序列化和反序列化。甚至可以插入包含间距的<pre> </pre> 块。

标签： javascript reactjs slatejs

【解决方案1】：

我突然意识到我可以插入 4 个空格而不是制表符...虽然这并不完美，但您必须退格 4 次而不是像制表符那样单次。

const insertText = (editor, format) => {
    Editor.insertText(editor, '    ')
}

还可以在插入文本中插入制表符空格字符，例如the tabs in this article，不能复制粘贴它们的制表符，因为 SO 会将其转换为空格。似乎工作得很好，功能上是一个选项卡空间。

【讨论】：

【解决方案2】：

您可以使用 unicode 转换为字符串。您也可以使用水平制表符&#9;。 https://www.w3.org/MarkUp/html3/specialchars.html

Editor.insertText(editor, '\u2003'.toString()) // &emsp;
Editor.insertText(editor, '\u0009'.toString()) // &#9;

如果您想将它包装在一个跨度中，即呈现为<span style={{whiteSpace: "pre"}}>&#9;</span>，您可以使用标记来实现。

renderLeaf={props => {
  const leafStyle = props.leaf.pre && {whiteSpace: "pre"}
  return <span style={leafStyle}>{children}</span>
}}

Editor.insertNodes(editor, {
  text: '\u0009'.toString(),
  pre: true
})

【讨论】：