Q: React-Draft-Wysiwyg How to add custom label to blockTypes?

Question

Im trying to setup custom labels for blockType in react-draft-wysiwyg .

According to this pool request I should be able to add displayName property to editor toolbar configuration object.

I tried to implement this like that, but unfortunately it does not work.

const documentEditorToolBarOptions = {
  options: [
    'blockType',
  ],
  blockType: {
    inDropdown: true,
    options: [
      'Normal',
      'H1',
      'H2',
      'H3',
      'H4',
      'H5',
      'H6',
      'Blockquote',
    ],
    displayNames: [
      { label: 'Normal', displayName: 'Normal', style: 'unstyled' },
      { label: 'H1', displayName: 'Heading 1', style: 'header-one' },
      { label: 'H2', displayName: 'Heading 2', style: 'header-two' },
      { label: 'H3', displayName: 'Heading 3', style: 'header-three' },
      { label: 'H4', displayName: 'Heading 4', style: 'header-four' },
      { label: 'H5', displayName: 'Heading 5', style: 'header-five' },
      { label: 'H6', displayName: 'Heading 6', style: 'header-six' },
      { label: 'Blockquote', displayName: 'Blockquote', style: 'blockquote' },
    ],
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
  },

I would like to achieve a customizable label this will allow me to have multi language support in my editor.

Answer 1

After some researching I found the solution for my issue.

Editor component has a prop to provide localization object. This localization object has a key for custom labels in case we are missing something from the provided localization.

We can use it like that:

   <Editor
     ...
     localization={{ locale: 'en', translations: editorLabels }}
    />

const editorLabels = {
  // Generic
  'generic.add': 'Add',
  'generic.cancel': 'Cancel',

  // BlockType
  'components.controls.blocktype.h1': 'Heading 1',
  'components.controls.blocktype.h2': 'Heading 2',
  'components.controls.blocktype.h3': 'Heading 3',
  'components.controls.blocktype.h4': 'Heading 4',
  'components.controls.blocktype.h5': 'Heading 5',
  'components.controls.blocktype.h6': 'Heading 6',
  'components.controls.blocktype.blockquote': 'Blockquote',
  'components.controls.blocktype.code': 'Code',
  'components.controls.blocktype.blocktype': 'Block Type',
  'components.controls.blocktype.normal': 'Normal',

  // Color Picker
  'components.controls.colorpicker.colorpicker': 'Color Picker',
  'components.controls.colorpicker.text': 'Text',
  'components.controls.colorpicker.background': 'Highlight',

  // Embedded
  'components.controls.embedded.embedded': 'Embedded',
  'components.controls.embedded.embeddedlink': 'Embedded Link',
  'components.controls.embedded.enterlink': 'Enter link',

  // Emoji
  'components.controls.emoji.emoji': 'Emoji',

  // FontFamily
  'components.controls.fontfamily.fontfamily': 'Font',

  // FontSize
  'components.controls.fontsize.fontsize': 'Font Size',

  // History
  'components.controls.history.history': 'History',
  'components.controls.history.undo': 'Undo',
  'components.controls.history.redo': 'Redo',

  // Image
  'components.controls.image.image': 'Image',
  'components.controls.image.fileUpload': 'File Upload',
  'components.controls.image.byURL': 'URL',
  'components.controls.image.dropFileText': 'Drop the file or click to upload',

  // Inline
  'components.controls.inline.bold': 'Bold',
  'components.controls.inline.italic': 'Italic',
  'components.controls.inline.underline': 'Underline',
  'components.controls.inline.strikethrough': 'Strikethrough',
  'components.controls.inline.monospace': 'Monospace',
  'components.controls.inline.superscript': 'Superscript',
  'components.controls.inline.subscript': 'Subscript',

  // Link
  'components.controls.link.linkTitle': 'Link Title',
  'components.controls.link.linkTarget': 'Link Target',
  'components.controls.link.linkTargetOption': 'Open link in new window',
  'components.controls.link.link': 'Link',
  'components.controls.link.unlink': 'Unlink',

  // List
  'components.controls.list.list': 'List',
  'components.controls.list.unordered': 'Unordered',
  'components.controls.list.ordered': 'Ordered',
  'components.controls.list.indent': 'Indent',
  'components.controls.list.outdent': 'Outdent',

  // Remove
  'components.controls.remove.remove': 'Remove',

  // TextAlign
  'components.controls.textalign.textalign': 'Text Align',
  'components.controls.textalign.left': 'Left',
  'components.controls.textalign.center': 'Center',
  'components.controls.textalign.right': 'Right',
  'components.controls.textalign.justify': 'Justify',
};