Private
Public Access
Add a collapsible markdown formatting toolbar to the composer (#75)
Markdown support was already complete and documented, but nothing in the composer pointed at it -- unlike @, # and : (which advertise themselves when typed), formatting syntax was only discoverable via Help, buried in the account menu. The composer stays a plain markdown textarea; a new "Aa" button opens a toolbar that inserts the syntax for you: bold, italic, strikethrough, inline code, code block, link, quote, bulleted/numbered lists, H1-H3, sub/superscript. Collapsed by default, remembered across reloads and room switches. Clicking a button again removes the formatting (native undo doesn't track programmatic edits), and bold/italic/sub/strike toggles are run-length aware so "***x***" is handled correctly. The selection math is pure functions in lib/markdownFormat.ts, unit-tested. The "?" opens /help#formatting in a new tab so the draft isn't lost; HelpPage now scrolls to the hash once the guide has loaded, since the browser's own hash scroll fired before the async-fetched headings existed. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
c54c1bf97d
commit
6975ed4dc0
11 files changed
+682
-2
No files matched your search
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import Markdown from 'markdown-to-jsx'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { createMarkdownOptions, preprocessMarkdown } from '../components/MessageContent'
|
||||
import { TopBar } from '../components/TopBar'
|
||||
import './HelpPage.css'
|
||||
@@ -20,6 +20,15 @@ export function HelpPage() {
|
||||
[content],
|
||||
)
|
||||
|
||||
// #75: the composer's "?" links straight to /help#formatting, but the guide
|
||||
// is fetched after the page loads -- the browser's own scroll-to-hash has
|
||||
// already run (and found nothing) by the time the headings exist.
|
||||
const { hash } = useLocation()
|
||||
useEffect(() => {
|
||||
if (!markdownPreview || !hash) return
|
||||
document.getElementById(hash.slice(1))?.scrollIntoView()
|
||||
}, [markdownPreview, hash])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
fetch(GUIDE_URL)
|
||||
|
||||
Reference in new issue
Block a user