Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Beta]: Pasting multi-line text into a JSX code block in the Code Highlighting example splits it into new CSS blocks

Aperta
  • Qualcosa non va?
#5,265 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
61/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend, testing

Direzione di ricerca

Start with apps/www/src/app/(app)/examples/plite/_examples/code-highlighting.tsx, especially the Enter handler at line 112 and insertCodeBlockBreak at line 350; the issue reports that the example has no paste handling. Reproduce the multiline paste in the first JSX block and trace the editor's default paste path. Done means pasted lines stay in one JSX block with one JSX language select, and undo and redo behave correctly.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug safari target:beta

Testing lane

  • Repository: udecode/plate
  • Branch: next
  • Release channel: Beta
  • Exact commit/package version: NOT_ENOUGH_INFO

Summary

On /examples/plite/code-highlighting, pasting plain text with line breaks at the end of a line in the first JSX code block splits the block. Each pasted line after the first starts a new code block, and the language select of each new block reads CSS. On slatejs.org the same paste stays in one JSX block. Undo brings back the single block, redo splits it again, and a 20-line paste splits the same way. Safari and Chrome both show it.

Reproduction

Both repros paste this plain text from the system clipboard: a, b, an empty line and c.

a
b

c
Repro 1: /examples/plite/code-highlighting, Safari
  1. Open https://beta.platejs.org/examples/plite/code-highlighting.
  2. In the first code block, whose language select at its top right reads JSX, click the end of the first line // Add the initial value., so the caret is after the period.
  3. Paste the text.
  4. Look at the language selects at the right of the code.
  5. Press ⌘Z, then ⌘⇧Z.

After step 3, a joins the comment line, which stays in the JSX block. b, the empty line and c each start a new code block, and the last one also holds the rest of the original code, from const initialValue = [ down. The selects at the right read JSX, CSS, CSS and CSS. ⌘Z brings back one JSX block, and ⌘⇧Z splits it again. A paste of 20 lines at the same place gives each pasted line after the first its own block with a CSS select.

On https://www.slatejs.org/examples/code-highlighting the same paste puts all four lines in the one JSX block, which keeps a single JSX select. The 20-line paste also stays in that block.

Repro 2: /examples/plite/code-highlighting, Chrome
  1. Put the same text on the system clipboard. The recorded run used pbcopy.
  2. Open https://beta.platejs.org/examples/plite/code-highlighting.
  3. Click the first line of the first JSX block, // Add the initial value., and press ⌘→.
  4. Press ⌘V.

The block splits as in repro 1, with selects reading JSX, CSS, CSS and CSS. The editor goes from 5 top-level blocks (paragraph, JSX block, paragraph, TypeScript block, paragraph) to 8.

Expected

The pasted lines become new lines inside the JSX block, and the block keeps one language select that reads JSX, as on slatejs.org.

Actual

The paste splits the code block. Each pasted line after the first starts a new block whose select reads CSS, and the rest of the original code ends up in the last new block. Undo restores the block, and redo splits it again.

Environment

  • Exact next commit/Beta package version: NOT_ENOUGH_INFO
  • Repro 1: Safari 27.0.1 on macOS 27.0.1, in natamox's test session on 2026-10-20 (PT), with native keyboard, mouse and clipboard input and www.slatejs.org side by side. The run's report asks natamox to retest the paste, and no retest by hand is recorded.
  • Repro 2: desktop Chrome 155 on macOS. An agent ran it on 2026-10-20 (PT). The run's notes name the Beta build 7f98d46ed5; nobody checked that against the deploy.
  • Nobody has tried Firefox or a phone.

Caveat

  • Nobody has traced the cause. From a reading of the example's code on next, the example keeps a whole code block as one text with line breaks in it. Its Enter handler inserts a line break inside that text (apps/www/src/app/(app)/examples/plite/_examples/code-highlighting.tsx:112, calling insertCodeBlockBreak at :350), and the example has no paste handling. The guess is that a multi-line paste takes the editor's default path, which splits lines into new blocks. That is an inference, not checked.
  • From the same reading, the select shows value={element.language} (:164), and its first option is CSS. That a new block has no language and so shows CSS is also an inference.
  • This issue covers the Plite example. Plate's code block plugin does not use this example's code, and nobody has checked whether a Plate code block or another block that holds line breaks splits on paste the same way.

Evidence

  • Repro 1: natamox's session recording, 31 seconds, Beta on the left and slatejs.org on the right. It is cut from a 38-second edit of two real Safari window recordings, aligned by step with speed changes and holds, so it does not show response time. Its captions were replaced with English ones, and the Safari profile buttons are blurred. At 0:05 the paste lands on both sides. From then Beta shows four selects, JSX, CSS, CSS and CSS, while slatejs.org keeps one JSX select. At 0:18 ⌘Z restores the original block on both sides. At 0:22 ⌘⇧Z splits the Beta block again. At 0:28 the 20-line paste gives each Beta line after the first its own CSS select, while slatejs.org keeps one JSX block.
  • Repro 1 still: the frame at 0:12 of the same recording, with the four selects on Beta and the single JSX select on slatejs.org.
  • Repro 2: the agent's Chrome window recording, 9 seconds, with English captions. Another tab group's name and the browser profile button are blurred. At 0:02 ⌘V pastes, and from then to the end the block shows the selects JSX, CSS, CSS and CSS.
Repro 1 — Safari, /examples/plite/code-highlighting (slatejs.org/examples/code-highlighting on the right as reference)

https://github.com/user-attachments/assets/16edd6de-70c6-46a0-a1c2-2d1dcac09f7f

Repro 1 still — Safari, /examples/plite/code-highlighting

Repro 1 still — Safari, /examples/plite/code-highlighting

Repro 2 — Chrome, /examples/plite/code-highlighting

https://github.com/user-attachments/assets/6dc91b2d-92ce-40e2-861d-4a57ad771fc5

Lingua principale
TypeScript
Stelle
16.6k
Fork
993
Merge medio
20h 1m
PR unite (30g)
60

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di udecode/plate

Tutte le issue di udecode/plate

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.