UNPKG

@syncfusion/ej2-angular-richtexteditor

Version:

Essential JS 2 RichTextEditor component for Angular

838 lines (460 loc) 121 kB
# Changelog ## [Unreleased] ### RichTextEditor #### Bug Fixes - `#I750223` - Now, drag and drop image insertion into the editor functions reliably even when no image path is configured. - `#I762924` - Now, the Rich Text Editor works properly when pasting list content as plain text in the Firefox browser, and the list no longer becomes a single element. - `#I762935` - Now, the Rich Text Editor works properly when the font color is removed from list content, and the bullet list element no longer retains the font color. - `#I762475` - Now, the Rich Text Editor works properly when using Clear Format to remove inline styles from table content. ## 31.1.18 (2025-09-10) ### RichTextEditor #### Bug Fixes - `#I760221` - Now, the Rich Text Editor works properly when deleting text from nested bullet lists that contain image elements. - `#I759593` - Now, the Rich Text Editor works properly without throwing an accessibility error from the color picker toolbar. - `#I762072, #I760826` - Now, the Rich Text Editor works properly when copying and pasting content with bold formatting and font color from Excel. - `#I762077` - Now, the Rich Text Editor works properly when pressing backspace before an image in a list item, and the image no longer disappears. - `#I760415` - Now, the Rich Text Editor works properly without scrolling to the top when inserting a link using Ctrl + K. ## 31.1.17 (2025-09-05) ### RichTextEditor #### Bug Fixes - `#I757135` - Now, the Rich Text Editor works properly when typing a hyphen (-) in `www-prefixed` text, allowing the auto-linking feature to continue without breaking. - Now, the Rich Text Editor Enter key action works properly after pressing the Shift + Enter keys action. #### Features - **Checklist insertion**: The Rich Text Editor now supports interactive checklists, enabling users to create lists with checkable items for better task tracking and organization. A checklist can be applied to selected text using the Ctrl + Shift + 9 shortcut, and the state of selected items can be toggled using Ctrl + Enter. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/tools.html). - **External Media Drag and Drop**: This feature allows users to easily drag and drop video and audio files directly into the Rich Text Editor, providing a seamless multimedia content integration experience. Users can simply drag media files from their file system and drop them into the editor to embed them instantly. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/rich-text-editor/insert-media.html). - **Selection Change Event**: The Rich Text Editor now supports the [`selectionChanged`](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#selectionChanged) event, triggered when a non-empty selection—text, image, or range—is made or updated via mouse, keyboard, or code. It provides detailed context through [`selectionChangedEventArgs`](https://ej2.syncfusion.com/documentation/api/rich-text-editor/selectionChangedEventArgs/), and works in both HTML and Markdown modes, enabling dynamic UI updates and custom logic. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/client-side-events.html). - **Bullet/Number List via Execute Command**: Added support for `BulletFormatList` and `NumberFormatList` in the [`executeCommand`](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#executecommand) method. These commands allow developers to programmatically apply numbered and bulleted list formatting to selected content within the Rich Text Editor. - **Table Properties Enhancement**: The Rich Text Editor now supports enhanced table customization features. Users can modify border color, style, and width, as well as table width, background color, cell spacing, and cell padding. All styling changes are instantly previewed within the editor for a seamless editing experience. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/tools.html). - **Table Row/Column Quick Insert**: The Rich Text Editor now features an intuitive mechanism for inserting rows and columns. When users hover over the first row's columns or the first column's cells, a subtle dot icon appears. Hovering over this dot reveals a `+` icon, which users can click to instantly insert a new row or column at that position. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/tools.html). - **Source Code View Alignment**: The Rich Text Editor now supports a more polished source code view, featuring improved formatting and indentation for both block-level and inline HTML elements. This enhancement ensures a cleaner, more readable, and user-friendly editing experience. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/tools.html). - **Checklist insertion**: The Rich Text Editor now supports interactive checklists, enabling users to create lists with checkable items for better task tracking and organization. A checklist can be applied to selected text using the Ctrl + Shift + 9 shortcut, and the state of selected items can be toggled using Ctrl + Enter. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools.html). - **External Media Drag and Drop**: This feature allows users to easily drag and drop video and audio files directly into the Rich Text Editor, providing a seamless multimedia content integration experience. Users can simply drag media files from their file system and drop them into the editor to embed them instantly. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor/insert-media.html). - **Selection Change Event**: The Rich Text Editor now supports the [`selectionChanged`](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#selectionChanged) event, triggered when a non-empty selection—text, image, or range—is made or updated via mouse, keyboard, or code. It provides detailed context through [`selectionChangedEventArgs`](https://ej2.syncfusion.com/documentation/api/rich-text-editor/selectionChangedEventArgs/), and works in both HTML and Markdown modes, enabling dynamic UI updates and custom logic. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/client-side-events.html). - **Bullet/Number List via Execute Command**: Added support for `BulletFormatList` and `NumberFormatList` in the [`executeCommand`](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#executecommand) method. These commands allow developers to programmatically apply numbered and bulleted list formatting to selected content within the Rich Text Editor. - **Table Properties Enhancement**: The Rich Text Editor now supports enhanced table customization features. Users can modify border color, style, and width, as well as table width, background color, cell spacing, and cell padding. All styling changes are instantly previewed within the editor for a seamless editing experience. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools.html). - **Table Row/Column Quick Insert**: The Rich Text Editor now features an intuitive mechanism for inserting rows and columns. When users hover over the first row's columns or the first column's cells, a subtle dot icon appears. Hovering over this dot reveals a `+` icon, which users can click to instantly insert a new row or column at that position. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools.html). - **Source Code View Alignment**: The Rich Text Editor now supports a more polished source code view, featuring improved formatting and indentation for both block-level and inline HTML elements. This enhancement ensures a cleaner, more readable, and user-friendly editing experience. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools.html). #### Breaking Changes The [fileUploadSuccess](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#fileuploadsuccess) event type is now changed to [MediaSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/rich-text-editor/mediaSuccessEventArgs/). | Event Name | Previous Type | Current Type | |-------------------|---------------------------------------------------------------------------------------------------------|-----------------------| | [fileUploadSuccess](https://ej2.syncfusion.com/documentation/api/rich-text-editor/#fileuploadsuccess) | object | [MediaSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/rich-text-editor/mediaSuccessEventArgs/) | The [fileUploadSuccess](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor#fileuploadsuccess) event type is now changed to [MediaSuccessEventArgs](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/mediaSuccessEventArgs/). | Event Name | Previous Type | Current Type | |-------------------|---------------------------------------------------------------------------------------------------------|-----------------------| | [fileUploadSuccess](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor#fileuploadsuccess) | object | [MediaSuccessEventArgs](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/mediaSuccessEventArgs/) | ## 30.2.6 (2025-08-19) ### RichTextEditor #### Bug Fixes - `#I754192` - Now, the Rich Text Editor works properly when a binding value is wrapped with a `<div>`, and no extra `<p>` tags are added. - `#I753955` - Now, the image with the table will be pasted into the editor in the Safari browser. ## 30.2.5 (2025-08-13) ### RichTextEditor #### Bug Fixes - `#I698253` - Now, the Rich Text Editor works properly when removing inline code, and the page no longer becomes unresponsive. - `#I752891` - Now, the Rich Text Editor works properly when pressing the Home and End keys after inserting a mention. ## 30.2.4 (2025-08-07) ### RichTextEditor #### Bug Fixes - `#I750223` - Now, images dragged and dropped into the Rich Text Editor will be rendered correctly after a previously pasted image has been removed from the DOM. - `#I749159` - Now, the Rich Text Editor works properly by allowing users to clear the background color of white space after applying styles. - `#I742732` - Now, pressing the Enter key on a video rendered within an `iframe` will no longer remove the video element from the DOM in the Rich Text Editor. - `#I744461` - Now, the inline toolbar opens properly when quickly selecting content in the editor and releasing the mouse outside the Rich Text Editor. - `#F67499` - Now, the Rich Text Editor font family and font size toolbar status update properly when the selection is made from right to left by releasing the mouse outside the Rich Text Editor. - `#I749159` - Now, the Rich Text Editor works properly when an image is pasted from the clipboard and the backspace key is pressed, ensuring the cursor remains in the correct position. - `#I750583` - Now, the Rich Text Editor works properly when backspacing text inside nested `<div>` elements. ## 30.1.42 (2025-07-29) ### RichTextEditor #### Bug Fixes - `#I747774` - Now, after deleting a table by removing its rows in the Rich Text Editor, the cursor is accurately positioned at the correct location. - `#I743536` - Now, the Rich Text Editor works properly when resizing tables without editor focus, correctly updating values. - `#F68651` - Now, the Rich Text Editor works properly when pressing the Shift + Enter key before an image, without throwing a script error. - `#I746733` - Now, the Clear Format action in the Rich Text Editor works properly by removing the highlighted background color from new lines. - `#I746844` - Now, the Rich Text Editor works properly by enforcing the character limit in code view, preventing users from exceeding the maximum allowed length. ## 30.1.40 (2025-07-15) ### RichTextEditor #### Bug Fixes - `#I742044` - Now, The issue with the inserted mention chip being removed when pressing the Enter key in the Rich Text Editor has now been resolved. ## 30.1.39 (2025-07-08) ### RichTextEditor #### Bug Fixes - `#I743184` - Now, tables are inserted properly in the Rich Text Editor without overlapping the placeholder text when the editor is not focused. - `#I733547` - Now, The issue with the setting Default in the FontSize toolbar doesn't reset the fontSize in the RichTextEditor has now been resolved. - `#I730015` - Now, The problem with the backspace key after inserting a colored `<span>` tag in the Rich Text Editor has been resolved. - `#I741641` - Now, The issue with the Slash Menu failing to execute item actions when `iframeSettings` is enabled in the Rich Text Editor has been resolved. ## 30.1.38 (2025-07-02) ### RichTextEditor #### Bug Fixes - `#I742990` - Now, images are inserted properly in the Rich Text Editor after enabling the toolbar dynamically. - `#I737320` - Now, when the Rich Text Editor value is dynamically modified, formatting actions will be correctly applied within the block node—even if the editor is not focused at the time of interaction. - `#I738301` - Now, The issue with the image upload popup appearing outside the Rich Text Editor when pasting images has now been resolved. - `#I740682` - Now, The issue with maximize shortcut does not work when code view is enabled in the Rich Text Editor, has now been resolved. - `#I733810` - Now, The tooltips and hover effects are shown when hovering over the toolbar items in disabled RichTextEditor, has now been resolved. - `#I738478` - Now, the aria-label modification works properly in the Rich Text Editor, ensuring persistent values even after reloading. - `#I740431` - Now, the Rich Text Editor works properly with enhanced protection against XSS security vulnerabilities, ensuring safer content editing and management. ## 30.1.37 (2025-06-25) ### RichTextEditor #### Bug Fixes - `#I733621` - Now, The issue with applying bold to the main bullet, which also affected sub-bullets in the Rich Text Editor, has now been resolved. - `#I733547` - Now, The issue with the setting Default in the FontSize toolbar does not reset the fontSize in the RichTextEditor has now been resolved. - `#I732468` - Now, The issue with arrow key navigation behaves incorrectly in pasted tables with in the Rich Text Editor has now been resolved. - `#I733361` - Now, The issue with the entire paragraph becomes a hyperlink when pasted after a link in the Rich Text Editor has now been resolved. #### Breaking Changes **Quick Toolbar Positioning Improvements** - **Enhanced positioning logic**: The Rich Text Editor's positioning system has been completely redesigned to prevent content from being hidden when editing tables and images. - **Default scroll behavior change**: The `actionOnScroll` property in `QuickToolbarSettings` has been changed from `hide` to `none` by default. - **Deprecated event arguments**: The `positionX` and `positionY` arguments in the `beforeQuickToolbarOpen` event have been deprecated and will be removed in future versions. - **Default items**: The default order of the items in Table, Image, Audio and Video quick toolbar has been changed. The quick toolbar items will appear on a single line by default. **Previous value** ```ts { actionOnScroll: 'hide', table: ['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'], image: ['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'Display', 'AltText', 'Dimension'], audio: ['AudioReplace', 'AudioRemove', 'AudioLayoutOption'], video: ['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension'] } ``` **New value** ```ts { actionOnScroll: 'none', table: ['TableHeader', 'TableRemove', '|', 'TableRows', 'TableColumns', '|', 'Styles', 'BackgroundColor', 'Alignments', 'TableCellVerticalAlign'], image: ['AltText', 'Caption', '|', 'Align', 'Display', '|', 'InsertLink', 'OpenImageLink', 'EditImageLink', 'RemoveImageLink', '|', 'Dimension', 'Replace', 'Remove'], audio: ['AudioLayoutOption', 'AudioReplace', 'AudioRemove'], video: ['VideoLayoutOption', 'VideoAlign', '|', 'VideoDimension', 'VideoReplace', 'VideoRemove'] } ``` #### Features - **Insert Code Block**: The Code Block feature allows users to insert formatted code snippets into the Rich Text Editor using a toolbar button or the `Ctrl+Shift+B` shortcut. A dropdown menu enables language selection for each code block, supporting options like **JavaScript**, **Python**, and **HTML**. This feature is fully customizable via the [languages](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/codeBlockSettings/#languages) property an array of objects defining the available programming languages and the [defaultLanguage](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/codeBlockSettings/#defaultLanguage) property, which sets the default language for newly inserted code blocks. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools). - **Insert Horizontal Line** - The Horizontal Line toolbar item enables users to insert a horizontal rule (`<hr>`) element into the Rich Text Editor with a single click on the dedicated toolbar button. This feature renders a divider line that spans the full width of the editor, helping to visually separate content sections and improve readability. To enable this option, add `horizontalLine` to the toolbar items configuration. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools). - **Bottom Toolbar** - The Bottom Toolbar feature introduces a fixed toolbar at the bottom of the Rich Text Editor, offering quick access to frequently used formatting tools. It enhances usability, especially in constrained layouts or on mobile devices, by providing a compact and accessible interface. The toolbar's position is configurable via the API using the [position](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#position) property, which accepts `ToolbarPosition.Top` or `ToolbarPosition.Bottom` enum to control the toolbar placement. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/bottom-toolbar). - **Popup Toolbar** - The Popup toolbar for the toolbar automatically relocates overflowing toolbar items into a popup container when there isn't enough space to display them, making it especially useful for constrained layouts or smaller screens. This behavior enhances usability while maintaining a clean and responsive editing experience. It can be configured via the API using the [type](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettings/#type) property, which accepts the [Popup](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarType/) enum value to enable this mode. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/types). - **MaxFileSize** - The MaxFileSize Support feature in the Rich Text Editor allows developers to configure a maximum file size limit for uploaded media files, including images, audio, and video, helping to validate uploads and prevent over sized content. This is achieved through the [`maxFileSize`](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/imageSettings/#maxFileSize) property and similar properties for audio and video uploads. By default, the limit is set to `30MB`, but it can be customized per media type to suit specific application requirements. - **Table row and column copy paste** - The Table Row or Column Copy, Cut, and Paste Support feature in the Rich Text Editor enhances table functionality by allowing users to efficiently copy, cut, and paste specific rows or columns using standard keyboard shortcuts `Ctrl+C`, `Ctrl+X`, `Ctrl+V`. This streamlines the editing process and enables quick duplication or reorganization of table data without the need for manual re-entry. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools). - **Enhance the quick toolbar** - The Enhanced Quick Toolbar offers improved integration with the editor's workflow by streamlining content creation and ensuring an uninterrupted editing experience. It provides better positioning and responsiveness, allowing users to access contextual tools seamlessly without distracting from the content, thereby enhancing overall usability and productivity. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools). - **Show recent color** - The Show Recent Color Support feature in the Rich Text Editor enhances the font color and background color pickers by displaying recently used colors, allowing users to quickly access and reuse them for consistent formatting. This improves efficiency and ensures visual uniformity across content. The feature is configurable via the [showRecentColors](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/fontColor/#showRecentColors) property a boolean that defaults to `true` enabling developers to toggle the recent colors panel in the color pickers to suit application preferences while maintaining an intuitive and streamlined editing experience. Please find the demo [here](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/tools). - **ClearUndoRedo** - The Clear undo redo in the Rich Text Editor, allows users to clear the undo and redo history through a dedicated action. This functionality is accessible via the [clearUndoRedo](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#clearUndoRedo) public method, which can be invoked programmatically to reset the history. ## 29.1.33 (2025-03-25) ### RichTextEditor #### Bug Fixes - `#I700161` - Now, pressing Backspace at the start of a line in content pasted from a Google document works properly. - `#694114` - Now, the Rich Text Editor works properly when creating tables inside lists. - `#696076` - Now, the Rich Text Editor works properly when using the select all with enter key functionality in Firefox. - `#I698253` - Now, the page remains responsive when removing inline code in the RichTextEditor. - `#I693061` - Now, the `characterCount` property works properly in the Rich Text Editor without creating excessive right margin space. - `#I699202` - Now, the placeholder in the Rich Text Editor works properly and disappears when inserting text using voice input. ## 28.2.11 (2025-03-11) ### RichTextEditor #### Bug Fixes - `#I694952` - Now, the change event works properly when the value changes in the Rich Text Editor. - `#I691323` - Now, the image caption is handled properly in the Rich Text Editor after posting. - `#I942836` - Now, the Rich Text Editor works properly when disabling the toolbar and resizing the editor. - `#I943056` - Now, the Rich Text Editor works properly when resizing the `iframe` editor and disabling the toolbar, preventing a script error on initial rendering. - `#I695002` - Now, the Rich Text Editor works properly when pasting content copied from Google Sheets. - `#I649583` - Now, the tooltip descriptions work properly when shortcut keys are displayed in a localized environment. ## 28.2.9 (2025-03-04) ### RichTextEditor #### Bug Fixes - `#I689382` - Now, the backspace functionality works correctly within the table after the mention chip. - `#I676899` - Now, the background color functionality works properly when applied to pasted content in the Rich Text Editor. - `#I691820` - Now, the backspace functionality works properly when applied to indented bullet lists in the Rich Text Editor. - `#I692332` - Now, the `shift + enter` functionality works properly when applied after an image with `<br>` tag in the Rich Text Editor. - `#I691812` - Now, pressing the backspace key twice within the table does not remove the table in the Rich Text Editor. - `#I691805` - Now, the "Insert Row Before Header" option works properly by being disabled or removed when trying to insert a row above the header. - `#I691770` - Now, the Rich Text Editor works properly when inserting a link to an image via the quick toolbar, with validation applied to empty values and spaces in the web address field. - `#I691792` - Now, the Rich Text Editor works properly when using the Insert Link popup, removing the validation error when a valid web address is entered after an initial error. ## 28.2.7 (2025-02-25) ### RichTextEditor #### Bug Fixes - `#I688646` - Now, the list will be removed when pressing backspace at the beginning of the text. - `#I688646` - Now, after applying a format using the `slash menu` in the Rich Text Editor, the toolbar updates correctly. - `#I688345` - Now, the cursor and backspace functionality work properly in the Rich Text Editor. - `#I687267` - Now, the screen reader works properly when navigating the color picker in the toolbar using the keyboard. ## 28.2.6 (2025-02-18) ### RichTextEditor #### Bug Fixes - `#I685085` - Now, the Rich Text Editor works properly when pressing the backspace key within list elements, and the list structure no longer collapses. - `#I682872` - Now, pressing `Shift + Enter` after selecting a video will no longer create a duplicate video in the Rich Text Editor. - `#F195768` - Now, the font size will be preserved for numbered and bulleted lists in the Rich Text Editor. - `#F195933` - Now, the Add Table popup works properly when using two Rich Text Editors. ## 28.2.5 (2025-02-11) ### RichTextEditor #### Bug Fixes - `#F195633` - Now, the change event will trigger when `Cmd+Backspace` is performed on a Mac. - `#I687260` - Now, the issue with the toolbar action not being applied to the selected text in the Rich Text Editor when using keyboard actions in the Safari browser has now been resolved. ## 28.2.4 (2025-02-04) ### RichTextEditor #### Bug Fixes - `#I677654` - Now, nested list content is cleaned up properly when the `backspace` key is pressed in the Rich Text Editor. - `#I674632` - Now, the `Shift` plus `Enter` keys work properly in the Rich Text Editor. - `#I680096` - Now, the shortcut key `Ctrl + Shift + H` works properly when frequently used to switch between Code View and Preview in the Rich Text Editor. - `#I677654` - Now, nested list content is cleaned up properly when the `backspace` key is pressed in the Rich Text Editor. - `#I684249`- Now, the issue has been resolved where pressing the backspace key at the beginning of a block element within a nested structure no longer results in unexpected wrapping with inline styles. - `#I588147` - Now, the text `&times` remains unchanged and is not converted to `x` in the Rich Text Editor, regardless of the insertion method used. - `#F195633` - Now, the change event will trigger when `Cmd+Backspace` is performed on a Mac. - `#I667013` - Now, the `Tab` key is now functioning properly within the list in the Rich Text Editor. ## 28.2.3 (2025-01-29) ### RichTextEditor #### Bug Fixes - `#I675751` - Now, the uploading popup closes properly after pasting multiple images in the Rich Text Editor. - `#I665117` - Now, a link is created properly for the entire selected text in the Rich Text Editor. ## 28.1.41 (2025-01-21) ### RichTextEditor #### Bug Fixes - `#I677837` - Now, the removal of the `div` element from the content when pressing the enter key followed by the backspace key has been resolved. - `#I680214` - Now, the console error thrown when the editor parent document has an `iframe` document with a different origin has been resolved. ## 28.1.39 (2024-01-14) ### RichTextEditor #### Bug Fixes - `#F64367` - Now, the Rich Text Editor toolbar works properly and maintains its state after focus is lost. - `#I668053` - Now, the placeholder in the Rich Text Editor works properly when the content contains two empty lines. - `#I636887` - Now, the insert link validation works properly when the display text is empty in the Rich Text Editor. - `#I621623` - Now, the paste performance of larger documents has been slightly improved. ## 28.1.38 (2025-01-07) ### RichTextEditor #### Bug Fixes - `#I668052` - Now, the Rich Text Editor works properly when using `Shift+Enter` while applying and removing formats such as bold, italic, and underline. - `#I642043` - Now, after pasting an image, the `afterPasteCleanup` event will be triggered properly. ## 28.1.37 (2024-12-31) ### RichTextEditor #### Bug Fixes - `#I665346` - Now, the table edit properties are applied properly without any errors when editing a table using the `TableEditProperties` quick toolbar option in the Rich Text Editor. - `#I659461` - Now, the link functionality works properly when pressing the `Enter` key in the Firefox browser in the Rich Text Editor. - `#I665113` - Now, performing the enter action at the beginning of the text in Firefox works correctly without generating any console errors. - `#I666517` - Now, the image `src` is updated properly when the `actionBegin` event argument is changed in the Rich Text Editor. - `#I664456` - Now, when the backspace key is pressed at the beginning of a line, it correctly merges only the adjacent lines instead of all lines in the Rich Text Editor. ## 28.1.36 (2024-12-24) ### RichTextEditor #### Bug Fixes - `#I647911` - Now, the display text with text wrapping functions correctly when the enter action is executed in the Rich Text Editor. - `#I664650` - Now, the font color and background color picker popup works properly in the Rich Text Editor. - `#I648421` - Now, the image shows properly when pasting from a Word document by removing the non-standard v:shapes attribute from the image element. - `#I640046` - Now, images are pasted properly without becoming blurry when copy pasting from Word and then focusing outside the Rich Text Editor. ## 28.1.35 (2024-12-18) ### RichTextEditor #### Bug Fixes - `#I658935` - Now, the `executeCommand` method works properly to replace the text wrapped inside a `<span>` element in the Rich Text Editor. - `#I660077` - Now, the emoji is inserted correctly at the cursor location, even after pressing Enter multiple times, when the `EnterKey` API is configured to use `<br>`. - `#I663039` - Now, the bullet type changes correctly without adding extra bullets when applying a bullet list without focusing on the Rich Text Editor. ## 28.1.33 (2024-12-12) ### RichTextEditor #### Bug Fixes - `#I656029` - Now, the link quick toolbar now opens properly in the `Firefox` browser when the link is inside a table in the Rich Text Editor. - `#I659319` - Now, the inline emoji picker popup now closes properly after certain characters when the `No Result Found` status is displayed in the Rich Text Editor. - `#I659591` - Now, the content now scrolls to the cursor position correctly when inserted through the `executeCommand` method in the Rich Text Editor. - `#I648421` - Now, enhanced the documentation for `imageUploadFailed` and `imageUploadSuccess` events in the Rich Text Editor to include detailed descriptions of the event parameters. - `#I657212` - Now, when adding an emoji before or after a URL, it will remain separate and will not be included in the link's display text. ## 27.1.48 (2024-09-18) ### RichTextEditor #### Features - **Inline Code**: this feature allow users to highlight small code snippets, commands, or keywords within text, making them stand out for clarity in Rich Text Editor. Explore the demos [here](https://ej2.syncfusion.com/demos/#/bootstrap5/rich-text-editor/tools.html). - **Import Export**: this feature allow users to export the Rich Text Editor's content into PDF or Word documents, as well as import Word content directly into the Rich Text Editor. Explore the demos [here](https://ej2.syncfusion.com/demos/#/bootstrap5/rich-text-editor/tools.html). - **Slash Menu**: Provided support for / character to open popup and then apply formats such as Headings, Lists and Open insert dialogs of Image, Links, Table and options to add custom commands. Explore the demos [here](https://ej2.syncfusion.com/demos/#/bootstrap5/rich-text-editor/tools.html). - **Inline Code**: this feature allow users to highlight small code snippets, commands, or keywords within text, making them stand out for clarity in Rich Text Editor. Explore the demos [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor/tools). - **Import Export**: this feature allow users to export the Rich Text Editor's content into PDF or Word documents, as well as import Word content directly into the Rich Text Editor. Explore the demos [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor/tools). - **Slash Menu**: Provided support for / character to open popup and then apply formats such as Headings, Lists and Open insert dialogs of Image, Links, Table and options to add custom commands. Explore the demos [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor/tools). #### Breaking Changes - Images saved on the server will no longer be automatically deleted when using keyboard or quick toolbar actions in the editor. This change is necessary because if the images are removed from the server, it would prevent the ability to perform undo/redo actions on them. - **Solution** : To handle image deletions properly, use the `afterImageDelete` event to capture the src of the deleted image. Then, send a request to your server to remove the image from storage, ensuring it is only deleted when explicitly intended. #### Bug Fixes - `#I627631` - Now, pressing the clear format when table is selected work properly in the Rich Text Editor. - `#I624158` - Now, typing `1.` after pressing `shift+enter` does not create a list item in the Rich Text Editor. - `#I621065` - Now, applying the multiple formats along with font-size format works properly by maintaining the font-size as priority. - `#I618955` - Now, Pasting images from the OTD word document file functions correctly in the Rich Text Editor. - `#I618955` - Now, Pasting content with images from Mac Outlook or Word into the Rich Text Editor now works properly in the Safari browser on Mac. - `#I624026` - Now, the `actionBegin` event will now be triggered when the numpad enter key is pressed. - `#I610932` - Now, Updating the image URL in the `actionBegin` event arguments will now correctly insert the new URL. - `#I621065` - Now, applying the multiple formats along with font-size format works properly by maintaining the font-size as priority. ## 26.2.11 (2024-08-27) ### RichTextEditor #### Bug Fixes - `#I618955` - Now, Pasting images from the OTD word document file functions correctly in the Rich Text Editor. - `#I623355` - Now, `decimal-leading-zero` list type is preserved correctly when pasting list content from MS Word in the Rich Text Editor - `#I621080` - Now, space key working properly when space key is pressed in the Rich Text Editor. - `#I609672` - Now, resolved the issue where pasted images were uploaded twice, currentTarget was null, and the success message popup appeared twice in the Rich Text Editor. - `#I621556` - Now, the cursor will be visible when pressing the enter key and reaches the bottom of the Rich Text Editor when the container element's height and scroll style are manually set. ## 26.2.9 (2024-08-13) ### RichTextEditor #### Bug Fixes - `#I612704` - Now, the continuous console error that was being thrown when the editor is destroyed is fixed. - `#I615533` - Now, The mention popup renders correctly when bold text is inserted in the Rich Text Editor. - `#I617144` - Now, Pressing the backspace or delete key functions correctly in the Chinese language Rich Text Editor. ## 26.2.8 (2024-08-06) ### RichTextEditor #### Bug Fixes - `#I614247` - Now, the change event will triggered properly when toggling the readonly mode. - `#I613965` - Now, backspace works properly inside the input field in the Rich Text Editor. - `#I612147` - Now, deleting the list content by selecting deletes only the selected list elements instead of the whole list in Rich Text Editor. - `#I605021` - Now, Copy and pasting justified content from desktop Word desktop works properly in Rich Text Editor - `#I572346` - Now, the mention tags should not be added within the span while pasting in the Rich Text Editor. ## 26.2.7 (2024-07-30) ### RichTextEditor #### Bug Fixes - `#I600937` - Now, the entered value works properly when typed in Korean in the Rich Text Editor. ## 26.2.4 (2024-07-24) ### RichTextEditor #### Bug Fixes - `#I609672` - Now, the `imageRemoving` event is triggered properly when we delete the pasted image when uploading from the upload popup in the Rich Text Editor. - `#I605021` - Now, pasting the content from the MS Word web application with alignment styles as justified works properly in Rich Text Editor. - `#I572346` - Now, the mention tags should not be added within the span while pasting in the Rich Text Editor. - `#I609672` - Now, the previously uploaded image is removed from the server when a new image is uploaded in the insert image dialog in the Rich Text Editor. - `#I609672` - Now, pasting an image into the Rich Text Editor in the Firefox browser from the local machine, the image will be uploaded properly. - `#I610812` - Now, the floating toolbar will work properly when the Rich Text Editor is rendered inside the dialog. ## 26.1.42 (2024-07-16) ### RichTextEditor #### Bug Fixes - `#I609924` - Now, the console error while closing the Grid Edit dialog with Rich Text Editor has now been resolved.. - `#I607525` - Now, the placeholder properly shows up after cleaning all the content in the Rich Text Editor. ## 26.1.41 (2024-07-09) ### RichTextEditor #### Bug Fixes - `#I585350` - Now, the list format is reverted properly when using the `executeCommand` method to apply and revert the list in the Rich Text Editor. - `#I571199` - Now, improved the memory performance of the Rich Text Editor. The Rich Text Editor instance will now be properly cleared when using the destroy method. ## 26.1.40 (2024-07-02) ### RichTextEditor #### Bug Fixes - `#I595611` - Now, localization texts work properly for the source code and preview tooltips in the Rich Text Editor. - `#I595571` - Now, inserting the table into the RichTextEditor works properly while using the quick toolbar settings in the editor. - `#I534515` - Now, the cursor position is maintained properly when inserting image caption text in the Rich Text Editor. - `#I598541` - Now, the quick toolbar in the Rich Text Editor works properly and does not get hidden behind the dialog. - `#F188888` - Now, when setting the `layoutOption` to 'Break' in the `insertVideoSettings`, the break is applied to the embedded video element in the Rich Text Editor. - `#I598973` - Now, when you paste a link and then click the `Shift+Enter`, it should not cause the page to collapse and the cursor to remain maintained properly. - `#I596139` - Now, the `afterPasteCleanup` event returns the proper values in the `Value`argument when pasting the image into the Rich Text Editor. - `#I597774` - Now, enabling and disabling the toolbar on the `focus` and `blur` events, respectively, doesn't bind the drop event multiple times, and it works properly. ## 26.1.38 (2024-06-19) ### RichTextEditor #### Bug Fixes - `#I593447` - Now, when the Rich Text Editor value is set to null, injecting the count module works properly. - `#I596042` - Now, pasting the content as plain text in the Rich Text Editor works properly without adding styles. - `#I595789` - Now, applying the quotation in the Rich Text Editor `markdown` mode works properly. - `#F188533` - Now, new lines between the text are deleted properly in the Rich Text Editor. - Now, fixed the issue with font color and the background color popup not opening in rare cases. - Now, the issue with the Editor instance not being properly destroyed inside the Scheduler Edit Template has been fixed. ## 26.1.35 (2024-06-11) ### RichTextEditor #### Features - **Table row and column selection**: Improved the selection of table rows and columns using the mouse or keyboard with Shift + arrow keys, setting the background color of the selected cells. Additionally, enabled table selection when pressing the backspace key after the table and the delete key before the table. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/fluent2/rich-text-editor/tools.html). - **Default Item in Font Family and Font Size**: Introducing `default` options for font family and font size. When no font family or font size is set for the selected text, it will be manually set to the default values. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/fluent2/rich-text-editor/tools.html). - `#I525279` - Added support for text formatting in selected table cells, allowing users to apply headings, paragraphs, lists, and inline formats such as bold, italic, and strikethrough to multiple cells at once. Enhanced backspace functionality for clearing selected table cell content. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/fluent2/rich-text-editor/tools.html). - **Table row and column selection**: Improved the selection of table rows and columns using the mouse or keyboard with Shift + arrow keys, setting the background color of the selected cells. Additionally, enabled table selection when pressing the backspace key after the table and the delete key before the table. - **Default Item in Font Family and Font Size**: Introducing `default` options for font family and font size. When no font family or font size is set for the selected text, it will be manually set to the default values. - `#I525279` - Added support for text formatting in selected table cells, allowing users to apply headings, paragraphs, lists, and inline formats such as bold, italic, and strikethrough to multiple cells at once. Enhanced backspace functionality for clearing selected table cell content. #### Bug Fixes - `#I583830` - Now, the `tab` key is working properly after inserting the mention list in the Rich Text Editor. - `#I572346` - Now, paste the mention tag into the Rich Text Editor, which works properly. - `#F58025` - Now, when the `cssClass` property is configured with more than one class, inserting a link into the Rich Text Editor works properly. - `#F58018` - Now, the Strikethrough toolbar item recognises the `s` tag in the RichTextEditor and highlight the toolbar item. - `#I583830` - Now, the `tab` key is working properly after inserting the mention list in the Rich Text Editor. - `#I572346` - Now, paste the mention tag into the Rich Text Editor, which works properly. #### Breaking Changes - The formats dropdown in the Rich Text Editor toolbar no longer includes the quotation option. Instead, a new blockquote icon has been introduced in the toolbar's default mode to facilitate applying blockquote. Additionally, the quotation can be added to the formats dropdown using the `formats` property. - Restructured the DOM element to enable flexible height for the editor area and toolbar by setting `display: flex;` on the first child of the Editor root element. **Old Element structure** ``` html <div id="editor" class="e-control e-richtexteditor"> <textarea name="editor" id="editor-value"></textarea> <div class="e-toolbar-wrapper"> <div class="e-rte-toolbar e-toolbar"></div> </div> <div class="e-rte-content"> <span class="e-rte-placeholder"></span> <div class="e-content"></div> <textarea class="e-rte-srctextarea"></textarea> </div> <span class="e-rte-character-count"></span> </div> ``` **New Element structure** ``` html <div id="editor" class="e-control e-richtexteditor"> <div class="e-rte-container"> <!-- display: flex;--> <textarea name="editor" id="editor-value"></textarea> <div class="e-toolbar-wrapper"> <div class="e-rte-toolbar e-toolbar"></div> </div> <div class="e-rte-content"> <!-- flex-grow: 1;--> <span class="e-rte-placeholder"></span> <div class="e-content"></div> </div> <div class="e-source-content"> <textarea class="e-rte-srctextarea"></textarea> </div> <span class="e-rte-character-count"></span> </div> </div> ``` - The formats dropdown in the Rich Text Editor toolbar no longer includes the quotation option. Instead, a new blockquote icon has been introduced in the toolbar's default mode to facilitate applying blockquote. Additionally, the quotation can be added to the formats dropdown using the `formats` property. - Restructured the DOM element to enable flexible height for the editor area and toolbar by setting `display: flex;` on the first child of the Editor root element. **Old Element structure** ``` html <ejs-richtexteditor id="editor" class="e-control e-richtexteditor"> <textarea name="editor" id="editor-value"></textarea> <div class="e-toolbar-wrapper"> <div class="e-rte-toolbar e-toolbar"></div> </div> <div class="e-rte-content"> <span class="e-rte-placeholder"></span> <div class="e-content"></div> <textarea class="e-rte-srctextarea"></textarea> </div> <span class="e-rte-character-count"></span> </ejs-richtexteditor> ``` **New Element structure** ``` html <ejs-richtexteditor id="editor" class="e-control e-richtexteditor"> <div class="e-rte-container"> <!-- display: flex;--> <textarea name="editor" id="editor-value"></textarea> <div class="e-toolbar-wrapper"> <div class="e-rte-toolbar e-toolbar"></div> </div> <div class="e-rte-content"> <!-- flex-grow: 1;--> <span class="e-rte-placeholder"></span> <div class="e-content"></div> </div> <div class="e-source-content"> <textarea class="e-rte-srctextarea"></textarea> </div> <span class="e-rte-character-count"></span> </div> </ejs-richtexteditor> ``` ## 25.2.7 (2024-06-04) ### RichTextEditor #### Bug Fixes - `#I590215` - Now, clicking the cancel and close icon of the insert image dialog while uploading the image will cancel the image uploading API request. - `#I592457` - Now, when pasting an image in an empty paragraph with a `br` tag inside, the `br` tag is removed after the image is pasted in the Rich Text Editor.. ## 25.2.6 (2024-05-28) ### RichTextEditor #### Bug Fixes - `#I588147` - Now, The text `&times` should not get converted into `x` when paste from the clipboard into the RichTextEditor. - `#I582501` - Now, the font size is pasted properly when we copy and paste from MS Word into RichTextEditor. - `#I586268` - Now, auto-numbering works properly with `enterKey` as `BR` in RichTextEditor. - `#I564770` - Now, the list type is applied properly to both the parent and the nest list while applying indents in the Rich Text Editor. - `#I586268` - Now, pressing the Enter key on the side of the image will work properly when `BR` is configured. ## 25.2.5 (2024-05-21) ### RichTextEditor #### Bug Fixes - `#I582303` - Now, the Tab key press on selected paragraph works properly in RichTextEditor. - `#F56019` - Now, pressing the enter key when the cursor is at the end of the empty list creates a new tag based on the `enterKey` property. - `#F186874` - Now, the background and font color popup's collision will function correctly upon initial click. ## 25.2.4 (2024-05-14) ### RichTextEditor #### Bug Fixes - `#I579605` - Now, the editor scrolls to the cursor position after pasting content into the editor. - `#I581468` - Now, improved the alignment of the pasted images and table content from the new outlook. - `I566845` - Now, when pasting images from `FSNotes`, the image is uploaded properly to the server in the Rich Text Editor. - `I564770` - Now, the list type is applied properly to both the parent and the nest list while applying indents in the Rich Text Editor. - `#I583830` - Now, the `tab` key is working properly after inserting the mention list in the Rich Text Editor. - `#I562280` - Now, alignment and indentation work properly when the `enterKey` property is configured as `BR`. - `#I584679` - Now, when the Refresh method is working properly, RichTextEditor is properly refreshed in the initial rendering. ## 25.1.42 (2024-04-30) ### RichTextEditor #### Bug Fixes - `#I581044` - Now, with the content pasted with a table as the last element, a newline will be inserted, and the focus will be maintained on a new line. - `#I573688` - Now, Bullet list into the Rich Text Editor when using `enterkey` as `BR` work's properly. - `#I579856` - Now, Bullet list not removed properly when using `enterKey` as `BR` in RichTextEditor work's properly. - `#I582707` - Now, a script error throws when clicking the font size toolbar in RichTextEditor works properly. ## 25.1.41 (2024-04-23) ### RichTextEd