fix: improve editor UI

[vitonsky]

Fix #327

We have problem with follows text

# Why Russian Classics Feel So Different
I've noticed that after finishing a Russian novel I rarely want to start another book immediately.

It's not because the stories are difficult. It's because they seem to leave unfinished conversations in my head. Instead of remembering the plot, I keep thinking about the questions the characters were asking themselves.

It leaves empty line as a paragraph, so we have 3 paragraphs in result.
When we remove that paragraph, we have 2 paragraph in Lexical, but only one paragraph in Markdown, so when MD converts back into Lexical we have only one paragraph.

Summary by CodeRabbit

• Bug Fixes
  • Improved text selection styling across the app for more consistent highlighting.
  • Updated rich text editor colors so code and link text use the current theme tokens more reliably.
• Style
  • Cleaned up theme styling for a simpler, more maintainable visual setup.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates theme styling: the global Chakra theme's text-selection rule is changed from a :root ::selection selector to an html & *::selection selector, and RichEditor CSS switches typography/link color variables from -base tokens to their non-base equivalents.

Changes

Theme styling adjustments

Layer / File(s)	Summary
Global selection style update packages/app/src/components/theme/base.ts	Removes the unused SystemStyleObject import and replaces the :root ::selection rule with an html rule targeting & *::selection, using selection.foreground and selection.background tokens while retaining getScrollBarStyles().
RichEditor color token updates packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css	Changes .RichEditor__textCode, .RichEditor__link, and .RichEditor__code colors from -base CSS variable tokens to their non-base equivalents.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• DeepinkApp/deepink#307: Also modifies the globalCss text-selection styling in packages/app/src/components/theme/base.ts as part of the same theme migration.

Poem
A rabbit hops through CSS and code,
Swapping tokens down the styling road,
Selection now glows on html, not root,
Links and code text shed their -base boot,
Small hops, clean styles — a tidy commute! 🐇

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR addresses link color and selection styling, but it does not cover separators or header indentation from #327.	Add the missing separator color and header indentation fixes, or narrow the linked issue scope to only the changes actually delivered.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Out of Scope Changes check	✅ Passed	The changes stay within the rich editor UI/theme scope and do not introduce unrelated work.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and matches the PR's main goal of improving the editor UI.

✨ 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 327-improve-editor-ui

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css`:
- Line 105: The RichEditor theme is using color tokens that point at the parent
variables instead of the actual leaf values, so the text and link colors won’t
resolve correctly. Update the color references in the RichEditor CSS to use the
`-base` Chakra variables for the typography and link tokens, and verify the
affected styles in the RichEditor stylesheet still point to the correct token
names.

🪄 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: a178e3f1-68ce-4815-a0cd-12fef1dcdd63

📥 Commits

Reviewing files that changed from the base of the PR and between 2d653e7 and 19539a2.

📒 Files selected for processing (2)

• packages/app/src/components/theme/base.ts
• packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify `typography` and `link` (non-base) color tokens are defined in the theme.
rg -n "typography:|link:" packages/app/src/components/theme/color-schemes -A3

Repository: DeepinkApp/deepink

Length of output: 2751

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== theme files =="
git ls-files 'packages/app/src/components/theme/color-schemes/**/*.ts' \
  'packages/app/src/components/theme/**/*.ts' \
  'packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css' | sed 's#^`#-` #'

echo
echo "== search for typography/link CSS var usage =="
rg -n --hidden --no-ignore -F -- '--chakra-colors-typography' packages/app/src || true
rg -n --hidden --no-ignore -F -- '--chakra-colors-link' packages/app/src || true

echo
echo "== theme/token config references =="
rg -n --hidden --no-ignore -F 'cssVarsPrefix' packages/app/src || true
rg -n --hidden --no-ignore -F 'semanticTokens' packages/app/src || true
rg -n --hidden --no-ignore -F 'typography:' packages/app/src/components/theme -A8 || true
rg -n --hidden --no-ignore -F 'link:' packages/app/src/components/theme -A8 || true

Repository: DeepinkApp/deepink

Length of output: 8739

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== packages/app/src/components/theme/base.ts (relevant ranges) =="
sed -n '1,180p' packages/app/src/components/theme/base.ts | cat -n
echo
echo "== packages/app/src/components/theme/color-schemes/generic/light.ts (relevant ranges) =="
sed -n '1,120p' packages/app/src/components/theme/color-schemes/generic/light.ts | cat -n
echo
echo "== packages/app/src/components/theme/color-schemes/generic/dark.ts (relevant ranges) =="
sed -n '1,120p' packages/app/src/components/theme/color-schemes/generic/dark.ts | cat -n
echo
echo "== packages/app/src/components/theme/color-schemes/zen.ts (relevant ranges) =="
sed -n '1,130p' packages/app/src/components/theme/color-schemes/zen.ts | cat -n

Repository: DeepinkApp/deepink

Length of output: 19254

---

Use the -base color tokens here typography and link are defined with base leaves, so --chakra-colors-typography / --chakra-colors-link won’t resolve here; keep the -base variables for these text/link colors.

🤖 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 `@packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css` at line
105, The RichEditor theme is using color tokens that point at the parent
variables instead of the actual leaf values, so the text and link colors won’t
resolve correctly. Update the color references in the RichEditor CSS to use the
`-base` Chakra variables for the typography and link tokens, and verify the
affected styles in the RichEditor stylesheet still point to the correct token
names.