Unable to center text blocks in draftjs editor

  css, draft-js-plugins, draftjs, javascript, reactjs

I am trying to figure out how one can center text blocks in draftjs and have tried the following approach which is to define css styles and then apply them to blocks that have the defined type CENTER_ALIGN. Other approaches include setting block data with a custom block function which maps styling based on stored data. Irrelevant parts of the code have been omitted. I have been struggling with this issue for about a week and do not know how else I can attempt to solve the problem. Also I am not sure what I could exactly be doing wrong. Please advise. Thank you.

RTEditor.js

import "./RTEditor.css";
import "draft-js/dist/Draft.css";
import '@draft-js-plugins/alignment/lib/plugin.css';
import "./RTEditor.css";

const focusPlugin = createFocusPlugin()
const alignmentPlugin = createAlignmentPlugin()

const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator
);

const imagePlugin = createImagePlugin({ decorator })

const { AlignmentTool } = alignmentPlugin;

const plugins = [imagePlugin, alignmentPlugin, focusPlugin]

const LEFT_ALIGN = 'LEFT_ALIGN'
const CENTER_ALIGN = 'CENTER_ALIGN'
const RIGHT_ALIGN = 'RIGHT_ALIGN'
const JUSTIFY = 'JUSTIFY'


const customBlockStyleFn = (contentBlock) => {
  const textAlignStyle = contentBlock.getType();
  console.log(textAlignStyle)
  switch (textAlignStyle) {
    case RIGHT_ALIGN:
      return `block-right`;
    case CENTER_ALIGN:
      return `block-center`;
    case LEFT_ALIGN:
      return `block-left`;
    case JUSTIFY:
      return `block-justify`;
    default:
      return null;
  }
}

class RTEditor extends Component {

constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };

    this.onChange = this.onChange.bind(this);

    this.onCenterTextPress = this.onCenterTextPress.bind(this);

  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevProps.content && this.props.content) {
      this.setState({
        editorState: EditorState.createWithContent(
          ContentState.createFromText(this.props.content)
        ),
      });
    }
  }
  
  handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(editorState, command);

    if (newState) {
      this.onChange(newState);
      return "handled";
    }

    return "not-handled";
  }
  
  onToggleBlockPress(event, blockType) {
    event.preventDefault()
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType))
  }
  
  renderAlignCenterButton() {
    let className = this.getActiveBlockClassName(CENTER_ALIGN)
    return (
      <IconButton 
        style={{ backgroundColor: (className === 'active') ? 'gray' : 'transparent' }}
        onMouseDown={(event) => {
          this.onToggleBlockPress(event, CENTER_ALIGN)
          }}>
        <FormatAlignCenter className={className} />
      </IconButton>
    )

  }
  
  getActiveBlockClassName(block) {
    const currentBlockType =    RichUtils.getCurrentBlockType(this.state.editorState);
    return (currentBlockType === block) ? 'active' : ''
  }
  
  render() {
    return (
      <div
        style={{
          flexDirection: "column",
          border: 5,
          borderColor: "grey",
          width: "auto",
          height: "auto",
        }}
      >
        <Toolbar>
          {this.renderAlignCenterButton()}
    
        </Toolbar>
        <Editor
          ref="editor"
          placeholder="Welcome"
          handleKeyCommand={this.handleKeyCommand}
          editorState={this.state.editorState}
          onChange={this.onChange}
          blockStyleFn={customBlockStyleFn}
          plugins={plugins}
        />
      </div>
    );
  }
  
export { RTEditor };

RTEditor.css

div.DraftEditor-root {
    border: 1px solid #000;
    background-color: beige;
    height: 200px;
    overflow-y: auto;
}
div.DraftEditor-editorContainer, div.public-DraftEditor-content {
    height: 100%;
  }

.block-center {
  text-align: center;
}

.block-left {
  text-align: left;
}

.block-right {
  text-align: right;
}

.block-justify {
  text-align: justify;
}

Source: Ask Javascript Questions

LEAVE A COMMENT