How to access the uncooked content from a theme component?

Dev
1

I’m developing a theme component where I would like to do something similar to:

[code]
main() {
  printf("Hello World!\n");
}
[/code]

which yields:

main() {
  printf("Hello World!\n");
}

I’m using api.decorateCooked() for this, but since the content is already cooked all “redundant” space has been removed, e.g. the space before printf in the example above.

How can I get access the “uncooked” text as the user entered it?

To be clear; what I want to support with my theme component is to allow the user to write something like:

[mytag]
main() {
  printf("Hello World!\n");
}
[/mytag]

which my theme component understands and replaces with a transformation of the text within the [mytag] ... [/mytag].

2

To get access to raw you are going to need to use a plugin.

What you can do though is use the wrap helper, that way you have a div to work with.

[wrap=test]
hello world
[/wrap]

Renders to:

<div class="d-wrap" data-wrap="test">
<p>hello world</p>
</div>
2 Likes
3

Thanks.

Is it possible to install a custom plugin in a Discourse instance hosted by Discourse on a free plan? I haven’t found out how anyway.

Would it be possible to implement support for raw for theme components? If so, would you accept a PR to do so?

The wrap helper does not do what I asked for. It too removes indentation.

4

Sadly our free, standard and business tiers do not allow for custom plugins. We use a cluster that hosts many different customers we have no mechanism of running a plugin just for one customer.

Supporting the ability to inject a markdown extension via a theme component is something I have thought about in the past, but we have no concrete plans to add it. It would be extremely hard to add.

What about double wrapping? This will certainly keep all indentation.

[wrap=test]
```
1
  1
    3
```
[/wrap]

Maybe even just using something like this will work, you will have a distinct element to work with:

```custom
test
```
3 Likes
5

Extremely hard also for you or just for someone like me without prior knowledge of the implementation? I what lies the hardness? Would it be easier to do something simpler than a full markdown extension such as read-only access to raw?

Yes, this might be an option. Thanks.

6

The front end does not get the raw post content. It only gets the cooked version. This means that payloads to the client are smaller. On top of that the server is ultimately responsible for the markdown → html conversion. If we did this all at runtime on the browser we would be adding a lot of extra costs and have complicated security vectors to worry about.

2 Likes
7

@sam Thanks for your help. Your suggestion turned out well and gave a pretty decent syntax for the user as well:

Screenshot from 2020-05-04 13-40-01
Screenshot from 2020-05-04 13-40-01948×460 23.4 KB

:sunglasses:

2 Likes
8

Just to be clear, you do know that if what you really want is coffee blocks you can wrap code blocks with three back ticks, right? I can’t tell to what degree your example is a metaphor.

9

@pfaffman I don’t know what you mean by coffee blocks, but yes, I do know that three backticks generate a code block.

I don’t know why my example should be a metaphor. For what? The image I posted is a screenshot to show what my theme component generates for the given code.

1 Like
10

Sorry. coffee and code are almost the same on my mobile keyboard. It got them wrong every time when I wrote they sentence!

I have looked and looked and I don’t see from your example what is different between your image and a standard code block.

11

The graph that my theme component has added.

1 Like
12

Oh! So you want something like the math plugin, but for your graphing language rather than TeX?

13

Yes, I guess so. I haven’t seen the math plugin, but it sounds similar in concept. It’s the same basic function as the Graphviz Plugin, but this one can do much more advanced stuff, like animated transitions between graphs and has a whole bunch of options to control and style it.

1 Like
14

There is also Graphviz Plugin, which, I think still doesn’t solve your problem since your can’t install a plugin.

15

Here is the GitHub repo if you’re interested. It’s not officially deployed anywhere yet because I need to write detailed documentation on how to use it first.

16

Then it works seem, and perhaps I’m missing something, that the solution would be so submit your changes as a PR and then our would be available on business plans.

17

Sorry, I don’t understand what you mean. It’s a theme component and it can be installed into any discourse instance through the web interface by it’s administrator regardless of which plan they’re on.

18

I likely don’t understand. But it seemed that what you want to do is to extend the graphviz-plugin to support more graphviz features and that they would make more sense integrated into that plugin.

But I don’t really understand what you’re after, so I could be way off base.

19

Now I understand what you meant. No, since we’re on a free plan, we couldn’t use that plugin and therefore I developed a theme component instead. The extra features was a kind of bonus that were easily added because it’s based on another library than the existing plugin.

Plugins and theme components are very different so I don’t think it’s possible to reuse code between them, but I guess it would be possible for someone to add the same functionality to the existing plugin should they be interested.

2 Likes