Drag n' drop links from browser to TW

[nakedmind]

Hi there!

Currently when I drag an html link from a browser into the text editor within a tiddler I'm editing, I get the link URL.

Is it possible to modify this behavior so that something like this: 

             [[Text of the link|URL of the link]]

is inserted instead?

[TonyM]

Hi,

This question has being asked many times, including by me, I do not recall the answer. However since my knowledge has improved I imagine we can make something like this work.

If you drop a link into a text editor you only get the link, if you drop it onto a tiddlywiki it imports like tiddlers and creates an "untitled N" tiddler. But this tiddler only contains the link..

I have noticed if I accidentally drop, a dragged link on the favourites bar of the browser, it creates a favourite. Link and Title. If you then drag this to the wiki, it creates a tiddler "untitled N" containing both the link and the title

So we know all the information is available. I believe a custom drop area may be able to use thing incoming information to create a "link" tiddler - or the form you ask, but I expect you will need another step to place this in your wiki text.

Regards

Tony

[nakedmind]

Hi Tony,

I have noticed if I accidentally drop, a dragged link on the favourites bar of the browser, it creates a favourite. Link and Title. If you then drag this to the wiki, it creates a tiddler "untitled N" containing both the link and the title

I tried dragging an item in chrome's favorites bar to a wiki. But it creates a tiddler containing only the URL of the link.

 

So we know all the information is available. I believe a custom drop area may be able to use thing incoming information to create a "link" tiddler - or the form you ask, but I expect you will need another step to place this in your wiki text.

This might be a bit more involved. I think I will just stick to my manual approach for now. Thanks anyway.

Regards,

Eric

[TonyM]

Eric,

Keep an eye on the forum. This must be solved. Tiddlyclip may help. And perhaps the chrome/ff addon one tab may help you.

Sorry I did not mention I use the latest firefox.

Regards
Tony

[nakedmind]

Hi Tony,

This must be solved. Tiddlyclip may help. And perhaps the chrome/ff addon one tab may help you.

I agree. Little things like this make the user experience with TW smoother. 

The ideal for me is to be able to drag selected text from a page and paste it to a tiddler editor with the html format converted to wiki markup. I think just covering the basic stuff like heading size, bold, italics, lists, monospaced blocks, and links is enough to make it really really useful.

Regards,

Eric

 

[ILYA]

It would be really cool if some kind of template (or url parsing macro) could be used.
For example I found myself spending too much time converting github links to following format

[[<org>/<repo>#<pr_number>|https://github.com/pull/<pr_number>]]

BR,
ILYA

--
Sent from my Android device with K-9 Mail. Please excuse my brevity.

[Jeremy Ruston]

Historically, the problem with drag and drop has been that browser implementations have been inconsistent and brittle. Nowadays things have improved a lot, and it is probably a good time to look again at how TW5 handles drag and drop and importing.

Focusing on drag and drop, there is some instrumentation built into TW5 that lets you see more details under the hood. In particular, it lets you see exactly what the browser receives when an item is dropped. I’ve just added a minor improvement to the prerelease that makes things clearer.

To enable the instrumentation, create a tiddler with the tag $:/tags/RawMarkup and the following content:

<script>

$tw = {log: {IMPORT: true}};

</script>

Then save and restart. When you subsequently perform a drag and drop operation you should see additional information in the browser JavaScript console (see below for an example).

In the example below, I dragged a link to GitHub into a TW5 running in Chrome. You can see that Chrome offered three data types, and TW5 chose the URL type.

The HTML content type does include the text of the link as well as the target, but it is encoded in HTML which needs parsing.

I found that Firefox makes the same information available, but Safari only presents the URL, and doesn’t provide the text of the link.

Based on those experiments, I think the problem in the OP reduces to “how can we convert imported HTML content into wikitext”; the drag and drop part is straightforward.

Converting HTML content into wikitext isn’t totally straightforward but I have started some work on it in the text-slicer plugin. Of course, the specific case of picking out a hyperlink looks easy, but in fact the HTML is structured differently on different browsers, and is in any case indistinguishable from the general case of dragging a selected fragment of HTML content.

Best wishes

Jeremy

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/502CC35A-255A-4C00-8E4E-6F38C26A142E%40gmail.com.
For more options, visit https://groups.google.com/d/optout.

[TonyM]

Nakedmind,

Not withstanding Jeremys pointers and direction, since you now have broadened your requirements to html generaly, one way to import fully formatted html is to use a visualEditor plugin and past html content into the visual editor.

The tiddler will contain html but there is room to include wiki text if you then change the tiddler type.

Tony

[nakedmind]

Hi Jeremy,

To enable the instrumentation, create a tiddler with the tag $:/tags/RawMarkup ...

Thanks! This was really helpful. I tried it and was able to see the js code involved. I modified dragndrop.js a bit to do some testing.

I tested in both chrome and ff and and I found that dragging links produced html with same structure;.  i.e., the html data starts with "<a " and ends with "</a>".

So if this is detected, then it can be assumed the dragged html is a link and can be parsed and then imported as something like this: 

      

   [[Text of the link|URL of the link]]

Eric

[nakedmind]

For anyone interested, I found a bookmarklet workaround to quickly copy links from chrome and paste it in wikitext format in a tiddler.

https://gist.github.com/bradleybossard/3667ad5259045f839adc

Just modify it to use TW5's wikitext link format.

Regards,

Eric