Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images edited in RichText Editor do not receive a valid URL #551

Open
felixrichardt opened this issue Oct 28, 2024 · 3 comments
Open

Images edited in RichText Editor do not receive a valid URL #551

felixrichardt opened this issue Oct 28, 2024 · 3 comments

Comments

@felixrichardt
Copy link

Hi,

I've just started playing around with Cofoundry.
I installed the ImageSharp extension and created a view pages/blocks and uploaded some images.

I had a strange behavior that when uploading images without editing them, they are displayed in the content block.
When I edit an image, e.g. resize or crop it, the preview shows the newly edited image, but when I save the changes (close the editor), the image disappears. The img tag is still present in the HTML file, but without the URL.
In the preview, the url “blob:https://localhost:5001/” is used, but this is lost when saving.

Is there an error here or is further configuration required?

@HeyJoel
Copy link
Member

HeyJoel commented Oct 29, 2024

It sounds like a bug, but I haven't had tome to check it over yet. I expect that resizing is a TinyMCE editor feature that isn't being handled by the custom Cofoundry image integration.

@HeyJoel
Copy link
Member

HeyJoel commented Oct 30, 2024

Ok so it looks like an HtmlSanitizer issue. The html editor is converting the edited image into a data uri, which is being saved but cannot be rendered because the default sanitizer ruleset doesn't allow data uris. If you resize using the drag handled in the editor then it works fine because it's just setting the width/height.

You can fix this by customizing the HTML sanitizer ruleset, adding "data" to your AllowedSchemas e.g.

ruleSet.PermittedSchemes = HtmlSanitizerDefaults
        .AllowedSchemes
        .Append("mailto")
        .Append("data")
        .ToImmutableHashSet();

The question is what should be the correct default behavior:

  1. Should we allow inline editing of images? I can't find a way to disable it in TinyMCE yet, but personally I wouldn't want users adding in large uncacheable data URIs into the page.
  2. Should a data URI scheme be included on the default html sanitizer ruleset? I'm now wondering if there should be a couple of default rulesets, a strict version of content of unknown origin and a more permissive set of editor-drive content.

@felixrichardt
Copy link
Author

What I can say is that it only took the end user on the new test instance of cofoundry a few minutes to ask why the editor supported this feature, but wondered why it wasn't working. It was just a simple block element they were trying to use to format a short article on this page. Either the feature should be supported correctly or there should be a restriction that this is not supported and does not work correctly - or in the best case, it should not be offered as an option at all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants