Manjaro Text Editor

A powerful, modular rich text editor component built with React and TypeScript. This component provides a clean, extensible interface for rich text editing with features like formatting, links, images, lists, and more.

Installation

npm install manjaro-text-editor

Peer Dependencies (must be installed separately):

npm install react react-dom

Note: This library uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project. If you're not using Tailwind, you'll need to include the Tailwind CSS styles in your application.

Features

• Rich Text Formatting: Bold, italic, underline, strikethrough
• Text Alignment: Left, center, right, justify
• Lists: Bulleted and numbered lists
• Links: Insert and edit links with custom text
• Images: Insert images from files, URLs, or base64 (with drag-to-resize on right edge)
• Code Snippets: Insert code blocks with line numbers (Jira-style)
• Code View: Toggle between rich text and HTML code editing
• Undo/Redo: Full undo/redo functionality
• Keyboard Shortcuts: Standard shortcuts (Ctrl+B, Ctrl+I, etc.)
• Resizable: Drag to resize the editor height
• Customizable Toolbar: Show/hide specific tools
• Character/Word Count: Optional character and word counting
• Accessibility: Full keyboard navigation and screen reader support

Usage

Basic Usage (All Features Enabled by Default)

import { RichTextEditor } from 'manjaro-text-editor';
import { useState } from 'react';

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

  return (
    <RichTextEditor
      value={content}
      onChange={setContent}
      placeholder="Start typing..."
    />
    // All toolbar features are shown by default!
  );
}

By default, all features are enabled, including:

• Text formatting (bold, italic, underline, strikethrough)
• Text alignment (left, center, right, justify)
• Lists (bullet and numbered)
• Links (with unlink option)
• Images (with resize functionality)
• Code snippets (with line numbers)
• Undo/Redo
• Clear formatting
• Code view toggle

Advanced Usage

import { RichTextEditor, RichTextEditorRef } from 'manjaro-text-editor';
import { useRef, useState } from 'react';

function MyComponent() {
  const editorRef = useRef<RichTextEditorRef>(null);
  const [content, setContent] = useState('');

  const handleSave = () => {
    if (editorRef.current) {
      const htmlContent = editorRef.current.getContent();
      console.log('HTML content:', htmlContent);
    }
  };

  return (
    <div>
      <RichTextEditor
        ref={editorRef}
        value={content}
        onChange={setContent}
        placeholder="Start typing..."
        height={300}
        maxHeight={600}
        showCharCount={true}
        showWordCount={true}
        allowedFormats={['bold', 'italic', 'link', 'image']}
        onFocus={() => console.log('Editor focused')}
        onBlur={() => console.log('Editor blurred')}
      />
      <button onClick={handleSave}>Save</button>
    </div>
  );
}

Props

RichTextEditorProps

| Prop | Type | Default | Description | | -------------------- | ---------------------------------------- | --------------------- | ---------------------------------------------------------------- | | value | string | '' | HTML content of the editor | | onChange | (content: string) => void | - | Callback when content changes | | placeholder | string | 'Type something...' | Placeholder text | | className | string | - | Additional CSS classes | | disabled | boolean | false | Disable the editor | | maxLength | number | 10000 | Maximum character count | | minLength | number | 0 | Minimum character count | | showToolbar | boolean | true | Show/hide toolbar | | showCharCount | boolean | true | Show character count | | showWordCount | boolean | false | Show word count | | height | number | 200 | Initial height in pixels | | maxHeight | number | 400 | Maximum height in pixels | | autoFocus | boolean | false | Auto focus on mount | | readOnly | boolean | false | Read-only mode | | toolbarPosition | 'top' \| 'bottom' | 'top' | Toolbar position | | allowedFormats | string[] | All formats | Allowed formatting options | | customToolbarItems | ToolbarItem[] | [] | Custom toolbar items | | showCodeView | boolean | true | Show code view toggle button | | imageUseBase64 | boolean | false | Convert uploaded images to base64 instead of uploading to server | | onFocus | () => void | - | Focus callback | | onBlur | () => void | - | Blur callback | | onSelectionChange | (selection: Selection \| null) => void | - | Selection change callback |

Code View Feature

The Rich Text Editor includes a code view feature that allows users to toggle between the visual rich text editor and raw HTML code editing.

Usage

import { RichTextEditor, RichTextEditorRef } from 'manjaro-text-editor';
import { useRef } from 'react';

function MyComponent() {
  const editorRef = useRef<RichTextEditorRef>(null);
  const [content, setContent] = useState(
    '<p>Hello <strong>World</strong>!</p>'
  );

  const toggleCodeView = () => {
    editorRef.current?.toggleCodeView();
  };

  const isCodeView = () => {
    return editorRef.current?.isCodeView() || false;
  };

  return (
    <div>
      <button onClick={toggleCodeView}>
        {isCodeView() ? 'Switch to Rich Text' : 'Switch to Code View'}
      </button>

      <RichTextEditor
        ref={editorRef}
        value={content}
        onChange={setContent}
        showCodeView={true}
        placeholder="Start typing..."
      />
    </div>
  );
}

Code View Features

• Professional Code Editor: Line numbers, syntax highlighting, and collapsible sections
• HTML Syntax Highlighting: Color-coded HTML tags, attributes, and values
• Collapsible Elements: Click line numbers to expand/collapse HTML elements (div, ul, li, etc.)
• Line Numbers: Professional line numbering with clickable collapse indicators
• Automatic Formatting: HTML is automatically formatted for better readability
• Synchronization: Changes in code view are immediately reflected in rich text view
• Toggle Button: Easy switching between modes via toolbar button
• Monospace Font: Code view uses monospace font for better code readability
• Scroll Sync: Line numbers and code content scroll together seamlessly

Advanced Code Editor Usage

The CodeEditor component can also be used independently for HTML code editing:

import { CodeEditor } from 'manjaro-text-editor';

function MyCodeEditor() {
  const [code, setCode] = useState('<div>Hello World</div>');

  return (
    <CodeEditor
      value={code}
      onChange={setCode}
      placeholder="Enter HTML code..."
      className="h-96"
    />
  );
}

CodeEditor Props

| Prop | Type | Default | Description | | ------------- | ------------------------- | ------- | ----------------------- | | value | string | - | HTML content | | onChange | (value: string) => void | - | Content change callback | | onFocus | () => void | - | Focus callback | | onBlur | () => void | - | Blur callback | | disabled | boolean | false | Disable editing | | readOnly | boolean | false | Read-only mode | | placeholder | string | '' | Placeholder text | | className | string | - | Additional CSS classes | | style | React.CSSProperties | - | Inline styles |

Ref Methods

RichTextEditorRef

| Method | Type | Description | | ----------------- | ---------------------------------------------- | -------------------------------------- | | focus | () => void | Focus the editor | | blur | () => void | Blur the editor | | getSelection | () => Selection \| null | Get current selection | | getSelectedText | () => string | Get selected text | | insertText | (text: string) => void | Insert plain text | | insertHTML | (html: string) => void | Insert HTML content | | execCommand | (command: string, value?: string) => boolean | Execute command | | getContent | () => string | Get HTML content | | setContent | (content: string) => void | Set HTML content | | clear | () => void | Clear all content | | undo | () => void | Undo last action | | redo | () => void | Redo last undone action | | canUndo | () => boolean | Check if undo is available | | canRedo | () => boolean | Check if redo is available | | getCharCount | () => number | Get character count | | getWordCount | () => number | Get word count | | isValid | () => boolean | Check if content is valid | | toggleCodeView | () => void | Toggle between rich text and code view | | isCodeView | () => boolean | Check if currently in code view |

Keyboard Shortcuts

| Shortcut | Action | | ---------------------- | ---------------- | | Ctrl/Cmd + B | Bold | | Ctrl/Cmd + I | Italic | | Ctrl/Cmd + U | Underline | | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo | | Ctrl/Cmd + L | Bullet list | | Ctrl/Cmd + O | Numbered list | | Ctrl/Cmd + K | Clear formatting |

Customization

Custom Toolbar Items

import { ToolbarItem } from 'manjaro-text-editor';

const customToolbarItems: ToolbarItem[] = [
  {
    id: 'custom-button',
    label: 'Custom Action',
    icon: <CustomIcon className="h-4 w-4" />,
    command: 'customCommand',
    type: 'button',
  },
  // ... more items
];

<RichTextEditor
  customToolbarItems={customToolbarItems}
  // ... other props
/>;

Allowed Formats

To show all features in the toolbar, use the complete list:

const allowedFormats = [
  // Text formatting
  'bold',
  'italic',
  'underline',
  'strikethrough',
  // Text alignment
  'alignLeft',
  'alignCenter',
  'alignRight',
  'alignJustify',
  // Lists
  'list',
  'orderedList',
  // Quote
  'quote',
  // Links
  'link',
  'unlink',
  // Media
  'image',
  'codeSnippet',
  // Utilities
  'pageNumber',
  'undo',
  'redo',
  'clearFormatting',
  // Code view
  'codeView',
];

<RichTextEditor allowedFormats={allowedFormats} />;

Note: If you don't provide allowedFormats, all features are shown by default.

Styling

The component uses Tailwind CSS classes and can be customized with additional classes:

<RichTextEditor
  className="my-custom-class"
  // ... other props
/>

Important: Make sure Tailwind CSS is properly configured in your project. The library relies on Tailwind CSS classes for styling.

Exports

The library exports the following:

// Main component
export { RichTextEditor, default as RichTextEditor } from 'manjaro-text-editor';

// Individual components (for advanced usage)
export {
  CodeEditor,
  ImageDialog,
  LinkDialog,
  ResizeHandle,
  Toolbar,
} from 'manjaro-text-editor';

// Types
export type {
  ImageDialogProps,
  LinkDialogProps,
  ResizeHandleProps,
  RichTextEditorProps,
  RichTextEditorRef,
  ToolbarItem,
} from 'manjaro-text-editor';

// Configuration
export { defaultToolbarItems } from 'manjaro-text-editor';

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

License

ISC