> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cedarcopilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuring the Cedar Editor

> Customize the chat input editor behavior and features

The Cedar editor is the rich text input component that powers chat interactions. It supports mentions, keyboard shortcuts, auto-completion, and extensive customization options.

## Basic Configuration

Configure the editor through the `useCedarEditor` hook or ChatInput props:

```tsx theme={null}
import { ChatInput } from 'cedar-os-components/chatInput';

function CustomChat() {
	return <ChatInput className='custom-chat-input' />;
}
```

## Advanced Editor Configuration

Use the `useCedarEditor` hook for fine-grained control:

```tsx theme={null}
import { useCedarEditor } from 'cedar-os';
import { EditorContent } from '@tiptap/react';

function AdvancedChat() {
	const { editor, isEditorEmpty, handleSubmit } = useCedarEditor({
		placeholder: 'Ask me anything...',
		onFocus: () => console.log('Editor focused'),
		onBlur: () => console.log('Editor blurred'),
	});

	return (
		<div>
			<EditorContent editor={editor} />
			<button onClick={() => editor?.commands.focus()}>Focus Editor</button>
			<button onClick={handleSubmit} disabled={isEditorEmpty}>
				Submit
			</button>
		</div>
	);
}
```

## Keyboard Shortcuts

Cedar editor comes with built-in keyboard shortcuts:

| Shortcut        | Action            |
| --------------- | ----------------- |
| `Enter`         | Submit message    |
| `Shift + Enter` | New line          |
| `@`             | Trigger mentions  |
| `Tab`           | Focus editor      |
| `M`             | Toggle microphone |

### Custom Shortcuts

The editor uses TipTap under the hood, so you can extend it with custom keyboard shortcuts by configuring the editor extensions directly.

## Styling and Themes

Customize the editor appearance:

```tsx theme={null}
<ChatInput className='custom-chat-input' />
```

You can customize the appearance using CSS classes. The component uses Tailwind CSS classes internally, so you can override them:

```css theme={null}
.custom-chat-input {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 16px;
	min-height: 120px;
}

.custom-chat-input .ProseMirror {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.5;
}
```

## Editor Events

Handle various editor events:

```tsx theme={null}
<ChatInput
	handleFocus={() => console.log('Editor focused')}
	handleBlur={() => console.log('Editor blurred')}
	className='my-chat-input'
/>
```

## Content Validation

Content validation can be implemented using the `useCedarEditor` hook:

```tsx theme={null}
import { useCedarEditor } from 'cedar-os';
import { EditorContent } from '@tiptap/react';

function ValidatedChat() {
	const { editor, isEditorEmpty, handleSubmit } = useCedarEditor({
		placeholder: 'Type your message...',
		onFocus: () => console.log('Editor focused'),
		onBlur: () => console.log('Editor blurred'),
	});

	const handleCustomSubmit = () => {
		if (!editor) return;

		const text = editor.getText();

		if (text.length > 1000) {
			console.error('Message too long');
			return;
		}
		if (text.includes('@everyone')) {
			console.error('Mass mentions are not allowed');
			return;
		}

		// Process valid message
		console.log('Valid message:', text);
		handleSubmit();
	};

	return (
		<div>
			<EditorContent editor={editor} />
			<button onClick={handleCustomSubmit} disabled={isEditorEmpty}>
				Submit
			</button>
		</div>
	);
}

<ChatInput />;
```

## Next Steps

* Learn about [custom message rendering](/chat/custom-message-rendering)
* Explore [agent input context](/agent-context/agent-context)