on-CodeMerge Plugins

on-CodeMerge provides a rich ecosystem of plugins to extend editor functionality. Each plugin can be used independently or in combination with others.

Plugin Overview

On-Codemerge comes with a comprehensive set of plugins that extend its functionality. Each plugin adds unique features to the editor, making it a powerful tool for web content creation and editing.

Core Plugins

Essential Plugins

Plugin	Description	Documentation
ToolbarPlugin	Adds a customizable toolbar for quick access to editor features.	View Details
ToolbarDividerPlugin	Adds visual dividers in the toolbar for better organization.	View Details

Text Formatting Plugins

Plugin	Description	Documentation
FontPlugin	Provides options to change font family, size, and style.	View Details
TypographyPlugin	Adds advanced typography options like line height, letter spacing, etc.	View Details
ColorPlugin	Provides options to change text and background colors.	View Details
AlignmentPlugin	Allows alignment of text (left, center, right, justify).	View Details
BlockStylePlugin	Class and style editor for custom styling.	View Details

Content Creation Plugins

Plugin	Description	Documentation
BlockPlugin	Adds support for block-level elements like paragraphs, headings, etc.	View Details
ListsPlugin	Enables creation of ordered and unordered lists.	View Details
TablePlugin	Enables creation and editing of tables.	View Details
TemplatesPlugin	Provides pre-designed templates for quick content creation.	View Details

Media Plugins

Plugin	Description	Documentation
ImagePlugin	Allows inserting and managing images in the editor.	View Details
VideoPlugin	Enables embedding and managing video files.	View Details
YouTubeVideoPlugin	Allows embedding YouTube videos directly into the editor.	View Details
FileUploadPlugin	Provides functionality to upload and manage files.	View Details

Code and Technical Plugins

Plugin	Description	Documentation
CodeBlockPlugin	Adds syntax-highlighted code blocks for programming languages.	View Details
MathPlugin	Enables mathematical expressions and equations.	View Details
HTMLViewerPlugin	Displays the raw HTML content of the editor.	View Details

Interactive Plugins

Plugin	Description	Documentation
LinkPlugin	Allows inserting and managing hyperlinks.	View Details
ChartsPlugin	Allows embedding and editing charts in the editor.	View Details
FormBuilderPlugin	Form builder plugin for creating interactive forms.	View Details

Collaboration and Communication Plugins

Plugin	Description	Documentation
CollaborationPlugin	Enables real-time collaborative editing with multiple users.	View Details
CommentsPlugin	Adds support for comments and annotations in the editor.	View Details
FootnotesPlugin	Allows adding footnotes to the content.	View Details

Utility Plugins

Plugin	Description	Documentation
HistoryPlugin	Adds undo/redo functionality for tracking changes.	View Details
ExportPlugin	Enables exporting editor content to various formats (e.g., HTML, PDF).	View Details
ShortcutsPlugin	Adds keyboard shortcuts for faster editing.	View Details
ResponsivePlugin	Ensures the editor content is responsive across devices.	View Details
LanguagePlugin	Provides language switching capabilities.	View Details
SpellCheckerPlugin	Provides spell-checking functionality.	View Details

AI and Advanced Plugins

Plugin	Description	Documentation
AIAssistantPlugin	AI-powered assistant for content creation and editing.	View Details
FooterPlugin	Adds a footer section to the editor.	View Details

Plugin Configuration

Basic Plugin Usage

import { HTMLEditor, ToolbarPlugin, AlignmentPlugin } from 'on-codemerge';

const editor = new HTMLEditor(container);

// Register plugins
editor.use(new ToolbarPlugin());
editor.use(new AlignmentPlugin());

// Remove plugins when no longer needed
editor.remove('toolbar'); // Removes plugin by name
editor.remove('alignment'); // Removes plugin by name

// Check available plugins
const plugins = editor.getPlugins();
console.log('Available plugins:', Array.from(plugins.keys()));

Plugin Lifecycle Management

// Dynamic plugin management
const editor = new HTMLEditor(container);

// Add plugins as needed
editor.use(new TablePlugin());
editor.use(new ImagePlugin());

// Remove specific plugins
editor.remove('table'); // Removes TablePlugin
editor.remove('image'); // Removes ImagePlugin

// Re-add plugins if needed
editor.use(new TablePlugin()); // Plugin can be re-registered

Plugin Configuration Examples

// Configure plugins with options
editor.use(new FileUploadPlugin({
  maxFileSize: 20 * 1024 * 1024, // 20MB
  allowedTypes: ['image/jpeg', 'image/png', 'application/pdf'],
  endpoints: {
    upload: '/api/upload',
    download: '/api/download',
  }
}));

editor.use(new CollaborationPlugin({
  serverUrl: 'ws://your-websocket-server.com',
  autoStart: true,
}));

// Conditional plugin loading
if (userHasPermission('admin')) {
  editor.use(new AIAssistantPlugin());
} else {
  // Remove AI plugin if user doesn't have permission
  editor.remove('ai-assistant');
}

Plugin Dependencies

Some plugins may have dependencies on other plugins. For example:

• ToolbarPlugin is required for most other plugins to function properly
• BlockPlugin is often required for content manipulation plugins
• HistoryPlugin is recommended for undo/redo functionality

Plugin Management Methods

The HTMLEditor provides several methods for managing plugins:

editor.use(plugin)

Registers and initializes a plugin. Returns true if successful, false otherwise.

editor.use(new TablePlugin());

editor.remove(pluginName | plugin)

Removes a plugin by name or plugin instance. Returns true if successful, false otherwise.

// Remove by plugin name
const success = editor.remove('table');
if (success) {
    console.log('TablePlugin removed successfully');
}

// Remove by plugin instance
import { TablePlugin } from 'on-codemerge';
const tablePlugin = new TablePlugin();
editor.use(tablePlugin); // Register the plugin first
const success = editor.remove(tablePlugin);
if (success) {
    console.log('TablePlugin removed successfully');
}

editor.getPlugins()

Returns a Map of all registered plugins.

const plugins = editor.getPlugins();
console.log('Registered plugins:', Array.from(plugins.keys()));

Plugin Cleanup

When removing plugins, the editor automatically:

• Calls the plugin's destroy() method if it exists
• Removes the plugin from the internal registry
• Cleans up any associated event listeners and resources

// Example: Clean plugin removal by name
editor.remove('spellchecker'); // Automatically calls destroy() if available

// Example: Clean plugin removal by instance
const spellcheckerPlugin = editor.getPlugins().get('spellchecker');
if (spellcheckerPlugin) {
    editor.remove(spellcheckerPlugin); // Automatically calls destroy() if available
}

Performance Considerations

• Load only the plugins you need to minimize bundle size
• Use editor.remove(pluginName) or editor.remove(pluginInstance) to unload plugins when they're no longer needed
• Some plugins (like SpellCheckerPlugin) may require additional configuration
• CollaborationPlugin requires a WebSocket server for full functionality
• AIAssistantPlugin may require API keys for external AI services
• Removing unused plugins can help reduce memory usage and improve performance

Browser Support

All plugins support the following browsers:

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

Getting Help

If you encounter issues with any plugin:

1. Check the plugin's documentation page
2. Verify plugin dependencies are met
3. Check browser console for errors
4. Ensure proper initialization order
5. Review plugin configuration options
6. Use editor.remove(pluginName) or editor.remove(pluginInstance) to properly unload problematic plugins
7. Check if plugin has a destroy() method for proper cleanup
8. Verify plugin names match exactly when using remove() method, or pass the plugin instance directly