TiddlyWiki Tiddler Editor: How to Improve the Usability?

,
1

Q. Don’t you think Tiddlywiki deserves a more powerful light native editor?
A. Absolutely yes!

I have always use CodeMirror as default TW editor, it has many features like: line number, highlight current line, syntax highlighter, autoclose brackets, customizable kemap, …

BUT, it is heavy! my customization shows it adds 500kB (when installed with subplugins).

CodeMirror is a professional editor and I belive this plugin and its subplugins shall be maintained and be avialable officialy for super users, developers and all other intrested users.

So, why not improve TW own editor to be used instead of CodeMirror in more simple usecases. When I use TW for note taking (not scripting) it is enough for me.

There are some tips and tricks and tools out there to be used

  1. Snowgoon Comptext (GitHub - snowgoon88/TW5-extendedit: Try to extend the editor of TiddlyWiki5 · GitHub)
  2. Saq autolist ( Saq’s Sandbox — Experimental doodads (saqimtiaz.github.io))
  3. Changing editor font size - Discussion - Talk TW (tiddlywiki.org)
  4. CSS rule for the font in the edit area? - Discussion - Talk TW (tiddlywiki.org)
  5. Turn off spell checker from TW ( amreus — a personal wiki | v5.2.4-prerelease (tiddlyhost.com), Turn off Spellcheck? - Discussion - Talk TW (tiddlywiki.org))

Wish list

  • autoclose brackets ([] {} <> "", '')
  • syntax highlight only for Tiddlywiki wikitext
2

For using Tiddlywiki as development environment (like scripting, plugin development, …) I would stick with CodeMirror.

3

We have 3 areas that really should work in lock step, but don’t: Tiddler Body, Tiddler editor, and Preview. I use my own tool for setting the tiddler body font-size. The tool that we’re given in the configuration is cumbersome, and requires you to set the line height separately.

image

Then I store the font size in a tiddler, and use that to adjust the editor and the preview:

.tc-tiddler-frame textarea.tc-edit-texteditor,
.tc-tiddler-frame iframe.tc-edit-texteditor,
div.stream-row > div.stream-node-block
 {
font-size: {{{ [[$:/MAS/fontsize]get[text]addsuffix[px]]}}} ;
}


/* Preview */
span > div > div.tc-tiddler-preview-preview  {
font-size: {{{ [[$:/MAS/fontsize]get[text]addsuffix[px]]}}} ;
line-height: 1.2em ;
}

This allows all 3 views to at least somewhat resemble each other

image
image1175×210 24.4 KB

image

My wishlist is for a mechanism that will either automatically scroll the preview to the bottom or scroll it to the top so that you don’t have to keep lining up the editor and the preview.

4

This is very useful specially in long tiddler.

5

Good to know @ amreus has given a great solution to turn on/off spell checker from TW for editor.

6

I would like to see the native support to edit tiddler in a new window (e.g. http://sideeditor.tiddlyspot.com/), which is suitable for multiple monitor setup.

7

I have a installable that allows this, I just need to upgrade it since a recent tiddlywiki release broke it. I see however its value in remaining a plugin/package rather than core.

This also includes @Mohammad’s idea of an improved default editor, there is a strong argument if these changes introduce and additional overheads including bytes that they remain in a “core plugin” but a plugin never the less.

However I would also suggest when introducing such improvements allow the user to install and switch to the modified editor and toggle each of its features rather than a monolithic pre-configured solution.

The editor is one of the primary workspaces in TiddlyWiki and this should in my view be eminently customisable to support preferences for day to day work in a tiddlywiki.

8

I think auto-closing brackets should be already possible with the current editor. On my keyboard the opening bracket [ is created with ALT-GR + 8 .. So it should be possible to create a new keyboard shortcut that inserts the closing bracket. … May be the keyboard-widget may be used with a custom edit-text area. So no new buttons are needed. … Just a guess.

Creating a new syntax highlighter is the same thing as inventing the wheel again, because we do have CM already.

TW wikitext is a mixture of HTML, CSS and JS. … So to highlight wikitext “only” all of them will be needed anyway. .. So there won’t be a win, except a lot of new bugs.

9

My wish list

  1. Preview pane should scroll and match position with the editor pane.
    This becomes an issue especially when you do transclusion. So your editor might only have a couple of lines, but preview pane might have hundreds of lines.
    Or preview pane takes up more height due to CSS styling.

  2. Sticky editor toolbar (there is already CSS for it in this forum)

  3. Possible to move editor toolbar to the bottom (useful on mobile)

  4. Easier way to add keyboard shortcuts for snippets

10

I’d like the preview pane to be below the editor (configurably) as I normally have TW on the left [portrait] monitor.

11

… if in portrait mode. This should be trivial with CSS but it’s too early for CSS :wink:

12

Hi @NickB

I know @telumire has given a solution for this, I cannot find it, but it is somewhere in the forum!

13

I don’t recall having provided a solution that display a different layout if the screen is in portrait mode, but I did share solution for flex editor/preview ! I can’t find it either so I redid it, with the screen orientation requirement :

.tc-tiddler-preview{
display:flex;
flex-wrap:wrap;
}

.tc-tiddler-preview>*{
flex-grow:1;
}

.tc-edit-texteditor-body{
flex-basis:100vw;
}


@media (min-aspect-ratio: 1) {
/*landscape mode*/
.tc-edit-texteditor-body{
flex-basis:auto;
}
}

demo: Demos — Q&A and tools for tiddlywiki

14

It would be great if pasting an image worked in CodeMirror like it does in standard TW.

15

Make it so Tiddler body, Edit, and Preview all share the same font sizes.

I can force a fix with local CSS, but why do we need the cognitive dissonance of 3 separate sizes?

16

I was not aware that there was an inconsistency here. Could you please explain how the behaviour is different and how it can be reproduced at https://tiddlywiki.com/prerelease/ ?

17

Right. It matters when editing longer tiddlers, I surmise that from long experience of that issue.

Best, TT

18

Right!

Part of the issue is likely the extant solutions already available are not so easy to find?

Your Custom Markup plugin makes light-work of those issues.

Best wishes, TT

19

Hmm. Looks like there is a partial fix in the prerelease (but not in the current release). But the prerelease has a problem with the preview size.

Adjust the tiddler body size to 28 and the line height to 31.

image
image859×116 5.39 KB