fix(ui): add errors and draft state (*) to the code editor

[userquin]

Description

We have a regression somewhere, maybe updating Vue dependency, I'm not sure. The problem is that changes included in these 2 PR missing in current version:

• feat(ui): add the draft state * on code editor #1131
• fix(ui): open in IDE and error styles #1039

This PR adds the draft indicator and the line error to the code editor: tested with test/core and test/browser (only preview).

This PR also includes:

• codemirror optimizations when registering/unregistering the errors entries to remove memory leaks: looks like destroy method is missing in v6
• changes the cursor to wait when saving the file: Video showing the cursor
• registers the span listener to open the file in the editor (at line and column error), missing in the original PR feat(ui): add the draft state * on code editor #1131

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Name	Link
🔨 Latest commit	29bcbeb
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/6753d2ebf7d8fe0008c20cea
😎 Deploy Preview	https://deploy-preview-7044--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[userquin]

add hint here: the watcher receiving saving with true even when not changed, that's why we use pause and resume it in onSave.

The problem without pausing this watcher when saving the file => cursor position lost (the caret will go to the first line in the test).

/cc @patak-dev any idea why this behavior?

[userquin]

The watcher loading the file content being called multiple times when the server re-runs the file, splitting the logic for loading and saving will prevent reloading the content while saving from the view editor.

The cursor will be preserved only when saving the file in the ui view editor, when saving the file in the IDE the cursor position will be lost (will use the line in the url)

[userquin]

Note: we should lock the editor or check if there is something changed when saving, but we cannot set the editor in readonly (maybe refreshing the editor works), rn you can save at any time using the keyboard.

I Will check it again later since latest commit will prevent reloading the race condition in loading watcher.

[userquin]

looks like using setOption('readOnly', true/false) + refresh() we can prevent saving the file while saving it, updated logic and added protection to prevent firing save event when editor in readOnly mode (also for static html reporter)