{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-notes",
  "framework": "maui",
  "type": "registry:component",
  "component": "rich-text-editor",
  "variant": "notes",
  "dependencies": [
    "Syncfusion.Maui.RichTextEditor"
  ],
  "description": "Rich text editor manages a notes list with add, delete, select, and save timestamp via two-way binding.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/maui/llms.txt",
    "skillPack": "syncfusion/maui-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/maui/rich-text-editor-notes.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-notes/RichTextEditor.xaml",
      "content": "<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<ContentPage xmlns=\"http://schemas.microsoft.com/dotnet/2021/maui\"\n             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\n             xmlns:syncfusion=\"clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer\"\n             xmlns:rte=\"clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor\"\n             x:Class=\"MauiApp1.MainPage\">\n\n    <Grid ColumnDefinitions=\"280, *\"\n          ColumnSpacing=\"12\"\n          Padding=\"12\">\n\n        <!-- LEFT: notes list with Add/Delete actions -->\n        <Border Grid.Column=\"0\"\n                Stroke=\"LightGrey\"\n                StrokeShape=\"RoundRectangle 12\"\n                StrokeThickness=\"1\"\n                Padding=\"8\">\n            <Grid RowDefinitions=\"Auto, *, Auto\" RowSpacing=\"8\">\n\n                <Label Grid.Row=\"0\"\n                       Text=\"My Notes\"\n                       FontSize=\"18\"\n                       FontAttributes=\"Bold\"\n                       Padding=\"4,0,0,0\" />\n\n                <CollectionView x:Name=\"NotesList\"\n                                Grid.Row=\"1\"\n                                SelectionMode=\"Single\"\n                                SelectionChanged=\"OnNoteSelectedChanged\">\n                    <CollectionView.ItemTemplate>\n                        <DataTemplate>\n                            <Border Padding=\"10\"\n                                    Margin=\"2\"\n                                    Stroke=\"Transparent\"\n                                    BackgroundColor=\"{AppThemeBinding Light=#F4F4F8, Dark=#2A2A2A}\"\n                                    StrokeShape=\"RoundRectangle 8\">\n                                <VerticalStackLayout Spacing=\"2\">\n                                    <Label Text=\"{Binding Title}\"\n                                           FontSize=\"14\"\n                                           FontAttributes=\"Bold\"\n                                           LineBreakMode=\"TailTruncation\" />\n                                    <Label Text=\"{Binding Author, StringFormat='by {0}'}\"\n                                           FontSize=\"11\"\n                                           Opacity=\"0.7\" />\n                                    <Label Text=\"{Binding CreatedAt, StringFormat='{0:MMM d, yyyy h:mm tt}'}\"\n                                           FontSize=\"10\"\n                                           Opacity=\"0.5\" />\n                                </VerticalStackLayout>\n                            </Border>\n                        </DataTemplate>\n                    </CollectionView.ItemTemplate>\n                </CollectionView>\n\n                <HorizontalStackLayout Grid.Row=\"2\" Spacing=\"8\">\n                    <Button Text=\"Add\"\n                            Clicked=\"OnAddNoteClicked\" />\n                    <Button Text=\"Delete\"\n                            Clicked=\"OnDeleteNoteClicked\" />\n                </HorizontalStackLayout>\n            </Grid>\n        </Border>\n\n        <!-- RIGHT: RichTextEditor showing the selected note's HtmlContent -->\n        <Border Grid.Column=\"1\"\n                Stroke=\"LightGrey\"\n                StrokeShape=\"RoundRectangle 12\"\n                StrokeThickness=\"1\"\n                Padding=\"0\">\n            <Grid RowDefinitions=\"Auto, *\" RowSpacing=\"0\">\n\n                <Grid Grid.Row=\"0\"\n                      Padding=\"12,8\"\n                      ColumnDefinitions=\"*, Auto\"\n                      BackgroundColor=\"{AppThemeBinding Light=#F8F8FB, Dark=#1F1F1F}\">\n                    <VerticalStackLayout Grid.Column=\"0\" Spacing=\"2\">\n                        <Label x:Name=\"SelectedTitleLabel\"\n                               Text=\"No note selected\"\n                               FontSize=\"16\"\n                               FontAttributes=\"Bold\" />\n                        <Label x:Name=\"SelectedAuthorLabel\"\n                               FontSize=\"12\"\n                               Opacity=\"0.7\" />\n                    </VerticalStackLayout>\n\n                    <Button Grid.Column=\"1\"\n                            Text=\"Save\"\n                            Clicked=\"OnSaveNoteClicked\" />\n                </Grid>\n\n                <rte:SfRichTextEditor x:Name=\"NoteEditor\"\n                                      Grid.Row=\"1\"\n                                      Placeholder=\"Start typing your note...\"\n                                      ToolbarPosition=\"Bottom\"\n                                      VerticalOptions=\"Fill\">\n                    <rte:SfRichTextEditor.ToolbarItems>\n                        <rte:RichTextToolbarItem Type=\"Bold\" />\n                        <rte:RichTextToolbarItem Type=\"Italic\" />\n                        <rte:RichTextToolbarItem Type=\"Underline\" />\n                        <rte:RichTextToolbarItem Type=\"Separator\" />\n                        <rte:RichTextToolbarItem Type=\"FontFamily\" />\n                        <rte:RichTextToolbarItem Type=\"FontSize\" />\n                        <rte:RichTextToolbarItem Type=\"Separator\" />\n                        <rte:RichTextToolbarItem Type=\"BulletList\" />\n                        <rte:RichTextToolbarItem Type=\"NumberList\" />\n                        <rte:RichTextToolbarItem Type=\"Separator\" />\n                        <rte:RichTextToolbarItem Type=\"Alignment\" />\n                        <rte:RichTextToolbarItem Type=\"ParagraphFormat\" />\n                        <rte:RichTextToolbarItem Type=\"Separator\" />\n                        <rte:RichTextToolbarItem Type=\"Hyperlink\" />\n                        <rte:RichTextToolbarItem Type=\"Image\" />\n                    </rte:SfRichTextEditor.ToolbarItems>\n                </rte:SfRichTextEditor>\n            </Grid>\n        </Border>\n    </Grid>\n\n</ContentPage>\n"
    },
    {
      "target": "src/components/rich-text-editor-notes/RichTextEditor.xaml.cs",
      "content": "using System.Collections.ObjectModel;\nusing System.ComponentModel;\n\nnamespace MauiApp1\n{\n    public partial class MainPage : ContentPage\n    {\n        private readonly ObservableCollection<NoteModel> notes = new();\n        private NoteModel? selectedNote;\n        private bool suppressEditorSync;\n        public MainPage()\n        {\n            InitializeComponent();\n            LoadSeedNotes();\n            NoteEditor.PropertyChanged += OnEditorPropertyChanged;\n\n            // Push the initial collection to the CollectionView.\n            NotesList.ItemsSource = notes;\n            selectedNote = notes.Count > 0 ? notes[0] : null;\n            NotesList.SelectedItem = selectedNote;\n            UpdateEditorFromSelection();\n        }\n        private void LoadSeedNotes()\n        {\n            notes.Add(new NoteModel(\n                \"Welcome to Notes\",\n                \"Syncfusion\",\n                \"<p><strong>Welcome!</strong></p>\" +\n                \"<p>This is a <em>simple</em> RichTextEditor sample showing how to bind \" +\n                \"HTML content to the <strong>SfRichTextEditor</strong> control.</p>\" +\n                \"<ul><li>Bold, italic, underline</li><li>Bullet and numbered lists</li>\" +\n                \"<li>Hyperlinks and images</li></ul>\"));\n\n            notes.Add(new NoteModel(\n                \"Project Kickoff\",\n                \"Ivy\",\n                \"<p>Project kickoff is scheduled for <strong>August 19</strong>.</p>\" +\n                \"<p>Deliverables are due by <em>September 30</em>.</p>\"));\n\n            notes.Add(new NoteModel(\n                \"Meeting Summary\",\n                \"Frank\",\n                \"<p><u>Weekly Sync</u></p>\" +\n                \"<ol><li>Reviewed last week's progress</li>\" +\n                \"<li>Discussed blockers for the RichTextEditor toolbar</li>\" +\n                \"<li>Planned next iteration</li></ol>\"));\n        }\n\n        // --- Editor <-> Model sync --------------------------------------------\n\n        private void OnEditorPropertyChanged(object? sender, PropertyChangedEventArgs e)\n        {\n            // SfRichTextEditor raises PropertyChanged for \"HtmlText\" whenever\n            // the user edits the document. Mirror that into the currently\n            // selected note so Save / Delete see the latest content.\n            if (suppressEditorSync) return;\n            if (e.PropertyName != nameof(Syncfusion.Maui.RichTextEditor.SfRichTextEditor.HtmlText)) return;\n            if (selectedNote is null) return;\n\n            selectedNote.HtmlContent = NoteEditor.HtmlText ?? string.Empty;\n        }\n\n        // --- CollectionView selection ----------------------------------------\n\n        private void OnNoteSelectedChanged(object? sender, SelectionChangedEventArgs e)\n        {\n            selectedNote = NotesList.SelectedItem as NoteModel;\n            UpdateEditorFromSelection();\n        }\n\n        private void UpdateEditorFromSelection()\n        {\n            // Header labels in the right-hand panel.\n            if (selectedNote is null)\n            {\n                SelectedTitleLabel.Text = \"No note selected\";\n                SelectedAuthorLabel.Text = string.Empty;\n            }\n            else\n            {\n                SelectedTitleLabel.Text = selectedNote.Title;\n                SelectedAuthorLabel.Text = string.IsNullOrEmpty(selectedNote.Author)\n                    ? string.Empty\n                    : $\"by {selectedNote.Author}\";\n            }\n\n            // Push the selected note's HTML into the editor without echoing\n            // that assignment back into the model.\n            suppressEditorSync = true;\n            try\n            {\n                NoteEditor.HtmlText = selectedNote?.HtmlContent ?? string.Empty;\n            }\n            finally\n            {\n                suppressEditorSync = false;\n            }\n        }\n\n        // --- Command handlers (XAML Clicked events) ---------------------------\n\n        private void OnAddNoteClicked(object? sender, EventArgs e)\n        {\n            // Capture any in-flight edits before mutating the collection.\n            if (selectedNote is not null)\n            {\n                selectedNote.HtmlContent = NoteEditor.HtmlText ?? selectedNote.HtmlContent;\n            }\n\n            var note = new NoteModel(\"New Note\", \"You\", \"<p></p>\");\n            notes.Add(note);\n            selectedNote = note;\n            NotesList.SelectedItem = note;\n            UpdateEditorFromSelection();\n        }\n\n        private void OnDeleteNoteClicked(object? sender, EventArgs e)\n        {\n            if (selectedNote is null) return;\n\n            var index = notes.IndexOf(selectedNote);\n            notes.Remove(selectedNote);\n\n            if (notes.Count == 0)\n            {\n                selectedNote = null;\n                NotesList.SelectedItem = null;\n            }\n            else\n            {\n                var newIndex = Math.Max(0, Math.Min(index, notes.Count - 1));\n                var next = notes[newIndex];\n                selectedNote = next;\n                NotesList.SelectedItem = next;\n            }\n\n            UpdateEditorFromSelection();\n        }\n\n        private void OnSaveNoteClicked(object? sender, EventArgs e)\n        {\n            // Save = \"bump the timestamp on the currently selected note\".\n            if (selectedNote is null) return;\n            if (!suppressEditorSync)\n            {\n                selectedNote.HtmlContent = NoteEditor.HtmlText ?? selectedNote.HtmlContent;\n            }\n            selectedNote.CreatedAt = DateTime.Now;\n\n            // Force the list to re-template so the per-row CreatedAt label\n            // shows the new timestamp. Re-assigning ItemsSource is the\n            // simplest way without INotifyPropertyChanged on the model.\n            NotesList.ItemsSource = null;\n            NotesList.ItemsSource = notes;\n            NotesList.SelectedItem = selectedNote;\n            UpdateEditorFromSelection();\n        }\n    }\n\n    public class NoteModel\n    {\n        /// <summary>Display title for the note.</summary>\n        public string Title { get; set; } = string.Empty;\n\n        /// <summary>Author name for the note.</summary>\n        public string Author { get; set; } = string.Empty;\n\n        /// <summary>Timestamp the note was created / last saved.</summary>\n        public DateTime CreatedAt { get; set; } = DateTime.Now;\n\n        /// <summary>HTML body of the note, bound two-way to the editor.</summary>\n        public string HtmlContent { get; set; } = string.Empty;\n\n        public NoteModel() { }\n\n        public NoteModel(string title, string author, string htmlContent)\n        {\n            Title = title;\n            Author = author;\n            HtmlContent = htmlContent;\n            CreatedAt = DateTime.Now;\n        }\n    }\n}\n"
    }
  ]
}