Changing XAML editor to use Monaco editor

src/Uno.Playground.Shared/SamplePage.xaml

@@ -9,7 +9,7 @@
 	  mc:Ignorable="d ios">
 
 	<Grid Background="{StaticResource Color01Brush}"		  
-		  toolkit:VisibleBoundsPadding.PaddingMask="Bottom">
+		  >
 		<Grid.RowDefinitions>
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="*" />

src/Uno.Playground.Shared/Samples/Form.xaml

@@ -9,7 +9,8 @@
 	  mc:Ignorable="">
 
 
-	<ScrollViewer toolkit:VisibleBoundsPadding.PaddingMask="All">
+	<ScrollViewer
+		>
 		<Grid Background="{StaticResource Color01Brush}">
 			<Grid.RowDefinitions>
 				<RowDefinition Height="Auto" />
@@ -52,4 +53,4 @@
 			</StackPanel>
 		</Grid>
 	</ScrollViewer>
-</Page>
+</Page>

src/Uno.Playground.Shared/Samples/Homies.xaml

@@ -289,7 +289,6 @@
 
 		<!-- MY FEED -->
 		<ListView Grid.Row="2"
-				  toolkit:VisibleBoundsPadding.PaddingMask="Bottom"
 				  Padding="0,4"
 				  x:Name="feedListView"
 				  ItemsSource="{Binding FeedPosts}"

src/Uno.Playground.Shared/Samples/Playground.xaml

@@ -8,6 +8,7 @@
 	  xmlns:wasm="http://uno.ui/wasm"
 	  xmlns:ios="http://uno.ui/ios"
 	  xmlns:android="http://uno.ui/android"
+	  xmlns:monaco="using:Monaco"
 	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	  mc:Ignorable="d wasm ios android">
 
@@ -37,7 +38,6 @@
 	</Page.Resources>
 
 	<Grid Background="#242424"
-		  toolkit:VisibleBoundsPadding.PaddingMask="Top"
 		  Name="root">
 		<Grid.RowDefinitions>
 			<RowDefinition Height="72"
@@ -321,10 +321,33 @@
 							</TextBlock>
 
 						</Grid>
-						<local:CodeBox x:Name="xamlText"
+
+						<Grid Grid.Row="1" >
+							<!--<Grid.RowDefinitions>
+								<RowDefinition />
+								<RowDefinition />
+							</Grid.RowDefinitions>-->
+							<monaco:CodeEditor
+								x:Name="xamlText"
+                           Background="Transparent"
+							Margin="4"
+							Grid.Row="0" 
+                           HasGlyphMargin="True"
+                           CodeLanguage="csharp"/>
+                           <!--KeyDown="Editor_KeyDown"
+                           GotFocus="Editor_GotFocus"
+                           LostFocus="Editor_LostFocus"
+                           Text="{x:Bind CodeContent, Mode=TwoWay}"
+                           Options="{x:Bind options, Mode=OneWay}">-->
+
+							<!--<local:CodeBox x:Name="xamlText"
 									   Background="Transparent"
 									   Margin="4"
-									   Grid.Row="1" />
+									   Grid.Row="1" />-->
+						</Grid>
+
+
+
 					</Grid>
 
 					<Grid Name="dataContextPane"
@@ -347,6 +370,7 @@
 									   VerticalAlignment="Center"
 									   Foreground="#eeeeee" />
 						</Border>
+
 						<local:CodeBox x:Name="jsonDataContext"
 									   Background="Transparent"
 									   Margin="4"

src/Uno.Playground.Shared/Samples/Playground.xaml.cs

@@ -34,6 +34,10 @@
 using Uno.Logging;
 using Uno.UI.Demo.Behaviors;
 using Uno.UI.Toolkit;
+using Monaco.Languages;
+using Monaco.Editor;
+using Monaco;
+using System.Threading;
 
 namespace Uno.UI.Demo.Samples
 {
@@ -61,7 +65,10 @@ public Playground()
 
 			Loaded += Playground_Loaded;
 
-			xamlText.TextChanged += OnTextChanged;
+			xamlText.PropertyChanged += OnPropertyChanged;
+			xamlText.Loaded += OnEditorLoaded;
+			xamlText.Loading += OnEditorLoading;
+
 			jsonDataContext.TextChanged += OnDataContextTextChanged;
 
 			content.SizeChanged += (snd, args) =>
@@ -79,7 +86,10 @@ public Playground()
 #endif
 			InputPane.GetForCurrentView().Showing += OnInputPaneShowing;
 			InputPane.GetForCurrentView().Hiding += OnInputPaneHiding; ;
+
+
 		}
+
 		private void OnInputPaneShowing(InputPane sender, InputPaneVisibilityEventArgs args)
 		{
 			VisibleBoundsPadding.SetPaddingMask(TabsPane, VisibleBoundsPadding.PaddingMask.Top);
@@ -214,7 +224,7 @@ ...or pick a snippet in the menu. -->
 
 			LaunchUpdate();
 #endif
-					await LoadSamples();
+					//await LoadSamples();
 		}
 
 		private static readonly Regex CommentStripperRegex = new Regex(@"(/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/)|(//.*)");
@@ -259,6 +269,27 @@ private void OnExpandoChanged(object sender, PropertyChangedEventArgs e)
 			jsonDataContext.Text = data;
 		}
 
+		private async void OnEditorLoading(object sender, RoutedEventArgs e)
+		{
+			await xamlText.Languages.RegisterCompletionItemProviderAsync("xml", new XamlLanguageProvider());
+		}
+
+		private async void OnEditorLoaded(object sender, RoutedEventArgs e)
+		{
+			xamlText.CodeLanguage = "xml";
+			await LoadSamples();
+		}
+
+		private void OnPropertyChanged(object sender, PropertyChangedEventArgs e )
+		{
+			Console.WriteLine("Property: " + e.PropertyName);
+			if (e.PropertyName == "Text")
+			{
+				OnTextChanged(sender, null);
+			}
+		}
+
+
 		private void OnTextChanged(object sender, TextChangedEventArgs e)
 		{
 			_lastChange = DateTimeOffset.Now;
@@ -370,16 +401,19 @@ private async Task Update()
 			}
 		}
 
+		/// When parsing XAML we need to prepend a Grid element (see GetXamlInput) which adds lines to the start
+		/// of the XAML, causing any errors to be off by that many lines
+		private int GetXamlPrefixLineCount => 4;
 		private string GetXamlInput()
 		{
-			return string.Concat(
-				@"<Grid
-					xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
-					xmlns:x= ""http://schemas.microsoft.com/winfx/2006/xaml""
-					xmlns:behaviors=""using:Uno.UI.Demo.Behaviors"">",
-				xamlText.Text,
-				"\n</Grid>"
-			);
+			Console.WriteLine("Current text: " + xamlText.Text);
+			return 
+$@"<Grid
+	xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
+	xmlns:x= ""http://schemas.microsoft.com/winfx/2006/xaml""
+	xmlns:behaviors=""using:Uno.UI.Demo.Behaviors"">
+{xamlText.Text}
+</Grid>";
 		}
 
 		private static readonly string _appName =
@@ -421,7 +455,7 @@ private async void ShowHint()
 
 		private void SetLink(string id, bool clipboard = false)
 		{
-			var url = new Uri($"{PlaygroundUrl}#{Uri.EscapeUriString(id)}");
+			var url = new System.Uri($"{PlaygroundUrl}#{System.Uri.EscapeUriString(id)}");
 			if (clipboard)
 			{
 				var clipboardData = new DataPackage();
@@ -459,7 +493,7 @@ private async Task LoadSample(string id)
 					xamlText.Text = "<!-- loading... -->";
 					jsonDataContext.Text = "/* loading... */";
 
-					var response = await httpClient.GetAsync($"{BaseApiUrl}/{Uri.EscapeUriString(id)}");
+					var response = await httpClient.GetAsync($"{BaseApiUrl}/{System.Uri.EscapeUriString(id)}");
 					var responsePayload = await response.Content.ReadAsStringAsync();
 					var json = JObject.Parse(responsePayload);
 
@@ -536,24 +570,53 @@ private void AutoUpdate_OnChecked(object sender, RoutedEventArgs e)
 
 		private void Update_OnTapped(object sender, RoutedEventArgs e)
 		{
+			SetCodeDirtyState();
 			LaunchUpdate();
 		}
 
-		private void ClearError()
+		private async void ClearError()
 		{
 			_currentError = null;
-			errorBorder.Visibility = Visibility.Collapsed;
-			errorText.Text = "No error";
+			if (errorBorder.Visibility == Visibility.Visible)
+			{
+				errorBorder.Visibility = Visibility.Collapsed;
+				errorText.Text = "No error";
+				//xamlText.Markers.Clear();
+				await xamlText.SetModelMarkersAsync("CodeEditor", Array.Empty<IMarkerData>());
+			}
 		}
 
-		private void ShowError(Exception error)
+		private async void ShowError(Exception error)
 		{
 			_currentError = error;
 			if (error != null && !_isLoadingSample)
 			{
 				errorText.Text = error.Message;
+				if(errorBorder.Visibility == Visibility.Visible)
+				{
+					// Only clear the errors if the error bubble is already showing, in which
+					// case we need to update the errors
+					await xamlText.SetModelMarkersAsync("CodeEditor", Array.Empty<IMarkerData>());
+				}
 				errorBorder.Visibility = Visibility.Visible;
+
+				if (error is System.Xml.XmlException xamlError)
+				{
+					xamlText.Markers.Add(
+						new MarkerData()
+						{
+							Code = "0000",
+							Message = error.Message,
+							Severity = MarkerSeverity.Error,
+							Source = "Origin",
+							StartLineNumber = (uint)(xamlError.LineNumber- GetXamlPrefixLineCount),
+							StartColumn = (uint)xamlError.LinePosition,
+							EndLineNumber = (uint)(xamlError.LineNumber- GetXamlPrefixLineCount),
+							EndColumn = (uint)xamlError.LinePosition+5
+						});
+				}
 			}
+
 		}
 
 		private void CopyError(object sender, RoutedEventArgs e)
@@ -654,7 +717,7 @@ private void RestoreCodePaneSize(Size oldSize, Size newSize)
 
 		private async void LogoClicked(object sender, RoutedEventArgs e)
 		{
-			await Launcher.LaunchUriAsync(new Uri("http://platform.uno/"));
+			await Launcher.LaunchUriAsync(new System.Uri("http://platform.uno/"));
 		}
 
 		private void ShowXaml(object sender, RoutedEventArgs e) => SelectTab("XAML");
@@ -731,4 +794,62 @@ private void SelectTab(string pane)
 			}
 		}
 	}
+
+
+	public class XamlLanguageProvider : CompletionItemProvider
+	{
+		public string[] TriggerCharacters => new string[] { "<" };
+
+		public IAsyncOperation<CompletionList> ProvideCompletionItemsAsync(IModel document, Position position, CompletionContext context)
+		{
+			return AsyncInfo.Run(async delegate (CancellationToken cancelationToken)
+			{
+				var textUntilPosition = await document.GetValueInRangeAsync(new Range(1, 1, position.LineNumber, position.Column));
+
+				if (textUntilPosition.EndsWith("boo"))
+				{
+					return new CompletionList()
+					{
+						Suggestions = new[]
+						{
+							new CompletionItem("booyah", "booyah", CompletionItemKind.Folder),
+							new CompletionItem("booboo", "booboo", CompletionItemKind.File),
+						}
+					};
+				}
+				else if (context.TriggerKind == CompletionTriggerKind.TriggerCharacter)
+				{
+					return new CompletionList()
+					{
+						Suggestions = new[]
+						{
+							new CompletionItem("TextBlock", "TextBlock>\n\t$0\n</TextBlock", CompletionItemKind.Snippet)
+						{
+							InsertTextRules = CompletionItemInsertTextRule.InsertAsSnippet
+						},
+						}
+					};
+				}
+
+				return new CompletionList()
+				{
+					Suggestions = new[]
+					{
+						new CompletionItem("foreach", "foreach (var ${2:element} in ${1:array}) {\n\t$0\n}", CompletionItemKind.Snippet)
+						{
+							InsertTextRules = CompletionItemInsertTextRule.InsertAsSnippet
+						}
+					}
+				};
+			});
+		}
+
+		public IAsyncOperation<CompletionItem> ResolveCompletionItemAsync(IModel model, Position position, CompletionItem item)
+		{
+			return AsyncInfo.Run(delegate (CancellationToken cancelationToken)
+			{
+				return Task.FromResult(item); // throw new NotImplementedException();
+			});
+		}
+	}
 }

src/Uno.Playground.Shared/SamplesPage.xaml

@@ -132,7 +132,6 @@
 
 	<Grid Background="{StaticResource Color01Brush}">
 		<ListView x:Name="SamplesList"
-				  toolkit:VisibleBoundsPadding.PaddingMask="All"
 				  FooterTemplate="{StaticResource SamplesFooter}"
 				  ItemTemplateSelector="{StaticResource SampleTypeTemplateSelector}"
 				  ItemContainerStyle="{StaticResource SampleListViewItem}"

src/Uno.Playground.Shared/Styles/Controls/CommandBar.xaml

@@ -35,8 +35,8 @@
 				Value="SemiBold" />
 		<Setter Property="FontSize"
 				Value="17" />
-		<xamarin:Setter Property="(toolkit:VisibleBoundsPadding.PaddingMask)"
-						Value="Top" />
+		<!--<xamarin:Setter Property="(toolkit:VisibleBoundsPadding.PaddingMask)"
+						Value="Top" />-->
 		<ios:Setter Property="(toolkit:CommandBarExtensions.BackButtonForeground)"
 					Value="{StaticResource Color02Brush}" />
 		<android:Setter Property="(toolkit:UIElementExtensions.Elevation)"

src/Uno.Playground.UWP/Uno.Playground.UWP.csproj

@@ -9,21 +9,24 @@
       <Version>2.6.4</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
-      <Version>6.2.9</Version>
+      <Version>6.2.10</Version>
     </PackageReference>
     <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="1.1.1" />
     <PackageReference Include="Microsoft.Extensions.Logging.Filter" Version="1.1.1" />
     <PackageReference Include="Newtonsoft.Json">
-      <Version>11.0.2</Version>
+      <Version>12.0.3</Version>
     </PackageReference>
     <PackageReference Include="Uno.CodeGen">
       <Version>1.33.0-dev.169</Version>
     </PackageReference>
     <PackageReference Include="Uno.Core">
-      <Version>2.0.0-dev.7</Version>
+      <Version>2.0.0</Version>
+    </PackageReference>
+    <PackageReference Include="Uno.MonacoEditorComponent">
+      <Version>1.0.0</Version>
     </PackageReference>
     <PackageReference Include="Uno.UI">
-      <Version>2.3.0-dev.170</Version>
+      <Version>2.4.4</Version>
     </PackageReference>
   </ItemGroup>
   <PropertyGroup>

src/Uno.Playground.WASM/LinkerConfig.xml

@@ -1,4 +1,5 @@
 <linker>
+	<assembly fullname="MonacoEditorComponent" />
   <assembly fullname="Uno.Playground.WASM" />
   <assembly fullname="Uno.UI" />
   <assembly fullname="System.Core">