Add Ren'Py tokenizer and text formatting display#240
Conversation
…'Py tag tokenizer - Enhanced DialogueLine tests to cover textarea visibility and interaction. - Introduced RenderedLine tests for rendering formatted text and handling tags. - Implemented a Ren'Py tag tokenizer to parse dialogue text with inline tags. - Added unit tests for the tokenizer to ensure correct tokenization and round-trip functionality.
…d accessibility and code clarity
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
React Doctor found no issues. 🎉 Reviewed by React Doctor for commit |
|
Warning Review limit reached
More reviews will be available in 25 minutes and 6 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a new ChangesRen'Py tokenizer, RenderedLine component, and DialogueLine overlay
Sequence Diagram(s)sequenceDiagram
actor User
participant OverlayButton as Overlay Button (RenderedLine)
participant getRawOffsetFromPoint
participant DialogueLine
participant Textarea
User->>OverlayButton: click at (x, y)
OverlayButton->>getRawOffsetFromPoint: clientX, clientY
getRawOffsetFromPoint->>getRawOffsetFromPoint: caretPositionFromPoint / caretRangeFromPoint
getRawOffsetFromPoint->>getRawOffsetFromPoint: read data-raw-start, data-raw-len from span
getRawOffsetFromPoint-->>DialogueLine: rawOffset
DialogueLine->>Textarea: focus()
DialogueLine->>Textarea: setSelectionRange(rawOffset, rawOffset)
DialogueLine->>DialogueLine: setIsFocused(true) → hide overlay, show textarea
User->>Textarea: blur
Textarea->>DialogueLine: onBlur
DialogueLine->>DialogueLine: setIsFocused(false) → show overlay, hide textarea
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
coderabbitai
Bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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 `@apps/frontend/src/components/write-mode/__tests__/DialogueLine.test.tsx`:
- Around line 95-138: The test "focuses the textarea when the rendered line is
clicked" verifies that clicking the overlay enters edit mode and shows the
textarea, but it does not validate that the caret position (selectionStart and
selectionEnd) is correctly mapped to the click position on the overlay. Add
assertions after the user.click call on the data-rendered-line-wrapper element
to verify that the textarea's selectionStart and selectionEnd properties are set
to the expected offset corresponding to the click position, ensuring that
getRawOffsetFromPoint correctly translates overlay coordinates to raw text
offsets.
In `@apps/frontend/src/components/write-mode/__tests__/RenderedLine.test.tsx`:
- Around line 10-11: Update the import statements in the file to comply with ESM
guidelines by adding `.js` extensions and using the `@/` alias. For the tokenize
import from "`@/lib/renpy-tags`", add the `.js` extension to make it
"`@/lib/renpy-tags.js`". For the RenderedLine import that currently uses the
relative path "../RenderedLine", convert it to use the `@/` alias pointing to
the appropriate path within the components directory and add the `.js` extension
(e.g., "`@/components/write-mode/RenderedLine.js`").
In `@apps/frontend/src/components/write-mode/DialogueLine.tsx`:
- Around line 18-24: Convert all relative imports in the DialogueLine.tsx import
statement block to use the `@/` alias convention and add `.js` extensions to all
import paths. Specifically, change the relative imports like
`"./TechnicalBadge"`, `"./TechnicalPopover"`, and `"./RenderedLine"` to their
equivalent `@/` paths (such as `@/components/write-mode/TechnicalBadge.js`), and
add `.js` extensions to all other import paths including those already using
`@/` aliases (for example, `@/lib/prose-types.js`, `@/lib/utils.js`, and
`@/lib/renpy-tags.js`). Ensure all import statements follow the project's
frontend import conventions.
In `@apps/frontend/src/lib/renpy-tags.unit.test.ts`:
- Line 2: The import statement for tokenize, stringify, and RenpyToken from the
local module is missing the required ESM file extension. Update the import path
in the import statement from "`@/lib/renpy-tags`" to include the ".js" extension
at the end, changing it to "`@/lib/renpy-tags.js`" to comply with the ESM module
resolution requirements.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 7531d3d8-f51e-4849-849d-d9033a941424
📒 Files selected for processing (6)
apps/frontend/src/components/write-mode/DialogueLine.tsxapps/frontend/src/components/write-mode/RenderedLine.tsxapps/frontend/src/components/write-mode/__tests__/DialogueLine.test.tsxapps/frontend/src/components/write-mode/__tests__/RenderedLine.test.tsxapps/frontend/src/lib/renpy-tags.tsapps/frontend/src/lib/renpy-tags.unit.test.ts
…caretPositionFromPoint polyfill
mikkisguy
deleted the
137-design-renpy-text-formatting-display-in-prose-editor
branch
mikkisguy
restored the
137-design-renpy-text-formatting-display-in-prose-editor
branch
1 participant
Summary by CodeRabbit
New Features
Tests