Adds option to add custom props to the ToolbarButton

abhaynikam · Jan 18, 2021 · fd00147 · fd00147
1 parent 01417af
commit fd00147
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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]}
     </button>
   )
 }
 
+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;