Questions about creating a custom inline wikitext to indent text?

Developers
#1

If I wanted to say, piggyback off of the $:/core/modules/parsers/wikiparser/rules/list.js tiddler to create a custom parsing for indented text where adding (Char9), ,(&tab;) in the editor, as if you were adding a * to the start of a new line for a bulleted list item, to add the below text, would it be possible for the ul to have a custom class or style applied?

Also I can see in the JS that it consumes whitespace before returning the root element and so, I’m unsure if its possible to use the &tab; character since it is classified as a whitespace character…

I’d really prefer using the tab character since that is whats most visually appealing when editing a tiddler, having to type something like <&tab/> or something isn’t appealing at all.

-EditTemplate-

This is text.

	This is indented text.

-ViewTemplate-

<p>This is text.</p>
<ul class="tw-indent"> /* .tw-indent having list-style-type: none;*/
	<li>This is indented text.</li>
</ul>

The reason for this is because I often indent my text and my code, and would enjoy seeing this directly show in the ViewTemplate for normal text, outside of needing to use preformatted text / code blocks.

The end result I have in mind is behavior like Obsidian.md, where indented text can be arbitrarily nested and even have border-left applied to it.

TL:DR Is it possible to use a whitespace character in making a custom parser similar to the list-bullet wikitext, if so is it possible to have it generate a ul HTML element with a css class including the li element?

Thank you in advance for any input ^^

#2

No JS code needed. The STYLE tag is only there for testing. It needs to be in a proper stylesheet tiddler for production.

The indented test semantically creates an UL HTML element. So do not use it for indented paragraphs.

<style>
.i {
  list-style-type: none;
}
</style>

This is some text

*.i This is indented text

image
image1868×865 67.3 KB

image
image1871×621 56.4 KB

1 Like
#3

Yep! that does have the right outcome in the viewtemplate, but I would need to type out *.i text inplace of (&tab; here, talk.tiddlywiki doesn't render the character) text

That is the main thing I am asking about, sorry if I wasn’t clear enough about that.

right now I am experimenting with:

var listTypes = {
	"	": {listTag: "ul", itemTag: "li"},
	"*": {listTag: "ul", itemTag: "li"},
	"#": {listTag: "ol", itemTag: "li"},
	";": {listTag: "dl", itemTag: "dt"},
	":": {listTag: "dl", itemTag: "dd"},
	">": {listTag: "blockquote", itemTag: "div"}
};

But I think I need to use \t instead. not sure yet.

#4

What should the resulting HTML be? I think using p tag with a class is better, like @@ will create span tag with a class.

And you can write a new parsing rule for it, matching the leading spaces or tabs, and create a custom type of ast node, and render this ast node with a new widget node that is “indented-paragraph”.

Why not try adding this to the core? We should have basic features that Obsidian and Notion have. I think this is a very basic feature.

1 Like
#5

I know what you want, but using the TAB whitespace for something else than whitespace in TW wikitext will have some nasty side effects.

We do already use TAB indents for better readability in TW UI template code. If you modify the “list” wikitext rule in the core JS code you will also change the default behaviour for all the existing TW UI templates.

As you described the expected HTML output in your OP the only valid way to do it, is the one I did suggest.

I did experiment with some custom markup using » as a default indicator for indented HTML P tags (paragraphs).

But the whole thing is probably overkill for what you want to achieve and using TAB will also be not possible with the custom markup pluigin.

#6

I guess I hadn’t fully considered how it would impact the rest of the TW core. I assumed that the wikitext would only be parsed when being shown in the viewtemplate, and would not impact stylesheets, indexes, etc. since it appears to not cause any conflict when other characters such as astericks are used.

I’m guessing this would result from the fact that it is a whitespace character rather than a normal one, which is a bummer.

I’m actually a bit curious about what sort of issues would occur as a result of it.

#7

For ease of typing, it sounds like you might just want to run with Charlie’s recent suggestion of hijacking the colon wikitext shortcut for <dd> item since

: line-of-text

turns into <dd>line-of-text</dd> html, and thus gives you

line-of-text

as output.

And if you want your edit to show the indent effect, you can always add spaces before:

:line-of-text

renders the same, but gives you the indent effect (for the first line, at least) at left margin…

(As noted in that thread, there could be situations where in a public-facing wiki the repurposing of semantic tags like <dd> could be misleading for folks with screenreaders. But apparently even that’s not a realistic concern…)

1 Like
#8

@Justin_H have you tried @Springer’s suggestion of the ; and :? including multiples

eg;

;Top
: this
: that
:: the other

Something

: without dt
:: double

2024-12-21_11-10-10

resulting html

<dl><dt>Top</dt><dd>this</dd><dd>that<dl><dd>the other</dd></dl></dd></dl><p>Something</p><dl><dd>without dt<dl><dd>double</dd></dl></dd></dl>

One advantage of this is you can use the aformentioned .classname on the “Top” and the class will apply to the whole list. This was discussed recently when someone made a note class for this see link below.

Personally I also hacked the autolist plugin to also treat : like * on enter.

Of note is using * or # does something very similar, to the dt and dt tags and wraps it all in <ul> or <ol>

  • It would be great if we could apply a classname to <ul> or <ol> like we can <dl>
  • This would be more semantic than using ; and :.

See here Example: Repurposing HTML "Definition" lists for "Note" blocks