Commit 62e1809

zackifysstur

authored and

committed

Add option to hide link and block type dropdown (sstur#108)

* Add ability to hide block type dropdown and link buttons * Update readme with toolbar config options * Toolbar config: display groups

1 parent 3a5869b commit 62e1809Copy full SHA for 62e1809

File tree

+31

-6

lines changed

+31

-6

lines changed

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,8 @@ render() {`
`69`	`69`	`// Supported inline styles: https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Inline-Styles.md`
`70`	`70`	`// Supported block types: https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Custom-Block-Render.md#draft-default-block-render-map`
`71`	`71`	`const toolbarConfig = {`
	`72`	`+ // Optionally specify the groups to display (displayed in the order listed).`
	`73`	`+ display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'LINK_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'HISTORY_BUTTONS'],`
`72`	`74`	`INLINE_STYLE_BUTTONS: [`
`73`	`75`	`{label: 'Bold', style: 'BOLD', className: 'custom-css-class'},`
`74`	`76`	`{label: 'Italic', style: 'ITALIC'},`

Lines changed: 25 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -59,14 +59,33 @@ export default class EditorToolbar extends Component {`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`render() {`
`62`		`- const {className, toolbarConfig} = this.props;`
	`62`	`+ let {className, toolbarConfig} = this.props;`
	`63`	`+ if (toolbarConfig == null) {`
	`64`	`+ toolbarConfig = DefaultToolbarConfig;`
	`65`	`+ }`
	`66`	`+ let display = toolbarConfig.display \|\| DefaultToolbarConfig.display;`
	`67`	`+ let buttonsGroups = display.map((groupName) => {`
	`68`	`+ switch (groupName) {`
	`69`	`+ case 'INLINE_STYLE_BUTTONS': {`
	`70`	`+ return this._renderInlineStyleButtons(toolbarConfig);`
	`71`	`+ }`
	`72`	`+ case 'BLOCK_TYPE_DROPDOWN': {`
	`73`	`+ return this._renderBlockTypeButtons(toolbarConfig);`
	`74`	`+ }`
	`75`	`+ case 'LINK_BUTTONS': {`
	`76`	`+ return this._renderLinkButtons();`
	`77`	`+ }`
	`78`	`+ case 'BLOCK_TYPE_BUTTONS': {`
	`79`	`+ return this._renderBlockTypeDropdown(toolbarConfig);`
	`80`	`+ }`
	`81`	`+ case 'HISTORY_BUTTONS': {`
	`82`	`+ return this._renderUndoRedo();`
	`83`	`+ }`
	`84`	`+ }`
	`85`	`+ });`
`63`	`86`	`return (`
`64`	`87`	`<div className={cx(styles.root, className)}>`
`65`		`- {this._renderInlineStyleButtons(toolbarConfig \|\| DefaultToolbarConfig)}`
`66`		`- {this._renderBlockTypeButtons(toolbarConfig \|\| DefaultToolbarConfig)}`
`67`		`- {this._renderLinkButtons()}`
`68`		`- {this._renderBlockTypeDropdown(toolbarConfig \|\| DefaultToolbarConfig)}`
`69`		`- {this._renderUndoRedo()}`
	`88`	`+ {buttonsGroups}`
`70`	`89`	`</div>`
`71`	`90`	`);`
`72`	`91`	`}`

Lines changed: 4 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,10 @@ export type StyleConfig = {`
`8`	`8`
`9`	`9`	`export type StyleConfigList = Array<StyleConfig>;`
`10`	`10`
	`11`	`+export type GroupName = 'INLINE_STYLE_BUTTONS' \| 'BLOCK_TYPE_DROPDOWN' \| 'LINK_BUTTONS' \| 'BLOCK_TYPE_BUTTONS' \| 'HISTORY_BUTTONS';`
	`12`	`+`
`11`	`13`	`export type ToolbarConfig = {`
	`14`	`+ display: Array<GroupName>;`
`12`	`15`	`INLINE_STYLE_BUTTONS: StyleConfigList;`
`13`	`16`	`BLOCK_TYPE_DROPDOWN: StyleConfigList;`
`14`	`17`	`BLOCK_TYPE_BUTTONS: StyleConfigList;`
`@@ -36,6 +39,7 @@ export const BLOCK_TYPE_BUTTONS: StyleConfigList = [`
`36`	`39`	`];`
`37`	`40`
`38`	`41`	`let EditorToolbarConfig: ToolbarConfig = {`
	`42`	`+ display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'LINK_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'HISTORY_BUTTONS'],`
`39`	`43`	`INLINE_STYLE_BUTTONS,`
`40`	`44`	`BLOCK_TYPE_DROPDOWN,`
`41`	`45`	`BLOCK_TYPE_BUTTONS,`

Comments

(0)