EuclidesRichEditorComponent

Main component for the Euclides Rich Editor providing a ProseMirror-based rich text editing interface

Overview

The EuclidesRichEditorComponent is the core component of the Euclides Rich Editor. It provides a rich text editing interface built on ProseMirror, with methods for text formatting, link management, and editor state control.

Selector

<euclides-rich-editor></euclides-rich-editor>

Imports

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

Properties

view · EditorView

ProseMirror EditorView instance that manages the editor state and rendering

editorRef · ElementRef<HTMLDivElement>

ViewChild reference to the editor container DOM element

showLinkPopover · boolean · default: "false"

Controls the visibility of the link popover dialog

currentLink · string · default: "''"

Stores the URL of the current link being edited

editorCommandsService · EditorCommandsService

Injected service for executing editor commands (bold, italic, lists, etc.)

editorStateService · EditorStateService

Injected service for managing editor state

Lifecycle Hooks

ngAfterViewInit()

ngAfterViewInit(): void

Initializes the ProseMirror editor view after Angular has rendered the component. This ensures the editorRef is available before creating the editor instance.

When called: After Angular has fully rendered the component view and its children.

Behavior: Creates the EditorView using EditorEngine.create() with the native element and editor state service.

ngOnDestroy()

ngOnDestroy(): void

Cleans up the editor view when the component is destroyed.

Behavior: Calls this.view.destroy() to properly dispose of ProseMirror resources.

Text Formatting Methods

toggleBold()

toggleBold(): void

Toggles bold formatting on the current selection or at the cursor position.

Behavior:

• Applies or removes bold mark using EditorCommandsService
• Refocuses the editor after the command executes

toggleItalic()

toggleItalic(): void

Toggles italic formatting on the current selection or at the cursor position.

Behavior:

• Applies or removes italic mark using EditorCommandsService
• Refocuses the editor after the command executes

toggleStrike()

toggleStrike(): void

Toggles strikethrough formatting on the current selection or at the cursor position.

Behavior:

• Applies or removes strike mark using EditorCommandsService
• Refocuses the editor after the command executes

Alignment Methods

toggleAlign()

toggleAlign(align: string): void

Sets text alignment for the current selection or block.

align · string · required

Alignment value (e.g., ‘left’, ‘center’, ‘right’, ‘justify’)

Behavior:

• Applies text alignment using EditorCommandsService.setTextAlign()
• Refocuses the editor after the command executes

Block Methods

toggleCodeBlock()

toggleCodeBlock(): void

Toggles code block formatting for the current selection or block.

Behavior:

• Converts the current block to/from a code block
• Refocuses the editor after the command executes

toggleList()

toggleList(type: list): void

Toggles list formatting (ordered or unordered) for the current selection or block.

type · list · required

List type to toggle (‘bullet_list’ or ‘ordered_list’)

Behavior:

• Converts the current block to/from the specified list type
• Refocuses the editor after the command executes

History Methods

undo()

undo(): void

Undoes the last edit operation.

Behavior:

• Uses ProseMirror’s undo() function from prosemirror-history
• Refocuses the editor after the operation
• Does nothing if there are no operations to undo

redo()

redo(): void

Redoes the last undone operation.

Behavior:

• Uses ProseMirror’s redo() function from prosemirror-history
• Refocuses the editor after the operation
• Does nothing if there are no operations to redo

Link Management Methods

openLinkPopover()

openLinkPopover(): void

Opens the link popover dialog for creating or editing links.

Behavior:

• Uses getLinkRange() to detect if cursor is on an existing link
• Sets currentLink to the existing link URL if found
• Sets showLinkPopover to true to display the popover

applyLink()

applyLink(url: string): void

Applies a link to the current selection or updates an existing link.

url · string · required

The URL to apply. If it doesn’t start with ‘http’, ‘https://’ is automatically prepended

Behavior:

• Automatically prepends ‘https://’ if URL doesn’t start with ‘http’
• Updates existing link if cursor is on a link
• Creates new link with the URL as both href and display text if no selection
• Closes the popover and refocuses the editor

removeLink()

removeLink(): void

Removes the link mark from the current cursor position.

Behavior:

• Uses getLinkRange() to find the link range at cursor
• Removes the link mark while preserving the text
• Closes the popover
• Does nothing if cursor is not on a link

Dependencies

The component relies on the following injected services:

• EditorCommandsService: Provides methods for text formatting, alignment, and block manipulation
• EditorStateService: Manages the editor state for undo/redo functionality

Usage Example

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

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