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 { 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 }: any) {
  const editor = usePlateEditor({
    id,
    // components: PlateUI,
    // plugins: [BasicBlocksPlugin, BasicMarksPlugin],
    value,
  });
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor spellCheck={false} />
      </EditorContainer>
    </Plate>
  );
}
 
// function Element({ attributes, children, element }: any) {
//   switch (element.type) {
//     case 'h1':
//       return <h1 {...attributes}>{children}</h1>;
//     default:
//       return <p {...attributes}>{children}</p>;
//   }
// }
 
// function WithoutPlate({ initialValue }: any) {
//   const [value, setValue] = useState(initialValue);
//   const renderElement = useCallback((p) => <Element {...p} />, []);
//   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);
//
//   return (
//     <Slate
//       editor={editor}
//       value={value}
//       onChange={useCallback((v) => setValue(v), [])}
//     >
//       <Editable renderElement={renderElement} />
//     </Slate>
//   );
// }
 
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} />
            {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}
          </div>
        );
      })}
    </div>
  );
}
'use client';
 
import * as React from 'react';
 
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 }: any) {
  const editor = usePlateEditor({
    id,
    // components: PlateUI,
    // plugins: [BasicBlocksPlugin, BasicMarksPlugin],
    value,
  });
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor spellCheck={false} />
      </EditorContainer>
    </Plate>
  );
}
 
// function Element({ attributes, children, element }: any) {
//   switch (element.type) {
//     case 'h1':
//       return <h1 {...attributes}>{children}</h1>;
//     default:
//       return <p {...attributes}>{children}</p>;
//   }
// }
 
// function WithoutPlate({ initialValue }: any) {
//   const [value, setValue] = useState(initialValue);
//   const renderElement = useCallback((p) => <Element {...p} />, []);
//   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);
//
//   return (
//     <Slate
//       editor={editor}
//       value={value}
//       onChange={useCallback((v) => setValue(v), [])}
//     >
//       <Editable renderElement={renderElement} />
//     </Slate>
//   );
// }
 
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} />
            {/* <WithoutPlate initialValue={initialValue} id={idx} /> */}
          </div>
        );
      })}
    </div>
  );
}

Value Generator

Each generated editor value contains one heading and two paragraphs.

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