Storing Tiddlers in the Clipboard

[GameDungeon]

I made this a while ago but relied on a PR to work. I thought I would share it properly now that the PR was merged in 2.3.

This is a Tamper Monkey script that works as an example for using JS to store a tiddler in the clipboard. This particular script allows you to highlight some text, right-click it, move down to the tamper monkey menu, and hit copy as tiddler.

It would be relatively easy to create a copy-and-paste tiddler plugin if the demand exists.

// ==UserScript==
// @name         Copy as Tiddler
// @version      0.1
// @description  Copies text to a tiddler format.
// @author       You
// @match        *://*/*
// @run-at   context-menu
// ==/UserScript==

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

(function() {
    'use strict';

     const data = {
         url: window.location.href,
         text: getSelectionText(),
         title: document.title,
     };

    /*
    This is the way you are supposed to do it. TiddlyWiki does not support it at the time of writing this.
    The way I do it is depricated.

    https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api/

    navigator.clipboard.write([
      new window.ClipboardItem({
        ["web URL"]: "data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(data)),
      }),
    ]);
    */

    function listener(e) {
        e.clipboardData.setData("URL", "data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(data)));
        e.preventDefault();
    }

    document.addEventListener("copy", listener);
    document.execCommand("copy");
    document.removeEventListener("copy", listener);
})();

[GameDungeon]

This is originally from this thread a while back which gives information about doing this with drag-and-drop boxes if any is curious:

Creating Boxes that can be Drag and Drop Imported as Tiddlers

The code above is a tamper monkey script. TamperMonkey is a browser extension that allows you to run custom js on websites. That code creates a draggable box that can be dragged into TiddlyWiki as an import for a tiddler. Due to how TiddlyWiki is already set up, nothing needs to be done to enable you to drag a tiddler in. You need to create the box to be dragged, and importantly set it to be draggable. In this case, I add some text to it. var parent = quote.querySelector(".test"); const box = …

[GameDungeon]

Something I just remembered to add, This probably won’t work in firefox, but it should work in every other major browser. Firefox is really strict about what can be stored in the clipboard.

[CodaCoder]

@GameDungeon

This probably won’t work in firefox

Intriguing. Did you try it? I use only Firefox all-day, every day, work (sleep) and play. I use TM a lot, too, along with AHK, making my “TW life” much, much easier. I don’t recall ever having an issue with FF and clipboard data.

[GameDungeon]

@CodaCoder

along with AHK, making my “TW life” much, much easier. I don’t recall ever having an issue with FF and clipboard data.

Actually looking at the specific implementation I have above it might still work, but firefox generally does not like wonky data types like the ones for tiddlers. There is also a bunch of stuff like this all over the clipboard docs.