Skip to content

ElementEditor-powered Live Preview#15112

Merged
brandonkelly merged 8 commits into5.2from
feature/cms-704-elementeditor-powered-live-preview
Jun 3, 2024
Merged

ElementEditor-powered Live Preview#15112
brandonkelly merged 8 commits into5.2from
feature/cms-704-elementeditor-powered-live-preview

Conversation

@brandonkelly
Copy link
Copy Markdown
Member

@brandonkelly brandonkelly commented May 31, 2024

Description

Refactors Live Preview to create its own dedicated ElementEditor instance, embedded within the editor pane (similar to element editor slideouts).

By doing that, Live Preview gains feature parity with element editor slideouts:

  • tabs
  • UI elements
  • tab/field conditions
  • dedicated Save button

The parent editor is kept up-to-date with the LP editor’s state, and its content fields are refreshed to get the latest values when LP is closed (if anything changed).

Live Preview, with two content tabs and a Save button in the editor footer

Related issues

@linear
Copy link
Copy Markdown

linear Bot commented May 31, 2024

@thupsi
Copy link
Copy Markdown

thupsi commented May 31, 2024

Yes!!! 🥳

Copy link
Copy Markdown
Contributor

@brianjhanson brianjhanson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 I pushed a few little changes directly to the branch, so if you mess with anymore just make sure to pull.

  • Updated to logical properties
  • Ensure the tab menu button shows/hides on resize
  • Fixed some random JS errors I ran into while testing. They may not be totally related to these changes, but figured they were worth fixing either way.

- No longer dependent on a parent ElementEditor instance
- No longer reloaded when reopened, if nothing changed in the main form
- Faster initial load
- Save button
…eview

# Conflicts:
#	src/web/assets/cp/dist/cp.js
#	src/web/assets/cp/dist/cp.js.map
#	src/web/assets/cp/dist/css/cp.css
#	src/web/assets/cp/dist/css/cp.css.map
#	src/web/assets/cp/src/js/ElementEditor.js
[ci skip]
@brandonkelly brandonkelly merged commit 5b901b5 into 5.2 Jun 3, 2024
@brandonkelly brandonkelly deleted the feature/cms-704-elementeditor-powered-live-preview branch June 3, 2024 17:19
@mmikkel
Copy link
Copy Markdown
Contributor

mmikkel commented Jun 7, 2024

I've spent some time with the revamped live preview now, and just wanted to say that I love it - it's how I always wanted LP to work and it's going to make a huge difference in AX for authors, especially when editing more complex field layouts. Nice work 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants