Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/euclidesseg/euclides-workspace/llms.txt

Use this file to discover all available pages before exploring further.

The EuclidesRichEditorComponent is the main editor component that provides a full-featured rich text editing experience powered by ProseMirror.

​
Overview

This component is a standalone Angular component that implements a rich text editor with formatting capabilities, list management, text alignment, and undo/redo functionality. Component Selector: euclides-rich-editor

​
Basic Usage

import { Component } from '@angular/core';
import { EuclidesRichEditorComponent } from 'euclides-rich-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [EuclidesRichEditorComponent],
  template: `
    <euclides-rich-editor />
  `
})
export class AppComponent {}

​
Component Architecture

The editor component implements two Angular lifecycle hooks:
  • AfterViewInit - Initializes the ProseMirror editor view after Angular renders the component
  • OnDestroy - Cleans up the editor view when the component is destroyed

​
Dependencies

The component injects two core services:
  • EditorCommandsService - Handles all formatting and editing commands
  • EditorStateService - Manages undo/redo state and history

​
Public Methods

The component exposes the following methods for programmatic control:

​
Text Formatting

this.editorRef.toggleBold();
// Toggles bold formatting for selected text

​
Text Alignment

toggleAlign(align: string)
Sets text alignment for the current selection. Supported alignment values:
  • 'left' - Align text to the left
  • 'center' - Center align text
  • 'right' - Align text to the right
  • 'justify' - Justify text
Example: 
this.editorRef.toggleAlign('center');

​
Lists

toggleList(type: list)
Toggles list formatting for the current selection. Supported list types:
  • 'bullet_list' - Unordered list with bullets
  • 'ordered_list' - Numbered list
  • 'task_list' - Task list with checkboxes
Example: 
this.editorRef.toggleList('bullet_list');

​
Code Blocks

toggleCodeBlock()
Toggles code block formatting for the current selection. 
this.editorRef.toggleCodeBlock();

​
History Management

this.editorRef.undo();
// Undoes the last edit action

openLinkPopover()
Opens the link popover UI for creating or editing links. If the cursor is within an existing link, the popover will pre-populate with the current URL. 
applyLink(url: string)
Applies or updates a link in the editor. This method:
  • Automatically adds https:// protocol if missing
  • Updates existing links when called on linked text
  • Creates new links for selected text or inserts clickable URL
removeLink()
Removes the link mark from the current selection.

​
Component Template Structure

The editor component consists of two main sections:

​
1. Navigation Toolbar

Provides formatting buttons for:
  • Text formatting (bold, italic, strikethrough)
  • Text alignment (left, center, right, justify)
  • Lists (bullet, ordered)
  • Code blocks
  • Links
  • Undo/redo

​
2. Editor Area

The editable content area where users type and format text: 
<div #editor id="editor" class="editor euclides-editor-content" role="input"></div>
The editor view is created in ngAfterViewInit to ensure the DOM element is available before ProseMirror initialization.

​
Usage with Template Reference

You can access component methods using template references: 
import { Component, ViewChild } from '@angular/core';
import { EuclidesRichEditorComponent } from 'euclides-rich-editor';

@Component({
  selector: 'app-document',
  standalone: true,
  imports: [EuclidesRichEditorComponent],
  template: `
    <euclides-rich-editor #editor />
    
    <div class="custom-toolbar">
      <button (click)="editor.toggleBold()">Bold</button>
      <button (click)="editor.toggleItalic()">Italic</button>
      <button (click)="editor.undo()">Undo</button>
    </div>
  `
})
export class DocumentComponent {
  @ViewChild('editor') editor!: EuclidesRichEditorComponent;
  
  ngAfterViewInit() {
    // Access editor methods programmatically
    // this.editor.toggleBold();
  }
}

​
Internal Implementation Details

​
ProseMirror Integration

The component creates a ProseMirror EditorView instance using the EditorEngine.create() method: 
ngAfterViewInit() {
  this.view = EditorEngine.create(
    this.editorRef.nativeElement,
    this.editorStateService
  );
}
Location: euclides-rich-editor.component.ts:38

​
Focus Management

All formatting methods automatically return focus to the editor after executing commands, ensuring smooth editing experience. The editor uses the getLinkRange() utility to detect if the current cursor position is within a link mark, enabling context-aware link editing. Location: euclides-rich-editor.component.ts:88

​
Cleanup

The component properly destroys the ProseMirror view when the component is destroyed: 
ngOnDestroy(): void {
  this.view.destroy();
}
Location: euclides-rich-editor.component.ts:155
Always ensure the component is properly destroyed to prevent memory leaks. Angular handles this automatically when using the component in templates.

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us