Generischer BBCode-Wrapper für Theme-Komponenten

Ich habe diese Funktion vor einiger Zeit hinzugefügt und gemerkt, dass ich nichts darüber veröffentlicht habe. Sie können nun eine spezielle Syntax in Markdown verwenden, um sie in Theme-Komponenten zu verarbeiten und nutzbar zu machen, ohne ein Plugin schreiben zu müssen.

// in div.d-wrap eingekapselt
[wrap=baz foo=bar]Inhalt[/wrap]

// in div.d-wrap eingekapselt
[wrap=baz foo=bar]
Inhalt
[/wrap]

// in div.d-wrap eingekapselt
[wrap=baz foo=bar]
[/wrap]

// dieser wird als span.d-wrap statt als div.d-wrap gerendert
a [wrap=baz]Inhalt[/wrap] b

Der Name der Komponente wird als Datenattribut hinzugefügt: data-wrap="baz", und jede Eigenschaft wird ebenfalls als Datenattribut auf dem Element hinzugefügt: data-foo="bar".

Wenn Sie ein reales Anwendungsbeispiel lesen möchten, sehen Sie hier nach:

20 „Gefällt mir“

Hello Joffrey,

Thanks for suggesting this feature in the other topic.

I was excited to try to use it and see if it worked for my case, however I encountered a problem.

It seems to ignore attribute names that has multiple hyphens in between and defaults to only pick the characters after the last hyphen.

I am using v2.4.0.beta2 +33, I apologize if this has been fixed in a newer commit since.

Examples:

// No multiple hyphen this works fine: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Content[/wrap]

// This way it omits "user" from the attribute name and output is data-id="1" instead of data-user-id="1".
[wrap=test2 user-id=1]Content[/wrap]

This following request is optional: Is there a way to not wrap the content inside the div with <p> tag?

Thanks for this feature and hopefully I can use it to fix my problem!

I can fix the first issue

1 „Gefällt mir“

I just pushed a fix for this, slight difference is that I won’t support foo-bar but fooBar. So you can now write:

[wrap=foo userId=1]
[/wrap]

And you will get:

<div data-wrap="foo" data-user-id="1">
</div>
5 „Gefällt mir“

Hi @j.jaffeux
Thanks for this feature! Do you know the best direction how to add feature for things like

<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Product #1" data-item-price="10.99">
  Add to cart
</button>

in topics. And generally - to whitelist

class="snipcart-add-item" data-item-id="product-1"

Working example - https://codepen.io/thatfrankdev/pen/xxwRXQw

Du musst dein Wrap in einem Theme-Komponenten-Modul dekorieren, wie wir es hier beispielsweise tun: discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub

4 „Gefällt mir“

@j.jaffeux Thanks for the awesome advice!

Kürzlich haben wir dies erweitert, um generische Komponenten zu unterstützen, indem wir Folgendes verwenden:

```customblock param=1
```

Dies wird übersetzt zu:

<pre data-code-param="1" data-code-wrap="customblock"><code></code></pre>

Somit können Sie als Komponente data-code-wrap verwenden, um spezielle Handhabung zu bestimmen, und die Syntaxhervorhebung ist deaktiviert.

Wir haben dieses Muster hier verwendet:

Dies ist eine offizielle Mermaid-Theme-Komponente.

9 „Gefällt mir“