Share mode: contextual formatting toolbar#16
Open
cathrynlavery wants to merge 1 commit intoEveryInc:mainfrom
Open
Share mode: contextual formatting toolbar#16cathrynlavery wants to merge 1 commit intoEveryInc:mainfrom
cathrynlavery wants to merge 1 commit intoEveryInc:mainfrom
Conversation
cathrynlavery
changed the title
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a formatting toolbar for share-mode documents, giving shared-doc viewers intuitive editing controls without the full app chrome. The bar renders as a vertical right-rail on desktop and a bottom dock on mobile, with a secondary contextual popup (bold/italic/link) that floats near the text selection on desktop.
Why
Share mode is designed for non-technical collaborators — people who may never have used a markdown editor. Previously, shared documents had no visible formatting controls, which meant users had to know markdown syntax or keyboard shortcuts to format text. This PR adds a formatting toolbar that feels like a subtle editorial aid rather than app chrome, keeping the warm, paper-like aesthetic of share mode intact.
Design approach
The formatting bar was designed through a brainstorm process that evaluated three layout directions:
The contextual floating toolbar (bold/italic/link) appears on text selection, inspired by Notion/Medium. This keeps inline formatting controls close to the cursor without cluttering the persistent rail with too many buttons.
Key decisions
editor.reconfigure()which breaks collab/Yjs state after initialization. Instead usesselectionchange/keyupDOM listeners for active-state tracking.getTopViewportInset()to avoid overlapping fixed banners (share, readonly, review-lock, error).Files changed
src/editor/share-formatting-bar.tssrc/editor/index.ts#editor-containerafter share-mode init, visibility toggled with editable state. Addsdata-share-modeattribute on<body>.What to review
share-formatting-bar.tsis the bulk of this PR. Start there.__fmtSetEditable/__fmtCleanupescape hatches on the bar element (lines 460–490) — usinganycasts to avoid a class refactor. Fine for now, flag if you disagree.data-share-modeattribute change inupdateBannerLayouttouches non-share behavior (removes the old white background override) — verify no regression in non-share mode.Test plan
Screenshots
Desktop: vertical rail in the right margin, contextual popup on text selection
Mobile: horizontal frosted-glass dock at bottom