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: 
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: 
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:
ShortcutAction
EnterSubmit message
Shift + EnterNew line
@Trigger mentions
TabFocus editor
MToggle 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: 
<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: 
.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: 
<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: 
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