CMS

Usage

Content workbench

Editorial board

A four-column board of the same posts by stage, made for the weekly planning meeting rather than field-by-field edits.

Overview

The content workbench behind the Tuff docs and blog: find posts by status, publish or archive in bulk, and edit in a drawer, with undo for every change.

• Filters, search, sorting, and paging each simulate a fetch of about 350 ms: the table keeps the old rows and swaps to same-layout skeleton rows only after 120 ms, so nothing jumps.
• Sorting covers every filtered post before the page is cut; changing page or filter clears the selection, since select-all covers one page.
• Edit, publish, archive, and delete apply at once, and the toast offers Undo for about 5 seconds; the drawer validates only on save.
• In the docs column a row click opens the drawer; expanded (≥ 960px) adds three columns and a details panel; below 640px only the title column stays.
• Editorial board: drag within a column to reorder and across columns to change status; expanded, drop a card on a day to schedule it; every move can be undone.
• Editorial board: each column is one tab stop where Space picks up, ↑ / ↓ move, ← / → change column, and Esc cancels; below 640px one column shows at a time.
• Editorial board: once in view a collaborator comes online and moves a card; a click or key stops it, and reduced motion shows the end state.

Customization

• For a real backend, replace the simulated fetch with a request and cancel the previous one when the next query goes out.
• With server-side paging, keep sort-on-client off and send sort, filter, and page together.
• Put new fields in the drawer and details panel first; in a narrow container, drop columns by priority instead of scrolling sideways.
• TxMarkdownEditor can replace the body for WYSIWYG editing, provided the host can generate its toolbar icon classes.
• Editorial board: the host handles cross-column drops (let dragover through, record the target on drop, change the data on the root's dragend); buttons inside a card must stop Enter and Space.

Related components