Add support for Quill modules in BitRichTextEditor (#11435)

[msynk]

closes #11435

Summary by CodeRabbit

• New Features

  • RichTextEditor now supports custom Quill modules via a Modules parameter.
  • Added OnQuillModulesReady event to signal when module scripts are loaded.
  • OnEditorReady now provides a string argument with readiness details.

• Refactor

  • Improved initialization sequence and resilient loading of optional Quill module scripts for more reliable editor setup.

• Documentation

  • New demo showcasing custom Quill modules (image resize) with code samples.
  • Updated parameter docs for Modules, FullToolbar, and OnQuillModulesReady.

[coderabbitai]

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.

Walkthrough

Adds support for custom Quill modules to BitRichTextEditor. Updates C#, JS interop, and TypeScript setup to accept module metadata and configs, load module scripts at first render, signal module readiness, and pass modules to Quill. Demo updated to showcase image resizing via a new quill-image-resize-module script.

Changes

Cohort / File(s)	Summary
RichTextEditor component initialization src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.razor.cs	Adds Modules parameter, new OnQuillModulesReady callback, updates OnEditorReady signature to EventCallback, loads base Quill then optional module scripts on first render, aggregates module configs, adjusts setup and callback ordering, minor import update.
JS setup for Quill modules src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.ts	Extends setup to accept quillModules, defines QuillModule interface, constructs modules map (including toolbar), passes to Quill constructor; preserves behavior when modules absent.
JS interop extension src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorJsRuntimeExtensions.cs	Adds optional quillModules parameter to BitRichTextEditorSetup and forwards it in JS invocation.
Module models src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorModule.cs, src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/QuillModule.cs	Introduces public BitRichTextEditorModule (Name, Src, Config) and internal QuillModule (Name, Config) for configuration and interop payload.
Demo page updates src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor, .../BitRichTextEditorDemo.razor.cs	Adds “Quill custom modules” example using imageResize, documents FullToolbar, Modules, OnQuillModulesReady, and BitRichTextEditorModule; provides example code and module list.
Demo script asset src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/wwwroot/scripts/quill-image-resize-module.js	Adds UMD-compatible ImageResize Quill module, registers as modules/imageResize with resize UI, toolbar, and event handling.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User/Page
  participant R as BitRichTextEditor (.razor.cs)
  participant JS as IJSRuntime
  participant TS as BitRichTextEditor.ts
  participant Q as Quill

  U->>R: Render component (firstRender)
  R->>JS: Load base Quill script
  JS-->>R: Loaded
  R-->>U: OnQuillReady

  alt Modules provided
    loop For each module
      R->>JS: Load module script (Src)
      JS-->>R: Loaded (errors ignored)
    end
    R-->>U: OnQuillModulesReady
  end

  R->>TS: RichTextEditor.setup(..., quillModules)
  TS->>Q: new Quill(editor, { modules: { toolbar, ...quillModules }})
  Q-->>TS: Ready
  TS-->>R: Editor created
  R-->>U: OnEditorReady(id)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

A nib of code, a hop, a glide,
I bring Quill modules by my side.
Resize images—pinch, align—
Scripts now load and all’s just fine.
With ears up high, I press “Compile,”
The editor grows—carrot-wide smile! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the primary change of adding support for Quill modules in the BitRichTextEditor component, aligning with the changeset’s main focus on module support and hooks.
Linked Issues Check	✅ Passed	The pull request implements support for custom Quill modules and includes a dedicated imageResize module script and integration, thereby fulfilling the linked issue’s requirement to add image resizing capability to the BitRichTextEditor.
Out of Scope Changes Check	✅ Passed	All changes in the pull request are directly related to extending the BitRichTextEditor with Quill module support and demonstrating the imageResize module, and no unrelated code or features were introduced.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 7e32552 and 3b3aefe.

📒 Files selected for processing (8)

• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.razor.cs (4 hunks)
• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.ts (2 hunks)
• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorJsRuntimeExtensions.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorModule.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/QuillModule.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs (7 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/wwwroot/scripts/quill-image-resize-module.js (1 hunks)

🧰 Additional context used

🪛 Biome (2.1.2)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/wwwroot/scripts/quill-image-resize-module.js

[error] 1-1: Comparing to itself is potentially pointless.

(lint/suspicious/noSelfCompare)

---

[error] 1-1: Comparing to itself is potentially pointless.

(lint/suspicious/noSelfCompare)

---

[error] 1-1: eval() exposes to security risks and performance issues.

See the MDN web docs for more details.
Refactor the code so that it doesn't need to call eval().

(lint/security/noGlobalEval)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build and test

[igeeksng]

Awesome work team. Its working perfectly.