Decouple image+video (URI) shape matching from specific image+video file types/extensions (#3530351) · Issues · project / canvas

Decouple image+video (URI) shape matching from specific image+video file types/extensions

>>> [!note] Migrated issue   Reported by: [wim leers](https://www.drupal.org/user/99777) Related to !3 !1465 !1464 >>> <h3 id="overview">Overview</h3> As recently <a href="https://git.drupalcode.org/project/experience_builder/-/merge_requests/1137#note_535087">pointed out by @isholgueras</a> on the MR for <a href="https://www.drupal.org/project/experience_builder/issues/3518620" title="Status: Closed (fixed)">#3518620: Image prop shape matching should be case-insensitive, but JSON Schema doesn't support that</a>, the current <code>3.1.2.a structured data → matching field instances ⇒ dynamic prop source</code> infrastructure for matching <code>$ref: json-schema-definitions://experience_builder.module/image-uri</code> and <code>$ref: json-schema-definitions://experience_builder.module/image</code>, which rely on this: <pre>    "image-uri": {       "title": "Image URL",       "type": "string",       "format": "uri-reference",       "pattern": "^(/|https?://)?.*\\.(png|gif|jpg|jpeg|webp)(\\?.*)?(#.*)?$"     },</pre> getting matched against Drupal core's (semantically equivalent) <code>FileExtension</code> validation constraint, which necessarily requires translating from/to two wildly different representations. The key problem: the list of file extensions is hardcoded. Which means customizations to the list of allowed image types would be a problem. Recently, AVIF support landed in <a href="https://www.drupal.org/project/drupal/issues/3372932" title="Status: Active">#3372932: [Meta] High-performance images (nearly) out of the box</a>, which shows how likely this is to happen over time. The current code dates back to April 2024, _before_ we had even started using d.o issues. This is some of the oldest code in XB and dates back to the <a href="https://git.drupalcode.org/project/experience_builder/-/tree/research__data_model"><code>research__data_model</code> PoC research branch</a>. Note: this <a href="https://github.com/json-schema-org/json-schema-spec/issues/233#issuecomment-279180514">follows a 2017 best practice!</a> <h4>Blockers discovered while working on this</h4> <ol> <li><a href="https://www.drupal.org/project/experience_builder/issues/3540470" title="Status: Closed (fixed)">#3540470: Require 6.x version of `justinrainbow/json-schema` package to get correct JSON Schema validation</a> </li><li><a href="https://www.drupal.org/project/experience_builder/issues/3543770" title="Status: Closed (fixed)">#3543770: `noUi: true` SDCs do still show up in the UI</a> </li><li><a href="https://www.drupal.org/project/experience_builder/issues/3543783" title="Status: Closed (fixed)">#3543783: `card-with-stream-wrapper-image` test SDC generates an invalid `<img src>`</a> </li><li><a href="https://www.drupal.org/project/experience_builder/issues/3543805" title="Status: Closed (fixed)">#3543805: Resolved image file URLs invalid in kernel tests</a> </li></ol> <h3 id="proposed-resolution">Proposed resolution</h3> Use <a href="https://json-schema.org/draft/2020-12/json-schema-validation#name-contentmediatype"><code> contentMediaType</code></a>. So then we'd go from: <pre>    "image-uri": {       "title": "Image URL",       "type": "string",       "format": "uri-reference",       "pattern": "^(/|https?://)?.*\\.(png|gif|jpg|jpeg|webp)(\\?.*)?(#.*)?$"     },</pre> to: <pre>    "image-uri": {       "title": "Image URL",       "type": "string",       "format": "uri-reference",       "contentMediaType": "image/*"     },</pre>🐛 EDIT: This is in adequate — because it would also allow <code>ftp://cat.jpg</code>. Which means we need to keep <code>pattern</code> but make it less specific: <pre>    "image-uri": {       "title": "Image URL",       "type": "string",       "format": "uri-reference",       "contentMediaType": "image/*",       "pattern": "^(/|https?://)?(?!.*\\://)[^\\s]+$"     },</pre> (explanation: see the new <code>SchemaJsonPatternsTest</code>) … which is not quite exactly how <code>contentMediaType</code> is meant to be used (that's really describing the contents of the string itself), but is … close enough? Something along these lines <a href="https://github.com/json-schema-org/json-schema-spec/issues/1557">has been proposed as <code>resourceMediaType</code></a>. (Examples of actually defining new JSON Schema formats seem impossible to find.) This would then also allow us to apply a similar improvement to "video URLs", which is being added at <a href="https://git.drupalcode.org/project/canvas/-/work_items/3524130" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3524130</a>. <h3 id="ui-changes">User interface changes</h3> None. > Related issue: [Issue #3518620](https://www.drupal.org/node/3518620) > Related issue: [Issue #3499279](https://www.drupal.org/node/3499279) > Related issue: [Issue #3516359](https://www.drupal.org/node/3516359) > Related issue: [Issue #3524130](https://www.drupal.org/node/3524130) > Related issue: [Issue #3540470](https://www.drupal.org/node/3540470) > Related issue: [Issue #3543770](https://www.drupal.org/node/3543770) > Related issue: [Issue #3543783](https://www.drupal.org/node/3543783) > Related issue: [Issue #3543805](https://www.drupal.org/node/3543805) > Related issue: [Issue #3542895](https://www.drupal.org/node/3542895)

issue