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