Skip to content

feat: added line and word counter to editor status bar #474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harshiyasaxena wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: added line and word counter to editor status bar #474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion modules/playground/components/editor-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,16 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
const activeFile = openFiles.find((file) => file.id === activeFileId);
const collaboratorCount = useCollaboratorCount(id);

const fileContent = activeFile?.content || "";

const lineCount = fileContent
? fileContent.split("\n").length
: 0;
Comment on lines +83 to +85

@coderabbitai coderabbitai Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Empty active files are reported as 0 lines.

For newline-based counting, an empty active file should be 1 line, not 0, so the status bar currently under-reports this case.

🛠️ Proposed fix 
-  const lineCount = fileContent
-    ? fileContent.split("\n").length
-    : 0;
+  const lineCount = activeFile
+    ? fileContent.split(/\r?\n/).length
+    : 0;
📝 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
const lineCount = fileContent
? fileContent.split("\n").length
: 0;
const lineCount = activeFile
? fileContent.split(/\r?\n/).length
: 0;
🤖 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 `@modules/playground/components/editor-area.tsx` around lines 83 - 85, The
lineCount calculation under-reports empty active files because it returns 0 for
an empty string; update the computation in editor-area.tsx (the lineCount
variable that uses fileContent) to treat any defined fileContent as at least 1
line — e.g. compute splitCount = fileContent.split("\n").length and set
lineCount = Math.max(1, splitCount) when fileContent is not null/undefined,
otherwise keep 0 for no active file.


const wordCount = fileContent.trim()
? fileContent.trim().split(/\s+/).length
: 0;

// Auto-open default file when preview is shown if no file is open
useEffect(() => {
if (isPreviewVisible && !activeFileId && templateData) {
Expand Down Expand Up @@ -188,7 +198,7 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
<WebContainerPreview
templateData={templateData}
instance={instance}
writeFileSync={writeFileSync || (async () => {})}
writeFileSync={writeFileSync || (async () => { })}

error={containerError}
serverUrl={serverUrl || ""}
Expand Down Expand Up @@ -227,6 +237,8 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
containerStatus={containerStatus}
collaboratorCount={collaboratorCount}
openFileCount={openFiles.length}
lineCount={lineCount}
wordCount={wordCount}
/>
</div>
);
Expand Down
15 changes: 15 additions & 0 deletions modules/playground/components/status-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ interface StatusBarProps {
containerStatus: "idle" | "building" | "running" | "error";
collaboratorCount: number;
openFileCount: number;
lineCount: number;
wordCount: number;
}

const LANGUAGE_MAP: Record<string, string> = {
Expand Down Expand Up @@ -50,6 +52,8 @@ export function StatusBar({
containerStatus,
collaboratorCount,
openFileCount,
lineCount,
wordCount,
}: StatusBarProps) {
const ext = activeFile?.fileExtension?.toLowerCase() || "";
const language = LANGUAGE_MAP[ext] || "Plain Text";
Expand All @@ -73,6 +77,17 @@ export function StatusBar({
<span>
Ln {cursorPosition.line}, Col {cursorPosition.col}
</span>
<span className="opacity-30">│</span>

<span>
{lineCount} Lines
</span>

<span className="opacity-30">│</span>

<span>
{wordCount} Words
</span>
</>
)}
{!activeFile && (
Expand Down
Loading