UI Kit with Blazor
Blazor-based Rich Text Editor and UI Components
The Pathway Between C# Code and JavaScript Execution
Tech Stack
Centralized Service Injections
All components utilize a base class (ComponentMain) to seamlessly cascade core services like JS Runtime, navigation management, and application toast services without manual boilerplate code for every component.
Cascading Form States
All input controls automatically register validation delegates into parent forms through the cFormState class, allowing for more reactive form loading and submission states.
Deep Dive: Wrangling the Virtual DOM
The single largest technical hurdle was managing Blazor's strict Virtual DOM reconciliation algorithm against a native HTML contenteditable node. Because Blazor attempts to add/remove elements from the input which changes based on user input, the content-editable can easily fall out of sync with server state, causing the V-DOM synchronization to fail and crash the site.
The resolution required encapsulating the editing interface deeply inside vanilla JavaScript, cutting the V-DOM out of the loop entirely during active text manipulation. Interop calls then transmit data structures back to C# when the user stops typing in the field, preventing stuttering from constant DOM updates and keeping the browser more performant for large text blocks.
Data Architecture Strategy
Transforming strings into structured collections enables flexible server-side rendering without dangerous HTML sanitization procedures. Image assets are completely split from the primary text stream, mapping unique string identifiers to a string dictionary store. This ensures massive inline base64 blobs remain detached from core content metadata structures.
Global Eval Execution Pattern
A limitation with earlier .Net Core RCLs is that JavaScript (and any wwwroot content) is not properly bundled along with the DLL. Thus a solution to this was to use JavaScript's `eval` function, allowing for inline JavaScript code bundled directly with C#. Among the many trade-offs, the fact that the `eval` function cannot accept parameters is a bit easier to overcome with a global helper function injected upon the first render through all components base class.