Overview

Eddies support four different ways of outputting and inputting data: markdown, html, json and text.

Markdown

Not every extension supports markdown output. Some marks or nodes might return plain text instead of markdown.

import { Editor } from "eddies";

export default function Page() {
  return (
    <Editor
      onChange={(editor) => console.log(editor.getMarkdown())}
      initialValue={`# Hello world`}
    />
  );
}

HTML

import { Editor } from "eddies";

export default function Page() {
  return (
    <Editor
      onChange={(editor) => console.log(editor.getHTML())}
      initialValue={`<h1>Hello world</h1>`}
    />
  );
}

JSON

import { Editor } from "eddies";

export default function Page() {
  return (
    <Editor
      onChange={(editor) => console.log(editor.getJSON())}
      initialValue={{
        type: "doc",
        content: [
          {
            type: "paragraph",
            content: [
              {
                type: "text",
                text: "Hello world",
              },
            ],
          },
        ],
      }}
    />
  );
}

Tip

You can also set initialValue later by using:

editor.commands.setContent(`<p>Example Text</p>`);

• Only available when using useEditor hook.