feat: External Editor Integration

[pratikb64]

Summary

This PR introduces integration with the Frappe Script Editor VS Code extension. It allows developers to open and edit Client Scripts, Data Scripts, Global Code, and Page Code directly in VS Code or its forks, with changes syncing back to Builder in real-time.

Features

• Auto-Discovery: Automatically detects if the VS Code extension is active and only shows the necessary buttons if it is.
• Direct Access: Added "Open in Editor" buttons to all primary code editors (Global Code, Page Code, Data Scripts).
• Block Actions: New context menu options for blocks to jump directly to their specific Client or Data scripts in VS Code.
• Real-time Sync: Scripts edited in VS Code sync back to Builder live — block scripts on the active page are updated immediately via Frappe's realtime without requiring a manual save or reload.
• Graceful Permissions: A new setting Integrate with External Editor under Developer Settings handles local network access permission for the extension's local HTTP server.

Technical Changes

• New Composable useExternalEditor.ts: Handles editor detection (port scan over 127.0.0.1:59000–59021), permission state for Local Network Access, and vscode:// URI generation.
• New Composable useLiveDocSync.ts: Subscribes to Frappe doc_update realtime events for the active Builder Page and Builder Settings, merging changed block scripts (blockClientScript, blockDataScript) into the live page state without overwriting unsaved layout changes.
• Enhanced UI Components:
  • CodeEditor.vue: Added support for an external editor context and a launch button.
  • BlockContextMenu.vue: Integrated "Open in Editor" actions for block-level scripts with dynamic labeling (e.g., "Open in VS Code").
  • GlobalDeveloper.vue: Added settings to manage, authorize, and check the status of local network access.

Preview

Working demo

Screen.Recording.2026-05-12.at.5.19.45.PM.mov

Integration setting

How to use:

1. Install the Frappe Script Editor extension in VS Code.
2. Go to Settings > Developer in Builder and click Request Access to allow Builder to talk to your local VS Code instance.
3. Once active, look for the "Open in VS Code" button in any script editor, or right-click a block to see the new "Open in Editor" options.
4. Edits saved in VS Code are reflected in Builder immediately — no refresh needed.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 57.82%. Comparing base (28c5bd8) to head (39a0af1).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #595   +/-   ##
========================================
  Coverage    57.82%   57.82%           
========================================
  Files           29       29           
  Lines         3206     3206           
========================================
  Hits          1854     1854           
  Misses        1352     1352           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[surajshetty3416]

@pratikb64 can you please make the changes we discussed in the extension? few things I remember

• Update logo
• Only show selected pages in the sidebar
• Better search

---

In Builder

• we need realtime updates when we make change via editor.
• you'll also have to resolve the conflicts

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 58.36%. Comparing base (b7e4804) to head (f1ee784).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #595   +/-   ##
========================================
  Coverage    58.36%   58.36%           
========================================
  Files           29       29           
  Lines         3295     3295           
========================================
  Hits          1923     1923           
  Misses        1372     1372           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[surajshetty3416]

@mergify update

[mergify]

update

✅ Branch has been successfully updated

[surajshetty3416]

@mergify update

[mergify]

update

✅ Branch has been successfully updated