Improve BitMarkdownEditor (#10271) #10272
Conversation
WalkthroughThe changes enhance the functionality of the Markdown editor component by introducing new public parameters for input binding (Value, DefaultValue, OnChange) and a new JS-invocable method for handling change events. The component’s lifecycle management is improved with updates to initialization (via JS interop) and disposal logic. In addition, the TypeScript side now accepts extra parameters with refined event and key handling logic, and the CSS has been updated to ensure full height usage. Demo pages have been augmented with new examples demonstrating the enhanced features. Changes
Sequence Diagram(s)sequenceDiagram
participant User as End User
participant Editor as BitMarkdownEditor (.razor.cs)
participant TS as BitMarkdownEditor (TypeScript)
participant JS as JS Runtime
participant DotNet as DotNetObjectReference
User->>JS: Interact with editor (e.g., key press)
JS-->>Editor: Invoke [_OnChange] via JS interop
Editor->>Editor: Update Value and trigger OnChange callback
TS->>TS: Process key events and handle additional content types ("init")
Editor->>JS: Call BitMarkdownEditorDispose on disposal
JS->>DotNet: Clean up interop references
Assessment against linked issues
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.ts (1)
127-150: Handling of new "init" type.The method now properly handles the new "init" content type, though it's an empty block. Consider adding a comment explaining the purpose of this empty case.
- } else if (content.type === "init") { } + } else if (content.type === "init") { + // No action needed, initialization is handled in the init method + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.razor.cs(2 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.scss(1 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.ts(7 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditorJsRuntimeExtensions.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownEditor/BitMarkdownEditorDemo.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownEditor/BitMarkdownEditorDemo.razor.cs(2 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditorJsRuntimeExtensions.cs (2)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.razor.cs (3) (3)
ValueTask(38:41)ValueTask(72:86)BitMarkdownEditor(6:87)src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs (2) (2)
ValueTask(196:200)ValueTask(202:206)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.razor.cs (2)
src/BlazorUI/Bit.BlazorUI/Components/BitComponentBase.cs (3) (3)
Task(78:147)ValueTask(196:200)ValueTask(202:206)src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditorJsRuntimeExtensions.cs (3) (3)
ValueTask(5:12)ValueTask(14:17)ValueTask(19:22)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (25)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.scss (1)
5-5: Excellent addition to ensure full height usage.Adding
height: 100%to the.bit-mdeclass ensures the component fills its container's height, which complements the existing width property. This change improves the component's responsiveness and layout behavior.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownEditor/BitMarkdownEditorDemo.razor (4)
12-17: Well-structured basic demo with consistent height.The simplified basic demo provides a clean example of the component's usage with a consistent height container.
19-27: Good demonstration of value retrieval.This section effectively showcases how to retrieve the editor's value programmatically using the reference and GetValue method.
29-36: Excellent demonstration of the OnChange feature.This example clearly shows how to use the DefaultValue parameter and handle change events, providing visual feedback of the changing value.
38-45: Great two-way binding demonstration.This example effectively showcases the two-way binding capability using the @bind-Value directive, completing the set of demos for all new features.
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditorJsRuntimeExtensions.cs (2)
5-11: Great enhancement to JS interop initialization.The addition of
dotnetObjanddefaultValueparameters to the BitMarkdownEditorInit method enables proper bidirectional communication between JS and .NET, supporting the new change events and default value functionality.
19-22: Essential addition for proper resource cleanup.Adding the BitMarkdownEditorDispose method ensures proper cleanup of resources when the component is disposed, preventing potential memory leaks and following best practices for component lifecycle management.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MarkdownEditor/BitMarkdownEditorDemo.razor.cs (3)
7-27: Comprehensive documentation of new parameters.The added component parameters with their types, default values, and descriptions provide excellent documentation for users of the component. The descriptions clearly explain the purpose of each parameter.
39-41: Appropriate state variables for demo sections.These variables properly support the new demo sections for OnChange and Binding functionality.
64-82: Clear and helpful code examples.The new code examples for OnChange and Binding features are well-structured and provide valuable reference for users implementing these features in their applications.
src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.razor.cs (5)
9-9: Good addition of DotNetObjectReference field to manage JavaScript interop lifecycle.This field correctly enables the communication bridge between C# and JavaScript, allowing for callbacks from JS to .NET.
17-32: Well-structured parameters with appropriate attributes and documentation.The added parameters enhance the component's functionality:
DefaultValuefor initialization without bindingOnChangecallback for event notificationValuewith TwoWayBound attribute for two-way data bindingThese additions follow best practices for Blazor component design.
56-68: Good implementation of conditional DotNetObjectReference creation.The reference is only created when actually needed (when binding or OnChange handlers are present), which is a performance optimization. The initialization properly passes all required parameters to JavaScript.
72-85: Proper disposal implementation with error handling.This code correctly:
- Disposes the DotNetObjectReference
- Calls the JavaScript disposal method
- Handles potential JSDisconnectedException
- Calls the base disposal method
This implementation ensures clean resource management.
45-50:❓ Verification inconclusive
Review the implementation of AssignValue method.
The
_OnChangemethod callsAssignValue(value)but this method is not defined in the visible code.
🏁 Script executed:
#!/bin/bash # Look for implementation of AssignValue method in the base class or component rg -A 2 "protected\s+(virtual|async)?\s+Task\s+AssignValue" --type csharpLength of output: 75
I'm not seeing the expected output for the
AssignValuemethod definition. It might be defined in a base class or elsewhere in the codebase with a different signature. To further clarify this, please run a comprehensive search for any occurrence of a method namedAssignValuein the repository. For example, try running the following shell script:Once we have the full output from this search, we'll be better positioned to decide whether the absence of a visible definition is intentional (e.g., inherited from a base class) or if an implementation is actually missing and needs to be added.
🏁 Script executed:
#!/bin/bash # Perform a comprehensive search for any definition or reference to "AssignValue" in C# files. rg -n "AssignValue\s*\(" --type csharpLength of output: 589
I'm not finding an explicit implementation of the
AssignValuemethod in the search results for its definition, though its usage appears in multiple components (including the MarkdownEditor and Slider components).It is likely that
AssignValueis inherited from a common base class. Could you please verify ifAssignValueis implemented in one of the base classes (such as a component base used by both MarkdownEditor and Slider)? If so, ensure that the base class implementation meets the expected behavior for MarkdownEditor. If it's missing or improperly defined, you'll need to address that in the base class or override the method in the MarkdownEditor component.Next Steps:
- Verify the inheritance hierarchy of
BitMarkdownEditorand inspect its base class for theAssignValueimplementation.- Confirm that the base class correctly implements
AssignValuefor all derived components.src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.ts (10)
4-4: Good addition of "init" type to Content enum.This addition supports the new initialization flow for the component.
10-15: LGTM: Enhanced initialization with dotnetObj and defaultValue parameters.This change properly extends the initialization method to support setting a default value and connecting the JavaScript component to the .NET object for callbacks.
27-33: Proper implementation of resource cleanup.The static dispose method correctly:
- Checks if the editor instance exists
- Calls the instance's dispose method
- Removes the editor from the static map
This prevents memory leaks and ensures proper cleanup.
44-46: Good additions to the pairs map and private fields.The additions to the pairs map support additional markdown syntax elements, and the new private fields properly manage event handlers and the DotNet reference.
Also applies to: 49-54
56-66: Constructor correctly stores references and binds handlers.The updated constructor now accepts and stores the DotNet reference and properly binds all event handlers.
76-82: Well-structured initialization of event listeners.Moving the event listener setup to a dedicated method improves code organization.
181-187: Simplified add method with unified content parameter.The refactored method correctly uses the content parameter in a consistent way.
235-355: Improved keyboard event handling.The enhanced keydown handler has significantly improved logic for various key combinations, including:
- Better handling of special keys
- More robust code block behavior
- Improved list handling
- Enhanced shortcuts for markdown formatting
The code is well-structured and handles edge cases properly.
357-375: Well-implemented event handlers.The event handlers for double-click, click, and change events are properly implemented:
- dblClick improves selection behavior
- click resets the opens array
- change correctly triggers the .NET callback
The callback to
OnChangemethod in line 373 is essential for the two-way binding to work.
376-384: Thorough cleanup in dispose method.The dispose method correctly:
- Removes all event listeners
- Clears the DotNet reference
This prevents memory leaks and ensures proper cleanup.
closes #10271
Summary by CodeRabbit
New Features
Style
Demo Enhancements