fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 19 Wiki Activity
Files
f914eae3c5e56a907bd9ec87cdacdf1d14dc12b0
RenewCMS/docs/design/screens/editor.md
T

8.5 KiB
Raw Blame History

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
Reference in new issue View Git Blame Copy Permalink