[Feat]: Text viewer: show character, line and UTF-8 byte counts

Open Beginner friendly
  • Is something wrong?
#1,395 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Read packages/web-ui/src/components/ui/TextExpansionEditor.tsx to see how the current draft is represented, then inspect packages/web-ui/src/utils/text.ts and its matching utility tests. Add the count calculation in a helper under packages/web-ui/src/utils/ and cover the specified text cases in packages/web-ui/tests/utils/. Done means the expanded viewer updates counts in editable and read-only modes, follows the stated line and code point rules, and stays responsive for large text.

Written by the indexing model from the issue text.

Description

feature request good first issue
Prerequisites
  • I have written a descriptive issue title.
  • I have searched existing issues and open pull requests to avoid duplicating an existing feature request.
🚀 Feature Proposal

Show compact statistics for the current draft in the expanded text viewer: Unicode code points, logical lines and UTF-8 bytes. Label the character definition clearly.

Motivation

Payload length is useful when investigating unexpectedly large text, multibyte characters and API payloads.

Example
Inspect "A😀" and distinguish its two Unicode code points from its five UTF-8 bytes.
Acceptance criteria
  • Counts update for the displayed draft in editable and read-only modes without saving or querying the database.
  • Define empty text as zero lines; treat CRLF as one line separator and include a trailing empty line for nonempty text ending in a separator.
  • Count Unicode code points rather than UTF-16 code units; label this rather than claiming grapheme-cluster counts.
  • Cover empty text, ASCII, CRLF, emoji and combining sequences in a pure helper test; keep large-text rendering responsive.
Where to start
  • packages/web-ui/src/components/ui/TextExpansionEditor.tsx owns the current draft.
  • packages/web-ui/src/utils/text.ts contains existing text formatting.
  • Put calculation logic in a helper under packages/web-ui/src/utils/ and tests in the matching packages/web-ui/tests/utils/ directory.

Boundary: expanded text viewer only; no database column-limit validation or grid-wide scanning.

Contributor notes
  • Follow AGENTS.md and the repository rules. Run GitNexus upstream impact analysis before editing existing symbols and report the blast radius.
  • Add new UI strings to every locale under packages/web-ui/src/i18n/locales/; use design tokens, keyboard access and visible focus.
  • Keep pure frontend helpers under packages/web-ui/src/utils/ and tests in the matching packages/web-ui/tests/ paths. Run focused tests, typecheck and relevant repository checks.
  • Shared backend behavior belongs in src-tauri/src/application/ or plain modules. Keep Tauri code under transport/desktop/, expose shared web behavior when applicable and preserve cargo check --no-default-features from src-tauri/ for backend changes.
  • Questions? Ask here or on Discord.
Dominant language
TypeScript
Stars
5.1k
Forks
335
Avg merge
1d 11h
Merged PRs (30d)
289

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TabularisDB/tabularis

All issues in TabularisDB/tabularis

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.