torchbox / wagtail-grapple

A Wagtail app that makes building GraphQL endpoints a breeze!
https://wagtail-grapple.readthedocs.io/en/latest/
Other
152 stars 57 forks source link

URL handling in RichTextBlock output #43

Open indirectlylit opened 4 years ago

indirectlylit commented 4 years ago

I'm not sure what the expected behavior here is, but I ran into an unexpected inconsistency between the rendering behavior of RichTextBlock and other blocks: RichTextBlock uses absolute URLs (e.g. for internal links and image source URLs) while image renditions use fully-qualified URLs.

For example, here I'm rendering a StreamField that includes both rich text blocks and images:

{
  pages {
    ... on BlogPage {
      body {
        blockType
        ... on RichTextBlock {
          value
        }
        ... on ImageChooserBlock {
          image {
            rendition(width:500) {
              src
            }
          }
        }
      }
    }
  }
}

The output is

{
  "data": {
    "pages": [
      {
        "body": [
          {
            "blockType": "ImageChooserBlock",
            "image": {
              "rendition": {
                "src": "http://localhost:8000/media/images/test.width-500.png"
              }
            }
          },
          {
            "blockType": "RichTextBlock",
            "value": "<div class=\"rich-text\"><p>paragraph. <a href=\"/\">Link to another page</a></p><img alt=\"right-aligned test\" class=\"richtext-image right\" height=\"500\" src=\"/media/images/test.width-500.jpg\" width=\"500\"><p></p></div>"
          }
        ]
      }
    ]
  }
}

Note that both link and image in the rich text block use path-only URLs that are not fully qualified with the domain name, protocol, and port. In the context of a headless CMS, this would complicate rendering.

Possibly related: https://github.com/wagtail/wagtail/issues/2695 (in particular the last comment in the thread)

zerolab commented 4 years ago

Good find! I believe it is related to that core issue.

/cc @NathHorrigan

Junatum commented 4 years ago

+1 I'm experiencing exactly like this.

mdfathi99 commented 1 year ago

+1 I'm experiencing exactly like this.

dopry commented 1 year ago

I did a test today and confirmed that RichTextBlocks are still creating relative urls /media/images/wagtail-grapple.width-800.png to images while ImageFields and ImageChooserBlocks are generating fully qualified URLS http://localhost:8000/media/original_images/wagtail-grapple.png