Section Editor - Prototype

@Mohammad I took your prototype and did the follwing;

in toggle-button added this style/class to the button
style="float: left; margin: -35px;" class="tc-btn-invisible"

in feditor
moved the following to the bottom of feditor
<$macrocall $name=toggle-button stateTiddler=<<stateTid>> onlabel="edit" offlabel="show"/>

Now it looks like this;

Not perfect but the button appears at the bottom of the content in the margin.

@TW_Tones please test the latest version! See the first post!

It uses right float! but you can set it for left float as you suggested! See styles and give a try!

1 Like

Thank you Mark,
Please open the settings, you have option to switch between text area / main editor (e.g. codemirror)
Then you have some shortcuts!

I will work on this to have keyword shortcuts working for text area too!

Absolutely! It is in todo list!

@Mark_S one question: what do you think if we add settings allow user determines the levels of sectioning? I mean: set =1 only h1 creates sections, if set=2 both h1 and h2 creates sections but not h3! If so, what regex pattern do you propose?

1 Like

@CodaCoder - sure,
If you are in rush, please see the section-editor! also see the tw-regexp (how to extract contents between elements tag). Give a try and let me know!

I tried to insert a regex pattern to create only h1 and h2 sections, but not h3.

--- Start

<$vars pattern="\n(?=^!{1,2}[^!])" nonWhitespace="[^\s]"
  src={{{[<source>get[text]]}}}  stid=<<currentTiddler>>>
<$list filter="[<src>splitregexp:m<pattern>!is[blank]first[]] :filter[regexp<nonWhitespace>] 
               [<src>splitregexp:m<pattern>!is[blank]]" counter=cnt   >
<<feditor>>
</$list>
</$vars>

I’m not sure on browser support for lookaheads, though. Does it work?

1 Like

kookma.github.io/TW-SE/

Gives a 404 error

My lookahead is almost the same as sull-vitsy

<$list filter="[all[current]has:field[se-type]]">
<$macrocall $name=section-editor source=<<currentTiddler>> pattern="\n(?=!{1,2}[^!])" />
</$list>

Then, in your main macro you don’t have to add back in the ! because you’ve used the lookahead:

<$list counter=counter variable=section
       filter="[<sourceText>splitregexp<pattern>!is[blank]first[]regexp<nonWhitespace>]
               [<sourceText>splitregexp<pattern>!is[blank]butfirst[]regexp<nonWhitespace>]">
1 Like

@Mohammad There is a little problem. Try this text

! asdf

aaaa

! asdf

aaaa

Now edit the 2nd one and save. → The 1st one will be edited.

1 Like

Corrected! I also updated the original post at top of this thread!
Section Editor is here:

2 Likes

Thank you @pmario - I confirm the bug!
While having two similar sections, is an edge case, but I surely address this bug!

Great job! I’ve been waiting for a plugin like this for a long time, thanks for the work!

I think this section editor plugin in conjunction with my CodeMirror-Enhanced plugin would greatly enhance the TiddlyWiki writing experience, just like notion does.

Also, I’d like to ask if it’s possible to make each block (e.g. a paragraph, an image, a quote, a table, etc.) editable individually like notion, instead of using headers for section editing? I think this would make editing more flexible. Thanks!

No rush.

I already have extraction based on @Mark_S’s code (even if he doesn’t recall writing it :laughing: )

It’s an edge case only when you haven’t considered it :wink:

For extraction and now (for your code) editing, you’ll need a qualifier of some description. Every time I’ve approached this, I’ve backed off. I shamefully didn’t keep notes but it basically boils down to a tension between wanting the common case of rendering/reusing the segments elsewhere and the need to target a specific instance when needed (highlighted by your new case of editing a unique segment). Either way, I think we need @Mark_S to take a look.

Let me try to summarize what I think might be needed (or, at least, useful)…

<mo-section data-id="unique-id">
content
</mo-section>

Or perhaps…

<mo-section><unique-id>
content
</unique-id></mo-section>

The problem domain as I see it is

  1. generic extraction of each mo-section (e.g. $list).
  2. extract each unique mo-section and retain the unique-id so I can work with both it and the content.
  3. And ditto the above for in-place editing purposes.

It’s point 2 that eludes me. I’m not aware of a way to capture back references (regex \1, \2, etc.) and make them usable in wikitext along with the match (afforded by Mark’s regexps js plugin, for example).

But I do wonder if something close is there or almost there already. @Mark_S – can you expand on this taken from your comments at the top of regexps.js

[...] All sub-groups are returned if not global and sub-group hits are found.

The problem is with Tiddlywiki search-replace! I am working to resolve it!
Note the splitregexp works fine!

@pmario - this issue is with search-replace. Consider

<$list filter="[[The quick brown fox jumps over the lazy fox]search-replace[fox],[cat]]"/>

produces

The quick brown cat jumps over the lazy fox

and if you useg' flag then it produces

The quick brown cat jumps over the lazy cat

We need to know which instance shall be replaced! I think @stobot should encounter this in his Sticky Todo (Sticky - A lightweight todo / sticky-note concept)

@Mohammad actually in my case I essentially turned that “bug” into a feature.

As you’re seeing, for a regex based solution I used the text as the ID, the ID of the todo in my case, the name of the section in yours. For me since mine are things like “talk to Bob”, it’s likely that any repetition would all get handled at the same time, and so marking them all done at the same time makes sense. In the case of sections that’s less likely to be the case.

I have been thinking through @saqimtiaz 's challenge programmatically around a single tiddler streams, and there the logical solution around a wikitext version has the same issue as what you’re trying to solve here, in fact in a way they’re almost the same thing entirely, hence why I’m bringing it up here. The best place to get a unique ID generated when you can’t rely on the text seems to be the new counter variable of the 5.2 list widget. So, from a workshop perspective, I think it would look like (as @saqimtiaz suggested):

  1. Break the tiddler into temp tiddlers, one per section or stream item, title with the counter variable.
  2. Do the editing
  3. In the Streams mode, you’d add all the ui around adding, removing and reordering using a list field and listops
  4. When done editing, reassemble based on the list.
2 Likes

Some quick thoughts:

  • refresh performance can get really slow with the counter variable in the list widget, so that may be problematic for larger tiddlers with a lot of sections
  • Largely agree with @stobot. If you split it into smaller chunks when editing, and save each in a temp tiddler or field with a unique ID, all you need to remember is the ID of the section being saved and the order in which to save the sections (a list field somewhere). So when saving, you reassemble in that order.
    • a simpler though less flexible way to do this is to only allow editing one section at a time and when editing, split and save the content in 3 parts. The preamble, the part being edited, the suffix.
  • (If you wanted to you could implement an editing experience very similar to Streams with keyboard shortcuts etc to move between sections, or customize Streams to work as a section editor.)
2 Likes

@saqimtiaz - I don’t want to get too off-topic, but curious about your mention of performance with the counter variable. The alternative that wouldn’t be that would be to generate a unique number off of the <<now>> microseconds or something. Would you say that counter would even be slower than that? Speed is usually near the top of my priority list, so I’m curious if you can say a bit more on that from your experience.

Your idea was so beautifully simple Mohammad, that I hate to see it made complicated just for an edge case!

My thought is this. You already make content tiddlers for editing, right? At the time that you make your first content tiddler, you also make a copy of the entire source tiddler, but with the section replaced by a token.

!! asdf

/%TOKEN202110021054%

Calling this the working source.

Each subsequent section that gets edited will use the working source, and replace it’s own token. The token of course is stored in your content tiddler.

When a section is saved, replace the token with the edited text in the working source.

When the last section being edited is saved, the working source replaces the original source.

The downside of this approach is that the final tiddler isn’t written until ALL edit sessions are complete. The upside is that you don’t have to recreate streams !

And, yes it really is an edge case. You would expect in real life every section will have unique content.

@stobot counter variable performance hit is huge when the number of items in the list changes, like adding and removing sections.

Agree with @Mark_S that Streams is overkill for this. Assuming you want a similar keyboard driven UX, would recommend only using it for inspiration. Most of the complexity in Streams comes from nested hierarchies, which you don’t have as far as I can tell. Or it could be useful as a quick hack to demo/test what that kind of UX applied to your idea might be like.

Edit: here is an extreme example where all the list widgets in a wiki use the counter variable, try switching sidebar tabs.