@softwarity/geojson-editor 1.0.21 → 1.0.23

package/src/geojson-editor.ts

@@ -42,7 +42,7 @@ import {
   RE_CLOSE_BRACKET
 } from './constants.js';
 
-import { createElement, getFeatureKey, countBrackets, parseSelectorToHostRule } from './utils.js';
+import { createElement, countBrackets, parseSelectorToHostRule } from './utils.js';
 import { validateGeoJSON, normalizeToFeatures } from './validation.js';
 import { highlightSyntax, namedColorToHex, isNamedColor } from './syntax-highlighter.js';
 
@@ -60,7 +60,7 @@ class GeoJsonEditor extends HTMLElement {
   // ========== Model (Source of Truth) ==========
   lines: string[] = [];
   collapsedNodes: Set<string> = new Set();
-  hiddenFeatures: Set<string> = new Set();
+  hiddenFeatures: Set<number> = new Set(); // Feature indices that are hidden
 
   // ========== Node ID Management ==========
   private _nodeIdCounter: number = 0;
@@ -71,7 +71,7 @@ class GeoJsonEditor extends HTMLElement {
   // ========== Derived State (computed from model) ==========
   visibleLines: VisibleLine[] = [];
   lineMetadata: Map<number, LineMeta> = new Map();
-  featureRanges: Map<string, FeatureRange> = new Map();
+  featureRanges: Map<number, FeatureRange> = new Map(); // featureIndex -> range
 
   // ========== View State ==========
   viewportHeight: number = 0;
@@ -621,34 +621,75 @@ class GeoJsonEditor extends HTMLElement {
       this.scheduleRender();
     });
     
-    // Mouse move for drag selection
-    viewport.addEventListener('mousemove', (e: MouseEvent) => {
+    // Auto-scroll interval for drag selection outside editor
+    let autoScrollInterval: ReturnType<typeof setInterval> | null = null;
+
+    const stopAutoScroll = () => {
+      if (autoScrollInterval) {
+        clearInterval(autoScrollInterval);
+        autoScrollInterval = null;
+      }
+    };
+
+    const startAutoScroll = (direction: 'up' | 'down') => {
+      stopAutoScroll();
+      const scrollSpeed = 20;
+      autoScrollInterval = setInterval(() => {
+        if (!this._isSelecting) {
+          stopAutoScroll();
+          return;
+        }
+        if (direction === 'up') {
+          viewport.scrollTop -= scrollSpeed;
+        } else {
+          viewport.scrollTop += scrollSpeed;
+        }
+        // Update selection based on scroll position
+        this._updateSelectionFromScroll(direction);
+        this._invalidateRenderCache();
+        this.scheduleRender();
+      }, 50);
+    };
+
+    // Mouse move for drag selection - listen on document to handle drag outside editor
+    document.addEventListener('mousemove', (e: MouseEvent) => {
       if (!this._isSelecting) return;
-      const pos = this._getPositionFromClick(e);
-      this.selectionEnd = pos;
-      this.cursorLine = pos.line;
-      this.cursorColumn = pos.column;
 
-      // Auto-scroll when near edges
       const rect = viewport.getBoundingClientRect();
-      const scrollMargin = 30; // pixels from edge to start scrolling
-      const scrollSpeed = 20; // pixels to scroll per frame
+      const scrollMargin = 30;
+      const scrollSpeed = 20;
+
+      // Check if mouse is outside the viewport
+      if (e.clientY < rect.top) {
+        // Mouse above viewport - start continuous scroll up
+        startAutoScroll('up');
+      } else if (e.clientY > rect.bottom) {
+        // Mouse below viewport - start continuous scroll down
+        startAutoScroll('down');
+      } else {
+        // Mouse inside viewport - stop auto-scroll and update normally
+        stopAutoScroll();
+        const pos = this._getPositionFromClick(e);
+        this.selectionEnd = pos;
+        this.cursorLine = pos.line;
+        this.cursorColumn = pos.column;
 
-      if (e.clientY < rect.top + scrollMargin) {
-        // Near top edge, scroll up
-        viewport.scrollTop -= scrollSpeed;
-      } else if (e.clientY > rect.bottom - scrollMargin) {
-        // Near bottom edge, scroll down
-        viewport.scrollTop += scrollSpeed;
-      }
+        // Auto-scroll when near edges (inside viewport)
+        if (e.clientY < rect.top + scrollMargin) {
+          viewport.scrollTop -= scrollSpeed;
+        } else if (e.clientY > rect.bottom - scrollMargin) {
+          viewport.scrollTop += scrollSpeed;
+        }
 
-      this._invalidateRenderCache();
-      this.scheduleRender();
+        this._invalidateRenderCache();
+        this.scheduleRender();
+      }
     });
-    
+
     // Mouse up to end selection
     document.addEventListener('mouseup', () => {
       this._isSelecting = false;
+      stopAutoScroll();
     });
 
     // Focus/blur handling to show/hide cursor
@@ -739,6 +780,20 @@ class GeoJsonEditor extends HTMLElement {
       this.removeAll();
     });
 
+    // Info button - toggle popup
+    const infoBtn = this._id('infoBtn');
+    const infoPopup = this._id('infoPopup');
+    if (infoBtn && infoPopup) {
+      infoBtn.addEventListener('click', (e: MouseEvent) => {
+        e.stopPropagation();
+        infoPopup.classList.toggle('visible');
+      });
+      // Close popup when clicking outside
+      document.addEventListener('click', () => {
+        infoPopup.classList.remove('visible');
+      });
+    }
+
     // Error navigation buttons
     this._prevErrorBtn?.addEventListener('click', () => {
       this.goToPrevError();
@@ -840,23 +895,22 @@ class GeoJsonEditor extends HTMLElement {
    */
   computeFeatureRanges() {
     this.featureRanges.clear();
-    
+
     try {
       const content = this.lines.join('\n');
       const fullValue = this.prefix + content + this.suffix;
       const parsed = JSON.parse(fullValue);
-      
+
       if (!parsed.features) return;
-      
+
       let featureIndex = 0;
       let braceDepth = 0;
       let inFeature = false;
       let featureStartLine = -1;
-      let currentFeatureKey = null;
-      
+
       for (let i = 0; i < this.lines.length; i++) {
         const line = this.lines[i];
-        
+
         if (!inFeature && RE_IS_FEATURE.test(line)) {
           // Find opening brace
           let startLine = i;
@@ -870,7 +924,7 @@ class GeoJsonEditor extends HTMLElement {
           featureStartLine = startLine;
           inFeature = true;
           braceDepth = 1;
-          
+
           // Count braces from start to current line
           for (let k = startLine; k <= i; k++) {
             const counts = countBrackets(this.lines[k], '{');
@@ -880,25 +934,19 @@ class GeoJsonEditor extends HTMLElement {
               braceDepth += counts.open - counts.close;
             }
           }
-          
-          if (featureIndex < parsed.features.length) {
-            currentFeatureKey = getFeatureKey(parsed.features[featureIndex]);
-          }
         } else if (inFeature) {
           const counts = countBrackets(line, '{');
           braceDepth += counts.open - counts.close;
-          
+
           if (braceDepth <= 0) {
-            if (currentFeatureKey) {
-              this.featureRanges.set(currentFeatureKey, {
-                startLine: featureStartLine,
-                endLine: i,
-                featureIndex
-              });
-            }
+            // Store by featureIndex instead of hash key
+            this.featureRanges.set(featureIndex, {
+              startLine: featureStartLine,
+              endLine: i,
+              featureIndex
+            });
             featureIndex++;
             inFeature = false;
-            currentFeatureKey = null;
           }
         }
       }
@@ -927,7 +975,7 @@ class GeoJsonEditor extends HTMLElement {
         visibilityButton: null,
         isHidden: false,
         isCollapsed: false,
-        featureKey: null,
+        featureIndex: null,
         hasError: errorLines.has(i)
       };
 
@@ -970,17 +1018,17 @@ class GeoJsonEditor extends HTMLElement {
       }
 
       // Check if line belongs to a hidden feature
-      for (const [featureKey, range] of this.featureRanges) {
+      for (const [featureIndex, range] of this.featureRanges) {
         if (i >= range.startLine && i <= range.endLine) {
-          meta.featureKey = featureKey;
-          if (this.hiddenFeatures.has(featureKey)) {
+          meta.featureIndex = featureIndex;
+          if (this.hiddenFeatures.has(featureIndex)) {
             meta.isHidden = true;
           }
           // Add visibility button only on feature start line
           if (i === range.startLine) {
             meta.visibilityButton = {
-              featureKey,
-              isHidden: this.hiddenFeatures.has(featureKey)
+              featureIndex,
+              isHidden: this.hiddenFeatures.has(featureIndex)
             };
           }
           break;
@@ -1244,7 +1292,7 @@ class GeoJsonEditor extends HTMLElement {
       // Add visibility button on line (uses ::before pseudo-element)
       if (lineData.meta?.visibilityButton) {
         lineEl.classList.add('has-visibility');
-        lineEl.dataset.featureKey = lineData.meta.visibilityButton.featureKey;
+        lineEl.dataset.featureIndex = String(lineData.meta.visibilityButton.featureIndex);
         if (lineData.meta.visibilityButton.isHidden) {
           lineEl.classList.add('feature-hidden');
         }
@@ -1529,8 +1577,8 @@ class GeoJsonEditor extends HTMLElement {
       'ArrowDown': () => this._handleArrowKey(1, 0, e.shiftKey, e.ctrlKey || e.metaKey),
       'ArrowLeft': () => this._handleArrowKey(0, -1, e.shiftKey, e.ctrlKey || e.metaKey),
       '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),
+      'Home': () => this._handleHomeEnd('home', e.shiftKey, e.ctrlKey || e.metaKey, ctx.onClosingLine),
+      'End': () => this._handleHomeEnd('end', e.shiftKey, e.ctrlKey || e.metaKey, ctx.onClosingLine),
       'PageUp': () => this._handlePageUpDown('up', e.shiftKey),
       'PageDown': () => this._handlePageUpDown('down', e.shiftKey),
       'Tab': () => this._handleTab(e.shiftKey, ctx),
@@ -2366,34 +2414,38 @@ class GeoJsonEditor extends HTMLElement {
 
   /**
    * Handle Home/End with optional selection
+   * @param key - 'home' or 'end'
+   * @param isShift - Shift key pressed (for selection)
+   * @param isCtrl - Ctrl/Cmd key pressed (for document start/end)
+   * @param onClosingLine - Collapsed node info if on closing line
    */
-  private _handleHomeEnd(key: string, isShift: boolean, onClosingLine: CollapsedNodeInfo | null): void {
+  private _handleHomeEnd(key: string, isShift: boolean, isCtrl: boolean, onClosingLine: CollapsedNodeInfo | null): void {
     // Start selection if shift is pressed and no selection exists
     if (isShift && !this.selectionStart) {
       this.selectionStart = { line: this.cursorLine, column: this.cursorColumn };
     }
 
     if (key === 'home') {
-      if (onClosingLine) {
+      if (isCtrl) {
+        // Ctrl+Home: go to start of document
+        this.cursorLine = 0;
+        this.cursorColumn = 0;
+      } else 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;
       }
     } else {
-      const lineLength = this.lines[this.cursorLine]?.length || 0;
-      if (this.cursorColumn === lineLength) {
-        // Already at end of line: go to end of document
+      if (isCtrl) {
+        // Ctrl+End: 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
+        const lineLength = this.lines[this.cursorLine]?.length || 0;
         this.cursorColumn = lineLength;
       }
     }
@@ -2663,9 +2715,25 @@ class GeoJsonEditor extends HTMLElement {
       this.cursorLine = textLines.length - 1;
       this.cursorColumn = textLines[textLines.length - 1].length;
     } else if (this.cursorLine < this.lines.length) {
+      const textLines = text.split('\n');
       const line = this.lines[this.cursorLine];
-      this.lines[this.cursorLine] = line.substring(0, this.cursorColumn) + text + line.substring(this.cursorColumn);
-      this.cursorColumn += text.length;
+      const before = line.substring(0, this.cursorColumn);
+      const after = line.substring(this.cursorColumn);
+
+      if (textLines.length === 1) {
+        // Single line insertion
+        this.lines[this.cursorLine] = before + text + after;
+        this.cursorColumn += text.length;
+      } else {
+        // Multi-line insertion
+        const firstLine = before + textLines[0];
+        const lastLine = textLines[textLines.length - 1] + after;
+        const middleLines = textLines.slice(1, -1);
+
+        this.lines.splice(this.cursorLine, 1, firstLine, ...middleLines, lastLine);
+        this.cursorLine += textLines.length - 1;
+        this.cursorColumn = textLines[textLines.length - 1].length;
+      }
     }
     this.formatAndUpdate();
   }
@@ -2675,12 +2743,23 @@ class GeoJsonEditor extends HTMLElement {
     const text = e.clipboardData?.getData('text/plain');
     if (!text) return;
 
-    const wasEmpty = this.lines.length === 0;
+    // Save collapsed state of existing features before paste
+    const existingCollapsedKeys = new Set<string>();
+    for (const nodeId of this.collapsedNodes) {
+      const nodeInfo = this._nodeIdToLines.get(nodeId);
+      if (nodeInfo?.nodeKey) {
+        const featureIndex = this._getFeatureIndexForLine(nodeInfo.startLine);
+        existingCollapsedKeys.add(`${featureIndex}:${nodeInfo.nodeKey}`);
+      }
+    }
+    const existingFeatureCount = this._parseFeatures().length;
 
     // Try to parse as GeoJSON and normalize
+    let pastedFeatureCount = 0;
     try {
       const parsed = JSON.parse(text);
       const features = normalizeToFeatures(parsed);
+      pastedFeatureCount = features.length;
       // Valid GeoJSON - insert formatted features
       const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
       this.insertText(formatted);
@@ -2695,9 +2774,35 @@ class GeoJsonEditor extends HTMLElement {
       this.renderTimer = undefined;
     }
 
-    // Auto-collapse coordinates after pasting into empty editor
-    if (wasEmpty && this.lines.length > 0) {
-      this.autoCollapseCoordinates();
+    // Auto-collapse coordinates for pasted features (if valid GeoJSON was pasted)
+    // Note: We collapse even if there are errors (e.g., missing comma) because
+    // the user will fix them and we want the coordinates already collapsed
+    if (pastedFeatureCount > 0) {
+      // Restore collapsed state for existing features and collapse new features' coordinates
+      const ranges = this._findCollapsibleRanges();
+      const featureRanges = ranges.filter(r => r.isRootFeature);
+
+      for (const range of ranges) {
+        // Find which feature this range belongs to
+        const featureIndex = featureRanges.findIndex(fr =>
+          range.startLine >= fr.startLine && range.endLine <= fr.endLine
+        );
+
+        if (featureIndex < existingFeatureCount) {
+          // Existing feature - restore collapsed state
+          const key = `${featureIndex}:${range.nodeKey}`;
+          if (existingCollapsedKeys.has(key)) {
+            this.collapsedNodes.add(range.nodeId);
+          }
+        } else {
+          // New feature - collapse coordinates
+          if (range.nodeKey === 'coordinates') {
+            this.collapsedNodes.add(range.nodeId);
+          }
+        }
+      }
+
+      this.updateView();
     }
 
     // Expand any collapsed nodes that contain errors
@@ -2782,6 +2887,28 @@ class GeoJsonEditor extends HTMLElement {
     return { line, column };
   }
 
+  /**
+   * Update selection during auto-scroll when dragging outside editor
+   */
+  private _updateSelectionFromScroll(direction: 'up' | 'down'): void {
+    if (!this.visibleLines.length) return;
+
+    if (direction === 'up') {
+      // Scrolling up - select to first visible line
+      const firstVisible = this.visibleLines[0];
+      this.selectionEnd = { line: firstVisible.index, column: 0 };
+      this.cursorLine = firstVisible.index;
+      this.cursorColumn = 0;
+    } else {
+      // Scrolling down - select to last visible line
+      const lastVisible = this.visibleLines[this.visibleLines.length - 1];
+      const lineLength = lastVisible.content?.length || 0;
+      this.selectionEnd = { line: lastVisible.index, column: lineLength };
+      this.cursorLine = lastVisible.index;
+      this.cursorColumn = lineLength;
+    }
+  }
+
   // ========== Gutter Interactions ==========
   
   handleGutterClick(e: MouseEvent): void {
@@ -2790,8 +2917,8 @@ class GeoJsonEditor extends HTMLElement {
 
     // Visibility button in gutter
     const visBtn = target.closest('.visibility-button') as HTMLElement | null;
-    if (visBtn) {
-      this.toggleFeatureVisibility(visBtn.dataset.featureKey);
+    if (visBtn && visBtn.dataset.featureIndex !== undefined) {
+      this.toggleFeatureVisibility(parseInt(visBtn.dataset.featureIndex, 10));
       return;
     }
 
@@ -2818,9 +2945,9 @@ class GeoJsonEditor extends HTMLElement {
       if (clickX < 14) {
         e.preventDefault();
         e.stopPropagation();
-        const featureKey = lineEl.dataset.featureKey;
-        if (featureKey) {
-          this.toggleFeatureVisibility(featureKey);
+        const featureIndexStr = lineEl.dataset.featureIndex;
+        if (featureIndexStr !== undefined) {
+          this.toggleFeatureVisibility(parseInt(featureIndexStr, 10));
         }
         return;
       }
@@ -2993,12 +3120,12 @@ class GeoJsonEditor extends HTMLElement {
 
   // ========== Feature Visibility ==========
 
-  toggleFeatureVisibility(featureKey: string | undefined): void {
-    if (!featureKey) return;
-    if (this.hiddenFeatures.has(featureKey)) {
-      this.hiddenFeatures.delete(featureKey);
+  toggleFeatureVisibility(featureIndex: number | undefined): void {
+    if (featureIndex === undefined) return;
+    if (this.hiddenFeatures.has(featureIndex)) {
+      this.hiddenFeatures.delete(featureIndex);
     } else {
-      this.hiddenFeatures.add(featureKey);
+      this.hiddenFeatures.add(featureIndex);
     }
 
     // Use updateView - content didn't change, just visibility
@@ -3254,6 +3381,10 @@ class GeoJsonEditor extends HTMLElement {
     const oldCursorColumn = this.cursorColumn;
     const oldContent = this.lines.join('\n');
 
+    // Save feature count before modification (for index adjustment)
+    const oldFeatureCount = this._countFeatures(oldContent);
+    const cursorFeatureIndex = this._getFeatureIndexForLine(oldCursorLine);
+
     try {
       const wrapped = '[' + oldContent + ']';
       const parsed = JSON.parse(wrapped);
@@ -3299,23 +3430,43 @@ class GeoJsonEditor extends HTMLElement {
       // 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
+      // Special case: cursor at column 0 means we're at start of a line (after newline)
+      // Keep both line and column as set by the calling operation
+      if (oldCursorColumn === 0) {
+        // cursorLine was already set by the calling operation, keep column at 0
+        this.cursorColumn = 0;
       } else {
-        // For other cases, try to maintain position relative to content (not indentation)
+        // Calculate character offset in old content (ignoring whitespace for comparison)
         const oldLines = oldContent.split('\n');
+        let oldCharOffset = 0;
+        for (let i = 0; i < oldCursorLine && i < oldLines.length; i++) {
+          oldCharOffset += oldLines[i].replace(/\s/g, '').length;
+        }
         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;
+        const oldLineUpToCursor = oldLineContent.substring(0, oldCursorColumn);
+        oldCharOffset += oldLineUpToCursor.replace(/\s/g, '').length;
+
+        // Find corresponding position in new content
+        let charCount = 0;
+        let newLine = 0;
+        let newCol = 0;
+        for (let i = 0; i < this.lines.length; i++) {
+          const lineContent = this.lines[i];
+          for (let j = 0; j <= lineContent.length; j++) {
+            if (charCount >= oldCharOffset) {
+              newLine = i;
+              newCol = j;
+              break;
+            }
+            if (j < lineContent.length && !/\s/.test(lineContent[j])) {
+              charCount++;
+            }
+          }
+          if (charCount >= oldCharOffset) break;
         }
+
+        this.cursorLine = newLine;
+        this.cursorColumn = newCol;
       }
     }
 
@@ -3323,6 +3474,17 @@ class GeoJsonEditor extends HTMLElement {
     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);
 
+    // Adjust hidden feature indices if feature count changed
+    const finalContent = this.lines.join('\n');
+    const newFeatureCount = this._countFeatures(finalContent);
+    if (oldFeatureCount >= 0 && newFeatureCount >= 0 && oldFeatureCount !== newFeatureCount) {
+      const delta = newFeatureCount - oldFeatureCount;
+      // Use cursor position to determine insertion point
+      // If cursor was inside a feature, changes happened at/after that feature
+      const insertionIndex = cursorFeatureIndex >= 0 ? cursorFeatureIndex : 0;
+      this._adjustHiddenIndices(insertionIndex, delta);
+    }
+
     this.updateModel();
 
     // Expand any nodes that contain errors (prevents closing edited nodes with typos)
@@ -3345,9 +3507,8 @@ class GeoJsonEditor extends HTMLElement {
       
       // Filter hidden features
       if (this.hiddenFeatures.size > 0) {
-        parsed.features = parsed.features.filter((feature: Feature) => {
-          const key = getFeatureKey(feature);
-          return key ? !this.hiddenFeatures.has(key) : true;
+        parsed.features = parsed.features.filter((_feature: Feature, index: number) => {
+          return !this.hiddenFeatures.has(index);
         });
       }
       
@@ -3627,8 +3788,10 @@ class GeoJsonEditor extends HTMLElement {
    */
   add(input: FeatureInput, options: SetOptions = {}): void {
     const newFeatures = normalizeToFeatures(input);
+    const existingCount = this._parseFeatures().length;
     const allFeatures = [...this._parseFeatures(), ...newFeatures];
-    this._setFeaturesInternal(allFeatures, options);
+    // Preserve collapsed state for existing features, apply options only to new ones
+    this._setFeaturesInternalPreserving(allFeatures, options, existingCount);
   }
 
   /**
@@ -3644,8 +3807,15 @@ class GeoJsonEditor extends HTMLElement {
     const newFeatures = normalizeToFeatures(input);
     const features = this._parseFeatures();
     const idx = index < 0 ? features.length + index : index;
-    features.splice(Math.max(0, Math.min(idx, features.length)), 0, ...newFeatures);
-    this._setFeaturesInternal(features, options);
+    const insertIdx = Math.max(0, Math.min(idx, features.length));
+
+    // Adjust hidden feature indices before insertion
+    // Features at or after insertIdx need to shift by newFeatures.length
+    this._adjustHiddenIndices(insertIdx, newFeatures.length);
+
+    features.splice(insertIdx, 0, ...newFeatures);
+    // Preserve collapsed state, apply options only to inserted features
+    this._setFeaturesInternalPreserving(features, options, insertIdx, newFeatures.length);
   }
 
   /**
@@ -3657,12 +3827,241 @@ class GeoJsonEditor extends HTMLElement {
     this._applyCollapsedFromOptions(options, features);
   }
 
+  /**
+   * Internal method to set features while preserving collapsed state of existing features
+   * @param features All features (existing + new)
+   * @param options Collapse options for new features
+   * @param newStartIndex Index where new features start (for add) or were inserted (for insertAt)
+   * @param newCount Number of new features (optional, defaults to features from newStartIndex to end)
+   */
+  private _setFeaturesInternalPreserving(
+    features: Feature[],
+    options: SetOptions,
+    newStartIndex: number,
+    newCount?: number
+  ): void {
+    // Save collapsed state by nodeKey before modification
+    const collapsedKeys = new Set<string>();
+    for (const nodeId of this.collapsedNodes) {
+      const nodeInfo = this._nodeIdToLines.get(nodeId);
+      if (nodeInfo?.nodeKey) {
+        // Include feature index in key to handle multiple features with same structure
+        const featureIndex = this._getFeatureIndexForLine(nodeInfo.startLine);
+        collapsedKeys.add(`${featureIndex}:${nodeInfo.nodeKey}`);
+      }
+    }
+
+    // Save hidden features (already adjusted by caller for insert/remove)
+    const savedHiddenFeatures = new Set(this.hiddenFeatures);
+
+    // Format and set content
+    const formatted = features.map(f => JSON.stringify(f, null, 2)).join(',\n');
+    this.setValue(formatted, false);
+
+    // Restore hidden features
+    this.hiddenFeatures = savedHiddenFeatures;
+
+    // Restore collapsed state for existing features
+    const ranges = this._findCollapsibleRanges();
+    const featureRanges = ranges.filter(r => r.isRootFeature);
+    const actualNewCount = newCount !== undefined ? newCount : features.length - newStartIndex;
+
+    for (const range of ranges) {
+      // Find which feature this range belongs to
+      const featureIndex = featureRanges.findIndex(fr =>
+        range.startLine >= fr.startLine && range.endLine <= fr.endLine
+      );
+
+      // Determine if this is an existing feature (adjust index for insertAt case)
+      let originalFeatureIndex = featureIndex;
+      if (featureIndex >= newStartIndex && featureIndex < newStartIndex + actualNewCount) {
+        // This is a new feature - apply options
+        continue;
+      } else if (featureIndex >= newStartIndex + actualNewCount) {
+        // Feature was shifted by insertion - adjust index
+        originalFeatureIndex = featureIndex - actualNewCount;
+      }
+
+      // Check if this node was collapsed before
+      const key = `${originalFeatureIndex}:${range.nodeKey}`;
+      if (collapsedKeys.has(key)) {
+        this.collapsedNodes.add(range.nodeId);
+      }
+    }
+
+    // Apply collapse options to new features only
+    this._applyCollapsedToNewFeatures(options, features, newStartIndex, actualNewCount);
+
+    // Use updateView instead of updateModel since setValue already rebuilt mappings
+    // and we just need to recompute visible lines with new collapsed state
+    this.updateView();
+    this.scheduleRender();
+  }
+
+  /**
+   * Apply collapsed options only to specific new features
+   */
+  private _applyCollapsedToNewFeatures(
+    options: SetOptions,
+    features: Feature[],
+    startIndex: number,
+    count: number
+  ): void {
+    const collapsed = options.collapsed !== undefined ? options.collapsed : ['coordinates'];
+    if (!collapsed || (Array.isArray(collapsed) && collapsed.length === 0)) return;
+
+    const ranges = this._findCollapsibleRanges();
+    const featureRanges = ranges.filter(r => r.isRootFeature);
+
+    for (const range of ranges) {
+      // Find which feature this range belongs to
+      const featureIndex = featureRanges.findIndex(fr =>
+        range.startLine >= fr.startLine && range.endLine <= fr.endLine
+      );
+
+      // Only process new features
+      if (featureIndex < startIndex || featureIndex >= startIndex + count) continue;
+
+      let shouldCollapse = false;
+      if (typeof collapsed === 'function') {
+        const feature = features[featureIndex];
+        const collapsedAttrs = collapsed(feature, featureIndex);
+        shouldCollapse = range.isRootFeature
+          ? collapsedAttrs.includes('$root')
+          : collapsedAttrs.includes(range.nodeKey);
+      } else if (Array.isArray(collapsed)) {
+        shouldCollapse = range.isRootFeature
+          ? collapsed.includes('$root')
+          : collapsed.includes(range.nodeKey);
+      }
+
+      if (shouldCollapse) {
+        this.collapsedNodes.add(range.nodeId);
+      }
+    }
+  }
+
+  /**
+   * Get feature index for a given line
+   */
+  /**
+   * Count features in content (returns -1 if JSON invalid)
+   */
+  private _countFeatures(content: string): number {
+    try {
+      const wrapped = '[' + content + ']';
+      const parsed = JSON.parse(wrapped);
+      return Array.isArray(parsed) ? parsed.length : -1;
+    } catch {
+      return -1;
+    }
+  }
+
+  /**
+   * Adjust hiddenFeatures indices when features are inserted or removed
+   * @param insertionIndex - Index where features were inserted (or removed from)
+   * @param delta - Number of features added (positive) or removed (negative)
+   */
+  private _adjustHiddenIndices(insertionIndex: number, delta: number): void {
+    if (delta === 0 || this.hiddenFeatures.size === 0) return;
+
+    const newHiddenFeatures = new Set<number>();
+    for (const idx of this.hiddenFeatures) {
+      if (idx < insertionIndex) {
+        // Before insertion point - keep same index
+        newHiddenFeatures.add(idx);
+      } else {
+        // At or after insertion point - shift by delta
+        const newIdx = idx + delta;
+        if (newIdx >= 0) {
+          newHiddenFeatures.add(newIdx);
+        }
+        // If newIdx < 0, the feature was removed, so we don't add it
+      }
+    }
+    this.hiddenFeatures = newHiddenFeatures;
+  }
+
+  /**
+   * Remove a hidden index and shift all indices after it by -1
+   * Used when removing a feature via API
+   */
+  private _removeAndShiftHiddenIndex(removedIndex: number): void {
+    if (this.hiddenFeatures.size === 0) return;
+
+    const newHiddenFeatures = new Set<number>();
+    for (const idx of this.hiddenFeatures) {
+      if (idx < removedIndex) {
+        // Before removed index - keep same
+        newHiddenFeatures.add(idx);
+      } else if (idx > removedIndex) {
+        // After removed index - shift by -1
+        newHiddenFeatures.add(idx - 1);
+      }
+      // idx === removedIndex is dropped (feature was removed)
+    }
+    this.hiddenFeatures = newHiddenFeatures;
+  }
+
+  private _getFeatureIndexForLine(line: number): number {
+    for (const [, range] of this.featureRanges) {
+      if (line >= range.startLine && line <= range.endLine) {
+        return range.featureIndex;
+      }
+    }
+    return -1;
+  }
+
   removeAt(index: number): Feature | undefined {
     const features = this._parseFeatures();
     const idx = index < 0 ? features.length + index : index;
     if (idx >= 0 && idx < features.length) {
+      // Save collapsed state by nodeKey before modification
+      const collapsedKeys = new Set<string>();
+      for (const nodeId of this.collapsedNodes) {
+        const nodeInfo = this._nodeIdToLines.get(nodeId);
+        if (nodeInfo?.nodeKey) {
+          const featureIndex = this._getFeatureIndexForLine(nodeInfo.startLine);
+          // Skip the feature being removed, adjust indices for features after it
+          if (featureIndex === idx) continue;
+          const adjustedIndex = featureIndex > idx ? featureIndex - 1 : featureIndex;
+          collapsedKeys.add(`${adjustedIndex}:${nodeInfo.nodeKey}`);
+        }
+      }
+
+      // Adjust hidden feature indices: remove idx, shift indices after idx by -1
+      this._removeAndShiftHiddenIndex(idx);
+
+      // Save hidden features before setValue (which clears them)
+      const savedHiddenFeatures = new Set(this.hiddenFeatures);
+
       const removed = features.splice(idx, 1)[0];
-      this.set(features);
+
+      // Format and set content
+      const formatted = features.map((f: Feature) => JSON.stringify(f, null, 2)).join(',\n');
+      this.setValue(formatted, false);
+
+      // Restore hidden features
+      this.hiddenFeatures = savedHiddenFeatures;
+
+      // Restore collapsed state for remaining features
+      const ranges = this._findCollapsibleRanges();
+      const featureRanges = ranges.filter(r => r.isRootFeature);
+
+      for (const range of ranges) {
+        const featureIndex = featureRanges.findIndex(fr =>
+          range.startLine >= fr.startLine && range.endLine <= fr.endLine
+        );
+        const key = `${featureIndex}:${range.nodeKey}`;
+        if (collapsedKeys.has(key)) {
+          this.collapsedNodes.add(range.nodeId);
+        }
+      }
+
+      // Use updateView instead of updateModel since setValue already rebuilt mappings
+      this.updateView();
+      this.scheduleRender();
+      this.emitChange();
       return removed;
     }
     return undefined;