Comments (4)
The context menu option for copying unselected image markdown was added for Chromium in #14 and for Firefox in #15.
It works with many image types including png, jpg, svg, webp, gif, and base64-encoded images.
Sometimes, right-clicking an image does not count as doing so, such as when the image is:
- a background image
- a
canvas
HTML element - an inline
svg
HTML element - within an
a
HTML element, sometimes (not sure why yet)
If the right-clicked image is only viewable when logged into an account, the markdown image will not render outside that account.
from stardown.
The context menu options for all remaining relevant contexts except video
and audio
were added in #25.
from stardown.
The new "Copy markdown of video" context menu option had some success for YouTube videos and GitHub-hosted mp4 files, but not Vimeo videos or Asciinema videos.
Here's the Vimeo video I tried. The copy option probably doesn't show up here because Vimeo buries the <video>
HTML element for each video under many other things.
Asciinema "videos" are just text automatically changing over time and do not use the <video>
HTML element, so the context menu option for videos cannot appear for them.
YouTube
Right-clicking a YouTube video shows YouTube's context menu at first, but right-clicking again then shows the browser's context menu. Selecting the new copy option for a YouTube video creates an info
object like this:
{
"menuItemId":"video",
"parentMenuItemId":19,
"viewType":"tab",
"mediaType":"video",
"frameId":0,
"editable":false,
"srcUrl":"",
"pageUrl":"https://www.youtube.com/watch?v=NaytZOiX3fs",
"modifiers":[],
"button":0
}
The video title is not there, but the URL can be used in markdown:
![video](https://www.youtube.com/watch?v=NaytZOiX3fs)
This markdown renders well in Obsidian and Discord, but not in GitHub or VS Code.
Here's how it renders here:
GitHub mp4
Right-clicking a GitHub mp4 such as the one on this page immediately shows the new copy option. It's info
object is:
{
"menuItemId":"video",
"parentMenuItemId":33,
"viewType":"tab",
"mediaType":"video",
"frameId":0,
"editable":false,
"srcUrl":"https://private-user-images.githubusercontent.com/39012918/214133712-5fa1146e-99d5-42c6-994c-9dfc1f37209e.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY1ODUwMzksIm5iZiI6MTcxNjU4NDczOSwicGF0aCI6Ii8zOTAxMjkxOC8yMTQxMzM3MTItNWZhMTE0NmUtOTlkNS00MmM2LTk5NGMtOWRmYzFmMzcyMDllLm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTI0VDIxMDUzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYzMjA0MDUwNDIxOWIxZjgzNDcyNGI5OTIzYmZmYmY2Yjk4OGM3NWI3N2JjMGM0OWNlNDczNDk3MzAzNzY3ZWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.r-kIkYmzU4S5EgNNYGI7K_FIIVu69dDzue5TBg2tJnY",
"pageUrl":"https://github.com/wheelercj/zq",
"modifiers":[],
"button":0
}
This time, srcUrl
is not an empty string, and pageUrl
is not the URL of the video. Using srcUrl
in the markdown doesn't appear to render well anywhere except GitHub, and only there with the [title](url)
syntax instead of ![title](url)
.
Here's how it renders with the exclamation mark here:
Here it is without the exclamation mark:
zq.intro.mp4
This is why Stardown now uses info.srcUrl
without an exclamation mark if srcUrl
is truthy, and info.pageUrl
with an exclamation mark otherwise.
The value of the example srcUrl
above appears to contain a JSON web token (JWT). To test whether this JWT is safe to share, I created a few more mp4s, uploaded them to GitHub, and copied the JWTs of the new mp4s. They were all different. Only their headers were the same. This gives me the impression that it's not the JWT that gives access to my account. The URL in the video above still works without the JWT when used in markdown, but leaving it doesn't seem to cause any problems.
from stardown.
An audio file URL in markdown doesn't seem to be able to render as an audio player anywhere, but can still be used in an ordinary markdown link in the [title](url)
format.
For example, Stardown's new "Copy markdown of audio" context menu option used on the first audio player on this site results in this markdown link:
[audio](https://html.com/wp-content/uploads/flamingos.ogg)
which renders as this link that downloads the audio file when clicked:
That's an .ogg
file, and it's different for .mp3
files. The same site's second audio player gives this markdown:
[audio](https://html.com/wp-content/uploads/flamingos.mp3)
which renders as this link that opens a site that plays the audio:
This feature works on audio elements in iframes, such as with the one on <audio>: The Embed Audio element - HTML: HyperText Markup Language | MDN:
[audio](https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3)
from stardown.
Related Issues (20)
- Text fragment generation timeout prevents write to clipboard, and the success indicator is still shown
- Keep selected block quotes when creating block quotes
- Markdown of videos HOT 4
- Markdown of YouTube videos from Chrome doesn't render well in Obsidian
- Firefox context menu item creation should only happen on installation
- "Clipboard write is not allowed" error from some sites in Firefox
- Embedded YouTube video gives wrong URL when copied HOT 1
- Source formatting copies links without titles
- Omit headers, footers, sidebars, etc. when copying entire pages HOT 2
- Existing HTML element ID removed from URL when copying link
- Tables with inconsistent row widths don't render in GitHub HOT 1
- Table cells are duplicated sometimes
- Table rowspans are ignored HOT 3
- Options page modernization
- Add settings for downloading copied images HOT 1
- Add settings for mirroring copied images to Stardown's server
- Add settings for mirroring copied images to the user's server
- Customize selection output with a template
- Copying Microsoft devblogs code blocks loses formatting
- Copy tables as CSV HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stardown.