TiddlyWiki editor - view and edit as one mode

[Edgaras]

Hello tiddlers,

In the broader tread Redesign of TW, the editor/view is discovered to be the number one focus area to address to simplify the writing experience in TW.

But as Jeremy mentioned, it's not an easy thing to change:

The difference between editing and view mode is hard to hide away. In TiddlyWiki we have very dynamic markup (like transclusions) where there has to be a way to switch between editing/viewing the markup and its results.

 

 I think there’s a lot we could do to improve the editing experience, but I don’t think there’s a whole lot of low hanging fruit without significant development within the core.

Yet, many of us agree, RoamResearch and Dynalist has a better writing, content production experience. In Roam you write directly as you view and every paragraph is a "tiddler", a modular piece of content that you can reuse, link to (transclusion?)

So I am wondering, are there any existing plugins/efforts or discussions to try to make TiddlyWiki editor more like RoamResearch or Dynalist, where you can can focus on writing/producing content in the same mode as you view it?

Please link me if there is already a particular discussion on this matter. Thanks!

P.S. I already started a very simple .js script that will create or delete a paragraph <p> when you tap enter or backspace. Of course, that's is almost nothing to what would need to be done to map all scripts into modular tiddlers/paragraphs. 

[Anne-Laure Le Cunff]

I would also love to be able to edit/view at the same time. Following this conversation!

[PMario]

On Tuesday, May 5, 2020 at 10:35:34 AM UTC+2, Edgaras wrote:

...

So I am wondering, are there any existing plugins/efforts or discussions to try to make TiddlyWiki editor more like RoamResearch or Dynalist, where you can can focus on writing/producing content in the same mode as you view it?

Hi,

I think there are a lot discussions in this group, but there isn't an up to date plugin, that is close, to what you want.

In the end the editor, has to create wikitext, even if it is displayed as rendered text. We need wikitext, be stored in a tiddler. Everything else doesn't make much sense.

There is a project named: ProseMirror, which is from the same author, that created CodeMirror. We already have a CodeMirror editor plugin, that allows us to completely change the internal editor behavior.

With ProseMirror, it would be possible to create what you want. There is an example link, which shows an edit-element, that can switch between "prose text" and Markdown. https://prosemirror.net/examples/markdown/

It should be possible to use a "full-screen" edit view, to create a Zen-like writing experience.

If we put enough work into it, it is possible to create TW wikitext as the "backend text", which would allow us to add functionality, that we consider for granted. eg: lists, widgets and transclusions.

The library used will add about 300kByte to a single file wiki.

have fun!

mario

[PMario]

On Tuesday, May 5, 2020 at 10:35:34 AM UTC+2, Edgaras wrote:

In the broader tread Redesign of TW, the editor/view is discovered to be the number one focus area to address to simplify the writing experience in TW.

Hi,

Is there a "latest version" of your design studies, that you linked to, in the other thread? Or is this the latest version?

-m

[Mat]

There are a few angles to this topic.

If the aim is to improve the authoring experience you may be interested in my ongoing EditorMagic project. I think the concept of a balloon popup editor inspired it. I elaborate on the concept here: Trigger Custom Popus via Custom Strings. While this is not quite the same thing as directly editing the wysiwyg text, it would make for a much more efficient editing experience. Possibly, it may also be adapted so that it is possible to use it in tiddler view mode: If all elements were "targettable" from view mode, perhaps if they had a div automatically added to them, then maybe this would be possible.

From some fiddling with WordPress years ago I recall -- possibly only in some themes -- a system with three "views": One showing the finished static look (what we call "view mode"), one showing the underlying code (perhaps what is the html code) and one "in between layer" that was a kind of a...hmm... "mixed view", for example a table that in the finished look would have no visible borders did have borders here for easy selection (e.g to set visibility),  bold text really was bold (like in finished look), hovering an image showed it's resize-handles etc. A high-but-still-modifiable UI level.

I can see several improvements along the way. For example, for defining a macro we "shouldn't" have to type "\define ... \end". It "should" be one tiddler per macro. Setting the tiddler "sort" (type?) as macro automatically adds the $:/tags/Macro (ideally hidden) and the title of the tiddler is the macro title. There's also automatically a field for the parameter list. 

In fact, I think we are sometimes too exposed to Tiddler Philosophy. This stands in the way when composing larger texts. I would like for "compound tiddlers" where editing a tiddler really enables access to multiple tiddlers. I made this long ago but, like much else, I don't think I ever published it:

http://supertiddlers.tiddlyspot.com/#About%20SuperTiddlers

That site actually has several features but for our discussion, only the "SuperTiddlers" concept is relevant. Be sure to read the About tab and try out the Demos - especially the over-the-top Styles demo - and hover over the text(s) in it. As I outline in the About tab, the point is that tiddlers miss context for longer narratives but with a UI change we could easily solve this. Note that tiddlers do not need to use multiple sections like that and everything is still just tiddlers. 

The relevance to Edgaras OP here is that a "SuperTiddler" let's you edit a small portion at a time of what is seen.

<:-)

[Saq Imtiaz]

@pmario ProseMirror looks very interesting! I wonder if getting that working in TW in co-ordination with the Markdown plugin might be a good first step?

[David Gifford]

Hi Edgaras

So I am wondering, are there any existing plugins/efforts or discussions to try to make TiddlyWiki editor more like RoamResearch or Dynalist, where you can can focus on writing/producing content in the same mode as you view it?

I think there are too many things that outliners like Dynalist and Roam do that are not native to TW: each paragraph as a node AND a list with an URL and menu, easy indenting to create nested lists, easy dragging to rearrange nodes or series of nodes, zooming in and out, opening and collapsing. I am not sure our time would be best used to try to imitate all these features.

The one thing I think that would help beef up the writing experience in TW in the direction of an outliner: If, in the context of an ordered or unordered list, hitting enter would create another list item, and hitting tab would indent the list item. And hitting enter twice would exit the list and return to regular paragraphs. That way I could simulate roughly the writing experience in an outliner by starting my tiddler with a *, and multiple level lists would not require me to manually type ** and *** etc. Get me that functionality, and I would feel a lot freer, even though all the other aspects were not available.

[Edgaras]

PMario thank you for sharing this! ProseMirror seem very nice! It utilises a native html attribute contenteditable="true" and places each paragraph as a sperate <p>  inside the editable <div>. I was also trying out this attribute before, but got into troubles of being able to paste in rich text. I have to experiment more with it.

If we could rewrite/update this plugin to support wikitext, that would be amazing. Unfortunately, I don't know TW enough to estimate how much work is that. I will play around at least a bit to see. 300kB seems a bit much, no? But probably they have a lot of features there, it seems like a minimal but powerful project.

Regarding the design studies, yes the link you posted now is the latest design prototype, I will soon update it with the latest comments from the forum. But I don't want to progress much, until I am sure that editor can be really simplified, I believe that's the core direction to move into now. So probably I will do all design exploration/studies in that direction mainly. And also find ways to prototype the writing experience, because in Figma I run into limitations, I can't really prototype how it feels to type and edit text. So I need to do some coding to prototype, as I could not find a prototyping tool that would support me in this case.

–––––––––

Mat yes! Great project! I see SuperTiddlers as the next step after making the editor more usable. I've tried to understand other things you wrote, but I am afraid I am not into TW enough to understand you yet, sorry, but others will probably see what you mean, haha.;) I think I understand what you mean about having different modes with different views. But for the content writing/producing I really would rather have one mode/view only. And later on, if you want to display/show/publish/structure your content further more, I would introduce another mode for putting your content into structure. But I see the first main use case, as starting to write and build your interlinked knowledge freely. And that should come with as little friction but with most power as possible. RoamResearch do it well.

–––––––––

David Gifford yes, that a needed feature. If you look at ProseMirror it already has all those features (except tab to nest). But first we want to simplify the instant writing experience and write the wikitext hehind scenes. All the other features you mentioned are very much needed! I know it will take time... But that's the direction to go, slowly but steadily, if TW should become more accessible to all users.

–––––––––

Saq Imtiaz good idea!

[Vaughn Papenhausen]

Mat, that looks awesome! I think if there were an easy keyboard shortcut for making a new section that would already provide 95% of what I, at least, want out of an outliner.

To be explicit, I think the benefit of an outliner is that it makes applying the tiddler philosophy less effortful: you don't have to think as much in the creation phase about when a chunk should be individually linkable: every node and branch on the outline is automatically linkable, so as you're creating you're automatically putting in breaks every time you hit enter to make a new outline node. With vanilla TW you have to either write in one tiddler and then break it out into chunks later, or regularly manually create new tiddlers, which has a lot of friction attached, or simply make long tiddlers and leave them that way, which dilutes the power of the tiddler philosophy. Having the interface semi-automatically break your work into chunks without much thought on your part makes the tiddler philosophy work a lot better. Having a keyboard shortcut on your SuperTiddlers would go most of the way towards that, because it would be easy to make a new tiddler for every paragraph by default, and perhaps even every node on a bulleted list (since your plugin already includes the ability to have bulleted lists go across sections).

[Anne-Laure Le Cunff]

@Edgaras: if you want to see ProseMirror in action, that's what NoteBag.app uses :)

[selfire]

Coming quite recently to TiddlyWiki and climbing up the steep learning curve, this would make things a lot easier. Thank you for your work!

[tony]

Not sure if this helps, but Eric's modification of Lisa's macro https://groups.google.com/d/msg/tiddlywiki/5xV05Lg6yOo/Jz8HZIrJAwAJ

works like prose mirror for me with wikitext and the edit state persists even is closed:

\define journalTiddlerName( ) $(when)$ $(project)$
\define state() $:/state/$(currentTiddler)$
<$vars project={{!!project}} when=<<now YYYY-0MM-0DD>>>
   <$reveal type="nomatch" state=<<state>> text="show">
      <p><h2><<now YYYY-0MM-0DD>><$button set=<<state>> setTo="show" class="tc-btn-invisible">{{$:/core/images/edit-button}}</$button></h2></p>
      <p><$transclude tiddler=<<journalTiddlerName>> mode="block" /></p>
   </$reveal>
   <$reveal type="match" state=<<state>> text="show">
      <p><h2><<now YYYY-0MM-0DD>><$button set=<<state>> setTo="hide" class="tc-btn-invisible">{{$:/core/images/done-button}}</$button></h2></p>
      <<journalTiddlerName>>
      <p><$tiddler tiddler=<<journalTiddlerName>>>{{||$:/core/ui/EditTemplate/body/editor}}</$tiddler></p>
   </$reveal>
</$vars>

I just transclude the macro ({{JournalLogger}}) and set a generic project field name like 'log' to distinguished from a duplicated journal tiddler:

[[2020-05-05 log]]

 vs

[[2020-05-05]]

when the next day rolls over I get a new day log tiddler with no effort :-)

If the date format is changed to minutes then a minute by minute log is created, but I found that is waay too many tiddler entries for me.

TiddlyWiki is pretty cool and its algebra like ability for user lego play will outlast all this new hotness from the new kids on the block, Workflowy, Notion, roam, etc etc

Best,

tony

[TonyM]

Folks,

A Quick mention of prior art, and related ideas for view and edit as one mode, visual/wysiwig editing

• There is a visual editor based on CKEditor, I generates HTML wikis, good for HTML designers but not so good with wiki text, however you can add wikitext and widgets later
• Numerous outliners have being made previously.
• There are numerous edit in the view template methods, I use one every day, and I build a business solution based on this (It will be a while before I publish this because it has sophisticated field and field type management built in.
• The draft mechanism for the current editor is designed to get over the issue of editing the current tiddler, alternative need to take this into account. But it is trivial to build an editor tiddler that edits a nominated tiddlers (not itself)
• The Existing preview mechanism is very powerful and if you add the core internals plugin even better for coders and html freaks. A Horizontal version that resemble wikimedi/wikipedi should be trivial
• There is a high level of productivity gained from using wiki markup so visual editors are arguably a move away from this however it would certainly help new or incidential users of tiddlywiki

Possible and prefered futures

• IF we provided a WISIWIG HTML editor with Wiki-Text to HTML and back conversion features it would be quite good
• If we had a visual editor that could generate Wikitext and possible Markdown rather than html it would be nervana, since html flows from wikitext anyway
• There are plenty of editor projects out there in html and javascript, perhaps adopting on of those projects and building a plugin for tiddlywiki would leverage another active community and would be better than taking on this independently generating a separate development and release project.
• Projects such as atom.io or editors that are also designed for site generation could be very powerful if integrated into Tiddlywiki.Such they could edit and produce tiddlers but also support the generation of other output.

Regards

tony