New Changes Comparison View

[bastianallgeier]

Description

Summary of changes

• New k-preview-view component
• New /pages/(:any)/preview route/view
• New /site/preview route/view
• New icons
  • asterisk
  • layout-columns
  • layout-right
  • layout-left
  • expand-horizontal
  • collapse-horizontal
  • window
• Responsive form control buttons
• New PreviewDropdownButton class
• new copyToClipboard event handler in the event.js which can be triggered like this:

panel.events.emit('copyToClipboard', 'Copy this text to the clipboard');

Changelog

Features

• New changes view to compare your edits with the latest saved version before you save them

Ready?

• In-code documentation (wherever needed)
• Unit tests for fixed bug/feature
• Tests and CI checks all pass

For review team

• Add changes & docs to release notes draft in Notion

[bastianallgeier]

@distantnative I played around a lot after your suggestions and came up with a mixture of the old live preview view, your suggestions and my own version.

• The title is back and I think it's really important
• I moved the form controls above the changes iframe and I think it really works great to highlight the changes even more and give a better connection to the related actions a user can take.
• I've added expand/collapse toggles for each version. In my opinion, they work great as a shortcut to switch between the different views. I decided to stick with the additional dropdown in the top right corner instead of using the toggles input. My main reason would be that we can add more options to it later (mostly live editing) and the labels in the dropdown really help to clarify the views some more.

[distantnative]

@bastianallgeier What do you think about including the page tree dropdown for the title as in the old experiment? Or too much for this?

[bastianallgeier]

I did that at first and then took it out again. It's awesome, but I think we need to get the basics right first.

[afbora]

I loved the feature, almost perfect 😍

Some points for first test:

• Preview changes doesn't work for draft pages
• New keyboard shortcut would be great for preview action
• You'll see following console error after open preview changes and back to panel page

TypeError: Cannot read properties of undefined (reading 'toggle')

[bastianallgeier]

@afbora thanks for testing. I just fixed the toggle issue. I cannot really reproduce the draft problem though. What kind of error do you see? Shortcuts would be nice indeed.

[afbora]

@bastianallgeier Thank you. Please follow the steps:

• Update a draft page without save
• Preview the changes
• See that both side is same

[distantnative]

I can reproduce the draft problem. Trying to find out where it's going wrong.

EDIT: found it. The URLs created for the preview are ?token=XXX?_version=changes

So double ? instead of a connecting & for the two query parameters.

[distantnative]

We will need a pretty version of

$changes = match (parse_url($preview, PHP_URL_QUERY)) {
	null    => $preview . '?_version=changes',
	default => $preview . '&_version=changes'
};

[afbora]

Only I can found:

• */preview/compare still accessible even if preview: false

💡 Ideas:

• Mobile preview feature (maybe via simple toggle) also would be great (not for now, for future)
• I think new button would be great for Changed version side. Something like Continue to editing or ESC shortcut. Otherwise I need to click each time to back arrow in top left of the window and it's so far away 😅

[bastianallgeier]

@afbora I've fixed the permission issue and added a new ESC shortcut to leave the preview.

The idea for mobile test buttons is definitely cool. Especially as soon as we implement live-editing.

[afbora]

If the preview option is an absolute url and iframe is blocked (content security policy stuff) for the absolute url, then preview doesn't work, right? If yes, so the documentation may provide a warning for this case and a hint on what to do as a solution.

[bastianallgeier]

@afbora yes, I think that's still a problem for now. I wonder if we can catch this somehow and maybe show a notification directly in the view.

[afbora]

fetch(this.src.latest)
    .then(resp => {
        const csp = resp.headers.get('Content-Security-Policy');
        console.log(csp);
    });

Maybe we can check via something like above codes. But I'm not sure if it's worth it. I just meant to provide a warning and solution in the our documentation pages.

[bastianallgeier]

@afbora I thought about it some more and I would suggest that we rather leave it as it is and then react to edge cases when they happen.

[afbora]

Looks great for me 👍 Lets release in alpha release to allow developers to test it and get it feedback from them.