问题标签 [slatejs]

使用 Slatejs (v0.47) 如何扩展当前选择（从折叠开始）以包含当前单词？

所以（假设[]表示当前部分）

如果我开始

如何以编程方式将选择扩展到

?

我在多个插件中使用renderMark，但只有插件堆栈中的顶部插件被调用，其余的被忽略。

// 第一个插件

// 第二个插件

// 插件数组

// 使用插件渲染编辑器

当我按ctrl+i时，它按预期工作，而ctrl+u不工作。

我正在尝试模拟来自- 而不是-onKeyDown的事件来测试我正在开发的一些插件。但是，它并没有对其进行任何更新。Editorslate-coreslate-reactEditorValue

我已经广泛浏览了 SlateJS0.47.x 文档，并且据我所知，Editor组件应该响应onKeyDown开箱即用的事件。

这是一个重现我的问题的小代码框示例。

^ 请注意，尽管我试图模拟大量onKeyDown事件——在文件中core-editor-is-not-responding-to-on-key-down-events.js——Editor但从不更新的值；它仍然是一个空白文档。

我担心这种行为差异，因为当我认为所述功能已经存在时，我似乎需要重写插入文本的功能，因为它被输入。

任何帮助将不胜感激！

我正在尝试使用 React Hooks 在 slate 上设置工具栏。好像出了什么问题，我不知道是什么。这是我的代码：

知道为什么这不起作用吗？

Slate JS 提供了一个基于传统 Class 组件的漂亮的悬停菜单示例。我的目标是将其转换为与 React Hooks 一起使用。我想我已经完成了 95% 的工作，但是我对如何将某些道具从 Editor 组件传递给updateMenu()由生命周期函数调用的函数感到困惑。以下是 Class 和 Hook 组件的伪代码表示：

班级

挂钩

本质上，我已经重新定义updateMenu()为 not reference this，但是虽然我可以轻松地传递菜单 ref，但我不明白如何访问编辑器选择/突出显示的文本，这显然是以前通过 props 传递的。

这让我发疯了。我有一个用例，我在一个编辑器中插入一个节点，它应该在后续编辑器中插入该节点。我仅在单击组件时才渲染组件，因此如果我采用传统的引用方式，

父组件模型中的下一个编辑器引用将为空。顺便说一句，父组件模型的editorRef模型为

这是代码沙箱

以前，当它们一次性渲染时，我很容易更新它们，但在这里它们会根据他们单击的导航按钮进行渲染。

我正在使用 React 和 SlateJS 制作一个网络编辑器。编辑器内容中有 LaTex 代码，我希望用户看到渲染的 LaTex 方程。MathJax 和KaTex通过将它们加载为 CDN 具有自动渲染功能。加载后，将呈现 html 正文上的内容。但是当我修改内容时，它们不是实时渲染的。

所以我做了一个按钮，打开一个模式，在一个较小的窗口中呈现不可编辑的编辑内容，我希望在模式中呈现 LaTex 代码。

APP组件：

RenderedEditorDialog（模态）组件：

我的问题是如何应用 MathJax/KaTex 来呈现RenderedEditorDialog组件中的内容？

提前致谢！

我有一个控件，我想在按键之前和之后执行一些逻辑。

我可以这样做event.preventDefault();，取消默认事件，或者不使用它不取消它。但是，我想在默认事件之前和之后执行一些逻辑。onKeyUp似乎没有做我想要的。还有什么办法吗？

更具体地说：我正在使用 Slate JS ( https://docs.slatejs.org/ ) 中的可编辑控件。在浏览器中，它创建一个常规div元素（事件是React.KeyboardEvent<HTMLDivElement>）。开箱即用的一件事是内联格式。如果用户按下粗体按钮，并且没有选择，并且光标不在单词的中间，则应用程序应将粗体样式应用于输入的下一个字符（如在 Word 中）。所以，我必须等待下一个字符，并有条件地对其应用格式。这就是为什么如果我们处于“准备粗体模式”时我需要保留一些状态标记，当在描述的条件下按下粗体时标记。在里面onKeyPress事件，我检查该标志是否已设置，如果是，我记得当前位置开始粗体标记。我想做的是立即触发默认事件以获取实际字符，然后完成定义选择的结尾，在范围内应用粗体标记，并将插入符号放在末尾。现在我必须使用onKeyUp来完成选择并进行标记。如果用户按住键并且字符在释放之前以非粗体显示，这会延迟格式化。

我正在尝试在 Web 的富文本编辑器中使下拉菜单跟随光标。使用以下我可以得到光标的坐标没有问题：

但是，如果我尝试在一个\n字符之后使用它，它会在换行符之后返回光标的位置，而不是新行的开头（光标实际出现在窗口中的位置）：

有没有办法避免这种情况？

编辑：根据下面的评论，这是我想要实现的更深入的版本。

我目前正在使用 React 和 Slate.js ( https://github.com/ianstormtaylor/slate ) 构建一个文本编辑器。它的核心是更强大的 contentEditable 组件版本，但允许您将可编辑的文本字段放入页面中。由于我使用的节点结构，我希望段落之间有软中断而不是新<div />元素。因为这是 contentEditable 的非标准行为，所以很难在不重新创建整个应用程序的情况下制作一个小示例。

编辑（对评论的进一步回应）：文本元素的原始 HTML 如下所示：

您可以看到 slate 将中断字面翻译为 \n 字符，这是我认为导致问题的原因。

我试图通过查看富文本示例来理解 Slate.js ，但我遇到了以下我不理解的代码片段。

我不是 javascript 方面的专家，而且我对 typescript 和 slate.js 都是新手，所以对于无法更好地提出我的问题，我提前道歉，但这是我目前所了解的以及我仍然不确定的内容：

(1) Editor.nodes() 是一个返回 Iterable 的方法。什么是“const [match]”表示法？这是javascript还是打字稿？

(2) " match" in " const [match]" 和 " match" in " match : n => n.type === format" 一样吗？如果是这样，这是否意味着“ const [match]”是一个数组，其中一个元素是一个函数？如果是这种情况似乎很奇怪，那么为什么还要费心让 Editor.nodes() 返回一个 Iterable 呢？

（3）我知道双感叹号给了我一个布尔对象，但是由于我无法弄清楚 match 是函数还是可迭代的还是其他东西，所以我不知道它的真假!!match告诉了我什么Editor.nodes() 返回的初始迭代。

感谢您为我困惑的大脑提供的任何启发！