Markdown Viewer

Displays a markdown document.

Remarks

Overview

The Markdown Viewer control displays and allows editing of markdown documents within the Grooper web interface. It provides a dual-mode interface for viewing rendered HTML or editing the markdown source, supporting both read-only and editable scenarios.

UI Components

• Title Bar:
  • Shows the document type ("Markdown Document") and the current document title.
  • Contains action buttons: {save}, {cancel} (when editing is allowed), and {source} for toggling between HTML and markdown source views.
• Content Area:
  • HTML View: Displays the rendered markdown as HTML for easy reading.
  • Markdown Source View: Presents a Code Editor for editing the raw markdown text, with syntax highlighting and editing features.
  • Only one view is visible at a time; users toggle between them using the {source} button.

Interactive Features

• Toggle Source/HTML:
  • Use the {source} button to switch between the rendered HTML and markdown source editor.
  • If there are unsaved changes in the editor, toggling is disabled until changes are saved or canceled.
• Editing and Saving:
  • When not in read-only mode, users can edit the markdown source in the Code Editor.
  • The {save} button commits changes, while the {cancel} button discards unsaved edits and reloads the original content.
  • The control tracks unsaved changes and enables/disables buttons accordingly.
• Keyboard and Accessibility:
  • The Code Editor supports keyboard navigation, shortcuts, and context menu commands for efficient editing.
  • All major actions are accessible via mouse or keyboard.

Usage Guidance

Use the Markdown Viewer to review or edit markdown documents attached to batch folders or other content items. Toggle between the HTML and source views as needed. When editing, remember to save or cancel changes before switching views or navigating away.

• In read-only mode, only the rendered HTML and {source} toggle are available.
• In editable mode, use the {save} and {cancel} buttons to manage changes.
• The Code Editor provides syntax highlighting and editing tools for markdown.

Example

The following diagram illustrates the layout and major UI elements of the Markdown Viewer control:

┌──────────────────────────────────────────────────────────────────────────┐
│ Markdown Document                {save} {cancel} | {source}              │
│ ──────────────────────────────────────────────────────────────────────── │
│ {Title}                                                                  │
│ ──────────────────────────────────────────────────────────────────────── │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ Rendered HTML View (default)                                         │ │
│ │   - Shows formatted markdown content                                 │ │
│ │   - Toggle to source view with {source}                              │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ Markdown Source Editor (when {source} is active)                     │ │
│ │   - Code Editor with markdown syntax highlighting                  │ │
│ │   - Edit, save ({save}), or cancel ({cancel}) changes                │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────┘

• {save}, {cancel}, and {source} refer to the action buttons in the title bar.
• Only one of the HTML view or source editor is visible at a time.
• The Code Editor provides advanced editing features for markdown content.

For more information, see the documentation for Code Editor and related controls.

Command Buttons

Button	Shortcut Key		Summary
code source		►	Toggle between HTML view and markdown source. The {source} button allows users to switch between the rendered HTML view and the markdown source editor within the Markdown Viewer. When active, the markdown source editor (Code Editor) is displayed, enabling direct editing of the markdown text. When inactive, the rendered HTML view is shown for easy reading. If there are unsaved changes in the editor, toggling is disabled until changes are saved or canceled. The button visually indicates the current mode (active/inactive). Use this button to review or edit the underlying markdown content as needed.
save save
cancel cancel		►	Cancel changes to the markdown source. The {cancel} button discards any unsaved edits made in the markdown source editor (Code Editor) and reloads the original content. Enabled only when there are unsaved changes in the editor. Restores the markdown source to its last saved state. After canceling, the editor is no longer marked as "dirty" and toggling views is re-enabled. Only available when the Markdown Viewer is not in read-only mode. Use this button to revert changes and abandon any edits made since the last save.

Child Controls

Name	Type		Summary
Source Editor	Code Editor	►	Code editor displaying the source Markdown. The 'Source Editor' control is an instance of the Code Editor configured for markdown syntax highlighting and editing. Provides a multi-line text editor with syntax highlighting for markdown. Supports keyboard navigation, context menu commands, and editing shortcuts. The editor is read-only if the Markdown Viewer is in read-only mode. Used for direct editing of the markdown source when the {source} button is active. Use the 'Source Editor' to make precise changes to the markdown content, leveraging advanced editing features as needed. For more information, see the documentation for Code Editor.

Used By

Document Viewer