<Editor>

import { Editor, outlinePlugin } from "@reacteditor/core";
 
const config = {
  components: {},
};
 
const initialData = {
  content: [],
  root: {},
};
 
// blocksPlugin is auto-injected; outlinePlugin must be passed explicitly
// to enable the Outline panel.
const plugins = [outlinePlugin()];
 
export function Editor() {
  return <Editor config={config} data={initialData} plugins={plugins} />;
}

export function Editor() {
  return (
    <Editor
      config={{
        components: {
          HeadingBlock: {
            fields: {
              children: {
                type: "text",
              },
            },
            render: ({ children }) => {
              return <h1>{children}</h1>;
            },
          },
        },
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      data={{
        content: [
          {
            props: { children: "Hello, world", id: "id" },
            type: "HeadingBlock",
          },
        ],
        root: {},
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor /*...*/>
      <Editor.Preview />
    </Editor>
  );
}

export function Editor() {
  return (
    <Editor
      fieldTransforms={{
        text: ({ value }) => <div>{value}</div>, // Wrap all text field values in a div
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      headerPath="/my-page"
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      headerTitle="My page"
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      height="100%"
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      iframe={{ enabled: false }}
      // ...
    />
  );
}

const historyState = {
  data: {
    root: {
      props: { title: "My History" },
    },
  },
};
 
export function Editor() {
  return (
    <Editor
      initialHistory={{
        histories: [{ state: historyState }],
        index: 0,
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      onAction={(action, appState, prevAppState) => {
        if (action.type === "insert") {
          console.log("New component was inserted", appState);
        }
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      metadata={{ title: "Hello, world" }}
      config={{
        HeadingBlock: {
          render: ({ editor }) => {
            return <h1>{editor.metadata.title}</h1>; // "Hello, world"
          },
        },
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      onChange={(data) => {
        console.log("React Editor data was updated", data);
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      onPublish={async (data) => {
        await fetch("/my-api", {
          method: "post",
          body: JSON.stringify({ data }),
        });
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      overrides={{
        header: () => <div />,
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      permissions={{
        delete: false, // Prevent deletion of all components
      }}
      // ...
    />
  );
}

import { Editor, outlinePlugin } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
 
const tailwindCdn = createTailwindCdnPlugin();
 
const plugins = [outlinePlugin(), tailwindCdn];
 
export function Editor() {
  return (
    <Editor
      plugins={plugins}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      routes={["/", "/about"]}
      currentRoute="/"
      onRouteChange={(next) => {
        // navigate your router to `next`
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      onRouteChange={(path) => {
        router.push(path);
      }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      // Hide the left side bar by default
      ui={{ leftSideBarVisible: false }}
      // ...
    />
  );
}

export function Editor() {
  return (
    <Editor
      viewports={[
        {
          width: 1440,
        },
      ]}
      // ...
    />
  );
}

[
  {
    "width": 360,
    "height": "auto",
    "icon": "Smartphone",
    "label": "Small"
  },
  {
    "width": 768,
    "height": "auto",
    "icon": "Tablet",
    "label": "Medium"
  },
  {
    "width": 1280,
    "height": "auto",
    "icon": "Monitor",
    "label": "Large"
  },
  {
    "width": "100%",
    "height": "auto",
    "icon": "FullWidth",
    "label": "Full-width"
  }
]

export function Editor() {
  return (
    <Editor
      _experimentalFullScreenCanvas
      // ...
    />
  );
}