Render API Output in Slate Text Editor

[NorkzYT]

How would I make an API output inside of the Slate text-editor?

E.g. (This does not work).

import React, { useState } from 'react';
import { Editor } from 'slate-react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  // Fetch the data from the API and update the component's state
  useEffect(() => {
    fetch('https://my-api.com/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return (
    <Editor
      value={data}
      onChange={newData => setData(newData)}
    />
  );
}

Any help would be much appreciated.

I would also like to know why the following does not work.

      <div>
        <Slate
          //className="text-editor"
          editor={editor}
          value={initialValue}
          onChange={onChange}>
          {isLoading ? <div>Loading ...</div> : <Editable value={data.text} />}
        </Slate>
      </div>

[SimHoZebs]

It looks like you are trying to give <Editable/> the information of the nodes from value prop. You should be editing editor value instead.

The value prop only exists because Editable component extends HTMLDivElement - it doesn't actually do anything with it.

Let me know if I'm understanding anything wrong here!

[NorkzYT]

Understood, thank you for the information, and explanation.

Will advise results.

[NorkzYT]

@SimHoZebs

Do you mean something like the following?

const Slate_App = () => {
  const onChange = (value) => {
    const isAstChange = editor.operations.some(
      (op) => "set_selection" !== op.type
    );
    if (isAstChange) {
      // Save the value to Local Storage.
      const content = JSON.stringify(value);
      localStorage.setItem("text-editor", content);
    }
  };

  const editorValue = isLoading ? <div>Loading ...</div> : data.text;

  return (
    <div>
      <Slate
        //className="text-editor"
        editor={editorValue}
        value={initialValue}
        onChange={onChange}
      ></Slate>
    </div>
  );
};

[SimHoZebs]

It seems that the confusion is from not understanding what the editor prop does. The best place to start would be the walkthrough in the docs. There, you can see that editor accepts Editor instance, where everything regarding slate's functionality is stored.

Not exactly sure what you are trying to do here, but here's an example on how to log out the syntax tree from slate's onChange.

const initialValue = [{ type: "paragraph", children: [{ text: "" }] }]

const SlateApp = () => {
  const [editor, setEditor] = useState(() => withReact(createEditor()));
  const onChange = (value) => {
    console.log(value)  //same as console.log(editor.children)
  };

  return (
    <div>
      <Slate
        editor={editor}
        value={initialValue}
        onChange={onChange}
      >
        <Editable/>
      </Slate>
    </div>
  );
};

[NorkzYT]

Understood, will do.

What I am trying to do is when a button is clicked, an API will be triggered which will store a value in a prop, I want to take the value of that prop and put it into the Slate Editor, and before the value is inside the Slate Editor I want the Slate Editor to say something like "Loading..." until the API outputs the value.

An example of this is in the following website.
https://openresponse.vercel.app/

In the website you would click the Submit/up arrow button which will trigger the API and also have three dots appear in a <textarea> box which will then have the value of the API once it outputs the result.

Do advise if you would like for me to elaborate more.

[NorkzYT]

In the beginning I was thinking of adding the following to const initialValue = [{ type: "paragraph", children: [{ text: "" }] }], although I did not succeed due to an error.

{data.text}