Merge pull request #524 from aSeriousDeveloper/img-srcset

`img` attributes to facilitate the use of Responsive Images & Media Libraries

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

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,
+          }
+        },
+      },
     };
   },
 });

resources/js/plugin.js

@@ -461,6 +461,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 {

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,
+            ],
         ];
     }
 }