# 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: crop and resize **Trigger:** A JPEG, PNG or WEBP passed the checks, and nothing is sent yet. The crop starts as the whole image and the width defaults to 1600 px. SVGs skip this step. - Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article") - Modal: **Crop and resize** "north-wall.jpg · 3.9 MB" - crop: ratio "Original", width "1600 px" - cancel "Choose another file" - confirm "Upload image" - Editor: status "draft", save "dirty" - Mobile: leading arrow-left button, trailing ellipsis ### Upload: crop to a ratio **Trigger:** 16:9 chosen. The frame keeps the ratio while it's dragged or resized. Arrow keys move it; Shift and arrow keys resize it. - Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article") - Modal: **Crop and resize** "north-wall.jpg · 3.9 MB" - crop: ratio "16:9", width "1600 px" - cancel "Choose another file" - confirm "Upload image" - Editor: status "draft", save "dirty" - Mobile: leading arrow-left button, trailing ellipsis ### Upload: crop narrower than the width **Trigger:** The crop is smaller than the chosen width, so it keeps its own size. - Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article") - Modal: **Crop and resize** "north-wall.jpg · 3.9 MB" - crop: ratio "1:1", width "1600 px" - note: "The crop is 640 px wide, so it's uploaded at that size. Enlarging it would make it blurry." - cancel "Choose another file" - confirm "Upload image" - Editor: status "draft", save "dirty" - Mobile: leading arrow-left button, trailing ellipsis ### Upload: in progress **Trigger:** Upload image was pressed. The cropped, resized 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" ("Uploading 180 of 420 KB") - 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