Realce de sintaxe não é copiado ao colar em locais que suportam texto colorido

Contribuir Bug
1

Quando copiei o trecho abaixo, do Discourse, para meu cliente de e-mail:

@@ -1,11 +1,11 @@
-Prêmio Jovem Voluntário – celebrando jovens voluntários, de 16 a 24 anos, que se esforçam além do esperado em suas comunidades locais, demonstrando nossos valores e a importância da conexão e da ação.
+O Prêmio Jovem Voluntário celebra jovens voluntários, de 16 a 24 anos, que se esforçam além do esperado em suas comunidades locais, demonstrando nossos valores e a importância da conexão e da ação.
 
 Você conhece alguém jovem que:
 
-Participa do Neighbourhood Watch e gera um impacto positivo em sua comunidade.
+• Participa do Neighbourhood Watch e gera um impacto positivo em sua comunidade?
 
-Dispensa seu tempo para apoiar sua comunidade local (bancos de alimentos, centros comunitários e grupos, pessoas em situação de rua, grupos religiosos)
+• Dispensa seu tempo para apoiar sua comunidade local (bancos de alimentos, centros comunitários e grupos, pessoas em situação de rua, grupos religiosos)?
 
-Realizou atividades de arrecadação de fundos com sua escola ou faculdade ou organizou coletas de lixo ou outros eventos locais.
+• Realizou atividades de arrecadação de fundos com sua escola ou faculdade ou organizou coletas de lixo ou outros eventos locais?
 
-Você acha que esse jovem voluntário merece ser reconhecido por seu trabalho árduo e compromisso com sua comunidade.
+Se for o caso, você acha que esse jovem voluntário merece ser reconhecido por seu trabalho árduo e compromisso com sua comunidade?

…a coloração não foi reproduzida.

2

você usou diff? talvez seu cliente de e-mail não o suporte?

- aqui está algum texto
+ aqui está mais algum texto

Screenshot 2026-05-22 at 9.11.01 AM
Screenshot 2026-05-22 at 9.11.01 AM558×154 3.42 KB

3

@Lilly, sim. Especificar diff é necessário para que a colorização seja renderizada no Discourse:

  1. ```
@@ -1,11 +1,11 @@
-Prêmio de jovem voluntário – celebrando jovens voluntários, entre 16 e 24 anos, que vão além em suas comunidades locais, demonstrando nossos valores e a importância da conexão e da ação.
+O Prêmio Jovem Voluntário celebra jovens voluntários, entre 16 e 24 anos, que vão além em suas comunidades locais, demonstrando nossos valores e a importância da conexão e da ação.
 
 Você conhece um jovem que:
 
-Tem sido voluntário no Neighbourhood Watch e causado um impacto positivo em sua comunidade.
+• Tem sido voluntário no Neighbourhood Watch e causado um impacto positivo em sua comunidade?
 
-Oferece seu tempo para apoiar sua comunidade local (bancos de alimentos, centros comunitários e grupos, pessoas em situação de rua, grupos religiosos)
+• Oferece seu tempo para apoiar sua comunidade local (bancos de alimentos, centros comunitários e grupos, pessoas em situação de rua, grupos religiosos)?
 
-Realizou atividades de arrecadação de fundos com sua escola ou faculdade ou organizou coletas de lixo ou outros eventos locais.
+• Realizou atividades de arrecadação de fundos com sua escola ou faculdade ou organizou coletas de lixo ou outros eventos locais?
 
-Você acha que este jovem voluntário merece ser reconhecido por seu trabalho árduo e compromisso com sua comunidade.
+Se sim, você acha que este jovem voluntário merece ser reconhecido por seu trabalho árduo e compromisso com sua comunidade?
```

  2. @@ -1,11 +1,11 @@
-Prêmio de jovem voluntário – celebrando jovens voluntários, entre 16 e 24 anos, que vão além em suas comunidades locais, demonstrando nossos valores e a importância da conexão e da ação.
+O Prêmio Jovem Voluntário celebra jovens voluntários, entre 16 e 24 anos, que vão além em suas comunidades locais, demonstrando nossos valores e a importância da conexão e da ação.
 
 Você conhece um jovem que:
 
-Tem sido voluntário no Neighbourhood Watch e causado um impacto positivo em sua comunidade.
+• Tem sido voluntário no Neighbourhood Watch e causado um impacto positivo em sua comunidade?
 
-Oferece seu tempo para apoiar sua comunidade local (bancos de alimentos, centros comunitários e grupos, pessoas em situação de rua, grupos religiosos)
+• Oferece seu tempo para apoiar sua comunidade local (bancos de alimentos, centros comunitários e grupos, pessoas em situação de rua, grupos religiosos)?
 
-Realizou atividades de arrecadação de fundos com sua escola ou faculdade ou organizou coletas de lixo ou outros eventos locais.
+• Realizou atividades de arrecadação de fundos com sua escola ou faculdade ou organizou coletas de lixo ou outros eventos locais?
 
-Você acha que este jovem voluntário merece ser reconhecido por seu trabalho árduo e compromisso com sua comunidade.
+Se sim, você acha que este jovem voluntário merece ser reconhecido por seu trabalho árduo e compromisso com sua comunidade?

Você está se referindo a eu estar criando CommonMark no meu cliente?

Se for esse o caso, isso seria de responsabilidade de outro lugar:

Em vez disso, estou me referindo a copiar diretamente da marcação renderizada aqui, como:

4

sim, eu obviamente sei disso, é por isso que eu estava perguntando a você

5

@Lilly, você pode ver, em /1, que eu a utilizei, no entanto.

6

oh, me desculpe, inicialmente achei que fosse uma captura de tela

1 curtida
7

Hoje, isso depende de como você copia.

Usando o botão de copiar:

image
image886×182 16.8 KB

insere apenas a versão de texto na área de transferência, entre outros:

TIMESTAMP,TARGETS,SAVE_TARGETS,MULTIPLE,UTF8_STRING,STRING,TEXT,text/plain,text/plain;charset=utf-8,chromium/x-internal-source-rfh-token,chromium/x-source-url

mas copiar o texto real funciona:

image
image1391×458 66.9 KB

já que você está copiando o HTML renderizado pelo navegador, em vez de ter o Discourse interagindo com a área de transferência, o formato text/HTML fica disponível para consumidores da área de transferência:

<span class="hljs-meta" style="color: rgb(133, 133, 133); font-style: italic; font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-variant-ligatures: none; 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: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">@@ -1,11 +1,11 @@</span><span style="color: rgb(199, 199, 199); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; 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: pre; background-color: rgba(0, 0, 0, 0.25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">\n</span><span class="hljs-deletion" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(79, 24, 11); color: rgb(222, 113, 118); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; 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: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span><span style="color: rgb(199, 199, 199); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; 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: pre; background-color: rgba(0, 0, 0, 0.25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">\n</span><span class="hljs-addition" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(11, 66, 32); color: rgb(118, 196, 144); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; 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: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">+The Young Volunteer Award celebrates young volunteers, aged 16–24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span><span style="color: rgb(199, 199, 199); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; 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: pre; background-color: rgba(0, 0, 0, 0.25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">\n</span><br class="Apple-interchange-newline">

Para dar suporte a isso por meio do botão de copiar, seria necessário adicionar a capacidade de pegar a versão colorizada renderizada (já que a colorização é feita por uma biblioteca) e enviá-la à área de transferência com o formato text/html. Provavelmente é possível (talvez até como um componente de tema), mas, enquanto isso, sempre há a opção de copiar selecionando o texto.

3 curtidas
8

@supermathie, obrigado. Então, o problema parece estar no meu cliente (protonMail/webClients, 5.0.115.3 β):

Screencast20260522180439

No entanto, a coloração também falha ao ser replicada no thunderbird-149.0.1-2.fc44, apesar de parecer funcionar para você:

Tem alguma ideia do que você faz de diferente, se é que faz algo?

9

Quando você copia para o ProtonMail, sendo um cliente web, parece que está usando a versão de texto simples. Note a falta de diferenciação de formatação, embora seja difícil dizer, já que você está substituindo as fontes.

Compare com a colagem no Thunderbird:

image
image580×149 8.39 KB

Ele está captando algumas das formatações, mas não todas.

Se eu copiar, ele captura tudo:

image
image1389×740 103 KB

Acho que, para descobrir isso, é preciso diferenciar se:

  • nem todos os estilos estão sendo copiados
  • nem todos os estilos estão sendo colados

Começar com um navegador limpo, sem extensões, pode ajudar a esclarecer? Por exemplo, se eu usar um navegador privado sem extensões etc., obtenho:

image
image1392×547 83.5 KB

Este script que escrevi também fornecerá visibilidade sobre a área de transferência, o que pode ajudar.

(ou talvez Arch » Fedora :face_with_tongue:)

1 curtida
10

@supermathie, isso ocorre porque a folha de estilos padrão do ProtonMail é péssima.

Seguindo sua orientação, constatei que o próprio Firefox (nem mesmo meu perfil, pois o problema se reproduz com um novo perfil em about:profiles) falha ao copiá-lo:

Sou muito grato!

11

Sim! Eu tenho o mesmo comportamento.

E, estritamente falando, não é um bug. O Firefox está copiando o HTML exatamente como solicitado:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<p dir="auto">Quando copiei o mencionado abaixo, do Discourse, para meu cliente de e-mail:</p>
<pre data-code-wrap="diff" dir="auto" class="codeblock-buttons">
		<div class="codeblock-button-wrapper" style="right: 0px;"></div>
		<code class="lang-diff hljs language-diff" data-highlighted="yes">
			<span class="hljs-meta">@@ -1,11 +1,11 @@</span>
			<span class="hljs-deletion">-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
			<span class="hljs-addition">+The Young Volunteer Award celebrates young volunteers, aged 16–24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
		</code>
	</pre>

A diferença resultante após a colagem vem do Chromium aplicando os estilos em linha, enquanto o Firefox não o faz. Reduzir a um único destaque[1] esclarece o que está acontecendo:

<span
  class="hljs-deletion">
-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.
</span>

<span
  class="hljs-deletion"
  style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);">
-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.
</span>

(quebras de linha adicionadas)

O Chromium aplica, a partir de class="hljs-deletion", o CSS em linha style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);" ao span, já que o destino da colagem provavelmente não possui esse estilo.

  1. heh ↩︎