8.5 KiB
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" will be deleted. Its images stay in your library. 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