TextToolbar for RichEditBox

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -382,6 +382,8 @@
     <Content Include="SamplePages\Carousel\CarouselCode.bind" />
     <Content Include="SamplePages\AlignmentGrid\AlignmentGridXaml.bind" />
     <Content Include="SamplePages\FocusTracker\FocusTrackerXaml.bind" />
+    <Content Include="SamplePages\TextToolbar\TextToolbar.bind" />
+    <Content Include="SamplePages\TextToolbar\TextToolbarCode.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">
@@ -406,9 +408,12 @@
       <DependentUpon>FocusTrackerPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="SamplePages\BackgroundTaskHelper\TestBackgroundTask.cs" />
+    <Compile Include="SamplePages\TextToolbar\TextToolbarPage.xaml.cs">
+      <DependentUpon>TextToolbarPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\ViewExtensions\ViewExtensionsPage.xaml.cs">
       <DependentUpon>ViewExtensionsPage.xaml</DependentUpon>
-      </Compile>
+    </Compile>
     <Compile Include="SamplePages\Carousel\CarouselPage.xaml.cs">
       <DependentUpon>CarouselPage.xaml</DependentUpon>
     </Compile>
@@ -642,6 +647,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SamplePages\TextToolbar\TextToolbarPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\ViewExtensions\ViewExtensionsPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar/TextToolbar.bind

@@ -0,0 +1,33 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TextToolbarPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:common="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+  <Grid x:Name="MainGrid" RequestedTheme="Light" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Pivot>
+      <PivotItem Header="Edit">
+        <Grid>
+          <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition />
+          </Grid.RowDefinitions>
+          <controls:TextToolbar x:Name="Toolbar" Editor="{x:Bind EditZone}" Background="#4C4F4F4F" />
+          <RichEditBox x:Name="EditZone"
+                       TextWrapping="Wrap"
+                       TextChanged="EditZone_TextChanged"
+                       VerticalContentAlignment="Stretch"
+                       Grid.Row="1"
+                       Background="{x:Null}"
+                       BorderBrush="{x:Null}" />
+        </Grid>
+      </PivotItem>
+      <PivotItem Header="Preview">
+        <controls:MarkdownTextBlock x:Name="Previewer" LinkClicked="Previewer_LinkClicked" />
+      </PivotItem>
+    </Pivot>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar/TextToolbarCode.bind

@@ -0,0 +1,14 @@
+private void EditZone_TextChanged(object sender, RoutedEventArgs e)
+{
+  string text = Toolbar.Formatter.Text;
+  Previewer.Text = string.IsNullOrWhiteSpace(text) ? "Nothing to Preview" : text;
+}
+
+private void Previewer_LinkClicked(object sender, LinkClickedEventArgs e)
+{
+  try
+  {
+    var linkOpen = Task.Run(() => Launcher.LaunchUriAsync(new Uri(e.Link)));
+  }
+  catch { }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar/TextToolbarPage.xaml

@@ -0,0 +1,33 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TextToolbarPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:common="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Grid x:Name="MainGrid" RequestedTheme="Light" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <Pivot>
+            <PivotItem Header="Edit">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition />
+                    </Grid.RowDefinitions>
+                    <controls:TextToolbar x:Name="Toolbar" Editor="{x:Bind EditZone}" Background="#4C4F4F4F" />
+                    <RichEditBox x:Name="EditZone"
+                                 TextWrapping="Wrap"
+                                 TextChanged="EditZone_TextChanged"
+                                 VerticalContentAlignment="Stretch"
+                                 Grid.Row="1"
+                                 Background="{x:Null}"
+                                 BorderBrush="{x:Null}" />
+                </Grid>
+            </PivotItem>
+            <PivotItem Header="Preview">
+                <controls:MarkdownTextBlock x:Name="Previewer" LinkClicked="Previewer_LinkClicked" Canvas.ZIndex="99" />
+            </PivotItem>
+        </Pivot>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TextToolbar/TextToolbarPage.xaml.cs

@@ -0,0 +1,96 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    using System;
+    using System.Threading.Tasks;
+    using Microsoft.Toolkit.Uwp.UI.Controls;
+    using Microsoft.Toolkit.Uwp.UI.Controls.TextToolbarButtons;
+    using Microsoft.Toolkit.Uwp.UI.Controls.TextToolbarFormats;
+    using Windows.System;
+    using Windows.UI.Xaml;
+    using Windows.UI.Xaml.Controls;
+    using Windows.UI.Xaml.Navigation;
+
+    public sealed partial class TextToolbarPage
+    {
+        public TextToolbarPage()
+        {
+            InitializeComponent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            base.OnNavigatedTo(e);
+
+            Shell.Current.RegisterNewCommand("Switch Theme", (sender, args) =>
+            {
+                MainGrid.RequestedTheme = MainGrid.RequestedTheme == ElementTheme.Light ? ElementTheme.Dark : ElementTheme.Light;
+            });
+
+            Shell.Current.RegisterNewCommand("Remove Code Button", (sender, args) =>
+            {
+                Toolbar.RemoveDefaultButton(DefaultButton.OfType(DefaultButton.ButtonType.Code));
+            });
+
+            Shell.Current.RegisterNewCommand("Add Custom Button", (sender, args) =>
+            {
+                AddCustomButton();
+            });
+        }
+
+        private int DemoCounter { get; set; } = 0;
+
+        private void AddCustomButton()
+        {
+            string demoText = "Demo";
+            demoText = DemoCounter > 0 ? demoText + DemoCounter : demoText;
+            DemoCounter++;
+
+            var demoButton = new ToolbarButton
+            {
+                Icon = new SymbolIcon { Symbol = Symbol.ReportHacked },
+                ToolTip = demoText
+            };
+            demoButton.Click += (s, e) =>
+            {
+                if (Toolbar.Formatter is MarkDownFormatter md)
+                {
+                    md.SetSelection($"[{demoText}]", $"[/{demoText}]");
+                }
+            };
+
+            Toolbar.CustomButtons = new ButtonMap
+            {
+                demoButton
+            };
+        }
+
+        private void EditZone_TextChanged(object sender, RoutedEventArgs e)
+        {
+            string text = Toolbar.Formatter.Text;
+            Previewer.Text = string.IsNullOrWhiteSpace(text) ? "Nothing to Preview" : text;
+        }
+
+        private void Previewer_LinkClicked(object sender, LinkClickedEventArgs e)
+        {
+            try
+            {
+                var linkOpen = Task.Run(() => Launcher.LaunchUriAsync(new Uri(e.Link)));
+            }
+            catch
+            {
+            }
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -11,6 +11,13 @@
         "XamlCodeFile": "CarouselCode.bind",
         "Icon": "/SamplePages/Carousel/Carousel.png"
       },
+      {
+        "Name": "TextToolbar",
+        "Type": "TextToolbarPage",
+        "About": "Toolbar for Editing Text attached to a RichEditBox",
+        "XamlCodeFile": "TextToolbar.bind",
+        "CodeFile": "TextToolbarCode.bind"
+      },
       {
         "Name": "AdaptiveGridView",
         "Type": "AdaptiveGridViewPage",

Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj

@@ -120,11 +120,27 @@
     <Compile Include="TextBoxRegex\TextBoxRegex.Data.cs" />
     <Compile Include="TextBoxRegex\TextBoxRegex.Properties.cs" />
     <Compile Include="TextBoxRegex\TextBoxRegex.cs" />
+    <Compile Include="TextToolbar\Formats\Format.cs" />
+    <Compile Include="TextToolbar\Formats\Formatter.cs" />
+    <Compile Include="TextToolbar\Formats\MarkDownFormatter.cs" />
+    <Compile Include="TextToolbar\Formats\RichTextFormatter.cs" />
+    <Compile Include="TextToolbar\TextToolbar.cs" />
+    <Compile Include="TextToolbar\TextToolbar.Events.cs" />
+    <Compile Include="TextToolbar\TextToolbar.Labels.cs" />
+    <Compile Include="TextToolbar\TextToolbar.Properties.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\ButtonMap.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\CommonButtons.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\CommonButtons.Events.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\DefaultButton.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\IToolbarItem.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\ToolbarButton.cs" />
+    <Compile Include="TextToolbar\ToolbarItems\ToolbarSeparator.cs" />
     <Compile Include="TileControl\TileControl.cs" />
     <Compile Include="WrapPanel\WrapPanel.cs" />
     <Compile Include="WrapPanel\WrapPanel.Data.cs" />
     <None Include="Microsoft.Toolkit.Uwp.UI.Controls.ruleset" />
     <None Include="project.json" />
+    <Content Include="TextToolbar\Font\FontAwesome.otf" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="ControlHelpers.Composition.cs" />
@@ -198,6 +214,18 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="TextToolbar\TextToolbar.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="TextToolbar\ToolbarItems\ToolbarSeparator.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="TextToolbar\ToolbarItems\ToolbarButton.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="TileControl\TileControl.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/Formats/Format.cs

@@ -0,0 +1,32 @@
+// ******************************************************************
+// Copyright (c) Microsoft. All rights reserved.
+// This code is licensed under the MIT License (MIT).
+// THE CODE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+// THE CODE OR THE USE OR OTHER DEALINGS IN THE CODE.
+// ******************************************************************
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.TextToolbarFormats
+{
+    public enum Format
+    {
+        /// <summary>
+        /// Utilises the Built-In Markdown Fomatter
+        /// </summary>
+        MarkDown,
+
+        /// <summary>
+        /// Utilises the Built-In RichText Fomatter
+        /// </summary>
+        RichText,
+
+        /// <summary>
+        /// Utilises the provided Custom Formatter using the Formatter Property
+        /// </summary>
+        Custom
+    }
+}