Presenting: SideEditor 2.0 - A live editor floating by the river side...

[Mat]

"Yes honey, of course I'll clean the attic... when Mat updates the SideEditor"

"Imagine there's no heaven. And no religion too. And that SideEditor is updated."

"The SideEditor will be updated. It'll be beautiful. And the Mexicans will pay for it!"

Well, NO MORE can you mock "updating of SideEditor" or use it for punch lines! NO MORE!!! Because...

SideEditor 2.0 is unleashed!

Version 2 gives an overall superior experience.

Especially the hover-to-focus is much improved.

And you can edit macros!

This is a plugin I rely on all the time - be it for writing or TW development.

Try it out.

<:-)

...now back to focus on EditorMagic which is also super important.

[Jon]

It certainly is beautiful - thanks Mat!

Regards

Jon

[Birthe C]

Mat,

Great humour and the latest and greatest SideEditor. It might be, that "Diamonds Are a Girl's Best Friend", mature women want SideEditor. 

No wonder you are going through laptops on a yearly basis ;-)

Do you remember the old laptop I found when buying a bag (summer 2016), it is still going strong, it has only been running around the clock all that time.

Birthe

[clutterstack]

Very cute.

Just a note: I can't quite reach the resize handle on Firefox or Safari for MacOS. I can activate the drag thingy at the top, even though on Firefox not all of it shows.

Chris

[Jon]

Hi Mat,

Some teething problems.

When I installed it, "Type the text for the tiddler 'no' " appears in the side editor and the tick mark to close the box isn't visible (so no way to close it) and the hover doesn't work.

I've disabled it and reenabled it a few times but always with the same result.

Perhaps I've got something which is interfering with it.

Looks like the attic might have to wait for a bit.

Regards

Jon

On Tuesday, 7 July 2020 17:21:47 UTC+1, Mat wrote:

[Ste Wilson]

Growls at Mat and goes to clean the attic...

[Mat]

Update SideEditor 2.0.3

@clutterstock and @Jon - thanks for reporting. I hope to have solved those issues now. (@Jon, if I didn't - what browser are you using?)

@Birthe - thanks for your kind words! Good to hear about your computer. I had to get a new one just two months ago. As noted, they last 1.5 years, it's like a clockwork and I've just come to accept it as part of life. Change laptop every 1.5 years, change socks every 1.5 months - I'm sure it's the same for everyone.

<:-)

[Mat]

Ste Wilson wrote:

Growls at Mat and goes to clean the attic...

;-)

Make sure you got the latest update that I just released.

<:-) 

[Jon]

Hi Mat,

installed the latest update but no change I'm afraid (using Firefox - latest version)

Regards

Jon

[Saq Imtiaz]

@Jon try it on an empty TiddlyWiki to ensure that it isn't just a clash with something else in your wiki.

[Jon]

Hi Saq/Mat,

Yes, it works fine on another wiki I have - I'll try and see what's causing the clash.

Regards

Jon

[Jon]

Hi Mat,

disabled all the plugins in my main wiki and unfortunately, it still shows the same behaviour - so I've no idea what it could be.

It's a shame I won't be able to take advantage of your superior offerings.

Regards

Jon

[History Buff]

Hi Mat,

I've been using SideEditor for a long time and love it! 

I attempted to upgrade, but am having an issue where the checkmark for save edits doesn't appear, but there is a right going arrow instead. When I click it, the tiddler text that I had entered disappears, but there is a window with $:/plugins/Twaddle/SideEditor/Button showing instead of the tiddler that I was trying to edit. There is still no checkmark, just a right arrow which does nothing. I cannot close the SideEditor when this happens. There may be something in my wiki that's causing it, but I'm not sure. I've tried it in two different wikis with the same result.

Damon

[Mat]

@History Buff and @Jon

Hm, maybe there are leftovers from the old plugin. If the checkmark is instead showing as an arrow, that's a strong indication (because where would the arrow otherwise come from). So do the following to clean out anything old:

Under Ctrlpanel > plugins> SideEditor - open the "contents" tab

See if there are any tiddlers that are "slim", i.e not in bold font. The "metrics" tiddler is no problem if it is "not bold" but all other tiddlers should be in bold. If there is any such tiddler, i.e in not-bold, then open it and delete it (which will restore the original and updated shadow tiddler).

Also, just to make sure, you can also "clean out" any temporary tiddlers you have that this plugin uses, i.e these two:

$:/temp/SideEditor/macrotext

$:/state/sideeditor

i.e delete these if you find them.

Please report back here.

Thanks.

<:-)

[History Buff]

After thinking about what you just mentioned, I tried installing it again only after I had uninstalled the old version and checking for those two you said could be deleted. That fixed the problem. Obviously something was leftover. Thanks for the advice.

Damon

[Saq Imtiaz]

@Mat maybe provide the code for a button that deletes all tiddlers from the previous version. Users can then install the plugin version after that.

[Mat]

Saq Imtiaz wrote:

@Mat maybe provide the code for a button that deletes all tiddlers from the previous version. Users can then install the plugin version after that.

Yeah, that's a good idea... Can't help but wonder why this is not a common problem with plugins?

<:-)

[Saq Imtiaz]

I think it's one of the advantages of packaging as a plugin, installing the new version automatically removes everything added by the previous version.

[clutterstack]

OK, I can use both the "bars" to move and resize the field now -- I don't think I could see the bottom one before; or perhaps I was not very observant. There's a standard-looking "corner" resize handle on the textbox that doesn't do anything in FF or Safari on my Mac, but now I'm questioning whether it's supposed to, because the other two handles seem to suffice.

[Mat]

clutterstack wrote:

OK, I can use both the "bars" to move and resize the field now -- I don't think I could see the bottom one before; or perhaps I was not very observant. There's a standard-looking "corner" resize handle on the textbox that doesn't do anything in FF or Safari on my Mac, but now I'm questioning whether it's supposed to, because the other two handles seem to suffice.

Good obvservation. I'll remove the default field resize corner in the next update, as it doesn't do anything. I'll also add tooltips to the SideEditor resize handles to make it clearer what they are... not that you asked for that but anyway ;-)

<:-)

[Jon]

Hi Mat,

I uninstalled then did advanced search for anything sideeditor-related and deleted those, then re-installed. 

Different behaviour this time but not working properly so must be clashing with something my end - not to worry, I'll wait for version 2.1.

With regard to the resize corner - it does do something, it alters the width of the box so I think worth keeping. It would be good to be able to alter the height of the box as well, if possible.

Regards

Jon

[_Phi / hpx1]

Hi,

on my end, SideEditor 2.03 is not compatible with TOCgeneric 2.1.0 (https://hchaase.github.io/HC-Plugins/).

When both plugins are activated, I have the same issues as John :

• I can resize the editor, input text and validate.
• I can not close the editor.
• the checkmark remains gray, no hover effect on the icon.
• hovering over the sidebar or story river doesn't have any effect on SideEditor either (SideEditor stays on top).

once I disable HCHaase's TOCgeneric, SideEditor works as intended (TiddlyDesktop & FF 77.0.1, TW5 NodeJS. Win10).

Anyone can confirm ?

I don't have the knowledge to investigate the problem but maybe it can help someone else ?

Anyway, thanks for the nice plugin.

Ph.

[Mat]

Update SideEditor 2.0.4

Only minor cosmetic updates.

@_Phi , @Jon

on my end, SideEditor 2.03 is not compatible with TOCgeneric 2.1.0 (https://hchaase.github.io/HC-Plugins/).

I can confirm this. That TOCgeneric plugin has some serious sh*t overrides going on - it even overrides when I use this:

#sideeditor {display:none !important;}

...and the SideEditor stylesheet is after the TOCgeneric stylesheet in the stylesheet orders (meaning: SideEditor should have the last "say").

I have no idea how TOCgeneric does that.

@hchaase ? - I believe this clash is totally from your side. Please look over your plugin.

I will need to investigate this more deeply but can't say when.

<:-)

[si]

Thanks Mat I'm glad to see this update - I use SideEditor all the time.

One thing: It seems you can no longer close the editor by clicking on the arrow again, and instead have to click the checkmark. Was there a reason you changed this?

[Mat]

si, happy to hear you like the SideEditor

One thing: It seems you can no longer close the editor by clicking on the arrow again, and instead have to click the checkmark. Was there a reason you changed this?

You're right. I changed the it for a more snappy behaviour, i.e instead of having to click twice to change the SideEditor content for antoher tiddlers content, you now do it with one click. Not good?

<:-)

[si]

I changed the it for a more snappy behaviour, i.e instead of having to click twice to change the SideEditor content for antoher tiddlers content, you now do it with one click. Not good?

Ah yes - I don't normally swap editors like that so I didn't think about this.

You're right that is better.

[Mat]

@Phi and probably @Jon (it is not clear if you, Jon, are also using the TOCgneric that Phi refers to above)

 _Phi / hpx1 wrote:

on my end, SideEditor 2.03 is not compatible with TOCgeneric 2.1.0 (https://hchaase.github.io/HC-Plugins/).

It turns out that TOCgeneric has an extra curly brace at the very end of its stylesheet which messes up things. He is using very powerful specificity inside his media prints which overruns other stuff. I would expect this to cause more problems than only for SideEditor. Anyway, unless fellow HCHaace corrects this, you can easily do it yourself. Just go to TOCgeneric's stylesheet and remove one single curly brace from the end of the title.

<:-)

[Mat]

errata:

 

Just go to TOCgeneric's stylesheet and remove one single curly brace from the end of the title.

should read "...from the end of the text"

<:-)

[_Phi / hpx1]

nice catch ! it fixed the 'compatibility' issue for me. Thank you very much.

[Mat]

Update: SideEditor 2.0.5

Again cosmetics, but still worth updating for I'd say.

<:-)

[amreus]

Thank you for this - I was thinking of something similar recently but since you have made it, and better than I ever could, I hope you don't mind some comments from the peanut gallery..

I don't like the hover feature.  It's too difficult  not to trigger the sidebar when going for the Check button, which is too small. I would just prefer to have the editor cover the sidebar stuff.  Then clicking anywhere off the editor textarea would close it, or perhaps the Escape key could close it also. Other than that, it's a very nice enhancement.

[Jon]

Hi Mat,

I don't have this plug-in and the SideEditor didn't work in my main wiki after I disabled all my plug-ins (but does work in another wiki).

So must be something else.

Regards

Jon

[Mat]

@amreus

Thanks for feedback, I appreciate it even if what you request would be a very different plugin as I'll explain. So, just maybe you should fiddle with a separate version after all! :-)

I don't like the hover feature. 

The very hovering is a main thing because I wanted it to be super easy to flip between the things. One could imagine some kind of clickable area that brings things into view but that would require a very different mechanism. The hovering is purely CSS based whereas clicking likely would be in wikitext (or JS).

 

Wit that said, I can mention that I am considering an "open in new window" feature for the editor, i.e a button that splits out the editor, somewhat like rQuickTid. (I also have very vague ideas about merging the two, to make it possible to create new tiddlers via the SideEditor).

It's too difficult  not to trigger the sidebar when going for the Check button, which is too small.

I can agree with this. I should probably make the check button bigger. Possibly add some transparent margin around also to prevent mis-hovering.

I would just prefer to have the editor cover the sidebar stuff. 

One downside then, at least on a 14" screen like mine or smaller, is that you can't(?) have an editor that is wider than the sidebar. Maybe you have a bigger screen. But I recall someone putting an editor in one of the sidebar tabs. Can't remember who or the name of the plugin if there ever was one. Possibly it was Mohammad... not sure.

 

Then clicking anywhere off the editor textarea would close it, or perhaps the Escape key could close it also. Other than that, it's a very nice enhancement. 

 I didn't experiment with key commands yet but again, it's not really for CSS which is the key "mechanism" in SideEditor. 

Since you did consider building your own thing, please feel free to mess around with the SideEditor. Or any other thing I've made for that matter. 

<:-)

[Mat]

@Jon

may I ask which plugins you had installed? And when you say you disabled them, did you delete them or merely click disable? I'm not really sure what clicking disable does and I can imagine that, particularly, stylesheets are still affecting things. 

But again, which plugins did/do you have installed, if you don't mind me asking?

And it's not Stroll by any chance? Which was just updated for this reason.

Thanks

<:-)

[Jon]

Hi Mat,

Yes, I had disabled them rather than remove them. So given what you've said, I've removed those and the ones left are:

When I get time, I'll copy the wiki, and remove all the plugins. If it doesn't work then, it must be something else.

Favourites

Highlight-searched-text

encryptTiddler

2click2edit

ContextPlugin

Tiddlymap

Visjs (for above)

commander

pinboard

refnotes

SocialCalc

tw5-checklist

Menu Bar

Appear

TabLinks

Uni-link

Regards

Jon

[Mat]

@Jon, OK, that's a longish list of plugins to it's nothing I can test directly, so yes please, do copy your wiki and show me as you propose.

<:-)

[Jon]

Hi Mat,

copied wiki, deleted all plugins apart from core.

Searched for anything SideEditor related in advanced search and deleted that. 

Saved & refreshed and then re-installed SideEditor but same problem, so it must be something to do with my wiki but what I've no idea!

Regards

Jon

[Mat]

@Jon, 

If I understand you right, you thus only have the SideEditor plugin installed. Here are some tests:

1) So, it can be a separate stylesheet that is not part of a plugin. You can list all stylesheets by typing <<tag $:/tags/Stylesheet>> to get a tag button which, when clicked, shows all stylesheets. 

The first thing to look at is which, if any, stylesheets are listed below the  $:/plugins/TWaddle/SideEditor/Stylesheet (the lower down the list the higher priority conflicting css has, assuming the css instruction is written in the exact same way). 

IF there are stylesheets below that SideEditor stylesheet, it would be good if you reported them here.

1b) The next test is to, inside that tag dropdown, drag'n drop SideEditor stylehseet to the bottom of the list and test if this makes the SideEditor perform correctly.

2) If that still doesn't do it, you can check for any overwritten core tiddlers by going to Ctrlpanel > Info > Basics ...and at very bottom click on the magnifying glass. You could try to delete any such tiddlers (which will restore them to their original shadow tiddler). Test SideEditor after each deletion and if try to remember which one it was you deleted so you know who's the culprit, and if you feel it is relevant then report your finding here.

3) There may also be locally defined "style blocks" somewhere, i.e not full stylesheets. These can be located by doing an advanced search for: <style>  What to do kind of depends on what you find. You could try deleting one tiddler at a time and see if that makes the SideEditor work. If you do find a specific tiddler/styleblock, it would be good if you could copy it to here.

<:-)

[Jon]

Hi Mat,

Yes, only have the SideEditor plug-in installed.

As I mentioned, SideEditor works fine in another wiki I have, but not in this one.

So, I copied the 'faulty' wiki and followed your instructions testing each time.

This is what is left:

<<tag $:/tags/Stylesheet>>

$:/themes/tiddlywiki/snowwhite/base

$:/themes/tiddlywiki/vanilla/base

$:/plugins/TWaddle/SideEditor/Stylesheet

Overridden Shadow Tiddlers:

$:/config/AutoSave

$:/SiteSubtitle

$:/temp/advancedsearch 

<style>

system:

$:/core

$:/plugins/TWaddle/SideEditor 

shadows:

$:/core/templates/static.area

$:/plugins/TWaddle/SideEditor/Main

$:/plugins/TWaddle/SideEditor/readme 

In this state, I deleted SideEditor and re-installed it, but strangley, the problem persists - the two handles operate but there's no way of closing the box.

Over to you sir!

[Jon]

Mat - found the problem.

Will report back later.

[Jon]

Hi Mat,

I searched for 'Style' to see what else would come up and found a tiddler called 'SideEditor' with details below:

created	20150601094857763
creator	Mat
modified	20150611060903666
modifier	Mat
tags	$:/tags/Macro $:/tags/PageTemplate
title	SideEditor
tmap.id	87d8d047-cc02-4e76-be6e-e28658136027

Once deleted, everything worked fine.

Was this the previous incarnation, perhaps not part of a plug-in?

Regards

Jon

[Mat]

@Jon

Aha, good catch! I have no recollection of a separate tiddler named such so I'd think it is something much older, even before the version that was before version2. Or, considering it is not a system tiddler i.e not prefixed $:/, maybe it is some customizations someone (you, someone else, I?) has made to test something. Regardless, good you found it!

<:-)

[Birthe C]

Mat,

First time I heard about SideEditor was in Twaddle, and at that time it was already a plugin. I remember quite clearly, because it was a turning point for me playing with CSS ;-)

I do not know if this had something to do with it, but you have had some versions of your tiddlyspot set up wiki with SideEditor in it. I remember due to having had a small problem with it one time.

Jon and Mat,

Admit it is kind of funny that it turned out to be SideEditor no matter the origin ;-D

Birthe

[Jon]

I think it could have been something that escaped from your laboratory, Mat.

But don't worry, although I've had to move it out of my current wiki, it will live on in my previous backups.

Regards

Jon

[Mat]

@Birthe

First time I heard about SideEditor was in Twaddle, and at that time it was already a plugin. I remember quite clearly, because it was a turning point for me playing with CSS ;-)

I started looking into CSS after someone on the forum, maybe around 2010, said something along "...you should learn CSS, then you can really do powerful things in TW". It has proven to be true. Even if, presumably, JS is even more powerful but it has other limitations.

 

I do not know if this had something to do with it, but you have had some versions of your tiddlyspot set up wiki with SideEditor in it. I remember due to having had a small problem with it one time.

Yes the SideEditor quickly became ubiquitous for me. As I just noted in another thread, I don't understand how people use TW - and especially develop in TW - without something that shows their modifications right away. ...or maybe it is possible to hook up external editors (because that's what assume people use) and have them update the view mode tiddler IRL somehow..?

Jon and Mat,

Admit it is kind of funny that it turned out to be SideEditor no matter the origin ;-D

Yeah, after all that searching. But as Jon indicates, it might have been something "user added".

<:-) 

[amreus]

Thanks for reply and eplaination.

I somewhat accidentally found http://j.d.fullscreen.tiddlyspot.com/ which, when preview is turned on, is about what I pictured making. 

On a side note, there appears to be many, many existing solutions for TW. How on earth are we supposed to find them?

[Mat]

amreus wrote:

I somewhat accidentally found http://j.d.fullscreen.tiddlyspot.com/ which, when preview is turned on, is about what I pictured making.  

Oh, I have not seen that! 

On a side note, there appears to be many, many existing solutions for TW. How on earth are we supposed to find them?

Hopefully someone like, for example, you will come up with a good solution for it... it is a HUGE problem for the community. Various attempts have been made but it is IMO not solved in a satisfactory way yet.

<:-) 

[Jon]

Hi Mat,

After using SideEditor for a week or so, it's now my default method - really useful!

Thanks

Jon

[Mat]

Jon wrote:

After using SideEditor for a week or so, it's now my default method - really useful!

Happy to hear that!

<:-)

[amreus]

I too am still using SideEditor - quick and convenient. I like the recent addition of the "toolbar" and buttons. 

I am experimenting with styles in TW and I think SideEditor is over-riding my stylesheet. Can you confirm?  I made a sandbox site here:

http://beach.tiddlyspot.com

It is a version 5.1.22 empty other than SideEditor and a Stylesheet.

Thanks

[Mat]

amreus wrote:

I too am still using SideEditor - quick and convenient. I like the recent addition of the "toolbar" and buttons. 

(sssh, it ain't public yet)

I am experimenting with styles in TW and I think SideEditor is over-riding my stylesheet. Can you confirm? 

You're right! And I found the bug. Will make (not announced) release tonight but if you're in a hurry: At bottom of  $:/plugins/TWaddle/SideEditor/Window/Stylesheet  (circa fourth row from bottom) I mistakenly have included a </style> tag. If it is removed, things work.

Thank you very much for reporting.

<:-)

[TW Tones]

Mat,

Attached is a sideBar width button, that opens a modal, to allow the SideBar width to be be modified. 

It works well for my usage of Sidebar editor, especially on my widescreen desktop monitors. I share it for two reasons;

• Perhaps you could add it to the sidebar editor window (steal the code or idea) if you want
• It raises the issue of managing the third Dimension the z-index across tools. 
• Do you have a design suggestion for my independent tool so it does not clash with sidebar editor
• Is this one argument for you incorporating the side bar width feature in Sidebar editor?

Regards

Tones

On Wednesday, July 8, 2020 at 2:21:47 AM UTC+10, Mat wrote:

"Yes honey, of course I'll clean the attic... when Mat updates the SideEditor"

"Imagine there's no heaven. And no religion too. And that SideEditor is updated."

"The SideEditor will be updated. It'll be beautiful. And the Mexicans will pay for it!"

Well, NO MORE can you mock "updating of SideEditor" or use it for punch lines! NO MORE!!! Because...

SideEditor 2.0 is unleashed!

Version 2 gives an overall superior experience.

Especially the hover-to-focus is much improved.

And you can edit macros!

This is a plugin I rely on all the time - be it for writing or TW development.

Try it out.

<:-)

...now back to focus on EditorMagic which is also super important.

[amreus]

Mat,

Just wanted to show an image about a possible usability issue. I somehow managed to push the editor's vertical slider all the way up and now I can't move the editor  back down.  The "handle" is gone and there's nothing to grab as far as I can tell.

[Mat]

amreus wrote:

 I somehow managed to push the editor's vertical slider all the way up and now I can't move the editor  back down.  The "handle" is gone and there's nothing to grab as far as I can tell.

Ah, I need to deal with that. Meanwhile, you can open $:/plugins/TWaddle/SideEditor/Metrics and change the "top" field to e.g 50. This is the distance from top, which is currently presumably set to 0 in your wiki.

<:-)

[Ton Gerner]

Hi Mat,

Tried version 2 of your SideEditor at TiddlySpot and love it, especially the possiblity of 'Open in a new window'.

A few remarks:

1) I don't see a way to cancel the SideEditor (other than using the Save and close button (√))
2) When opened in a new window:
2.1) The Save and close button (√) disappeares from the toolbar 
2.2) Resizing the window (width > 960px) results in
2.2a) Change in layout (centralized with margins > 240px)
2.2b) The toolbar disappears

See attached screenshots

Cheers,

Ton

[Mat]

Ton, thanks for your feedback.

1) I don't see a way to cancel the SideEditor (other than using the Save and close button (√))

Correct. You can't because you're modifying it live, which is what I'm after. To cancel would mean there would have to be a second copy of it all (like with draft tiddlers). Macros are an exception and do use a second temporary copy (because they, unfortunately, can't be edited live).

 

2) When opened in a new window:
2.1) The Save and close button (√) disappeares from the toolbar 

Overall, there are intentional slight differences in the menu bar UI between the in-wiki editor and the break-out window, because they are intended for different uses. But I DID try actually try to include a "Save and close" button but didn't get it to work. You can see it in the shadow $:/plugins/TWaddle/SideEditor/Window i.e:

<!--Closing window doesn't work here (but it does work for delete button)
<a href="javascript:open(location, '_self').close();">
<$button tooltip="Save and Close editor"
...

(The javascript does actually work, see comments earlier in this thread, but apparently just not at that place.)

The compromise was to omit the button and instead one has to close by closing the window or switch to "in-tiddly editor". The saving is, again, not needed as things are live edited. Except macros but these do get a button to save, also in the separate window. 

2.2) Resizing the window (width > 960px) results in
2.2a) Change in layout (centralized with margins > 240px)
2.2b) The toolbar disappears

Intentional. As noted in the readme, this is "distraction free" mode. The toolbar appears if you hover over it.

<:-)

[Ton Gerner]

Hi Mat,

Thanks for clarifying.

Cheers,

Ton