Skip to content

add preview option#24

Merged
naheel0 merged 9 commits intomainfrom
test
Feb 12, 2026
Merged

add preview option#24
naheel0 merged 9 commits intomainfrom
test

Conversation

@naheel0
Copy link
Member

@naheel0 naheel0 commented Feb 12, 2026

🚀 BΞYTΞFLʘW | Pull Request Protocol

PR Type: (Choose one: feat | fix | refactor | docs | perf)
Issue Link: Fixes #


📝 System Summary

Provide a concise brief of the changes introduced to the stream.

🛠️ Technical Changes

  • Logic change in ...
  • New UI component added: ...
  • Database schema updated: ...

🧪 Quality Assurance (QA)

  • Linting: Code style matches the BeyteFlow grid.
  • Build: npm run build executed without errors.
  • Testing: New logic has been verified and tested.
  • Dark Mode: UI is high-contrast and neon-optimized.

🖼️ Visual Evidence

If this PR affects the UI, drop a screenshot or GIF below:


📡 Developer Authorization

  • I have performed a self-review of my code.
  • My changes generate no new warnings in the console.
  • I have updated the documentation (if applicable).

Authorized by: @naheel0
Timestamp: {{ 12/2/2026 }}


Co-Authored-By: jaseel0 <225665919+jaseel0@users.noreply.github.com>
@naheel0 naheel0 requested a review from adithyanmkd as a code owner February 12, 2026 16:06
@vercel
Copy link

vercel bot commented Feb 12, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
readme-gen-ai Ready Ready Preview, Comment Feb 12, 2026 4:39pm

@naheel0 naheel0 added ci/cd Automated workflows for building, testing, and deploying code. area: frontend Changes specifically for the UI/Tailwind components. labels Feb 12, 2026
@naheel0
Copy link
Member Author

naheel0 commented Feb 12, 2026

@copilot can fill the error for me
Error: Calling setState synchronously within an effect can trigger cascading renders

Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:

  • Update external systems with the latest state from React.
  • Subscribe for updates from some external system, calling setState in a callback function when external state changes.

Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).

C:\Users\Dell\Desktop\New folder\open source\ReadmeGenAI\src\components\Generator\MarkdownPreview.tsx:15:5
13 |
14 | useEffect(() => {

15 | setMounted(true);
| ^^^^^^^^^^ Avoid calling setState() directly within an effect
16 | }, []);
17 |
18 | const handleCopy = async () => {

Copy link
Contributor

Copilot AI commented Feb 12, 2026

@naheel0 I've opened a new pull request, #25, to work on those changes. Once the pull request is ready, I'll request review from you.

[WIP] Add preview option to existing feature
@coderabbitai
Copy link

coderabbitai bot commented Feb 12, 2026

Warning

Rate limit exceeded

@naheel0 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 3 minutes and 32 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Adds an autofix GitHub Actions workflow, a .prettierignore, Markdown rendering and preview/code toggle in the MarkdownPreview component, new markdown-related deps, removes a Vitest config and a test file, and updates package.json scripts/dependencies.

Changes

Cohort / File(s) Summary
CI / Autofix Workflow
/.github/workflows/autofix.yml
Adds a GitHub Actions workflow that checks out code, sets up Node (LTS), runs npm ci, applies Prettier and ESLint --fix on specified globs, and runs autofix-ci/action@v1 on PRs and pushes to main.
Prettier Ignore
.prettierignore
Adds ignore patterns: .github/, node_modules/, dist/, build/, and *.lock.
Tests & Test Config Removal
__tests__/apiGenerate.test.ts, vitest.config.ts
Deletes the unit test file for POST /api/generate (all tests and mocks) and removes the Vitest config (aliasing and test environment).
Dependencies & Scripts
package.json
Removes the test script, adds runtime deps rehype-raw, remark-gfm, and dev dep @tailwindcss/typography; minor formatting adjustments.
UI Component
src/components/Generator/MarkdownPreview.tsx
Reworks MarkdownPreview to include preview/code toggle, renders Markdown with react-markdown + remark-gfm + rehype-raw, adds copy-to-clipboard state and UI, and injects global styles for rendered Markdown.

Sequence Diagram(s)

sequenceDiagram
  participant PR as "Pull Request"
  participant GH as "GitHub Actions (autofix.yml)"
  participant Runner as "Ubuntu Runner"
  participant Node as "Node.js/npm"
  participant Formatter as "Prettier / ESLint"
  participant Action as "autofix-ci/action@v1"

  PR->>GH: open PR / push to main (trigger)
  GH->>Runner: start job (autofix)
  Runner->>Node: setup Node (LTS), npm cache
  Runner->>Node: run npm ci
  Runner->>Formatter: run Prettier on file globs
  Formatter-->>Runner: files possibly modified
  Runner->>Formatter: run ESLint --fix on src/**/*
  Formatter-->>Runner: files possibly modified
  Runner->>Action: run autofix-ci/action@v1 (always)
  Action-->>GH: report results / push fixes
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • adithyanmkd

Poem

"🐇 I hopped through code to tidy the trail,
Prettier's brush and linters exhale,
Tests took a nap while previews glow bright,
Copy the readme — it's ready to write. ✨"

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Description check ❓ Inconclusive The description is mostly a template with checkboxes and placeholder sections, containing no substantive details about the actual code changes made in this PR. Replace the template with a concrete description of the changes: preview mode toggle, Markdown rendering with ReactMarkdown, added dependencies (rehype-raw, remark-gfm), and note the removal of test files and Vitest config.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'add preview option' clearly relates to the main change: adding a view toggle between code and preview modes in MarkdownPreview.tsx.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch test

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@naheel0
Copy link
Member Author

naheel0 commented Feb 12, 2026

@copilot fix it for me Error: Calling setState synchronously within an effect can trigger cascading renders

Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:

  • Update external systems with the latest state from React.
  • Subscribe for updates from some external system, calling setState in a callback function when external state changes.

Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).

C:\Users\Dell\Desktop\New folder\open source\ReadmeGenAI\src\components\Generator\MarkdownPreview.tsx:15:5
13 |
14 | useEffect(() => {

15 | setMounted(true);
| ^^^^^^^^^^ Avoid calling setState() directly within an effect
16 | }, []);
17 |
18 | const handleCopy = async () => {

Copy link
Contributor

Copilot AI commented Feb 12, 2026

@naheel0 I've opened a new pull request, #26, to work on those changes. Once the pull request is ready, I'll request review from you.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

🤖 Fix all issues with AI agents
In @.github/workflows/autofix.yml:
- Line 30: Replace the deprecated --ext usage in the CI workflow command `npx
eslint src --ext .ts,.tsx --fix` with an explicit glob pattern so ESLint runs
across TypeScript files on all v9 versions; update the command to target files
via a glob like src/**/*.{ts,tsx} (retain the --fix flag) to ensure
compatibility with flat config and unpinned ESLint versions.

In `@src/components/Generator/MarkdownPreview.tsx`:
- Around line 18-22: The handleCopy function calls navigator.clipboard.writeText
without error handling; wrap that call in a try/catch inside handleCopy so you
only call setCopied(true) on success and catch any exceptions from
navigator.clipboard.writeText(content), log or surface the error (e.g.,
console.error or show a toast), and ensure copied state is reset
(setCopied(false)) in the error path or finally as appropriate; reference
handleCopy, navigator.clipboard.writeText, content, and setCopied when making
the change.
- Around line 12-16: The mounted state and useEffect in the MarkdownPreview
component cause an ESLint pipeline failure and a hydration mismatch; remove the
mounted state variable, the setMounted(true) useEffect, and any conditional
rendering that checks mounted in MarkdownPreview so the component renders
identically on server and client, and if you need to avoid SSR for ReactMarkdown
import it with next/dynamic({ ssr: false }) at the import site (refer to the
MarkdownPreview component, the mounted state/useEffect and any ReactMarkdown
usage to locate the changes).
- Around line 76-81: The ReactMarkdown usage renders raw HTML via rehypeRaw
without sanitization; import rehypeSanitize from 'rehype-sanitize' and add it to
the rehypePlugins array after rehypeRaw in the MarkdownPreview component (where
ReactMarkdown, remarkGfm, rehypeRaw and content are used) so the plugins become
[rehypeRaw, rehypeSanitize] and the AI-generated content is sanitized before
rendering.
🧹 Nitpick comments (4)
package.json (1)

9-9: Test script removed but test dependencies remain.

The "test" script was removed, yet vitest, @vitest/coverage-v8, @testing-library/jest-dom, and @testing-library/react are still listed in devDependencies (lines 26–27, 31, 36). If testing is being dropped, clean up these dependencies to avoid confusion and unnecessary installs.

.github/workflows/autofix.yml (1)

3-6: Consider restricting pull_request trigger to specific branches.

Currently the workflow triggers on all pull requests regardless of target branch. If this is intentional (autofix on all PRs), that's fine — just noting it runs on every PR across the repo.

src/components/Generator/MarkdownPreview.tsx (2)

28-50: Prefer Tailwind prose classes over global styled JSX.

You already have @tailwindcss/typography as a dependency. Using prose utility classes on the container would replace all of these manual style rules, be more maintainable, and avoid global style pollution from jsx global.


6-6: Remove leftover dev comment // Add this.

npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,md}" "public/**/*" "*.{js,ts,json,md}" --ignore-unknown

# ESLint targets your source code logic
npx eslint src --ext .ts,.tsx --fix
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

ESLint v9 --ext flag removed migration guide

💡 Result:

Why --ext “disappeared” in ESLint v9

With flat config (eslint.config.js, default in v9), ESLint originally rejected --ext (you’d see “Invalid option '--ext' … you’re using eslint.config.js”). (github.com)
The intended replacement was to use files globs in your flat config. (npmjs.com)


Migration (recommended): replace --ext with files in eslint.config.js

If you previously had something like:

npx eslint --ext .ts,.tsx .

Remove --ext and add a “selector” object near the top of eslint.config.js:

// eslint.config.js
export default [
  { files: ["**/*.ts", "**/*.tsx"] },

  // ...the rest of your config objects
];

Then run:

npx eslint .

This is the approach documented by the ESLint config migrator (@eslint/migrate-config). (npmjs.com)


If you must use --ext from the CLI (no config file)

ESLint v9.21.0 reintroduced --ext specifically to support linting arbitrary extensions without a config file, shown together with --no-config-lookup. (eslint.org)

Example:

npx eslint --no-config-lookup --rule '{"no-unused-vars":"error"}' --ext '.jsx'

(eslint.org)

Citations:


🏁 Script executed:

# Check ESLint version in the repository
find . -type f \( -name "package.json" -o -name "package-lock.json" -o -name "yarn.lock" \) -not -path "*/node_modules/*" | head -5

Repository: BeyteFlow/ReadmeGenAI

Length of output: 99


🏁 Script executed:

# Check for ESLint configuration files
find . -type f \( -name ".eslintrc*" -o -name "eslint.config.*" \) | head -10

Repository: BeyteFlow/ReadmeGenAI

Length of output: 84


🏁 Script executed:

cat package.json | grep -A 2 -B 2 "eslint"

Repository: BeyteFlow/ReadmeGenAI

Length of output: 341


🏁 Script executed:

cat eslint.config.mjs

Repository: BeyteFlow/ReadmeGenAI

Length of output: 529


Use glob pattern instead of deprecated --ext flag.

ESLint v9 initially removed the --ext flag with flat config support. While the flag was reintroduced in v9.21.0, since the version is unpinned (^9), using an explicit glob pattern ensures compatibility across all v9 versions and is the recommended approach with flat config.

Proposed fix
-          npx eslint src --ext .ts,.tsx --fix
+          npx eslint "src/**/*.{ts,tsx}" --fix
📝 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
npx eslint src --ext .ts,.tsx --fix
npx eslint "src/**/*.{ts,tsx}" --fix
🤖 Prompt for AI Agents
In @.github/workflows/autofix.yml at line 30, Replace the deprecated --ext usage
in the CI workflow command `npx eslint src --ext .ts,.tsx --fix` with an
explicit glob pattern so ESLint runs across TypeScript files on all v9 versions;
update the command to target files via a glob like src/**/*.{ts,tsx} (retain the
--fix flag) to ensure compatibility with flat config and unpinned ESLint
versions.

Copilot AI and others added 2 commits February 12, 2026 16:17
Co-authored-by: naheel0 <191262736+naheel0@users.noreply.github.com>
[WIP] Add preview option to enhance user experience
@naheel0
Copy link
Member Author

naheel0 commented Feb 12, 2026

@copilot
In @src/components/Generator/MarkdownPreview.tsx around lines 76 - 81, The
ReactMarkdown usage renders raw HTML via rehypeRaw without sanitization; import
rehypeSanitize from 'rehype-sanitize' and add it to the rehypePlugins array
after rehypeRaw in the MarkdownPreview component (where ReactMarkdown,
remarkGfm, rehypeRaw and content are used) so the plugins become [rehypeRaw,
rehypeSanitize] and the AI-generated content is sanitized before rendering.

In @src/components/Generator/MarkdownPreview.tsx around lines 18 - 22, The
handleCopy function calls navigator.clipboard.writeText without error handling;
wrap that call in a try/catch inside handleCopy so you only call setCopied(true)
on success and catch any exceptions from navigator.clipboard.writeText(content),
log or surface the error (e.g., console.error or show a toast), and ensure
copied state is reset (setCopied(false)) in the error path or finally as
appropriate; reference handleCopy, navigator.clipboard.writeText, content, and
setCopied when making the change.

fix it

Copy link
Contributor

Copilot AI commented Feb 12, 2026

@naheel0 I've opened a new pull request, #27, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot AI and others added 2 commits February 12, 2026 16:31
Co-authored-by: naheel0 <191262736+naheel0@users.noreply.github.com>
Add HTML sanitization and error handling to MarkdownPreview
@naheel0 naheel0 merged commit 3b1475f into main Feb 12, 2026
4 of 5 checks passed
@naheel0 naheel0 deleted the test branch February 12, 2026 16:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: frontend Changes specifically for the UI/Tailwind components. ci/cd Automated workflows for building, testing, and deploying code.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants