Hundreds Editors

'use client';
 
import type { Value } from 'platejs';
import { Plate, usePlateEditor } from 'platejs/react';
import * as React from 'react';
 
import { Editor, EditorContainer } from '@/components/editor/editor';
import { createMultiEditorsValue } from '@/registry/examples/values/multi-editors-value';
 
const editors = createMultiEditorsValue().map((value, index) => ({
  id: String(index + 1),
  value,
}));
 
function WithPlate({ id, value }: { id: string; value: Value }) {
  const editor = usePlateEditor({
    id,
    // components: PlateUI,
    // plugins: [...BasicBlocksKit, ...BasicMarksKit],
    initialValue: value,
  });
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor spellCheck={false} />
      </EditorContainer>
    </Plate>
  );
}
 
export default function HundredsEditorsDemo() {
  return (
    <div className="flex flex-col">
      {editors.map(({ id, value }) => (
        <div key={id} className="p-10">
          <h3 className="mb-2 font-semibold">#{id}</h3>
          <WithPlate id={id} value={value} />
        </div>
      ))}
    </div>
  );
}Copy

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