Add Visual Editing to Live Preview pane#26463
Merged
AlexGaillard merged 33 commits intomainfrom Jan 21, 2026
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds visual editing capability to the live preview pane, allowing content editors to use visual editing features directly within the split-view interface without navigating to the Visual Editor module. The implementation includes a full-width mode with drag-to-expand functionality, a display options menu, and seamless integration with the existing Visual Editor module.
Key changes:
- Added visual editing layer integration to live preview with two-layer enablement checks (prerequisites and same-origin validation)
- Implemented full-width mode for live preview with automatic toggle at 95% drag threshold
- Added display options menu consolidating preview actions (new window, visual editor, full-width)
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| app/src/views/private/components/live-preview.vue | Main component changes: added visual editing props, editing layer integration, display options menu, full-width mode support, and toggle editable elements button |
| app/src/utils/normalize-url.ts | New utility to normalize URLs against window location with error handling |
| app/src/utils/normalize-url.test.ts | Comprehensive test coverage for URL normalization edge cases |
| app/src/modules/visual/utils/same-origin.test.ts | New tests for same-origin validation utility |
| app/src/modules/visual/components/editing-layer.vue | Added 'saved' event emission for integration with live preview |
| app/src/modules/content/routes/preview.vue | Integrated visual editing composable and passed props to LivePreview |
| app/src/modules/content/routes/item.vue | Added full-width mode with auto-toggle logic, visual editing integration, and display options slot |
| app/src/styles/_base.scss | Moved iframe pointer-events style to global scope for better reusability |
| app/src/lang/translations/en-US.yaml | Added translation keys for new UI features |
| app/src/composables/use-visual-editing.ts | New composable handling visual editing prerequisites validation |
| app/src/composables/use-visual-editing.test.ts | Comprehensive test suite for visual editing enablement logic |
| .changeset/hungry-cats-swim.md | Changeset documenting the minor version feature addition |
rijkvanzanten
approved these changes
Jan 9, 2026
Member
rijkvanzanten
left a comment
rijkvanzanten
left a comment
There was a problem hiding this comment.
LGTM. @formfcw can I get a once-over from you? 🙏
formfcw
requested changes
Jan 15, 2026
Contributor
formfcw
left a comment
formfcw
left a comment
There was a problem hiding this comment.
Thank you @bryantgillespie 🎉 It feels great. I really love it! ❤️
I still need to look more into the changes to the live-preview.vue file, but I already have a few minor requests.
formfcw
requested changes
Jan 15, 2026
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #26463 +/- ##
==========================================
+ Coverage 63.19% 63.24% +0.04%
==========================================
Files 2111 2113 +2
Lines 137069 137234 +165
Branches 9010 9025 +15
==========================================
+ Hits 86623 86792 +169
+ Misses 50446 50442 -4
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
formfcw
changed the title
formfcw
requested changes
Jan 21, 2026
Contributor
formfcw
left a comment
formfcw
left a comment
There was a problem hiding this comment.
A few more change requests. Also, please update the PR description with our template for future reference.
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
formfcw
requested changes
Jan 21, 2026
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
formfcw
approved these changes
Jan 21, 2026
Contributor
formfcw
left a comment
formfcw
left a comment
There was a problem hiding this comment.
I'm happy that we finally have this in such a nice way 🙌
LGTM 🎉
alexlebens
pushed a commit
to alexlebens/infrastructure
that referenced
this pull request
Feb 5, 2026
This PR contains the following updates: | Package | Update | Change | |---|---|---| | [directus/directus](https://github.com/directus/directus) | minor | `11.14.1` → `11.15.0` | --- ### Release Notes <details> <summary>directus/directus (directus/directus)</summary> ### [`v11.15.0`](https://github.com/directus/directus/releases/tag/v11.15.0) [Compare Source](directus/directus@v11.14.1...v11.15.0) #####⚠️ Potential Breaking Changes **Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie))** To use this feature, update [@​directus/visual-editing](https://github.com/directus/visual-editing) to v1.2.0+ on your website. ##### ✨ New Features & Improvements - **[@​directus/app](https://github.com/directus/app)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added toggle to allow comparing revision to previous revision ([#​26480](directus/directus#26480) by [@​robluton](https://github.com/robluton)) - Added relational field support on x-axis of bar chart ([#​26489](directus/directus#26489) by [@​JamesW1](https://github.com/JamesW1)) - Added visual editing support to the live preview split pane, including display options menu, full-width mode with drag-to-expand, and quick access to the Visual Editor module. ([#​26463](directus/directus#26463) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Changed permission-blocked fields from disabled to non-editable appearance ([#​26572](directus/directus#26572) by [@​HZooly](https://github.com/HZooly)) - **[@​directus/api](https://github.com/directus/api)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/sdk](https://github.com/directus/sdk)** - Fixed race condition and allow accessing the connected state ([#​26511](directus/directus#26511) by [@​Nitwel](https://github.com/Nitwel)) - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - **[@​directus/system-data](https://github.com/directus/system-data)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - **[@​directus/types](https://github.com/directus/types)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/errors](https://github.com/directus/errors)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - **[@​directus/env](https://github.com/directus/env)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - **[@​directus/utils](https://github.com/directus/utils)** - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - **[@​directus/ai](https://github.com/directus/ai)** - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/memory](https://github.com/directus/memory)** - Added distributed locking ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) ##### 🐛 Bug Fixes & Optimizations - **[@​directus/app](https://github.com/directus/app)** - Replaced deprecated `ldapjs` with `ldapts` ([#​26363](directus/directus#26363) by [@​dstockton](https://github.com/dstockton)) - Fixed an issue where the caret would jump to the end of the input in `v-template-input` when typing or updating content. ([#​26520](directus/directus#26520) by [@​mustafaazad03](https://github.com/mustafaazad03)) - Fixed back button navigation on related items ([#​26553](directus/directus#26553) by [@​robluton](https://github.com/robluton)) - Fixed table options menu clipping in markdown editor ([#​26487](directus/directus#26487) by [@​DamnItAzriel](https://github.com/DamnItAzriel)) - Hide AI settings page when MCP and AI features are disabled through ENV ([#​26504](directus/directus#26504) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Updated dependency ([#​26518](directus/directus#26518) by [@​rijkvanzanten](https://github.com/rijkvanzanten)) - Fixed inconsistent disabled state across interfaces ([#​26470](directus/directus#26470) by [@​formfcw](https://github.com/formfcw)) - Fixed an issue where custom CSS classes applied to PrivateView were not rendered ([#​26523](directus/directus#26523) by [@​u12206050](https://github.com/u12206050)) - Fixed WYSIWYG interface not rendering when field is named "tooltip" ([#​26581](directus/directus#26581) by [@​robluton](https://github.com/robluton)) - Fixed issue preventing sidebar details from being fetched when navigating back ([#​26542](directus/directus#26542) by [@​robluton](https://github.com/robluton)) - Fixed Vue warning by passing required prop to interfaces ([#​26506](directus/directus#26506) by [@​formfcw](https://github.com/formfcw)) - Fixed hardcoded "Loading..." text in field tree by using translation key ([#​26526](directus/directus#26526) by [@​sinan-yildiz-marsus](https://github.com/sinan-yildiz-marsus)) - Renamed AI Chat to AI Assistant ([#​26517](directus/directus#26517) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/api](https://github.com/directus/api)** - Improved error message for system field updates that are not schema.is\_indexed ([#​26548](directus/directus#26548) by [@​JamesW1](https://github.com/JamesW1)) - Replaced deprecated `ldapjs` with `ldapts` ([#​26363](directus/directus#26363) by [@​dstockton](https://github.com/dstockton)) - Changed users.last\_access display mode to absolute ([#​26548](directus/directus#26548) by [@​JamesW1](https://github.com/JamesW1)) - **[@​directus/system-data](https://github.com/directus/system-data)** - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Changed users.last\_access display mode to absolute ([#​26548](directus/directus#26548) by [@​JamesW1](https://github.com/JamesW1)) - Renamed AI Chat to AI Assistant ([#​26517](directus/directus#26517) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/env](https://github.com/directus/env)** - Fixed LDAP DN properties casted as arrays ([#​26579](directus/directus#26579) by [@​ComfortablyCoding](https://github.com/ComfortablyCoding)) - **[@​directus/memory](https://github.com/directus/memory)** - Handled empty buffers to prevent errors during race conditions or disconnects ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) ##### 📦 Published Versions - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/storage-driver-s3@​12.1.1` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4zLjYiLCJ1cGRhdGVkSW5WZXIiOiI0My4zLjYiLCJ0YXJnZXRCcmFuY2giOiJtYWluIiwibGFiZWxzIjpbImltYWdlIl19--> Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3752 Co-authored-by: Renovate Bot <[email protected]> Co-committed-by: Renovate Bot <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Scope
What's changed:
Adds visual editing capability to the live preview pane. This is a nice improvement for content editors where visual editing is enabled because it uses the live preview URLs to render the visual editor on the same page without having to navigate to the module. No context switching.
Update of
#26264
Potential Risks / Drawbacks
Tested Scenarios
Review Notes / Questions
Checklist