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());

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,
}));

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

Performance Considerations

• Load only the plugins you need to minimize bundle size
• 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

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