{"id":13758262,"url":"https://github.com/jasonphillips/draft-js-richbuttons-plugin","last_synced_at":"2026-05-05T10:04:47.108Z","repository":{"id":47008667,"uuid":"61332328","full_name":"jasonphillips/draft-js-richbuttons-plugin","owner":"jasonphillips","description":"A plugin for adding rich formatting controls - https://jasonphillips.github.io/draft-js-richbuttons-plugin/","archived":false,"fork":false,"pushed_at":"2021-09-17T14:08:03.000Z","size":1245,"stargazers_count":38,"open_issues_count":6,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T12:21:29.843Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jasonphillips.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-16T23:33:31.000Z","updated_at":"2024-02-18T10:59:45.000Z","dependencies_parsed_at":"2022-09-17T14:03:18.877Z","dependency_job_id":null,"html_url":"https://github.com/jasonphillips/draft-js-richbuttons-plugin","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonphillips%2Fdraft-js-richbuttons-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonphillips%2Fdraft-js-richbuttons-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonphillips%2Fdraft-js-richbuttons-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonphillips%2Fdraft-js-richbuttons-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jasonphillips","download_url":"https://codeload.github.com/jasonphillips/draft-js-richbuttons-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252448547,"owners_count":21749492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:00:23.572Z","updated_at":"2026-05-05T10:04:42.063Z","avatar_url":"https://github.com/jasonphillips.png","language":"JavaScript","funding_links":[],"categories":["Plugins and Decorators Built for Draft.js"],"sub_categories":[],"readme":"# DraftJS RichButtons Plugin\n\n[![npm version](https://badge.fury.io/js/draft-js-richbuttons-plugin.svg)](http://badge.fury.io/js/draft-js-richbuttons-plugin)  [![Build Status](https://travis-ci.org/jasonphillips/draft-js-richbuttons-plugin.svg?branch=master)](https://travis-ci.org/jasonphillips/draft-js-richbuttons-plugin)  [![npm downloads](https://img.shields.io/npm/dm/draft-js-richbuttons-plugin.svg)](https://www.npmjs.com/package/draft-js-richbuttons-plugin)\n\n*This is a plugin for the `draft-js-plugins-editor`.* \nThis plugin allows you to add essential rich formatting buttons (inline and block styles) to your plugins-enabled editor.\n\n## Usage\n\nFirst instantiate the plugin:\n\n```js\nimport createRichButtonsPlugin from 'draft-js-richbuttons-plugin';\n\nconst richButtonsPlugin = createRichButtonsPlugin();\n```\n\nNow get any desired components for inline or block formatting buttons from the instance:\n\n```js\n/* import only the ones you need; all available shown */\nconst {   \n  // inline buttons\n  ItalicButton, BoldButton, MonospaceButton, UnderlineButton,\n  // block buttons\n  ParagraphButton, BlockquoteButton, CodeButton, OLButton, ULButton, H1Button, H2Button, H3Button, H4Button, H5Button, H6Button\n} = richButtonsPlugin;\n```\n\nRender these where desired in your component:\n\n```HTML\n\u003cdiv className=\"myToolbar\"\u003e\n  \u003cBoldButton/\u003e\n  \u003cItalicButton/\u003e\n\n  \u003cH2Button/\u003e\n  \u003cULButton/\u003e\n  \u003cOLButton/\u003e\n\u003c/div\u003e\n```\n\n## Custom Block Types or Inline Styles\n\nButton components behaving exactly like those above can be obtained for any custom block or inline style types used in your draft instance, by invoking either `createStyleButton` or `createBlockButton`:\n\n```js\nconst { createStyleButton, createBlockButton } = richButtonsPlugin;\n\n// create a custom inlinestyle button\nconst RedStyleButton = createStyleButton({style: 'RED', label: 'Red'});\n\n// create a custom block-type button\nconst BorderedBlockButton = createBlockButton({type: 'BorderedBox', label: 'LittleBox'}); \n```\n\nSee more complete code in the included example.\n\n## Rendering Your Own Buttons\n\nThe default buttons are intentionally plain, but will pass the needed props down to their child, allowing you to customize rendering to your needs.\n\nProps passed to both inline and block buttons:\n\n  - **isActive** (_bool_) - true if style / blocktype active in selection\n  - **label** (_string_) -  default label\n\nProps unique to inline buttons:\n\n  - **toggleInlineStyle** (_func_) - to be attached to your click event\n  - **inlineStyle** (_string_) - the draft code for the style\n  - **onMouseDown** (_func_) - attach this to the onMouseDown event of your custom controls; important for preventing focus from leaving the editor when toggling an inline style with a click\n\nProps unique to block buttons:\n\n  - **toggleBlockType** (_func_) - to be attached to your click event\n  - **blockType** (_string_) - the draft code for the block type\n\nExample:\n\n```js\n/*\n  Stateless component for inline style buttons, using the passed props as well as a custom prop \"iconName\"\n*/\nconst MyIconButton = ({iconName, toggleInlineStyle, isActive, label, inlineStyle, onMouseDown, title}) =\u003e\n  \u003ca onClick={toggleInlineStyle} onMouseDown={onMouseDown}\u003e\n    \u003cspan\n      className={`fa fa-${iconName}`}\n      title={title ? title : label}\n      style={{ color: isActive ? '#000' : '#777' }}\n    /\u003e\n  \u003c/a\u003e;\n```\n\nThe above presentational component could then be used this way:\n\n```html\n\u003cBoldButton\u003e\n  \u003cMyIconButton iconName=\"bold\"/\u003e\n\u003c/BoldButton\u003e\n\u003cItalicButton\u003e\n  \u003cMyIconButton iconName=\"italic\" title=\"Italicize\" /\u003e\n\u003c/ItalicButton\u003e\n```\n\n## Key Bindings\n\nThe plugin automatically applies default key bindings from draft's `RichUtils`, including Tab / Shift-Tab behavior for nested lists.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonphillips%2Fdraft-js-richbuttons-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasonphillips%2Fdraft-js-richbuttons-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonphillips%2Fdraft-js-richbuttons-plugin/lists"}