feat(md): add yesterday to date pickers and use relative date formatting #2271
Merged
feat(md): add yesterday to date pickers and use relative date formatting #2271
Conversation
Contributor
sedson
commented
Mar 30, 2026
sedson
commented
- Preserve date mention displayFormat labels
- add more formatting special cases
Contributor
📝 WalkthroughSummary by CodeRabbit
WalkthroughAdded relative date formatting and tooltip display to date mentions using Changes
🚥 Pre-merge checks | ✅ 1 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@js/app/packages/core/component/LexicalMarkdown/component/decorator/DateMention.tsx`:
- Line 140: The inline Tailwind hex shadow "shadow-[`#000`]/5" in the DateMention
TSX element should be replaced with a semantic design token; locate the class
string in the DateMention component (file DateMention.tsx) and swap the raw hex
shadow for the project’s semantic shadow token or CSS variable (e.g. the
design-system shadow token class or a var(--token-*)) so the shadow color comes
from the theme tokens instead of a hardcoded hex value; ensure the resulting
class string preserves the shadow size (shadow-md) and uses the established
token name used across js/app (or wrap a semantic shadow variable if required).
- Line 82: The code currently persists a relative label by calling
node.setDisplayFormat(formatRelativeDate(newDate)) in DateMention.tsx; instead
store a stable absolute representation (e.g., an ISO timestamp or an absolute
formatted date) in the node state via node.setDisplayFormat(absoluteValue) and
move any relative formatting (formatRelativeDate) to the render path so the UI
computes "Tomorrow"/"2 days ago" at render time rather than persisting it;
update the DateMention render logic to call
formatRelativeDate(node.getDisplayFormat() or node.getDate()) when displaying
the node.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 04e88911-082f-4e4d-be44-31c1e6f1668e
📒 Files selected for processing (2)
js/app/packages/core/component/LexicalMarkdown/component/decorator/DateMention.tsxjs/app/packages/core/util/dateSearch/presets.ts
| if ($isDateMentionNode(node)) { | ||
| node.setDate(newDate.toISOString()); | ||
| node.setDisplayFormat(formatDate(newDate)); | ||
| node.setDisplayFormat(formatRelativeDate(newDate)); |
Contributor
There was a problem hiding this comment.
Do not persist relative labels into node state.
At Line [82], writing formatRelativeDate(newDate) to displayFormat stores time-relative text in serialized node data, which will become stale (e.g., persisted "Tomorrow" no longer true later). Persist a stable absolute format instead; keep relative formatting only at render time.
💡 Suggested fix
- node.setDisplayFormat(formatRelativeDate(newDate));
+ node.setDisplayFormat(formatDate(newDate));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| node.setDisplayFormat(formatRelativeDate(newDate)); | |
| node.setDisplayFormat(formatDate(newDate)); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@js/app/packages/core/component/LexicalMarkdown/component/decorator/DateMention.tsx`
at line 82, The code currently persists a relative label by calling
node.setDisplayFormat(formatRelativeDate(newDate)) in DateMention.tsx; instead
store a stable absolute representation (e.g., an ISO timestamp or an absolute
formatted date) in the node state via node.setDisplayFormat(absoluteValue) and
move any relative formatting (formatRelativeDate) to the render path so the UI
computes "Tomorrow"/"2 days ago" at render time rather than persisting it;
update the DateMention render logic to call
formatRelativeDate(node.getDisplayFormat() or node.getDate()) when displaying
the node.
| <Show when={hovered() && !datePickerOpen()}> | ||
| <Portal> | ||
| <div | ||
| class="absolute select-none z-tool-tip bg-panel p-1.5 text-ink-muted text-xs wrap-break-word rounded-sm border border-edge-muted shadow-md shadow-[#000]/5" |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace raw hex shadow color with a semantic token.
Line [140] uses shadow-[#000]/5, which bypasses the design-token system for color styling in TSX.
As per coding guidelines: js/app/**/*.tsx: Use semantic color tokens instead of default tailwind styles for colors.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@js/app/packages/core/component/LexicalMarkdown/component/decorator/DateMention.tsx`
at line 140, The inline Tailwind hex shadow "shadow-[`#000`]/5" in the DateMention
TSX element should be replaced with a semantic design token; locate the class
string in the DateMention component (file DateMention.tsx) and swap the raw hex
shadow for the project’s semantic shadow token or CSS variable (e.g. the
design-system shadow token class or a var(--token-*)) so the shadow color comes
from the theme tokens instead of a hardcoded hex value; ensure the resulting
class string preserves the shadow size (shadow-md) and uses the established
token name used across js/app (or wrap a semantic shadow variable if required).
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
2 participants
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.