The Editor

The Editor is where every Knowledge Base article is authored. It opens whenever you click Edit on an article, Create draft from /admin/new, or + New folder → New article from a folder view. This article walks through every component and shows what each one does.

Layout

The editor page is a single column with two main vertical zones, plus an optional sidebar at desktop widths.

• Header bar — article title, status badge (DRAFT / PUBLISHED / ARCHIVED), pending-draft chip, and three action buttons: Save Draft, Publish, Archive (only when published). A Cancel link returns to /admin.
• Keywords field — comma-separated tags used to drive the Related panel on the public reader. See The keywords field below.
• Toolbar — every formatting and inserting action, grouped by purpose.
• Editor canvas — the editable area where you type. Drag images onto it, or paste them.
• Shortcuts panel (sticky right rail at lg and wider) — a cheat-sheet of every keyboard shortcut. Collapsible; the ⌨ Shortcuts button on smaller screens opens it as a bottom-sheet modal.

The toolbar

The twenty-one buttons above are joined by three media buttons (🖼️ insert image, 📹 upload video, 📺 embed YouTube/Vimeo) and a colour palette (text colour + highlight) rendered as separate rows just below.

Text formatting

Five inline marks via B (bold), I (italic), U (underline), S (strikethrough), and <> (inline code). Select text first, then click the button or use the keyboard shortcut.

Example paragraph — bold, italic, strikethrough, and inline code all in one sentence.

Headings

H1, H2, and H3 buttons set the current paragraph's block type. Place the cursor on the line you want to change and click. Re-clicking the same heading button (or ¶) returns the line to a paragraph.

Lists

The • button wraps the current selection (or current line) in a bullet list. 1. does the same for numbered. Press Tab inside a list item to indent it to a sub-level; Shift+Tab to outdent. Press Enter twice to leave the list.

Tables

+Table inserts a 3×3 table at the cursor. Click any cell to start typing. A small Cell menu appears to the right of the table when the cursor is inside a cell — use it to add a row above/below or a column left/right, or to delete rows/columns.

Tab and Shift+Tab navigate between cells.

Callouts

Four highlight blocks surface advisory content. Each has its own colour, icon, and is rendered the same way in the editor, on the public reader, and inside the chat-widget Help tab.

Once inside a callout, Enter keeps adding paragraphs inside the block. Press Ctrl+Enter (or click ↵ in the toolbar) to break out and continue with a new paragraph below — see Exit block below.

Links

The link tool has been replaced with a smarter dialog that handles both kinds of links from one entry point.

1. Select the text you want to turn into a link.
2. Click 🔗 in the toolbar, or press Ctrl+K.
3. Pick a tab:
   • External URL — paste any https:// link and click Insert.
   • KB article — start typing in the search box; the editor calls /api/kb/search and shows live results. Click any result to insert a link to that article (the href is /a/<slug>, which means it works in the chat-widget too — clicks open the linked article inside the widget without losing the chat session).
4. To remove a link, select the linked text and click 🚫🔗.

Code

For inline code() spans, use the <> toolbar button. For multi-line code blocks, set the line type to a code block (paste a fenced code block from clipboard or use Markdown shortcuts at the start of a line).

Example code block:

function hello(name) {
    return `Hello, ${name}!`;
}

Ctrl+Enter exits the code block the same way it exits a callout.

Images

Four ways to put an image in the editor:

1. Drag-and-drop — drag any image file from your file manager onto the editor canvas. Upload happens immediately; a placeholder shows while it streams.
2. Paste — Ctrl+V an image from the clipboard. Same upload flow.
3. Toolbar 🖼️ — opens a file picker.
4. Programmatically — see the agent API for POST /api/kb/admin/blobs if you're scripting imports.

Every image has four corner-handle resize controls (drag any corner to scale) plus a small side menu with three actions: alt text (for accessibility), align (left, none, right), and delete.

Example image, aligned right via the side menu's align: right option:

Text that follows wraps around the image to its left until the next block-level element. Note that floats are cleared inside callouts and tables, so an image inside a callout will not push prose to the side.

Video

Two flavours:

• Upload a video file via 📹 — same blob-storage as images. Renders as <video controls preload="metadata"> so readers see a player with a poster frame.
• Embed YouTube or Vimeo via 📺 — opens a small modal with a single URL field. Paste the watch URL (https://www.youtube.com/watch?v=… or https://vimeo.com/…) and click Insert. The editor converts to the right embed URL automatically. Press Esc to cancel, or click outside the dialog.

Text colour and highlight

Two separate palettes sit below the main toolbar:

• Text colour — five swatches plus a None chip to clear. Applies a coloured <span> to the selection.
• Highlight — five background swatches plus None. Same UI, different mark.

Both palettes are closed-set (no custom colour input) — this keeps the rendered articles consistent across light and dark themes and avoids accessibility issues with low-contrast custom picks.

Exit block

Ctrl+Enter (or the ↵ toolbar button) escapes any container block — callout, blockquote, or code block — by inserting a fresh paragraph immediately after the container and moving the cursor to it. Without this shortcut, Enter keeps you trapped inside the container.

Undo and redo

• Undo: ↶ button or Ctrl+Z. Step back through every transaction in this editing session.
• Redo: ↷ button, or Ctrl+Y / Ctrl+Shift+Z.

Undo history is in-memory per editing session — closing the tab discards it. The published / drafted state on disk is unaffected.

The keywords field

The input above the toolbar takes a comma-separated list of words. They feed two systems:

• Related articles at the bottom of every public reader page and the chat-widget article view. The server combines an article's keywords with text it extracts from its own headings (H1/H2/H3) and runs a MySQL MATCH … AGAINST against every other published article. The top-ranked hits become the Related list. If fewer than five hits result, the list is filled out with same-folder siblings sorted by recency.
• Future search-tuning hooks — the field is also indexed and may drive future filtering / faceted search.

Keep them short, lowercase, and overlapping with the topic vocabulary you'd expect a reader to type. Examples for a Dashboard article: dashboard, home, overview, attendance, schedule, work order.

Save, publish, archive

Three actions, three states:

• Save Draft stores the current editor JSON in kb_article_draft.body_json (and the rendered HTML in kb_article.body_html). The article keeps its previous status — usually DRAFT for new articles, PUBLISHED for edits to live ones. The pending-draft chip shows next to the status badge while a draft sits unconfirmed.
• Publish runs the body HTML through the server-side sanitiser, copies the draft into the live kb_article row, deletes the matching kb_article_draft, sets status = 'PUBLISHED', and revalidates the public reader pages. The article is immediately visible on /a/<slug> and to the chat-widget.
• Archive sets status = 'ARCHIVED'. Public readers stop seeing it; admins still do. Use this instead of deleting — it preserves history.

Keyboard shortcuts cheat-sheet

Full list rendered live in the right-rail panel of the editor, also enumerated here for completeness.

Where to next

This article is a tour. For deeper how-to guides on individual workflows, see the matched companion articles (coming soon) such as Insert images and embeds, Format with callouts and tables, Use keywords for related articles.