Cannot display content coming from slate.js

1

Hi Everyone I am Stuck in a problem since monday :face_with_head_bandage: and a can’t seem to solve the issue.
I am trying to implement a rich text editor in my application which is fullstack with node and Mongo atlas.
The rich text editor that I am using is slate.js.
the editor is done and no issues there I have set the state and the onChange function in a separate file using Context api

{
    /** Editor state */
  }

  const [content, setContent] = useState([
    {
      type: "paragraph",
      children: [{ text: "Write your snippets here" }],
    },
  ]);

  /** handleChange Editor */
  const handleChangeEditor = (content) => {
    setContent(content);
  };

  /** onSubmit Content */

  const onSubmit = async (e) => {
    e.preventDefault();

    let variables = {
      content,
      tech,
    };

    const snippetPost = await Axios.post(
      "http://localhost:5000/snippets/",
      variables,
      {
        headers: {
          "x-auth-token":"token here"
        },
      }
    );

    setContent([
      {
        type: "paragraph",
        children: [{ text: "Write your snippets here" }],
      },
    ]);

my issues is that I am not able to display to content on the page, I tried to serialize the content coming from Mongo but the nesting array and object it makes the serialize function not working, I am trying to get deeper to the object to serialize but nothing no results.

const SnippetsContainer = () => {
  const [snippetsContent, setSnippetsContent] = useState([]);

  const serialize = (node) => {
    if (Text.isText(node)) {
      return escapeHtml(node.text);
    }

    const children = node.children.map((n) => serialize(n)).join("");

    switch (node.type) {
      case "quote":
        return `<blockquote><p>${children}</p></blockquote>`;
      case "paragraph":
        return `<p>${children}</p>`;
      case "link":
        return `<a href="${escapeHtml(node.url)}">${children}</a>`;
      default:
        return children;
    }
  };

  const getSnippets = async () => {
    try {
      const res = await Axios.get("http://localhost:5000/snippets/all", {
        headers: {
          "x-auth-token":"token here"
        },
      });
      const content = res.data;

      return setSnippetsContent(content);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    getSnippets();
  }, []);

  {
    /*
    const result = snippetsContent.map((snippet) => {
      let firstResult = snippet.content;
      console.log(firstResult);
    });
  */
  }

  return <div></div>;
};

I also tried dangerouslysetInnerhtml but if I can’t serialize to nested object I have nothing to pass to the _html key.

I am using the primary version of slate

Thanks for your help

2

Ok slightly update I finally got to display the content on screen thanks to this piece of code that I wrote

let i;
  let j;
  let result;

  for (i = 0; i < snippetsContent.length; i++) {
    let secondArr = snippetsContent[i].content;
    for (j = 0; j < secondArr.length; j++) {
      let finalResult = serialize(secondArr[j]);
      result += finalResult;
    }
  }

  return <div dangerouslySetInnerHTML={{ __html: result }} />;

the problem that I have now is yes it is working for tags but it is not working for marks like code,bold italic ecc, because the serialize function work just with node.type.

const serialize = (node) => {
    if (Text.isText(node)) {
      return escapeHtml(node.text);
    }

    const children = node.children.map((n) => serialize(n)).join("");

    switch (node.type) {
      case "heading-one":
        return `<h1>${children}</h1>`;
      case "quote":
        return `<blockquote><p>${children}</p></blockquote>`;
      case "paragraph":
        return `<p>${children}</p>`;
      case "link":
        return `<a href="${escapeHtml(node.url)}">${children}</a>`;
      default:
        return children;
    }
  };

any idea on how I can implement the marks as well to display?

thank you

3

Ok I found the Solution and at the same time I decide to change Editor, because slate.js is a bit of a pain when you save the content of the editor.
I am using react quill now and it is super easy.
if anyone has the same problem let me know I can help you with slate.

4

How did you render bold tags, I did this:

const serialize = node => {
        
        if (Text.isText(node)) {
            var element = [];
            if(node.bold)
            {
                
                return (<strong>{node.text}</strong>)
            }
            element.push(node.text)
            // return element
          return escapeHtml(node.text)
        }
        

        var children = node.children.map(n =>  serialize(n)).join('')
        // console.log(node)
        // console.log("NOSO",node, children)

        switch (node.type) {
            case 'heading-one':
                return <h1 className={textViewClasses.subtitle} >{children}</h1>
            case 'heading-two':
                return <h2 className={textViewClasses.subtitle} >{children}</h2>
            case 'bulleted-list':
                console.log("BUL")
                return <ul>{children}</ul>
            case 'paragraph':
                console.log("CHILD", children, node)
                // children = 
                return <h1 className={textViewClasses.paragraph} >{children}</h1>
            case 'list-item':
                return <li>{children}</li>
            case 'numbered-list':
                return <ol>{children}</ol>
            case 'image':
                return <img className={textViewClasses.textImg} src={node.url}  alt='text_img'/>
            case 'block-quote':
                    return <p className={textViewClasses.quote} >{'"'}{children}{'"'}</p>
            case node.children.bold:
                return <strong>{children}</strong>
            default:
                return children
        }
      }
5

It didn’t work, it returns an [object, object]