Configuration

Editor Options

The main configuration object passed to useEdituEditor.

EdituEditorOptions

Property	Type	Default	Description
initialContent	JSONContent	-	Initial content in Tiptap JSON format
initialMarkdown	string	-	Initial content in Markdown format. Takes precedence over initialContent if both are provided
placeholder	string	-	Placeholder text when editor is empty
editable	boolean	true	Whether the editor is editable
autofocus	boolean | "start" | "end" | "all" | number	false	Auto focus behavior on mount
features	EdituFeatureOptions	See Features	Feature configuration
transformDiagramsOnImport	boolean	true	Transform diagram code blocks to diagram nodes when importing Markdown
flavor	EdituMarkdownFlavor	"gfm"	Markdown output flavor. See Markdown Flavor Selection
extensions	Extensions	[]	Additional Tiptap extensions
locale	EdituLocale	English	Locale object for translating all UI strings. See Internationalization

Callbacks

Callback	Type	Description
onUpdate	({ editor }) => void	Fires when content changes
onCreate	({ editor }) => void	Fires when the editor initializes
onDestroy	() => void	Fires when the editor unmounts
onSelectionUpdate	({ editor }) => void	Fires when selection changes
onFocus	({ editor }) => void	Fires when the editor receives focus
onBlur	({ editor }) => void	Fires when the editor loses focus
onError	(error: EdituError) => void	Fires when an error occurs during editor operations. The error is re-thrown after this callback

Example

React

import { useEdituEditor } from '@editu/react';

const editor = useEdituEditor({
  // Content
  initialContent: {
    type: 'doc',
    content: [
      { type: 'paragraph', content: [{ type: 'text', text: 'Hello!' }] }
    ]
  },
  placeholder: 'Start writing...',
  
  // Behavior
  editable: true,
  autofocus: 'end',
  
  // Features
  features: {
    markdown: true,
    mathematics: true,
  },
  
  // Callbacks
  onUpdate: ({ editor }) => {
    console.log('Content:', editor.getJSON());
  },
  onCreate: ({ editor }) => {
    console.log('Editor created');
  },
  onFocus: ({ editor }) => {
    console.log('Editor focused');
  },
  onBlur: ({ editor }) => {
    console.log('Editor blurred');
  },
});

Autofocus Options

The autofocus option controls where the editor places the cursor on mount:

Value	Description
false	No autofocus (default)
true	Focuses at the start
"start"	Focuses at the start of the document
"end"	Focuses at the end of the document
"all"	Selects all content
number	Focuses at a specific position

// Focus at end of document
const editor = useEdituEditor({
  autofocus: 'end',
});

// Focus at position 10
const editor = useEdituEditor({
  autofocus: 10,
});

Read-Only Mode

Set editable: false to make the editor read-only:

const editor = useEdituEditor({
  editable: false,
  initialContent: myContent,
});

You can also toggle editability at runtime:

// Make read-only
editor.setEditable(false);

// Make editable again
editor.setEditable(true);

// Check current state
const isEditable = editor.isEditable;

Custom Extensions

You can add additional Tiptap extensions alongside Editu's defaults:

import { useEdituEditor } from '@editu/react';
import { TextAlign } from '@tiptap/extension-text-align';

const editor = useEdituEditor({
  extensions: [
    TextAlign.configure({ types: ['heading', 'paragraph'] }),
  ],
});

Extension Conflicts

Be careful when you add extensions that might conflict with Editu's built-in extensions. For example, Typography and Highlight are already included in Editu. If you need to customize a built-in extension, disable the feature and add your own configuration.

Editor State

You can access editor state programmatically:

import { getEdituEditorState } from '@editu/core';

// Get current state
const state = getEdituEditorState(editor);

console.log(state);
// {
//   isFocused: boolean,
//   isEmpty: boolean,
//   canUndo: boolean,
//   canRedo: boolean,
//   characterCount: number,
//   wordCount: number,
// }

React Hook

import { useEdituState } from '@editu/react';

function EditorStatus({ editor }) {
  const updateCount = useEdituState(() => editor);
  
  // Component re-renders on editor changes
  return (
    <div>
      <span>Characters: {editor?.storage.characterCount?.characters() ?? 0}</span>
      <span>Words: {editor?.storage.characterCount?.words() ?? 0}</span>
    </div>
  );
}

Content Format

JSON Format (Recommended)

Editu uses Tiptap's JSON format for content:

const content = {
  type: 'doc',
  content: [
    {
      type: 'heading',
      attrs: { level: 1 },
      content: [{ type: 'text', text: 'Title' }],
    },
    {
      type: 'paragraph',
      content: [
        { type: 'text', text: 'Normal text ' },
        { type: 'text', marks: [{ type: 'bold' }], text: 'bold text' },
      ],
    },
  ],
};

Getting Content

// JSON format (recommended for storage)
const json = editor.getJSON();

// HTML format
const html = editor.getHTML();

// Plain text
const text = editor.getText();

Setting Content

// Replace all content
editor.commands.setContent({
  type: 'doc',
  content: [
    { type: 'paragraph', content: [{ type: 'text', text: 'New content' }] }
  ],
});

// Clear content
editor.commands.clearContent();

Next Steps

• Features - Configure individual features in detail
• Theming - Customize the editor appearance
• Auto-Save - Persist content automatically
• API Reference