Smart Text Editor

A powerful React + TypeScript text editor component with advanced features like auto-completion, bracket highlighting, smart formatting, and more.

Features

✨ Auto-completion - Automatic bracket and quote completion
🎯 Bracket Highlighting - Visual highlighting of matching bracket pairs
💬 Quote Highlighting - Smart quote pair detection and highlighting
📝 Keyword Highlighting - Highlights operators and keywords
🎨 Smart Formatting - Intelligent paste formatting for complex structures
⌨️ Advanced Input - Tab indentation, Enter formatting, smart cursor positioning
🌍 Multi-language - Supports English and Russian operators
🚀 Performance - Optimized with memoization and efficient algorithms

Installation

npm install smart-text-editor-react

Quick Start

import React, { useState } from 'react';
import { SmartTextEditor } from 'smart-text-editor-react';
import 'smart-text-editor-react/dist/style.css'; // Import default styles

function App() {
  const [value, setValue] = useState('');

  return (
    <SmartTextEditor
      value={value}
      onChange={setValue}
      placeholder="Start typing..."
      rows={20}
      cols={80}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | The current text value | | onChange | (value: string) => void | - | Called when text changes | | onCursorPositionChange | (position: CursorPosition) => void | - | Called when cursor position changes | | placeholder | string | 'Start typing...' | Placeholder text | | className | string | '' | Additional CSS class | | style | CSSProperties | - | Inline styles | | disabled | boolean | false | Disable the editor | | rows | number | 20 | Number of visible rows | | cols | number | 80 | Number of visible columns |

Advanced Usage

Custom Styling

import { SmartTextEditor } from 'smart-text-editor-react';

<SmartTextEditor
  value={value}
  onChange={setValue}
  className="my-custom-editor"
  style={{ 
    fontFamily: 'Monaco, Consolas, monospace',
    fontSize: '16px',
    lineHeight: '1.6'
  }}
/>

Handling Cursor Position

import { SmartTextEditor, CursorPosition } from 'smart-text-editor-react';

function EditorWithCursorInfo() {
  const [value, setValue] = useState('');
  const [cursorPos, setCursorPos] = useState<CursorPosition>({ start: 0, end: 0 });

  return (
    <div>
      <SmartTextEditor
        value={value}
        onChange={setValue}
        onCursorPositionChange={setCursorPos}
      />
      <div>Cursor: {cursorPos.start} - {cursorPos.end}</div>
    </div>
  );
}

With Custom Controls

function EditorWithControls() {
  const [value, setValue] = useState('');

  const clearEditor = () => setValue('');
  const insertText = (text: string) => setValue(prev => prev + text);

  return (
    <div>
      <div className="editor-controls">
        <button onClick={clearEditor}>Clear</button>
        <button onClick={() => insertText('()')}>Insert ()</button>
      </div>
      <SmartTextEditor
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Tab | Indent by 2 spaces | | Shift+Tab | Remove 2 spaces indentation | | Enter (between brackets) | Create multi-line bracket structure | | (, [, { | Auto-complete with closing bracket | | " | Auto-complete with closing quote | | ) ] } (next to existing) | Smart skip over existing bracket |

Supported Features

Auto-completion

• Brackets: (), [], {}
• Quotes: ""
• Smart positioning: Cursor placed optimally
• Selection wrapping: Selected text gets wrapped

Highlighting

• Bracket pairs: When cursor is near brackets
• Quote pairs: When cursor is near quotes
• Keywords: and, or, not, и, или, не
• Quoted text: Full quoted strings

Smart Formatting

• Paste formatting: Complex bracket structures auto-format
• Line breaking: Intelligent line breaks for readability
• Indentation: Consistent 2-space indentation
• Nested structures: Proper handling of deep nesting

CSS Classes

The component uses these CSS classes for styling:

.smart-text-editor          /* Main container */
.editor-container           /* Editor wrapper */
.editor-textarea            /* The textarea element */
.highlight-layer            /* Highlighting overlay */
.highlight-overlay-text     /* Highlight content */

TypeScript Support

Full TypeScript support with exported types:

import type { 
  SmartTextEditorProps,
  CursorPosition,
  MatchingPair,
  AutoCompletionResult 
} from 'smart-text-editor-react';

Examples

Basic Text Editor

<SmartTextEditor
  value={text}
  onChange={setText}
  placeholder="Enter your code here..."
/>

Code Editor Style

<SmartTextEditor
  value={code}
  onChange={setCode}
  className="code-editor"
  style={{
    fontFamily: 'Monaco, Consolas, monospace',
    fontSize: '14px',
    backgroundColor: '#1e1e1e',
    color: '#d4d4d4'
  }}
  rows={30}
  cols={120}
/>

Query Builder

<SmartTextEditor
  value={query}
  onChange={setQuery}
  placeholder="Enter search query with operators..."
  onCursorPositionChange={(pos) => console.log('Cursor at:', pos)}
/>

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Changelog

1.0.0

• Initial release
• Auto-completion for brackets and quotes
• Bracket and quote highlighting
• Keyword highlighting
• Smart paste formatting
• Tab indentation support
• Multi-language operator support