pboivin / filament-peek Goto Github PK

Full-screen page preview modal for Filament

License: MIT License

PHP 77.26% JavaScript 9.15% CSS 3.83% Blade 9.76%

filamentphp laravel plugin preview livewire

filament-peek's Introduction

Peek

A Filament plugin to add a full-screen preview modal to your Panel pages. The modal can be used before saving to preview a modified record.

Installation

You can install the package via composer:

composer require pboivin/filament-peek:"^2.0"

use Pboivin\FilamentPeek\FilamentPeekPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugins([
            FilamentPeekPlugin::make(),
        ]);
}

Then, publish the assets:

php artisan filament:assets

Upgrading from `1.x`

Follow the steps in the Upgrade Guide.

Compatibility

Peek	Status	Filament	PHP
1.x	Bugfixes only	^2.0	^8.0
2.x	Current version	^3.0	^8.1

Please feel free to report any issues you encounter with Peek in this repository. I'll work with you to determine where the issue is coming from.

Demo Projects

Here are a few example projects available to give this plugin a try:

Repository	Description
filament-peek-demo	Content previews on a simple Filament project with Laravel Blade views.
filament-peek-demo-with-astro	Content previews on a more complex project with Filament as "headless CMS", and Astro on the front-end. (Work in progress)
Log1x/filament-starter	A great starting point for TALL stack projects using Filament. Implements content previews using full-page Livewire components.

Documentation

The documentation is available in the 'docs' directory on GitHub:

FAQ and Known Issues

I've started compiling some notes and solutions to common issues in Discussions. Feel free to contribute your own tips and tricks.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

Acknowledgements

The initial idea is heavily inspired by module previews in Twill CMS.

License

The MIT License (MIT). Please see License File for more information.

filament-peek's People

Contributors

Stargazers

Watchers

Forkers

uwascan jeffersonsimaogoncalves kennyhorna lukman-ss topknoxbitch ster fdt2k bambamboole kornafilament

filament-peek's Issues

[v1.1.0] Possible problem in Safari

Hello, i have admin panel on domain ex: admin.com and Next.js project on front.com
So i use preview like this https://github.com/pboivin/filament-peek/blob/2.x/docs/page-previews.md#filament-as-headless-cms

in Chrome everything is working, but in Safari i see 404 error with console errors

Blocked a frame with origin "front.com" from accessing a frame with origin "admin.com". Protocols, domains, and ports must match.

SecurityError: Blocked a frame with origin "admin.com" from accessing a cross-origin frame. Protocols, domains, and ports must match.

Also, open preview link in safari - everything is working again. Only in Preview i have errors

not working in view page.

following up with #3

it worked by adding to my view page

    protected function preparePreviewModalData(): array
    {
        return [
            $this->getPreviewModalDataRecordKey() => $this->getRecord(),
            'isPeekPreviewModal' => true,
        ];
    }

Editor sidebar is not resizable when using RTL locale

Issues with Builder Preview

Hello there,

I hope you're doing well.

I noticed that there's an issue with Builder Preview. If you click on the builder preview multiple times, instead of opening the builder preview it will open the preview Modal.

You can reproduce this in the demo itself, I used https://github.com/pboivin/filament-peek-demo and was able to replicate it.

Steps to replicate:

1 - Setup the demo locally by following the documentation in https://github.com/pboivin/filament-peek-demo
2 - Go to any post entry (for example, http://127.0.0.1:8000/admin/posts/1/edit)
3 - Click on Preview Content Blocks

The Builder Preview will open which is the expected behavior
4 - Now Click on Discard, and click on the same button Preview Content Blocks
The Preview Modal will show instead of the Builder Preview. Which is not the expected Behavior.

Is this a known issue or just me facing it?

Kindest Regards,

Moustafa

Can't use ListPreviewAction with relation manager

Initially reported on Discord:
https://discord.com/channels/883083792112300104/1112742326729703484/1232395478247936141

Can't preview uploaded image on Create page

On Discord : https://discord.com/channels/883083792112300104/1112742326729703484/1200156314760908871

I think this is a regression introduced in v2.2.2

Issue with Livewire component inside of preview template

Z3d0X/filament-fabricator#95

Uncaught (in promise) Component not found: tv0sZYGF9ZCK1PsaYcAN

Scrolling Not Allowed By Default

The README states:

By default, only scrolling is allowed in the preview iframe.

This appears to not be the case. When allowIframePointerEvents config is set to false the iframe gets the pointer-events: none CSS property set which prevents all interaction with the iframe including scrolling.

Tested in FireFox and Chromium.

It appears the only way to get scrolling and nothing else is to add the pointer-events declaration to the template as described further on in the README.

Error with Builder field previews and auto-refresh option

Steps to replicate on the demo:

Edit an existing post
Open the content blocks preview modal
Enable auto-refresh
Add a block with a required field (e.g. Title)
Error: https://flareapp.io/share/xPQBx0r7

Reference:
https://discord.com/channels/883083792112300104/1112742326729703484/1152244138448785418

Temporary workaround is to disable auto-refresh.

Discussed in #65

^{Originally posted by lotarbo July 25, 2023}
Hello, I'm using this package with Next.js and we need to terminate the preview mode when the preview popup is closed.
Next.js says that we need send request to endpoint for this https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode#clear-the-preview-mode-cookies

Is there any way to do this without editing package view file?