Direct open in the new window in plugin sideeditor

I learned @twMat’s SideEditor plugin from this post. Edit in a new window is pretty useful for my two/three monitor setup.

My TW uses Notebook theme and locate in a monitor with portrait direction. Consequently, there are no space in left and right to display the editor in the Sidebar.

The autofocus feature will hide the editor window in most cases.

Could I directly activate SiteEditor in a split-out window with the right arrow in the viewer toolbar?

Hi @Zheng_Bangyou , try out the attached tiddler by drag’n dropping it onto your TW. It merely overwrites the SideEditors tiddler toolbar button to get the functionality you request. But it is definitely a hack and could be more polished (for example, the “internalize editor” button is still there but you should close the editor by closing the window).

I also tested to modify the SideEditors pagecontrol button but realized that I would then have to add a “save tiddler” button in the external window. But you didn’t say you needed that pagecontrol button anyway. Besides if you have the external SideEditor open, it is possible to create new tiddlers by clicking the plus which saves the current tiddler (and, if that is previously unsaved it converts the first row into the title etc) so if you’re modifying an exising tid and want a new one then it should be simple.

$__plugins_TWaddle_SideEditor_Button.json (2.2 KB)

2 Likes

@twMat Very appreciate it for your quick response. It is a perfect solution for my multiple monitors. I can write tiddler in one monitor with maximum space and simultaneously view output in another monitor.

Just update the icon for the button.
$__plugins_TWaddle_SideEditor_Button2.tid (2.1 KB)

2 Likes

@twMat Thanks for the nice plugin again. It is part of my daily usage now. Just a small problem now.

It is laggy to edit text in the new window, especially multiple tiddlers are opened in the story river. I guess it is related that TW updates tiddler after every keystroke.

Could we reduce the frequency of updating tiddler?

If relevant to your application if you hide the viewing of the tiddler you are editing, the refresh may not be needed, however this may defeat the purpose, if you want to “view and edit your tiddler/cake at the same time”.

  • If so perhaps look at simply using the preview inside the tiddler edit.

hi @Zheng_Bangyou

Can you test if there is a difference if you edit a regular tiddler versus a macro in the SideEditor? As you may know, macros, i.e a tiddlers tagged $:/tags/Macro are not “live edited” in the SideEditor because macros definitely ripple through the whole system. So macros get a special treatment in the SideEditor and the user much klick the special checkmark in In the SideEditor to apply the edits.

If the lag happens regardless, then I have no idea how to solve it other than general “speed up” tricks that TW_Tones refers to.

If there is no lag for the macro then I guess the same technique used for macros could be used for all tiddlers. It makes the editor “not live” though because what you temporarily edit is a copy in a system tiddler and when the special checkmark is clicked this is copied to replace the text in the tiddler you appear to be editing.

Hi @twMat,

I love the external window for the SideEditor. I tested it for regular tiddlers and macro tiddlers and only the regular tiddlers are live edited. The macro tiddlers were not just like before.

Question - is there a way to have it remember the size of the window? For my purposes the default window size is a too big. Also there is way too much whitespace for my tastes to the left and right. Can this be changed?

Thanks so much!

Yea, in the plugin you can go to the tiddler: $:/plugins/TWaddle/SideEditor/Main
…and scroll down pretty far to this part:

<$button tooltip="Open in separate window">
⋮
height={{{[{$:/info/browser/screen/height}multiply{$:/plugins/TWaddle/SideEditor/Metrics!!top}divide[100]trunc[]subtract{$:/info/browser/screen/height}multiply[-1]subtract[100]]}}}
width={{{[{$:/info/browser/screen/width}multiply{$:/plugins/TWaddle/SideEditor/Metrics!!left}divide[100]trunc[]subtract{$:/info/browser/screen/width}multiply[-1]subtract[50]]}}}
⋮
</$button>

You can overwrite the height and the width by removing all the complex stuff so it just says e.g

height=300
width=300

In the popout window? It’s like 3 millimeters, is that too much? Can you post a screenshot and point out where the problem is.

Thanks!

Here’s a screenshot of what I’m talking about. Maybe it’s something in my stylesheets somewhere.

The padding is being set in the stylesheet $:/plugins/TWaddle/SideEditor/Window/Stylesheet.

I’m not exactly sure where the height is getting set yet. I’m not too familiar with @media so that may be being set in the stylesheet above as well.

This behavior is only there with the external window.

Hm, that is how it is supposed to look if the editor window is maximized, i.e for the “distraction free” mode. But you apparently have this also for the regular external window mode. If you manually resize the window to be smaller, don’t the margins disappear?

Assuming they do, then the method outlined in my previous post to hard code the window size should work and you can make the editor small enough so you don’t get the big margins.

I’m guessing you’re using a very big screen, right? But would you really want the text to go all the way from left to right on a full screen? Very long rows…

Yes, the margins do disappear when I resize the window. I did try to change you suggested, but I see no difference no matter how many pixels I set the width and height to.

Yes, I do have a large 4k monitor. I am not trying to use the “distraction free” mode. I am just wanting the external window. Is that what your json does is set it to distraction free mode? Maybe that’s the issue.

That must be what it is. When I click the external window button it looks the same. So that seems to be the issue.

Is there a way to make the button open to external window without the “distraction free” mode?

I do appreciate this.

@HistoryBuff

Ah, I just realized you’re using the special modification I made for Zheng in this thread. OK, you need to modify that special tiddler. I.e the tiddler $:/plugins/TWaddle/SideEditor/Button

Inside it there’s a macro \define buttoncontent()that you at the bottom can modify into:

Ah, perfect! Thanks so much!

One more question and I’ll stop bugging you. Is there a way to set the position such that it’s not always in the upper left corner?

I found it in the documentation and I’ve got it just the way I want it. Thanks.

Heh! I was just about to reply that “sorry, I remember trying this” but decided to dig a little and it turns out the TW command tm-open-window was updated in 5.2.2 so you can now add top=... and left=... to that same place where you set the height/width :slight_smile:

E.g left=800 (it is interpreted as 800 pixels)

1 Like

Now one thing I’m not sure about is how to change the font of the external window. Any thoughts?

I assume that’s using the template feature, but I’ve not done that before.

In $:/plugins/TWaddle/SideEditor/Window/Stylesheet
locate this definition

.se-editor {
  resize:none;  /* remove to get resize */
  margin-bottom:-5px;
  border:1px solid darkgrey;
  border-top:0;
}

and add some css to set the font you want. (If you’re doing it in the very external SideEditor window be a bit careful since it is applied live)