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:

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:

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:

<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

• Learn about custom message rendering
• Explore agent input context