diff --git a/CHANGELOG.md b/CHANGELOG.md index 688e099e..395667d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## master (unreleased) +## 1.0.9 (18-January-2021) +* Adds `elementProps` option to add custom props to the ToolbarButton. ([@abhaynikam][]) + ## 1.0.8 (18-January-2021) * Adds option to override or add custom toolbar actions. ([@abhaynikam][]) diff --git a/examples/Example.js b/examples/Example.js index 34631d61..da36a92b 100644 --- a/examples/Example.js +++ b/examples/Example.js @@ -24,6 +24,9 @@ class Example extends React.Component { languageKey: "table", tabIndex: "-1", trixButtonGroup: "text-tools", + elementProps: { + onClick: () => { alert("clicked") }, + }, data: { trixAttribute: "table", trixKey: "ta", diff --git a/src/components/ReactTrixRTEToolbar/ToolbarComponent/ToolbarButton/ToolbarButton.jsx b/src/components/ReactTrixRTEToolbar/ToolbarComponent/ToolbarButton/ToolbarButton.jsx index 9880a588..d9d55962 100644 --- a/src/components/ReactTrixRTEToolbar/ToolbarComponent/ToolbarButton/ToolbarButton.jsx +++ b/src/components/ReactTrixRTEToolbar/ToolbarComponent/ToolbarButton/ToolbarButton.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { TOOLBAR_LANGUAGE_OPTS } from "../../constants"; function ToolbarButton(props) { - const { type, classNames, data, tabIndex, languageKey } = props; + const { type, classNames, data, tabIndex, languageKey, elementProps } = props; let dataAttributeOptions = {}; if(data) { @@ -21,18 +21,24 @@ function ToolbarButton(props) { tabIndex={tabIndex} className={classNames} title={TOOLBAR_LANGUAGE_OPTS[languageKey]} + {...elementProps} > {TOOLBAR_LANGUAGE_OPTS[languageKey]} ) } +ToolbarButton.defaultProps = { + elementProps: {}, +} + ToolbarButton.propTypes = { type: PropTypes.string.isRequired, classNames: PropTypes.string.isRequired, data: PropTypes.object, tabIndex: PropTypes.string, - languageKey: PropTypes.string.isRequired + languageKey: PropTypes.string.isRequired, + elementProps: PropTypes.object, } export default ToolbarButton;