Placeholder Forms

:discourse2: Summary Placeholder Forms will let you build dynamic documentation, by creating a form that replaces any occurrence of a =PATTERN= in your post with the value from a text or selectable input field.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-placeholder-theme-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Add placeholders to posts in this format:

[wrap=placeholder key=NAME description="Your name"][/wrap]
[wrap=placeholder key=COUNTRY default=US defaults=FR,DE,US,CN,AU,CA][/wrap]

Your email: =NAME=-=COUNTRY=@example.com

And this will result in:

This is used in mailing list

Your email: =ZNAME=-=ZCOUNTRY=@example.com

As seen above, text inside the wrapper will be used as a long description.

[wrap=placeholder key=NAME description="Your name"]
This is used in mailing list
[/wrap]

Available keys

  • key: The key that should be replaced in your post
  • default/defaults: default value(s)
  • description: a placeholder text for the input

Examples

# create a new plugin
rails g plugin =PLUGIN_NAME=
cd plugins/=PLUGIN_NAME=

We use it to create runbooks, howtos and reusable templates (it will work in code blocks). Please share your use cases!

Settings

Translation Default
toolbar.builder Add Placeholder
builder.errors.no_key A key is required.
builder.title Add Placeholder
builder.insert Insert
builder.key.label Key
builder.key.description The =Key= to be replaced in the post.
builder.description.label Description
builder.description.description Description displayed on input with no value set.
builder.values.label Default value(s)
builder.values.description Optional value(s) for your placeholder, if multiple values are defined, a select will be used.

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-13T22:28:45Z

Check documentPerform check on document:
「いいね!」 65

The big issue with math handling like this, is that you need to eval() and eval is unsafe, so you need to use some lib which provide a safe eval with a limited subset of the real eval. I’m unsure we want all this complexity for such a rare case.

「いいね!」 6

I tried ! and that would be a neat composer-preview-redux-in-OP kind of thing but… :pensive: I must be missing something, if I understand correctly the Reply Template component takes the raw and looks for “replacers”, but the Placeholder Forms component decorates the cooked?

What I’m trying to do is ease my users into adding some quizz Q&As in a topic, with minimal technical friction, clicks or even key strokes, :heavy-sigh: :roll_eyes:

[wrap=placeholder key="question" description="question"][/wrap]
[wrap=placeholder key="réponse" description="réponse"][/wrap]

[wrap=template key="template-spoiler" action="reply" tagsList="#qui, #quand, #où, #comment"]

## Question
=question=
### Réponse
[spoiler]
=réponse=
[/spoiler]
---
*Étiquette(s) ?*
[/wrap]

which gives

so far so good, but unfortunately, the placeholders =question= and =réponse= are kept in the composer when hitting the template button

Yes I’m not sure what I was thinking when I wrote this… I probably had a different use case in mind, but can’t remember.

It can’t work this way for sure. I will think a little bit about this… Both theme components were experiments at the time and might deserve better treatment as people have been using it quite frequently.

「いいね!」 7

Thank you !

happy lets go GIF by Shalita Grant

「いいね!」 3

:grin: I don’t know what’s cookin’ in the chef kitchen, but as I usually stuff myself with pistachios or whatnot while waiting, I managed to make it work (for my specific use of course as I’ve almost no idea of what I’m doing, but hey… :sweat_smile: )

「いいね!」 4

Ideally I would like to be able to let admin define their own replacers, but eval is risky (and not even possible with a secure csp) so I’m not sure how I could achieve this…

「いいね!」 3

First of all - great and really helpful theme component.

But I think I found a bug. If I use a placeholder in a code snippet, that contains backticks (`), it is not working. An example is a SQL code snippet:

DELETE FROM `=TABLENAME=`
WHERE id NOT IN(
        SELECT
            id FROM (
                SELECT
                    id FROM `=TABLENAME=`
                ORDER BY
                    id DESC
                LIMIT 20
) subquery);

TABLENAME gets never replaced (if there is a TABLENAME placeholder).

Jinja2のような条件も含まれていると素晴らしいでしょう。たとえば、誰かがキーredを作成し、それをアイコン:red_circle:にマッピングできるようにします。orange:orange_circle:にマッピングされます。もちろん、これらがなくても問題ありませんが、これらのテスト条件があればクールだったでしょう。

このコンポーネント、本当に気に入りました。:star_struck:


「そしてあなたは本当にその=NOUN_1=で生きていくのですか? なんて=ADJECTIVE_1=な人生でしょう!」

「それと共に、それによって、それの上で、そしてそれの中で」と=PERSON_1=は言った。「それは私にとって兄弟であり姉妹であり、叔母であり、そして=NOUN_2=であり、食べ物であり飲み物であり、(=ADJECTIVE_2=)=VERBING_1=でもある。それは私の=NOUN_3=であり、私は他に何も望まない。それが持っていないものは=VERBING_2=る価値がなく、それが知らないことは=VERBING_3=る価値がない。神よ! 私たちが一緒に過ごした=NOUNS_1=! 冬であろうと夏であろうと、春であろうと秋であろうと、それは常に=NOUN_4=と=NOUNS_2=を持っている。2月に=NOUNS_3=が来て、私の=NOUNS_4=と地下室が役に立たない=NOUN_5=で満杯になり、=COLOR_1=の=NOUN_6=が私の最高の=NOUN_7=の窓を流れるとき。あるいはまた、すべてが=ADVERB_1=と落ちて=NOUN_8=のパッチが現れ、=FOOD_1=のような匂いがし、=NOUNS_5=と=NOUNS_6=が水路を詰まらせ、そして私が=MOISTURE=の=NOUN_9=のほとんどの=NOUN_10=で=VERB_1=、そして食べるための新鮮な=FOOD_2=を見つけるとき、そして=NOUNS_7=から落ちてきた人々が落とした=ADJECTIVE_3=なもの!」


オリジナルはStandard Ebooks版The Wind in the Willowsから取られ、オンラインで読むことができます(By it and with itを検索してください)。

「いいね!」 10

こんにちは :wave:

このコンポーネントありがとうございます :heart: まさに今達成しようとしていることにぴったりです。実際、最初に考えたのは、返信テンプレートコンポーネントと組み合わせることができれば素晴らしいだろうということでした。しかし、残念ながら、上記の投稿で説明されているように、それは不可能です。 :confused:


テンプレートとして使用するための回避策を見つけました。これは、新しいトピックへのリンクおよび新しい個人メッセージへのリンクと連携します。

以下にその方法を示します。

  1. プレースホルダーフォームを作成します(簡単にするために、OPの例を使用します)。

    Your email: =NAME=-=COUNTRY=@example.com


  1. 新しいトピックへのリンクを作成します。
    リンクで設定したのは次のとおりです。

    1. カテゴリ
    2. タイトル
    3. 本文

    空行を追加したい場合は、リンクが壊れないように \ を使用するか、表示されないようにするには   を使用して新しい行にスペースを追加します。これはテンプレートの一部となり、空行を作成します。

    <a href="https://meta.discourse.org/new-topic?category==CATEGORY=&title=This is a topic created by =NAME=&body=Hello :wave:
    &nbsp;
    This is a test topic... Let's see the placeholder form.
    \
    Your email: =NAME=-=COUNTRY=@example.com">Use template as new topic</a>
    

  1. トピックプレビューを作成します。

    Selected category

    =CATEGORY=

    Topic title

    This is a topic created by =NAME=

    Topic body

    Hello :wave:

    This is a test topic… Let’s see the placeholder form.

    Your email: =NAME=-=COUNTRY=@example.com


  1. 「Use template as new topic」ボタンを作成します(上記の例では、これはリンクですが、ボタンにすることもできます)。

    このテキストから [wrap] 要素を作成します。これにより、CSSでターゲットにしてスタイルを設定できるようになります。以下に追加します。

    <a href="https://meta.discourse.org/new-topic?category==CATEGORY=&title=This is a topic created by =NAME=&body=Hello :wave:
    &nbsp;
    This is a test topic... Let's see the placeholder form.
    \
    Your email: =NAME=-=COUNTRY=@example.com">[wrap=template-button]Use template as new topic[/wrap]</a>
    

    [wrap=template-button] のスタイリング
    次のようなものです :arrow_down_small:

    Common / CSS

    [data-wrap="template-button"] {
      background: var(--tertiary);
      color: var(--secondary);
      border-radius: var(--d-button-border-radius);
      padding: 0.5em 0.65em;
      transition: background 0.25s;
      &:focus,
      &:hover {
        background: var(--tertiary-hover);
        color: var(--secondary);
      }
    }
    

    テンプレートボタンは次のようになります :arrow_down_small:

    template-button


デモ

Use template as new topic


この小さなチュートリアルが、同様のものを必要としている誰かの役に立つことを願っています :slightly_smiling_face:

編集:カテゴリ選択機能を追加し、さまざまなカテゴリでトピックを作成できるようにしました。


この投稿の生のバージョンを確認する…

「いいね!」 8

素晴らしいですね、ドン、ありがとうございます。これは私のニーズにぴったりです :slight_smile:

「いいね!」 2

注意点として、コードブロックが問題を引き起こすことがあります。

usermod -aG sudo =USERNAME=

この場合、highlight.js はこれをJavaとみなし、コードブロックを次のように変換します。

  ```code class="hljs language-java" data-highlighted="yes"
    usermod -
    <span class="hljs-type">aG</span> 
    <span class="hljs-variable">sudo</span> 
    <span class="hljs-operator">=</span>
    USERNAME=
  </code>

これをシェルコマンドとして明示することで修正できます。

```java
    ```shell
    usermod -aG sudo =USERNAME=
    ```

これにより、次のようになります。

usermod -aG sudo =USERNAME=

それでもうまくいかない場合は、text を使用すると、highlight.js がプレースホルダーを操作するのを防ぐことができます。

より一般的な解決策(Meta Discourse が使用していると思われる)は、default code lang 設定を auto から plaintext などに変更することです。 :wink:


あまり重要ではありませんが、java を使用することは、プレースホルダーについて記述したい場合にプレースホルダーを展開させないようにする方法です。

「いいね!」 1

プレビューリンクを確認してもらえますか?私には壊れているようです。

「いいね!」 1

これは素晴らしい機能であり、多くの用途があると思います。

しかし、返信で、ユーザーがテキストボックスに入力し始めるまで=(name)=を非表示にすることは可能でしょうか?ユーザー(特に新規ユーザー)はその目的を理解できない可能性があり、または、誤ったフォーマットのように見える可能性があります。

動作するものができたと思います (:crossed_fingers: :slight_smile:)

https://discourse.theme-creator.io/theme/Discourse/placeholder-forms

try.discourse.org にも追加したので、実際に触って試すことができます。:+1:

「いいね!」 1

代わりに表示されるデフォルト値を入力できるかもしれません。

「いいね!」 1

うまくいきました!ありがとうございます!

「いいね!」 2

この回避策はもう機能しないようです。

reply-templateplaceholder-forms を組み合わせる他のオプションはありますか?

4件の投稿が新しいトピックに分割されました: プレースホルダーフォームでリンクが機能しない