11th October 2024 — Content management enhancements #65

build 333 (6730c2a)

Markdown Formatting Toolbar Added

• In site edit mode, when any text item is edited, a formatting toolbar is now displayed above the text area as shown in the screenshot below. The purpose of the toolbar is to help users apply formatting to text without having to remember all of the markdown codes:

Key to toolbar buttons:

↻ (Revert) — Undoes all changes and reverts content back to the last saved version

H (Heading) — Make selection a Heading: Dropdown menu to convert selected text to Heading 1-6

B (Bold) — Make selection Bold: Wraps selected text in bold markdown syntax

I (Italic) — Make selection Italic: Wraps selected text in italic markdown syntax

<> (Code) — Make selection Code: Wraps selected text in code markdown syntax for inline code

" (Quote Right) — Make selection a Quotation: Adds > prefix to selected lines to create a blockquote

• (List Unordered) — Make selection a Bulleted List: Adds - prefix to selected lines to create a bulleted list

1. (List Ordered) — Make selection a Numbered List: Adds 1. (2., 3., etc.) prefix to selected lines to create a numbered list

🔗 (Link) — Make selection a Link: Converts selection to selection markdown link format (auto-detects URL from clipboard if available)

✂ (Scissors) — Split text into new row below: Splits content at cursor or selection into a new row below the current one

🖼 (Image) — Convert content into rows: Appears only when markdown images are detected in the content; converts markdown with images into multiple separate rows

Drag and Drop

Columns and rows can now be dragged one one location to another by clicking on the drag anchor to the right of the frame text:

• Column drag also works within nested rows
• Column drop targets support before/after via half-split hover with tooltip
• Realtime tooltips provide feedback as to the destination from the potential drop operation

Shared Fragments

A Shared Fragment is a piece of content defined once, and then referenced any number of times from other pages. An example of a use for Shared Fragments is to provide a consistent navigation back to a parent page, or embedding repeating content on many pages.

• To create a Shared Fragment, when one or more rows are selected, a new Row Actions section appears above the top-most selected row:

• Once a shared fragment has been created it can then be included in any other page by creating new row of type Shared Fragment and selecting it from a dropdown:

• A Shared Fragment can be added to both a normal row and also within a nested Row
• Shared Fragments can be viewed and edited from the /admin/fragment-index page along with their usages.

Paste Image Flow

• Pasting an image into Image Source triggers inline editor with preload
• Auto-generate original filename as ' pasted content.' (const + ternary)
• Fix alert showing 'null'; initial crop triggers controls
• Preserve HEIC conversion and AWS naming flow on save