Demo content from demo/user-guide (0c17989)

editor-reference/index.md

@@ -0,0 +1,84 @@
+---
+id: editor-reference
+title: Editor reference
+description: Formatting, wikilinks, callouts, images and diagrams in the editor.
+tags: [guide, editor, reference]
+lang: en
+---
+
+# Editor reference
+
+The editor has two modes, switchable at any time: **WYSIWYG** for
+formatted editing, and **Markdown** for the raw text. Under the hood,
+both edit the same Markdown file — the WYSIWYG editor writes it in a
+canonical form, so switching to Markdown and back never surprises you.
+
+## Formatting toolbar
+
+Selecting text shows a toolbar with **Bold (⌘B)**, **Italic (⌘I)**,
+**Inline code (⌘E)**, and **Insert link (⌘K)**. Block-level buttons cover
+**Bullet list**, **Numbered list**, **Task list**, **Insert table**, and
+**Insert image or file**.
+
+## The slash menu
+
+Type **/** on an empty line to open the command menu and insert a block:
+headings (**Heading 1–3**), **Bullet list**, **Numbered list**, **Task
+list**, **Table**, **Code block**, **Quote**, a **Divider**, an
+**Image/File**, a **draw.io diagram**, an **Excalidraw** sketch, a
+**Video**, or a callout (**Note**, **Tip**, **Important**, **Warning**,
+**Caution**).
+
+## Wikilinks
+
+Type **[[** to search for a page by name and insert a link to it —
+either navigate to it directly or insert the link. A wikilink stores the
+target page's id, not its title, so renaming a page's title never breaks
+links to it:
+
+```
+[[getting-started]]
+[[getting-started|Getting started]]
+```
+
+## Callouts
+
+Callouts are GitHub-style alert blocks, available for **Note**, **Tip**,
+**Important**, **Warning**, and **Caution**:
+
+```
+> [!NOTE]
+> Neutral, additional information.
+
+> [!TIP]
+> A helpful suggestion.
+
+> [!IMPORTANT]
+> Something the reader must not miss.
+
+> [!WARNING]
+> A risk to be aware of before proceeding.
+```
+
+## Images
+
+**Insert image or file** (or the slash menu's **Image/File** entry)
+uploads a file and places it in the page; it is stored alongside the
+page in the repository.
+
+## Diagrams
+
+Two diagram types can be edited right inside the page:
+
+- **draw.io diagram** — a flowchart-style diagram, edited in an embedded
+  draw.io canvas.
+- **Excalidraw** — a hand-drawn-style sketch.
+
+Both are saved as an SVG next to the page, with the diagram's own source
+embedded in the file — so opening **Edit diagram** on an existing
+diagram reopens it fully editable, not just as a flattened image.
+
+## Video
+
+The **Video** slash-menu entry asks for a YouTube URL and embeds it as
+its own line in the page.