问题标签 [slatejs]

我正在设计一个类似 google-doc 的协作工具，其中最新的 React + Slate 作为前端，Flask 在后端。我在 React 中使用 socket-io，在 Python 中使用 flask_socketio 来发出和监听来自其他合作者的内容。反应应用程序代码：

套接字的 Python 代码很简单：

问题：

当 split_node 作为 socket.on() 中的一种操作类型传递时，editor.apply(op) 不会按预期应用它。请帮助我。

因此，我得到以下两种情况：

我正在 React 上使用 slate js 构建富文本编辑器，我需要从内容中解析 URL（例如：www.website.me 应该转换为 www.website.me）。

我已经实现了从纯文本解析 URL 的功能，然后将内容包装在正确的标签内。

但是，问题是我需要在用户在编辑器上键入时（在 onChange 事件上）立即显示解析的值。这是我所拥有的：

谢谢你的帮助。

我目前正在开发一个石板文本编辑器，用户可以在其中添加图像和文本。我还想要一个悬停工具栏，根据用户选择的元素类型提供不同的按钮。

例如，如果用户选择了一张图片，那么我想提供一组按钮。如果用户选择了一个段落，我想提供另一组按钮。

查看此处找到的示例后：

https://www.slatejs.org/examples/richtext

我拼凑了一个我想要的文本编辑器的粗略示例，没有依赖于上下文的悬停工具栏按钮：

https://codesandbox.io/s/suspicious-pine-lrxgw

但是我正在努力弄清楚如何检测在编辑器中选择了哪种类型的元素？我不知道是否有办法使用 slate-react 做到这一点？甚至在香草JS中？

理想情况下，我还可以获得有关该元素的其他信息。例如图像的高度和宽度，因为这将有助于造型。

任何帮助表示赞赏

Slate Hovering Toolbar我正在尝试在我的 React 应用程序中设置示例。以下是示例和代码库：

我创建了新的 React 组件并 c/p 示例中的代码，这里有问题： - 悬停工具栏显示不正确（没有粗体、斜体、下划线的图标） - 悬停工具栏不会在选择时立即出现，我必须尝试选择部分文本重复 4-5 次然后出现 - 它也随机消失

有人遇到过类似的问题吗？我不会在这里提供 React 应用程序代码，因为我使用了示例中的源代码。我试图联系创作者 Ian Taylor，但找不到任何联系信息。

我的应用中有多个 SlateJS 编辑器，代表各个页面。添加新页面时，我希望将焦点更改为该页面中的编辑器。

我不知道该怎么做！onFocus我已经检查了文档，并且有onBlur钩子插件，但这是为了对焦点更改做出反应。在松弛的社区片段上有这样的：

但我也不能让它工作。这是我的代码的精简版：

根元素

页面元素

然后<Input/>元素呈现Slate和的Editable组件slate-react。

我尝试过 RTFM，但除了插件页面之外，我确实找不到任何关于管理焦点的信息。

我尝试添加一个focusOnRender布尔道具，并在Input元素上使用它的钩子：

但这对我不起作用。

我在描述函数的文档中找到了这个页面editor.focus()，但是当我尝试这个时，我收到以下错误：

假设我必须通过单击编辑器外部的工具栏向 Slatejs 文档添加一些自定义元素。它触发Transform.insertNodes但不是添加元素代替光标（单击工具栏时消失并丢失选择），而是将我的元素放在文档的末尾。使用Locationslike PointorRange将无济于事，因为我不知道光标的当前位置，而且我没有看到任何会跟随光标位置的助手。

那么，如何将我的元素放在光标的位置？

我正在研究使用Slate或ProseMirror构建一个编辑器，并在使用内联元素时在插入符号位置和选择区域周围看到 Chrome 的一些奇怪行为。问题 1 如下图第一张所示。当文本光标位置在“f”后面时，插入符号显示在图像顶部。问题 2 在第二张图片中 - 选择文本会显示一个与内联元素一样高的突出显示区域。有没有办法控制这种行为，而是在文本位置显示插入符号，只突出显示文本周围的空间（即使内联图像使行高变大）

我想从 Firefox 模仿这里的行为：

示例图像是使用此处的 ProseMirror 演示生成的：https ://prosemirror.net/examples/basic/

JSBin的最小示例（感谢@Kaiido）：

不确定这在其他操作系统上的表现如何，但我使用的是 macOS Catalina。

如何使用 Cypress 在 Slate 编辑器中插入文本？使用oronChange键入时似乎没有调用Slate处理程序。cy.type()cy.clear()

我目前正在开发基于 slatejs 的富文本编辑器。当图像聚焦时，我需要实现在图像之后插入段落的可能性。现在，当图像具有焦点并且我按下Enter按钮时 - 什么也没发生。它应该在图像之后插入新的空段落。

示例中的相同行为https://www.slatejs.org/examples/images

任何帮助表示赞赏

我通过将几个 slates 示例组合在一起创建了一个编辑器，即https://www.slatejs.org/examples/richtext和https://www.slatejs.org/examples/links

但是，当我为所有块级节点添加这些活动状态时，它根本不起作用，这意味着我无法打开和关闭列表项，锚链接最终会嵌套等。

损坏的代码似乎是这些行，来自所有示例中的 isBlockActive 函数：

match无论我的光标位于何处，它始终是未定义的。

我目前正在运行所有软件包的最新版本0.58.1。

下面是我的toggleBlock函数，我也从使用 isBlockActive 函数来计算切换逻辑的示例中获取。

以前有没有人遇到过这个问题，也许代码库与示例不同步并且Editor.nodes不再推荐？

由于示例使用不同的方法，所有内联格式选项都起作用：

如果有帮助，这里还有我的工具栏和 renderElement 功能：