Editor

Text 4

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 { Editor, EditorContainer } from "@/components/ui/editor";
import { Plate, usePlateEditor } from "platejs/react";

const createMultiEditorsValue = () => {
  const multiEditors: any[][] = [];

  for (let h = 0; h < 300; h++) {
    const multiEditor: any[] = [
      {
        children: [{ text: "Amet duis nisi ea enim laborum laboris." }],
        type: "h1",
      },
    ];

    for (let p = 0; p < 2; p++) {
      multiEditor.push({
        children: [
          {
            text: "Laborum dolor et tempor consectetur amet ullamco consectetur ullamco irure incididunt reprehenderit ullamco nulla tempor. Laboris veniam commodo id in ex ullamco incididunt nulla eu Lorem adipisicing deserunt duis ad. Mollit magna enim exercitation amet proident reprehenderit magna nulla officia ad in non. Magna magna adipisicing fugiat cillum do esse eu adipisicing. Culpa dolor non Lorem. Dolore non voluptate velit in eu culpa velit. Exercitation fugiat cupidatat adipisicing duis veniam proident irure ea excepteur aliqua esse ad cupidatat adipisicing id. Ut exercitation proident ea eiusmod enim non minim proident Lorem aliqua officia voluptate ullamco culpa Lorem. Exercitation eiusmod dolor nostrud qui excepteur. Dolor commodo duis reprehenderit excepteur laboris do minim qui.",
          },
        ],
        type: "p",
      });
    }

    multiEditors.push(multiEditor);
  }

  return multiEditors;
};

const values = createMultiEditorsValue();

function WithPlate({ id, value }: any) {
  const editor = usePlateEditor({
    id,
    value,
  });

  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor spellCheck={false} />
      </EditorContainer>
    </Plate>
  );
}

export default function HundredsEditorsDemo() {
  return (
    <div className="flex flex-col">
      {values.map((value, idx) => {
        return (
          <div key={idx} className="p-10">
            <h3 className="mb-2 font-semibold">#{idx + 1}</h3>
            <WithPlate id={idx + 1} value={value} />
          </div>
        );
      })}
    </div>
  );
}