fix: rewrite aem.page/aem.live image srcs in editor to prevent 401 errors #930
fix: rewrite aem.page/aem.live image srcs in editor to prevent 401 errors #930andreituicu wants to merge 10 commits into
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
|
andreituicu
changed the title
andreituicu
requested review from
auniverseaway,
chrischrischris,
kptdobe and
tripodsan
There was a problem hiding this comment.
Missing tests...
Also, .preview.da.live maps to da-ue worker. I do not see the relationship here. It feels like this worker is a place for a lot of things. If we want .preview to become a central place for our editor, I think we should make a clean worker that includes only what's needed.
| * @param {string} src - The original image src URL. | ||
| * @returns {string} The rewritten src, or the original if no rewrite was needed. | ||
| */ | ||
| export function rewriteImageSrcForEditor(src) { |
There was a problem hiding this comment.
No tests created for this function
| return { | ||
| dom: img, | ||
| update(updated) { | ||
| if (updated.type.name !== 'image') return false; | ||
| updateImageAttributes(img, updated.attrs); | ||
| return true; |
There was a problem hiding this comment.
fixed in dfe691e, but as mentioned on the Slack thread, I'm not familiar with this particular feature.
Would be grateful for a second pair of eyes from @chrischrischris
| image(node) { | ||
| const img = document.createElement('img'); | ||
| img.src = rewriteImageSrcForEditor(node.attrs.src); | ||
| if (node.attrs.alt) img.alt = node.attrs.alt; | ||
| return { | ||
| dom: img, | ||
| update(updated) { | ||
| if (updated.type.name !== 'image') return false; | ||
| img.src = rewriteImageSrcForEditor(updated.attrs.src); | ||
| if (updated.attrs.alt) img.alt = updated.attrs.alt; | ||
| return true; | ||
| }, | ||
| }; | ||
| }, |
|
Thank you for the review!
This was a decision in the last Helix hackathon to have the preview proxy and the UE proxy in the same worker, because they have a lot in common. They actually have more in common the differences. As with everything it is in a bit of transition phase, but essentially they both:
Probably the only essential difference in the long-run is that the UE side of that worker, injects instrumentation for the HTML that is required for the UE editor. The tests are a fair point, will add them. |
2 participants
Description
Images stored with *.aem.page or *.aem.live URLs now display correctly in the editor without triggering 401 errors.
When DA documents contain images served from AEM preview/publish hosts, the editor lacks the auth those hosts require. This PR rewrites those image URLs to their *.preview.da.live equivalent at render time via ProseMirror nodeViews — display-only, never written back to the document or synced via collab.
How Has This Been Tested?
Manually with: https://fximg--da-live--adobe.aem.live/edit#/andreituicu/da-test/mediabus
Screenshots (if appropriate):
The image with the cat is behind helix auth: https://main--da-test--andreituicu.aem.page/media_1222da127066e69ab4693b1aa98ad4cd6fdfe1fe4.jpg?width=2000&format=webply&optimize=medium
Types of changes
Checklist: