[Website] File browser and code editor #2813

adamziel · 2025-10-23T21:42:05Z

Motivation for the change, related issues

Adds a "File browser" tab to Playground details view with a file explorer tree and a code editor:

CleanShot.2025-10-23.at.23.31.22.mp4

When working on Beta PHP Playground I realized it's just a different UI for WordPress Playground. A UI that would be highly useful in Playground core. Therefore, instead of expanding on the PHP Playground idea, let's make the website just as useful for developers.

Notable features:

Deferred loading – code editor and file explorer assets are only loaded after opening the tab
File explorer
- Context menu with rename and delete options
- Drag&drop between folders
- Drag&drop files from desktop
- Type to find file
- Arrow-based directory tree navigation
- Single click to open a file, double click to open a focus
Code editor
- Auto-save
- Reopens the last opened file after navigating to another tab and returning to the code editor

Remaining work

Analyze the impact on the manifest.json and offline bundle. How can we make these downloads non mandatory?

Testing Instructions (or ideally a Blueprint)

Play with the file explorer and the code editor, confirm it works as expected without too rough edges.

adamziel · 2025-10-23T21:47:19Z

packages/playground/blueprints/src/lib/steps/import-wxr.ts

 * just as the web request layer would.
 */
-HTTPS: (await playground.absoluteUrl).startsWith('https://') ? 'on' : '',
+HTTPS: (await playground.absoluteUrl).startsWith('https://')


this is just reformatting

…cons

bgrgicak · 2025-10-24T05:12:25Z

This will be such a great addition to the website, great work @adamziel!

I found a few quirks, but otherwise it works really well.

Type to find file interferes with renaming

Try creating a folder 123 and after that rename a file to include 1 in the name. As soon as you press 1, the rename modal closes and the folder with the name 123 is highlighted. Type to find should be disabled during renaming to avoid issues like this.

Screen.Recording.2025-10-24.at.06.57.28.mov

Deleted files keep coming back after recreating the same directory

I had a directory 123 with a file test.231.php and deleted it (this part isn't in the video).
After that, whenever I create a directory with the name 123 and reload the page.
The directory is repopulated with the previously deleted data, and it removes my data.

In this video, I created a directory 123 with a test.php file in it, after reloading the 123 directory contained only the test231.php file which I deleted in the past.

Screen.Recording.2025-10-24.at.07.01.18.mov

…p.request()

adamziel · 2025-10-24T12:17:13Z

Thanks @bgrgicak! I've just addressed these two issues.

…ffline build

brandonpayton

I read over the changes, and everything seems nicely, simply put together. Nice work!

Will test this next.

brandonpayton · 2025-10-24T16:33:11Z

packages/php-wasm/universal/src/lib/php.ts

 mkdir(path: string) {
-return FSHelpers.mkdir(this[__private__dont__use].FS, path);
+const result = FSHelpers.mkdir(this[__private__dont__use].FS, path);
+this.dispatchEvent({ type: 'filesystem.write' });


Would there be any value in including the path with the event? Same question for the other FS event dispatches.

Potentially, once something needs that path. Today we only need a way of telling the journal "hey, something changed in the filesystem, please synchronize that with OPFS".

brandonpayton · 2025-10-24T16:34:19Z

packages/playground/blueprints/public/blueprint-schema-validator.js

+'.git': {
+type: 'boolean',
+description:
+'When true, include a `.git` directory with Git metadata (experimental).',


It's weird this wasn't committed before! See #2787

brandonpayton · 2025-10-24T16:57:26Z

packages/playground/components/src/FilePickerTree/index.tsx

+focusTarget.scrollIntoView({
+behavior: 'smooth',
+block: 'nearest',
+});


brandonpayton · 2025-10-24T17:26:31Z

packages/playground/components/src/FilePickerTree/index.tsx

 renameHandledRef.current = false;
-if (typeof window !== 'undefined' && window.requestAnimationFrame) {
-window.requestAnimationFrame(() => {
+if (typeof window !== 'undefined' && requestAnimationFrame) {


The previous version of this code which explicitly referenced the window property made more sense to me. But mostly, this change made me pause and wonder:
Is there a reason for this change that I'm missing?

🤔 If we're trying to reduce references to window for some reason, the following would go further:

Suggested change

if (typeof window !== 'undefined' && requestAnimationFrame) {

if (typeof requestAnimationFrame === 'function') {

Yeah good note, let's explore restoring that

brandonpayton · 2025-10-24T17:32:13Z

packages/playground/components/src/FilePickerTree/index.tsx

+return;
+}
+
+const wasWaitingForDoubleClick = clickTimeoutRef.current !== null;


This surprised me, though I bet there is a good reason for it. Doesn't the underlying browser platform decide whether a click is a single or double click? Is there a case where you get individual click events that make up a single double-click intent?

There is an onDoubleClick event, but I couldn't get consistent results with it. Also, we want to open the file right away without any visible delays – and we'd get a delay in a data model where we handle either a "singular click" event or a "double click" event. In here, we're getting each specific click event and open the file right away. Then, we still need to decide if it's a double click. If yes, we also move the focus into the code editor – once that second click arrives.

brandonpayton · 2025-10-24T17:57:40Z

packages/vite-extensions/vite-list-assets-required-for-offline-mode.ts

+ *
+ * Optional chunks are placed in assets/optional/ via vite.config.ts manualChunks configuration.
+ */
+/^\/assets\/optional\/.*/, // All optional assets (CodeMirror, language extensions, etc.)


Good catch.

brandonpayton · 2025-10-24T18:17:16Z

...s/playground/website/src/components/site-manager/site-file-browser/file-explorer-sidebar.tsx

+
+const seemsLikeBinary = (buffer: Uint8Array) => {
+// Assume that anything with a null byte in the first 4096 bytes is binary.
+// This isn't a perfect test, but it catches a lot of binary files.


This made me happy. Nice heuristic.

brandonpayton · 2025-10-24T18:27:12Z

packages/playground/website/src/components/site-manager/site-file-browser/index.tsx

+setTimeout(() => {
+const savedPos = cursorPositionsRef.current.get(path);
+if (savedPos !== undefined) {
+editorRef.current?.setCursorPosition(savedPos);


~~What happens if this is out of bounds due to a shortened file?~~

EDIT: It turns out that setCursorPosition() clamps the position to the length of the content.

brandonpayton · 2025-10-24T18:31:01Z

packages/playground/website/src/components/site-manager/site-file-browser/code-editor.tsx

+const clampedPos = Math.min(
+pos,
+viewRef.current.state.doc.length
+);


This might be too paranoid, but perhaps we should clamp this on the lower end as well.

The position shouldn't normally become negative, but faulty math involving substring length and a text index could do it.

Good point! Let's do it in a follow-up

brandonpayton · 2025-10-24T18:33:39Z

packages/playground/website/src/components/site-manager/site-file-browser/code-editor.tsx

+if (!view) {
+return;
+}
+// Save focus state before reconfiguring editable


I'm not sure, perhaps we don't need that. I did use LLMs with this one and was a bit lenient on these new components, I'm not sure what to think about that kind of workflow yet. It seems to be prone to introducing those kind of strange code segments. I'll explore removing it in a follow-up.

I'm not sure, perhaps we don't need that. I did use LLMs with this one and was a bit lenient on these new components, I'm not sure what to think about that kind of workflow yet. It seems to be prone to introducing those kind of strange code segments. I'll explore removing it in a follow-up.

@adamziel Thanks for explaining. Honestly, it may be a reasonable tradeoff if we can mostly identify most of these weird bits. It would also be really cool if git blame could somehow tell us particular lines were generated by AI. Then we might feel more confident about questioning and changing an unexplained detail in the future.

brandonpayton

This tests really well for me. Excellent work! This makes Playground even more accessible and useful.

One idea for an enhancement:
For binary files like images and videos that can be read by the browser, maybe we could consider making those viewable, in place of the editor, when they are selected.

Thank you so much for this, @adamziel!

adamziel · 2025-10-25T14:49:57Z

For binary files like images and videos that can be read by the browser, maybe we could consider making those viewable, in place of the editor, when they are selected.

Great idea! Let's explore it in a follow up

Equips the Playground file browser with a preview feature for images, videos, and audio. Follows up on #2813. <img width="700" alt="CleanShot 2025-10-26 at 23 47 51@2x" src="https://github.com/user-attachments/assets/f15ff15d-db39-4370-8924-3fa98dfe824c" /> ## Testing instructions Open the file explorer and open any image, video or audio file. Confirm you can see the preview.  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>Preview images and binary files in the file browser</issue_title> > <issue_description>For binary files like images and videos that can be read by the browser, maybe we could consider making those viewable, in place of the editor, when they are selected. > > Follows up on #2813</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> - Fixes #2818  --- ✨ Let Copilot coding agent [set things up for you](https://github.com/WordPress/wordpress-playground/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: adamziel <205419+adamziel@users.noreply.github.com>

Changed --site-manager-site-list-width from 320px to 300px to make the sidebar with saved sites more compact. This improves the #2813 experience. ## Testing Instructions (or ideally a Blueprint) Go to local Playground confirm the left sidebar is more narrow and yet still useful --------- Co-authored-by: Claude <noreply@anthropic.com>

adamziel added 15 commits October 22, 2025 00:00

Playground file browser

b966e9a

resizable site panel

d09b6f0

resizable site panel

75f935d

Merge

5223de8

Don't move the focus back to the file tree too early

6f6bfb3

Double click = focus on the file. Single click = select file

c9e8507

Enter = focus on the code editor

6e9934d

Immediately open newly created files

d04a1f5

Focus on the first context menu item

2c0686c

E2E the file picker

7d69e57

Long editor

cb22d52

Retain cursor position in the code editor

c4282d9

Reopen the last active tab when Playground is reopened

2378604

Lint, typecheck

bfa8f56

remove dev artifacts

41707a5

adamziel added [Type] Enhancement New feature or request [Aspect] Website [Package][@wp-playground] Website labels Oct 23, 2025

Merge branch 'trunk' into file-browser

6fa8eee

adamziel commented Oct 23, 2025

View reviewed changes

adamziel added 3 commits October 23, 2025 23:54

Load non-php language extensions asynchronously

43ddc83

Simplify logic, improve comments

97c83a6

Simplify logic, remove constants file, reuse documentRoot, reuse WP i…

9712e4b

…cons

adamziel marked this pull request as ready for review October 23, 2025 22:48

adamziel requested a review from a team as a code owner October 23, 2025 22:48

adamziel added 5 commits October 24, 2025 01:03

Display a clickable download link when editing binary files

63afe2c

Reuse php-wasm/util fs helpers instead of reimplementing them

cd5a154

Rename isProbablyTextBuffer to seemsLikeBinary

402d7f5

Remove 300ms delay when opening a file

bb80aa7

lint

2e500e1

adamziel added 2 commits October 24, 2025 14:03

Skip type-ahead when renaming to avoid interfering with rename input

9126de3

Flush filesystem journal on mkdir() and similar calls, not just on ph…

86431db

…p.request()

adamziel added 3 commits October 24, 2025 14:25

Run E2E in CI

19ecd20

Exclude codemirror from manifest.json

abde34b

Move optional dependencies to assets/optional and exclude them from o…

5a5ac84

…ffline build

brandonpayton reviewed Oct 24, 2025

View reviewed changes

brandonpayton approved these changes Oct 24, 2025

View reviewed changes

adamziel merged commit 495a9cd into trunk Oct 25, 2025
29 checks passed

adamziel deleted the file-browser branch October 25, 2025 14:49

adamziel mentioned this pull request Oct 25, 2025

Preview images and binary files in the file browser #2818

Closed

Copilot AI mentioned this pull request Oct 25, 2025

Preview images, videos, and audio in file browser #2819

Merged

adamziel mentioned this pull request Oct 27, 2025

[Website] Make saved sites sidebar more narrow #2826

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Website] File browser and code editor #2813

[Website] File browser and code editor #2813

Uh oh!

adamziel commented Oct 23, 2025 •

edited

Loading

adamziel Oct 23, 2025

bgrgicak commented Oct 24, 2025

adamziel commented Oct 24, 2025

brandonpayton left a comment

brandonpayton Oct 24, 2025

adamziel Oct 26, 2025

brandonpayton Oct 24, 2025

adamziel Oct 26, 2025

brandonpayton Oct 24, 2025

brandonpayton Oct 24, 2025

adamziel Oct 26, 2025

brandonpayton Oct 24, 2025

adamziel Oct 26, 2025

brandonpayton Oct 24, 2025

brandonpayton Oct 24, 2025

brandonpayton Oct 24, 2025

brandonpayton Oct 24, 2025

adamziel Oct 26, 2025

brandonpayton Oct 24, 2025

adamziel Oct 26, 2025 •

edited

Loading

brandonpayton Oct 28, 2025

brandonpayton left a comment

Uh oh!

adamziel commented Oct 25, 2025

Labels

4 participants

	if (typeof window !== 'undefined' && requestAnimationFrame) {
	if (typeof requestAnimationFrame === 'function') {

[Website] File browser and code editor #2813

[Website] File browser and code editor #2813

Uh oh!

Conversation

adamziel commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for the change, related issues

Notable features:

Remaining work

Testing Instructions (or ideally a Blueprint)

Choose a reason for hiding this comment

bgrgicak commented Oct 24, 2025

Type to find file interferes with renaming

Deleted files keep coming back after recreating the same directory

adamziel commented Oct 24, 2025

brandonpayton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamziel Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brandonpayton left a comment

Choose a reason for hiding this comment

Uh oh!

adamziel commented Oct 25, 2025

Labels

4 participants

adamziel commented Oct 23, 2025 •

edited

Loading

adamziel Oct 26, 2025 •

edited

Loading