Implement custom buttons

Author: CarlosNZ

demo/src/App.tsx

@@ -366,6 +366,22 @@ function App() {
               stringTruncate={90}
               customNodeDefinitions={dataDefinition?.customNodeDefinitions}
               customText={dataDefinition?.customTextDefinitions}
+              // customButtons={[
+              //   {
+              //     Element: () => (
+              //       <svg fill="none" viewBox="0 0 24 24" height="1em" width="1em">
+              //         <path
+              //           fill="currentColor"
+              //           fillRule="evenodd"
+              //           d="M12 21a9 9 0 100-18 9 9 0 000 18zm0 2c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11z"
+              //           clipRule="evenodd"
+              //         />
+              //         <path fill="currentColor" d="M16 12l-6 4.33V7.67L16 12z" />
+              //       </svg>
+              //     ),
+              //     onClick: (nodeData) => console.log(nodeData),
+              //   },
+              // ]}
               onChange={dataDefinition?.onChange ?? undefined}
               jsonParse={JSON5.parse}
             />

src/ButtonPanels.tsx

@@ -8,6 +8,7 @@ import {
   type CopyFunction,
   type CopyType,
   type NodeData,
+  type CustomButtonDefinition,
 } from './types'
 import './style.css'
 
@@ -19,6 +20,7 @@ interface EditButtonProps {
   type?: CollectionDataType
   nodeData: NodeData
   translate: TranslateFunction
+  customButtons: CustomButtonDefinition[]
 }
 
 export const EditButtons: React.FC<EditButtonProps> = ({
@@ -27,6 +29,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
   handleAdd,
   enableClipboard,
   type,
+  customButtons,
   nodeData,
   translate,
 }) => {
@@ -98,6 +101,11 @@ export const EditButtons: React.FC<EditButtonProps> = ({
           <Icon name="add" nodeData={nodeData} />
         </div>
       )}
+      {customButtons?.map(({ Element, onClick }, i) => (
+        <div key={i} onClick={(e) => onClick(nodeData, e)}>
+          <Element />
+        </div>
+      ))}
       {isAdding && handleAdd && type === 'object' && (
         <>
           <input

src/CollectionNode.tsx

@@ -363,6 +363,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
       type={collectionType}
       nodeData={nodeData}
       translate={translate}
+      customButtons={props.customButtons}
     />
   )
 

src/JsonEditor.tsx

@@ -60,6 +60,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   id,
   customText = {},
   customNodeDefinitions = [],
+  customButtons = [],
   jsonParse = JSON.parse,
   jsonStringify = (data: JsonData) => JSON.stringify(data, null, 2),
 }) => {
@@ -276,6 +277,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     stringTruncate,
     translate,
     customNodeDefinitions,
+    customButtons,
     parentData: null,
     jsonParse,
     jsonStringify,

src/ValueNodeWrapper.tsx

@@ -304,6 +304,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
                 handleDelete={canDelete ? handleDelete : undefined}
                 enableClipboard={enableClipboard}
                 translate={translate}
+                customButtons={props.customButtons}
                 nodeData={nodeData}
               />
             )

src/types.ts

@@ -43,6 +43,7 @@ export interface JsonEditorProps {
   translations?: Partial<LocalisedStrings>
   customNodeDefinitions?: CustomNodeDefinition[]
   customText?: CustomTextDefinitions
+  customButtons?: CustomButtonDefinition[]
   jsonParse?: (input: string) => JsonData
   jsonStringify?: (input: JsonData) => string
 }
@@ -187,6 +188,7 @@ interface BaseNodeProps {
   indent: number
   translate: TranslateFunction
   customNodeDefinitions: CustomNodeDefinition[]
+  customButtons: CustomButtonDefinition[]
 }
 
 export interface CollectionNodeProps extends BaseNodeProps {
@@ -244,6 +246,11 @@ 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
+}
+
 export interface InputProps {
   value: unknown
   setValue: (value: ValueData) => void