Overview
The formatJustifyRight inputType is triggered when the user applies right alignment to selected paragraphs. The browser sets text-align: right on the affected elements.
Basic Behavior
Scenario: Paragraph selected
Before (Paragraph selected)
HTML:
<p>This is a paragraph.</p>
After formatJustifyRight
HTML:
<p style="text-align: right;">This is a paragraph.</p>
Text aligned to right
Editor-Specific Handling
Different editor frameworks handle text alignment similarly. Here's how major editors implement formatJustifyRight:
Slate.js
Right Alignment
Slate applies alignment as a block property:
import { Editor, Transforms, Element } from 'slate';
element.addEventListener('beforeinput', (e) => {
if (e.inputType === 'formatJustifyRight') {
e.preventDefault();
Transforms.setNodes(editor, {
align: 'right',
}, {
match: n => Element.isElement(n) && Editor.isBlock(editor, n),
});
}
});
- Block property: Alignment is stored as a property on block elements.
- Transforms.setNodes: Sets
align: 'right'on selected blocks.
ProseMirror
Right Alignment
ProseMirror uses block attribute:
view.dom.addEventListener('beforeinput', (e) => {
if (e.inputType === 'formatJustifyRight') {
e.preventDefault();
const { state, dispatch } = view;
const { $from } = state.selection;
const blockType = schema.nodes.paragraph;
const tr = state.tr.setBlockType($from.before(), $from.after(), blockType, {
...blockType.attrs,
align: 'right',
});
dispatch(tr);
}
});
- Block attribute: Alignment is stored as an attribute on block nodes.
Draft.js
Right Alignment
Draft.js uses block-level styles:
function handleJustifyRight(editorState) {
return RichUtils.toggleBlockType(editorState, 'right');
}
- Block type: Uses block type for alignment.