[Idea?]Browser sidebar panel for TW notes

85 views
Skip to first unread message

Simon Huber

unread,
Feb 19, 2018, 7:09:40 AM2/19/18
to TiddlyWikiDev
Hi all,

I've recently stumbled upon this firefox-panel for quick notes, called "NOTES"

This is the github repo: https://github.com/mozilla/notes ... it uses the popular WYSIWYG quill editor https://github.com/quilljs/quill

This panel is the same as the "notes" FireFox Test-Pilot experiment: https://testpilot.firefox.com/experiments


I've tried both and I've tried quill's capabilities on https://quilljs.com

I think such a panel would be great for editing tiddlers while browsing other web content, pasting stuff directly ... to just name two

I haven't looked deeper into the code and I haven't done something like this before, but it looks doable.

I'd like to ask you here - you are more experienced, you maybe can tell me immediately if it's not worth investigating further

Or maybe it's a great thing that could be done?

all the best,
BTC

Simon Huber

unread,
Feb 19, 2018, 8:56:54 AM2/19/18
to TiddlyWikiDev
sorry - it's the ck-editor they're using right now, though quilljs is included, too

coda coder

unread,
Feb 19, 2018, 9:19:21 AM2/19/18
to TiddlyWikiDev
Hi Simon,

Before you commit to the notes testpilot as a starting point, throw this into a bookmark URL field:

data:text/html;charset=utf-8, <html><title>Textfile</title><body contenteditable style="font:normal 16px sans-serif;background-color:%23f0fcff;margin:0;padding:0.5em;"></body>



Open it up and play.  You can even paste images.

I did have one that saved full html but I can't find it right now.

Either way, this saves LOCALLY... and without any third-party licensing and terms to negotiate.

Seriously, if you're going to try jigging TW into a sidebar, I'd start "here", not "there" :)

Coda

Simon Huber

unread,
Feb 19, 2018, 9:27:18 AM2/19/18
to TiddlyWikiDev
great @coda coder, any ideas how to take this further to edit tiddlers?

I think this should just integrate any editor toolbar and then we should try to make it edit tiddlers.

How can we take this short sentence to reality?

Simon

coda coder

unread,
Feb 19, 2018, 9:56:13 AM2/19/18
to TiddlyWikiDev
Well, this isn't perfect, but it's a start...



Here is the bookmark snippet:

data:text/html;charset=utf-8,%20<html><title>Textfile</title><iframe%20src="https://tiddlywiki.com"%20width="100%"%20height="100%"></iframe>



Don't forget to check "Load this bookmark in the sidebar".
Auto Generated Inline Image 1

Simon Huber

unread,
Feb 19, 2018, 10:19:06 AM2/19/18
to TiddlyWikiDev
hm... how do you do that with local files?

Andreas Hahn

unread,
Feb 19, 2018, 10:26:13 AM2/19/18
to tiddly...@googlegroups.com
That's pretty cool.

I imagine if you're running your TW in a node instance or on a server,
all you'd need to do would be to modify '$:/core/save/empty' to a custom
configuration and have that load in on the sidebar and you'd basically
be done. I also remember writing a plugin at some point so that you
could drag and drop images from webpages.

Big thanks for bringing up bookmarklets though coda! Would have never
thought of those.

/Andreas

coda coder

unread,
Feb 19, 2018, 10:35:24 AM2/19/18
to tiddly...@googlegroups.com


On Monday, February 19, 2018 at 9:19:06 AM UTC-6, Simon Huber wrote:
hm... how do you do that with local files?


This one is a bit prettier too...

data:text/html;charset=utf-8,%20<html><title>Textfile</title><style>body, .vw-iframe{margin:0;border:none;height:100%;width:100%;}</style><iframe class="vw-iframe" src="file:///path/mywiki.html"></iframe>



Or node/Tiddlyserver...

data:text/html;charset=utf-8,%20<html><title>Textfile</title><style>body, .vw-iframe{margin:0;border:none;height:100%;width:100%;}</style><iframe class="vw-iframe" src="http://127.0.0.1:99/path/my-wiki.html"></iframe>


coda coder

unread,
Feb 19, 2018, 10:43:27 AM2/19/18
to TiddlyWikiDev


On Monday, February 19, 2018 at 9:26:13 AM UTC-6, Andreas Hahn wrote:
That's pretty cool.


Yep, I like it a lot, though not necessarily for TWs.  The problem there is that dropped images surface at the dropzone widget, not at the tiddler.  With a regular "textfile" bookmarklet, the images are rendered right where you drop them.  Saving though... not so easy.  But then, I'm usually not intending to keep all my ramblings/notes... and if I *do* want to keep them, then I drag stuff into a TW later.

But yes, a TW plugin than handled dropped images "right here dammit" would be uber-cool.  Since the browser data/html protocol handles it directly, shouldn't be too hard for a TW wizard to figure out.

 
I imagine if you're running your TW in a node instance or on a server,
all you'd need to do would be to modify '$:/core/save/empty' to a custom
configuration and have that load in on the sidebar and you'd basically
be done.

Lost me there.  What would that do?
 
I also remember writing a plugin at some point so that you
could drag and drop images from webpages.


zackly.
 
Big thanks for bringing up bookmarklets though coda! Would have never
thought of those.


np. And again, a regular textfile bookmarklet is generally better (for the OP solution).  File/SaveAs is good enough (sans images).  And it doesn't *need* to be in the sidebar, either... create two, one of each.


Simon Huber

unread,
Feb 19, 2018, 10:45:07 AM2/19/18
to TiddlyWikiDev
@Coda,

the nodejs part works, but it doesn't work with local files

Simon Huber

unread,
Feb 19, 2018, 10:52:35 AM2/19/18
to TiddlyWikiDev

np. And again, a regular textfile bookmarklet is generally better (for the OP solution).  File/SaveAs is good enough (sans images).  And it doesn't *need* to be in the sidebar, either... create two, one of each.

my intention was not having something just good enough, I was thinking more in the "good" direction ;)

I think having a wiki open, but being able to edit tiddlers from a panel docked to other pages would be nice, having the wiki simultaneously updated.

Now I think a button from within a wiki that opens an editor panel in a new window can already do that - I did something like that with the sidebar once

let me see if I find that solution, then I'll tinker something in my alchemy laboratory

BTC

coda coder

unread,
Feb 19, 2018, 11:03:15 AM2/19/18
to tiddly...@googlegroups.com
Totally agree with that sentiment.  Tinkering around with this may not be the best solution - I was just throwing it out there.

Shame about the iframe not working with locals.  That's the sandboxing rules at play.  Don't see a solution to that just yet.  I'm guessing that the origin of the outer portion (data/html etc) is considered unique and anything we supply in the sandbox attribute is file:/// based so they're different.  Oh well...

More here, if anyone cares to dig in...

 

BTC

Simon Huber

unread,
Feb 19, 2018, 12:32:08 PM2/19/18
to TiddlyWikiDev
This would be a way I think: http://rocketdock.tiddlyspot.com/

It's a stripped-down view you can open in a new window, add tiddlers, edit them, there's also a dropzone to drag stuff into.
I'm not happy that the address bar shows up on top - I think I could make some pull requests for the tm-new-window message, some parameters... maybe also a solution for docking the window? Is that possible?

BTC

Simon Huber

unread,
Feb 19, 2018, 12:34:42 PM2/19/18
to TiddlyWikiDev
Another issue is that its operation slows down a lot when one changes browser tab to other pages (and that's what this should be good for)

does anybody know a why and a how for that?

all the best,
Simon

coda coder

unread,
Feb 19, 2018, 1:02:52 PM2/19/18
to TiddlyWikiDev


On Monday, February 19, 2018 at 11:34:42 AM UTC-6, Simon Huber wrote:
Another issue is that its operation slows down a lot when one changes browser tab to other pages (and that's what this should be good for)

does anybody know a why and a how for that?

The new window belongs to the original TW browser tab.  Browsers "optimize" performance on the current forward  tab (actually, I think they "downgrade" performance on the non-forward tabs).  So even though your floating window is essentially "forward", it's suffering the same downgrade in performance because it belongs to a background tab.

It's a matter of debate as to whether that's "a bug".  :/  It's certainly undesirable.  Did you try a few different browsers?

Simon Huber

unread,
Feb 19, 2018, 1:12:18 PM2/19/18
to TiddlyWikiDev
I've tried firefox, chromium and TiddlyDesktop

chromium is a bit faster than ff

TD throws javascript errors when trying to create Tiddlers - because of its framed nature maybe?
But TD wouldn't be the target anyway

For desktop browsers there should be some hidden settings somewhere to prevent them from throttling background tabs
I'll make some detective work

Simon Huber

unread,
Feb 19, 2018, 1:15:10 PM2/19/18
to TiddlyWikiDev

Simon Huber

unread,
Feb 19, 2018, 1:25:33 PM2/19/18
to TiddlyWikiDev
I have to correct: works on TiddlyDesktop , too

I don't get those js errors anymore, don't know why I got them before...

they may come back though...

Simon Huber

unread,
Feb 19, 2018, 1:44:00 PM2/19/18
to TiddlyWikiDev
The settings that appear to make it work faster when tab is in background, for chrome/chromium and firefox:

firefox (58) (goto about:config [do it at your own risk])

dom.min_background_timeout_value ... change from 1000 to something low (I tried 50)

dom.timeout.enable_budget_timer_throttling ... false

chrome/chromium (goto chrome://flags [do it at your own risk])

Pause background tabs ... disabled
Throttle expensive background timers ... disabled
(these settings would be accessible on TD , too - just in case)


sherlock H.

coda coder

unread,
Feb 19, 2018, 2:02:58 PM2/19/18
to TiddlyWikiDev

Kudos. Nice bit of tech-sloothing, Simon.

Simon Huber

unread,
Feb 19, 2018, 2:39:46 PM2/19/18
to TiddlyWikiDev


Kudos. Nice bit of tech-sloothing, Simon.


Thanks :)

I guess something like this then could wrap it in a sidebar?
https://gist.github.com/Noitidart/8728393

coda coder

unread,
Feb 19, 2018, 3:30:20 PM2/19/18
to TiddlyWikiDev
Looks interesting.  How is that meant to be used?

Simon Huber

unread,
Feb 19, 2018, 5:55:06 PM2/19/18
to TiddlyWikiDev

Looks interesting.  How is that meant to be used?
 
I don't know ¯\_(ツ)_/¯
I'll have to explore it deeper
 
Reply all
Reply to author
Forward
0 new messages