docs: import code by line number by mendonk · Pull Request #11793 · langflow-ai/langflow (original) (raw)

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Walkthrough

This PR introduces a code snippet import system for documentation. It adds a new CodeSnippet React component with syntax highlighting and copy functionality, configures webpack to enable imports from external repositories via raw-loader, updates documentation to explain the feature, and adds the necessary raw-loader dependency.

Changes

Cohort / File(s)	Summary
Documentation Content docs/README.md, docs/docs/Components/concepts-components.mdx	Added documentation subsection explaining code snippet imports with line ranges; replaced inline Python code blocks with CodeSnippet components referencing external source files with specific line ranges.
Configuration & Dependencies docs/docusaurus.config.js, docs/package.json	Added webpack alias configuration to enable @langflow imports in MDX documents; added raw-loader ^4.0.2 dependency to support loading raw file content.
Component Implementation docs/src/components/CodeSnippet.tsx	New React component that renders code snippets with syntax highlighting via Code Hike, optional line numbers, customizable title, and copy-to-clipboard functionality.

Sequence Diagram(s)

sequenceDiagram participant MDXDoc as MDX Document participant WebpackAlias as Webpack Alias participant RawLoader as raw-loader participant CodeSnippet as CodeSnippet Component participant CodeHike as Code Hike participant UI as Browser UI

MDXDoc->>WebpackAlias: Import external source via `@langflow/`...
WebpackAlias->>RawLoader: Load raw file content
RawLoader-->>MDXDoc: Return raw source string
MDXDoc->>CodeSnippet: Pass source, startLine, endLine, language
CodeSnippet->>CodeSnippet: Slice source to line range
CodeSnippet->>CodeHike: Preload syntax highlighting
CodeHike-->>CodeSnippet: Highlighted tokens
CodeSnippet->>UI: Render highlighted code with optional title and copy button
UI->>CodeSnippet: User clicks copy button
CodeSnippet->>CodeSnippet: Copy sliced code to clipboard
CodeSnippet->>UI: Show "copied" visual indicator

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	New React component CodeSnippet.tsx with complex functionality (syntax highlighting, copy-to-clipboard, line number calculations) lacks test files; docs package has no test infrastructure despite broader frontend using testing patterns.	Add unit tests in docs/src/components/tests/CodeSnippet.test.tsx and configure test framework (Jest/Vitest) in docs/package.json with dependencies and test scripts.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	New CodeSnippet component with 168 lines lacks test coverage for async highlighting, state management, clipboard functionality, and user interactions.	Add test file CodeSnippet.test.tsx covering line slicing, async highlighting with error handling, clipboard copy with state feedback, line number calculations, and prop variations.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'docs: import code by line number' directly summarizes the main change: enabling code imports by specifying line ranges via raw-loader and the CodeSnippet component.
Test File Naming And Structure	✅ Passed	Documentation infrastructure PRs don't require unit tests; docs folder lacks test infrastructure and testing conventions unlike backend/frontend code.
Excessive Mock Usage Warning	✅ Passed	No test files were added or modified in this PR, making the excessive mock usage check not applicable to these changes.

✨ Finishing Touches 🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch docs-code-import

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.