fix: made the text cursor height change between different font sizes

[justinedagreat]

Issue

The text cursor is not changing size when there are multiple text sizes in a text box.

Solution

Retrieve the current text span and use its fontSize to determine the cursor height.

Risk

Low, because it only affects the rendering of the cursor. It should not affect text data or editing functionality

Checklist

• Acceptance criteria met
• Wiki documentation is written and up to date
• Unit tests written and passing
• Integration tests written and passing
• Continuous integration build passing

Summary by CodeRabbit

• Bug Fixes
  • Improved text editor cursor rendering to use each span’s font size and baseline for height and vertical placement, add safety for missing font size, and include proportional bottom padding for more accurate and consistent cursor positioning across varied text styles.

[linear]

VPS-43

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7f2da9fa-5003-4ad6-8888-2d2e2dcc76f5

📥 Commits

Reviewing files that changed from the base of the PR and between bb7a939 and 0f9b227.

📒 Files selected for processing (1)

• frontend/src/features/authoring/text/Cursor.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/features/authoring/text/Cursor.tsx

---

📝 Walkthrough

Walkthrough

Cursor rendering now computes the SVG cursor box from the selected span's fontSize and the line baseline, returning early if fontSize is absent; width stays fixed and bottom padding is proportional to font size.

Changes

Cursor Rendering Geometry

Layer / File(s)	Summary
Cursor box geometry from span metrics frontend/src/features/authoring/text/Cursor.tsx	The SVG cursor box height is now derived from the span's style.fontSize, vertical offset from line.baseline - cursorHeight, and proportional bottom padding; replaces prior calculation using position.y and line.height.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A tiny blink in careful light,
I measure fonts and baseline height,
I skip when size is nowhere found,
Then plant my box on firmer ground,
A quiet hop — the cursor's right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: making the text cursor height respond to different font sizes in the codebase.
Description check	✅ Passed	The pull request description follows the template structure with all required sections (Issue, Solution, Risk, Checklist) properly completed with relevant details.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch vps-43-textbox-line-height-unchanged-between-different-font-sizes

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/features/authoring/text/Cursor.tsx (1)

27-27: 💤 Low value

Consider extracting the bottom padding multiplier to a named constant.

The 0.25 multiplier for cursor bottom padding is a magic number without explanation. Extracting it to a named constant would improve code clarity.

♻️ Proposed refactor

+ const CURSOR_BOTTOM_PADDING_RATIO = 0.25;
+
  function Cursor({ bounds }: { bounds: RelativeBounds }) {
    // ...
    const span = line.spans[start.spanI];
    const cursorHeight = span.style.fontSize;
-   const cursorBottomPadding = span.style.fontSize * 0.25;
+   const cursorBottomPadding = span.style.fontSize * CURSOR_BOTTOM_PADDING_RATIO;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/features/authoring/text/Cursor.tsx` at line 27, The magic number
0.25 used to compute cursorBottomPadding should be extracted to a named constant
to improve clarity; introduce a descriptive constant (e.g.,
CURSOR_BOTTOM_PADDING_MULTIPLIER) near the top of Cursor.tsx and replace the
literal in the calculation of cursorBottomPadding (the expression using
span.style.fontSize * 0.25) with span.style.fontSize *
CURSOR_BOTTOM_PADDING_MULTIPLIER, keeping the numeric value the same and
optionally adding a short comment explaining its purpose.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/features/authoring/text/Cursor.tsx`:
- Around line 25-27: The cursor rendering reads line.spans[start.spanI] without
checks and then accesses span.style.fontSize, which can throw if start.spanI is
out of range or span.style is missing; update Cursor.tsx to defensively fetch
the span (check that line.spans exists and start.spanI is within bounds) and
guard span.style before reading fontSize, using a sensible default fontSize
(e.g., 14) when absent; compute cursorHeight and cursorBottomPadding from this
safeFontSize and keep behavior consistent with getVisualPosition’s handling of
missing spans.

---

Nitpick comments:
In `@frontend/src/features/authoring/text/Cursor.tsx`:
- Line 27: The magic number 0.25 used to compute cursorBottomPadding should be
extracted to a named constant to improve clarity; introduce a descriptive
constant (e.g., CURSOR_BOTTOM_PADDING_MULTIPLIER) near the top of Cursor.tsx and
replace the literal in the calculation of cursorBottomPadding (the expression
using span.style.fontSize * 0.25) with span.style.fontSize *
CURSOR_BOTTOM_PADDING_MULTIPLIER, keeping the numeric value the same and
optionally adding a short comment explaining its purpose.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 92ff02c6-5b99-4785-b016-6299d21f091d

📥 Commits

Reviewing files that changed from the base of the PR and between 736892a and bb7a939.

📒 Files selected for processing (1)

• frontend/src/features/authoring/text/Cursor.tsx