Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

formatJustifyFull

How formatJustifyFull inputType applies full justification (justify) alignment and varies across browsers.

Overview

The formatJustifyFull inputType is triggered when the user applies full justification (justify) alignment to selected paragraphs. The browser sets text-align: justify on the affected elements.

Basic Behavior

Scenario: Paragraph selected

Before (Paragraph selected)

HTML:
<p>This is a paragraph with some text that spans multiple lines.</p>

After formatJustifyFull

HTML:
<p style="text-align: justify;">This is a paragraph with some text that spans multiple lines.</p>
Text aligned to both left and right edges

Browser-Specific Behavior

Chrome/Edge

  • Applies text-align: justify via inline style
  • May apply to <p> or <div> elements

Firefox

  • Similar behavior to Chrome
  • May use different element types

Safari

  • Justification behavior may differ
  • May apply alignment differently

Editor-Specific Handling

Different editor frameworks handle text alignment differently. Here's how major editors implement formatJustifyFull:

Slate.js

Full Justification

Slate applies alignment as a block property: 

    import { Editor, Transforms, Element } from 'slate';

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatJustifyFull') {
    e.preventDefault();
    
    // Apply justify alignment to selected blocks
    Transforms.setNodes(editor, {
      align: 'justify',
    }, {
      match: n => Element.isElement(n) && Editor.isBlock(editor, n),
    });
  }
});
  • Block property: Alignment is stored as a property on block elements.
  • Transforms.setNodes: Sets align: 'justify' on selected blocks.
ProseMirror

Full Justification

ProseMirror uses text alignment mark or attribute: 

    import { setBlockType } from 'prosemirror-commands';
import { schema } from './schema';

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatJustifyFull') {
    e.preventDefault();
    const { state, dispatch } = view;
    
    // Set text-align attribute on block
    const { $from } = state.selection;
    const blockType = schema.nodes.paragraph;
    
    const tr = state.tr.setBlockType($from.before(), $from.after(), blockType, {
      ...blockType.attrs,
      align: 'justify',
    });
    
    dispatch(tr);
  }
});
  • Block attribute: Alignment is stored as an attribute on block nodes.
  • setBlockType: Updates block type with alignment attribute.
Draft.js

Full Justification

Draft.js uses block-level styles: 

    import { EditorState, RichUtils } from 'draft-js';

function handleJustifyFull(editorState) {
  // Draft.js uses block-level styles for alignment
  return RichUtils.toggleBlockType(editorState, 'justify');
}

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatJustifyFull') {
    e.preventDefault();
    const newState = handleJustifyFull(editorState);
    setEditorState(newState);
  }
});
  • Block type: Uses block type (e.g., 'justify') for alignment.
  • RichUtils.toggleBlockType: Toggles block type to apply alignment.

Related resources