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

1 Like
#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.

1 Like
#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?