> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# The Block Editing Window

# 🪟 The Block Editing Window

A single click on a block only **selects** it. There is no properties panel next to the graph: the settings live in a floating window. 🎯

---

${frame}[Video: the block editing window](https://celestory-docs-videos.netlify.app/en/geste-ui/the-block-editing-window.html)

## 🖱️ 1. Opening the window

**Double-click the block.** A window opens right next to it, titled "Editing block *Block name*". Its title bar picks up the block's colour. 🎨

-   🔺 Double-clicking a **link** does not open it: it inserts a Connector block there. Aim carefully at the block.
-   🔺 Nothing stops you from opening the same block twice: you end up with two identical windows.

---

## 🧰 2. What the window contains

### 🏷️ The custom title
At the top, the "Add custom title…" field renames the block in the graph. It is saved when you click elsewhere or press Enter. Next to it, the **?** icon opens the online documentation for that block type. 📖

### 📥 One section per input
The window then lists **one section per input point**, titled with the point's name. A Dialogue block shows three: `in`, `dialogue` and `content`.

-   **Flow** point (`in`): the list of connected blocks, each with a **Disconnect *Block (point)*** button. If there are several, a "Disconnect all points" line appears.
-   **Value** point: the entry field itself — character picker, rich text editor, **Image / Sound effect** tabs, and so on.

### 🧪 "Contenu test joué"
This section only appears **after a test**: it replays what the block actually produced. 🔍

---

## 🪟 3. Handling the windows

-   🤚 **Move**: by the title bar. **Resize**: by the left, right or bottom edges (not the top).
-   🗂️ **Several at once**: yes. The active window is crisp, the others are dimmed; clicking one brings it back to the front.
-   ⬆️ **Double-click the title bar**: toggles between maximum size and normal size.
-   🖱️ **Right-click the title bar**: maximize, minimize, stack the window against an edge, make it semi-transparent, close this window, all of them, or all the others.
-   ⌨️ **Shortcuts**: Esc closes the active window; Alt + ↑ / ↓ (Ctrl on PC) maximizes / minimizes; Alt + ← / → stacks it left / right; Shift + Tab switches between windows.

🔺 **Switching modules automatically closes every block editing window.** Finish your settings before navigating elsewhere.

---

## 🎨 4. "Edit block style"

This link appears **at the bottom** of the window, and only for certain blocks in a Chatbot module: Alert, Choice, Dialogue, Narrator, Image, Input, Swipe, Notification, Background, QTE, Select file, Audio choice. It opens a **second window** with the matching section of the module's appearance.

🔺 This setting is **global to the module**: changing it changes how **all** the blocks in the same family are displayed. If the block belongs to several sections, hover the link to choose which one to open.

---

## 💻 5. The blocks with a code editor

Three blocks replace the usual fields with a real code editor: **CSS**, **HTML5** and **Run Javascript**. The last one autocompletes the Celestory functions that read and write the graph's points. 🚀

🔺 Your code is only saved when the editor **loses focus**: click outside, or close the window, before testing.

---

→ Next step: double curly braces, which turn a word in your text into a new input point on the block. ✨