@softwarity/geojson-editor 1.0.13 → 1.0.15

package/src/geojson-editor.js

@@ -8,6 +8,29 @@ const VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : 'dev';
 const GEOJSON_KEYS = ['type', 'geometry', 'properties', 'coordinates', 'id', 'features'];
 const GEOMETRY_TYPES = ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'];
 
+// Pre-compiled regex patterns for performance (avoid re-creation on each call)
+const RE_CONTEXT_GEOMETRY = /"geometry"\s*:/;
+const RE_CONTEXT_PROPERTIES = /"properties"\s*:/;
+const RE_CONTEXT_FEATURES = /"features"\s*:/;
+const RE_COLLAPSED_BRACKET = /^(\s*"[^"]+"\s*:\s*)([{\[])/;
+const RE_COLLAPSED_ROOT = /^(\s*)([{\[]),?\s*$/;
+const RE_ESCAPE_AMP = /&/g;
+const RE_ESCAPE_LT = /</g;
+const RE_ESCAPE_GT = />/g;
+const RE_PUNCTUATION = /([{}[\],:])/g;
+const RE_JSON_KEYS = /"([^"]+)"(<span class="json-punctuation">:<\/span>)/g;
+const RE_TYPE_VALUES = /<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>(\s*)"([^"]*)"/g;
+const RE_STRING_VALUES = /(<span class="json-punctuation">:<\/span>)(\s*)"([^"]*)"/g;
+const RE_COLOR_HEX = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+const RE_NUMBERS_COLON = /(<span class="json-punctuation">:<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi;
+const RE_NUMBERS_ARRAY = /(<span class="json-punctuation">[\[,]<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi;
+const RE_NUMBERS_START = /^(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gim;
+const RE_BOOLEANS = /(<span class="json-punctuation">:<\/span>)(\s*)(true|false)/g;
+const RE_NULL = /(<span class="json-punctuation">:<\/span>)(\s*)(null)/g;
+const RE_UNRECOGNIZED = /(<\/span>|^)([^<]+)(<span|$)/g;
+const RE_WHITESPACE_ONLY = /^\s*$/;
+const RE_WHITESPACE_SPLIT = /(\s+)/;
+
 /**
  * GeoJSON Editor Web Component
  * Monaco-like architecture with virtualized line rendering
@@ -33,7 +56,6 @@ class GeoJsonEditor extends HTMLElement {
     this.featureRanges = new Map(); // featureKey -> {startLine, endLine, featureIndex}
     
     // ========== View State ==========
-    this.scrollTop = 0;
     this.viewportHeight = 0;
     this.lineHeight = 19.5;       // CSS: line-height * font-size = 1.5 * 13px
     this.bufferLines = 5;         // Extra lines to render above/below viewport
@@ -56,6 +78,148 @@ class GeoJsonEditor extends HTMLElement {
     
     // ========== Theme ==========
     this.themes = { dark: {}, light: {} };
+
+    // ========== Undo/Redo History ==========
+    this._undoStack = [];         // Stack of previous states
+    this._redoStack = [];         // Stack of undone states
+    this._maxHistorySize = 100;   // Maximum history entries
+    this._lastActionTime = 0;     // Timestamp of last action (for grouping)
+    this._lastActionType = null;  // Type of last action (for grouping)
+    this._groupingDelay = 500;    // ms - actions within this delay are grouped
+  }
+
+  // ========== Render Cache ==========
+  _invalidateRenderCache() {
+    this._lastStartIndex = -1;
+    this._lastEndIndex = -1;
+    this._lastTotalLines = -1;
+  }
+
+  // ========== Undo/Redo System ==========
+
+  /**
+   * Create a snapshot of current editor state
+   * @returns {Object} State snapshot
+   */
+  _createSnapshot() {
+    return {
+      lines: [...this.lines],
+      cursorLine: this.cursorLine,
+      cursorColumn: this.cursorColumn,
+      timestamp: Date.now()
+    };
+  }
+
+  /**
+   * Restore editor state from snapshot
+   * @param {Object} snapshot - State to restore
+   */
+  _restoreSnapshot(snapshot) {
+    this.lines = [...snapshot.lines];
+    this.cursorLine = snapshot.cursorLine;
+    this.cursorColumn = snapshot.cursorColumn;
+    this.updateModel();
+    this._invalidateRenderCache();
+    this.scheduleRender();
+    this.updatePlaceholderVisibility();
+    this.emitChange();
+  }
+
+  /**
+   * Save current state to undo stack before making changes
+   * @param {string} actionType - Type of action (insert, delete, paste, etc.)
+   */
+  _saveToHistory(actionType = 'edit') {
+    const now = Date.now();
+    const shouldGroup = (
+      actionType === this._lastActionType &&
+      (now - this._lastActionTime) < this._groupingDelay
+    );
+
+    // If same action type within grouping delay, don't create new entry
+    if (!shouldGroup) {
+      const snapshot = this._createSnapshot();
+      this._undoStack.push(snapshot);
+
+      // Limit stack size
+      if (this._undoStack.length > this._maxHistorySize) {
+        this._undoStack.shift();
+      }
+
+      // Clear redo stack on new action
+      this._redoStack = [];
+    }
+
+    this._lastActionTime = now;
+    this._lastActionType = actionType;
+  }
+
+  /**
+   * Undo last action
+   * @returns {boolean} True if undo was performed
+   */
+  undo() {
+    if (this._undoStack.length === 0) return false;
+
+    // Save current state to redo stack
+    this._redoStack.push(this._createSnapshot());
+
+    // Restore previous state
+    const previousState = this._undoStack.pop();
+    this._restoreSnapshot(previousState);
+
+    // Reset action tracking
+    this._lastActionType = null;
+    this._lastActionTime = 0;
+
+    return true;
+  }
+
+  /**
+   * Redo previously undone action
+   * @returns {boolean} True if redo was performed
+   */
+  redo() {
+    if (this._redoStack.length === 0) return false;
+
+    // Save current state to undo stack
+    this._undoStack.push(this._createSnapshot());
+
+    // Restore next state
+    const nextState = this._redoStack.pop();
+    this._restoreSnapshot(nextState);
+
+    // Reset action tracking
+    this._lastActionType = null;
+    this._lastActionTime = 0;
+
+    return true;
+  }
+
+  /**
+   * Clear undo/redo history
+   */
+  clearHistory() {
+    this._undoStack = [];
+    this._redoStack = [];
+    this._lastActionType = null;
+    this._lastActionTime = 0;
+  }
+
+  /**
+   * Check if undo is available
+   * @returns {boolean}
+   */
+  canUndo() {
+    return this._undoStack.length > 0;
+  }
+
+  /**
+   * Check if redo is available
+   * @returns {boolean}
+   */
+  canRedo() {
+    return this._redoStack.length > 0;
   }
 
   // ========== Unique ID Generation ==========
@@ -162,14 +326,16 @@ class GeoJsonEditor extends HTMLElement {
    * @param {Object} range - The range info {startLine, endLine}
    */
   _deleteCollapsedNode(range) {
+    this._saveToHistory('delete');
+
     // Remove all lines from startLine to endLine
     const count = range.endLine - range.startLine + 1;
     this.lines.splice(range.startLine, count);
-    
+
     // Position cursor at the line where the node was
     this.cursorLine = Math.min(range.startLine, this.lines.length - 1);
     this.cursorColumn = 0;
-    
+
     this.formatAndUpdate();
   }
 
@@ -350,17 +516,21 @@ class GeoJsonEditor extends HTMLElement {
         const rect = lineEl.getBoundingClientRect();
         const clickX = e.clientX - rect.left;
         if (clickX < 14) {
+          // Block render until click is processed to prevent DOM destruction
+          this._blockRender = true;
           return;
         }
       }
-      
+
       // Skip if clicking on an inline control pseudo-element (positioned with negative left)
-      if (e.target.classList.contains('json-color') || 
+      if (e.target.classList.contains('json-color') ||
           e.target.classList.contains('json-boolean')) {
         const rect = e.target.getBoundingClientRect();
         const clickX = e.clientX - rect.left;
         // Pseudo-element is at left: -8px, so clickX will be negative when clicking on it
         if (clickX < 0 && clickX >= -8) {
+          // Block render until click is processed to prevent DOM destruction
+          this._blockRender = true;
           return;
         }
       }
@@ -387,7 +557,7 @@ class GeoJsonEditor extends HTMLElement {
       
       // Focus textarea
       hiddenTextarea.focus();
-      this._lastStartIndex = -1;
+      this._invalidateRenderCache();
       this.scheduleRender();
     });
     
@@ -413,7 +583,7 @@ class GeoJsonEditor extends HTMLElement {
         viewport.scrollTop += scrollSpeed;
       }
       
-      this._lastStartIndex = -1;
+      this._invalidateRenderCache();
       this.scheduleRender();
     });
     
@@ -425,13 +595,13 @@ class GeoJsonEditor extends HTMLElement {
     // Focus/blur handling to show/hide cursor
     hiddenTextarea.addEventListener('focus', () => {
       editorWrapper.classList.add('focused');
-      this._lastStartIndex = -1; // Force re-render to show cursor
+      this._invalidateRenderCache(); // Force re-render to show cursor
       this.scheduleRender();
     });
 
     hiddenTextarea.addEventListener('blur', () => {
       editorWrapper.classList.remove('focused');
-      this._lastStartIndex = -1; // Force re-render to hide cursor
+      this._invalidateRenderCache(); // Force re-render to hide cursor
       this.scheduleRender();
     });
 
@@ -439,7 +609,6 @@ class GeoJsonEditor extends HTMLElement {
     let isRendering = false;
     viewport.addEventListener('scroll', () => {
       if (isRendering) return;
-      this.scrollTop = viewport.scrollTop;
       this.syncGutterScroll();
       
       // Use requestAnimationFrame to batch scroll updates
@@ -453,8 +622,21 @@ class GeoJsonEditor extends HTMLElement {
       }
     });
 
+    // Composition handling for international keyboards (dead keys)
+    hiddenTextarea.addEventListener('compositionstart', () => {
+      this._isComposing = true;
+    });
+
+    hiddenTextarea.addEventListener('compositionend', () => {
+      this._isComposing = false;
+      // Process the final composed text
+      this.handleInput();
+    });
+
     // Input handling (hidden textarea)
     hiddenTextarea.addEventListener('input', () => {
+      // Skip input during composition (dead keys on international keyboards)
+      if (this._isComposing) return;
       this.handleInput();
     });
 
@@ -508,6 +690,11 @@ class GeoJsonEditor extends HTMLElement {
    * Set the editor content from a string value
    */
   setValue(value) {
+    // Save to history only if there's existing content
+    if (this.lines.length > 0) {
+      this._saveToHistory('setValue');
+    }
+
     if (!value || !value.trim()) {
       this.lines = [];
     } else {
@@ -524,7 +711,7 @@ class GeoJsonEditor extends HTMLElement {
         this.lines = value.split('\n');
       }
     }
-    
+
     // Clear state for new content
     this.collapsedNodes.clear();
     this.hiddenFeatures.clear();
@@ -559,9 +746,12 @@ class GeoJsonEditor extends HTMLElement {
    * Rebuilds line-to-nodeId mapping while preserving collapsed state
    */
   updateModel() {
+    // Invalidate context map cache since content changed
+    this._contextMapCache = null;
+
     // Rebuild lineToNodeId mapping (may shift due to edits)
     this._rebuildNodeIdMappings();
-    
+
     this.computeFeatureRanges();
     this.computeLineMetadata();
     this.computeVisibleLines();
@@ -740,7 +930,7 @@ class GeoJsonEditor extends HTMLElement {
     }
     
     // Reset render cache to force re-render
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._lastEndIndex = -1;
     this._lastTotalLines = -1;
   }
@@ -756,11 +946,15 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   renderViewport() {
+    // Skip render if blocked (during inline control click to prevent DOM destruction)
+    if (this._blockRender) {
+      return;
+    }
     const viewport = this.shadowRoot.getElementById('viewport');
     const linesContainer = this.shadowRoot.getElementById('linesContainer');
     const scrollContent = this.shadowRoot.getElementById('scrollContent');
     const gutterContent = this.shadowRoot.getElementById('gutterContent');
-    
+
     if (!viewport || !linesContainer) return;
     
     this.viewportHeight = viewport.clientHeight;
@@ -923,7 +1117,8 @@ class GeoJsonEditor extends HTMLElement {
     if (!this._charWidth) {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
-      ctx.font = '13px monospace';
+      // Use exact same font as CSS: 'Courier New', Courier, monospace at 13px
+      ctx.font = "13px 'Courier New', Courier, monospace";
       this._charWidth = ctx.measureText('M').width;
     }
     return this._charWidth;
@@ -1068,106 +1263,25 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   handleKeydown(e) {
-    // Check if cursor is in a collapsed zone
-    const inCollapsedZone = this._getCollapsedRangeForLine(this.cursorLine);
-    const onCollapsedNode = this._getCollapsedNodeAtLine(this.cursorLine);
-    const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
-    
+    // Build context for collapsed zone detection
+    const ctx = {
+      inCollapsedZone: this._getCollapsedRangeForLine(this.cursorLine),
+      onCollapsedNode: this._getCollapsedNodeAtLine(this.cursorLine),
+      onClosingLine: this._getCollapsedClosingLine(this.cursorLine)
+    };
+
     switch (e.key) {
       case 'Enter':
         e.preventDefault();
-        // Block in collapsed zones
-        if (onCollapsedNode || inCollapsedZone) return;
-        // On closing line, before bracket -> block
-        if (onClosingLine) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = this._getClosingBracketPos(line);
-          if (bracketPos >= 0 && this.cursorColumn <= bracketPos) {
-            return;
-          }
-          // After bracket, allow normal enter (add new line)
-        }
-        this.insertNewline();
+        this._handleEnter(ctx);
         break;
       case 'Backspace':
         e.preventDefault();
-        // Delete selection if any
-        if (this._hasSelection()) {
-          this._deleteSelection();
-          this.formatAndUpdate();
-          return;
-        }
-        // On closing line
-        if (onClosingLine) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = this._getClosingBracketPos(line);
-          if (bracketPos >= 0 && this.cursorColumn > bracketPos + 1) {
-            // After bracket, allow delete
-            this.deleteBackward();
-            return;
-          } else if (this.cursorColumn === bracketPos + 1) {
-            // Just after bracket, delete whole node
-            this._deleteCollapsedNode(onClosingLine);
-            return;
-          }
-          // On or before bracket, delete whole node
-          this._deleteCollapsedNode(onClosingLine);
-          return;
-        }
-        // If on collapsed node opening line at position 0, delete whole node
-        if (onCollapsedNode && this.cursorColumn === 0) {
-          this._deleteCollapsedNode(onCollapsedNode);
-          return;
-        }
-        // Block inside collapsed zones
-        if (inCollapsedZone) return;
-        // On opening line, allow editing before and at bracket
-        if (onCollapsedNode) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = line.search(/[{\[]/);
-          if (this.cursorColumn > bracketPos + 1) {
-            // After bracket, delete whole node
-            this._deleteCollapsedNode(onCollapsedNode);
-            return;
-          }
-        }
-        this.deleteBackward();
+        this._handleBackspace(ctx);
         break;
       case 'Delete':
         e.preventDefault();
-        // Delete selection if any
-        if (this._hasSelection()) {
-          this._deleteSelection();
-          this.formatAndUpdate();
-          return;
-        }
-        // On closing line
-        if (onClosingLine) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = this._getClosingBracketPos(line);
-          if (bracketPos >= 0 && this.cursorColumn > bracketPos) {
-            // After bracket, allow delete
-            this.deleteForward();
-            return;
-          }
-          // On or before bracket, delete whole node
-          this._deleteCollapsedNode(onClosingLine);
-          return;
-        }
-        // If on collapsed node opening line
-        if (onCollapsedNode) {
-          const line = this.lines[this.cursorLine];
-          const bracketPos = line.search(/[{\[]/);
-          if (this.cursorColumn > bracketPos) {
-            // After bracket, delete whole node
-            this._deleteCollapsedNode(onCollapsedNode);
-            return;
-          }
-          // Before bracket, allow editing key name
-        }
-        // Block inside collapsed zones
-        if (inCollapsedZone) return;
-        this.deleteForward();
+        this._handleDelete(ctx);
         break;
       case 'ArrowUp':
         e.preventDefault();
@@ -1187,64 +1301,169 @@ class GeoJsonEditor extends HTMLElement {
         break;
       case 'Home':
         e.preventDefault();
-        this._handleHomeEnd('home', e.shiftKey, onClosingLine);
+        this._handleHomeEnd('home', e.shiftKey, ctx.onClosingLine);
         break;
       case 'End':
         e.preventDefault();
-        this._handleHomeEnd('end', e.shiftKey, onClosingLine);
+        this._handleHomeEnd('end', e.shiftKey, ctx.onClosingLine);
         break;
       case 'a':
-        // Ctrl+A or Cmd+A: select all
         if (e.ctrlKey || e.metaKey) {
           e.preventDefault();
           this._selectAll();
-          return;
         }
         break;
-      case 'Tab':
-        e.preventDefault();
-        
-        // Shift+Tab: collapse the containing expanded node
-        if (e.shiftKey) {
-          const containingNode = this._getContainingExpandedNode(this.cursorLine);
-          if (containingNode) {
-            // Find the position just after the opening bracket
-            const startLine = this.lines[containingNode.startLine];
-            const bracketPos = startLine.search(/[{\[]/);
-            
-            this.toggleCollapse(containingNode.nodeId);
-            
-            // Move cursor to just after the opening bracket
-            this.cursorLine = containingNode.startLine;
-            this.cursorColumn = bracketPos >= 0 ? bracketPos + 1 : startLine.length;
-            this._clearSelection();
-            this._scrollToCursor();
+      case 'z':
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          if (e.shiftKey) {
+            this.redo();
+          } else {
+            this.undo();
           }
-          return;
         }
-        
-        // Tab: expand collapsed node if on one
-        if (onCollapsedNode) {
-          this.toggleCollapse(onCollapsedNode.nodeId);
-          return;
+        break;
+      case 'y':
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          this.redo();
         }
-        if (onClosingLine) {
-          this.toggleCollapse(onClosingLine.nodeId);
-          return;
+        break;
+      case 's':
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          this.save();
+        }
+        break;
+      case 'o':
+        if ((e.ctrlKey || e.metaKey) && !this.hasAttribute('readonly')) {
+          e.preventDefault();
+          this.open();
         }
-        
-        // Block in hidden collapsed zones
-        if (inCollapsedZone) return;
         break;
+      case 'Tab':
+        e.preventDefault();
+        this._handleTab(e.shiftKey, ctx);
+        break;
+    }
+  }
+
+  _handleEnter(ctx) {
+    // Block in collapsed zones
+    if (ctx.onCollapsedNode || ctx.inCollapsedZone) return;
+    // On closing line, before bracket -> block
+    if (ctx.onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (bracketPos >= 0 && this.cursorColumn <= bracketPos) {
+        return;
+      }
+    }
+    this.insertNewline();
+  }
+
+  _handleBackspace(ctx) {
+    // Delete selection if any
+    if (this._hasSelection()) {
+      this._deleteSelection();
+      this.formatAndUpdate();
+      return;
+    }
+    // On closing line
+    if (ctx.onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (bracketPos >= 0 && this.cursorColumn > bracketPos + 1) {
+        this.deleteBackward();
+        return;
+      }
+      this._deleteCollapsedNode(ctx.onClosingLine);
+      return;
+    }
+    // If on collapsed node opening line at position 0, delete whole node
+    if (ctx.onCollapsedNode && this.cursorColumn === 0) {
+      this._deleteCollapsedNode(ctx.onCollapsedNode);
+      return;
+    }
+    // Block inside collapsed zones
+    if (ctx.inCollapsedZone) return;
+    // On opening line, allow editing before bracket
+    if (ctx.onCollapsedNode) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos + 1) {
+        this._deleteCollapsedNode(ctx.onCollapsedNode);
+        return;
+      }
+    }
+    this.deleteBackward();
+  }
+
+  _handleDelete(ctx) {
+    // Delete selection if any
+    if (this._hasSelection()) {
+      this._deleteSelection();
+      this.formatAndUpdate();
+      return;
+    }
+    // On closing line
+    if (ctx.onClosingLine) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = this._getClosingBracketPos(line);
+      if (bracketPos >= 0 && this.cursorColumn > bracketPos) {
+        this.deleteForward();
+        return;
+      }
+      this._deleteCollapsedNode(ctx.onClosingLine);
+      return;
+    }
+    // If on collapsed node opening line
+    if (ctx.onCollapsedNode) {
+      const line = this.lines[this.cursorLine];
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos) {
+        this._deleteCollapsedNode(ctx.onCollapsedNode);
+        return;
+      }
+    }
+    // Block inside collapsed zones
+    if (ctx.inCollapsedZone) return;
+    this.deleteForward();
+  }
+
+  _handleTab(isShiftKey, ctx) {
+    // Shift+Tab: collapse the containing expanded node
+    if (isShiftKey) {
+      const containingNode = this._getContainingExpandedNode(this.cursorLine);
+      if (containingNode) {
+        const startLine = this.lines[containingNode.startLine];
+        const bracketPos = startLine.search(/[{\[]/);
+        this.toggleCollapse(containingNode.nodeId);
+        this.cursorLine = containingNode.startLine;
+        this.cursorColumn = bracketPos >= 0 ? bracketPos + 1 : startLine.length;
+        this._clearSelection();
+        this._scrollToCursor();
+      }
+      return;
+    }
+    // Tab: expand collapsed node if on one
+    if (ctx.onCollapsedNode) {
+      this.toggleCollapse(ctx.onCollapsedNode.nodeId);
+      return;
+    }
+    if (ctx.onClosingLine) {
+      this.toggleCollapse(ctx.onClosingLine.nodeId);
     }
   }
 
   insertNewline() {
+    this._saveToHistory('newline');
+
     if (this.cursorLine < this.lines.length) {
       const line = this.lines[this.cursorLine];
       const before = line.substring(0, this.cursorColumn);
       const after = line.substring(this.cursorColumn);
-      
+
       this.lines[this.cursorLine] = before;
       this.lines.splice(this.cursorLine + 1, 0, after);
       this.cursorLine++;
@@ -1254,11 +1473,13 @@ class GeoJsonEditor extends HTMLElement {
       this.cursorLine = this.lines.length - 1;
       this.cursorColumn = 0;
     }
-    
+
     this.formatAndUpdate();
   }
 
   deleteBackward() {
+    this._saveToHistory('delete');
+
     if (this.cursorColumn > 0) {
       const line = this.lines[this.cursorLine];
       this.lines[this.cursorLine] = line.substring(0, this.cursorColumn - 1) + line.substring(this.cursorColumn);
@@ -1272,11 +1493,13 @@ class GeoJsonEditor extends HTMLElement {
       this.lines.splice(this.cursorLine, 1);
       this.cursorLine--;
     }
-    
+
     this.formatAndUpdate();
   }
 
   deleteForward() {
+    this._saveToHistory('delete');
+
     if (this.cursorLine < this.lines.length) {
       const line = this.lines[this.cursorLine];
       if (this.cursorColumn < line.length) {
@@ -1287,7 +1510,7 @@ class GeoJsonEditor extends HTMLElement {
         this.lines.splice(this.cursorLine + 1, 1);
       }
     }
-    
+
     this.formatAndUpdate();
   }
 
@@ -1317,7 +1540,7 @@ class GeoJsonEditor extends HTMLElement {
     const maxCol = this.lines[this.cursorLine]?.length || 0;
     this.cursorColumn = Math.min(this.cursorColumn, maxCol);
     
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
   }
@@ -1326,124 +1549,103 @@ class GeoJsonEditor extends HTMLElement {
    * Move cursor horizontally with smart navigation around collapsed nodes
    */
   moveCursorHorizontal(delta) {
+    if (delta > 0) {
+      this._moveCursorRight();
+    } else {
+      this._moveCursorLeft();
+    }
+    this._invalidateRenderCache();
+    this._scrollToCursor();
+    this.scheduleRender();
+  }
+
+  _moveCursorRight() {
     const line = this.lines[this.cursorLine];
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
-    
-    if (delta > 0) {
-      // Moving right
-      if (onClosingLine) {
-        const bracketPos = this._getClosingBracketPos(line);
-        if (this.cursorColumn < bracketPos) {
-          // Before bracket, jump to bracket
-          this.cursorColumn = bracketPos;
-        } else if (this.cursorColumn >= line.length) {
-          // At end, go to next line
-          if (this.cursorLine < this.lines.length - 1) {
-            this.cursorLine++;
-            this.cursorColumn = 0;
-          }
-        } else {
-          // On or after bracket, move normally
-          this.cursorColumn++;
-        }
-      } else if (onCollapsed) {
-        const bracketPos = line.search(/[{\[]/);
-        if (this.cursorColumn < bracketPos) {
-          // Before bracket, move normally
-          this.cursorColumn++;
-        } else if (this.cursorColumn === bracketPos) {
-          // On bracket, go to after bracket
-          this.cursorColumn = bracketPos + 1;
-        } else {
-          // After bracket, jump to closing line at bracket
-          this.cursorLine = onCollapsed.endLine;
-          const closingLine = this.lines[this.cursorLine];
-          this.cursorColumn = this._getClosingBracketPos(closingLine);
-        }
+
+    if (onClosingLine) {
+      const bracketPos = this._getClosingBracketPos(line);
+      if (this.cursorColumn < bracketPos) {
+        this.cursorColumn = bracketPos;
       } else if (this.cursorColumn >= line.length) {
-        // Move to next line
         if (this.cursorLine < this.lines.length - 1) {
           this.cursorLine++;
           this.cursorColumn = 0;
-          // Skip hidden collapsed zones
-          const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
-          if (collapsed) {
-            this.cursorLine = collapsed.endLine;
-            this.cursorColumn = 0;
-          }
         }
       } else {
         this.cursorColumn++;
       }
-    } else {
-      // Moving left
-      if (onClosingLine) {
-        const bracketPos = this._getClosingBracketPos(line);
-        if (this.cursorColumn > bracketPos + 1) {
-          // After bracket, move normally
-          this.cursorColumn--;
-        } else if (this.cursorColumn === bracketPos + 1) {
-          // Just after bracket, jump to opening line after bracket
-          this.cursorLine = onClosingLine.startLine;
-          const openLine = this.lines[this.cursorLine];
-          const openBracketPos = openLine.search(/[{\[]/);
-          this.cursorColumn = openBracketPos + 1;
-        } else {
-          // On bracket, jump to opening line after bracket
-          this.cursorLine = onClosingLine.startLine;
-          const openLine = this.lines[this.cursorLine];
-          const openBracketPos = openLine.search(/[{\[]/);
-          this.cursorColumn = openBracketPos + 1;
-        }
-      } else if (onCollapsed) {
-        const bracketPos = line.search(/[{\[]/);
-        if (this.cursorColumn > bracketPos + 1) {
-          // After bracket, go to just after bracket
-          this.cursorColumn = bracketPos + 1;
-        } else if (this.cursorColumn === bracketPos + 1) {
-          // Just after bracket, go to bracket
-          this.cursorColumn = bracketPos;
-        } else if (this.cursorColumn > 0) {
-          // Before bracket, move normally
-          this.cursorColumn--;
-        } else {
-          // At start, go to previous line
-          if (this.cursorLine > 0) {
-            this.cursorLine--;
-            this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
-          }
+    } else if (onCollapsed) {
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn < bracketPos) {
+        this.cursorColumn++;
+      } else if (this.cursorColumn === bracketPos) {
+        this.cursorColumn = bracketPos + 1;
+      } else {
+        this.cursorLine = onCollapsed.endLine;
+        this.cursorColumn = this._getClosingBracketPos(this.lines[this.cursorLine]);
+      }
+    } else if (this.cursorColumn >= line.length) {
+      if (this.cursorLine < this.lines.length - 1) {
+        this.cursorLine++;
+        this.cursorColumn = 0;
+        const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
+        if (collapsed) {
+          this.cursorLine = collapsed.endLine;
+          this.cursorColumn = 0;
         }
+      }
+    } else {
+      this.cursorColumn++;
+    }
+  }
+
+  _moveCursorLeft() {
+    const line = this.lines[this.cursorLine];
+    const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
+    const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
+
+    if (onClosingLine) {
+      const bracketPos = this._getClosingBracketPos(line);
+      if (this.cursorColumn > bracketPos + 1) {
+        this.cursorColumn--;
+      } else {
+        // Jump to opening line after bracket
+        this.cursorLine = onClosingLine.startLine;
+        const openLine = this.lines[this.cursorLine];
+        this.cursorColumn = openLine.search(/[{\[]/) + 1;
+      }
+    } else if (onCollapsed) {
+      const bracketPos = line.search(/[{\[]/);
+      if (this.cursorColumn > bracketPos + 1) {
+        this.cursorColumn = bracketPos + 1;
+      } else if (this.cursorColumn === bracketPos + 1) {
+        this.cursorColumn = bracketPos;
       } else if (this.cursorColumn > 0) {
         this.cursorColumn--;
       } else if (this.cursorLine > 0) {
-        // Move to previous line
         this.cursorLine--;
-        
-        // Check if previous line is closing line of collapsed
-        const closing = this._getCollapsedClosingLine(this.cursorLine);
-        if (closing) {
-          // Go to end of closing line
-          this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+        this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+      }
+    } else if (this.cursorColumn > 0) {
+      this.cursorColumn--;
+    } else if (this.cursorLine > 0) {
+      this.cursorLine--;
+      const closing = this._getCollapsedClosingLine(this.cursorLine);
+      if (closing) {
+        this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
+      } else {
+        const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
+        if (collapsed) {
+          this.cursorLine = collapsed.startLine;
+          const openLine = this.lines[this.cursorLine];
+          this.cursorColumn = openLine.search(/[{\[]/) + 1;
         } else {
-          // Check if previous line is inside collapsed zone
-          const collapsed = this._getCollapsedRangeForLine(this.cursorLine);
-          if (collapsed) {
-            // Jump to opening line after bracket
-            this.cursorLine = collapsed.startLine;
-            const openLine = this.lines[this.cursorLine];
-            const bracketPos = openLine.search(/[{\[]/);
-            this.cursorColumn = bracketPos + 1;
-          } else {
-            this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
-          }
+          this.cursorColumn = this.lines[this.cursorLine]?.length || 0;
         }
       }
     }
-    
-    this._lastStartIndex = -1;
-    this._scrollToCursor();
-    this.scheduleRender();
   }
 
   /**
@@ -1471,17 +1673,6 @@ class GeoJsonEditor extends HTMLElement {
     }
   }
 
-  /**
-   * Legacy moveCursor for compatibility
-   */
-  moveCursor(deltaLine, deltaCol) {
-    if (deltaLine !== 0) {
-      this.moveCursorSkipCollapsed(deltaLine);
-    } else if (deltaCol !== 0) {
-      this.moveCursorHorizontal(deltaCol);
-    }
-  }
-
   /**
    * Handle arrow key with optional selection
    */
@@ -1536,7 +1727,7 @@ class GeoJsonEditor extends HTMLElement {
       this.selectionEnd = null;
     }
     
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
   }
@@ -1551,7 +1742,7 @@ class GeoJsonEditor extends HTMLElement {
     this.cursorLine = lastLine;
     this.cursorColumn = this.lines[lastLine]?.length || 0;
     
-    this._lastStartIndex = -1;
+    this._invalidateRenderCache();
     this._scrollToCursor();
     this.scheduleRender();
   }
@@ -1618,9 +1809,11 @@ class GeoJsonEditor extends HTMLElement {
    */
   _deleteSelection() {
     if (!this._hasSelection()) return false;
-    
+
+    this._saveToHistory('delete');
+
     const { start, end } = this._normalizeSelection();
-    
+
     if (start.line === end.line) {
       // Single line selection
       const line = this.lines[start.line];
@@ -1632,12 +1825,12 @@ class GeoJsonEditor extends HTMLElement {
       this.lines[start.line] = startLine + endLine;
       this.lines.splice(start.line + 1, end.line - start.line);
     }
-    
+
     this.cursorLine = start.line;
     this.cursorColumn = start.column;
     this.selectionStart = null;
     this.selectionEnd = null;
-    
+
     return true;
   }
 
@@ -1646,10 +1839,10 @@ class GeoJsonEditor extends HTMLElement {
     if (this._hasSelection()) {
       this._deleteSelection();
     }
-    
+
     // Block insertion in hidden collapsed zones
     if (this._getCollapsedRangeForLine(this.cursorLine)) return;
-    
+
     // On closing line, only allow after bracket
     const onClosingLine = this._getCollapsedClosingLine(this.cursorLine);
     if (onClosingLine) {
@@ -1657,7 +1850,7 @@ class GeoJsonEditor extends HTMLElement {
       const bracketPos = this._getClosingBracketPos(line);
       if (this.cursorColumn <= bracketPos) return;
     }
-    
+
     // On collapsed opening line, only allow before bracket
     const onCollapsed = this._getCollapsedNodeAtLine(this.cursorLine);
     if (onCollapsed) {
@@ -1665,11 +1858,17 @@ class GeoJsonEditor extends HTMLElement {
       const bracketPos = line.search(/[{\[]/);
       if (this.cursorColumn > bracketPos) return;
     }
-    
+
+    // Save to history before making changes
+    this._saveToHistory('insert');
+
     // Handle empty editor case
     if (this.lines.length === 0) {
-      this.lines = [text];
-      this.cursorColumn = text.length;
+      // Split text by newlines to properly handle multi-line paste
+      const textLines = text.split('\n');
+      this.lines = textLines;
+      this.cursorLine = textLines.length - 1;
+      this.cursorColumn = textLines[textLines.length - 1].length;
     } else if (this.cursorLine < this.lines.length) {
       const line = this.lines[this.cursorLine];
       this.lines[this.cursorLine] = line.substring(0, this.cursorColumn) + text + line.substring(this.cursorColumn);
@@ -1682,11 +1881,17 @@ class GeoJsonEditor extends HTMLElement {
     e.preventDefault();
     const text = e.clipboardData.getData('text/plain');
     if (text) {
+      const wasEmpty = this.lines.length === 0;
       this.insertText(text);
-      // Auto-collapse coordinates after pasting new content
-      requestAnimationFrame(() => {
+      // 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 = null;
+        }
         this.autoCollapseCoordinates();
-      });
+      }
     }
   }
 
@@ -1704,11 +1909,13 @@ class GeoJsonEditor extends HTMLElement {
     e.preventDefault();
     if (this._hasSelection()) {
       e.clipboardData.setData('text/plain', this._getSelectedText());
+      this._saveToHistory('cut');
       this._deleteSelection();
       this.formatAndUpdate();
     } else {
       // Cut all content
       e.clipboardData.setData('text/plain', this.getContent());
+      this._saveToHistory('cut');
       this.lines = [];
       this.cursorLine = 0;
       this.cursorColumn = 0;
@@ -1721,29 +1928,42 @@ class GeoJsonEditor extends HTMLElement {
    */
   _getPositionFromClick(e) {
     const viewport = this.shadowRoot.getElementById('viewport');
+    const linesContainer = this.shadowRoot.getElementById('linesContainer');
     const rect = viewport.getBoundingClientRect();
-    
+
     const paddingTop = 8;
-    const paddingLeft = 12;
-    
+
     const y = e.clientY - rect.top + viewport.scrollTop - paddingTop;
-    const x = e.clientX - rect.left - paddingLeft;
-    
     const visibleLineIndex = Math.floor(y / this.lineHeight);
-    
+
     let line = 0;
     let column = 0;
-    
+
     if (visibleLineIndex >= 0 && visibleLineIndex < this.visibleLines.length) {
       const lineData = this.visibleLines[visibleLineIndex];
       line = lineData.index;
-      
+
+      // Get actual line element to calculate column position accurately
+      const lineEl = linesContainer?.querySelector(`.line[data-line-index="${lineData.index}"]`);
       const charWidth = this._getCharWidth();
-      const rawColumn = Math.round(x / charWidth);
-      const lineLength = lineData.content?.length || 0;
-      column = Math.max(0, Math.min(rawColumn, lineLength));
+
+      if (lineEl) {
+        // Use line element's actual position for accurate column calculation
+        const lineRect = lineEl.getBoundingClientRect();
+        const clickRelativeToLine = e.clientX - lineRect.left;
+        const rawColumn = Math.round(clickRelativeToLine / charWidth);
+        const lineLength = lineData.content?.length || 0;
+        column = Math.max(0, Math.min(rawColumn, lineLength));
+      } else {
+        // Fallback to padding-based calculation if line element not found
+        const paddingLeft = 12;
+        const x = e.clientX - rect.left + viewport.scrollLeft - paddingLeft;
+        const rawColumn = Math.round(x / charWidth);
+        const lineLength = lineData.content?.length || 0;
+        column = Math.max(0, Math.min(rawColumn, lineLength));
+      }
     }
-    
+
     return { line, column };
   }
 
@@ -1766,16 +1986,21 @@ class GeoJsonEditor extends HTMLElement {
   }
   
   handleEditorClick(e) {
+    // Unblock render now that click is being processed
+    this._blockRender = false;
+
     // Line-level visibility button (pseudo-element ::before on .line.has-visibility)
     const lineEl = e.target.closest('.line.has-visibility');
     if (lineEl) {
       const rect = lineEl.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
-      // Pseudo-element is at the start of the line, check first ~14px
       if (clickX < 14) {
         e.preventDefault();
         e.stopPropagation();
-        this.toggleFeatureVisibility(lineEl.dataset.featureKey);
+        const featureKey = lineEl.dataset.featureKey;
+        if (featureKey) {
+          this.toggleFeatureVisibility(featureKey);
+        }
         return;
       }
     }
@@ -1836,33 +2061,34 @@ class GeoJsonEditor extends HTMLElement {
     
     // Use updateView - don't rebuild nodeId mappings since content didn't change
     this.updateView();
-    this._lastStartIndex = -1; // Force re-render
+    this._invalidateRenderCache(); // Force re-render
     this.scheduleRender();
   }
 
   autoCollapseCoordinates() {
     const ranges = this._findCollapsibleRanges();
-    
+
     for (const range of ranges) {
       if (range.nodeKey === 'coordinates') {
         this.collapsedNodes.add(range.nodeId);
       }
     }
-    
-    // Use updateView since nodeIds were just assigned by updateModel/setValue
-    this.updateView();
+
+    // Rebuild everything to ensure consistent state after collapse changes
+    // This is especially important after paste into empty editor
+    this.updateModel();
     this.scheduleRender();
   }
 
   // ========== Feature Visibility ==========
-  
+
   toggleFeatureVisibility(featureKey) {
     if (this.hiddenFeatures.has(featureKey)) {
       this.hiddenFeatures.delete(featureKey);
     } else {
       this.hiddenFeatures.add(featureKey);
     }
-    
+
     // Use updateView - content didn't change, just visibility
     this.updateView();
     this.scheduleRender();
@@ -2216,173 +2442,164 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   _buildContextMap() {
+    // Memoization: return cached result if content hasn't changed
+    const linesLength = this.lines.length;
+    if (this._contextMapCache &&
+        this._contextMapLinesLength === linesLength &&
+        this._contextMapFirstLine === this.lines[0] &&
+        this._contextMapLastLine === this.lines[linesLength - 1]) {
+      return this._contextMapCache;
+    }
+
     const contextMap = new Map();
     const contextStack = [];
     let pendingContext = null;
-    
-    for (let i = 0; i < this.lines.length; i++) {
+
+    for (let i = 0; i < linesLength; i++) {
       const line = this.lines[i];
       const currentContext = contextStack[contextStack.length - 1]?.context || 'Feature';
       contextMap.set(i, currentContext);
-      
+
       // Check for context-changing keys
-      if (/"geometry"\s*:/.test(line)) pendingContext = 'geometry';
-      else if (/"properties"\s*:/.test(line)) pendingContext = 'properties';
-      else if (/"features"\s*:/.test(line)) pendingContext = 'Feature';
-      
+      if (RE_CONTEXT_GEOMETRY.test(line)) pendingContext = 'geometry';
+      else if (RE_CONTEXT_PROPERTIES.test(line)) pendingContext = 'properties';
+      else if (RE_CONTEXT_FEATURES.test(line)) pendingContext = 'Feature';
+
       // Track brackets
       const openBraces = (line.match(/\{/g) || []).length;
       const closeBraces = (line.match(/\}/g) || []).length;
       const openBrackets = (line.match(/\[/g) || []).length;
       const closeBrackets = (line.match(/\]/g) || []).length;
-      
+
       for (let j = 0; j < openBraces + openBrackets; j++) {
         contextStack.push({ context: pendingContext || currentContext, isArray: j >= openBraces });
         pendingContext = null;
       }
-      
+
       for (let j = 0; j < closeBraces + closeBrackets && contextStack.length > 0; j++) {
         contextStack.pop();
       }
     }
-    
+
+    // Cache the result
+    this._contextMapCache = contextMap;
+    this._contextMapLinesLength = linesLength;
+    this._contextMapFirstLine = this.lines[0];
+    this._contextMapLastLine = this.lines[linesLength - 1];
+
     return contextMap;
   }
 
   _highlightSyntax(text, context, meta) {
     if (!text) return '';
-    
+
     // For collapsed nodes, truncate the text at the opening bracket
     let displayText = text;
     let collapsedBracket = null;
-    
+
     if (meta?.collapseButton?.isCollapsed) {
       // Match "key": { or "key": [
-      const bracketMatch = text.match(/^(\s*"[^"]+"\s*:\s*)([{\[])/);
+      const bracketMatch = text.match(RE_COLLAPSED_BRACKET);
       // Also match standalone { or [ (root Feature objects)
-      const rootMatch = !bracketMatch && text.match(/^(\s*)([{\[]),?\s*$/);
-      
+      const rootMatch = !bracketMatch && text.match(RE_COLLAPSED_ROOT);
+
       if (bracketMatch) {
-        // Keep only the part up to and including the opening bracket
         displayText = bracketMatch[1] + bracketMatch[2];
         collapsedBracket = bracketMatch[2];
       } else if (rootMatch) {
-        // Root object - just keep the bracket
         displayText = rootMatch[1] + rootMatch[2];
         collapsedBracket = rootMatch[2];
       }
     }
-    
+
     // Escape HTML first
     let result = displayText
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
-    
+      .replace(RE_ESCAPE_AMP, '&amp;')
+      .replace(RE_ESCAPE_LT, '&lt;')
+      .replace(RE_ESCAPE_GT, '&gt;');
+
     // Punctuation FIRST (before other replacements can interfere)
-    result = result.replace(/([{}[\],:])/g, '<span class="json-punctuation">$1</span>');
-    
+    result = result.replace(RE_PUNCTUATION, '<span class="json-punctuation">$1</span>');
+
     // JSON keys - match "key" followed by :
     // In properties context, all keys are treated as regular JSON keys
-    result = result.replace(/"([^"]+)"(<span class="json-punctuation">:<\/span>)/g, (match, key, colon) => {
+    RE_JSON_KEYS.lastIndex = 0;
+    result = result.replace(RE_JSON_KEYS, (match, key, colon) => {
       if (context !== 'properties' && GEOJSON_KEYS.includes(key)) {
         return `<span class="geojson-key">"${key}"</span>${colon}`;
       }
       return `<span class="json-key">"${key}"</span>${colon}`;
     });
-    
+
     // Type values - "type": "Value" - but NOT inside properties context
     if (context !== 'properties') {
-      result = result.replace(
-        /<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>\s*"([^"]*)"/g, 
-        (match, type) => {
-          const isValid = type === 'Feature' || type === 'FeatureCollection' || GEOMETRY_TYPES.includes(type);
-          const cls = isValid ? 'geojson-type' : 'geojson-type-invalid';
-          return `<span class="geojson-key">"type"</span><span class="json-punctuation">:</span> <span class="${cls}">"${type}"</span>`;
-        }
-      );
+      RE_TYPE_VALUES.lastIndex = 0;
+      result = result.replace(RE_TYPE_VALUES, (match, space, type) => {
+        const isValid = type === 'Feature' || type === 'FeatureCollection' || GEOMETRY_TYPES.includes(type);
+        const cls = isValid ? 'geojson-type' : 'geojson-type-invalid';
+        return `<span class="geojson-key">"type"</span><span class="json-punctuation">:</span>${space}<span class="${cls}">"${type}"</span>`;
+      });
     }
-    
+
     // String values (not already wrapped in spans)
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)\s*"([^"]*)"/g, 
-      (match, colon, val) => {
-        // Don't double-wrap if already has a span after colon
-        if (match.includes('geojson-type') || match.includes('json-string')) return match;
-        
-        // Check if it's a color value (hex) - use ::before for swatch via CSS class
-        if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val)) {
-          return `${colon} <span class="json-string json-color" data-color="${val}" style="--swatch-color: ${val}">"${val}"</span>`;
-        }
-        
-        return `${colon} <span class="json-string">"${val}"</span>`;
+    RE_STRING_VALUES.lastIndex = 0;
+    result = result.replace(RE_STRING_VALUES, (match, colon, space, val) => {
+      if (match.includes('geojson-type') || match.includes('json-string')) return match;
+      if (RE_COLOR_HEX.test(val)) {
+        return `${colon}${space}<span class="json-string json-color" data-color="${val}" style="--swatch-color: ${val}">"${val}"</span>`;
       }
-    );
-    
+      return `${colon}${space}<span class="json-string">"${val}"</span>`;
+    });
+
     // Numbers after colon
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, 
-      '$1 <span class="json-number">$2</span>'
-    );
-    
+    RE_NUMBERS_COLON.lastIndex = 0;
+    result = result.replace(RE_NUMBERS_COLON, '$1$2<span class="json-number">$3</span>');
+
     // Numbers in arrays (after [ or ,)
-    result = result.replace(
-      /(<span class="json-punctuation">[\[,]<\/span>)\s*(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi, 
-      '$1<span class="json-number">$2</span>'
-    );
-    
+    RE_NUMBERS_ARRAY.lastIndex = 0;
+    result = result.replace(RE_NUMBERS_ARRAY, '$1$2<span class="json-number">$3</span>');
+
     // Standalone numbers at start of line (coordinates arrays)
-    result = result.replace(
-      /^(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gim,
-      '$1<span class="json-number">$2</span>'
-    );
-    
+    RE_NUMBERS_START.lastIndex = 0;
+    result = result.replace(RE_NUMBERS_START, '$1<span class="json-number">$2</span>');
+
     // Booleans - use ::before for checkbox via CSS class
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)\s*(true|false)/g, 
-      (match, colon, val) => {
-        const checkedClass = val === 'true' ? ' json-bool-true' : ' json-bool-false';
-        return `${colon} <span class="json-boolean${checkedClass}">${val}</span>`;
-      }
-    );
-    
+    RE_BOOLEANS.lastIndex = 0;
+    result = result.replace(RE_BOOLEANS, (match, colon, space, val) => {
+      const checkedClass = val === 'true' ? ' json-bool-true' : ' json-bool-false';
+      return `${colon}${space}<span class="json-boolean${checkedClass}">${val}</span>`;
+    });
+
     // Null
-    result = result.replace(
-      /(<span class="json-punctuation">:<\/span>)\s*(null)/g, 
-      '$1 <span class="json-null">$2</span>'
-    );
-    
-    // Collapsed bracket indicator - just add the class, CSS ::after adds the "...]" or "...}"
+    RE_NULL.lastIndex = 0;
+    result = result.replace(RE_NULL, '$1$2<span class="json-null">$3</span>');
+
+    // Collapsed bracket indicator
     if (collapsedBracket) {
       const bracketClass = collapsedBracket === '[' ? 'collapsed-bracket-array' : 'collapsed-bracket-object';
-      // Replace the last punctuation span (the opening bracket) with collapsed style class
       result = result.replace(
         new RegExp(`<span class="json-punctuation">\\${collapsedBracket}<\\/span>$`),
         `<span class="${bracketClass}">${collapsedBracket}</span>`
       );
     }
-    
-    // Mark unrecognized text as error - text that's not inside a span and not just whitespace
-    // This catches invalid JSON like unquoted strings, malformed values, etc.
-    result = result.replace(
-      /(<\/span>|^)([^<]+)(<span|$)/g,
-      (match, before, text, after) => {
-        // Skip if text is only whitespace or empty
-        if (!text || /^\s*$/.test(text)) return match;
-        // Check for unrecognized words/tokens (not whitespace, not just spaces/commas)
-        // Keep whitespace as-is, wrap any non-whitespace unrecognized token
-        const parts = text.split(/(\s+)/);
-        let hasError = false;
-        const processed = parts.map(part => {
-          // If it's whitespace, keep it
-          if (/^\s*$/.test(part)) return part;
-          // Mark as error
-          hasError = true;
-          return `<span class="json-error">${part}</span>`;
-        }).join('');
-        return hasError ? before + processed + after : match;
-      }
-    );
+
+    // Mark unrecognized text as error
+    RE_UNRECOGNIZED.lastIndex = 0;
+    result = result.replace(RE_UNRECOGNIZED, (match, before, text, after) => {
+      if (!text || RE_WHITESPACE_ONLY.test(text)) return match;
+      // Check for unrecognized words/tokens (not whitespace, not just spaces/commas)
+      // Keep whitespace as-is, wrap any non-whitespace unrecognized token
+      const parts = text.split(RE_WHITESPACE_SPLIT);
+      let hasError = false;
+      const processed = parts.map(part => {
+        // If it's whitespace, keep it
+        if (RE_WHITESPACE_ONLY.test(part)) return part;
+        // Mark as error
+        hasError = true;
+        return `<span class="json-error">${part}</span>`;
+      }).join('');
+      return hasError ? before + processed + after : match;
+    });
     
     // Note: visibility is now handled at line level (has-visibility class on .line element)
     
@@ -2441,6 +2658,9 @@ class GeoJsonEditor extends HTMLElement {
   }
 
   removeAll() {
+    if (this.lines.length > 0) {
+      this._saveToHistory('removeAll');
+    }
     const removed = this._parseFeatures();
     this.lines = [];
     this.collapsedNodes.clear();
@@ -2466,6 +2686,113 @@ class GeoJsonEditor extends HTMLElement {
     this.emitChange();
   }
 
+  /**
+   * Save GeoJSON to a file (triggers download)
+   * @param {string} filename - Optional filename (default: 'features.geojson')
+   * @returns {boolean} True if save was successful
+   */
+  save(filename = 'features.geojson') {
+    try {
+      const features = this._parseFeatures();
+      const geojson = {
+        type: 'FeatureCollection',
+        features: features
+      };
+      const json = JSON.stringify(geojson, null, 2);
+      const blob = new Blob([json], { type: 'application/geo+json' });
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * Open a GeoJSON file from the client filesystem
+   * Note: Available even in readonly mode via API (only Ctrl+O shortcut is blocked)
+   * @returns {Promise<boolean>} Promise that resolves to true if file was loaded successfully
+   */
+  open() {
+    return new Promise((resolve) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '.geojson,.json,application/geo+json,application/json';
+      input.style.display = 'none';
+
+      input.addEventListener('change', (e) => {
+        const file = e.target.files?.[0];
+        if (!file) {
+          document.body.removeChild(input);
+          resolve(false);
+          return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          try {
+            const content = event.target.result;
+            const parsed = JSON.parse(content);
+
+            // Extract features from various GeoJSON formats
+            let features = [];
+            if (parsed.type === 'FeatureCollection' && Array.isArray(parsed.features)) {
+              features = parsed.features;
+            } else if (parsed.type === 'Feature') {
+              features = [parsed];
+            } else if (Array.isArray(parsed)) {
+              features = parsed;
+            } else {
+              // Invalid GeoJSON structure
+              document.body.removeChild(input);
+              resolve(false);
+              return;
+            }
+
+            // Validate features
+            for (const feature of features) {
+              this._validateFeature(feature);
+            }
+
+            // Load features into editor
+            this._saveToHistory('open');
+            this.set(features);
+            this.clearHistory(); // Clear history after opening new file
+            document.body.removeChild(input);
+            resolve(true);
+          } catch (err) {
+            document.body.removeChild(input);
+            resolve(false);
+          }
+        };
+
+        reader.onerror = () => {
+          document.body.removeChild(input);
+          resolve(false);
+        };
+
+        reader.readAsText(file);
+      });
+
+      // Handle cancel (no file selected)
+      input.addEventListener('cancel', () => {
+        document.body.removeChild(input);
+        resolve(false);
+      });
+
+      document.body.appendChild(input);
+      input.click();
+    });
+  }
+
   _parseFeatures() {
     try {
       const content = this.lines.join('\n');