Styjun

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.

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',
;