Reverse Engineering The Open Sourced Software Discourse Post One
Reading and Studying the Repository for Discourse
(Hint: No, you do not read it cover to cover like a book)
⸻
Background Song:
Sloppy Joe generated (not original md) file not allowed to use the word “” or post more than 32000 characters el oh el
AI Generated Markdown Document
Drop Down for document content
Discourse Reusable Components Reference
Attribution & License Notice
This document catalogs reusable UI components from
Discourse, an open-source
discussion platform by Jeff Atwood, Robin Ward, and Sam Saffron.
Licensed under GNU GPL v2.0: GNU General Public License v2.0 - GNU Project - Free Software Foundation
Table of Contents
- Rich Text Editor (Composer + ProseMirror)
- D-Editor (Markdown Editor)
- Emoji Picker
- Modal System (DModal)
- Float Kit (Tooltips, Menus, Toasts)
- Select Kit (Dropdowns & Choosers)
- Date & Time Pickers
- Upload System (Uppy-Based)
- Ace Code Editor
- Color Picker
- Spreadsheet Editor
- Form Kit
- Avatar System
- Character Counter
- SVG Sprite / Icon System
- Lightbox
- Bookmark System
1. Rich Text Editor (Composer + ProseMirror)
Full-featured WYSIWYG editor with Markdown conversion, extension system, and configurable toolbar.
Key Files: composer.js, textarea-editor.gjs, toolbar-buttons.gjs, text-manipulation.js, rich-editor-extensions.js
Extensions (26 default): Emoji, Image, Onebox, Code, Code Block, Link, Link Toolbar, Heading, Quote, Hashtag, Mention, Strikethrough, Underline, HTML Inline/Block, Trailing Paragraph, Typographer Replacements, Table, Markdown Paste, Ordered/Bullet List, Wrap, Trailing Inline Space, Override Drag Ghost, Hard Break, Grid
Toolbar Buttons: Bold, Italic, Heading (H1–H4), Link, Blockquote, Code, Bullet List, Ordered List
Recreation Prompt: Build a ProseMirror-based rich text editor with pluggable extensions, toolbar with grouped buttons and shortcuts, rich/Markdown toggle, and default features covering formatting, lists, links, code, media, emoji, mentions, hashtags.
2. D-Editor (Markdown Editor)
Wrapper for ProseMirror or plain textarea with toolbar and live preview.
Key Files: d-editor.gjs, d-editor-preview.gjs
Features: Dual-mode editing, live preview, toolbar with grouped buttons, keyboard shortcuts, text manipulation API, plugin events
Recreation Prompt: Build dual-mode editor with toolbar, text API (applySurround, applyList, formatCode, applyHeading), and live preview rendering Markdown to HTML.
3. Emoji Picker
Categorized emoji selection component with search, skin tones, and mobile responsiveness.
Key Files: emoji-picker/index.gjs, content.gjs, detached.gjs, diversity-menu.gjs
Features: Category grid, fuzzy search, skin tones, custom emoji, recent emojis, keyboard nav, modal on mobile
Recreation Prompt: Build emoji picker with search, categories, skin tones, recent section, mobile modal, popover on desktop, and selection callback.
4. Modal System (DModal)
Flexible modal dialog system with animations, swipe-to-dismiss, keyboard handling, and slot-based content API.
Key Files: d-modal.gjs, d-modal-cancel.gjs, modal-container.gjs
Features: Animated transitions, backdrop click, ESC/Enter keys, focus trapping, mobile swipe, scroll locking, named content slots, closure tracking
Recreation Prompt: Build accessible modal system with animations, swipe-to-dismiss, focus trapping, ESC/Enter handling, and slot-based API.
5. Float Kit (Tooltips, Menus, Toasts)
Unified floating UI system using Floating UI for positioning.
Key Files: d-tooltip.gjs, d-menu.gjs, d-toasts.gjs, tooltip/menu/toasts services
Features: Tooltips (hover/focus), menus (click, mobile fallback), toasts (stacked, auto-dismiss, action buttons)
Recreation Prompt: Build floating UI kit with tooltips, menus, and toasts, each with service API and positioning logic.
6. Select Kit (Dropdowns & Choosers)
Dropdown/chooser system with 76 variants for single/multi-select, combo boxes, tags, users, icons, colors.
Key Files: select-kit.js, single-select.gjs, multi-select.gjs, combo-box.js, category/tag/user choosers
Features: Searchable lists, keyboard navigation, lazy loading, mobile-optimized, plugin API
Recreation Prompt: Build modular SelectKit with single/multi-select, search, keyboard nav, lazy loading, and specialized variants (CategoryChooser, TagChooser, UserChooser, IconPicker, ComboBox).
7. Date & Time Pickers
Date/time selection with desktop calendar and mobile native inputs.
Key Files: date-picker.gjs, date-picker-future.js, date-picker-past.js, time-input.gjs, date-time-input.gjs
Features: Pikaday calendar, native fallback, i18n, min/max constraints, range selection
Recreation Prompt: Build date/time pickers with calendar/native inputs, constraints, i18n, future/past variants, combined date-time and range pickers.
8. Upload System (Uppy-Based)
File uploads with drag/drop, S3, chunked uploads, and validation.
Key Files: uppy-image-uploader.gjs, avatar-uploader.gjs, pick-files-button.gjs, uppy-upload.js, s3-multipart.js
Features: Drag/drop, preview, file validation, progress, S3 multipart, checksum, CDN URLs
Recreation Prompt: Build Uppy-based uploader with previews, validations, progress, S3 multipart, checksum, specialized avatar/CSV variants.
9. Ace Code Editor
Embedded Ace Editor with syntax highlighting and resizable area.
Key Files: ace-editor.gjs, load-ace-editor.js
Features: Syntax highlight, lazy load, placeholder, resize, read-only, auto-save, CSS color detection, themes
Recreation Prompt: Build lazy-loaded Ace Editor wrapper with syntax highlighting, resize, placeholders, read-only, auto-save, CSS variable highlighting, dark/light themes.
10. Color Picker
Grid-based color selection with used indicators.
Key Files: color-picker.gjs, color-picker-choice.js
Features: Selection checkmark, used-color indicator, ARIA roles, hex output
Recreation Prompt: Build color picker grid with selection/used indicators, ARIA accessibility, configurable hex colors, and selection callback.
11. Spreadsheet Editor
Modal-based Markdown table editor with spreadsheet interface.
Key Files: spreadsheet-editor.gjs
Features: Add/remove rows/columns, cell navigation, copy/paste, Markdown output, header and alignment controls
Recreation Prompt: Build spreadsheet editor modal with grid, row/column controls, copy/paste, Markdown import/export.
12. Form Kit
Declarative form builder with validation, error handling, and layout primitives.
Key Files: form.gjs, field.gjs, control-wrapper.gjs, input controls, errors.gjs, char-counter.gjs
Features: Nested objects, repeatable collections, conditional fields, alerts, layout (row/col/container/fieldset)
Recreation Prompt: Build form kit with field controls, validation, errors, char counters, alerts, layout primitives, nested/repeatable fields.
13. Avatar System
User avatar display with flairs, upload, and selection modal.
Key Files: user-avatar.gjs, avatar-flair.gjs, avatar-uploader.gjs, avatar-selector.gjs
Recreation Prompt: Build avatar system with size variants, flair overlay, uploads with preview, and selection modal.
14. Character Counter
Displays used/remaining characters with warning states.
Key Files: char-counter.gjs
Recreation Prompt: Build character counter with visual warnings, standalone and form-integrated usage.
15. SVG Sprite / Icon System
Centralized SVG sprite sheet system with theming and cache busting.
Key Files: frontend SVG components, svg_sprite_controller.rb
Recreation Prompt: Build SVG icon system bundling icons in sprite sheet with content-based cache, template helper, and theme overrides.
16. Lightbox
Full-size image viewer from thumbnails with navigation.
Key Files: lightbox.js, constants.js, quote-image.js
Recreation Prompt: Build lightbox with zoom, navigation, keyboard controls, swipe gestures, and quote image support.
17. Bookmark System
Bookmark/save system with reminders, naming, and list management.
Key Files: bookmark-menu.gjs, bookmark-icon.gjs, bookmark-list.gjs, bookmark-actions-dropdown.js, bookmark.gjs
Features: Quick toggle, reminder presets, custom names, filterable list, action dropdown
Recreation Prompt: Build bookmark system with quick toggle, creation modal, reminders, custom names, list view, and edit/delete actions.
Component Running Log
Documented: Rich Text Editor, D-Editor, Emoji Picker, DModal, Float Kit, Select Kit, Date & Time Pickers, Upload System, Ace Editor, Color Picker, Spreadsheet Editor, Form Kit, Avatar System, Character Counter, SVG Sprite/Icon System, Lightbox, Bookmark System
Candidates: Topic List, Timeline, Map, User Card, Badges, Tags, Breadcrumbs, Flash Messages, Welcome Banner, User Status, User Tips, Post Text Selection Toolbar, Topic Progress, Software Update Prompt, Do Not Disturb, Time Shortcut Picker, Password Toggle, Category Notification, Async Content, Conditional Spinner, Bulk Actions, Sidebar Navigation, User Menu, Search, Poll, Chat, Discourse Presence
License & Attribution
All code referenced is part of Discourse, Copyright (C) 2013–2026 Civilized Discourse Construction Kit, Inc.
Licensed under GNU GPL v2.0. Full license: GNU General Public License v2.0 - GNU Project - Free Software Foundation
Original MD file & ongoing technical documentation can be found here:
OR
Discourse Repository
EDIT:
Tues. Feb. 17. 2026
Added an agent created (Copilot) Discourse Guide Text book for those who are more conventional and would enjoy the structure they are accustomed to.
Please note that this will be ongoing.
I’m using it as a tool to refine my markdown editing audit trail and personal moderation practices.
Another reason why Github excels.
It provides the audit trails I’ve been trying to reproduce for documents
For those writing manuscripts consider this as an option for layered edits and refactoring chapters, or even individual pages & lines.