Editable Voids

'use client';
 
import type { PlateElementProps } from 'platejs/react';
import {
  definePlatePlugin,
  Plate,
  PlateElement,
  usePlateEditor,
} from 'platejs/react';
import * as React from 'react';
 
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Editor, EditorContainer } from '@/components/editor/editor';
import { EditorKit } from '@/components/editor/plugins';
import { editableVoidsValue } from '@/registry/examples/values/editable-voids-value';
 
export const EditableVoidPlugin = definePlatePlugin('editableVoid', {
  schema: { element: { void: 'editable-island' } },
});
 
export function EditableVoidElement({
  children,
  ...props
}: PlateElementProps<typeof EditableVoidPlugin>) {
  const [inputValue, setInputValue] = React.useState('');
 
  const editor = usePlateEditor({
    plugins: EditorKit,
  });
 
  return (
    // Need contentEditable=false or Firefox has issues with certain input types.
    <PlateElement
      {...props}
      attributes={{ ...props.attributes, contentEditable: false }}
    >
      <div className="mt-2 grid gap-6 rounded-md border p-6 shadow-sm">
        <Input
          id="name"
          className="my-2"
          value={inputValue}
          onChange={(e) => {
            setInputValue(e.target.value);
          }}
          placeholder="Name"
          type="text"
        />
 
        <div className="grid w-full max-w-sm items-center gap-2">
          <Label htmlFor="handed">Left or right handed:</Label>
 
          <RadioGroup id="handed" defaultValue="r1">
            <div className="flex items-center space-x-2">
              <RadioGroupItem id="r1" value="r1" />
              <Label htmlFor="r1">Left</Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem id="r2" value="r2" />
              <Label htmlFor="r2">Right</Label>
            </div>
          </RadioGroup>
        </div>
 
        <div className="grid gap-2">
          <Label htmlFor="editable-void-basic-blocks">
            Tell us about yourself:
          </Label>
 
          <Plate
            editor={editor}
            // initialValue={basicBlocksValue}
          >
            <EditorContainer>
              <Editor />
            </EditorContainer>
          </Plate>
        </div>
      </div>
      {children}
    </PlateElement>
  );
}
 
export default function EditableVoidsDemo() {
  const editor = usePlateEditor({
    plugins: [
      ...EditorKit,
      EditableVoidPlugin.configure({ component: EditableVoidElement }),
    ],
    initialValue: editableVoidsValue,
  });
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>
    </Plate>
  );
}Copy

'use client';
 
import type { PlateElementProps } from 'platejs/react';
import {
  definePlatePlugin,
  Plate,
  PlateElement,
  usePlateEditor,
} from 'platejs/react';
import * as React from 'react';
 
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Editor, EditorContainer } from '@/components/editor/editor';
import { EditorKit } from '@/components/editor/plugins';

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';
import type { Value } from 'platejs';
 
jsx;
 
export const editableVoidsValue: Value = (
  <fragment>
    <hp>
      In addition to nodes that contain editable text, you can insert void
      nodes, which can also contain editable elements, inputs, or an entire
      other Plate editor.
    </hp>
    <element type="editable-void">
      <htext />
    </element>
    <hp>
      <htext />
    </hp>
  </fragment>
);Copy

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';
import type { Value } from 'platejs';
 
jsx;
 
export const editableVoidsValue: Value = (
  <fragment>
    <hp>
      In addition to nodes that contain editable text, you can insert void
      nodes, which can also contain editable elements, inputs, or an entire
      other Plate editor.
    </hp>
    <element type="editable-void">
      <htext />
    </element>
    <