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.

​
Overview

Euclides Rich Editor provides several text formatting options through the EditorCommandsService. These formatting options are implemented as marks in ProseMirror, which means they apply styles to text within a block without changing the document structure.

​
Available Formatting Methods

​
Bold Text

Toggle bold formatting using the toggleBold method: 
toggleBold(view: EditorView): boolean {
    const command: Command = toggleMark(EuclidesEditorSchema.marks['strong'])
    return command(view.state, view.dispatch)
}
Usage in your component: 
import { EditorCommandsService } from 'euclides-rich-editor';

toggleBold() {
  if (this.editorCommandsService.toggleBold(this.view)) {
    this.view.focus();
  }
}
The toggleBold method uses ProseMirror’s toggleMark command with the strong mark from the schema. It returns true if the command was successfully executed.

​
Italic Text

Toggle italic formatting using the toggleItailc method: 
toggleItailc(view: EditorView): boolean {
    const command: Command = toggleMark(EuclidesEditorSchema.marks['em'])
    return command(view.state, view.dispatch)
}
Usage in your component: 
toggleItalic() {
  if (this.editorCommandsService.toggleItailc(this.view)) {
    this.view.focus();
  }
}

​
Strikethrough Text

Toggle strikethrough formatting using the toggleStrike method: 
toggleStrike(view: EditorView): boolean {
    const command: Command = toggleMark(EuclidesEditorSchema.marks['strike'])
    return command(view.state, view.dispatch)   
}
Usage in your component: 
toggleStrike() {
  if (this.editorCommandsService.toggleStrike(this.view)) {
    this.view.focus();
  }
}
Strikethrough is a custom mark added to the schema. See the Custom Schema guide to learn how to add your own marks.

​
Code Blocks

Convert a block to a code block using the toggleCodeBlock method: 
toggleCodeBlock(view: EditorView): boolean {
    return CommandsMethods.turnIntoCodeBlock(EuclidesEditorSchema)(view.state, view.dispatch);
}
Usage in your component: 
toggleCodeBlock() {
  if (this.editorCommandsService.toggleCodeBlock(this.view)) {
    this.view.focus();
  }
}
The turnIntoCodeBlock method has special handling for lists. When converting a list to a code block, it extracts the text from all list items and creates a single code block: 
// Extract text from all list items
let text = "";
node.forEach((listItem: any) => {
    const para = listItem.firstChild;
    if (para) {
        text += para.textContent + "\n";
    }
});

​
How Marks Work

Text formatting in Euclides Editor is implemented using ProseMirror marks. Marks are inline styles that can be applied to ranges of text without changing the document structure.

​
Mark Types in the Schema

The editor includes these marks from prosemirror-schema-basic:
  • strong - Bold text (<strong>)
  • em - Italic text (<em>)
  • code - Inline code (<code>)
  • link - Hyperlinks (<a>)
And custom marks:
  • strike - Strikethrough text (<s>)

​
Toggle Behavior

All formatting methods use the toggleMark command, which means:
  • If the selection has the mark, it will be removed
  • If the selection doesn’t have the mark, it will be added
  • If part of the selection has the mark, it will be applied to the entire selection

​
Implementation Details

All formatting commands follow the same pattern:
  1. Create a command using ProseMirror’s toggleMark function
  2. Pass the mark type from EuclidesEditorSchema.marks
  3. Execute the command with the current editor state
  4. Return true if successful
Source: ~/workspace/source/projects/euclides-rich-editor/src/lib/core/editor-commands.service.ts:23-44

​
Best Practices

1

Always refocus the editor

After applying formatting, call this.view.focus() to return focus to the editor:
if (this.editorCommandsService.toggleBold(this.view)) {
  this.view.focus();
}
2

Check the return value

Formatting methods return boolean to indicate success. Only refocus if the command succeeded:
if (this.editorCommandsService.toggleStrike(this.view)) {
  // Command succeeded, safe to refocus
  this.view.focus();
}
3

Use with keyboard shortcuts

Combine these methods with Angular event handlers for keyboard shortcuts:
@HostListener('window:keydown.control.b', ['$event'])
onCtrlB(event: KeyboardEvent) {
  event.preventDefault();
  this.toggleBold();
}

​
Next Steps

  • Learn about Text Alignment for block-level formatting
  • Explore Links for creating hyperlinks
  • See Custom Schema to add your own marks like underline or highlight

Build docs developers (and LLMs) love

Get started for freeTalk to us