@herb-tools/dev-tools 0.7.4 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herb-tools/dev-tools",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Development tools for visual debugging in HTML+ERB templates",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,7 @@
     }
   },
   "dependencies": {
-    "@herb-tools/core": "0.7.4"
+    "@herb-tools/core": "0.8.0"
   },
   "files": [
     "package.json",

package/src/herb-overlay.ts

@@ -15,10 +15,30 @@ export class HerbOverlay {
   private showingComponentOutlines = false;
   private menuOpen = false;
   private projectPath = '';
+  private preferredEditor = 'auto';
+  private defaultEditorFromServer = 'vscode';
   private currentlyHoveredERBElement: HTMLElement | null = null;
   private errorOverlay: ErrorOverlay | null = null;
 
   private static readonly SETTINGS_KEY = 'herb-dev-tools-settings';
+  private static readonly EDITOR_OPTIONS = [
+    { value: 'auto', label: 'Auto (from server via RAILS_EDITOR or EDITOR)' },
+    { value: 'atom', label: 'Atom' },
+    { value: 'cursor', label: 'Cursor' },
+    { value: 'emacs', label: 'Emacs' },
+    { value: 'idea', label: 'IntelliJ IDEA' },
+    { value: 'macvim', label: 'MacVim' },
+    { value: 'nova', label: 'Nova' },
+    { value: 'nvim', label: 'Neovim' },
+    { value: 'rubymine', label: 'RubyMine' },
+    { value: 'sublime', label: 'Sublime Text' },
+    { value: 'textmate', label: 'TextMate' },
+    { value: 'vim', label: 'Vim' },
+    { value: 'vscode', label: 'Visual Studio Code' },
+    { value: 'vscodium', label: 'VSCodium' },
+    { value: 'windsurf', label: 'Windsurf' },
+    { value: 'zed', label: 'Zed' },
+  ];
 
   constructor(private options: HerbDevToolsOptions = {}) {
     if (options.autoInit !== false) {
@@ -28,10 +48,12 @@ export class HerbOverlay {
 
   private init() {
     this.loadProjectPath();
+    this.loadDefaultEditor();
     this.loadSettings();
     this.injectMenu();
     this.setupMenuToggle();
     this.setupToggleSwitches();
+    this.setupEditorDropdown();
     this.initializeErrorOverlay();
     this.setupTurboListeners();
     this.applySettings();
@@ -50,6 +72,19 @@ export class HerbOverlay {
     }
   }
 
+  private loadDefaultEditor() {
+    const metaTag = document.querySelector('meta[name="herb-default-editor"]') as HTMLMetaElement;
+
+    if (metaTag?.content) {
+      const defaultEditor = metaTag.content.toLowerCase();
+      const isValidEditor = HerbOverlay.EDITOR_OPTIONS.some(option => option.value === defaultEditor);
+
+      if (isValidEditor) {
+        this.defaultEditorFromServer = defaultEditor;
+      }
+    }
+  }
+
   private loadSettings() {
     const savedSettings = localStorage.getItem(HerbOverlay.SETTINGS_KEY);
     if (savedSettings) {
@@ -63,6 +98,9 @@ export class HerbOverlay {
         this.showingPartialOutlines = settings.showingPartialOutlines || false;
         this.showingComponentOutlines = settings.showingComponentOutlines || false;
         this.menuOpen = settings.menuOpen || false;
+        if (settings.preferredEditor) {
+          this.preferredEditor = settings.preferredEditor;
+        }
       } catch (e) {
         console.warn('Failed to load Herb dev tools settings:', e);
       }
@@ -78,7 +116,8 @@ export class HerbOverlay {
       showingViewOutlines: this.showingViewOutlines,
       showingPartialOutlines: this.showingPartialOutlines,
       showingComponentOutlines: this.showingComponentOutlines,
-      menuOpen: this.menuOpen
+      menuOpen: this.menuOpen,
+      preferredEditor: this.preferredEditor
     };
 
     localStorage.setItem(HerbOverlay.SETTINGS_KEY, JSON.stringify(settings));
@@ -170,6 +209,17 @@ export class HerbOverlay {
             </label>
           </div>
 
+          <div class="herb-editor-section">
+            <label class="herb-editor-label">
+              <span class="herb-editor-text">Editor</span>
+              <select id="herbEditorSelect" class="herb-editor-select">
+                ${HerbOverlay.EDITOR_OPTIONS.map(editor =>
+                  `<option value="${editor.value}">${editor.label}</option>`
+                ).join('')}
+              </select>
+            </label>
+          </div>
+
           <div class="herb-disable-all-section">
             <button id="herbDisableAll" class="herb-disable-all-btn">Disable All</button>
           </div>
@@ -247,6 +297,7 @@ export class HerbOverlay {
     this.injectMenu();
     this.setupMenuToggle();
     this.setupToggleSwitches();
+    this.setupEditorDropdown();
     this.applySettings();
     this.updateMenuButtonState();
   }
@@ -336,6 +387,32 @@ export class HerbOverlay {
     }
   }
 
+  private setupEditorDropdown() {
+    const editorSelect = document.getElementById('herbEditorSelect') as HTMLSelectElement;
+
+    if (editorSelect) {
+      const autoOption = editorSelect.querySelector('option[value="auto"]') as HTMLOptionElement;
+
+      if (autoOption) {
+        const editorLabel = HerbOverlay.EDITOR_OPTIONS.find(opt => opt.value === this.defaultEditorFromServer)?.label || this.defaultEditorFromServer;
+        const metaTag = document.querySelector('meta[name="herb-default-editor"]') as HTMLMetaElement;
+
+        if (metaTag?.content) {
+          autoOption.textContent = `Auto (from server): ${editorLabel}`;
+        } else {
+          autoOption.textContent = `Auto (default): ${editorLabel}`;
+        }
+      }
+
+      editorSelect.value = this.preferredEditor;
+
+      editorSelect.addEventListener('change', () => {
+        this.preferredEditor = editorSelect.value;
+        this.saveSettings();
+      });
+    }
+  }
+
   private toggleViewOutlines(show?: boolean) {
     this.showingViewOutlines = show !== undefined ? show : !this.showingViewOutlines;
     const viewOutlines = document.querySelectorAll('[data-herb-debug-outline-type="view"], [data-herb-debug-outline-type*="view"]');
@@ -924,21 +1001,56 @@ export class HerbOverlay {
     }
   }
 
+  private getEditorUrl(editor: string, absolutePath: string, line: number, column: number): string {
+    switch (editor) {
+      case 'cursor':
+        return `cursor://file/${absolutePath}:${line}:${column}`;
+      case 'vscode':
+        return `vscode://file/${absolutePath}:${line}:${column}`;
+      case 'vscodium':
+        return `vscodium://file/${absolutePath}:${line}:${column}`;
+      case 'zed':
+        return `zed://file/${absolutePath}:${line}:${column}`;
+      case 'windsurf':
+        return `windsurf://file/${absolutePath}:${line}:${column}`;
+      case 'sublime':
+        return `subl://open?url=file://${absolutePath}&line=${line}&column=${column}`;
+      case 'atom':
+        return `atom://core/open/file?filename=${absolutePath}&line=${line}&column=${column}`;
+      case 'textmate':
+        return `txmt://open?url=file://${absolutePath}&line=${line}&column=${column}`;
+      case 'emacs':
+        return `emacs://open?url=file://${absolutePath}&line=${line}&column=${column}`;
+      case 'idea':
+        return `idea://open?file=${absolutePath}&line=${line}&column=${column}`;
+      case 'rubymine':
+        return `x-mine://open?file=${absolutePath}&line=${line}&column=${column}`;
+      case 'nova':
+        return `nova://open?path=${absolutePath}&line=${line}&column=${column}`;
+      case 'macvim':
+        return `mvim://open?url=file://${absolutePath}&line=${line}&column=${column}`;
+      case 'vim':
+        return `vim://open?url=file://${absolutePath}&line=${line}&column=${column}`;
+      case 'nvim':
+        return `nvim://open?url=file://${absolutePath}&line=${line}&column=${column}`;
+      default:
+        return '';
+    }
+  }
+
   private openFileInEditor(file: string, line: number, column: number) {
     const absolutePath = file.startsWith('/') ? file : (this.projectPath ? `${this.projectPath}/${file}` : file);
 
-    const editors = [
-      `cursor://file/${absolutePath}:${line}:${column}`,
-      `vscode://file/${absolutePath}:${line}:${column}`,
-      `zed://file/${absolutePath}:${line}:${column}`,
-      `subl://open?url=file://${absolutePath}&line=${line}&column=${column}`,
-      `atom://core/open/file?filename=${absolutePath}&line=${line}&column=${column}`,
-      `txmt://open?url=file://${absolutePath}&line=${line}&column=${column}`,
-    ];
-
-    try {
-      window.open(editors[0], '_self');
-    } catch (error) {
+    const editorToUse = this.preferredEditor === 'auto' ? this.defaultEditorFromServer : this.preferredEditor;
+    const url = this.getEditorUrl(editorToUse, absolutePath, line, column);
+
+    if (url) {
+      try {
+        window.open(url, '_self');
+      } catch (error) {
+        console.log(`Open in editor: ${absolutePath}:${line}:${column}`);
+      }
+    } else {
       console.log(`Open in editor: ${absolutePath}:${line}:${column}`);
     }
   }

package/src/styles.css

@@ -429,6 +429,85 @@
   background: #7c3aed;
 }
 
+.herb-editor-section {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f3f4f6;
+  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.herb-editor-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
+}
+
+.herb-editor-label {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  cursor: default;
+}
+
+.herb-editor-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.herb-editor-select {
+  width: 100%;
+  padding: 10px 36px 10px 12px;
+  background: white;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: #1f2937;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  appearance: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.herb-editor-select option {
+  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px 12px;
+}
+
+.herb-editor-select:hover {
+  border-color: #8b5cf6;
+  background-color: #fafafa;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(139, 92, 246, 0.1);
+  transform: translateY(-1px);
+}
+
+.herb-editor-select:focus {
+  outline: none;
+  border-color: #8b5cf6;
+  background-color: white;
+  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 2px 8px rgba(139, 92, 246, 0.1);
+  transform: translateY(-1px);
+}
+
+.herb-editor-select:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
 .herb-disable-all-section {
   padding: 16px 20px;
   border-top: 1px solid #f3f4f6;