How to apply parsing rules to the output of the wikify widget?

1

I’m trying to create a style preview by using the wikify widget, like this:

<style>
.typography-editor{
display:grid;
grid-template-columns:1fr 1fr;
&>*{
outline:solid 1px;
}
&>.editor .tc-edit-texteditor{
height:100%!important;
margin:0;
}
}
</style>
<p class="typography-editor">
<span class="editor">
<$edit-text field="style" tag="textarea" class="tc-edit-texteditor"/>
</span>
<span>

$$$text/vnd.tiddlywiki
\rules except dash list horizrule

<$wikify name="preview" text={{Typography Test Page}} type="text/vnd.tiddlywiki" output="html" mode="block">
<<preview>>

However I run into issues when I try to disable the wikitext parsing to avoid turning -- into – , therefore I can’t use CSS variable. I tried to set the rule in “Typography Test Page” but no dice, wikify seems to use the default wikitext parser rules. What am I missing here ?

https://typography.tiddlyhost.com/#Typography%20preview

2

“Tounge in cheek” but

“How to apply parsing rules to the output of the wikify widget?”

My answer would be “Don’t”.

I have used it to make use of the HTML it generates, but of late I have being avoiding wikification altogether either using functions or transclusions.

  • Perhaps you can you use some of the other options/parameters on the wikifiy widget to get what you are after?

Why do you want to do this, what is the root problem, or justification to do this?

3

On the page you link to, there is no “Typography preview” tiddler and there is no “Typography Test Page” which is transcluded in your code. So we cannot test your code.

4

Can we write inline style tag like this? I’m not sure if they will get properly added and removed, so I always use them in a separate file, and add \rules except dash list horizrule on the dedacated style tiddler.

5

My apologies, it seems like I didn’t save properly. It should be fixed now.

The idea is that I have a snippet of html with various html elements to preview text styling, something like this:

<style><<style>></style>
<body>
    <h1>H1 Title</h1>
    <h2>H2 Title</h2>
    <h3>H3 Title</h3>
    <h4>H4 Title</h4>
    <h5>H5 Title</h5>
    <h6>H6 Title</h6>
...

This is in a tiddler called “Typography Test Page”.

I want to use the content of that tiddler in an iframe in order to isolate the style from the styling coming from tiddlywiki, so I tried to do this:

<$let style={{!!style}} > <iframe srcdoc={{Typography Test Page}}/> </$let>

But the variable is not applied, so that’s why I was trying to use wikify.
I’d like to keep the html code separated from the iframe element (two separate tiddler), so I tried to apply parsing rule with /rules but wikify seems to ignore it :confused:

image
image1703×347 18.9 KB

6

Working now?

Just gonna say this: asking for folks to take a look and modifying the same code at the same time is annoying. Every time I refreshed I received a different set of code. :confounded:

7

Instead of your wikify stuff – This works

<$let style={{!!style}}>
<$transclude tiddler="Typography Test Page" mode=block/>
</$let>

image
image1751×472 23.3 KB

Typography Test Page uses

<style>
<<style>>
</style>

image
image1734×332 12.2 KB

8

It does but as you can see the styling is leaking to the rest of the UI :confused:

Sorry! But no it still doesnt work :confused:
I will put the code here it will be easier (and this way the code won’t change). The tiddler “Typography preview” contains this:

<style>
.typography-editor{
display:grid;
grid-template-columns:1fr 1fr;
&>*{
outline:solid 1px;
p {margin:0;}
}
&>.editor .tc-edit-texteditor{
height:100%!important;
margin:0;
}
}
</style>
<p class="typography-editor">
<span class="editor">
<$edit-text field="style" tag="textarea" class="tc-edit-texteditor"/>
</span>
<span>

<$let style={{!!style}}>

$$$text/vnd.tiddlywiki
\rules except dash list horizrule

<$wikify name="preview" text={{Typography Test Page}} type="text/vnd.tiddlywiki" output="html" mode="block">
<iframe srcdoc=<<preview>> style="width:100%;height:100%"/>

“Typography Test Page” contains this:

<style><<style>></style>
<body>
<p>
style being transcluded:
<pre><code><<style>></code></pre>
</p>
    <h1>H1 Title</h1>
    <h2>H2 Title</h2>
..

full code on tiddlywiki.com/share

I’m using a typed block to set the parsing rules but wikify is ignoring the rule. My style variable is correctly parsed, but -- becomes – despite the rules :confused:

9

Yes, because the * selector means absolutely every element and hardcoded STYLE HTML-tag is page global. So you need to be more specific with the selector eg; .tc-tiddler-frame or something …

10

Yes I guess I could simply use nested css or specific css selector, but the issue now is that the html element will inherit tiddlywiki styling … maybe I could reset that with all:initial tho. If there is no other way I’ll probably do that, I liked the idea of using an iframe to “sandbox” the preview but I can live without that ^^

11

If you prepend the text from your style field with the parser rule, then it will work:

<$let rules="\rules except dash list horizrule
" style={{{[<rules>addsuffix{!!style}]}}}>

When text is being transcluded, it doesn’t inherit the parser pragma from the “parent” transclusion.

Referencing variables (i.e. <<style>>) uses the same transclusion mechanism as when transcluding tiddlers (i.e. {{my tiddler}}).

Prepending the text of the style variable with the wikiparser rule text causes those parse rules to be applied when the variable is transcluded.

12

Another solution. You could choose not to support any wikification for the text in the style field by converting the above to:

<style><$text text=<<style>>/></style>
<body>
<p>
style being transcluded:
<pre><code><$text text=<<style>>/></code></pre>

This seems more straightforward and understandable than the first solution I presented…as long as it meets your requirements.

13

Thanks a lot, I didn’t think of prepending the parser rule!

To add to your solutions, I also found a way to avoid the need to use rules (without wikitext, but it’s fine for my usecase) :

\procedure snippet(field,html,min-height)
<style>
.typography-editor{
container-type: inline-size;
min-height:<<min-height>>;
display:grid;
grid-template-columns:max-content 1fr;
&>*{
outline:solid 1px;
p {margin:0;height: 100%;}
}
&>.editor .tc-edit-texteditor{
height:100%!important;
width: 50cqw;
margin:0;
}
}
</style>
<p class="typography-editor">
<span class="editor">
<$edit-text field=<<field>> tag="textarea" class="tc-edit-texteditor"/>
</span>
<span>

<iframe srcdoc=```<style>${[<storyTiddler>get<field>]}$</style><body>$(html)$</body>``` style="width:100%;height:100%"/>
\end snippet

demo on tiddlywiki/share

No leaking !

image
image881×437 12.3 KB

EDIT: I forgot about that but I’ve made a similar thing a while ago: Learning CSS — My notes on learning CSS (tiddlyhost.com)

14

Co-incidentally after responding to this Git hub issue [IDEA] procedure wikify mode · Issue #8072 · Jermolene/TiddlyWiki5 · GitHub I returned to talk.tiddlywiki to see this Topic open.

Co-incidentally because they are related to “How to apply parsing rules to the output of the wikify widget?”. I was thinking if I could “use functions or backtick parameters” as wikify (to evaluate wikitext or tiddlywiki script), in code, not only in the final render.

  • I think within this there is away to address this Topic, which I will share when found
  • I may share my research if anyone is interested.

[After thoughts]

  • What if using transclusion there was a way to parametrise or point to pragma to apply to the transclusion? In this case; \rules except dash list horizrule perhaps this could be done in a custom widget and genesis of the transclude widget?