# Editor

- **Route:** `/article/:id/edit`
- **API:** GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Editor" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).

On mobile, Save and Publish sit in a sticky bottom bar and the details panel opens as a slideover. A session expiry mid-edit keeps the draft in sessionStorage and goes to /login?redirect=/article/12/edit. After logging in, the editor restores the draft and shows "Unsaved changes".

## States

### Loading

**Trigger:** GET in flight. Skeletons for the title, content and details.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "saved", loading true
- Mobile: leading arrow-left button, trailing ellipsis

### Saved

**Trigger:** Just opened or just saved. Save is disabled.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "saved"
- Mobile: leading arrow-left button, trailing ellipsis

### Unsaved changes

**Trigger:** Any edit. Publish becomes "Save and publish". Leaving asks for confirmation.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis

### Saving

**Trigger:** Save, or Ctrl/⌘ S.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "saving"
- Mobile: leading arrow-left button, trailing ellipsis

### Save failed

**Trigger:** 500 or network failure. The changes are kept and Retry resends them.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "error"
- Mobile: leading arrow-left button, trailing ellipsis

### Near the limit

**Trigger:** 90% of 10 000 HTML characters.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "dirty", len 9240
- Mobile: leading arrow-left button, trailing ellipsis

### Too long

**Trigger:** Over 10 000. Save and Publish are disabled until it's shorter.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "dirty", len 10214
- Mobile: leading arrow-left button, trailing ellipsis

### Preview

**Trigger:** The Preview switch. Shows the title and body in the content scale, the way a public site might.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "saved", preview true
- Mobile: leading arrow-left button, trailing ellipsis

### Upload: choose

**Trigger:** The image button in the toolbar, or a file dropped on the editor.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Add an image**
  - upload state: state "idle"
  - cancel "Cancel"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis

### Upload: in progress

**Trigger:** A valid file is uploading. Closing the dialog cancels the upload.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Add an image**
  - upload state: state "uploading"
  - cancel "Cancel upload"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis

### Upload: rejected

**Trigger:** Checked in the browser, so nothing is sent.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Add an image**
  - upload state: state "rejected"
  - cancel "Cancel"
  - confirm "Choose another file"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis

### Upload: inserted

**Trigger:** 201: the image goes in at the cursor, and the article now has unsaved changes.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Toast (success, circle-check): **Image added** "Save to keep it in the article."
- Editor: status "draft", save "dirty", image true
- Mobile: leading arrow-left button, trailing ellipsis

### Publishing

**Trigger:** "Save and publish": the PATCH body, then the publish request.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "saving", pending "Saving and publishing…"
- Mobile: leading arrow-left button, trailing ellipsis

### Published

**Trigger:** 200: the badge flips, Unpublish is offered and a toast confirms.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Toast (success, circle-check): **Article published** ""How we price a bathroom renovation" is now online."
- Editor: status "online", save "saved"
- Mobile: leading arrow-left button, trailing ellipsis

### Unpublishing

**Trigger:** Unpublish doesn't save pending edits.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "online", save "saved", pending "Unpublishing…"
- Mobile: leading arrow-left button, trailing ellipsis

### Delete: confirm

**Trigger:** Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Delete this article?**
  - text ""How we price a bathroom renovation" and its 3 images will be deleted. This can't be undone."
  - cancel "Cancel"
  - confirm "Delete article" (danger)
- Editor: status "draft", save "saved"
- Mobile: leading arrow-left button, trailing ellipsis

### Leave with unsaved changes

**Trigger:** Back, a nav link or closing the tab.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Modal: **Leave without saving?**
  - text "Your changes to "How we price a bathroom renovation" haven't been saved."
  - cancel "Discard changes"
  - confirm "Keep editing"
- Editor: status "draft", save "dirty"
- Mobile: leading arrow-left button, trailing ellipsis

### Offline

**Trigger:** The connection dropped. Writing continues, and Save and Publish wait.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "offline"
- offline: true
- Mobile: leading arrow-left button, trailing ellipsis

### Not found (404)

**Trigger:** Unknown id, or the article was deleted elsewhere.

- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
- Editor: status "draft", save "saved", notfound true
- Mobile: leading arrow-left button, trailing ellipsis