diff --git a/README.md b/README.md index 92d31834..d0969a12 100644 --- a/README.md +++ b/README.md @@ -225,6 +225,12 @@ See `vendor/awcodes/filament-tiptap-editor/src/Actions/LinkAction.php` for imple You may override the default Media modal with your own Action and assign to the `media_action` key in the config file. Make sure the default name for your action is `filament_tiptap_media`. +The Media Modal can make use of 3 attributes not exposed by default: + +- `srcset` is used for selecting a series of responsive images to display for different browser viewports. [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) +- `sizes` goes alongside `srcset` to specify sizing rules for responsive images. [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) +- `media` provides support for an arbitrary ID value to better integrate with Media stored within a Database. + See `vendor/awcodes/filament-tiptap-editor/src/Actions/MediaAction.php` for implementation. ### Grid Builder Modal diff --git a/resources/js/extensions/Image.js b/resources/js/extensions/Image.js index 06d0f717..123d065d 100644 --- a/resources/js/extensions/Image.js +++ b/resources/js/extensions/Image.js @@ -29,7 +29,26 @@ export const CustomImage = Image.extend({ }; } } - } + }, + srcset: { + default: null, + }, + sizes: { + default: null, + }, + media: { + default: null, + parseHTML: element => element.getAttribute('data-media-id'), + renderHTML: attributes => { + if (!attributes.media) { + return {} + } + + return { + 'data-media-id': attributes.media, + } + }, + }, }; }, }); diff --git a/resources/js/plugin.js b/resources/js/plugin.js index 22dce7cd..1df1089c 100644 --- a/resources/js/plugin.js +++ b/resources/js/plugin.js @@ -448,6 +448,9 @@ export default function tiptap({ width: media?.width, height: media?.height, lazy: media?.lazy, + srcset: media?.srcset, + sizes: media?.sizes, + media: media?.media, }) .run(); } else { diff --git a/src/Extensions/Nodes/Image.php b/src/Extensions/Nodes/Image.php index 96bcb950..e960c18a 100644 --- a/src/Extensions/Nodes/Image.php +++ b/src/Extensions/Nodes/Image.php @@ -35,6 +35,17 @@ public function addAttributes(): array : null; }, ], + 'srcset' => [ + 'default' => null, + ], + 'sizes' => [ + 'default' => null, + ], + 'media' => [ + 'default' => null, + 'parseHTML' => fn ($DOMNode) => $DOMNode->getAttribute('data-media-id') ?: null, + 'renderHTML' => fn ($attributes) => $attributes->media ? ['data-media-id' => $attributes->media] : null, + ], ]; } }