RenewCMS/docs/design/screens/editor.md

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