core
Monorepo for Tangled tangled.org
Star 1.4k
Fork 234
Watch

web: insert uploaded images as <img> with alt, src, width and height #4705

Merged botless.tngl.sh
targeting master from boltless.me/core:web-editor-img-tag
Merged opened by and assigned to botless.tngl.sh
targeting master from boltless.me/core:web-editor-img-tag

Images uploaded into the markdown editor (file picker, paste, or drop) are now inserted as an HTML <img> tag instead of ![alt](url):

<img alt="Image" src="https://tangled.org/blob/<did>/<cid>" width="640" height="480">
  • width/height are the pixel size of the prepared (possibly resized) file, read with createImageBitmap, so the rendered page reserves space before the image loads.
  • The selected text still becomes the alt text and stays selected after insertion. It is attribute-escaped (&, ", <) and collapsed to one line so the HTML block doesn't break.
  • The sanitizer already allows alt, src, width, height on img, and rewrites src the same way as markdown images, so blob/camo handling, pending-blob upload (matched by CID), and the local preview swap work unchanged.

Testing: added uploadedImage cases to markdownFormat.test.ts (alt from selection, escaping, fallback alt); vitest --project server on markdownFormat + markdown tests pass, svelte-check 0 errors, prettier and eslint clean. Not exercised in a running browser session (uploading needs a signed-in account).

Commits 1
web: insert uploaded images as <img> with alt, src, width and height