# Visual editing

> Edit text directly on the paper, add, duplicate and reorder blocks, work in lists and tags from the keyboard, and set an image's width.

Besides writing Markdown, you can edit on the paper itself. At the top of the
**Paper** pane, **Preview mode** switches between two modes:

- **Read** shows the page and nothing else. It is what you export.
- **Visual** makes the page editable.

Visual mode changes what you can do, not what the page is. The controls it draws
float over an item's corner and are never part of what is measured, so turning
it on cannot move a page break.



## Edit text

In **Visual** mode, click a piece of text on the paper to edit it. You can also
move to it with the Tab key and press Enter. Each field is edited on its own:
you change the words in that one place, not the shape of the document.

- Press Enter, or click elsewhere, to keep the change.
- Press Escape to discard it.

Whatever you keep is written back into the Markdown, so the code pane shows it
at once. The change is one step in the undo history, and while you are typing in
a field the browser's own undo applies to that field's typing.

## Move things

Hover over a block or a section heading and a small set of controls appears at
its top right corner:

- **Drag to move** is a handle you drag.
- **Move up** and **Move down** do the same one place at a time, and are the way
  to do it from the keyboard.
- **Duplicate** puts a copy of a block straight after it.
- **Delete** removes a block. On a section heading it removes the section and
  everything in it, and asks first: the first press turns the button red and
  says so, and the second does it.

The header at the top of the page has no controls, since it has nowhere to move
to.

What a move means depends on what you drop on what:

- A block dropped on another block takes its place, in the same section or a
  different one.
- A block dropped on a section heading goes to the top of that section.
- A section heading dropped on another section heading reorders the sections.

Any other combination does nothing, rather than a guess. Every move can be
undone.

While you drag, a line shows where the drop will land, and no line means the
drop would do nothing. Hold the pointer near the top or the bottom of the window
and the page scrolls, so a block can be taken to another page.

## Add a block

**Insert a block after this** is a menu in the same set of controls. Choose a
paragraph, a heading, a list, an entry, a quote, a divider or a page break and it
is added after the block, or at the top of the section when you use it on a
section heading. A new block is empty and shows a faint prompt, which is a line
of its own while you are in Visual mode and is not printed.

## Lists and tags

The bullets of an entry, the items of a list and the tags of a tag list have no
controls of their own. They are edited as text, and the keyboard does the rest:

- Press Enter to keep the one you are in and start the next, ready to type in.
- Press Backspace in an empty one to remove it and go back to the one before.
  The last one of a list stays, because a list with nothing in it has nothing to
  click.
- Press Alt and the up or down arrow to move it, in a list or an entry. A tag
  does not move.

A tag left blank is not kept.

## Images

An image has **Image width** among its controls. The width is a percentage of
the text column, and is what the `width` in the Markdown directive holds.

You can also drag the bar on the image's right edge. A ghost shows the width it
will take, and letting go sets it in one step you can undo. Dragging to the right
edge means the full column. **Image width** is the way to do it from the keyboard.

## Page breaks

**Insert a page break after this** adds a page break after a block. On a
section heading, **Start this section on a new page** does the same for a whole
section, and stays pressed while it applies: press it again, now named **Stop
this section starting on a new page**, to turn it off. A page break is an item
like any other. Hover over its dashed line to drag it or delete it. See
[Pages and breaks](https://shopsalone.com/en/docs/editor/pages-and-breaks.md).