From 80d49fad027081bca5ed57afaec603ed79f68480 Mon Sep 17 00:00:00 2001 From: Robert Lyons Date: Thu, 19 Dec 2024 11:30:28 +0000 Subject: [PATCH 1/5] Support Additional Attributes on Image / Media Node - src / size are for responsive image support a la Spatie Media Library - data-media-id is for storing / parsing IDs used by a Media Library of any sort --- resources/js/extensions/Image.js | 17 ++++++++++++++++- resources/js/plugin.js | 3 +++ src/Extensions/Nodes/Image.php | 17 +++++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/resources/js/extensions/Image.js b/resources/js/extensions/Image.js index 06d0f717..2ab73f9c 100644 --- a/resources/js/extensions/Image.js +++ b/resources/js/extensions/Image.js @@ -29,7 +29,22 @@ 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 { "data-media-id": attributes.media }; + } + }, + }, }; }, }); diff --git a/resources/js/plugin.js b/resources/js/plugin.js index 22dce7cd..3430b97f 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?.srcset, + media: media?.media, }) .run(); } else { diff --git a/src/Extensions/Nodes/Image.php b/src/Extensions/Nodes/Image.php index 96bcb950..726d54ad 100644 --- a/src/Extensions/Nodes/Image.php +++ b/src/Extensions/Nodes/Image.php @@ -35,6 +35,23 @@ public function addAttributes(): array : null; }, ], + 'srcset' => [ + 'default' => null, + ], + 'sizes' => [ + 'default' => null, + ], + 'media' => [ + 'default' => null, + 'parseHTML' => function ($DOMNode) { + return $DOMNode->getAttribute('data-media-id'); + }, + 'renderHTML' => function ($attributes) { + return $attributes->media + ? ['data-media-id' => $attributes->media] + : null; + }, + ] ]; } } From f690c2020cf4b2595c9676c5f0743ef05e1b3c45 Mon Sep 17 00:00:00 2001 From: Robert Lyons Date: Thu, 19 Dec 2024 12:05:59 +0000 Subject: [PATCH 2/5] Minor improvements to match code of Tiptap's Mention Node --- resources/js/extensions/Image.js | 10 +++++++--- src/Extensions/Nodes/Image.php | 12 +++--------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/resources/js/extensions/Image.js b/resources/js/extensions/Image.js index 2ab73f9c..123d065d 100644 --- a/resources/js/extensions/Image.js +++ b/resources/js/extensions/Image.js @@ -39,9 +39,13 @@ export const CustomImage = Image.extend({ media: { default: null, parseHTML: element => element.getAttribute('data-media-id'), - renderHTML: (attributes) => { - if (attributes.media) { - return { "data-media-id": attributes.media }; + renderHTML: attributes => { + if (!attributes.media) { + return {} + } + + return { + 'data-media-id': attributes.media, } }, }, diff --git a/src/Extensions/Nodes/Image.php b/src/Extensions/Nodes/Image.php index 726d54ad..e960c18a 100644 --- a/src/Extensions/Nodes/Image.php +++ b/src/Extensions/Nodes/Image.php @@ -43,15 +43,9 @@ public function addAttributes(): array ], 'media' => [ 'default' => null, - 'parseHTML' => function ($DOMNode) { - return $DOMNode->getAttribute('data-media-id'); - }, - 'renderHTML' => function ($attributes) { - return $attributes->media - ? ['data-media-id' => $attributes->media] - : null; - }, - ] + 'parseHTML' => fn ($DOMNode) => $DOMNode->getAttribute('data-media-id') ?: null, + 'renderHTML' => fn ($attributes) => $attributes->media ? ['data-media-id' => $attributes->media] : null, + ], ]; } } From 95330d8951ddd642809279e0093cf2720e36d34d Mon Sep 17 00:00:00 2001 From: Robert Lyons Date: Thu, 19 Dec 2024 12:36:15 +0000 Subject: [PATCH 3/5] Fix to sizes using wrong attribute in setImage() --- resources/js/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/plugin.js b/resources/js/plugin.js index 3430b97f..1df1089c 100644 --- a/resources/js/plugin.js +++ b/resources/js/plugin.js @@ -449,7 +449,7 @@ export default function tiptap({ height: media?.height, lazy: media?.lazy, srcset: media?.srcset, - sizes: media?.srcset, + sizes: media?.sizes, media: media?.media, }) .run(); From b03fde4684f7118cee2d7bc243699f4f8d58c6f6 Mon Sep 17 00:00:00 2001 From: Rob Lyons <39706150+aSeriousDeveloper@users.noreply.github.com> Date: Mon, 6 Jan 2025 09:48:15 +0000 Subject: [PATCH 4/5] Add basic information about 3 new attributes for Media --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 92d31834..370c1d41 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 vlaue to better integrate with Media Libraries, so that data about which media was used can be preserved. + See `vendor/awcodes/filament-tiptap-editor/src/Actions/MediaAction.php` for implementation. ### Grid Builder Modal From 041c42b64757861996b1069b9d67c69e4e25b9cc Mon Sep 17 00:00:00 2001 From: Rob Lyons <39706150+aSeriousDeveloper@users.noreply.github.com> Date: Mon, 6 Jan 2025 14:04:48 +0000 Subject: [PATCH 5/5] typo fix, minor wording change --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 370c1d41..d0969a12 100644 --- a/README.md +++ b/README.md @@ -229,7 +229,7 @@ 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 vlaue to better integrate with Media Libraries, so that data about which media was used can be preserved. +- `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.