[IDEA] Flex box syntax for in-tiddler multi-column

[linonetwo]

Is your feature request related to a problem? Please describe.

Make website that looks like notion (i.g., https://706community.notion.site/Creators-3ee453c764a04f81a872c4bc160fb7d5 ).

I can provide WISIWYG editor for dragging, but there should be a consitant underlying syntax and ast for "column".

Otherwise I will face problem like "How to serailize macro call, distinguish from transclusion?" #7646 , if flex box is defined with <div class="tc-flexbox"> or @@.tc-flexbox, It's harder to write ast transform right.

So the decision here is, is it worthwile to make flex-box the first class citizen?

Describe the solution you'd like

Define a syntax for flex-container. For example:

<% flex %>
  <% flex %>
     block 1

     block 2
  <% endflex %>
  <% flex %>
     block 3

     block 4
  <% endflex %>
<% endflex %>

Describe alternatives you've considered

Maybe this shouldn't be in the core, I can make a plugin with widget like

<$flex box="{
 "json-data": "that describe the flexbox",
 "children": ["tiddler Title To Transclude", "as Block"]
 // ...
}" />

It transclude other tiddlers.

But when user drag a block to it in WYSIWYG editor, I have to auto create "titleless tiddler" and transclude it.

Additional context

Just thinking how to easily store and manipulate in-tiddler multi-column, when I see that notion based website.

[Jermolene]

Hi @linonetwo I agree that a significant limitation of TiddlyWiki at present is that any non-trivial layout requires users to learn CSS, another language that is notoriously difficult for beginners.

One approach that keeps coming back to my thoughts is the way that Apple's SwiftUI handles layout. Swift is an ordinary imperative language that somewhat resembles JavaScript, but SwiftUI is a declarative language that more closely resembles TW's wikitext. SwiftUI uses the HStack, VStack and ZStack components to construct interfaces.

[linonetwo]

As long as the syntax provides an easy to use AST, I'm good with it.

I was a web frontend developer, but for recent 2 years, I mostly use lowcode to build sites, and focus on product experiences. So the underlying syntax or semantic isn't matter too much for me now, instead, I will build lowcode editor as interface for end users, and I will only work with wikiast.

About the underlying syntax, we can't use \HStack in middle of the wikitext as discussed before. So maybe use <% HStack %>? And it is compiled to div with some .tc-hstack.