Toolbar color underline reflects active cursor/selection color#125
Open
hendriebeats wants to merge 5 commits into
Open
Toolbar color underline reflects active cursor/selection color#125hendriebeats wants to merge 5 commits into
hendriebeats wants to merge 5 commits into
Conversation
…t cursor color Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…-hidden - Validate mark color attrs against safe regex before setting SVG fill (prevents potential XSS via crafted document color values) - Cache getElementById lookups outside the hot state-update callback - Add aria-hidden="true" to decorative toolbar SVGs - Add id="highlightColorIcon" to highlight SVG for consistency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When text is selected, resolve marks at from+1 (first selected character) rather than from (the character before the selection). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
hendriebeats
added
Size: Small
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
Replaces the static text-color and highlight-color toolbar icons with inline SVGs whose underline bar dynamically reflects the color currently active at the cursor or selection.
backend/templates/study.htmlInline SVG icons
The
<img>tags for the text-color and highlight-color toolbar buttons have been replaced with inline<svg>elements. Inlining is required so that the underline<rect>inside each icon can have itsfillattribute updated via JavaScript. Both SVGs carryaria-hidden="true"since the parent<button>already has a descriptivetitle.editorAttachedlistenerListens for the custom
editorAttachedevent fired when the ProseMirror editor mounts, then subscribes toonStateUpdate. On every state change it reads the ProseMirror marks at the relevant position and updates the SVG underline colors.Cursor vs. selection: When there is no selection (
sel.empty), marks are resolved atsel.from— the character to the left of the cursor, which is the standard ProseMirror convention for "active marks". When text is selected, marks are resolved atsel.from + 1— the first character inside the selection — so the toolbar reflects the color of the selected text rather than the character preceding it.Color sanitization: Before assigning any color from a mark attribute to an SVG
fill, the value is tested against a strict regex (/^#[0-9a-fA-F]{3,8}$|^rgb\(...\)$/). Values that don't match (e.g. a craftedurl(...)string from a malicious document) are silently ignored and the default color is used instead.DOM caching: The two underline elements and the regex are resolved/compiled once when
editorAttachedfires, outside the hotonStateUpdatecallback which runs on every keystroke and cursor movement.closes #72