chore: Clean up custom components in examples (BLO-869)#2705
Open
matthewlipski wants to merge 1 commit intomainfrom
Open
chore: Clean up custom components in examples (BLO-869)#2705matthewlipski wants to merge 1 commit intomainfrom
matthewlipski wants to merge 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR refactors UI component wiring across nine example applications. Inline render functions and wrapper components are replaced with dedicated components or helpers passed to controllers via props, consolidating component composition patterns. ChangesUI Component Wiring Refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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. Review rate limit: 6/8 reviews remaining, refill in 8 minutes and 48 seconds.Comment |
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx (1)
16-18: 💤 Low valueUpdate the inline comment to reflect that both components are now extracted.
The comment only mentions defining the drag handle menu in a separate component, but this PR also extracts
CustomSideMenufor the same reason. Readers may miss the rationale for the outer component.✏️ Suggested update
-// To avoid rendering issues, it's good practice to define your custom drag -// handle menu in a separate component, instead of inline within the `sideMenu` -// prop of `SideMenuController`. +// To avoid rendering issues, it's good practice to define custom UI components +// in separate functions rather than inline within controller props like +// `SideMenuController`'s `sideMenu` prop.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx` around lines 16 - 18, Update the inline comment so it explains that both CustomDragHandleMenu and CustomSideMenu are extracted into separate components to avoid rendering issues; find the comment near the SideMenuController usage and replace the current note about only the drag handle with a concise line stating that both the drag handle menu (CustomDragHandleMenu) and the outer side menu (CustomSideMenu) are defined as separate components to prevent re-rendering/mounting problems when used in the sideMenu prop of SideMenuController.
🤖 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/03-ui-components/11-uppy-file-panel/src/App.tsx`:
- Around line 19-23: The splice call uses items.findIndex((c) => c.key ===
"replaceFileButton") which can return -1 and cause Array.splice(-1, ...) to
replace the last toolbar item; change the logic to first store the result (e.g.,
const idx = items.findIndex(...)) and only call items.splice(idx, 1,
<FileReplaceButton key={"fileReplaceButton"} />) when idx !== -1 (no-op
otherwise) so you only replace when the "replaceFileButton" key actually exists.
In `@examples/09-ai/01-minimal/src/App.tsx`:
- Around line 102-117: Update the stale inline comments that say "(defined
below)" to "(defined above)" for the AI integrations inside the App component:
change the comments referencing FormattingToolbarWithAI and
getSlashMenuItemsWithAI to indicate they are defined above the App function
(they currently appear below the comment), and scan other modified files in this
PR for the same incorrect "(defined below)" phrasing and correct them to
"(defined above)" so documentation comments accurately point to the
function/component locations.
In `@examples/09-ai/02-playground/src/App.tsx`:
- Around line 146-150: The comment above FormattingToolbarController is stale —
it says "defined below" but FormattingToolbarWithAI is defined above App; update
the comment to reflect that (e.g., change "(defined below)" to "(defined above)"
or remove the parenthetical). Locate the comment near the
FormattingToolbarController usage and adjust the text so it correctly references
FormattingToolbarWithAI's actual position relative to App.
In `@examples/09-ai/03-custom-ai-menu-items/src/App.tsx`:
- Around line 145-149: The comment above the FormattingToolbarController
mentions "(defined below)" but FormattingToolbarWithAI is declared earlier;
update the comment near FormattingToolbarController (used in App) to either
remove the parenthetical or change it to "(defined above)" so it correctly
reflects that FormattingToolbarWithAI is defined above the App component; locate
references to FormattingToolbarController and FormattingToolbarWithAI to edit
that inline comment.
In `@examples/09-ai/04-with-collaboration/src/App.tsx`:
- Around line 195-199: Update the inline comment that says "(defined below)"
since FormattingToolbarWithAI is defined above App now; find the comment near
FormattingToolbarController and change the phrasing to reflect that the custom
toolbar (FormattingToolbarWithAI) is defined earlier (e.g., "(defined above)")
or remove the positional note, ensuring it references FormattingToolbarWithAI
and FormattingToolbarController so reviewers can locate it.
In `@examples/09-ai/06-client-side-transport/src/App.tsx`:
- Around line 116-120: Update the stale comment referencing the toolbar
placement: in the comment above FormattingToolbarController that mentions
"FormattingToolbarWithAI (defined below)", change the phrasing to reflect the
actual location (e.g., "(defined above)" or remove the parenthetical entirely)
so it correctly refers to the FormattingToolbarWithAI declaration now located
above the App component; locate the comment near the FormattingToolbarController
usage in the App component and adjust it accordingly.
In `@examples/09-ai/07-server-persistence/src/App.tsx`:
- Around line 131-135: Update the in-file comment that mentions the custom
toolbar location: change the phrase "(defined below)" to "(defined above)" (or
remove the location qualifier) to reflect that FormattingToolbarWithAI is
declared earlier in the file; look for the comment surrounding the
FormattingToolbarController usage and the symbol FormattingToolbarWithAI to make
the edit.
---
Nitpick comments:
In `@examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx`:
- Around line 16-18: Update the inline comment so it explains that both
CustomDragHandleMenu and CustomSideMenu are extracted into separate components
to avoid rendering issues; find the comment near the SideMenuController usage
and replace the current note about only the drag handle with a concise line
stating that both the drag handle menu (CustomDragHandleMenu) and the outer side
menu (CustomSideMenu) are defined as separate components to prevent
re-rendering/mounting problems when used in the sideMenu prop of
SideMenuController.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6dfd304d-5d65-4ece-a353-02c44f60c569
📒 Files selected for processing (14)
examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsxexamples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsxexamples/03-ui-components/04-side-menu-buttons/src/App.tsxexamples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsxexamples/03-ui-components/11-uppy-file-panel/src/App.tsxexamples/03-ui-components/16-link-toolbar-buttons/src/App.tsxexamples/06-custom-schema/03-font-style/src/App.tsxexamples/06-custom-schema/05-alert-block-full-ux/src/App.tsxexamples/09-ai/01-minimal/src/App.tsxexamples/09-ai/02-playground/src/App.tsxexamples/09-ai/03-custom-ai-menu-items/src/App.tsxexamples/09-ai/04-with-collaboration/src/App.tsxexamples/09-ai/06-client-side-transport/src/App.tsxexamples/09-ai/07-server-persistence/src/App.tsx
Comment on lines
+19
to
+23
| items.splice( | ||
| items.findIndex((c) => c.key === "replaceFileButton"), | ||
| 1, | ||
| <FileReplaceButton key={"fileReplaceButton"} />, | ||
| ); |
There was a problem hiding this comment.
findIndex returning -1 causes the last toolbar item to be silently replaced.
When "replaceFileButton" is absent from the items array (e.g., the cursor is on a paragraph or heading block rather than a file/image block), findIndex returns -1. Array.prototype.splice(-1, 1, …) interprets -1 as the last index, so the last toolbar item is removed and <FileReplaceButton /> is inserted in its place instead.
🐛 Proposed fix — guard against missing key
- items.splice(
- items.findIndex((c) => c.key === "replaceFileButton"),
- 1,
- <FileReplaceButton key={"fileReplaceButton"} />,
- );
+ const replaceIdx = items.findIndex((c) => c.key === "replaceFileButton");
+ if (replaceIdx !== -1) {
+ items.splice(replaceIdx, 1, <FileReplaceButton key={"fileReplaceButton"} />);
+ }📝 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
| items.splice( | |
| items.findIndex((c) => c.key === "replaceFileButton"), | |
| 1, | |
| <FileReplaceButton key={"fileReplaceButton"} />, | |
| ); | |
| const replaceIdx = items.findIndex((c) => c.key === "replaceFileButton"); | |
| if (replaceIdx !== -1) { | |
| items.splice(replaceIdx, 1, <FileReplaceButton key={"fileReplaceButton"} />); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/03-ui-components/11-uppy-file-panel/src/App.tsx` around lines 19 -
23, The splice call uses items.findIndex((c) => c.key === "replaceFileButton")
which can return -1 and cause Array.splice(-1, ...) to replace the last toolbar
item; change the logic to first store the result (e.g., const idx =
items.findIndex(...)) and only call items.splice(idx, 1, <FileReplaceButton
key={"fileReplaceButton"} />) when idx !== -1 (no-op otherwise) so you only
replace when the "replaceFileButton" key actually exists.
Comment on lines
+102
to
+117
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | ||
| and replace it for one with an "AI button" (defined below). | ||
| (See "Formatting Toolbar" in docs) | ||
| */} | ||
| <FormattingToolbarWithAI /> | ||
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | ||
|
|
||
| {/* We disabled the default SlashMenu with `slashMenu=false` | ||
| and replace it for one with an AI option (defined below). | ||
| {/* We disabled the default SlashMenu with `slashMenu=false` | ||
| and replace it for one with an AI option (defined below). | ||
| (See "Suggestion Menus" in docs) | ||
| */} | ||
| <SuggestionMenuWithAI editor={editor} /> | ||
| <SuggestionMenuController | ||
| triggerCharacter="/" | ||
| getItems={async (query) => | ||
| filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) | ||
| } | ||
| /> |
There was a problem hiding this comment.
Stale (defined below) references in both comments — direction is now inverted.
Both FormattingToolbarWithAI (line 31) and getSlashMenuItemsWithAI (line 40) are defined above the App function. The new comments still say (defined below) for each, which will mislead doc readers looking in the wrong direction. The same applies to all other files changed in this PR.
✏️ Proposed fix
- {/* We disabled the default formatting toolbar with `formattingToolbar=false`
- and replace it for one with an "AI button" (defined below).
+ {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+ and replace it for one with an "AI button" (defined above).
(See "Formatting Toolbar" in docs)
*/}- {/* We disabled the default SlashMenu with `slashMenu=false`
- and replace it for one with an AI option (defined below).
+ {/* We disabled the default SlashMenu with `slashMenu=false`
+ and replace it for one with an AI option (defined above).
(See "Suggestion Menus" in docs)
*/}📝 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
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined below). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarWithAI /> | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | |
| {/* We disabled the default SlashMenu with `slashMenu=false` | |
| and replace it for one with an AI option (defined below). | |
| {/* We disabled the default SlashMenu with `slashMenu=false` | |
| and replace it for one with an AI option (defined below). | |
| (See "Suggestion Menus" in docs) | |
| */} | |
| <SuggestionMenuWithAI editor={editor} /> | |
| <SuggestionMenuController | |
| triggerCharacter="/" | |
| getItems={async (query) => | |
| filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) | |
| } | |
| /> | |
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined above). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | |
| {/* We disabled the default SlashMenu with `slashMenu=false` | |
| and replace it for one with an AI option (defined above). | |
| (See "Suggestion Menus" in docs) | |
| */} | |
| <SuggestionMenuController | |
| triggerCharacter="/" | |
| getItems={async (query) => | |
| filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) | |
| } | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/09-ai/01-minimal/src/App.tsx` around lines 102 - 117, Update the
stale inline comments that say "(defined below)" to "(defined above)" for the AI
integrations inside the App component: change the comments referencing
FormattingToolbarWithAI and getSlashMenuItemsWithAI to indicate they are defined
above the App function (they currently appear below the comment), and scan other
modified files in this PR for the same incorrect "(defined below)" phrasing and
correct them to "(defined above)" so documentation comments accurately point to
the function/component locations.
Comment on lines
+146
to
+150
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | ||
| and replace it for one with an "AI button" (defined below). | ||
| (See "Formatting Toolbar" in docs) | ||
| */} | ||
| <FormattingToolbarWithAI /> | ||
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
There was a problem hiding this comment.
Stale (defined below) in the changed toolbar comment.
FormattingToolbarWithAI is now defined at line 37, above App. The updated comment at line 147 still says (defined below).
✏️ Proposed fix
- {/* We disabled the default formatting toolbar with `formattingToolbar=false`
- and replace it for one with an "AI button" (defined below).
+ {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+ and replace it for one with an "AI button" (defined above).
(See "Formatting Toolbar" in docs)
*/}📝 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
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined below). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarWithAI /> | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | |
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined above). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/09-ai/02-playground/src/App.tsx` around lines 146 - 150, The comment
above FormattingToolbarController is stale — it says "defined below" but
FormattingToolbarWithAI is defined above App; update the comment to reflect that
(e.g., change "(defined below)" to "(defined above)" or remove the
parenthetical). Locate the comment near the FormattingToolbarController usage
and adjust the text so it correctly references FormattingToolbarWithAI's actual
position relative to App.
Comment on lines
+145
to
+149
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | ||
| and replace it for one with an "AI button" (defined below). | ||
| (See "Formatting Toolbar" in docs) | ||
| */} | ||
| <FormattingToolbarWithAI /> | ||
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
There was a problem hiding this comment.
Stale (defined below) in the changed toolbar comment.
FormattingToolbarWithAI is now at line 77, above App. Line 146 still says (defined below).
✏️ Proposed fix
- {/* We disabled the default formatting toolbar with `formattingToolbar=false`
- and replace it for one with an "AI button" (defined below).
+ {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+ and replace it for one with an "AI button" (defined above).
(See "Formatting Toolbar" in docs)
*/}📝 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
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined below). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarWithAI /> | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | |
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined above). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/09-ai/03-custom-ai-menu-items/src/App.tsx` around lines 145 - 149,
The comment above the FormattingToolbarController mentions "(defined below)" but
FormattingToolbarWithAI is declared earlier; update the comment near
FormattingToolbarController (used in App) to either remove the parenthetical or
change it to "(defined above)" so it correctly reflects that
FormattingToolbarWithAI is defined above the App component; locate references to
FormattingToolbarController and FormattingToolbarWithAI to edit that inline
comment.
Comment on lines
+195
to
+199
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | ||
| and replace it for one with an "AI button" (defined below). | ||
| (See "Formatting Toolbar" in docs) | ||
| */} | ||
| <FormattingToolbarWithAI /> | ||
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
There was a problem hiding this comment.
Stale (defined below) in the changed toolbar comment.
FormattingToolbarWithAI is now at line 62, above App. Line 196 still says (defined below).
✏️ Proposed fix
- {/* We disabled the default formatting toolbar with `formattingToolbar=false`
- and replace it for one with an "AI button" (defined below).
+ {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+ and replace it for one with an "AI button" (defined above).
(See "Formatting Toolbar" in docs)
*/}📝 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
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined below). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarWithAI /> | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | |
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined above). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/09-ai/04-with-collaboration/src/App.tsx` around lines 195 - 199,
Update the inline comment that says "(defined below)" since
FormattingToolbarWithAI is defined above App now; find the comment near
FormattingToolbarController and change the phrasing to reflect that the custom
toolbar (FormattingToolbarWithAI) is defined earlier (e.g., "(defined above)")
or remove the positional note, ensuring it references FormattingToolbarWithAI
and FormattingToolbarController so reviewers can locate it.
Comment on lines
+116
to
+120
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | ||
| and replace it for one with an "AI button" (defined below). | ||
| (See "Formatting Toolbar" in docs) | ||
| */} | ||
| <FormattingToolbarWithAI /> | ||
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
There was a problem hiding this comment.
Stale (defined below) in the changed toolbar comment.
FormattingToolbarWithAI is now at line 32, above App. Line 117 still says (defined below).
✏️ Proposed fix
- {/* We disabled the default formatting toolbar with `formattingToolbar=false`
- and replace it for one with an "AI button" (defined below).
+ {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+ and replace it for one with an "AI button" (defined above).
(See "Formatting Toolbar" in docs)
*/}📝 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
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined below). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarWithAI /> | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> | |
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | |
| and replace it for one with an "AI button" (defined above). | |
| (See "Formatting Toolbar" in docs) | |
| */} | |
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/09-ai/06-client-side-transport/src/App.tsx` around lines 116 - 120,
Update the stale comment referencing the toolbar placement: in the comment above
FormattingToolbarController that mentions "FormattingToolbarWithAI (defined
below)", change the phrasing to reflect the actual location (e.g., "(defined
above)" or remove the parenthetical entirely) so it correctly refers to the
FormattingToolbarWithAI declaration now located above the App component; locate
the comment near the FormattingToolbarController usage in the App component and
adjust it accordingly.
Comment on lines
+131
to
+135
| {/* We disabled the default formatting toolbar with `formattingToolbar=false` | ||
| and replace it for one with an "AI button" (defined below). | ||
| (See "Formatting Toolbar" in docs) | ||
| */} | ||
| <FormattingToolbarWithAI /> | ||
| <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} /> |
There was a problem hiding this comment.
Stale (defined below) in the changed toolbar comment.
FormattingToolbarWithAI is now at line 30, above App. Line 132 still says (defined below).
✏️ Proposed fix
- {/* We disabled the default formatting toolbar with `formattingToolbar=false`
- and replace it for one with an "AI button" (defined below).
+ {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+ and replace it for one with an "AI button" (defined above).
(See "Formatting Toolbar" in docs)
*/}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/09-ai/07-server-persistence/src/App.tsx` around lines 131 - 135,
Update the in-file comment that mentions the custom toolbar location: change the
phrase "(defined below)" to "(defined above)" (or remove the location qualifier)
to reflect that FormattingToolbarWithAI is declared earlier in the file; look
for the comment surrounding the FormattingToolbarController usage and the symbol
FormattingToolbarWithAI to make the edit.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR cleans up custom components in examples for UI elements. Specifically, any components passed to
XYZControllers that are defined inline are extracted, e.g.Closes #941
Rationale
Makes things slightly more legible for people looking at examples in the docs.
Changes
See above.
Impact
N/A
Testing
N/A
Screenshots/Video
N/A
Checklist
Additional Notes
N/A
Summary by CodeRabbit