Formulários de espaço reservado

[Discourse]

	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.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-placeholder-theme-component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

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=

Set up file and image uploads to S3

So, you want to use S3 to handle image uploads? Here’s the definitive guide, but also see Configure an S3 compatible object storage provider for uploads to see how to configure your app.yml. S3 registration Head over to https://aws.amazon.com/free/ and click on [Create a Free Account] During the create account process, make sure you provide payment information, otherwise you won’t be able to use S3. There’s no registration fee, you will only be charged for what you use, if you exceed the AWS F…

---

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.

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 document

Perform check on document:

[j.jaffeux (Joffrey Jaffeux)]

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.

[Benjamin_D (Benjamin Decotte)]

@joffreyjaffeux

Try combining this with the Reply Template theme component!

I tried ! and that would be a neat composer-preview-redux-in-OP kind of thing but… 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:

[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

[j.jaffeux (Joffrey Jaffeux)]

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.

[Benjamin_D (Benjamin Decotte)]

@j.jaffeux

I will think a little bit about this…

Thank you !

[Benjamin_D (Benjamin Decotte)]

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… )

Add 2 replacers

[j.jaffeux (Joffrey Jaffeux)]

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…

[sewid (Sebastian)]

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).

[AquaL1te]

Seria legal se isso também incluísse algumas condições semelhantes ao Jinja2. Para que, por exemplo, alguém pudesse criar uma chave red e mapeá-la para o ícone , orange seria mapeado para . Mas eu posso viver sem, é claro, mas teria sido legal ter essas condições de teste.

[maiki]

Eu amo muito este componente.

---

“E você vive realmente do =NOUN_1=? Que vida =ADJECTIVE_1$=!”

“Dela e com ela e por ela e nela”, disse =PERSON_1=. “É minha irmã e irmão, e tias, e =NOUN_2=, e comida e bebida, e (=ADJECTIVE_2=) =VERBING_1=. É meu =NOUN_3=, e não quero outro. O que ela não tem não vale a pena =VERBING_2=, e o que ela não sabe não vale a pena =VERBING_3=. Senhor! As =NOUNS_1= que tivemos juntos! Seja no inverno ou no verão, na primavera ou no outono, ela sempre tem seu =NOUN_4= e suas =NOUNS_2=. Quando as =NOUNS_3= chegam em fevereiro, e meu =NOUN_4= e o porão estão cheios de =NOUN_5= que não me servem, e o =COLOR_1= =NOUN_6= corre pela minha melhor janela de =NOUN_7=; ou então quando tudo desce =ADVERB_1= e mostra manchas de =NOUN_8= que cheiram a =FOOD_1=, e as =NOUNS_5= e =NOUNS_6= entopem os canais, e eu posso =VERB_1= sobre =MOISTURE= =NOUN_9= por quase todo o =NOUN_10= dela e encontrar =FOOD_2= fresca para comer, e coisas que =ADJECTIVE_3= pessoas deixaram cair de =NOUNS_7=!”

---

Original retirado da versão Standard Ebooks de The Wind in the Willows, disponível para ler online (procure por By it and with it).

[Don]

Olá

Obrigado por este componente Ele se encaixa perfeitamente no que estou tentando alcançar agora. Na verdade, meu primeiro pensamento foi que seria muito legal se pudesse ser combinado com o componente Reply Template. Mas, infelizmente, não é possível, como explicado nas postagens acima.

---

Encontrei uma solução alternativa para usá-lo como um modelo, funciona com link para novos tópicos e link para novas mensagens pessoais.

Veja como fiz:

1. Crie um formulário Placeholder (para simplificar, uso o exemplo na OP)

Seu e-mail: =NAME=-=COUNTRY=@example.com

---

2. Crie um link para um novo tópico:
   Configurei no link:
3. categoria
4. título
5. corpo

Se você quiser adicionar linhas em branco, use \\ para que não quebre o link ou para torná-lo invisível, você pode usar   que adicionará um espaço na nova linha. Isso fará parte do modelo e criará uma linha em branco,

<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>

---

3. Crie uma prévia do tópico

Categoria selecionada

=CATEGORY=

Título do tópico

This is a topic created by =NAME=

Corpo do tópico

Hello

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

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

---

4. Crie o botão “Use template as new topic” (no exemplo acima, este é um link, você pode transformá-lo em um botão)

Crie um elemento [wrap] a partir deste texto. Isso o torna disponível para ser direcionado com CSS e estilizado. Adiciono isso abaixo.

<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>

Estilizando [wrap=template-button]
algo como

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);
  }
}

O botão de modelo ficará assim

---

Demo

Use template as new topic

---

Espero que este pequeno tutorial ajude alguém que precise de algo semelhante

Editar: Configurei um seletor de categoria que adiciona a capacidade de criar tópicos em diferentes categorias.

---

Verifique a versão bruta desta postagem…

[Lilly (Lillian Louis)]

Isso é incrível Don, obrigada. Isso na verdade atende muito bem a uma das minhas necessidades

[jericson (Jon Ericson)]

Algo a notar é que blocos de código às vezes causam problemas:

usermod -aG sudo =USERNAME=

Neste caso, o highlight.js assume que isso é Java e converte o bloco de código para:

  usermod -
  <span class="hljs-type">aG</span> 
  <span class="hljs-variable">sudo</span> 
  <span class="hljs-operator">=</span>
  USERNAME=

Consigo corrigir isso sinalizando que, na verdade, é um comando shell:

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

Isso resulta em:

usermod -aG sudo =USERNAME=

Se tudo mais falhar, text impede que o highlight.js mexa com os placeholders.

Uma solução mais geral (que o Meta Discourse deve estar usando) é alterar a configuração default code lang de auto para plaintext ou algo semelhante.

---

Não que importe muito, mas usar java é uma maneira de evitar que o placeholder se expanda quando você quer escrever sobre placeholders.

[putty (Derek Putnam)]

Você pode verificar o link de pré-visualização? Parece estar quebrado para mim.

[NateDhaliwal]

Este é um recurso incrível, e posso ver muitos usos para ele.
No entanto, em nossa resposta, é possível ocultar o =(nome)= até que o usuário comece a digitar na caixa de texto? Sinto que os usuários (especialmente os novos) podem não entender seu propósito, ou, parece uma formatação incorreta.

[JammyDodger]

@putty

Você pode verificar o link de pré-visualização? Parece estar quebrado para mim.

Acho que consegui consertar um ( )

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

Também adicionei ao try.discourse.org para que você possa brincar mais com ele.

[pfaffman (Jay Pfaffman)]

Talvez você possa inserir um valor padrão que será exibido em vez disso.

[putty (Derek Putnam)]

Isso funcionou! Obrigado!

[bangarang]

Esta solução alternativa não parece mais funcionar.

Existem outras opções para combinar reply-template e placeholder-forms?