Hundreds Editors

PreviousNext

Render many independent Plate editors on one page.

This example mounts 300 separate Plate editors in a single React tree. Each editor gets its own id and value, so the page stresses editor creation, store isolation, and repeated editable surfaces.

Demo

Loading…

Source

The demo maps generated values to <WithPlate id={idx + 1} value={value} />.

'use client';
 
import * as React from 'react';
 
import type { Value } from 'platejs';
import { Plate, usePlateEditor } from 'platejs/react';
 
import { createMultiEditorsValue } from '@/registry/examples/values/multi-editors-value';
import { Editor, EditorContainer } from '@/components/ui/editor';
 
const values = createMultiEditorsValue();
 
function WithPlate({ id, value }: { id: string; value: Value }) {
  const editor = usePlateEditor({
    id,
    // components: PlateUI,
    // plugins: [BasicBlocksPlugin, BasicMarksPlugin],
    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) => (
        <div key={idx} className="p-10">
          <h3 className="mb-2 font-semibold">#{idx + 1}</h3>
          <WithPlate id={String(idx + 1)} value={value} />
        </div>
      ))}
    </div>
  );
}
'use client';
 
import * as React from 'react';
 
import type { Value } from 'platejs';
import { Plate, usePlateEditor } from 'platejs/react';
 
import { createMultiEditorsValue } from '@/registry/examples/values/multi-editors-value';
import { Editor, EditorContainer } from '@/components/ui/editor';
 
const values = createMultiEditorsValue();
 
function WithPlate({ id, value }: { id: string; value: Value }) {
  const editor = usePlateEditor({
    id,
    // components: PlateUI,
    // plugins: [BasicBlocksPlugin, BasicMarksPlugin],
    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) => (
        <div key={idx} className="p-10">
          <h3 className="mb-2 font-semibold">#{idx + 1}</h3>
          <WithPlate id={String(idx + 1)} value={value} />
        </div>
      ))}
    </div>
  );
}

Value Generator

Each generated editor value contains one heading and two paragraphs.

/** @jsxRuntime classic */
/** @jsx jsx */
import type { Value } from 'platejs';
 
import { jsx } from '@platejs/test-utils';
 
jsx;
 
export const createMultiEditorsValue = () => {
  const multiEditors: Value[] = [];
 
  for (let h = 0; h < 300; h++) {
    const multiEditor: Value = [];
    multiEditor.push(<hh1>Amet duis nisi ea enim laborum laboris.</hh1>);
 
    for (let p = 0; p < 2; p++) {
      multiEditor.push(
        <hp>
          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.
        </hp>
      );
    }
 
    multiEditors.push(multiEditor);
  }
 
  return multiEditors;
};
/** @jsxRuntime classic */
/** @jsx jsx */
import type { Value } from 'platejs';
 
import { jsx } from '@platejs/test-utils';
 
jsx;
 
export const createMultiEditorsValue = () => {
  const multiEditors: Value[] = [];
 
  for (let h = 0; h < 300; h++) {
    const multiEditor: Value = [];
    multiEditor.push(<hh1>Amet duis nisi ea enim laborum laboris.</hh1>);
 
    for (let p = 0; p < 2; p++) {
      multiEditor.push(
        <hp>
          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.
        </hp>
      );
    }
 
    multiEditors.push(multiEditor);
  }
 
  return multiEditors;
};

Runtime Shape

SurfaceOwnerNotes
createMultiEditorsValue()Registry exampleCreates 300 editor values with JSX test-utils syntax.
WithPlateRegistry exampleCalls usePlateEditor({ id, value }) for each editor.
<Plate>platejs/reactCreates one editor store provider per editor instance.
<EditorContainer> / <Editor>Registry UIRenders the shared editor shell for every instance.

Use this demo to inspect many-editor mounting cost, store isolation, and focus behavior. It is a browser stress page, not a production layout recommendation.

Related