标签: slatejs

我试图模拟onKeyDown来自（而不是）的事件Editor来测试我正在开发的一些插件。然而，它并没有更新任何内容。slate-coreslate-reactEditorValue

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

这是一个重现我的问题的小型codesandbox示例。

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

我担心行为上的这种差异，因为当我相信该功能已经存在时，我似乎需要重写插入文本的功能，因为它会被键入。

任何帮助将非常感激！

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

我想模仿这里的行为，来自 Firefox：

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

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

<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>

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

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

const RichTextExample = props => {
  const [value, setValue] = useState(props.currentEditor);
  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
  const id = useRef(`${Date.now()}`);
  const remote = useRef(false);
  const socketchange = useRef(false);

  useEffect(() => {
    socket.on("new-remote-operations", ({ editorId, ops, doc_id }) => {
      if (id.current !== editorId && doc_id === props.document.doc_id) {
        remote.current = true;
        JSON.parse(ops).forEach(op => {
          console.log("LISTEN: applying op", op);
          editor.apply(op);
        });
        remote.current = …

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

我不知道是否是最好的方法，但我尝试使用 jspdf 将 slate js 转换为 pdf。o 意识到这并不容易。将 slate js 'Value' 转换为 jspdf 可能非常复杂。有人知道是否有其他方法将 slate js 转换为 pdf、插件、函数或模块可以帮助我。

谢谢

我正在尝试在当前选择的正下方添加一个新行，然后将选择放到新行中。

let current_path = props.selection.anchor.path[0]
Transforms.insertNodes(editor, {type:'line', children:[{ text:'' }]},{at: [current_path+1]});
const point = { anchor: { path: [current_path+1, 0], offset: 0 }, focus: { path: [current_path+1, 0], offset: 0 }}
// set focus
ReactEditor.focus(editor);
// set selection
Transforms.select(editor, point);

但这出现了一个错误：错误：无法从 Slate 节点解析 DOM 节点：{"text":""}。有谁知道如何解决它或有其他方法来实现它？谢谢！

我正在关注https://docs.slatejs.org/walkthroughs/04-applying-custom-formatting上的石板教程

有一个函数调用 Text.isText(n)，我不断收到 Type:Error Text.isText is not a function

toggleBoldMark(editor) {
    const isActive = CustomEditor.isBoldMarkActive(editor)
    Transforms.setNodes(
      editor,
      { bold: isActive ? null : true },
      { match: n => Text.isText(n), split: true }
    )
  },

我正在尝试为我们的富文本组件之一编写测试，该组件是使用 React js 中的 slate js 编辑器实现的。因此，在编写测试时，我正在检索元素 div[contenteditable='true']，但无法模拟更改、模糊、焦点等事件。附加到编辑器组件的处理程序不会被调用。我尝试了多种组合，但没有成功。有人可以帮忙吗？是否可以使用测试库模拟 contenteditable 元素的事件（contenteditable 使用 slatejs 实现）？

我正在使用slate.js编写一个 Markdown 文本编辑器。我正在尝试实现以下实时渲染效果（来自Typora）：

如你看到的，

1. 当我打字时，文本会自动变为粗体。
2. 当我按空格键时，四个星号消失，只有文本本身可见。
3. 当我将光标重新聚焦到文本上时，星号再次出现（这样我就可以修改它们）。

感谢MarkdownPreview的示例，我已经实现了第一项，这是它的代码（取自slate 存储库）：

import Prism from 'prismjs'
import React, { useCallback, useMemo } from 'react'
import { Slate, Editable, withReact } from 'slate-react'
import { Text, createEditor, Descendant } from 'slate'
import { withHistory } from 'slate-history'
import { css } from '@emotion/css'

// eslint-disable-next-line
;Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])([\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.italic.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.bold.inside.italic=Prism.util.clone(Prism.languages.markdown.italic),Prism.languages.markdown.italic.inside.bold=Prism.util.clone(Prism.languages.markdown.bold); // prettier-ignore

const MarkdownPreviewExample = () => {
  const renderLeaf = useCallback(props => …

我试图将复制的片段onCopy徒劳地放入钩子中。

我一直在尝试 event.clipboardData...

const { clipboardData } = event;
const encoded = clipboardData.getData("application/x-slate-fragment");

但它似乎是空的。我也尝试过使用getEventTransferutils。但它返回{type: 'unknow'}

这是我一直在测试的CodeSandBox。