标签: slate

我正在设计一个类似 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 = …

描述：当我在当前光标位置将自定义链接添加到板岩编辑器中并在插入的链接后使用制表符或空格时，会引发错误。

这是我用来将自定义链接 DOM 元素添加到当前光标位置的板岩编辑器中的代码。

window.addEventListener("message", (event) => {
  var linkDOMElement = document.getElementById('insertLink');
  if (!linkDOMElement) {
    var range;
    if (event.data && (typeof event.data === 'string' || event.data instanceof String) && event.data.includes("atProspectId") && window.getSelection) {
      var range = window.getSelection().getRangeAt(0);
      var html = event.data;

      // create a span dom element
      var newElement = document.createElement('span');
      newElement.id = 'insertLink';
      newElement.innerHTML = html;

      // insert created dom element named newElement at current cursor position
      range.insertNode(newElement);
    }
  }
}, false);

场景：我们有一个脚本，将自定义图标附加到外展电子邮件编辑器，显然外展电子邮件编辑器使用板岩编辑器。单击此图标后，它会在新选项卡中打开我们的扩展应用程序[暂时]。如果用户单击“插入链接”按钮，则应将链接插入到当前光标位置，这将按预期发生。但是，我无法单击链接并在插入后进一步写入任何文本。如果我在链接插入后使用空格或制表符，则会出现此错误。您可以在随附的视频中清楚地看到这一点。

环境：

Slate 版本：不知道，因为这种情况发生在第三方网站操作系统：Windows 浏览器：Chrome

要查看如何引发上述错误，您可以单击以下链接并观看 43 …

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

谢谢

我的项目有以下降价slate:

---
title: API Reference
language_tabs:
  - http
  - javascript
search: true
---
# Getting Started
## Logout
# Call Management
## Call States
```javascript
{
}
```
## Call Notification
## Caller ID Called Number
## Call Information During Call

我middleman用来服务一个网站:bundle exec middleman server.但是,最后一个子标题不能正确解释为h2标记(屏幕截图).如果我构建它,结果是一样的rake build.

但是,如果我把这个降价放在像http://stackedit.io这样的其他翻译上,那很好.

所以我怀疑我的降价解释器(Ruby redcarpet)以某种方式被破坏了.我没有在控制台上收到任何警告/错误消息.我尝试了不同版本的redcarpet.解释的HTML也是错误的,尽管错误是不同的.我想Ruby和Redcarpet的某些组合会成功吗？

这是我的config.rb:

# Markdown
set :markdown_engine, :redcarpet
set :markdown,
fenced_code_blocks: true,
smartypants: true,
disable_indented_code_blocks: true,
prettify: …

对于Slate,尚不支持Shopify的色板教程,并且代码库中不再存在引用的选择回调.是否可以修改本教程以使用Slate主题来创建单选按钮或样本而不是用于在产品模板上选择变体的下拉列表？

我不明白这在javascript中是如何工作的

renderMarkButton(type, icon) {

它看起来像一个箭头功能,但没有箭头.这是上下文:

class HoverMenu extends React.Component {

  renderMarkButton(type, icon) {
    const { editor } = this.props
    return (
      <div className="editorButton" 
            onMouseDown={event => this.onClickMark(event, type)}>
        <FontAwesomeIcon color="#666" active={isActive} 
            className="editorButton" icon={icon}  />
        </div>
    )
  }
  render() {
    return (
      <div>
        {this.renderMarkButton('bold', {...faBold})}
      </div>
    )
  }
}

我也很困惑

  const { editor } = this.props

我相信它来自Slate.我希望this.props在这种情况下是{type,icon}.