Adds option to override or add custom toolbar actions

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## master (unreleased)
 
+## 1.0.8 (18-January-2021)
+* Adds option to override or add custom toolbar actions. ([@abhaynikam][])
+
 ## 1.0.7 (02-December-2020)
 * Remove 'unused' import of Trix to prevent webpack packaging conflicts with projects. ([@CUnknown][])
 * Support ID and Name input attribute as component props. ([@CUnknown][])

examples/Example.js

@@ -17,10 +17,25 @@ class Example extends React.Component {
   }
 
   render() {
+    const customOption = {
+      table: {
+        type: "button",
+        classNames: "trix-button trix-button--icon trix-button--icon-bold",
+        languageKey: "table",
+        tabIndex: "-1",
+        trixButtonGroup: "text-tools",
+        data: {
+          trixAttribute: "table",
+          trixKey: "ta",
+        },
+      }
+    };
+
     return (
       <div>
         <ReactTrixRTEToolbar
           toolbarId="rich-text-toolbar"
+          customToolbarActions={customOption}
         />
         <ReactTrixRTEInput
           toolbarId="rich-text-toolbar"

readme.md

@@ -86,6 +86,7 @@ Import `import Trix from "trix";` to the component using React Trix RTE.
 | toolbarId             | string   | The ReactTrixInput initialize the default toolbar if the `toolbarId` is missing or not matching. Make sure the `toolbarId` matches. |
 | disableGroupingAction | boolean  | Defaults to `false`. If the `disableGroupingAction` is enabled the toolbar actions are not grouped for a type. Example: text tools won't be grouped |
 | toolbarActions        | array    | Allows customizing the list of toolbar actions. The available actions are `["bold", "italic", "strike", "link", "heading1", "quote", "code", "bullet", "number", "outdent", "indent", "attachFiles", "undo", "redo"]`.  |
+| customToolbarActions  | object   | Override the toolbar actions properties or add custom toolbar actions. You can refer to default [toolbar actions options](https://github.com/abhaynikam/react-trix-rte/blob/master/src/components/ReactTrixRTEToolbar/constants.js) |
 
 ### Custom Toolbar Usage
 

src/components/ReactTrixRTEToolbar/ReactTrixRTEToolbar.jsx

@@ -10,9 +10,9 @@ import { groupBy, mapIndexed } from "../Shared/utils";
 import { TOOLBAR_ACTION_OPTS, SPACER_BEFORE_TOOL_GROUP } from "./constants";
 
 function ReactTrixRTEToolbar(props) {
-  const { disableGroupingAction = false, toolbarId, toolbarActions } = props;
+  const { disableGroupingAction = false, toolbarId, toolbarActions, customToolbarActions } = props;
   const isToolbarActionPresent = toolbarActions && R.not(R.isEmpty(toolbarActions));
-  let allowedToolbarActions = TOOLBAR_ACTION_OPTS;
+  let allowedToolbarActions = Object.assign(TOOLBAR_ACTION_OPTS, customToolbarActions);
   if(isToolbarActionPresent) {
     allowedToolbarActions = R.pick(toolbarActions, TOOLBAR_ACTION_OPTS);
   }
@@ -78,7 +78,8 @@ function ReactTrixRTEToolbar(props) {
 ReactTrixRTEToolbar.propTypes = {
   disableGroupingAction: PropTypes.bool,
   toolbarId: PropTypes.string,
-  toolbarActions: PropTypes.array
+  toolbarActions: PropTypes.array,
+  customToolbarActions: PropTypes.object,
 }
 
 export default ReactTrixRTEToolbar;

stories/0-ReactTrixInputRTE.stories.js

@@ -1,3 +1,4 @@
+import Trix from 'trix';
 import React, { useRef } from 'react';
 import { action } from '@storybook/addon-actions';
 import { ReactTrixRTEInput } from '../index';

stories/1-ReactTrixWithCustomToolbar.stories.js

@@ -1,3 +1,4 @@
+import Trix from 'trix';
 import React, { Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
 import { ReactTrixRTEInput, ReactTrixRTEToolbar } from '../index';
@@ -43,6 +44,32 @@ export const WithCustomizedToolbarActionWithGrouping = () => (
   </Fragment>
 );
 
+export const WithCustomToolbarAction = () => {
+  const customOption = {
+    table: {
+      type: "button",
+      classNames: "trix-button trix-button--icon trix-button--icon-bold",
+      languageKey: "table",
+      tabIndex: "-1",
+      trixButtonGroup: "text-tools",
+      data: {
+        trixAttribute: "table",
+        trixKey: "ta",
+      },
+    }
+  };
+
+  return (
+    <Fragment>
+      <ReactTrixRTEToolbar
+        toolbarId="react-trix-rte-editor"
+        customToolbarActions={customOption}
+      />
+      <ReactTrixRTEInput toolbarId="react-trix-rte-editor" />
+    </Fragment>
+  );
+};
+
 export const WithRailsDirectUpload = () => (
   <Fragment>
     <ReactTrixRTEToolbar toolbarId="react-trix-rte-editor" />