220 lines
8.5 KiB
Markdown
220 lines
8.5 KiB
Markdown
# 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
|