element-hq / element-hq/element-web

Implement markdown media drag&drop into the composer

Open
#18,818 2 comments 0 reactions 0 assignees View on GitHub
A-Composer A-Media O-Occasional S-Minor T-Enhancement
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Your use case

### What would you like to do?
1. Currently the only way to reference images in markdown is first uploading the image in a separate message, view source, grabbing it's matrix link(ie `mxc://matrix.org/iZnsILDtTYjGzywTrOTuTcRv`) and then referencing that image in markdown with the this format `![](mxc://matrix.org/bwCUSPBbtcpwbBhBOJeERzDK)`

This is a pretty terrible experience, the whole handling of `mxc://` links is completely unfriendly to newbies and needing to do this as 2 separate messages is annoying.

What would be nicer is if I could drag and drop images into my markdown being composed and it displays as an inline image.

This would bring element in line with how github and many others handle images during composing markdown and would completely do away with then need to show a `mxc://` link to users.
___
2. I asked in the element matrix room why external image urls referenced in markdown(ie `![](https://example.com/image.jpg`) don't work and was given a generic "its for security" answer.

I don't really care to dispute that, but in that case when composing markdown that references external images then those images should be automatically converted and replaced with `mxc://` links when the message is sent.

### Why would you like to do it?

I have a lot of preexisting documentation and training written in markdown that I would link to send to people over matrix.

Currently most of the markdown looks great but none of the images rendering makes it completely unusable as actual documentation/training.

The process of manually uploading images to matrix first, grabbing, and then updating all the image referenced with `msc://` links is quite arduous and error prone. And it doesn't even seem to work in encrypted rooms, see: vector-im/element-web#18817

### Have you considered any alternatives?

_No response_

### Additional context

vector-im/element-web#18817 vector-im/element-web#18816

Contributor guide

Open the contributing guide

Research direction

Start by locating the markdown composer and its media upload and rendering entry points. Review linked issues #18817 and #18816, then trace how mxc:// links and external image URLs are handled, including in encrypted rooms. Done should cover the requested composing workflows without weakening the stated security constraints.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, typescript
Domain
content, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.