#23 Editable Custom nodes (#25)

Author: CarlosNZ

README.md

@@ -366,8 +366,9 @@ Custom nodes are provided in the `customNodeDefinitions` prop, as an array of ob
   props,                // object (optional)
   hideKey,              // boolean (optional)
   showInTypesSelector,  // boolean (optional)
+  name                  // string (appears in Types selector)
   defaultValue,         // JSON value for a new instance of your component
-  name                  // string
+  editable              // boolean (optional)
 }
 ```
 
@@ -378,6 +379,8 @@ The component will receive *all* the same props as a standard node component (se
 By default, your component will be presented to the right of the property key it belongs to, like any other value. However, you can hide the key itself by setting `hideKey: true`, and the custom component will take the whole row. (See the "Presented by" box in the "Custom Nodes" data set for an example.)
 
 You can allow users to create new instances of your special nodes by selecting them as a "Type" in the types selector when editing/adding values. Set `showInTypesSelector: true` to enable this. However, if this is enabled you need to also provide a `name` (which is what the user will see in the selector) and a `defaultValue` which is the data that is inserted when the user selects this "type". (The `defaultValue` must return `true` if passed through the `condition` function in order for it to be immediately displayed using your custom component.)
+
+Lastly, you can specify whether or not the data inside the node can be edited using the standard editor, with the `editable` prop (default: `true`). If your component includes its own editing interface (e.g. a Date Picker), you might want to disable the standard editor.
 
 ## Undo functionality
 
@@ -403,6 +406,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
+- **1.2.0**: Allow editing of Custom nodes
 - **1.1.0**: Don't manage data state within component
 - **1.0.0**:
   - [Custom nodes](#custom-nodes)

demo/src/data.tsx

@@ -1901,6 +1901,101 @@ const data = {
       },
     ],
   },
+  // Enable to test more complex features of Custom nodes
+  // testCustomNodes: {
+  //   name: '🔧 Custom Nodes',
+  //   description: (
+  //     <Flex flexDir="column" gap={2}>
+  //       <Text>
+  //         This data set shows <strong>Custom Nodes</strong> — you can provide your own components to
+  //         present specialised data in a unique way, or provide a more complex editing mechanism for
+  //         a specialised data structure, say.
+  //       </Text>
+  //       <Text>
+  //         In this example, compare the raw JSON (edit the data root) with what is presented here.
+  //       </Text>
+  //       <Text>
+  //         See the{' '}
+  //         <a href="https://github.com/CarlosNZ/json-edit-react#custom-nodes">Custom Nodes</a>{' '}
+  //         section of the documentation for more info.
+  //       </Text>
+  //     </Flex>
+  //   ),
+  //   rootName: 'Superheroes',
+  //   collapse: 2,
+  //   data: [
+  //     {
+  //       name: 'Steve Rogers',
+  //       aliases: ['Captain America', 'The First Avenger'],
+  //       logo: 'https://logos-world.net/wp-content/uploads/2023/05/Captain-America-Logo.png',
+  //       actor: 'Chris Evans',
+  //       publisher: 'Marvel',
+  //     },
+  //     {
+  //       name: 'Clark Kent',
+  //       aliases: ['Superman', 'Man of Steel', 'Son of Krypton'],
+  //       logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Superman_shield.svg/2560px-Superman_shield.svg.png',
+  //       actor: 'Henry Cavill',
+  //       publisher: 'D.C. Comics',
+  //     },
+  //   ],
+  //   customNodeDefinitions: [
+  //     {
+  //       condition: ({ key, value }) =>
+  //         key === 'logo' &&
+  //         typeof value === 'string' &&
+  //         value.startsWith('http') &&
+  //         value.endsWith('.png'),
+  //       element: ({ data }) => {
+  //         const truncate = (string: string, length = 50) =>
+  //           string.length < length ? string : `${string.slice(0, length - 2).trim()}...`
+  //         return (
+  //           <div style={{ maxWidth: 250 }}>
+  //             <a href={data} target="_blank">
+  //               <img src={data} style={{ maxHeight: 75 }} />
+  //               <p style={{ fontSize: '0.75em' }}>{truncate(data)}</p>{' '}
+  //             </a>
+  //           </div>
+  //         )
+  //       },
+  //     },
+  //     {
+  //       condition: ({ key }) => key === 'publisher',
+  //       element: ({ data }) => {
+  //         return (
+  //           <p
+  //             style={{
+  //               padding: '0.5em 1em',
+  //               border: '2px solid red',
+  //               borderRadius: '1.5em',
+  //               backgroundColor: 'yellow',
+  //               marginTop: '0.5em',
+  //               marginRight: '1em',
+  //               fontFamily: 'sans-serif',
+  //             }}
+  //           >
+  //             Presented by: <strong>{data}</strong>
+  //           </p>
+  //         )
+  //       },
+  //       hideKey: true,
+  //       editable: false,
+  //     },
+  //     {
+  //       condition: ({ key }) => key === 'aliases',
+  //       element: ({ data }) => {
+  //         return (
+  //           <ol style={{ paddingLeft: 50, color: 'orange' }}>
+  //             {data.map((val) => (
+  //               <li>{val}</li>
+  //             ))}
+  //           </ol>
+  //         )
+  //       },
+  //       // hideKey: true,
+  //     },
+  //   ],
+  // },
 }
 
 export default data