Skip to content

feat(editor): allow inline code to coexist with highlight and other marks#120

Merged
j4rviscmd merged 2 commits intomainfrom
feat/inline-code-highlight
Mar 29, 2026
Merged

feat(editor): allow inline code to coexist with highlight and other marks#120
j4rviscmd merged 2 commits intomainfrom
feat/inline-code-highlight

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

Allow inline code (<code>) to coexist with highlight (backgroundColor), textColor, bold, italic, underline, and strikethrough marks — matching Notion behaviour.

Key changes:

  • Override TipTap Code mark excludes from '_' (all) to '' (none) via Code.extend({ excludes: '' })
  • Reorder styleSpecs so code is declared last, placing <code> inside the highlight <span> in the DOM — keeps highlight box at normal text height
  • Add CSS rules for code-inside-highlight: semi-transparent code background (light), dark opaque background (dark), with subtle ring for visual separation

Related Issue

N/A — standalone enhancement

Type of Change

  • ✨ New feature
  • 💥 Breaking change
  • 🐛 Bug fix
  • 📝 Documentation
  • ♻️ Refactoring
  • 🔧 Chore

Breaking Changes

None

Test

  • Run npm run tauri dev
  • Select text and apply highlight (backgroundColor)
  • Apply inline code to the same text — both marks coexist
  • Verify highlight height matches regular highlighted text
  • Check code background is visible inside highlight (light mode)
  • Switch to dark mode — verify code background is distinct
  • Test other mark combinations: code + bold, code + italic, code + textColor

Checklist

  • Code follows clean architecture (proper separation of concerns)
  • Code is simple and concise (no unnecessary complexity)
  • Comments are sufficient for non-obvious logic
  • No sensitive information included (credentials, secrets, personal data)
  • Conventional Commits format followed in commit messages
  • Tests added/updated (or N/A for docs/chore)

j4rviscmd and others added 2 commits March 29, 2026 16:26
…arks

Override TipTap Code mark `excludes` from `'_'` (all) to `''` (none)
so inline code can be combined with backgroundColor, textColor, bold,
italic, underline, and strikethrough — matching Notion behaviour.

Reorder styleSpecs so `code` is declared last, placing `<code>` inside
the highlight `<span>` in the DOM.  This keeps the highlight box at
normal text height instead of shrinking to the smaller code font-size.

Add CSS rules for code-inside-highlight: semi-transparent code background
in light mode, dark opaque background in dark mode, with a subtle ring
for visual separation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@j4rviscmd j4rviscmd added the enhancement New feature or request label Mar 29, 2026
@j4rviscmd j4rviscmd merged commit 126a803 into main Mar 29, 2026
2 checks passed
@j4rviscmd j4rviscmd deleted the feat/inline-code-highlight branch March 29, 2026 07:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant