Hi guys.
Context
In the current project I’m working on we have to load and upload images to an S3 storage. Those images have to be private.
Setup
Upload: The browser will ask the server for a singed upload link witch it will use to upload the selected image to the S3 storage.
Display: As the images have to be private the server will parse the saved HTML and replace a custom image name property with a signed link so that the browser is capable of loading the image.
That’s why I created a custom image node to handle all the functionality needed.
Observation
My image gets requested twice.
renderHTML({ node, HTMLAttributes }) {
return ['img', mergeAttributes(HTMLAttributes, node.attrs)]
},
And that’s the edit node creation:
addNodeView() {
return ({ editor, node, getPos, HTMLAttributes }) => {
const { view } = editor
const container = document.createElement('div')
container.classList.add("relative")
const img = document.createElement('img')
img.crossOrigin = "anonymous"
img.src = HTMLAttributes["src"]
img.style.width = HTMLAttributes["imgwsize"] + "%"
//More html stuff for styling and aligning the image ...
}
As far as I can tell the renderHTML() is always called even if the editor is set to editmode directly. This would explain to me that the render img tag loads the image and then the img tag in the addNodeView is recreated / replaced with a new one which triggers another call.
So why is this even an issue?
In Safari I experience some strange bug with caching and probably CORS. I can’t identify the whole problem as it’s not consistent. After some refreshes it vanishes and after some more refreshes it start’s to arise again.
