Obrigado.
Como você acha que isso poderia funcionar?
Aqui estão algumas ideias que tenho, embora ainda haja algumas perguntas a serem respondidas:
Básico que já existe: Espaços reservados. Mas, atualmente, é 'tudo ou nada'
A estrutura mais simples que consigo pensar para imitar o comportamento de um formulário seria fazer com que o “formulário” apareça no editor (o “d-editor” que surge ao clicar em criar tópico).
Nesse editor, você poderia fornecer diferentes “seções”, como:
Nome
Localização
Problema
Cada título de seção seria um espaço reservado, de modo que, quando o usuário clicasse nele, o título (por exemplo, Nome) desapareceria.
Até agora, configurar isso é possível com o componente de tema de texto de espaço reservado.
Mas isso não chega totalmente ao comportamento semelhante a um formulário, porque os espaços reservados que existem atualmente aparecem de forma “tudo ou nada”, como descrevo a seguir.
Comportamento semelhante a um formulário com espaços reservados. Mas como acessar divs no editor?
Para tornar isso mais parecido com um formulário, cada seção deve se comportar de forma independente.
Atualmente, com o componente de tema de texto de espaço reservado, é tudo ou nada: se o usuário clicar no editor, todos os títulos de espaço reservado desaparecem.
Portanto, para ter um comportamento básico de formulário, em vez de fazer com que todos os títulos apareçam ou desapareçam simultaneamente, precisaríamos que cada seção de título de espaço reservado se comportasse de forma independente. Assim, quando o usuário clicar no espaço reservado “Nome”, apenas esse espaço reservado desaparece, enquanto os outros espaços reservados (“Localização” e “Problema”) permanecem.
Isso seria possível se cada espaço reservado pudesse fazer parte de sua própria div com um ID exclusivo dentro do editor de texto. Então, com jQuery, você poderia mostrar ou ocultar o espaço reservado dependendo se o usuário clicou na área. Isso requer a adição de divs separadas dentro do que é atualmente uma área de texto, e não tenho certeza de como fazer isso.
Pergunta para essa abordagem: Como acessar divs dentro da área de texto do editor, para que você possa tomar uma ação quando o usuário clicar nelas?
Alternativa: usar a opção de texto de modelo existente. Mas como fazer com que o texto não seja editável?
Provavelmente, uma alternativa seria que os cabeçalhos de seção não “desapareçam” quando o usuário clicar. Assim, os cabeçalhos de seção (exemplo: Nome, Localização e Problema) seriam texto que permaneceria na página. Para torná-lo mais parecido com um formulário, em comparação com o padrão atual de modelo de tópico básico:
- O texto do cabeçalho da seção não poderia ser editado pelo usuário (ou seja,
contenteditable="false")
- Os pontos de quebra de seção não poderiam ser removidos pelo usuário
- Haveria espaço abaixo do cabeçalho da seção onde fica claro que o usuário pode digitar. No modelo padrão atual, eles teriam que ir até onde está o texto, pressionar
enter, para criar espaço para digitar.
Pergunta para essa abordagem: Como inserir texto de modelo, mas (i) fazer com que esse texto não seja editável pelo usuário e (ii) ter locais claros para o usuário inserir informações abaixo de cada parte do texto?
Talvez exista uma maneira melhor de obter um comportamento semelhante a um formulário?