# rich-text-editor-notes
> Rich text editor manages a notes list with add, delete, select, and save timestamp via two-way binding.
**Framework:** maui **Component:** rich-text-editor **Variant:** notes
## Get this item
**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:
```
GET https://ai.syncfusion.com/r/maui/rich-text-editor-notes.json
```
**Install Package(s)**
```bash
dotnet add package Syncfusion.Maui.RichTextEditor
```
**Notes**
- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md
## Source files
### src/components/rich-text-editor-notes/RichTextEditor.xaml
```xaml
```
### src/components/rich-text-editor-notes/RichTextEditor.xaml.cs
```cs
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace MauiApp1
{
public partial class MainPage : ContentPage
{
private readonly ObservableCollection notes = new();
private NoteModel? selectedNote;
private bool suppressEditorSync;
public MainPage()
{
InitializeComponent();
LoadSeedNotes();
NoteEditor.PropertyChanged += OnEditorPropertyChanged;
// Push the initial collection to the CollectionView.
NotesList.ItemsSource = notes;
selectedNote = notes.Count > 0 ? notes[0] : null;
NotesList.SelectedItem = selectedNote;
UpdateEditorFromSelection();
}
private void LoadSeedNotes()
{
notes.Add(new NoteModel(
"Welcome to Notes",
"Syncfusion",
"
Welcome!
" +
"
This is a simple RichTextEditor sample showing how to bind " +
"HTML content to the SfRichTextEditor control.
"));
}
// --- Editor <-> Model sync --------------------------------------------
private void OnEditorPropertyChanged(object? sender, PropertyChangedEventArgs e)
{
// SfRichTextEditor raises PropertyChanged for "HtmlText" whenever
// the user edits the document. Mirror that into the currently
// selected note so Save / Delete see the latest content.
if (suppressEditorSync) return;
if (e.PropertyName != nameof(Syncfusion.Maui.RichTextEditor.SfRichTextEditor.HtmlText)) return;
if (selectedNote is null) return;
selectedNote.HtmlContent = NoteEditor.HtmlText ?? string.Empty;
}
// --- CollectionView selection ----------------------------------------
private void OnNoteSelectedChanged(object? sender, SelectionChangedEventArgs e)
{
selectedNote = NotesList.SelectedItem as NoteModel;
UpdateEditorFromSelection();
}
private void UpdateEditorFromSelection()
{
// Header labels in the right-hand panel.
if (selectedNote is null)
{
SelectedTitleLabel.Text = "No note selected";
SelectedAuthorLabel.Text = string.Empty;
}
else
{
SelectedTitleLabel.Text = selectedNote.Title;
SelectedAuthorLabel.Text = string.IsNullOrEmpty(selectedNote.Author)
? string.Empty
: $"by {selectedNote.Author}";
}
// Push the selected note's HTML into the editor without echoing
// that assignment back into the model.
suppressEditorSync = true;
try
{
NoteEditor.HtmlText = selectedNote?.HtmlContent ?? string.Empty;
}
finally
{
suppressEditorSync = false;
}
}
// --- Command handlers (XAML Clicked events) ---------------------------
private void OnAddNoteClicked(object? sender, EventArgs e)
{
// Capture any in-flight edits before mutating the collection.
if (selectedNote is not null)
{
selectedNote.HtmlContent = NoteEditor.HtmlText ?? selectedNote.HtmlContent;
}
var note = new NoteModel("New Note", "You", "");
notes.Add(note);
selectedNote = note;
NotesList.SelectedItem = note;
UpdateEditorFromSelection();
}
private void OnDeleteNoteClicked(object? sender, EventArgs e)
{
if (selectedNote is null) return;
var index = notes.IndexOf(selectedNote);
notes.Remove(selectedNote);
if (notes.Count == 0)
{
selectedNote = null;
NotesList.SelectedItem = null;
}
else
{
var newIndex = Math.Max(0, Math.Min(index, notes.Count - 1));
var next = notes[newIndex];
selectedNote = next;
NotesList.SelectedItem = next;
}
UpdateEditorFromSelection();
}
private void OnSaveNoteClicked(object? sender, EventArgs e)
{
// Save = "bump the timestamp on the currently selected note".
if (selectedNote is null) return;
if (!suppressEditorSync)
{
selectedNote.HtmlContent = NoteEditor.HtmlText ?? selectedNote.HtmlContent;
}
selectedNote.CreatedAt = DateTime.Now;
// Force the list to re-template so the per-row CreatedAt label
// shows the new timestamp. Re-assigning ItemsSource is the
// simplest way without INotifyPropertyChanged on the model.
NotesList.ItemsSource = null;
NotesList.ItemsSource = notes;
NotesList.SelectedItem = selectedNote;
UpdateEditorFromSelection();
}
}
public class NoteModel
{
/// Display title for the note.
public string Title { get; set; } = string.Empty;
/// Author name for the note.
public string Author { get; set; } = string.Empty;
/// Timestamp the note was created / last saved.
public DateTime CreatedAt { get; set; } = DateTime.Now;
/// HTML body of the note, bound two-way to the editor.
public string HtmlContent { get; set; } = string.Empty;
public NoteModel() { }
public NoteModel(string title, string author, string htmlContent)
{
Title = title;
Author = author;
HtmlContent = htmlContent;
CreatedAt = DateTime.Now;
}
}
}
```