La proprietà CSS `white-space` dei dati degli appunti non viene rispettata durante l'incolla nell'editor di testo RTF

per1234 · 18 Agosto 2025, 12:07pm

Priorità/Gravità:

Media

Piattaforma:

Sistema Operativo

Windows 11

Browser

Google Chrome 139.0.7258.128

Discourse

028c90dd5e7a2799ea5b6e963f71fc0222681943

Descrizione:

Il testo copiato da alcune origini può essere memorizzato negli appunti in formato formattato (tipo text/html) oltre al testo normale (tipo text/plain).

Quando il testo viene incollato nel compositore, se è presente un tipo di dati formattato negli appunti, questo dato viene utilizzato al posto del tipo di testo normale.

Per impostazione predefinita, lo spazio bianco nei contenuti HTML viene compresso. Questo comportamento può essere controllato tramite la proprietà CSS white-space.

Incollando nel compositore quando si è in modalità editor di testo avanzato, la proprietà CSS white-space dei dati degli appunti non viene rispettata. Ciò si traduce in uno spazio bianco sempre compresso nel contenuto incollato. Nei casi in cui il contenuto di origine aveva una proprietà white-space impostata sul valore pre, ciò si traduce in un contenuto incollato difficile da leggere e errato nei casi in cui lo spazio bianco del contenuto di origine aveva un significato tecnico.

Passaggi riproducibili:

Creare un file HTML con il seguente contenuto:

<html>
  <body>
    <span style="white-space: pre">foo
bar
    </span>
  </body>
</html>

Aprire il file nel browser web.
Notare che lo spazio bianco del contenuto della pagina non viene compresso:
```
foo
bar
```
Copiare il contenuto della pagina web.
Aprire il compositore di post.
Mettere il compositore in modalità “editor di testo avanzato”.
Incollare il contenuto copiato.

Invece di avere lo stesso formato del contenuto copiato, lo spazio bianco del contenuto incollato è stato compresso:

foo bar

Contesto aggiuntivo:

Vedo che ProseMirror supporta white-space: pre:

github.com/ProseMirror/prosemirror-model

CHANGELOG.md?plain=1

1.25.1


      
          ## 1.24.1 (2024-12-10)
          
          ### Bug fixes
          
          The parser now automatically preserves whitespace inside `<pre>` or `white-space: pre` elements.

Il difetto non si verifica quando si utilizza il compositore in modalità “editor Markdown”.

Il difetto non si verifica se il contenuto viene incollato in un blocco di codice invece che nella normale modalità di editor. È vero che in molti casi sarebbe più appropriato inserire il contenuto che utilizza qualcosa come white-space: pre in un blocco di codice. Tuttavia, è abbastanza comune che gli utenti applichino la formattazione retroattivamente aggiungendo il contenuto al compositore, selezionando il contenuto, quindi utilizzando la barra degli strumenti del compositore per applicare la formattazione (al contrario dell’approccio alternativo di attivare un blocco di codice prima di aggiungere il contenuto).

Ho trovato questo uno strumento utile per esaminare i dati grezzi del contenuto degli appunti:

Sono in grado di riprodurre il difetto su try.discourse.org in “modalità sicura”.

Correlati

(Android) pasting with the keyboard's clipboard in code block returns only the first line - #2 by sam

per1234 · 18 Agosto 2025, 12:43pm

Hai inserito l’editor di post in modalità “editor di testo rich text” prima di incollare il contenuto copiato dalla pagina web?

Il problema si verifica ancora.

Sei sicuro di aver seguito le istruzioni esattamente come scritto?

Tieni presente che devi copiare il contenuto che viene renderizzato da quell’HTML, in modo che il contenuto degli appunti venga popolato con dati di tipo text/html:

<html>
<body>
<!--StartFragment--><span>foo
bar
    </span><!--EndFragment-->
</body>
</html>

Non si tratta di comporre il tuo post utilizzando markup HTML.

NateDhaliwal · 18 Agosto 2025, 1:17pm

Ottima osservazione. Ho la tendenza a leggere i post un po’ troppo velocemente

sam · 20 Agosto 2025, 1:25am

Grazie per la segnalazione @per1234, ci stiamo occupando della questione.

Comprendiamo il problema generale qui, vogliamo rendere il più semplice possibile per le persone incollare esempi di codice.

renato · 15 Ottobre 2025, 1:13pm

Cosa ti aspetteresti da un copia e incolla HTML del genere?

foo
bar

Oppure, considerando che si tratta di un tag span, due righe di codice inline con un’interruzione di riga tra di esse?

foo
bar

Oppure semplicemente che rispettiamo le interruzioni di riga ma in un paragrafo normale, con un’interruzione di riga tra di esse?

foo
bar

Grazie!

per1234 · 15 Ottobre 2025, 4:48pm

Non ho molta conoscenza in materia di HTML, ma mi aspetterei questo rendering:

Per quanto ne so, è così che lo visualizza il browser Chrome.

Detto questo, nell’uso specifico in cui ho riscontrato il problema, è vero che il rendering del blocco di codice sarebbe più appropriato. Otteniamo questo tipo di contenuto dagli appunti facendo clic sul pulsante “Copia output console” in un IDE online chiamato “Arduino Cloud Editor”:

Questo copia negli appunti l’output prodotto dal compilatore e da altri strumenti. Questo tipo di contenuto non testuale è meglio formattato come blocco di codice.

Se viene utilizzata la seguente procedura per condividere l’output copiato in un post del forum:

Mettere il compositore del post in modalità “editor di testo rich”.
Incollare il contenuto nel compositore.
Selezionare il contenuto incollato.
Fare clic sull’icona </> nella barra degli strumenti del compositore.

Il post si presenta con la seguente formattazione:

/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo  #error foo   ^~~~~

(si noti che tutto il contenuto copiato è su una singola riga)

mentre ci aspetteremmo questa formattazione del post:

/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo
 #error foo
  ^~~~~

Tuttavia, questa preferenza per un blocco di codice è specifica per il nostro particolare caso d’uso. Potrebbe darsi che in altri casi d’uso ci siano fonti di contenuto dagli appunti con una proprietà white-space: pre per le quali un blocco di codice non sarebbe appropriato. E anche per il nostro caso d’uso è ragionevole delegare all’utente la responsabilità di applicare manualmente la formattazione del blocco di codice.

renato · 15 Ottobre 2025, 4:54pm

Non più, questo è stato recentemente corretto (puoi testarlo qui).

In questo caso, utilizza ancora un tag span nel suo output degli appunti text/html, o emette solo plain/text?

per1234 · 15 Ottobre 2025, 5:10pm

Se uso lo strumento "Clipboard Inspector" per verificare quali dati sono negli appunti dopo aver fatto clic sul pulsante “Copy Console Output” nell’Arduino Cloud Editor, mostra che ci sono i seguenti dati di tipo "text/plain":

/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo
 #error foo
  ^~~~~

e i seguenti dati di tipo "text/html":

<span style="color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, &quot;Lucida Grande&quot;, lucida, verdana, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.16px; 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; display: inline !important; float: none;">/run/arduino/sketches/asdf/asdf.ino:1:2: error: #error foo
 #error foo
  ^~~~~</span>

Spero che questo risponda alla tua domanda. Sono felice di fornire ulteriori informazioni se necessario.

renato · 21 Ottobre 2025, 1:56pm

Questo dovrebbe essere risolto da FIX: [rich editor] convert newlines to hard breaks when parsed from HTML by renato · Pull Request #35518 · discourse/discourse · GitHub (non ancora unito, è ancora in attesa di una revisione del codice).

La mia prima versione è stata quella di convertirlo in un blocco di codice, ma penso che sarebbe troppo avido e causerebbe alcuni falsi positivi. Invece, rispettiamo semplicemente le interruzioni di riga convertendole in interruzioni rigide nel contesto in cui è stato incollato l’HTML. (Grazie ai miglioramenti di Marijn a prosemirror-model: When preserving whitespace, replace newlines with line break replacem… · ProseMirror/prosemirror-model@79e9f2b · GitHub)

Con i recenti miglioramenti al pulsante della barra degli strumenti del codice, gli utenti dovrebbero essere in grado di selezionare questa sezione incollata con le interruzioni rigide e convertirla in un blocco di codice, e le nuove righe dovrebbero essere mantenute.

per1234 · 26 Ottobre 2025, 5:10pm

Grazie mille per la correzione @renato, e per aver dedicato del tempo a pubblicare un aggiornamento qui!

Le recenti correzioni di bug hanno portato la funzionalità dell’editor di testo rich a un punto in cui può servire a rendere il nostro forum più accessibile agli utenti meno tecnici che non hanno già familiarità con Markdown e non sono motivati ad apprenderlo.

Ci sono ancora un paio di condizioni in cui i risultati non sono quelli attesi, ma queste sono cose che non è ragionevole mitigare tramite il codebase di Discourse:

Corruzione dovuta a sintassi di markup incidentale

I post possono essere corrotti nel caso in cui ci sia contenuto che assomiglia incidentalmente al markup. Ciò è dovuto alla decisione intenzionale di supportare il markup nell’editor di testo rich.

Per il nostro caso d’uso, in cui coloro che desiderano utilizzare il markup dovrebbero utilizzare l’editor Markdown, mentre l’editor di testo rich è destinato solo a coloro che non hanno interesse a utilizzare il markup, questa è una decisione molto sfortunata. Uno dei problemi più significativi che abbiamo con gli utenti non tecnici che utilizzano l’editor Markdown è la corruzione dei post dovuta a markup incidentale e avevo grandi speranze che l’editor di testo rich avrebbe fornito una soluzione per questo. Tuttavia, per il caso d’uso in cui un forum fornirà solo un editor di testo rich, questo design ha perfettamente senso poiché consente ancora agli utenti esperti di Markdown di comporre post in modo efficiente.

Formattazione errata dovuta a markup inappropriato nel contenuto degli appunti

Abbiamo un caso in cui il contenuto di tipo “text/html” aggiunto agli appunti quando si copia da una specifica applicazione contiene markup HTML inappropriato, il che si traduce in una formattazione errata quando il contenuto viene incollato nell’editor di testo rich al di fuori di un blocco di codice.

Questo è ovviamente un bug nell’applicazione e Discourse sta agendo al 100% correttamente formattando il contenuto come indicato dal markup.

sam · 26 Ottobre 2025, 9:37pm

Grazie mille @per1234

Puoi fornire maggiori dettagli sugli esempi in cui può verificarsi la corruzione? Abbiamo ancora alcuni casi limite relativi ai nodi che non sappiamo come renderizzare, ma cerchiamo di impedire il passaggio all’editor rich text in casi come questi.

Per quanto riguarda gli appunti, vogliamo certamente migliorare. È un problema difficile, quindi qualsiasi riproduzione esatta qui sarebbe molto utile.

per1234 · 27 Ottobre 2025, 5:20am

Certo. Sono lieto se le informazioni possono essere utili. Vorrei ribadire la mia precedente dichiarazione:

Tuttavia, sarei felice di sbagliarmi su questo .

Copia il seguente codice C++:

#include <iostream>
int main() {
  std::cout << __FILE__;
}

Apri il compositore di post.
Imposta il compositore sulla modalità “editor di testo ricco”.
Incolla il contenuto copiato nel compositore.

Il contenuto è corrotto:

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

(si noti che <iostream> è stato soppresso perché assomigliava a un tag HTML non supportato, e __FILE__ è stato trattato come markup in grassetto)

Questo potrebbe essere considerato un errore dell’utente, poiché potrebbe essere evitato attivando un blocco di codice prima di incollare il contenuto non di prosa. Tuttavia, potremmo aspettarci che il flusso di lavoro alternativo di applicare la formattazione del blocco di codice retroattivamente al contenuto incollato sarebbe ugualmente valido (come avviene quando si utilizza l’editor Markdown).

Attrezzatura

Qualsiasi scheda Arduino (ufficiale o di terze parti)

Istruzioni

Installa Arduino IDE 2.3.6, che può essere scaricato dalla pagina “Software” del sito web di Arduino:
https://www.arduino.cc/en/software/#ide-download-section
Avvia Arduino IDE.
Seleziona File > Nuovo Sketch dai menu di Arduino IDE.

Sostituisci il contenuto del nuovo sketch con il seguente codice:

void setup() {
  Serial.begin(9600);
  while (!Serial) {}  // Attendi che la porta seriale venga aperta.
  delay(500);         // Alcune schede richiedono un ritardo dopo l'inizializzazione della porta seriale.
  Serial.println("foo");
  Serial.println("bar");
}
void loop() {}

Seleziona Strumenti > Monitor Seriale dai menu di Arduino IDE per aprire la vista Monitor Seriale, se non è già aperta.
Seleziona “9600” dal menu del baud rate nella vista Monitor Seriale.
Carica lo sketch sulla tua scheda Arduino.
Seleziona l’output seriale dal campo nella vista Monitor Seriale.
Copia il contenuto selezionato.
Apri il compositore di post di Discourse.
Imposta il compositore sulla modalità “editor di testo ricco”.
Incolla il contenuto copiato nel compositore.

Ogni riga del contenuto copiato viene inserita in un blocco di codice separato:

foo

bar

Se ispezioni il contenuto degli appunti, vedrai che, oltre al contenuto atteso di tipo “text/plain”:

foo
bar

Contiene anche il seguente contenuto di 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>

Poiché l’IDE Arduino 2.x Serial Monitor racchiude erroneamente ogni riga del contenuto copiato di tipo “text/html” in tag <pre>, il rendering di ogni riga del contenuto incollato come un blocco di codice separato da parte dell’editor di testo ricco di Discourse è corretto e previsto.

Come per l’altro problema che ho descritto sopra, la formattazione imprevista può essere evitata attivando in modo proattivo la formattazione del blocco di codice prima di incollare il contenuto.

Argomento		Risposte	Visualizzazioni
Coincidental Markdown in formatted content pasted to rich text editor rendered on publish Bug composer	0	45	Ottobre 27, 2025
Rich Text editor in topics breaks white-space characters in multiple ways Bug composer , markdown , code	4	106	Ottobre 15, 2025
HTML/RTF pasting Feature	76	13119	Marzo 9, 2020
Copy + Pasting text from Discord into Discourse mangles paragraph breaks Bug	4	1246	Marzo 15, 2024
Get back the real "raw" data that created a post? Dev	25	2873	Maggio 6, 2021