Trainetic Editor - Component Architecture & Design

ModernEditor.vue

Purpose & Role:

• Root shell for the entire editor UI.
• Orchestrates all major UI components: toolbars, content area, floating/context toolbars, dialogs, and theme selector.
• Handles editor state, event wiring, and command execution.

UI Structure:

• Toolbar Row: Renders the main toolbar (PremiumToolbar) and import button.
• Loading State: Shows a spinner while the editor core is initializing.
• Editor Area: Contains the main editable content area, wrapped for layout and styling.
• Floating Toolbar: Contextual toolbar for text selection actions.
• Context Menu: Custom right-click menu for editor actions.
• Dialogs: Handles modals for links, images, tables, etc.
• Theme Selector: Allows switching between light/dark/auto themes.

Key Implementation Details:

• Uses editorCore (from EditorCore.ts) to manage state and logic.
• Passes event handlers and managers to child components.
• Handles all content-editable events (input, paste, drop, selection, etc.).
• Exposes a command interface for toolbar actions (bold, italic, insert, etc.).
• Integrates with import/export and file management via the import button.

Branching/References:

• PremiumToolbar.vue: Main formatting and file controls.
• ImportButton.vue: File import logic.
• FloatingToolbar.vue: Selection-based quick actions.
• ContextMenu.vue: Custom right-click menu.
• CustomDialog.vue: All modal dialogs.
• ThemeSelector.vue: Theme switching.
• EditorCore.ts: Central logic and state.

Design View:

• Central hub: All other UI components are children or siblings.
• Highly modular: Each feature is a separate component, referenced via props or events.
• Responsive: Layout adapts for mobile/desktop.
• Extensible: New features can be added as new components and plugged in.

PremiumToolbar.vue

Purpose & Role:

• Main toolbar for the editor.
• Provides all primary formatting, paragraph, and insert controls.
• Central to the Word-like experience, giving users access to text styling, alignment, lists, and insert actions.

UI Structure:

• Font Group: Font family, font size, bold, italic, underline, text color, highlight color.
• Paragraph Group: Headings, alignment (left, center, right, justify), bulleted and numbered lists.
• Insert Group: Insert image, link, and table.

Key Implementation Details:

• Uses Vue’s ref for local state (e.g., which formatting is active).
• Emits events for all actions (bold, italic, align, etc.) to the parent (ModernEditor.vue), which then executes the corresponding command.
• Color pickers are simple <input type="color"> elements, but can be replaced with a more advanced color picker component.
• All buttons and selects are styled for a modern, professional look.

Branching/References:

• ModernEditor.vue: Receives all toolbar events and executes commands.
• PremiumColorPicker.vue (potential future integration): Could replace the simple color inputs for a richer color selection experience.
• Other Insert/Formatting Components: Insert actions may trigger dialogs or modals handled by other components.

Design View:

• Horizontal layout with clear grouping for usability.
• Highly modular: Each group is a flex container, making it easy to add/remove features.
• Accessible: Uses button elements and select dropdowns for keyboard navigation.
• Responsive: Can be adapted for mobile with flex-wrap and media queries.

Trainetic Editor

A modern, feature-rich rich text editor built with Vue 3 and TypeScript.

Features

• Rich Text Editing: Full formatting capabilities with a modern interface
• Image Management: Insert, resize, crop, and position images with original source preservation
• Table Support: Create and edit tables with advanced features
• Collaboration: Real-time collaboration with multiple users
• Theme Support: Light and dark themes with system preference detection
• Import/Export: Support for various document formats
• Accessibility: Full keyboard navigation and screen reader support

Image Editing Fix

Issue

Previously, when resizing or cropping an image, the editor would show the previously modified version instead of the original image when opening the image editor again. This prevented users from making multiple edits to the original image.

Solution

The editor now properly stores and manages the original image source:

1. Original Source Storage: When images are inserted or loaded, their original source is stored separately
2. Source Management: The ImageManager maintains a map of original sources for each image
3. Editing Operations: When editing an image, the original source is used for the preview, allowing multiple edits
4. Content Processing: Existing images in imported content are automatically processed to store their original sources

Technical Implementation

• ImageManager: Enhanced with originalSources Map to store original image URLs
• ImageEditor: Updated to use original source for preview instead of current src
• EditorCore: Processes existing images during content initialization and updates
• ModernEditor: Uses ImageManager methods for proper source management

Usage

1. Insert an image into the editor
2. Double-click the image or use the context menu to open the image editor
3. Make resize, crop, or position adjustments
4. Apply changes
5. Open the image editor again - you'll see the original image, not the modified version
6. Make additional edits as needed

This ensures that users can always work with the original image quality and make multiple adjustments without degradation.

Installation

npm install trainetic-editor

Usage

import { EditorCore } from 'trainetic-editor';

const editor = new EditorCore({
  placeholder: 'Start writing...',
  autosave: true
});

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

Development

npm install
npm run dev

Building

npm run build

License

MIT