Merge branch '1.x' into filament-3

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to `filament-peek` will be documented in this file.
 
 
+## 1.1.0 - 2023-07-26
+
+* feat: Add preview modal JavaScript hooks
+
+
 ## 1.0.2 - 2023-07-23
 
 * fix: Editor sidebar resize in RTL UI

README.md

@@ -59,6 +59,7 @@ The documentation is available in the `docs/` directory:
     - [Alternate Templating Engines](./docs/builder-previews.md#alternate-templating-engines)
     - [Customizing the Preview Link](./docs/builder-previews.md#customizing-the-preview-link)
     - [Automatically Updating the Builder Preview](./docs/builder-previews.md#automatically-updating-the-builder-preview)
+- [JavaScript Hooks](./docs/javascript-hooks.md)
 
 <!-- END_TOC -->
 

docs/builder-previews.md

@@ -10,7 +10,7 @@ As you edit the Builder blocks, the preview can be refreshed manually or automat
 
 Closing the preview modal does not update the record in the database, only the form state is updated.
 
-**Note**: This feature was initially designed with a focus on the [Builder field](https://filamentphp.com/docs/2.x/forms/fields#builder) but can be used with any other field type. Make sure to check out the [`Using Custom Fields`](#using-custom-fields) section below.
+**Note**: This feature was initially designed with a focus on the [Builder field](https://filamentphp.com/docs/2.x/forms/fields#builder) but can be used with any other field type. Make sure to check out the [Using Custom Fields](#using-custom-fields) section below.
 
 ## Using the Builder Preview with Blade Views
 
@@ -180,7 +180,7 @@ Most methods in the `HasBuilderPreview` trait receive a `$builderName` argument.
 protected function getBuilderPreviewView(string $builderName): ?string
 {
     return match ($builderName) {
-        'content_blocks' => 'posts.preview-blocks',
+        'content_blocks' => 'posts.preview-content-blocks',
         'footer_blocks' => 'posts.preview-footer-blocks',
     };
 }
@@ -301,3 +301,4 @@ Additionally, you may choose between two auto-refresh strategies with the `autoR
 - [Configuration](./configuration.md)
 - [Page Previews](./page-previews.md)
 - [Builder Previews](./builder-previews.md)
+- [JavaScript Hooks](./javascript-hooks.md)

docs/configuration.md

@@ -44,3 +44,4 @@ Builder Editor options:
 - [Configuration](./configuration.md)
 - [Page Previews](./page-previews.md)
 - [Builder Previews](./builder-previews.md)
+- [JavaScript Hooks](./javascript-hooks.md)

docs/javascript-hooks.md

@@ -0,0 +1,38 @@
+# JavaScript Hooks
+
+JavaScript hooks allow you to run custom code at specific points in the preview modal lifecycle:
+
+| Event | Description |
+|---|---|
+| `peek:initializing` | Runs once, before the plugin is initialized. |
+| `peek:initialized` | Runs once, after the plugin is initialized. |
+| `peek:modal-initializing` | Runs once, before the Alpine component is initialized. |
+| `peek:modal-initialized` | Runs once, after the Alpine component is initialized. |
+| `peek:modal-opening` | Runs every time, before the preview modal opens. |
+| `peek:modal-opened` | Runs every time, after the preview modal opens. |
+| `peek:modal-closing` | Runs every time, before the preview modal closes. |
+| `peek:modal-closed` | Runs every time, after the preview modal closes. |
+
+Example:
+
+```js
+document.addEventListener('peek:modal-closing', (e) => {
+    console.log('The modal is closing...');
+
+    // You can access the full modal instance in `e.detail.modal`
+    if (e.detail.modal.withEditor) {
+        console.log('I hope you enjoyed using the new Builder Preview!');
+    }
+});
+```
+
+Have a look at the [Including Frontend Assets](https://filamentphp.com/docs/2.x/admin/appearance#including-frontend-assets) section of the Filament documentation to learn how to load custom JavaScript files into your admin pages.
+
+---
+
+**Documentation**
+
+- [Configuration](./configuration.md)
+- [Page Previews](./page-previews.md)
+- [Builder Previews](./builder-previews.md)
+- [JavaScript Hooks](./javascript-hooks.md)

docs/page-previews.md

@@ -189,6 +189,8 @@ This technique can also be used to implement page previews with a decoupled fron
 - From `getPreviewModalUrl()`, generate the preview token and return a front-end preview URL. This would usually render a full page component.
 - From the front-end page component, fetch the preview data from the back-end preview URL, as shown above.
 
+See also: [JavaScript Hooks](./javascript-hooks.md)
+
 ## Embedding a Preview Link into the Form
 
 Instead of a `PreviewAction`, you can use the `PreviewLink` component to integrate a button directly into your form (e.g. in a sidebar):
@@ -246,3 +248,4 @@ If you need finer control over pointer events in your previews, first set this o
 - [Configuration](./configuration.md)
 - [Page Previews](./page-previews.md)
 - [Builder Previews](./builder-previews.md)
+- [JavaScript Hooks](./javascript-hooks.md)

generate-toc.php

@@ -12,6 +12,7 @@ function generateToc(): string
         './docs/configuration.md',
         './docs/page-previews.md',
         './docs/builder-previews.md',
+        './docs/javascript-hooks.md',
     ];
 
     foreach ($files as $file) {