Option to dis-embed images
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 61.6k
- Forks
- 4.6k
- Avg merge
- 23h 49m
- Merged PRs (30d)
- 89
Description
I currently have a lot of images pasted into marktext. Sometimes, the image is embedded as a plaintext string (example below) instead of being saved as a local image file, and with a reference to that file inserted.
Example of truncated source code in markdown file for embedded image
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvkAAAERCAIAAABuIS9dAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAOFdSURBVHhe7P0JfBzHdeCP13T3dPfc9z2DwX3zBAnxJkWJom7LjhjZcRzHdhwnsbNO/s4viTf5xc5mN5vdTTY/J/YmXsWH4vikbMuyZUmmRIr3CZK4gcGNue/76rn+1YMBMAAGA4CkaBGub+IPhZ6qelXvvap6XVXdzSkUCgCBQCAQCARik4KV/kUgEAgEAoHYjKBYB4FAIBAIxGYGxToIBAKBQCA2MyjWQSAQCAQCsZlBsQ4CgUAgEIjNDIp1EAgEAoFAbGZQrINAIBAIBGIzg2IdBAKBQCAQmxkU6yAQCAQCgdjMoFgHgUAgEAjEZgbFOggEAoFAIDYzKNZBIBAIBAKxmUGxDgKBQCAQiM0MinUQCAQCgUBsZlCsg0AgEAgEYjODYh0EAoFAIBCbGRTrIBAIBAKB2MxwCoVC6T8Rd08+C1IhXygWTBb4Cr2ETwnJ4nUmlk5EHP4sIRSL5VIhAXBO8TpiNY3dK1jNhx3+BIcnE0qVUhoQKLxHIBCIXzHwL37xi6X/RNw9yQCwvPK97/zHP3z7bZtol0giq5EUrzuuWS/98K/+95t9EZJsaNHQgMaL1xGraexewWr+u3/1v79+wUbEVTtqJYDPLf2CQCAQiF8R1rmukwMgZu+9Pnbz5mAIxDOlqxCuQCbteGRnk26bgVe6tCkJjPtmBl69OuuLpEpXyqDFypqHnu00KxtJF+j7xv986dT/vcYc+MOvvXC45YmGYoqJ10fP/uQT/2zXPf7rv/YHH3lMA+T3avUiaQ85x86/PWgLxqOlSwuIBDJjxyMHm3TS965xYqto7F7Bav77n/jnC2T37x776J9+bCvQCku/IBAIBOJXhHWs6+SSmYTPbRu98dbP3/7JT8/3j/ePWEbnGO61TM+O4Z06tWLL5o51HFetV3701//n1bev9o9Oz0xYRsfmdQCZ9YQKNft1KlmNIAUi1lFH1DDDDD=" title="" alt="" width="485">
I am currently using this online tool to decode the plaintext strings, save the images locally, and inserting references to the stored files. The reason is that a single such embedded image makes the source code view rather unusable, as it takes up so much space.
There is a button to embed images (menu opened by left-clicking an image and pressing the little pencil "edit image"):
Would it be possible to make an equivalent button to dis-embed images, and save the (inefficient and source-code cluttering) plaintext string as a proper image? And ofc also inserting the reference.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the existing image menu opened by left-clicking an image and choosing the pencil edit action, then trace how embedded data:image strings are handled. Done means an equivalent dis-embed action saves the embedded image locally and replaces the plaintext image data with a reference to that file.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- electron, typescript
- Domain
- desktop, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100