Skip to main content

Basic Editor

note

Each example is using Sandpack, a live-running coding environment leveraging CodeSandbox.

Default Editor#

Let's start with a minimal editor using Plate and editableProps.

import React from 'react';
import { Plate, TEditableProps } from '@udecode/plate';

const editableProps: TEditableProps = {
  placeholder: 'Type...',
};

export default () => <Plate editableProps={editableProps} />;

Value#

Let's set the initial value of the editor: one paragraph.

import React from 'react';
import { Plate } from '@udecode/plate';
import { editableProps } from './common/editableProps';
import { MyParagraphElement, MyValue } from './typescript/plateTypes';

const initialValue = [
  {
    type: 'p',
    children: [
      {
        text:
          'This is editable plain text with react and history plugins, just like a <textarea>!',
      },
    ],
  } as MyParagraphElement,
];

export default () => (
  <Plate<MyValue> editableProps={editableProps} initialValue={initialValue}
note

Once you render multiple Plate, you'll need to pass unique id prop to each. This is optional for the first instance.

Change Handler#

Now we would like to listen to editor changes so we can save the value somewhere. Let's use onChange prop.

import React, { useState } from 'react';
import { Plate } from '@udecode/plate';
import { plainTextValue } from './basic-editor/plainTextValue';
import { editableProps } from './common/editableProps';
import { MyValue } from './typescript/plateTypes';

export default () => {
  const [debugValue, setDebugValue] = useState<MyValue | null>(null);

  return (
    <Plate<MyValue>
      editableProps={editableProps}
      initialValue={plainTextValue}
      onChange={(newValue) => {
        setDebugValue(newValue);
        // save newValue...
      }}
    >
      value: {JSON.stringify(debugValue)}
    <
note

Plate children are rendered just after the editable component.

Now we're ready to use plugins!