Propriedade CSS `white-space` de dados da área de transferência não respeitada ao colar em editor de rich text

Contribuir Bug
14

Claro. Fico feliz se a informação puder ser útil. Gostaria de reiterar minha declaração anterior:

No entanto, ficaria feliz em estar errado sobre isso :slightly_smiling_face:.

  1. Copie o seguinte código C++:
    #include <iostream>
int main() {
  std::cout << __FILE__;
}
  2. Abra o compositor de postagens.
  3. Coloque o compositor no modo “editor de rich text”.
  4. Cole o conteúdo copiado no compositor.

:slightly_frowning_face: O conteúdo está corrompido:

#include
int main() {
std::cout << FILE;
}

(observe que o <iostream> foi suprimido por se assemelhar a uma tag HTML não suportada, e o __FILE__ foi tratado como marcação em negrito)

Isso pode ser visto como erro do usuário, pois poderia ser evitado acionando um bloco de código antes de colar o conteúdo não em prosa. No entanto, poderíamos esperar que o fluxo de trabalho alternativo de aplicar formatação de bloco de código retroativamente ao conteúdo colado seria igualmente válido (como é ao usar o editor Markdown).

Equipamento

  • Qualquer placa Arduino (seja oficial ou de terceiros)

Instruções

  1. Instale o Arduino IDE 2.3.6, que pode ser baixado na página “Software” do site do Arduino:
    https://www.arduino.cc/en/software/#ide-download-section
  2. Inicie o Arduino IDE.
  3. Selecione File > New Sketch nos menus do Arduino IDE.
  4. Substitua o conteúdo do novo sketch pelo seguinte código:
    void setup() {
  Serial.begin(9600);
  while (!Serial) {}  // Aguarda a porta serial ser aberta.
  delay(500);         // Algumas placas requerem um delay após a inicialização da porta serial.
  Serial.println("foo");
  Serial.println("bar");
}
void loop() {}
  5. Selecione Tools > Serial Monitor nos menus do Arduino IDE para abrir a visualização Serial Monitor, se ela ainda não estiver aberta.
  6. Selecione “9600” no menu da taxa de baud na visualização Serial Monitor.
  7. Faça o upload do sketch para sua placa Arduino.
  8. Selecione a saída serial do campo na visualização Serial Monitor.
  9. Copie o conteúdo selecionado.
  10. Abra o compositor de postagens do Discourse.
  11. Coloque o compositor no modo “editor de rich text”.
  12. Cole o conteúdo copiado no compositor.

:slightly_frowning_face: Cada linha do conteúdo copiado é colocada em um bloco de código separado:

foo


bar

Se você inspecionar o conteúdo da área de transferência, verá que, além do conteúdo esperado do tipo “text/plain”:

foo
bar

Ele também contém o seguinte conteúdo do tipo “text/html”:

<div style="color: rgb(78, 91, 97); font-family: monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: nowrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: absolute; left: 0px; top: 0px; height: 18px; width: 1862px;"><pre style="margin: 0px;">foo
</pre></div><div style="color: rgb(78, 91, 97); font-family: monospace; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: nowrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; position: absolute; left: 0px; top: 18px; height: 18px; width: 1862px;"><pre style="margin: 0px;">bar</pre></div>

Como o Serial Monitor do Arduino IDE 2.x envolve incorretamente cada linha do conteúdo copiado do tipo “text/html” em tags <pre>, a renderização de cada linha do conteúdo colado como um bloco de código separado pelo editor de rich text do Discourse é correta e esperada.

Assim como no outro problema que descrevi acima, a formatação inesperada pode ser evitada acionando proativamente a formatação de bloco de código antes de colar o conteúdo.

2 curtidas