Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughA new read-only editor example has been added to the examples directory with complete project setup including configuration files, React component, and documentation. The playground registry was updated to include this new example and adjusted a path reference for the shadowdom example. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/01-basic/16-read-only-editor/index.html`:
- Line 1: Add the HTML5 DOCTYPE declaration before the existing <html> tag in
the document by inserting <!DOCTYPE html> at the very top of the file so the
page validates with HTMLHint and browsers render in standards mode; ensure the
DOCTYPE appears immediately above the existing <html lang="en"> element.
- Around line 6-8: Replace the invalid HTML comment inside the <script> block in
the file by removing the <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> or
converting it to a valid JavaScript comment; locate the <script> tag in
examples/01-basic/16-read-only-editor/index.html and either delete the commented
line entirely or change it to a JS comment using // or /* */ so the script
contains only valid JavaScript.
In `@examples/01-basic/16-read-only-editor/vite.config.ts`:
- Around line 22-29: The alias mappings for "@blocknote/core" and
"@blocknote/react" in vite.config.ts point to "../../packages/..." but are one
level too shallow; update the path.resolve calls used in the alias object (the
entries for "@blocknote/core" and "@blocknote/react") to use
"../../../packages/..." so they correctly resolve from
examples/01-basic/16-read-only-editor to the repository root.
- Line 17: The path check using fs.existsSync(path.resolve(__dirname,
"../../packages/core/src")) is using the wrong relative depth; update the string
"../../packages/core/src" to "../../../packages/core/src" so it correctly
resolves from examples/01-basic/16-read-only-editor to the repo root packages
directory (i.e., change the path literal used in the fs.existsSync/path.resolve
call in vite.config.ts).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a9791640-7ad8-494c-9557-ee50b161520a
📒 Files selected for processing (18)
examples/01-basic/15-shadowdom/.bnexample.jsonexamples/01-basic/15-shadowdom/README.mdexamples/01-basic/15-shadowdom/index.htmlexamples/01-basic/15-shadowdom/main.tsxexamples/01-basic/15-shadowdom/package.jsonexamples/01-basic/15-shadowdom/src/App.tsxexamples/01-basic/15-shadowdom/src/vite-env.d.tsexamples/01-basic/15-shadowdom/tsconfig.jsonexamples/01-basic/15-shadowdom/vite.config.tsexamples/01-basic/16-read-only-editor/.bnexample.jsonexamples/01-basic/16-read-only-editor/README.mdexamples/01-basic/16-read-only-editor/index.htmlexamples/01-basic/16-read-only-editor/main.tsxexamples/01-basic/16-read-only-editor/package.jsonexamples/01-basic/16-read-only-editor/src/App.tsxexamples/01-basic/16-read-only-editor/tsconfig.jsonexamples/01-basic/16-read-only-editor/vite.config.tsplayground/src/examples.gen.tsx
| @@ -0,0 +1,14 @@ | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
Missing DOCTYPE declaration.
The HTML5 DOCTYPE declaration should be present before the <html> tag. This is flagged by HTMLHint.
Proposed fix
+<!DOCTYPE html>
<html lang="en">📝 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.
| <html lang="en"> | |
| <!DOCTYPE html> | |
| <html lang="en"> |
🧰 Tools
🪛 HTMLHint (1.9.2)
[error] 1-1: Doctype must be declared before any non-comment content.
(doctype-first)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/01-basic/16-read-only-editor/index.html` at line 1, Add the HTML5
DOCTYPE declaration before the existing <html> tag in the document by inserting
<!DOCTYPE html> at the very top of the file so the page validates with HTMLHint
and browsers render in standards mode; ensure the DOCTYPE appears immediately
above the existing <html lang="en"> element.
| <script> | ||
| <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> | ||
| </script> |
There was a problem hiding this comment.
Invalid HTML comment syntax inside script tag.
HTML comments (<!-- -->) are not valid inside <script> tags. Use JavaScript comments instead, or remove this entirely since it's informational.
Proposed fix
<script>
- <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+ // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
</script>📝 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.
| <script> | |
| <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> | |
| </script> | |
| <script> | |
| // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY | |
| </script> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/01-basic/16-read-only-editor/index.html` around lines 6 - 8, Replace
the invalid HTML comment inside the <script> block in the file by removing the
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> or converting it to a valid
JavaScript comment; locate the <script> tag in
examples/01-basic/16-read-only-editor/index.html and either delete the commented
line entirely or change it to a JS comment using // or /* */ so the script
contains only valid JavaScript.
| resolve: { | ||
| alias: | ||
| conf.command === "build" || | ||
| !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the correct relative path from the example directory to packages/core/src
# Check current structure
echo "=== Directory structure ==="
tree -L 3 -d examples/01-basic/16-read-only-editor 2>/dev/null || find examples/01-basic/16-read-only-editor -type d 2>/dev/null
# Verify packages/core/src exists at root level
echo ""
echo "=== Checking packages/core/src from root ==="
ls -la packages/core/src 2>/dev/null && echo "packages/core/src exists at root" || echo "packages/core/src NOT found at root"
# Check what other examples use for the same path
echo ""
echo "=== Checking path patterns in other example vite configs ==="
rg -n "packages/core/src" examples/01-basic/*/vite.config.ts 2>/dev/null | head -10Repository: TypeCellOS/BlockNote
Length of output: 2504
🏁 Script executed:
cat -n examples/01-basic/16-read-only-editor/vite.config.tsRepository: TypeCellOS/BlockNote
Length of output: 1270
🏁 Script executed:
# Check if there are examples at different nesting levels
find examples -name "vite.config.ts" -type f | head -20
# Check if there's a template file
find . -name "*template*" -o -name "*vite.config*" | grep -v node_modules | grep -v dist | head -20
# Verify directory depth of each example
for dir in examples/*/; do
echo "=== $dir ==="
echo " Levels up to root: $(echo "$dir" | tr -cd '/' | wc -c)"
doneRepository: TypeCellOS/BlockNote
Length of output: 2638
🏁 Script executed:
# Check the path used in a 02-backend example
cat examples/02-backend/01-file-uploading/vite.config.ts | grep -A 2 "existsSync"
# Get the full path structure to understand __dirname resolution
echo "=== Directory nesting levels ==="
echo "01-basic example: examples/01-basic/01-minimal"
echo " Levels: examples (1) -> 01-basic (2) -> 01-minimal (3)"
echo ""
echo "02-backend example: examples/02-backend/01-file-uploading"
echo " Levels: examples (1) -> 02-backend (2) -> 01-file-uploading (3)"
echo ""
echo "From examples/01-basic/16-read-only-editor/ with ../../packages/core/src:"
echo " -> up 2 levels -> examples/ -> packages/core/src does NOT exist"
echo ""
echo "From examples/02-backend/01-file-uploading/ with ../../packages/core/src:"
echo " -> up 2 levels -> examples/ -> packages/core/src does NOT exist"
echo ""
echo "BOTH should use ../../ equally, which means BOTH are wrong if packages/core/src is at ROOT"Repository: TypeCellOS/BlockNote
Length of output: 798
Fix relative path in package existence check.
The path ../../packages/core/src from examples/01-basic/16-read-only-editor/ resolves to examples/packages/core/src, which doesn't exist. It must go up 3 levels to reach the repository root where packages/core/src is located.
Proposed fix
- !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+ !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))📝 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.
| !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) | |
| !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src")) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/01-basic/16-read-only-editor/vite.config.ts` at line 17, The path
check using fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) is
using the wrong relative depth; update the string "../../packages/core/src" to
"../../../packages/core/src" so it correctly resolves from
examples/01-basic/16-read-only-editor to the repo root packages directory (i.e.,
change the path literal used in the fs.existsSync/path.resolve call in
vite.config.ts).
| "@blocknote/core": path.resolve( | ||
| __dirname, | ||
| "../../packages/core/src/" | ||
| ), | ||
| "@blocknote/react": path.resolve( | ||
| __dirname, | ||
| "../../packages/react/src/" | ||
| ), |
There was a problem hiding this comment.
Alias paths are also incorrect - need 3 levels up, not 2.
The alias paths use ../../packages/ but should use ../../../packages/ to correctly resolve from examples/01-basic/16-read-only-editor/ to the repository root.
Proposed fix
"@blocknote/core": path.resolve(
__dirname,
- "../../packages/core/src/"
+ "../../../packages/core/src/"
),
"@blocknote/react": path.resolve(
__dirname,
- "../../packages/react/src/"
+ "../../../packages/react/src/"
),📝 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.
| "@blocknote/core": path.resolve( | |
| __dirname, | |
| "../../packages/core/src/" | |
| ), | |
| "@blocknote/react": path.resolve( | |
| __dirname, | |
| "../../packages/react/src/" | |
| ), | |
| "@blocknote/core": path.resolve( | |
| __dirname, | |
| "../../../packages/core/src/" | |
| ), | |
| "@blocknote/react": path.resolve( | |
| __dirname, | |
| "../../../packages/react/src/" | |
| ), |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/01-basic/16-read-only-editor/vite.config.ts` around lines 22 - 29,
The alias mappings for "@blocknote/core" and "@blocknote/react" in
vite.config.ts point to "../../packages/..." but are one level too shallow;
update the path.resolve calls used in the alias object (the entries for
"@blocknote/core" and "@blocknote/react") to use "../../../packages/..." so they
correctly resolve from examples/01-basic/16-read-only-editor to the repository
root.
2 participants
Summary
This PR adds a basic read-only editor example to make testing easier.
Rationale
See above.
Changes
See above.
Impact
N/A
Testing
N/A
Screenshots/Video
N/A
Checklist
Additional Notes
Summary by CodeRabbit
New Features
Documentation