Installation

Install Euclides Rich Editor in your Angular project

Prerequisites

Before installing Euclides Rich Editor, ensure your project meets these requirements:

Angular Version

Euclides Rich Editor requires Angular 21.0.0 or higher.

The editor is built as a standalone component and requires:

• @angular/core ^21.1.0
• @angular/common ^21.1.0

Check your Angular version:

ng version

TypeScript

TypeScript 5.9.2 or higher is recommended for the best development experience.

Node.js

Node.js 18.x or higher is required for Angular 21.

Installation Steps

1. Install the package

   Install Euclides Rich Editor using your preferred package manager:

   npm

   npm install euclides-rich-editor
   

   The package includes all necessary ProseMirror dependencies and types.

2. Verify peer dependencies

   Euclides Rich Editor has the following peer dependencies:

   package.json

   {
     "peerDependencies": {
       "@angular/common": "^21.1.0",
       "@angular/core": "^21.1.0"
     }
   }
   

   These should already be installed in your Angular project. If not, install them:

   npm

   npm install @angular/common@^21.1.0 @angular/core@^21.1.0
   
3. Import the component

   Since Euclides Rich Editor is a standalone component, you can import it directly in your component:

   app.component.ts

   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 {}
   

   No need to add the component to an NgModule - it works out of the box with Angular’s standalone API.

4. Add styles (optional)

   The editor includes default styles. To customize the appearance, you can:

   1. Import the default styles in your styles.css or styles.scss:

   styles.css

   /* Import default editor styles if provided */
   @import 'euclides-rich-editor/styles';
   

   2. Or add custom styles targeting the editor classes:

   styles.css

   .euclides-editor-nav {
     /* Toolbar styles */
   }
   
   .euclides-editor-content {
     /* Editor content area styles */
   }
   
5. Verify installation

   Start your development server:

   ng serve
   

   You should see the editor rendered with a toolbar containing formatting buttons and an editable content area.

   If the editor appears and you can type into it, the installation was successful!

Troubleshooting

Module not found errors

If you see errors like Cannot find module 'euclides-rich-editor':

1. Ensure the package is installed: npm list euclides-rich-editor
2. Clear your node_modules and reinstall:
   rm -rf node_modules package-lock.json
   npm install
   
3. Restart your development server

Peer dependency warnings

If you see warnings about peer dependencies:

npm WARN euclides-rich-editor@0.0.1 requires a peer of @angular/core@^21.1.0

Update your Angular version to 21.1.0 or higher:

ng update @angular/core @angular/cli

TypeScript errors

If you encounter TypeScript compilation errors:

1. Ensure your tsconfig.json has proper settings:

   tsconfig.json

   {
     "compilerOptions": {
       "target": "ES2022",
       "module": "ES2022",
       "lib": ["ES2022", "dom"],
       "moduleResolution": "bundler"
     }
   }
   

2. Update TypeScript to version 5.9.2 or higher:

   npm install typescript@~5.9.2 --save-dev
   

Editor not rendering

If the editor component doesn’t appear:

1. Check browser console for errors
2. Verify the component is imported in your standalone component or module
3. Ensure you’re using the correct selector: <euclides-rich-editor>
4. Check that Angular is properly bootstrapped in your main.ts

Next Steps

Now that you have Euclides Rich Editor installed, continue to the quickstart guide to learn how to use it in your application.