Editor

Text 3

About

A container component for building rich-text editors with Plate — it provides the editable content area, styling variants, and a static read-only view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Editor to your project and fits it to your theme.

Code

How Editor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { Plate, usePlateEditor } from "platejs/react";

import { Button } from "@/components/ui/button";
import { Editor, EditorContainer } from "@/components/ui/editor";

export default function ControlledEditorDemo() {
  const editor = usePlateEditor({
    value: [
      {
        children: [{ text: "Controlled Editor" }],
        type: "p",
      },
      {
        children: [
          {
            text: "This is a fully controlled Plate editor. Start typing to edit the content, then use the buttons below to programmatically replace or reset its value.",
          },
        ],
        type: "p",
      },
      {
        children: [
          {
            text: "Plate gives you a rich, extensible editing surface with a clean, themeable UI.",
          },
        ],
        type: "p",
      },
    ],
  });

  return (
    <div className="mx-auto w-full max-w-2xl p-6">
      <div className="overflow-hidden rounded-lg border border-border bg-background shadow-sm">
        <Plate editor={editor}>
          <EditorContainer className="h-[240px]">
            <Editor
              variant="none"
              className="h-full px-5 py-4 text-base leading-relaxed"
              placeholder="Type something…"
            />
          </EditorContainer>
        </Plate>
      </div>

      <div className="mt-4 flex gap-2">
        <Button
          onClick={() => {
            editor.tf.setValue([
              {
                children: [{ text: "Replaced Value" }],
                type: "p",
              },
            ]);

            editor.tf.focus({ edge: "endEditor" });
          }}
        >
          Replace Value
        </Button>

        <Button
          variant="outline"
          onClick={() => {
            editor.tf.reset();
            editor.tf.focus();
          }}
        >
          Reset Editor
        </Button>
      </div>
    </div>
  );
}