Skip to main content

AlignButton Plugin

The AlignButton plugin provides text alignment capabilities within the On-Codemerge editor. It allows users to align text to the left, right, center, or justify it.

on-CodeMerge

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product. This intuitive tool for developers of all skill levels.
Result:
Preview:

Integration​

To use the AlignButton plugin, you need to import and register it with the EditorCore. Here's a step-by-step guide:

Initialize and Register AlignButton
import EditorCore from 'on-codemerge';
import { AlignButton } from 'on-codemerge/alignButton';

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new EditorCore(appElement);
    editor.registerModule(new AlignButton());
  }
});

Features​

The AlignButton plugin comes with a dropdown menu for choosing the text alignment. It supports the following alignment options:

  • Left: Aligns text to the left.
  • Right: Aligns text to the right.
  • Center: Centers text.
  • Justify: Justifies text.

When a user selects a portion of text and chooses an alignment option, the AlignButton updates the text's alignment accordingly.

How it Works​

The AlignButton works by modifying the textAlign and display CSS properties of the selected text nodes. It utilizes a DropdownMenu for the UI and StyleManager to apply or remove styles dynamically.