@editora/core

@editora/core

[!IMPORTANT] Live Website: https://editora-ecosystem.netlify.app/
Storybook: https://editora-ecosystem-storybook.netlify.app/

Framework-agnostic core editor engine that works with any JavaScript framework

Framework-agnostic core editor engine for Editora Rich Text Editor.

📦 Installation

npm install @editora/core @editora/plugins @editora/themes @editora/react

🎯 Overview

The core package provides the fundamental editor engine that can be integrated with any JavaScript framework. It's built on top of modern web standards and provides a solid foundation for building rich text editors.

✨ Features

• Framework Agnostic: Works with React, Vue, Angular, Svelte, or vanilla JavaScript
• Type Safe: Full TypeScript support with comprehensive type definitions
• Modular Architecture: Plugin-based system for extending functionality
• Performance Optimized: Efficient DOM manipulation and memory management
• XSS Protection: Built-in content sanitization and security
• Accessibility: WCAG compliant with keyboard navigation support

🚀 Quick Start

Basic Usage

import { createEditor, EditorConfig } from '@editora/core';

import "@editora/themes/themes/default.css";
// Create editor configuration
const config: EditorConfig = {
  content: '<p>Hello World!</p>',
  placeholder: 'Start typing...',
  onChange: (html) => {
    console.log('Content changed:', html);
  }
};

// Create editor instance
const editor = createEditor(config);

// Mount to DOM element
const container = document.getElementById('editor');
editor.mount(container);

With Plugins

import { createEditor } from '@editora/core';
import { BoldPlugin, ItalicPlugin, HeadingPlugin } from '@editora/plugins';

import "@editora/themes/themes/default.css";

const editor = createEditor({
  plugins: [
    BoldPlugin(),
    ItalicPlugin(),
    HeadingPlugin()
  ],
  content: '<h1>Welcome</h1><p>Start writing...</p>'
});

editor.mount(document.getElementById('editor'));

Theme Usage

import "@editora/themes/themes/default.css";
import "@editora/themes/themes/dark.css";
import "@editora/themes/themes/acme.css";

• Core/React wrappers: apply a scope on a parent, for example <div data-theme="dark">...</div> or <div data-theme="acme">...</div>.
• Web component: set theme directly on the element, for example <editora-editor theme="dark"> or <editora-editor theme="acme">.

📖 API Reference

createEditor(config: EditorConfig): Editor

Creates a new editor instance with the provided configuration.

Parameters:

• config.content (string, optional): Initial HTML content
• config.placeholder (string, optional): Placeholder text when empty
• config.onChange (function, optional): Callback fired when content changes
• config.plugins (Plugin[], optional): Array of plugins to load
• config.readonly (boolean, optional): Make editor read-only
• config.autofocus (boolean, optional): Auto-focus on mount

Returns: Editor instance

Editor Instance Methods

mount(element: HTMLElement): void

Mounts the editor to a DOM element.

editor.mount(document.getElementById('editor'));

unmount(): void

Unmounts the editor and cleans up resources.

editor.unmount();

getHTML(): string

Gets the current editor content as HTML.

const html = editor.getHTML();

setHTML(html: string): void

Sets the editor content from HTML.

editor.setHTML('<p>New content</p>');

getJSON(): object

Gets the current content as JSON (AST).

const json = editor.getJSON();

setJSON(json: object): void

Sets content from JSON (AST).

editor.setJSON(jsonContent);

focus(): void

Focuses the editor.

editor.focus();

blur(): void

Blurs the editor.

editor.blur();

clear(): void

Clears all content.

editor.clear();

destroy(): void

Destroys the editor instance and frees resources.

editor.destroy();

🔧 Configuration Options

interface EditorConfig {
  // Initial content
  content?: string;
  
  // Placeholder text
  placeholder?: string;
  
  // Change handler
  onChange?: (html: string, json: object) => void;
  
  // Focus handlers
  onFocus?: () => void;
  onBlur?: () => void;
  
  // Plugins
  plugins?: Plugin[];
  
  // Editor state
  readonly?: boolean;
  autofocus?: boolean;
  
  // Content validation
  sanitize?: boolean;
  maxLength?: number;
  
  // Performance
  debounceDelay?: number;
}

Web Component Config Additions

When using <editora-editor> or element.setConfig(...), these config groups are supported:

accessibility?: {
  enableARIA?: boolean;
  keyboardNavigation?: boolean;
  checker?: boolean;
};

performance?: {
  debounceInputMs?: number;
  viewportOnlyScan?: boolean;
};

• accessibility.enableARIA: toggles ARIA role/labels on the editable surface.
• accessibility.keyboardNavigation: toggles keyboard shortcut handling.
• accessibility.checker: auto-loads a11yChecker when plugin list is explicitly configured.
• performance.debounceInputMs: debounces content-change events.
• performance.viewportOnlyScan: skips floating-toolbar/status scans for offscreen instances.

🔌 Plugin System

Create custom plugins by extending the base Plugin class:

import { Plugin, Editor } from '@editora/core';

import "@editora/themes/themes/default.css";
class CustomPlugin extends Plugin {
  name = 'custom';
  
  install(editor: Editor) {
    // Plugin initialization
    console.log('Plugin installed');
  }
  
  execute(command: string, ...args: any[]) {
    // Handle commands
    if (command === 'doSomething') {
      // Custom logic
    }
  }
}

📄 License

MIT © Ajay Kumar

🔗 Links

• Documentation
• GitHub Repository
• Issue Tracker
• npm Package