Slate: Insert inline LateX within Slate

Created on 19 Jun 2018 · 4Comments · Source: ianstormtaylor/slate

I am trying to insert an inline LateX formula and am having some difficulties getting the equation rendered properly. To do this, I have created the following data model and fed it to the editor component. The extra blub is marked by latex, whose text attribute is set to \\lambda.

{
  "document": {
    "nodes": [
      {
        "object": "block",
        "type": "paragraph",
        "nodes": [
          {
            "object": "text",
            "leaves": [
              {
                "text": "This is editable "
              },
              {
                "text": "rich",
                "marks": [
                  {
                    "type": "bold"
                  }
                ]
              },
              {
                "text": " \\lambda ",
                "marks": [
                  {
                    "type": "latex"
                  }
                ]
              },
              {
                "text": " text, "
              },
              {
                "text": "much",
                "marks": [
                  {
                    "type": "italic"
                  }
                ]
              },
              {
                "text": " better than a "
              },
              {
                "text": "<textarea>",
                "marks": [
                  {
                    "type": "code"
                  }
                ]
              },
              {
                "text": "!"
              }
            ]
          }
        ]
      }
   }
}

Following is the method where I analyze the node types:

_renderMark = props => {
        const { children, mark, attributes } = props;

        switch (mark.type) {
            case "bold":
                return <strong {...attributes}>{children}</strong>;
            case "code":
                return <code {...attributes}>{children}</code>;
            case "italic":
                return <em {...attributes}>{children}</em>;
            case "underlined":
                return <u {...attributes}>{children}</u>;
            case "latex":
                return <InlineMath {...attributes} math={children}/>;
        }
    };

Following is the method that renders the editor:

_renderEditor = () => {
        return (
            <div className="editor">
                <Editor placeholder="Enter some rich text..."
                        value={this.props.value}
                        onChange={this._onChange}
                        onKeyDown={this._onKeyDown}
                        renderNode={this._renderNode}
                        renderMark={this._renderMark}
                        spellCheck
                        autoFocus/>
            </div>
        );
    };

As it can be seen in the following image, the letter lambda is both rendered as \lambda and λ, the latter of which is the expected behavior. Can someone please advise what I might be doing wrong?

Note: InlineMath comes from react-katex.

Thanks!

question

Source

kevinguard

All 4 comments

might want to use inline instead of mark and put the latex(e.g lambda) into data instead of text

isubasti on 19 Jun 2018

Hey, thanks for using Slate! Unfortunately, we can't offer support for usage questions in the issues here because it becomes overwhelming to maintain the project if the issues are filled with questions.

However, we do have a Slack channel and people are constantly asking and answering questions in there. So I'm going to close this issue, but I definitely recommend joining the Slack channel if you want to find people that might be able to help.

Thanks for understanding!