Update type definitions, docs

Author: CarlosNZ

README.md

@@ -254,12 +254,14 @@ In addition to the "Copy", "Edit" and "Delete" buttons that appear by each value
 
 ```js
 {
-  Element: React.FC,
-  onClick: (nodeData: NodeData, e: React.MouseEvent) => void
+  Element: React.FC<{ nodeData: NodeData }>,
+  onClick?: (nodeData: NodeData, e: React.MouseEvent) => void
 }
 ```
 Where `NodeData` is the same data structure received by the previous "Update Functions".
 
+The `onClick` is optional -- don't provide it if you have your own `onClick` handler within your button component.
+
 ## Filter functions
 
 You can control which nodes of the data structure can be edited, deleted, or added to, or have their data type changed, by passing Filter functions. These will be called on each property in the data and the attribute will be enforced depending on whether the function returns `true` or `false` (`true` means *cannot* be edited).

src/ButtonPanels.tsx

@@ -126,7 +126,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
         </div>
       )}
       {customButtons?.map(({ Element, onClick }, i) => (
-        <div key={i} onClick={(e) => onClick(nodeData, e)}>
+        <div key={i} onClick={(e) => onClick && onClick(nodeData, e)}>
           <Element nodeData={nodeData} />
         </div>
       ))}

src/types.ts

@@ -284,8 +284,8 @@ export interface CustomNodeDefinition<T = Record<string, unknown>, U = Record<st
 export type CustomTextDefinitions = Partial<{ [key in keyof LocalisedStrings]: CustomTextFunction }>
 
 export interface CustomButtonDefinition {
-  Element: React.FC
-  onClick: (nodeData: NodeData, e: React.MouseEvent) => void
+  Element: React.FC<{ nodeData: NodeData }>
+  onClick?: (nodeData: NodeData, e: React.MouseEvent) => void
 }
 
 export interface InputProps {