Update custom components

Author: CarlosNZ

custom-component-library/README.md

@@ -27,6 +27,7 @@ These are the ones currently available:
 - [x] `NaN`
 - [x] `BigInt`
 - [x] Markdown
+- [ ] Image (to-do)
 
 ## Development
 
@@ -50,6 +51,12 @@ Custom components should consider the following:
 
 - Must respect editing restrictions
 - If including CSS classes, please prefix with `jer-`
-- Handle keyboard input if possible (and double-click to edit)
+- Handle keyboard input as much as possible:
+  - Double-click to edit (if allowed)
+  - `Tab`/`Shift-Tab` to navigate
+  - `Enter` to submit
+  - `Escape` to cancel
 - Provide customisation options, particularly styles
 
+If your custom component is "string-like", there are two helper components exported with the package: `StringDisplay` and `StringEdit` -- these are the same components used for the actual "string" elements in the main package. See the [Hyperlink](https://github.com/CarlosNZ/json-edit-react/blob/main/custom-component-library/components/Hyperlink/component.tsx) and [BigInt](https://github.com/CarlosNZ/json-edit-react/blob/main/custom-component-library/components/BigInt/component.tsx) components for examples of how to use them.
+

custom-component-library/components/BigInt/component.tsx

@@ -10,6 +10,7 @@ export const BigIntComponent: React.FC<CustomNodeProps<BigIntProps>> = (props) =
   const {
     setValue,
     isEditing,
+    setIsEditing,
     getStyles,
     nodeData,
     customNodeProps = {},
@@ -34,6 +35,8 @@ export const BigIntComponent: React.FC<CustomNodeProps<BigIntProps>> = (props) =
       }}
     />
   ) : (
-    <span style={style}>{value as bigint}</span>
+    <span onDoubleClick={() => setIsEditing(true)} style={style}>
+      {value as bigint}
+    </span>
   )
 }

custom-component-library/components/Markdown/component.tsx

@@ -23,9 +23,10 @@ export const MarkdownComponent: React.FC<CustomNodeProps<LinkProps>> = (props) =
       onClick={(e) => {
         if (e.getModifierState('Control') || e.getModifierState('Meta')) setIsEditing(true)
       }}
+      onDoubleClick={() => setIsEditing(true)}
       style={styles}
     >
-      {/* TO-DO: Style over-rides, keyboard and double-click behaviour */}
+      {/* TO-DO: Style over-rides */}
       <Markdown>{nodeData.value as string}</Markdown>
     </div>
   )

custom-component-library/components/NaN/component.tsx

@@ -1,10 +1,32 @@
 import React from 'react'
-import { type CustomNodeProps } from '@json-edit-react'
+import { useKeyboardListener, type CustomNodeProps } from '@json-edit-react'
 
 export interface NaNProps {
   style?: React.CSSProperties
 }
 
 export const NotANumberComponent: React.FC<CustomNodeProps<NaNProps>> = ({
+  isEditing,
+  setIsEditing,
+  handleKeyboard,
+  handleEdit,
+  keyboardCommon,
   customNodeProps = {},
-}) => <div style={{ color: 'rgb(220, 50, 47)', ...customNodeProps?.style }}>NaN</div>
+}) => {
+  const listenForSubmit = (e: unknown) =>
+    handleKeyboard(e as React.KeyboardEvent, {
+      confirm: handleEdit,
+      ...keyboardCommon,
+    })
+
+  useKeyboardListener(isEditing, listenForSubmit)
+
+  return (
+    <div
+      style={{ color: 'rgb(220, 50, 47)', ...customNodeProps?.style }}
+      onDoubleClick={() => setIsEditing(true)}
+    >
+      NaN
+    </div>
+  )
+}

custom-component-library/components/Symbol/component.tsx

@@ -10,6 +10,7 @@ export const SymbolComponent: React.FC<CustomNodeProps<SymbolProps>> = (props) =
   const {
     setValue,
     isEditing,
+    setIsEditing,
     getStyles,
     nodeData,
     customNodeProps = {},
@@ -35,7 +36,7 @@ export const SymbolComponent: React.FC<CustomNodeProps<SymbolProps>> = (props) =
       }}
     />
   ) : (
-    <span style={style}>
+    <span style={style} onDoubleClick={() => setIsEditing(true)}>
       Symbol(<span style={descriptionStyle}>"{(nodeData.value as symbol).description}"</span>)
     </span>
   )

custom-component-library/components/Undefined/component.tsx

@@ -1,12 +1,33 @@
 import React from 'react'
-import { type CustomNodeProps } from '@json-edit-react'
+import { useKeyboardListener, type CustomNodeProps } from '@json-edit-react'
 
 export interface UndefinedProps {
   style?: React.CSSProperties
 }
 
 export const UndefinedCustomComponent: React.FC<CustomNodeProps<UndefinedProps>> = ({
+  isEditing,
+  setIsEditing,
+  handleKeyboard,
+  handleEdit,
+  keyboardCommon,
   customNodeProps = {},
-}) => (
-  <div style={{ fontStyle: 'italic', color: '#9b9b9b', ...customNodeProps?.style }}>undefined</div>
-)
+}) => {
+  const listenForSubmit = (e: unknown) =>
+    handleKeyboard(e as React.KeyboardEvent, {
+      confirm: handleEdit,
+      ...keyboardCommon,
+    })
+
+  useKeyboardListener(isEditing, listenForSubmit)
+
+  return (
+    <div
+      onDoubleClick={() => setIsEditing(true)}
+      className="jer-value-undefined"
+      style={{ fontStyle: 'italic', color: '#9b9b9b', ...customNodeProps?.style }}
+    >
+      undefined
+    </div>
+  )
+}

custom-component-library/src/App.tsx

@@ -1,5 +1,5 @@
 // Set to true to store date as Date object, false to store as ISO string
-const STORE_DATE_AS_DATE_OBJECT = false
+const STORE_DATE_AS_DATE_OBJECT = true
 
 import { useState } from 'react'
 import {
@@ -29,6 +29,7 @@ function App() {
   return (
     <div id="container">
       <JsonEditor
+        // restrictEdit={true}
         data={data}
         setData={setData}
         customNodeDefinitions={[

src/ValueNodes.tsx

@@ -286,41 +286,48 @@ export const BooleanValue: React.FC<InputProps & { value: boolean }> = ({
   )
 }
 
-export const NullValue: React.FC<InputProps> = ({
-  value,
-  isEditing,
-  setIsEditing,
-  handleEdit,
-  nodeData,
-  handleKeyboard,
-  keyboardCommon,
-}) => {
-  const { getStyles } = useTheme()
+// A custom hook to add a keyboard listener to a component that does't have
+// standard DOM keyboard behaviour (like inputs). Only used for the `null`
+// component here, but is exported for re-use with Custom Components if required
+export const useKeyboardListener = (isEditing: boolean, listener: (e: unknown) => void) => {
   const timer = useRef<number | undefined>(undefined)
 
   useEffect(() => {
     if (!isEditing) {
-      // The listener messes with other elements when switching rapidly (e.g. when "getNext" called repeatedly on inaccessible elements), so we cancel the listener load before it even happens if this node gets switched from isEditing to not in less than 100ms
+      // The listener messes with other elements when switching rapidly (e.g.
+      // when "getNext" is called repeatedly on inaccessible elements), so we
+      // cancel the listener load before it even happens if this node gets
+      // switched from isEditing to not in less than 100ms
       window.clearTimeout(timer.current)
       return
     }
     // Small delay to prevent registering keyboard input from previous element
     // if switched using "Tab"
-    timer.current = window.setTimeout(
-      () => window.addEventListener('keydown', listenForSubmit),
-      100
-    )
+    timer.current = window.setTimeout(() => window.addEventListener('keydown', listener), 100)
+
+    return () => window.removeEventListener('keydown', listener)
+  }, [isEditing, listener])
+}
 
-    return () => window.removeEventListener('keydown', listenForSubmit)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditing])
+export const NullValue: React.FC<InputProps> = ({
+  value,
+  isEditing,
+  setIsEditing,
+  handleEdit,
+  nodeData,
+  handleKeyboard,
+  keyboardCommon,
+}) => {
+  const { getStyles } = useTheme()
 
   const listenForSubmit = (e: unknown) =>
     handleKeyboard(e as React.KeyboardEvent, {
       confirm: handleEdit,
       ...keyboardCommon,
     })
 
+  useKeyboardListener(isEditing, listenForSubmit)
+
   return (
     <div
       onDoubleClick={() => setIsEditing(true)}

src/index.ts

@@ -1,7 +1,7 @@
 export { JsonEditor } from './JsonEditor'
 export { defaultTheme } from './contexts/ThemeProvider'
 export { IconAdd, IconEdit, IconDelete, IconCopy, IconOk, IconCancel, IconChevron } from './Icons'
-export { StringDisplay, StringEdit } from './ValueNodes'
+export { StringDisplay, StringEdit, useKeyboardListener } from './ValueNodes'
 export { LinkCustomComponent, LinkCustomNodeDefinition } from './customComponents'
 export { matchNode, matchNodeKey, isCollection, toPathString } from './helpers'
 export { default as assign } from 'object-property-assigner'

src/types.ts

@@ -287,7 +287,7 @@ interface BaseNodeProps {
 }
 
 export interface CollectionNodeProps extends BaseNodeProps {
-  mainContainerRef: React.MutableRefObject<Element>
+  mainContainerRef: React.RefObject<Element>
   data: CollectionData
   collapseFilter: FilterFunction
   collapseAnimationTime: number