#57 Long string fixes (#60)

* Better handling of component height with lots of lines
* Improvements to resizing and edit controls
* Rename Collapse Provider
* Finish rename, improve isEditing logic
* Organise derived values better
* Make key editing part of exclusive edit
* Key edit for ValueNodes

Author: CarlosNZ

src/AutogrowTextArea.tsx

@@ -36,7 +36,7 @@ export const AutogrowTextArea: React.FC<TextAreaProps> = ({
   return (
     <div style={{ display: 'grid' }}>
       <textarea
-        id={name}
+        id={`${name}_textarea`}
         style={{
           height: 'auto',
           gridArea: '1 / 1 / 2 / 2',
@@ -47,7 +47,7 @@ export const AutogrowTextArea: React.FC<TextAreaProps> = ({
         }}
         rows={1}
         className={className}
-        name={name}
+        name={`${name}_textarea`}
         value={value}
         onChange={(e) => setValue(e.target.value)}
         autoFocus

src/CollapseProvider.tsx

@@ -14,7 +14,8 @@ import { filterNode, isCollection } from './filterHelpers'
 import './style.css'
 import { AutogrowTextArea } from './AutogrowTextArea'
 import { useTheme } from './theme'
-import { useCollapseAll } from './CollapseProvider'
+import { useTreeState } from './TreeStateProvider'
+import { toPathString } from './ValueNodes'
 
 export const CollectionNode: React.FC<CollectionNodeProps> = ({
   data,
@@ -24,7 +25,14 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   ...props
 }) => {
   const { getStyles } = useTheme()
-  const { collapseState, setCollapseState, doesPathMatch } = useCollapseAll()
+  const {
+    collapseState,
+    setCollapseState,
+    doesPathMatch,
+    currentlyEditingElement,
+    setCurrentlyEditingElement,
+    areChildrenBeingEdited,
+  } = useTreeState()
   const {
     onEdit,
     onAdd,
@@ -43,8 +51,6 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
     translate,
     customNodeDefinitions,
   } = props
-  const [isEditing, setIsEditing] = useState(false)
-  const [isEditingKey, setIsEditingKey] = useState(false)
   const [stringifiedValue, setStringifiedValue] = useState(JSON.stringify(data, null, 2))
   const [error, setError] = useState<string | null>(null)
 
@@ -54,6 +60,8 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   const nodeData = { ...incomingNodeData, collapsed }
   const { path, key: name, size } = nodeData
 
+  const pathString = toPathString(path)
+
   // This allows us to not render the children on load if they're hidden (which
   // gives a big performance improvement with large data sets), but still keep
   // the animation transition when opening and closing the accordion
@@ -129,7 +137,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
       setCollapseState({ open: !collapsed, path })
       return
     }
-    if (!isEditing) {
+    if (!(currentlyEditingElement && currentlyEditingElement.includes(pathString))) {
       setIsAnimating(true)
       hasBeenOpened.current = true
       setCollapsed(!collapsed)
@@ -146,7 +154,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   const handleEdit = () => {
     try {
       const value = JSON5.parse(stringifiedValue)
-      setIsEditing(false)
+      setCurrentlyEditingElement(null)
       setError(null)
       if (JSON.stringify(value) === JSON.stringify(data)) return
       onEdit(value, path).then((error) => {
@@ -160,7 +168,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   }
 
   const handleEditKey = (newKey: string) => {
-    setIsEditingKey(false)
+    setCurrentlyEditingElement(null)
     if (name === newKey) return
     if (!parentData) return
     const parentPath = path.slice(0, -1)
@@ -204,30 +212,39 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
       : undefined
 
   const handleCancel = () => {
-    setIsEditing(false)
-    setIsEditingKey(false)
+    setCurrentlyEditingElement(null)
     setError(null)
     setStringifiedValue(JSON.stringify(data, null, 2))
   }
 
+  // DERIVED VALUES (this makes the render logic easier to understand)
+  const isEditing = currentlyEditingElement === pathString
+  const isEditingKey = currentlyEditingElement === `key_${pathString}`
   const isArray = typeof path.slice(-1)[0] === 'number'
   const showLabel = showArrayIndices || !isArray
   const showCount = showCollectionCount === 'when-closed' ? collapsed : showCollectionCount
+  const showEditButtons = !isEditing && showEditTools
+  const showKey = showLabel && !hideKey && name !== '' && name !== undefined
+  const showCustomNodeContents =
+    CustomNode && ((isEditing && showOnEdit) || (!isEditing && showOnView))
+  const sortKeys = keySort && collectionType === 'object'
 
   const keyValueArray = Object.entries(data).map(([key, value]) => [
     collectionType === 'array' ? Number(key) : key,
     value,
   ])
 
-  if (keySort && collectionType === 'object') {
+  if (sortKeys) {
     keyValueArray.sort(
       typeof keySort === 'function' ? (a: string[], b) => keySort(a[0], b[0] as string) : undefined
     )
   }
 
   // A crude measure to estimate the approximate height of the block, for
-  // setting the max-height in the collapsible interior
-  const numOfLines = JSON.stringify(data, null, 2).split('\n').length
+  // setting the max-height in the collapsible interior.
+  // The Regexp replacement is to parse escaped line breaks *within* the JSON
+  // into *actual* line breaks before splitting
+  const numOfLines = JSON.stringify(data, null, 2).replace(/\\n/g, '\n').split('\n').length
 
   const CollectionChildren = !hasBeenOpened.current ? null : !isEditing ? (
     keyValueArray.map(([key, value], index) => {
@@ -274,7 +291,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
       <div>
         <AutogrowTextArea
           className="jer-collection-text-area"
-          name={path.join('.')}
+          name={pathString}
           value={stringifiedValue}
           setValue={setStringifiedValue}
           isEditing={isEditing}
@@ -306,24 +323,23 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
     handleCancel,
     handleKeyPress,
     isEditing,
-    setIsEditing,
+    setIsEditing: () => setCurrentlyEditingElement(pathString),
     getStyles,
   }
 
-  const CollectionContents =
-    CustomNode && ((isEditing && showOnEdit) || (!isEditing && showOnView)) ? (
-      <CustomNode customNodeProps={customNodeProps} {...customNodeAllProps}>
-        {CollectionChildren}
-      </CustomNode>
-    ) : (
-      CollectionChildren
-    )
+  const CollectionContents = showCustomNodeContents ? (
+    <CustomNode customNodeProps={customNodeProps} {...customNodeAllProps}>
+      {CollectionChildren}
+    </CustomNode>
+  ) : (
+    CollectionChildren
+  )
 
   const KeyDisplay = isEditingKey ? (
     <input
       className="jer-collection-name"
       type="text"
-      name={path.join('.')}
+      name={pathString}
       defaultValue={name}
       autoFocus
       onFocus={(e) => e.target.select()}
@@ -333,19 +349,19 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
   ) : (
     <span
       style={getStyles('property', nodeData)}
-      onDoubleClick={() => canEditKey && setIsEditingKey(true)}
+      onDoubleClick={() => canEditKey && setCurrentlyEditingElement(`key_${pathString}`)}
     >
-      {showLabel && !hideKey && name !== '' && name !== undefined ? `${name}:` : null}
+      {showKey ? `${name}:` : null}
     </span>
   )
 
-  const EditButtonDisplay = !isEditing && showEditTools && (
+  const EditButtonDisplay = showEditButtons && (
     <EditButtons
       startEdit={
         canEdit
           ? () => {
               hasBeenOpened.current = true
-              setIsEditing(true)
+              setCurrentlyEditingElement(pathString)
               setCollapsed(false)
             }
           : undefined
@@ -412,7 +428,15 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
       <div
         className={'jer-collection-inner'}
         style={{
-          maxHeight: isCollapsed ? 0 : !isEditing ? `${numOfLines * 3}em` : undefined,
+          // Don't limit the height when collection or any of its children are
+          // being edited, so it won't overlap lower elements if the editing
+          // input gets too large. This won't cause problems, as it can't be
+          // collapsed while being edited anyway.
+          maxHeight: isCollapsed
+            ? 0
+            : !areChildrenBeingEdited(pathString)
+            ? `${numOfLines * 3}em`
+            : undefined,
           overflowY: isCollapsed || isAnimating ? 'hidden' : 'visible',
           // Need to use max-height for animation to work, unfortunately
           // "height: auto" doesn't 😔
@@ -437,11 +461,11 @@ export const CollectionNode: React.FC<CollectionNodeProps> = ({
     </div>
   )
 
-  if (CustomWrapper) {
-    return (
-      <CustomWrapper customNodeProps={wrapperProps} {...customNodeAllProps}>
-        {CollectionNodeComponent}
-      </CustomWrapper>
-    )
-  } else return CollectionNodeComponent
+  return CustomWrapper ? (
+    <CustomWrapper customNodeProps={wrapperProps} {...customNodeAllProps}>
+      {CollectionNodeComponent}
+    </CustomWrapper>
+  ) : (
+    CollectionNodeComponent
+  )
 }

src/CollectionNode.tsx

@@ -12,7 +12,7 @@ import {
   type SearchFilterFunction,
 } from './types'
 import { useTheme, ThemeProvider } from './theme'
-import { CollapseProvider, useCollapseAll } from './CollapseProvider'
+import { TreeStateProvider, useTreeState } from './TreeStateProvider'
 import { getTranslateFunction } from './localisation'
 import './style.css'
 import { ValueNodeWrapper } from './ValueNodeWrapper'
@@ -54,7 +54,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   customNodeDefinitions = [],
 }) => {
   const { getStyles, setTheme, setIcons } = useTheme()
-  const { setCollapseState } = useCollapseAll()
+  const { setCollapseState } = useTreeState()
   const collapseFilter = useCallback(getFilterFunction(collapse), [collapse])
   const translate = useCallback(getTranslateFunction(translations, customText), [
     translations,
@@ -212,9 +212,9 @@ const Editor: React.FC<JsonEditorProps> = ({
 
 const JsonEditor: React.FC<JsonEditorProps> = (props) => (
   <ThemeProvider>
-    <CollapseProvider>
+    <TreeStateProvider>
       <Editor {...props} />
-    </CollapseProvider>
+    </TreeStateProvider>
   </ThemeProvider>
 )
 

src/JsonEditor.tsx

@@ -0,0 +1,67 @@
+/**
+ * Captures the collapse state and the editing state of the entire tree, as
+ * nodes sometimes need to know the state of other (sibling or child) nodes
+ */
+
+import React, { createContext, useContext, useState } from 'react'
+import { type CollectionKey } from './types'
+
+interface CollapseAllState {
+  path: CollectionKey[]
+  open: boolean
+}
+interface TreeStateContext {
+  collapseState: CollapseAllState | null
+  setCollapseState: React.Dispatch<React.SetStateAction<CollapseAllState | null>>
+  doesPathMatch: (path: CollectionKey[]) => boolean
+  currentlyEditingElement: string | null
+  setCurrentlyEditingElement: React.Dispatch<React.SetStateAction<string | null>>
+  areChildrenBeingEdited: (pathString: string) => boolean
+}
+const initialContext: TreeStateContext = {
+  collapseState: null,
+  setCollapseState: () => {},
+  doesPathMatch: () => false,
+  currentlyEditingElement: null,
+  setCurrentlyEditingElement: () => {},
+  areChildrenBeingEdited: () => false,
+}
+
+const TreeStateProviderContext = createContext(initialContext)
+
+export const TreeStateProvider = ({ children }: { children: React.ReactNode }) => {
+  const [collapseState, setCollapseState] = useState<CollapseAllState | null>(null)
+  const [currentlyEditingElement, setCurrentlyEditingElement] = useState<string | null>(null)
+
+  const doesPathMatch = (path: CollectionKey[]) => {
+    if (collapseState === null) return false
+
+    for (const [index, value] of collapseState.path.entries()) {
+      if (value !== path[index]) return false
+    }
+
+    return true
+  }
+
+  const areChildrenBeingEdited = (pathString: string) =>
+    currentlyEditingElement !== null && currentlyEditingElement.includes(pathString)
+
+  return (
+    <TreeStateProviderContext.Provider
+      value={{
+        // Collapse
+        collapseState,
+        setCollapseState,
+        doesPathMatch,
+        // Editing
+        currentlyEditingElement,
+        setCurrentlyEditingElement,
+        areChildrenBeingEdited,
+      }}
+    >
+      {children}
+    </TreeStateProviderContext.Provider>
+  )
+}
+
+export const useTreeState = () => useContext(TreeStateProviderContext)