Selection-Sync

Mit aktivierter Selection-Sync hebt das Auswählen eines Blocks seine entsprechenden Zeilen in jeder Text-View hervor — und ein Klick auf eine Zeile in einer Text-View wählt den Block aus. Das funktioniert über alle Views: Workspaces, Codespaces (auch schreibgeschützte) und den Code-Editor.

Selection-Sync ist standardmäßig an, sobald mount() mehr als eine View einrichtet. Schalte sie mit mount({ selectionSync: false }) aus, oder aktiviere sie später selbst:

// sobald eine Text-View oder der Code-Editor eingerichtet ist
engine.enableSelectionSync();

So funktioniert es

Die Code-Erzeugung produziert Metadaten neben dem Text — für jeden Block den Zeilenbereich, den er einnimmt, inklusive der Rumpfbereiche von Statement-Inputs (generateJavaScriptWithMetadata() stellt dieselben Daten bereit). Die Selection-Sync nutzt diese Zuordnung in beide Richtungen:

• Block → Code: Das Auswählen eines Blocks im Workspace hebt seinen Bereich in jeder Text-View hervor.
• Code → Block: Ein Klick auf eine Zeile in einer Text-View wählt den Block aus, dem sie gehört — und hebt seine Bereiche auch in den anderen Text-Views hervor.

Ein Klick auf eine leere Fläche in einer Text-View löscht die Hervorhebung überall.

Optionen

Übergib die Optionen an mount() oder an enableSelectionSync():

engine.mount({
  // …Container
  selectionSync: {
    blockToCode: true,
    codeToBlock: true,
  },
});

Option	Standard	Zweck
blockToCode	true	Richtung Block → Code aktivieren
codeToBlock	true	Richtung Code → Block aktivieren

Jede Textansicht hebt in einem helleren Ton ihrer eigenen selectionBackground hervor (aus editorTheme oder themes), sodass die Hervorhebung auf hellen wie dunklen Themes sichtbar ist. Für eine eigene Farbe setze die CSS-Variable --morphic-highlight-color; sie hat Vorrang vor dem Theme:

.cm-content { --morphic-highlight-color: rgb(85 189 203 / 0.25); }

Ausschalten mit engine.disableSelectionSync().

Warum es für den Übergang zählt

Verknüpftes Hervorheben ist es, was nebeneinanderliegende Modes lehrreich macht: Eine Lernende klickt print("hi") im Python-Codespace an und sieht dieselbe Anweisung im Block-Workspace und in der schreibgeschützten JavaScript-Ansicht aufleuchten: drei Repräsentationen, sichtbar ein Programm.