Name: Typix
Author: Diyorbek Juraev

EditorContent renders the editable content area. It sets up the rich text plugin and provides a floating anchor element for menus.

Import

import { EditorContent } from '@typix-editor/react';

Usage

<EditorRoot>
  <EditorContent placeholder="Start writing..." />
</EditorRoot>

With custom class names

<EditorContent
  className="border rounded-lg p-4"
  classNames={{
    contentEditable: 'min-h-[200px] outline-none',
    placeholder: 'text-gray-400',
  }}
/>

With a ref

const ref = useRef<HTMLDivElement>(null);

<EditorContent ref={ref} placeholder="Type here..." />

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Additional content rendered inside the wrapper
`placeholder`	`string`	—	Placeholder text shown when the editor is empty
`className`	`string`	—	CSS class for the outer container
`classNames`	`object`	—	Fine-grained class names (see below)

classNames object

Key	Type	Description
`scroller`	`string`	Scroller wrapper class
`container`	`string`	Content container class
`contentEditable`	`string`	The contenteditable element class
`placeholder`	`string`	Placeholder text class

Ref

EditorContent accepts a ref via forwardRef. The ref points to the outer <div> wrapper element.

EditorContent