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

EditorCommandsService is an Angular injectable service that provides methods to execute formatting and structural commands in the ProseMirror editor. It wraps ProseMirror commands with a clean API for toggling marks, changing block types, and managing lists. 
@Injectable({ providedIn: 'root' })
export class EditorCommandsService

​
How Commands Work

All methods in this service follow the ProseMirror Command pattern: 
type Command = (
  state: EditorState,    // current editor state (document + selection)
  dispatch?: (tr: Transaction) => void,  // function to apply a transaction
  view?: EditorView      // visual editor instance (DOM access)
) => boolean;            // returns true if command executed
Each method:
  • Takes an EditorView parameter to access the editor state and dispatch function
  • Returns boolean indicating whether the command was successfully executed
  • Uses the EuclidesEditorSchema to reference marks and nodes

​
Methods

​
toggleBold

Toggles bold formatting (strong mark) on the current selection. 
toggleBold(view: EditorView): boolean
​
view
EditorView
required
The ProseMirror EditorView instance containing the editor state and dispatch function.
​
return
boolean
Returns true if the bold mark was successfully toggled, false otherwise.
Implementation: 
const command: Command = toggleMark(EuclidesEditorSchema.marks['strong'])
return command(view.state, view.dispatch)

​
toggleItailc

Toggles italic formatting (em mark) on the current selection. 
toggleItailc(view: EditorView): boolean
​
view
EditorView
required
The ProseMirror EditorView instance containing the editor state and dispatch function.
​
return
boolean
Returns true if the italic mark was successfully toggled, false otherwise.
Implementation: 
const command: Command = toggleMark(EuclidesEditorSchema.marks['em'])
return command(view.state, view.dispatch)

​
toggleStrike

Toggles strikethrough formatting (strike mark) on the current selection. 
toggleStrike(view: EditorView): boolean
​
view
EditorView
required
The ProseMirror EditorView instance containing the editor state and dispatch function.
​
return
boolean
Returns true if the strikethrough mark was successfully toggled, false otherwise.
Implementation: 
const command: Command = toggleMark(EuclidesEditorSchema.marks['strike'])
return command(view.state, view.dispatch)

​
setTextAlign

Sets the text alignment for the current paragraph block. 
setTextAlign(align: string, view: EditorView): boolean
​
align
string
required
The alignment value to apply (e.g., 'left', 'center', 'right', 'justify').
​
view
EditorView
required
The ProseMirror EditorView instance containing the editor state and dispatch function.
​
return
boolean
Returns true if the text alignment was successfully set, false otherwise.
Implementation: 
return setBlockType(
  EuclidesEditorSchema.nodes['paragraph'], 
  { textAlign: align }
)(view.state, view.dispatch);

​
toggleCodeBlock

Converts the current block into a code block or reverts it back to a paragraph. 
toggleCodeBlock(view: EditorView): boolean
​
view
EditorView
required
The ProseMirror EditorView instance containing the editor state and dispatch function.
​
return
boolean
Returns true if the code block was successfully toggled, false otherwise.
Implementation: 
return CommandsMethods.turnIntoCodeBlock(
  EuclidesEditorSchema
)(view.state, view.dispatch);

​
toggleList

Toggles a list of the specified type (ordered, bullet, or task list). 
toggleList(type: list, view: EditorView): boolean
​
type
list
required
The type of list to toggle. Must be one of:
  • 'ordered_list' - Numbered list
  • 'bullet_list' - Bulleted list
  • 'task_list' - Checkbox task list
​
view
EditorView
required
The ProseMirror EditorView instance containing the editor state and dispatch function.
​
return
boolean
Returns true if the list was successfully toggled, false otherwise.
Type Definition: 
type list = 'ordered_list' | 'bullet_list' | 'task_list'
Implementation: 
return CommandsMethods.switchList(
  EuclidesEditorSchema.nodes[type]
)(view.state, view.dispatch);

​
Usage Example

import { Component } from '@angular/core';
import { EditorView } from 'prosemirror-view';
import { EditorCommandsService } from './editor-commands.service';

@Component({
  selector: 'app-editor',
  template: `
    <button (click)="makeBold()">Bold</button>
    <button (click)="makeItalic()">Italic</button>
    <button (click)="addBulletList()">Bullet List</button>
  `
})
export class EditorComponent {
  editorView: EditorView;

  constructor(private commands: EditorCommandsService) {}

  makeBold() {
    const success = this.commands.toggleBold(this.editorView);
    if (!success) {
      console.log('Bold command could not be executed');
    }
  }

  makeItalic() {
    this.commands.toggleItailc(this.editorView);
  }

  addBulletList() {
    this.commands.toggleList('bullet_list', this.editorView);
  }
}

​
Dependencies

  • ProseMirror: Uses EditorView from prosemirror-view and commands from prosemirror-commands
  • EuclidesEditorSchema: The custom schema defining all marks and nodes for the editor
  • CommandsMethods: Custom command implementations for complex operations like code blocks and lists

Build docs developers (and LLMs) love

Get started for freeTalk to us