RichTextEditor component - #1302
Open
gvreddy04 wants to merge 50 commits into
Open
Conversation
Introduced a new RichTextEditor to BlazorBootstrap with no third-party dependencies. Includes grouped toolbars, dialogs for links/images/tables, image upload support, strong client-side HTML sanitization, and accessibility features. Added JS interop, DI registration, supporting types, component-specific CSS, documentation, and a demo page. All HTML input/output is sanitized on the client, with guidance for server-side sanitization.
Added RichTextEditor component demo and documentation to BlazorBootstrap.Demo.RCL. Registered navigation entries and defined route constants for demos and docs. Added 23 demo files for individual toolbar commands. Created a comprehensive documentation page. Refactored related code files for better organization. No breaking changes; all additions are backward compatible.
Added explicit constructors and read-only properties to RichTextEditorImageUploadRequest and RichTextEditorImageUploadResult. Introduced #region directives to organize constructors and properties/indexers.
Replaced custom toolbar container and button classes in RichTextEditor components with Bootstrap flex row and margin utilities for improved layout and scrolling. Simplified toolbar group structure by removing group label and using Bootstrap border-end for separation.
Updated Bootstrap CDN links to 5.3.8 in App.razor and index.html for consistency. Replaced RichTextEditor.razor with a new static, Bootstrap-based UI and removed its custom CSS, relying on Bootstrap styles. Previous editor logic is commented out.
Refactored RichTextEditor to use a single grouped Bootstrap toolbar and inline modal dialogs in the .razor file. Updated toolbar button and dropdown command handling. Replaced modular toolbar/dialog components. Changed ValueChanged to emit a new RichTextEditorChange record with HTML, plain text, and counts. Added StatusChanged event for error/status reporting. Simplified ClearAsync and improved code clarity. Added RichTextEditorChange.cs for change event data. Updated documentation comments.
Reorganize code with region blocks, group related members, and add XML documentation to public methods. Add [DefaultValue] and [Description] attributes for metadata. No functional changes.
Refactors and enhances the rich text editor's JS logic: - Expands allowed HTML tags/attributes and tightens CSS style checks for improved security. - Unifies link/image URL validation with isSafeUrl. - Adds draft persistence via sessionStorage and draftKey. - Implements undo/redo history stack (100 entries). - Adds text metrics and live footer updates. - Switches to semantic HTML for formatting commands; expands formatting options. - Improves sanitization of styles, classes, and attributes. - Refactors event handling and updates core editor functions. - Cleans up code, improves naming, and removes dialog/table logic.
Added modal dialog functions for inserting links, images, and tables. Updated the execute function to handle new commands by showing modals or performing actions. Modified event handling for modal save actions. Refactored code for readability; no changes to core text formatting logic.
Updated docs and demos to use explicit Value/ValueChanged and StatusChanged handlers instead of @bind-Value, reflecting a new event-based API with RichTextEditorChange. Enhanced JS module with style sanitization, table normalization, and improved list handling for safer HTML. Expanded toolbar commands for list toggling and accessible table insertion. Updated security docs to clarify sanitization and draft storage. Modernizes API, improves security, and enhances features and documentation.
Refactored the execute function for better readability by splitting chained else-if statements. Introduced a selectedElement helper to streamline retrieval of selected elements for style and alignment commands. Ensured commit(instance) is always called on changes and unified unsupported command status messages. Applied minor formatting improvements for clarity and maintainability.
Refactored toolbar button attributes to use new data-editor-* attributes, replacing data-bb-rte-command/value/action. Reorganized and expanded button groups and dropdowns, adding granular table actions, enhanced color pickers, and more formatting options. Redesigned footer with new IDs for context display and improved layout for clarity and responsiveness. Refactor RichTextEditor toolbar and footer structure Refactored toolbar button attributes for consistency, replacing old data-bb-rte-* attributes with new data-editor-* attributes. Simplified dropdowns for block format, font family, and font size. Redesigned color and highlight pickers with indicator spans and dropdowns. Expanded table options into a comprehensive dropdown. Restyled footer with new IDs for context display and improved layout for clarity.
Refactored RichTextEditorToolbar and RichTextEditorToolbarGroup components by moving their logic from .razor files to new .razor.cs partial classes. Updated .razor files to use @inherits BlazorBootstrapComponentBase. Improves code organization and maintainability.
Refactored toolbar to use RichTextEditorToolbarButton for improved maintainability. Expanded and renamed RichTextEditorToolbarItem enum with new items (e.g., Print, AlignLeft, Fullscreen). Updated toolbar arrays and added ToolbarItems parameter for customization. Moved toolbar button logic to code-behind. Updated demos and documentation to match new structure.
Refactored RichTextEditor toolbar to use a new RichTextEditorToolbarButton component for all actions, centralizing button logic and appearance. Updated toolbar item enum (renamed Justify to AlignJustify, added None), and moved icon/label mapping to EnumExtensions. Updated button component to use BlazorBootstrap Button and handle clicks via OnClickAsync. Exposed Disabled and Item parameters with docs and defaults. Commented out OnAfterRenderAsync in RichTextEditor.razor.cs. Updated toolbar arrays to use AlignJustify.
Refactored RichTextEditor and toolbar buttons to use explicit parent-child communication via CascadingValue/CascadingParameter. Updated RichTextEditorJsInterop to use command-based methods requiring .NET object reference and editor ID. Heavily refactored JS file with stubbed command functions and removed legacy logic. Razor markup restructured for clarity. ToolbarButton now uses computed properties and calls parent handler. Commented out obsolete code with TODOs for future work.
The initialize function in blazor.bootstrap.rich-text-editor.js now uses a placeholder instead of sending "Password prompt canceled." to .NET. A comment was added to indicate that the actual editor value should be sent in the future.
Major overhaul of JS and .NET interop for the Rich Text Editor: - Introduced per-editor state objects for advanced features and cleaner event handling. - Replaced execCommand with custom DOM-based formatting logic. - Added comprehensive link, table, and image support with modals and validation. - Implemented undo/redo stack, custom print, and improved selection management. - Updated .NET interop with new initialization and command routing. - Added ToCommandName extension for toolbar command mapping. - Improved toolbar handling, debugging, disposal, and accessibility. - Removed obsolete code and modernized editor for maintainability and new features.
Refactored comments in blazor.bootstrap.rich-text-editor.js to use all-caps section headers and concise, single-line function descriptions. Replaced stylized and JSDoc-style comments for improved readability and consistency. No changes to code logic or functionality.
Refactored the RichTextEditor footer to generate unique element IDs based on the editor's Id property, supporting multiple instances. Replaced static text with spans for character/word counts and context labels, which are now updated in real time via new JavaScript functions (updateFooter, updateFooterCounts, updateFooterContext) on content and selection changes. Footer state is initialized on editor load.
Refactor JavaScript to route 'undo', 'redo', and 'print' through executeCommand, simplifying toolbar click handling. Add Console.WriteLine statements for debugging in C# and JS. Use null-forgiving operator on objRef in RichTextEditor.razor.cs to suppress nullable warnings.
…sibility of elements during printing
…plement selection behavior
…date command handling
…re proper state recording
…empty node removal
…oper state recording
…ove selection handling
…g and add rangeContainsTextContent utility
…r and improve table cell selection handling
…ontent insertion logic
…ctionality and validation
…ode documentation and maintainability
…ality and validation
…t-size values and improve accuracy
…ll selections and add utility function for fully selected table cells
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.
No description provided.