Skip to content

950682: Created UG Documentation for Format Painter in Blazor Rich Text Editor. #6151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jun 23, 2025

Conversation

KokilaSF4836
Copy link
Contributor

Bug description

960682 Create UG Documentation for Format Painter in Blazor Rich Text Editor

Root Cause / Analysis

The documentation for the Format Painter feature was not previously available in the Blazor section. It has now been added.

Reason for not identifying earlier

  • If any other reason, provide the details here.

1.The Format Painter feature was not implemented in Blazor during earlier documentation phases.

Is Breaking issue.?

NO

Is reported by customer in incident/forum.?

NO

Solution Description

1.Added the missing documentation for the Format Painter feature in the Blazor Rich Text Editor.

Areas affected and ensured

No areas were impacted by this change.

E2E report details against this fix

NA

Did you included unit test cases.?

No

Is there any API name changes.?

No

Reviewer Checklist

  • [] All provided information are reviewed and ensured.

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 1
File Path Error(s): 1
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 1
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0


This sample demonstrates how to enable the Format Painter tool in the Blazor Rich Text Editor and configure its behavior.

Customization options for the format painter are available through the [RichTextEditorFormatPainterSettings] property.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have already explained about the API and customization above, why again explaining it? So remove this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


The Rich Text Editor allows you to copy and apply text formatting using the Format Painter tool. You can enable and customize this feature using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) tag directive within the [SfRichTextEditor] component. The Format Painter tool can be accessed via the toolbar or using keyboard shortcuts to replicate formatting styles from one text block to another.

This sample demonstrates how to enable the Format Painter tool in the Blazor Rich Text Editor and configure its behavior.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are not having the sample right away, so why above content is given? Remove this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

# Format Painter

The Rich Text Editor allows you to copy and apply text formatting using the Format Painter tool. You can enable and customize this feature using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) tag directive within the [SfRichTextEditor] component. The Format Painter tool can be accessed via the toolbar or using keyboard shortcuts to replicate formatting styles from one text block to another.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the RichTextEditorFormatPainterSettings property.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, note that we don't need to use camel casing each time we mention the feature (format painter and not Format Painter)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


## Configuring format painter tool in toolbar

You can add the FormatPainter tool in the Rich Text Editor using the RichTextEditorToolbarSettings [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can add the FormatPainter tool in the Rich Text Editor using the RichTextEditorToolbarSettings.Items property.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


You can add the FormatPainter tool in the Rich Text Editor using the RichTextEditorToolbarSettings [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.

N> In Blazor, Rich Text Editor features are enabled using feature-specific child components. To use the Format Painter feature, include the [RichTextEditorFormatPainterSettings] directive within the [SfRichTextEditor] component.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no injectable module in the Blazor. Remove the above content

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


N> In Blazor, Rich Text Editor features are enabled using feature-specific child components. To use the Format Painter feature, include the [RichTextEditorFormatPainterSettings] directive within the [SfRichTextEditor] component.

By double-clicking the format painter toolbar button, [sticky] mode will be enabled. In sticky mode, the format painter will be disabled when the user clicks the [Escape] key again.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By double-clicking the format painter toolbar button, sticky mode will be enabled. In sticky mode, the format painter remains active until the Escape key is pressed again to disable it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


## Customizing copy and paste format

You can customize the format painter tool in the Rich Text Editor using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) tag directive within the [SfRichTextEditor] component. .
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove double full stop.

[SfRichTextEditor] what format is this in MD, without link it is not a valid format.

You can customize the format painter tool in the Rich Text Editor using the RichTextEditorFormatPainterSettings property.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@Syncfusion-CI
Copy link

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 1
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

<RichTextEditorToolbarSettings Items="@Tools" />
<h3>Format Painter in Rich Text Editor</h3><p>The <strong data-start="50" data-end="68">Format Painter</strong> allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.</p><h5>How to Use Format Painter?</h5>
<ul>
<li><strong>Select the text</strong> with the formatting you want to copy.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use the @bind-Value instead of innerHTML

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

</ul>
<h5>Why Use Format Painter?</h5>
<ul>
<li><strong>Saves time</strong> when formatting large documents.</li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use the @bind-Value instead of innerHTML

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

# Format Painter

The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) property.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you give the RichTextEditorFormatPainterSettings api link here? Refer the ShowRecentColor docs PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


For more details on keyboard navigation, refer to the [Keyboard support](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) documentation.

> The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>v</kbd> keyboard shortcut.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

There is not explained the ExecuteCommandAsync

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 3
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 2
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 2
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

new ToolbarItemModel() { Command = ToolbarCommand.Undo },
new ToolbarItemModel() { Command = ToolbarCommand.Redo },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the fullscreen

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

new ToolbarItemModel() { Command = ToolbarCommand.Undo },
new ToolbarItemModel() { Command = ToolbarCommand.Redo },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the full screen

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

@SyncfusionBuild
Copy link
Contributor

Build Status: INQUEUE 🕒
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

The running CI Job is terminated due to changes committed on the source branch for this Merge Request and CI triggered for latest commit.

@SyncfusionBuild
Copy link
Contributor

CI Status: ABORTED ❌
Source Compilation: Not Started ❌
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 3
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: FAILURE ❌
Source Compilation: SUCCESS ✅
Failure Reason: CI Failure with violation
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 2
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@SyncfusionBuild
Copy link
Contributor

Build Status: INPROGRESS 🔃
Build Location: 950682-Format-DV

@SyncfusionBuild
Copy link
Contributor

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 950682-Format-DV
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

@revanthKrishnan revanthKrishnan merged commit b0ccfcf into development Jun 23, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants