Edge Link MD: When pasting URL copied from Edge address bar, convert it to a Markdown link

Plugins
1

TL;DR: I found that if I copy a URL from Microsoft Edge's address bar, the HTML format in Windows clipboard contains not only the URL but also the title. Therefore, it is possible to paste it as a markdown link with both title and URL without additional web requests. Initially I tried to change Joplin's source code but later realized I can just make a plugin, so I made it. Here is the link:

Tested on Windows 11 x64, Joplin v2.6.10 and Edge Dev v99.0.1150.2 .
Default keyboard shortcut is Ctrl+Shift+V, but you may change whatever you like. Just not Ctrl+V, it won't work.

joplin_edgelinkmd_demo

(Following is just my exploration journey. Feel free to ignore it.)

Previously there was already some discussion on the link preview feature. The main concern of this feature is that it introduces additional web request, which may have a negative impact on the privacy side. See Feature request: link preview - Features - Joplin Forum (joplinapp.org).

However as an Edge browser user, I noticed that when I try to copy a link (by put my cursor on the address bar, press Ctrl+A then Ctrl+C) and paste it into Typora, a Markdown link with title and URL filled in will be generated.

Interested in how Typora build the Markdown link, I used InsideClipboard from nirsoft to inspect my clipboard after copying the URL. Here is the screenshot.

image
image757×225 47.2 KB

It seems that Microsoft Edge introduced a new clipboard format named Link Format on Aug 2020, which is just a JSON with all the metadata of a link. An example of such JSON is shown below. Beside this new clipboard format, Edge also sets HTML Format and Titled Hyperlink Format, but InsideClipboard can't read them.

{
    "domain": "microsoft.com",
    "preferred_format": "text/html;content=titled-hyperlink",
    "title": "Announcing a new way to paste URLs, Link format! - Page 3 - Microsoft Tech Community",
    "type": "website",
    "url": "https://techcommunity.microsoft.com/t5/articles/announcing-a-new-way-to-paste-urls-link-format/m-p/1600094/page/3"
}

If Typora as an Electron app can implement this feature (automatically generate Markdown link), there should be no problem for Joplin to do so. I tried to create a very basic Electron demo, which seems to able to get both the title and URL when copied from Edge (but sadly not other browsers), using the clipboard.readHTML() method. (It seems to use the HTML Format clipboard format.) Here are the results of various clipboard functions after I copied the link in previous JSON example from Edge.

// console.log(clipboard.availableFormats())
[ 'text/plain', 'text/html' ]

// console.log(clipboard.readText())
https://techcommunity.microsoft.com/t5/articles/announcing-a-new-way-to-paste-urls-link-format/m-p/1600094/page/3

// console.log(clipboard.readBookmark())
{ title: '', url: '' }

// console.log(clipboard.readRTF())


// console.log(clipboard.readHTML())
<a href="https://techcommunity.microsoft.com/t5/articles/announcing-a-new-way-to-paste-urls-link-format/m-p/1600094/page/3">Announcing a new way to paste URLs, Link format! - Page 3 - Microsoft Tech Community</a>

It can be seen that the return value of clipboard.readHTML contains all the info to build a Markdown link, therefore eliminating the need to initiate additional requests as well as the risk of privacy leak. Although this feature is only applicable to Microsoft Edge user, but considering the market share of Windows and the number of users using its default browser, this feature should make the life easier for a lot of people.

If any developer is interested in working on this, feel free to do so. I would like to contribute on this feature as well, yet I am not sure where to begin with. Perhaps in the editor code? I am not sure. It would be great if some suggestions could be provided.

Update: Demo implemented. Only copying from address bar is supported. If right click on a link and choose copy link, only raw url will be pasted without title.

2

With some tinkering a prototype seems to work, but only in CodeMirror. See the demo GIF below.

joplin_copy_codemode5

// joplin\packages\app-desktop\gui\NoteEditor\NoteBody\CodeMirror\CodeMirror.tsx
const editorPasteText = useCallback((clipboardText) => {
	if (editorRef.current) {
		editorRef.current.replaceSelection(clipboardText);
	}
}, []);

const editorPaste = useCallback(() => {
	var clipboardText = clipboard.readText();
	const clipboardHTML = clipboard.readHTML();

	// parse link if possible
	if (clipboardHTML) {
		const linkRegex = /<a href="(.*)">(.*)<\/a>/gm;
		const linkMatchResult = linkRegex.exec(clipboardHTML);
		// length 3: full text, url, title
		if (linkMatchResult !== null && linkMatchResult.length == 3) {
			const linkURL = linkMatchResult[1];
			const linkTitle = linkMatchResult[2];
			clipboardText = `[${linkTitle}](${linkURL})`;
		}
	}

	if (clipboardText) {
		editorPasteText(clipboardText);
	} else {
		// To handle pasting images
		void onEditorPaste();
	}
}, [editorPasteText, onEditorPaste]);
3

Ah, glad to find it just works as expected in rich editor mode (TinyMCE). No need to do anything. Seems that only the changes in CodeMirror's code is needed.

joplin_copy_codemode3

4

With some further examination, it seems that there is already some code in HtmlToMd.ts to accomplish the task of converting HTML to Markdown, but they are only invoked when using the rich text editor. As there are some limitations on the rich text editor, I haven't use it for a long time and has disabled access to it via some custom CSS.

Here are some issues (questions?) with current implementation:

  1. Users may expect the (code?) editor to behave as a normal plain text editor, and may find this auto conversion surprising and unexpected. Perhaps this feature can be implemented as an opt-in one, with a toggle in the settings and is by default disabled.
  2. I am not sure whether to reuse the existing HtmlToMd implementation. It works perfectly but seems to be too heavy for this simple and trivial task.
  3. Perhaps I should consider compile the regex to a RegExp object to improve runtime prerformance, or is this unnecessary optimization? By the way, there is an anchorRegex in HtmlUtils.ts which achieves the same goal of parsing HTML a tags, but it's not exported. Should I use that?
  4. Current implementation relies on Edge's custom copy-paste behavior, and may subject to change in future versions. Is it possible / necessary to implement this feature as a plugin and can be updated independently from the main Joplin program? (It seems that currently there is no way for extension to hook paste operation, see How to handle paste event in CodeMirror script? - Development / Plugins - Joplin Forum (joplinapp.org))
5

With some more tinkering I managed to create a simple plugin, Edge Link MD, which just automatically converts the URL to a markdown link if the URL is copied from Microsoft Edge address bar. By default it uses Ctrl+Shift+V as keyboard shortcut, but you may change it or just use the menu item. Hope this helps other Windows users.

3 Likes
6

any reason why it is not listed in Joplin Plugins?