RichTextEditor

The rich-text editor allows user to add special formatting to the text. Using this editor, user can bold, underline, change colour and fonts, add hyperlinks, add lists and tables, insert video/images etc.

The placement of the toolbar can be either at the top or bottom; it depends on the context of your application. EDS recommends:

If it contains actions that users need to access frequently and formatting is the primary goal for the user. For example, it is used for creating job descriptions, editing documents, crafting certificate templates, and writing HTML/Markdown, etc.

Show codeCopy code

if it is used for adding comment, sending messages etc.

By default, the rich-text editor is set with a minimum height of 240px, but it automatically adjusts its height based on the content. Alternatively, depending on specific use cases, you have the option to set a maximum height, making any content exceeding this limit scrollable. the toolbar always fixed to the top when scrolling.

Show codeCopy code

Show codeCopy code

It allows you to track the number of words and characters in the editor. this can be used when you need to set maximum character or words limit to the editor.

Show codeCopy code

Validation for max character count and max word count is coming soon!

CKEditor comes with built-in spell and grammar check capabilities, corrects spelling and grammar mistakes while typing or in a separate dialog and polishes writing.

The RichTextEditor component supports loading custom CKEditor 5 plugins, allowing you to extend its functionality with your own features. This is particularly useful when you need application-specific functionality that isn't provided by the default plugins.

Note: Custom plugins should be used as a last resort. Before creating a custom plugin, check if the existing toolbar configuration and built-in features can meet your needs. Custom plugins add complexity and maintenance overhead, so use them sparingly and only when truly necessary.

To add custom plugins, use the extraPlugins prop along with additionalConfig to customize the toolbar and plugin settings:

import { RichTextEditor } from '@eds/rich-text-editor';
import { MyCustomPlugin } from './MyCustomPlugin';

const MyComponent = () => {
  return (
    <RichTextEditor
      extraPlugins={[MyCustomPlugin]}
      additionalConfig={{
        toolbar: {
          items: ['bold', 'italic', '|', 'myCustomButton'],
        },
      }}
    />
  );
};

Here's an example of creating a simple custom plugin that inserts timestamps:

// InsertTimestampPlugin.ts
import { Plugin, ButtonView, Command } from '@eds/rich-text-editor';
import type { Editor } from '@eds/rich-text-editor';

// All necessary CKEditor5 types and classes are re-exported from @eds/rich-text-editor
// You don't need to install ckeditor5 separately in your project

class InsertTimestampCommand extends Command {
  execute() {
    const editor = this.editor;
    const timestamp = new Date().toLocaleString();

    editor.model.change((writer) => {
      const position = editor.model.document.selection.getFirstPosition();
      if (position) {
        editor.model.insertContent(writer.createText(timestamp), position);
      }
    });
  }

  refresh() {
    this.isEnabled = this.editor.model.document.selection.getFirstPosition() !== null;
  }
}

export class InsertTimestampPlugin extends Plugin {
  static get pluginName() {
    return 'InsertTimestamp';
  }

  init() {
    const editor = this.editor;

    // Register command
    editor.commands.add('insertTimestamp', new InsertTimestampCommand(editor as Editor));

    // Add toolbar button
    editor.ui.componentFactory.add('insertTimestamp', (locale) => {
      const view = new ButtonView(locale);
      const command = editor.commands.get('insertTimestamp');

      view.set({
        label: 'Insert Timestamp',
        withText: true,
        tooltip: true,
      });

      if (command) {
        view.bind('isEnabled').to(command, 'isEnabled');
      }

      view.on('execute', () => {
        editor.execute('insertTimestamp');
        editor.editing.view.focus();
      });

      return view;
    });
  }
}

You can load multiple custom plugins at once:

import { RichTextEditor } from '@eds/rich-text-editor';
import { InsertTimestampPlugin } from './plugins/InsertTimestampPlugin';
import { CustomHighlightPlugin } from './plugins/CustomHighlightPlugin';

const MyComponent = () => {
  return (
    <RichTextEditor
      extraPlugins={[InsertTimestampPlugin, CustomHighlightPlugin]}
      additionalConfig={{
        toolbar: {
          items: ['bold', 'italic', 'underline', '|', 'insertTimestamp', 'customHighlight'],
        },
      }}
    />
  );
};

The additionalConfig prop allows you to pass plugin-specific configuration:

<RichTextEditor
  extraPlugins={[MentionPlugin]}
  additionalConfig={{
    mention: {
      feeds: [
        {
          marker: '@',
          feed: ['@john', '@jane', '@admin'],
          minimumCharacters: 1,
        },
      ],
    },
  }}
/>

• CKEditor 5 Plugin Development Guide
• Creating Custom Commands
• UI Components