@softwarity/geojson-editor 1.0.18 → 1.0.19

package/src/geojson-editor.ts

@@ -66,6 +66,7 @@ class GeoJsonEditor extends HTMLElement {
   private _nodeIdCounter: number = 0;
   private _lineToNodeId: Map<number, string> = new Map();
   private _nodeIdToLines: Map<string, NodeRangeInfo> = new Map();
+  private _openedNodeKeys: Set<string> = new Set(); // UniqueKeys (nodeKey:occurrence) that user opened
 
   // ========== Derived State (computed from model) ==========
   visibleLines: VisibleLine[] = [];
@@ -114,6 +115,7 @@ class GeoJsonEditor extends HTMLElement {
   private _contextMapLinesLength: number = 0;
   private _contextMapFirstLine: string | undefined = undefined;
   private _contextMapLastLine: string | undefined = undefined;
+  private _errorLinesCache: Set<number> | null = null;
 
   // ========== Cached DOM Elements ==========
   private _viewport: HTMLElement | null = null;
@@ -129,6 +131,10 @@ class GeoJsonEditor extends HTMLElement {
   private _placeholderLayer: HTMLElement | null = null;
   private _editorPrefix: HTMLElement | null = null;
   private _editorSuffix: HTMLElement | null = null;
+  private _errorNav: HTMLElement | null = null;
+  private _errorCount: HTMLElement | null = null;
+  private _prevErrorBtn: HTMLButtonElement | null = null;
+  private _nextErrorBtn: HTMLButtonElement | null = null;
 
   constructor() {
     super();
@@ -367,38 +373,31 @@ class GeoJsonEditor extends HTMLElement {
    * Preserves collapsed state by matching nodeKey + sequential occurrence
    */
   private _rebuildNodeIdMappings() {
-    // Save old state to try to preserve collapsed nodes
-    const oldCollapsed = new Set(this.collapsedNodes);
-    const oldNodeKeyMap = new Map(); // nodeId -> nodeKey
-    for (const [nodeId, info] of this._nodeIdToLines) {
-      if (info.nodeKey) oldNodeKeyMap.set(nodeId, info.nodeKey);
-    }
-    
-    // Build list of collapsed nodeKeys for matching
-    const collapsedNodeKeys = [];
-    for (const nodeId of oldCollapsed) {
-      const nodeKey = oldNodeKeyMap.get(nodeId);
-      if (nodeKey) collapsedNodeKeys.push(nodeKey);
+    // Save collapsed uniqueKeys from old state
+    const collapsedUniqueKeys = new Set<string>();
+    for (const nodeId of this.collapsedNodes) {
+      const info = this._nodeIdToLines.get(nodeId);
+      if (info?.uniqueKey) collapsedUniqueKeys.add(info.uniqueKey);
     }
-    
+
     // Reset mappings
     this._nodeIdCounter = 0;
     this._lineToNodeId.clear();
     this._nodeIdToLines.clear();
     this.collapsedNodes.clear();
-    
-    // Track occurrences of each nodeKey for matching
-    const nodeKeyOccurrences = new Map();
-    
+
+    // Track occurrences of each nodeKey
+    const nodeKeyOccurrences = new Map<string, number>();
+
     // Assign fresh IDs to all collapsible nodes
     for (let i = 0; i < this.lines.length; i++) {
       const line = this.lines[i];
-      
+
       // Match "key": { or "key": [
       const kvMatch = line.match(RE_KV_MATCH);
       // Also match standalone { or {, (root Feature objects)
       const rootMatch = !kvMatch && line.match(RE_ROOT_MATCH);
-      
+
       if (!kvMatch && !rootMatch) continue;
 
       let nodeKey: string;
@@ -414,30 +413,26 @@ class GeoJsonEditor extends HTMLElement {
       } else {
         continue;
       }
-      
+
       // Check if closes on same line
       const rest = line.substring(line.indexOf(openBracket) + 1);
       const counts = countBrackets(rest, openBracket);
       if (counts.close > counts.open) continue;
-      
+
       const endLine = this._findClosingLine(i, openBracket);
       if (endLine === -1 || endLine === i) continue;
-      
-      // Generate unique ID for this node
+
+      // Generate unique ID and unique key for this node
       const nodeId = this._generateNodeId();
-      
-      this._lineToNodeId.set(i, nodeId);
-      this._nodeIdToLines.set(nodeId, { startLine: i, endLine, nodeKey, isRootFeature: !!rootMatch });
-      
-      // Track occurrence of this nodeKey
       const occurrence = nodeKeyOccurrences.get(nodeKey) || 0;
       nodeKeyOccurrences.set(nodeKey, occurrence + 1);
-      
-      // Check if this nodeKey was previously collapsed
-      const keyIndex = collapsedNodeKeys.indexOf(nodeKey);
-      if (keyIndex !== -1) {
-        // Remove from list so we don't match it again
-        collapsedNodeKeys.splice(keyIndex, 1);
+      const uniqueKey = `${nodeKey}:${occurrence}`;
+
+      this._lineToNodeId.set(i, nodeId);
+      this._nodeIdToLines.set(nodeId, { startLine: i, endLine, nodeKey, uniqueKey, isRootFeature: !!rootMatch });
+
+      // Restore collapsed state if was collapsed and not explicitly opened
+      if (collapsedUniqueKeys.has(uniqueKey) && !this._openedNodeKeys.has(uniqueKey)) {
         this.collapsedNodes.add(nodeId);
       }
     }
@@ -533,6 +528,10 @@ class GeoJsonEditor extends HTMLElement {
     this._placeholderLayer = this._id('placeholderLayer');
     this._editorPrefix = this._id('editorPrefix');
     this._editorSuffix = this._id('editorSuffix');
+    this._errorNav = this._id('errorNav');
+    this._errorCount = this._id('errorCount');
+    this._prevErrorBtn = this._id('prevErrorBtn') as HTMLButtonElement;
+    this._nextErrorBtn = this._id('nextErrorBtn') as HTMLButtonElement;
   }
 
   // ========== Event Listeners ==========
@@ -728,6 +727,14 @@ class GeoJsonEditor extends HTMLElement {
       this.removeAll();
     });
 
+    // Error navigation buttons
+    this._prevErrorBtn?.addEventListener('click', () => {
+      this.goToPrevError();
+    });
+    this._nextErrorBtn?.addEventListener('click', () => {
+      this.goToNextError();
+    });
+
     // Initial readonly state
     this.updateReadonly();
   }
@@ -763,6 +770,7 @@ class GeoJsonEditor extends HTMLElement {
     // Clear state for new content
     this.collapsedNodes.clear();
     this.hiddenFeatures.clear();
+    this._openedNodeKeys.clear();
     this._lineToNodeId.clear();
     this._nodeIdToLines.clear();
     this.cursorLine = 0;
@@ -794,8 +802,9 @@ class GeoJsonEditor extends HTMLElement {
    * Rebuilds line-to-nodeId mapping while preserving collapsed state
    */
   updateModel() {
-    // Invalidate context map cache since content changed
+    // Invalidate caches since content changed
     this._contextMapCache = null;
+    this._errorLinesCache = null;
 
     // Rebuild lineToNodeId mapping (may shift due to edits)
     this._rebuildNodeIdMappings();
@@ -891,9 +900,12 @@ class GeoJsonEditor extends HTMLElement {
    */
   computeLineMetadata() {
     this.lineMetadata.clear();
-    
+
     const collapsibleRanges = this._findCollapsibleRanges();
-    
+
+    // Compute error lines once (cached)
+    const errorLines = this._computeErrorLines();
+
     for (let i = 0; i < this.lines.length; i++) {
       const line = this.lines[i];
       const meta: LineMeta = {
@@ -903,9 +915,10 @@ class GeoJsonEditor extends HTMLElement {
         visibilityButton: null,
         isHidden: false,
         isCollapsed: false,
-        featureKey: null
+        featureKey: null,
+        hasError: errorLines.has(i)
       };
-      
+
       // Detect colors and booleans in a single pass
       RE_ATTR_VALUE.lastIndex = 0;
       let match: RegExpExecArray | null;
@@ -925,7 +938,7 @@ class GeoJsonEditor extends HTMLElement {
           }
         }
       }
-      
+
       // Check if line starts a collapsible node
       const collapsible = collapsibleRanges.find(r => r.startLine === i);
       if (collapsible) {
@@ -935,15 +948,15 @@ class GeoJsonEditor extends HTMLElement {
           isCollapsed: this.collapsedNodes.has(collapsible.nodeId)
         };
       }
-      
+
       // Check if line is inside a collapsed node (exclude closing bracket line)
-      const insideCollapsed = collapsibleRanges.find(r => 
+      const insideCollapsed = collapsibleRanges.find(r =>
         this.collapsedNodes.has(r.nodeId) && i > r.startLine && i < r.endLine
       );
       if (insideCollapsed) {
         meta.isCollapsed = true;
       }
-      
+
       // Check if line belongs to a hidden feature
       for (const [featureKey, range] of this.featureRanges) {
         if (i >= range.startLine && i <= range.endLine) {
@@ -961,11 +974,152 @@ class GeoJsonEditor extends HTMLElement {
           break;
         }
       }
-      
+
       this.lineMetadata.set(i, meta);
     }
   }
 
+  /**
+   * Compute error lines (syntax highlighting + structural errors)
+   * Called once per model update, result is used by computeLineMetadata
+   */
+  private _computeErrorLines(): Set<number> {
+    if (this._errorLinesCache !== null) {
+      return this._errorLinesCache;
+    }
+
+    const errorLines = new Set<number>();
+
+    // Check syntax highlighting errors for each line
+    for (let i = 0; i < this.lines.length; i++) {
+      const highlighted = highlightSyntax(this.lines[i], '', undefined);
+      if (highlighted.includes('json-error')) {
+        errorLines.add(i);
+      }
+    }
+
+    // Check structural error from JSON.parse
+    try {
+      const content = this.lines.join('\n');
+      const wrapped = '[' + content + ']';
+      JSON.parse(wrapped);
+    } catch (e) {
+      if (e instanceof Error) {
+        // Try to extract line number from error message
+        // Chrome/Node: "... at line X column Y"
+        const lineMatch = e.message.match(/line (\d+)/);
+        if (lineMatch) {
+          // Subtract 1 because we wrapped with '[' on first line
+          const errorLine = Math.max(0, parseInt(lineMatch[1], 10) - 1);
+          errorLines.add(errorLine);
+        }
+      }
+    }
+
+    this._errorLinesCache = errorLines;
+    return errorLines;
+  }
+
+  /**
+   * Get all lines that have errors (for navigation and counting)
+   * Returns array of line indices sorted by line number
+   */
+  private _getErrorLines(): number[] {
+    const errorLines: number[] = [];
+    for (const [lineIndex, meta] of this.lineMetadata) {
+      if (meta.hasError) {
+        errorLines.push(lineIndex);
+      }
+    }
+    return errorLines.sort((a, b) => a - b);
+  }
+
+  /**
+   * Navigate to the next error line
+   */
+  goToNextError(): boolean {
+    const errorLines = this._getErrorLines();
+    if (errorLines.length === 0) return false;
+
+    // Find next error after current cursor position
+    const nextError = errorLines.find(line => line > this.cursorLine);
+    const targetLine = nextError !== undefined ? nextError : errorLines[0]; // Wrap to first
+
+    return this._goToErrorLine(targetLine);
+  }
+
+  /**
+   * Navigate to the previous error line
+   */
+  goToPrevError(): boolean {
+    const errorLines = this._getErrorLines();
+    if (errorLines.length === 0) return false;
+
+    // Find previous error before current cursor position
+    const prevErrors = errorLines.filter(line => line < this.cursorLine);
+    const targetLine = prevErrors.length > 0 ? prevErrors[prevErrors.length - 1] : errorLines[errorLines.length - 1]; // Wrap to last
+
+    return this._goToErrorLine(targetLine);
+  }
+
+  /**
+   * Expand all collapsed nodes containing a specific line
+   * Returns true if any nodes were expanded
+   */
+  private _expandNodesContainingLine(lineIndex: number): boolean {
+    let expanded = false;
+    for (const [nodeId, nodeInfo] of this._nodeIdToLines) {
+      if (this.collapsedNodes.has(nodeId) && lineIndex > nodeInfo.startLine && lineIndex <= nodeInfo.endLine) {
+        this.collapsedNodes.delete(nodeId);
+        // Track that this node was opened - don't re-collapse during edits
+        if (nodeInfo.uniqueKey) {
+          this._openedNodeKeys.add(nodeInfo.uniqueKey);
+        }
+        expanded = true;
+      }
+    }
+    return expanded;
+  }
+
+  /**
+   * Navigate to a specific error line
+   */
+  private _goToErrorLine(lineIndex: number): boolean {
+    if (this._expandNodesContainingLine(lineIndex)) {
+      this.updateView();
+    }
+
+    this.cursorLine = lineIndex;
+    this.cursorColumn = 0;
+    this._invalidateRenderCache();
+    this._scrollToCursor(true); // Center the error line
+    this.renderViewport();
+    this._updateErrorDisplay();
+
+    // Focus the editor
+    this._hiddenTextarea?.focus();
+    return true;
+  }
+
+  /**
+   * Expand all collapsed nodes that contain error lines
+   */
+  private _expandErrorNodes(): void {
+    const errorLines = this._getErrorLines();
+    if (errorLines.length === 0) return;
+
+    let expanded = false;
+    for (const errorLine of errorLines) {
+      if (this._expandNodesContainingLine(errorLine)) {
+        expanded = true;
+      }
+    }
+
+    if (expanded) {
+      this.updateView();
+    }
+  }
+
   /**
    * Compute which lines are visible (not inside collapsed nodes)
    */
@@ -1012,10 +1166,15 @@ class GeoJsonEditor extends HTMLElement {
     
     const totalLines = this.visibleLines.length;
     const totalHeight = totalLines * this.lineHeight;
-    
-    // Set total scrollable height (only once or when content changes)
+
+    // Set total scrollable dimensions (height and width based on content)
     if (scrollContent) {
       scrollContent.style.height = `${totalHeight}px`;
+      // Calculate max line width to update horizontal scroll
+      const charWidth = this._getCharWidth();
+      const maxLineLength = this.lines.reduce((max, line) => Math.max(max, line.length), 0);
+      const minWidth = maxLineLength * charWidth + 20; // 20px padding
+      scrollContent.style.minWidth = `${minWidth}px`;
     }
     
     // Calculate visible range based on scroll position
@@ -1206,18 +1365,23 @@ class GeoJsonEditor extends HTMLElement {
     for (let i = startIndex; i < endIndex; i++) {
       const lineData = this.visibleLines[i];
       if (!lineData) continue;
-      
+
       const gutterLine = _ce('div');
       gutterLine.className = 'gutter-line';
-      
+
       const meta = lineData.meta;
-      
+
+      // Add error indicator class
+      if (meta?.hasError) {
+        gutterLine.classList.add('has-error');
+      }
+
       // Line number first
       const lineNum = _ce('span');
       lineNum.className = 'line-number';
       lineNum.textContent = String(lineData.index + 1);
       gutterLine.appendChild(lineNum);
-      
+
       // Collapse column (always present for alignment)
       const collapseCol = _ce('div');
       collapseCol.className = 'collapse-column';
@@ -1231,7 +1395,7 @@ class GeoJsonEditor extends HTMLElement {
         collapseCol.appendChild(btn);
       }
       gutterLine.appendChild(collapseCol);
-      
+
       fragment.appendChild(gutterLine);
     }
     
@@ -1355,6 +1519,8 @@ class GeoJsonEditor extends HTMLElement {
       'ArrowRight': () => this._handleArrowKey(0, 1, e.shiftKey, e.ctrlKey || e.metaKey),
       'Home': () => this._handleHomeEnd('home', e.shiftKey, ctx.onClosingLine),
       'End': () => this._handleHomeEnd('end', e.shiftKey, ctx.onClosingLine),
+      'PageUp': () => this._handlePageUpDown('up', e.shiftKey),
+      'PageDown': () => this._handlePageUpDown('down', e.shiftKey),
       'Tab': () => this._handleTab(e.shiftKey, ctx),
       'Insert': () => { this._insertMode = !this._insertMode; this.scheduleRender(); }
     };
@@ -1418,8 +1584,7 @@ class GeoJsonEditor extends HTMLElement {
     // Block in collapsed zones
     if (ctx.inCollapsedZone) return;
 
-    // Normal Enter: insert newline
-    this.insertNewline();
+    // Enter anywhere else: do nothing (JSON structure is managed automatically)
   }
 
   private _handleBackspace(ctx: CollapsedZoneContext): void {
@@ -1502,6 +1667,7 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Navigate to the next attribute (key or value) in the JSON
+   * Also stops on collapsed node brackets to allow expansion with Enter
    */
   private _navigateToNextAttribute(): void {
     const totalLines = this.visibleLines.length;
@@ -1514,13 +1680,17 @@ class GeoJsonEditor extends HTMLElement {
       const line = this.lines[vl.index];
       const startCol = (i === currentVisibleIdx) ? this.cursorColumn : 0;
 
-      const pos = this._findNextAttributeInLine(line, startCol);
+      const pos = this._findNextAttributeOrBracket(line, startCol, vl.index);
       if (pos !== null) {
         this.cursorLine = vl.index;
         this.cursorColumn = pos.start;
-        // Select the attribute key or value
-        this.selectionStart = { line: vl.index, column: pos.start };
-        this.selectionEnd = { line: vl.index, column: pos.end };
+        // Select the attribute key or value (not brackets)
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
         this._scrollToCursor();
         this._invalidateRenderCache();
         this.scheduleRender();
@@ -1532,12 +1702,16 @@ class GeoJsonEditor extends HTMLElement {
     for (let i = 0; i < currentVisibleIdx; i++) {
       const vl = this.visibleLines[i];
       const line = this.lines[vl.index];
-      const pos = this._findNextAttributeInLine(line, 0);
+      const pos = this._findNextAttributeOrBracket(line, 0, vl.index);
       if (pos !== null) {
         this.cursorLine = vl.index;
         this.cursorColumn = pos.start;
-        this.selectionStart = { line: vl.index, column: pos.start };
-        this.selectionEnd = { line: vl.index, column: pos.end };
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
         this._scrollToCursor();
         this._invalidateRenderCache();
         this.scheduleRender();
@@ -1548,6 +1722,7 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Navigate to the previous attribute (key or value) in the JSON
+   * Also stops on collapsed node brackets to allow expansion with Enter
    */
   private _navigateToPrevAttribute(): void {
     const totalLines = this.visibleLines.length;
@@ -1560,12 +1735,16 @@ class GeoJsonEditor extends HTMLElement {
       const line = this.lines[vl.index];
       const endCol = (i === currentVisibleIdx) ? this.cursorColumn : line.length;
 
-      const pos = this._findPrevAttributeInLine(line, endCol);
+      const pos = this._findPrevAttributeOrBracket(line, endCol, vl.index);
       if (pos !== null) {
         this.cursorLine = vl.index;
         this.cursorColumn = pos.start;
-        this.selectionStart = { line: vl.index, column: pos.start };
-        this.selectionEnd = { line: vl.index, column: pos.end };
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
         this._scrollToCursor();
         this._invalidateRenderCache();
         this.scheduleRender();
@@ -1577,12 +1756,16 @@ class GeoJsonEditor extends HTMLElement {
     for (let i = totalLines - 1; i > currentVisibleIdx; i--) {
       const vl = this.visibleLines[i];
       const line = this.lines[vl.index];
-      const pos = this._findPrevAttributeInLine(line, line.length);
+      const pos = this._findPrevAttributeOrBracket(line, line.length, vl.index);
       if (pos !== null) {
         this.cursorLine = vl.index;
         this.cursorColumn = pos.start;
-        this.selectionStart = { line: vl.index, column: pos.start };
-        this.selectionEnd = { line: vl.index, column: pos.end };
+        if (!pos.isBracket) {
+          this.selectionStart = { line: vl.index, column: pos.start };
+          this.selectionEnd = { line: vl.index, column: pos.end };
+        } else {
+          this._clearSelection();
+        }
         this._scrollToCursor();
         this._invalidateRenderCache();
         this.scheduleRender();
@@ -1594,71 +1777,88 @@ class GeoJsonEditor extends HTMLElement {
   /**
    * Find next attribute position in a line after startCol
    * Returns {start, end} for the key or value, or null if none found
+   * Also finds standalone values (numbers in arrays, etc.)
    */
   private _findNextAttributeInLine(line: string, startCol: number): { start: number; end: number } | null {
-    // Pattern: "key": value where value can be "string", number, true, false, null
-    const re = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
+    // Collect all navigable positions
+    const positions: { start: number; end: number }[] = [];
+
+    // Pattern for "key": value pairs
+    const keyValueRe = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
     let match;
 
-    while ((match = re.exec(line)) !== null) {
+    while ((match = keyValueRe.exec(line)) !== null) {
       const keyStart = match.index + 1; // Skip opening quote
       const keyEnd = keyStart + match[1].length;
-
-      // If key is after startCol, return key position
-      if (keyStart > startCol) {
-        return { start: keyStart, end: keyEnd };
-      }
+      positions.push({ start: keyStart, end: keyEnd });
 
       // Check if there's a value (string, number, boolean, null)
       if (match[2] !== undefined) {
-        // String value - find its position
+        // String value
         const valueMatch = line.substring(match.index).match(/:\s*"([^"]*)"/);
         if (valueMatch) {
           const valueStart = match.index + (valueMatch.index || 0) + valueMatch[0].indexOf('"') + 1;
           const valueEnd = valueStart + match[2].length;
-          if (valueStart > startCol) {
-            return { start: valueStart, end: valueEnd };
-          }
+          positions.push({ start: valueStart, end: valueEnd });
         }
       } else if (match[3] !== undefined) {
-        // Number value
+        // Number value after colon
         const numMatch = line.substring(match.index).match(/:\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/i);
         if (numMatch) {
           const valueStart = match.index + (numMatch.index || 0) + numMatch[0].indexOf(numMatch[1]);
           const valueEnd = valueStart + numMatch[1].length;
-          if (valueStart > startCol) {
-            return { start: valueStart, end: valueEnd };
-          }
+          positions.push({ start: valueStart, end: valueEnd });
         }
       } else {
-        // Boolean or null - check after the colon
+        // Boolean or null
         const boolMatch = line.substring(match.index).match(/:\s*(true|false|null)/);
         if (boolMatch) {
           const valueStart = match.index + (boolMatch.index || 0) + boolMatch[0].indexOf(boolMatch[1]);
           const valueEnd = valueStart + boolMatch[1].length;
-          if (valueStart > startCol) {
-            return { start: valueStart, end: valueEnd };
-          }
+          positions.push({ start: valueStart, end: valueEnd });
         }
       }
     }
 
+    // Also find standalone numbers (not after a colon) - for array elements
+    const standaloneNumRe = /(?:^|[\[,\s])(-?\d+\.?\d*(?:e[+-]?\d+)?)\s*(?:[,\]]|$)/gi;
+    while ((match = standaloneNumRe.exec(line)) !== null) {
+      const numStr = match[1];
+      const numStart = match.index + match[0].indexOf(numStr);
+      const numEnd = numStart + numStr.length;
+      // Avoid duplicates (numbers already captured by key-value pattern)
+      if (!positions.some(p => p.start === numStart && p.end === numEnd)) {
+        positions.push({ start: numStart, end: numEnd });
+      }
+    }
+
+    // Sort by start position and find first after startCol
+    positions.sort((a, b) => a.start - b.start);
+    for (const pos of positions) {
+      if (pos.start > startCol) {
+        return pos;
+      }
+    }
+
     return null;
   }
 
   /**
    * Find previous attribute position in a line before endCol
+   * Also finds standalone values (numbers in arrays, etc.)
    */
   private _findPrevAttributeInLine(line: string, endCol: number): { start: number; end: number } | null {
-    // Collect all attributes in the line
-    const attrs: { start: number; end: number }[] = [];
-    const re = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
+    // Collect all navigable positions
+    const positions: { start: number; end: number }[] = [];
+
+    // Pattern for "key": value pairs
+    const keyValueRe = /"([^"]+)"(?:\s*:\s*(?:"([^"]*)"|(-?\d+\.?\d*(?:e[+-]?\d+)?)|true|false|null))?/gi;
     let match;
 
-    while ((match = re.exec(line)) !== null) {
+    while ((match = keyValueRe.exec(line)) !== null) {
       const keyStart = match.index + 1;
       const keyEnd = keyStart + match[1].length;
-      attrs.push({ start: keyStart, end: keyEnd });
+      positions.push({ start: keyStart, end: keyEnd });
 
       // Check for value
       if (match[2] !== undefined) {
@@ -1666,35 +1866,120 @@ class GeoJsonEditor extends HTMLElement {
         if (valueMatch) {
           const valueStart = match.index + (valueMatch.index || 0) + valueMatch[0].indexOf('"') + 1;
           const valueEnd = valueStart + match[2].length;
-          attrs.push({ start: valueStart, end: valueEnd });
+          positions.push({ start: valueStart, end: valueEnd });
         }
       } else if (match[3] !== undefined) {
         const numMatch = line.substring(match.index).match(/:\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/i);
         if (numMatch) {
           const valueStart = match.index + (numMatch.index || 0) + numMatch[0].indexOf(numMatch[1]);
           const valueEnd = valueStart + numMatch[1].length;
-          attrs.push({ start: valueStart, end: valueEnd });
+          positions.push({ start: valueStart, end: valueEnd });
         }
       } else {
         const boolMatch = line.substring(match.index).match(/:\s*(true|false|null)/);
         if (boolMatch) {
           const valueStart = match.index + (boolMatch.index || 0) + boolMatch[0].indexOf(boolMatch[1]);
           const valueEnd = valueStart + boolMatch[1].length;
-          attrs.push({ start: valueStart, end: valueEnd });
+          positions.push({ start: valueStart, end: valueEnd });
         }
       }
     }
 
-    // Find the last attribute that ends before endCol
-    for (let i = attrs.length - 1; i >= 0; i--) {
-      if (attrs[i].end < endCol) {
-        return attrs[i];
+    // Also find standalone numbers (not after a colon) - for array elements
+    const standaloneNumRe = /(?:^|[\[,\s])(-?\d+\.?\d*(?:e[+-]?\d+)?)\s*(?:[,\]]|$)/gi;
+    while ((match = standaloneNumRe.exec(line)) !== null) {
+      const numStr = match[1];
+      const numStart = match.index + match[0].indexOf(numStr);
+      const numEnd = numStart + numStr.length;
+      // Avoid duplicates
+      if (!positions.some(p => p.start === numStart && p.end === numEnd)) {
+        positions.push({ start: numStart, end: numEnd });
+      }
+    }
+
+    // Sort by start position and find last that ends before endCol
+    positions.sort((a, b) => a.start - b.start);
+    for (let i = positions.length - 1; i >= 0; i--) {
+      if (positions[i].end < endCol) {
+        return positions[i];
       }
     }
 
     return null;
   }
 
+  /**
+   * Find bracket position in a line (opening bracket for collapsible nodes)
+   * Looks for { or [ at end of line (for both expanded and collapsed nodes)
+   * Returns position AFTER the bracket, or null if not found
+   */
+  private _findBracketInLine(line: string): number | null {
+    // Look for { or [ at end of line (indicates a collapsible node)
+    // Works for both expanded and collapsed nodes - collapsed nodes still have
+    // the bracket in raw text, the "..." is only added visually via CSS
+    const bracketMatch = line.match(/[\[{]\s*$/);
+    if (bracketMatch && bracketMatch.index !== undefined) {
+      return bracketMatch.index + 1; // Position after bracket
+    }
+    return null;
+  }
+
+  /**
+   * Find next attribute or bracket position in a line
+   * Returns position with isBracket flag to indicate if it's a bracket
+   * For brackets, cursor is placed AFTER the bracket (where Enter/Shift+Enter works)
+   * Stops on ALL opening brackets to allow collapse/expand navigation
+   */
+  private _findNextAttributeOrBracket(line: string, startCol: number, _lineIndex: number): { start: number; end: number; isBracket: boolean } | null {
+    // First check for regular attributes
+    const attrPos = this._findNextAttributeInLine(line, startCol);
+
+    // Find opening bracket position (collapsed or expanded)
+    const bracketPos = this._findBracketInLine(line);
+
+    // Return whichever comes first after startCol
+    if (attrPos !== null && bracketPos !== null) {
+      if (bracketPos > startCol && (bracketPos < attrPos.start)) {
+        return { start: bracketPos, end: bracketPos, isBracket: true };
+      }
+      return { ...attrPos, isBracket: false };
+    } else if (attrPos !== null) {
+      return { ...attrPos, isBracket: false };
+    } else if (bracketPos !== null && bracketPos > startCol) {
+      return { start: bracketPos, end: bracketPos, isBracket: true };
+    }
+
+    return null;
+  }
+
+  /**
+   * Find previous attribute or bracket position in a line
+   * Returns position with isBracket flag to indicate if it's a bracket
+   * For brackets, cursor is placed AFTER the bracket (where Enter/Shift+Enter works)
+   * Stops on ALL opening brackets to allow collapse/expand navigation
+   */
+  private _findPrevAttributeOrBracket(line: string, endCol: number, _lineIndex: number): { start: number; end: number; isBracket: boolean } | null {
+    // First check for regular attributes
+    const attrPos = this._findPrevAttributeInLine(line, endCol);
+
+    // Find opening bracket position (collapsed or expanded)
+    const bracketPos = this._findBracketInLine(line);
+
+    // Return whichever comes last STRICTLY BEFORE endCol (to avoid staying in place)
+    if (attrPos !== null && bracketPos !== null) {
+      if (bracketPos < endCol && bracketPos > attrPos.end) {
+        return { start: bracketPos, end: bracketPos, isBracket: true };
+      }
+      return { ...attrPos, isBracket: false };
+    } else if (attrPos !== null) {
+      return { ...attrPos, isBracket: false };
+    } else if (bracketPos !== null && bracketPos < endCol) {
+      return { start: bracketPos, end: bracketPos, isBracket: true };
+    }
+
+    return null;
+  }
+
   insertNewline() {
     this._saveToHistory('newline');
 
@@ -1890,26 +2175,34 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Scroll viewport to ensure cursor is visible
+   * @param center - if true, center the cursor line in the viewport
    */
-  private _scrollToCursor() {
+  private _scrollToCursor(center = false) {
     const viewport = this._viewport;
     if (!viewport) return;
-    
+
     // Find the visible line index for the cursor
     const visibleIndex = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
     if (visibleIndex === -1) return;
-    
+
     const cursorY = visibleIndex * this.lineHeight;
-    const viewportTop = viewport.scrollTop;
-    const viewportBottom = viewportTop + viewport.clientHeight;
-    
-    // Scroll up if cursor is above viewport
-    if (cursorY < viewportTop) {
-      viewport.scrollTop = cursorY;
-    }
-    // Scroll down if cursor is below viewport
-    else if (cursorY + this.lineHeight > viewportBottom) {
-      viewport.scrollTop = cursorY + this.lineHeight - viewport.clientHeight;
+    const viewportHeight = viewport.clientHeight;
+
+    if (center) {
+      // Center the cursor line in the viewport
+      viewport.scrollTop = Math.max(0, cursorY - viewportHeight / 2 + this.lineHeight / 2);
+    } else {
+      const viewportTop = viewport.scrollTop;
+      const viewportBottom = viewportTop + viewportHeight;
+
+      // Scroll up if cursor is above viewport
+      if (cursorY < viewportTop) {
+        viewport.scrollTop = cursorY;
+      }
+      // Scroll down if cursor is below viewport
+      else if (cursorY + this.lineHeight > viewportBottom) {
+        viewport.scrollTop = cursorY + this.lineHeight - viewportHeight;
+      }
     }
   }
 
@@ -2064,18 +2357,32 @@ class GeoJsonEditor extends HTMLElement {
     if (isShift && !this.selectionStart) {
       this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
     }
-    
+
     if (key === 'home') {
       if (onClosingLine) {
+        // On closing line of collapsed node: go to start line
         this.cursorLine = onClosingLine.startLine;
+        this.cursorColumn = 0;
+      } else if (this.cursorColumn === 0) {
+        // Already at start of line: go to start of document
+        this.cursorLine = 0;
+        this.cursorColumn = 0;
+      } else {
+        // Go to start of line
+        this.cursorColumn = 0;
       }
-      this.cursorColumn = 0;
     } else {
-      if (this.cursorLine < this.lines.length) {
-        this.cursorColumn = this.lines[this.cursorLine].length;
+      const lineLength = this.lines[this.cursorLine]?.length || 0;
+      if (this.cursorColumn === lineLength) {
+        // Already at end of line: go to end of document
+        this.cursorLine = this.lines.length - 1;
+        this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+      } else {
+        // Go to end of line
+        this.cursorColumn = lineLength;
       }
     }
-    
+
     // Update selection end if shift is pressed
     if (isShift) {
       this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
@@ -2083,7 +2390,50 @@ class GeoJsonEditor extends HTMLElement {
       this.selectionStart = null;
       this.selectionEnd = null;
     }
-    
+
+    this._invalidateRenderCache();
+    this._scrollToCursor();
+    this.scheduleRender();
+  }
+
+  /**
+   * Handle PageUp/PageDown
+   */
+  private _handlePageUpDown(direction: 'up' | 'down', isShift: boolean): void {
+    // Start selection if shift is pressed and no selection exists
+    if (isShift && !this.selectionStart) {
+      this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
+    }
+
+    const viewport = this._viewport;
+    if (!viewport) return;
+
+    // Calculate how many lines fit in the viewport
+    const linesPerPage = Math.floor(viewport.clientHeight / this.lineHeight);
+
+    if (direction === 'up') {
+      // Find current visible index and move up by page
+      const currentVisibleIdx = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+      const newVisibleIdx = Math.max(0, currentVisibleIdx - linesPerPage);
+      this.cursorLine = this.visibleLines[newVisibleIdx]?.index || 0;
+    } else {
+      // Find current visible index and move down by page
+      const currentVisibleIdx = this.visibleLines.findIndex(vl => vl.index === this.cursorLine);
+      const newVisibleIdx = Math.min(this.visibleLines.length - 1, currentVisibleIdx + linesPerPage);
+      this.cursorLine = this.visibleLines[newVisibleIdx]?.index || this.lines.length - 1;
+    }
+
+    // Clamp cursor column to line length
+    this.cursorColumn = Math.min(this.cursorColumn, this.lines[this.cursorLine]?.length || 0);
+
+    // Update selection end if shift is pressed
+    if (isShift) {
+      this.selectionEnd = { line: this.cursorLine, column: this.cursorColumn };
+    } else {
+      this.selectionStart = null;
+      this.selectionEnd = null;
+    }
+
     this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
@@ -2098,9 +2448,9 @@ class GeoJsonEditor extends HTMLElement {
     this.selectionEnd = { line: lastLine, column: this.lines[lastLine]?.length || 0 };
     this.cursorLine = lastLine;
     this.cursorColumn = this.lines[lastLine]?.length || 0;
-    
+
     this._invalidateRenderCache();
-    this._scrollToCursor();
+    // Don't scroll - viewport should stay in place when selecting all
     this.scheduleRender();
   }
 
@@ -2252,15 +2602,22 @@ class GeoJsonEditor extends HTMLElement {
       this.insertText(text);
     }
 
+    // Cancel any pending render from insertText/formatAndUpdate
+    if (this.renderTimer) {
+      cancelAnimationFrame(this.renderTimer);
+      this.renderTimer = undefined;
+    }
+
     // Auto-collapse coordinates after pasting into empty editor
     if (wasEmpty && this.lines.length > 0) {
-      // Cancel pending render, collapse first, then render once
-      if (this.renderTimer) {
-        cancelAnimationFrame(this.renderTimer);
-        this.renderTimer = undefined;
-      }
       this.autoCollapseCoordinates();
     }
+
+    // Expand any collapsed nodes that contain errors
+    this._expandErrorNodes();
+
+    // Force immediate render (not via RAF) to ensure content displays instantly
+    this.renderViewport();
   }
 
   handleCopy(e: ClipboardEvent): void {
@@ -2430,14 +2787,23 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   // ========== Collapse/Expand ==========
-  
+
   toggleCollapse(nodeId: string): void {
+    const nodeInfo = this._nodeIdToLines.get(nodeId);
     if (this.collapsedNodes.has(nodeId)) {
       this.collapsedNodes.delete(nodeId);
+      // Track that user opened this node - don't re-collapse during edits
+      if (nodeInfo?.uniqueKey) {
+        this._openedNodeKeys.add(nodeInfo.uniqueKey);
+      }
     } else {
       this.collapsedNodes.add(nodeId);
+      // User closed it - allow re-collapse
+      if (nodeInfo?.uniqueKey) {
+        this._openedNodeKeys.delete(nodeInfo.uniqueKey);
+      }
     }
-    
+
     // Use updateView - don't rebuild nodeId mappings since content didn't change
     this.updateView();
     this._invalidateRenderCache(); // Force re-render
@@ -2445,13 +2811,47 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   autoCollapseCoordinates() {
+    // Don't collapse if there are errors - they should remain visible
+    if (this._hasErrors()) {
+      return;
+    }
     this._applyCollapsedOption(['coordinates']);
   }
 
+  /**
+   * Check if current content has any errors (JSON parse errors or syntax highlighting errors)
+   */
+  private _hasErrors(): boolean {
+    // Check JSON parse errors
+    try {
+      const content = this.lines.join('\n');
+      const wrapped = '[' + content + ']';
+      JSON.parse(wrapped);
+    } catch {
+      return true;
+    }
+
+    // Check for syntax highlighting errors (json-error class)
+    for (const line of this.lines) {
+      const highlighted = highlightSyntax(line, '', undefined);
+      if (highlighted.includes('json-error')) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   /**
    * Helper to apply collapsed option from API methods
+   * Does not collapse if there are errors (so they remain visible)
    */
   private _applyCollapsedFromOptions(options: SetOptions, features: Feature[]): void {
+    // Don't collapse if there are errors - they should remain visible
+    if (this._hasErrors()) {
+      return;
+    }
+
     const collapsed = options.collapsed !== undefined ? options.collapsed : ['coordinates'];
     if (collapsed && (Array.isArray(collapsed) ? collapsed.length > 0 : true)) {
       this._applyCollapsedOption(collapsed, features);
@@ -2615,23 +3015,223 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   // ========== Format and Update ==========
-  
+
+  /**
+   * Best-effort formatting for invalid JSON
+   * Splits on structural characters and indents as much as possible
+   * @param content The content to format
+   * @param skipLineIndex Optional line index to skip (keep as-is)
+   */
+  private _bestEffortFormat(content: string, skipLineIndex?: number): string[] {
+    const sourceLines = content.split('\n');
+
+    // If we have a line to skip, handle it specially
+    if (skipLineIndex !== undefined && skipLineIndex >= 0 && skipLineIndex < sourceLines.length) {
+      const skippedLine = sourceLines[skipLineIndex];
+
+      // Format content before the skipped line
+      const beforeContent = sourceLines.slice(0, skipLineIndex).join('\n');
+      const beforeLines = beforeContent.trim() ? this._formatChunk(beforeContent) : [];
+
+      // Keep skipped line exactly as-is (don't re-indent, user is typing on it)
+      const depthBefore = this._computeDepthAtEnd(beforeLines);
+
+      // Compute depth after the skipped line (including its brackets)
+      const depthAfterSkipped = depthBefore + this._computeBracketDelta(skippedLine);
+
+      // Format content after the skipped line, starting at correct depth
+      const afterContent = sourceLines.slice(skipLineIndex + 1).join('\n');
+      const afterLines = afterContent.trim() ? this._formatChunk(afterContent, depthAfterSkipped) : [];
+
+      return [...beforeLines, skippedLine, ...afterLines];
+    }
+
+    // No line to skip - format everything
+    return this._formatChunk(content);
+  }
+
+  /**
+   * Compute the net bracket delta for a line (opens - closes)
+   */
+  private _computeBracketDelta(line: string): number {
+    let delta = 0;
+    let inString = false;
+    let escaped = false;
+    for (const char of line) {
+      if (escaped) { escaped = false; continue; }
+      if (char === '\\' && inString) { escaped = true; continue; }
+      if (char === '"') { inString = !inString; continue; }
+      if (inString) continue;
+      if (char === '{' || char === '[') delta++;
+      else if (char === '}' || char === ']') delta--;
+    }
+    return delta;
+  }
+
+  /**
+   * Compute the bracket depth at the end of formatted lines
+   * Starts at 1 to account for FeatureCollection wrapper
+   */
+  private _computeDepthAtEnd(lines: string[]): number {
+    let depth = 1; // Start at 1 for FeatureCollection wrapper
+    for (const line of lines) {
+      for (const char of line) {
+        if (char === '{' || char === '[') depth++;
+        else if (char === '}' || char === ']') depth = Math.max(0, depth - 1);
+      }
+    }
+    return depth;
+  }
+
+  /**
+   * Format a chunk of JSON content
+   * @param content The content to format
+   * @param initialDepth Starting indentation depth (default 1 for FeatureCollection wrapper)
+   */
+  private _formatChunk(content: string, initialDepth: number = 1): string[] {
+    const result: string[] = [];
+    let currentLine = '';
+    let depth = initialDepth;
+    let inString = false;
+    let escaped = false;
+
+    for (let i = 0; i < content.length; i++) {
+      const char = content[i];
+
+      // Track escape sequences inside strings
+      if (escaped) {
+        currentLine += char;
+        escaped = false;
+        continue;
+      }
+
+      if (char === '\\' && inString) {
+        currentLine += char;
+        escaped = true;
+        continue;
+      }
+
+      // Track if we're inside a string
+      if (char === '"') {
+        inString = !inString;
+        currentLine += char;
+        continue;
+      }
+
+      // Inside string - just append
+      if (inString) {
+        currentLine += char;
+        continue;
+      }
+
+      // Outside string - handle structural characters
+      if (char === '{' || char === '[') {
+        currentLine += char;
+        result.push('  '.repeat(depth) + currentLine.trim());
+        depth++;
+        currentLine = '';
+      } else if (char === '}' || char === ']') {
+        if (currentLine.trim()) {
+          result.push('  '.repeat(depth) + currentLine.trim());
+        }
+        depth = Math.max(0, depth - 1);
+        currentLine = char;
+      } else if (char === ',') {
+        currentLine += char;
+        result.push('  '.repeat(depth) + currentLine.trim());
+        currentLine = '';
+      } else if (char === ':') {
+        currentLine += ': '; // Add space after colon for readability
+        i++; // Skip if next char is space
+        if (content[i] === ' ') continue;
+        i--; // Not a space, go back
+      } else if (char === '\n' || char === '\r') {
+        // Ignore existing newlines
+        continue;
+      } else {
+        currentLine += char;
+      }
+    }
+
+    // Don't forget last line
+    if (currentLine.trim()) {
+      result.push('  '.repeat(depth) + currentLine.trim());
+    }
+
+    return result;
+  }
+
   formatAndUpdate() {
+    // Save cursor position
+    const oldCursorLine = this.cursorLine;
+    const oldCursorColumn = this.cursorColumn;
+    const oldContent = this.lines.join('\n');
+
     try {
-      const content = this.lines.join('\n');
-      const wrapped = '[' + content + ']';
+      const wrapped = '[' + oldContent + ']';
       const parsed = JSON.parse(wrapped);
-      
+
       const formatted = JSON.stringify(parsed, null, 2);
       const lines = formatted.split('\n');
       this.lines = lines.slice(1, -1); // Remove wrapper brackets
-    } catch (e) {
-      // Invalid JSON, keep as-is
+    } catch {
+      // Invalid JSON - apply best-effort formatting
+      if (oldContent.trim()) {
+        // Skip the cursor line only for small content (typing, not paste)
+        // This avoids text jumping while user is typing
+        // For paste/large insertions, format everything for proper structure
+        const cursorLineContent = this.lines[oldCursorLine] || '';
+        // If cursor line is short, likely typing. Long lines = paste
+        const isSmallEdit = cursorLineContent.length < 80;
+        const skipLine = isSmallEdit ? oldCursorLine : undefined;
+        this.lines = this._bestEffortFormat(oldContent, skipLine);
+      }
     }
-    
+
+    const newContent = this.lines.join('\n');
+
+    // If content didn't change, keep cursor exactly where it was
+    if (newContent === oldContent) {
+      this.cursorLine = oldCursorLine;
+      this.cursorColumn = oldCursorColumn;
+    } else {
+      // Content changed due to reformatting
+      // The cursor position (this.cursorLine, this.cursorColumn) was set by the calling
+      // operation (insertText, insertNewline, etc.) BEFORE formatAndUpdate was called.
+      // We need to adjust for indentation changes while keeping the logical position.
+
+      // If cursor is at column 0 (e.g., after newline), keep it there
+      // This preserves expected behavior for newline insertion
+      if (this.cursorColumn === 0) {
+        // Just keep line, column 0 - indentation will be handled by auto-indent
+      } else {
+        // For other cases, try to maintain position relative to content (not indentation)
+        const oldLines = oldContent.split('\n');
+        const oldLineContent = oldLines[oldCursorLine] || '';
+        const oldLeadingSpaces = oldLineContent.length - oldLineContent.trimStart().length;
+        const oldColumnInContent = Math.max(0, oldCursorColumn - oldLeadingSpaces);
+
+        // Apply same offset to new line's indentation
+        if (this.cursorLine < this.lines.length) {
+          const newLineContent = this.lines[this.cursorLine];
+          const newLeadingSpaces = newLineContent.length - newLineContent.trimStart().length;
+          this.cursorColumn = newLeadingSpaces + oldColumnInContent;
+        }
+      }
+    }
+
+    // Clamp cursor to valid range
+    this.cursorLine = Math.min(this.cursorLine, Math.max(0, this.lines.length - 1));
+    this.cursorColumn = Math.min(this.cursorColumn, this.lines[this.cursorLine]?.length || 0);
+
     this.updateModel();
+
+    // Expand any nodes that contain errors (prevents closing edited nodes with typos)
+    this._expandErrorNodes();
+
     this.scheduleRender();
     this.updatePlaceholderVisibility();
+    this._updateErrorDisplay();
     this.emitChange();
   }
 
@@ -2691,6 +3291,21 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
+  /**
+   * Update error display (counter and navigation visibility)
+   */
+  private _updateErrorDisplay() {
+    const errorLines = this._getErrorLines();
+    const count = errorLines.length;
+
+    if (this._errorNav) {
+      this._errorNav.classList.toggle('visible', count > 0);
+    }
+    if (this._errorCount) {
+      this._errorCount.textContent = count > 0 ? String(count) : '';
+    }
+  }
+
   updatePlaceholderContent() {
     if (this._placeholderLayer) {
       this._placeholderLayer.textContent = this.placeholder;