@optilogic/editor

Rich text editor component for opti-ui - SlateEditor built on Slate.js.

Installation

npm install @optilogic/editor @optilogic/core slate slate-react slate-history

Setup

Make sure you have configured @optilogic/core with the Tailwind preset and CSS variables.

Usage

import { SlateEditor } from '@optilogic/editor';
import { useState } from 'react';

function App() {
  const [content, setContent] = useState('');

  return (
    <SlateEditor
      value={content}
      onChange={setContent}
      placeholder="Type your message..."
      enableTags
      onSubmit={(text) => {
        console.log('Submitted:', text);
      }}
    />
  );
}

Features

• Rich text editing with Slate.js
• Inline tag support (type # to create tags)
• Keyboard shortcuts
• Customizable placeholder
• Submit on Enter (Shift+Enter for new line)
• History (undo/redo)
• Theme-aware styling

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | Initial plain text value | | onChange | (value: string) => void | - | Callback when content changes | | onSubmit | (text: string) => void | - | Callback when Enter is pressed | | onTagCreate | (tag: string) => void | - | Callback when a tag is created | | onTagDelete | (tag: string) => void | - | Callback when a tag is deleted | | placeholder | string | 'Type something...' | Placeholder text | | disabled | boolean | false | Whether the editor is disabled | | enableTags | boolean | true | Whether to enable tag detection | | minRows | number | 3 | Minimum number of rows | | maxRows | number | 8 | Maximum number of rows | | className | string | - | Additional class names |

Ref Methods

const editorRef = useRef<SlateEditorRef>(null);

// Focus the editor
editorRef.current?.focus();

// Clear content
editorRef.current?.clear();

// Get plain text
const text = editorRef.current?.getText();

// Insert text at cursor
editorRef.current?.insertText('Hello');

// Insert a tag
editorRef.current?.insertTag('important');

License

MIT