Add customizable syntax highlighting for AvaloniaEdit

AvaloniaUtils · Oct 9, 2023 · eec0ae3 · eec0ae3
1 parent b45eee5
commit eec0ae3
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 8 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -3,13 +3,9 @@ name: CI Build
 env:
   DOTNET_SKIP_FIRST_TIME_EXPERIENCE: true
   DOTNET_CLI_TELEMETRY_OPTOUT: true
-  BUILD_VERSION: 1.3.0
+  BUILD_VERSION: 1.4.0-rc1
   PACKAGE_RELEASE_NOTES: |
-    Allow edit sources xaml at runtime%2c apply result and see errors. Add IsEditable property to XamlDisplay
-    Add xaml namespaces and aliases to generated data
-    Add XamlDisplay content to logical tree for easy dev tools use
-    Add Avalonia 11.0.0 support
-    Remove setters of Background and Foreground%2c allowing it to be inherited
+    Add customizable syntax highlighting for AvaloniaEdit
 # NOTE: Instead of , use %2c
 
 on:

diff --git a/ShowMeTheXaml.Avalonia.AvaloniaEdit/ShowMeTheXaml.Avalonia.AvaloniaEdit.csproj b/ShowMeTheXaml.Avalonia.AvaloniaEdit/ShowMeTheXaml.Avalonia.AvaloniaEdit.csproj
@@ -22,6 +22,7 @@
     <ItemGroup>
       <PackageReference Include="Avalonia.Xaml.Behaviors" Version="11.0.0" />
       <PackageReference Include="Avalonia.AvaloniaEdit" Version="11.0.0" />
+      <PackageReference Include="AvaloniaEdit.TextMate" Version="11.0.0" />
     </ItemGroup>
 
     <ItemGroup>

diff --git a/ShowMeTheXaml.Avalonia.AvaloniaEdit/XamlDisplayAvaloniaEditThemeBehavior.cs b/ShowMeTheXaml.Avalonia.AvaloniaEdit/XamlDisplayAvaloniaEditThemeBehavior.cs
@@ -0,0 +1,55 @@
+using System;
+using Avalonia;
+using Avalonia.Xaml.Interactivity;
+using AvaloniaEdit;
+using AvaloniaEdit.TextMate;
+using TextMateSharp.Grammars;
+
+namespace ShowMeTheXaml.Avalonia.AvaloniaEdit;
+
+public class XamlDisplayAvaloniaEditThemeBehavior : Behavior<TextEditor> {
+    private IDisposable? _disposable;
+    public static readonly AttachedProperty<ThemeName> CodeHighlightThemeNameProperty =
+        XamlDisplayAvaloniaEdit.CodeHighlightThemeNameProperty.AddOwner<XamlDisplayAvaloniaEditThemeBehavior>();
+    private RegistryOptions? _registryOptions;
+    private TextMate.Installation? _textMateInstallation;
+
+    public ThemeName CodeHighlightThemeName {
+        get => GetValue(CodeHighlightThemeNameProperty);
+        set => SetValue(CodeHighlightThemeNameProperty, value);
+    }
+
+    /// <inheritdoc />
+    protected override void OnAttachedToVisualTree() {
+        base.OnAttachedToVisualTree();
+
+        _registryOptions = new RegistryOptions(CodeHighlightThemeName);
+        _textMateInstallation = AssociatedObject!.InstallTextMate(_registryOptions);
+        _textMateInstallation.SetGrammar(_registryOptions.GetScopeByLanguageId("xml"));
+
+        _disposable = this.GetObservable(CodeHighlightThemeNameProperty)
+            .Subscribe(name => {
+                _textMateInstallation.SetTheme(_registryOptions.LoadTheme(name));
+            });
+    }
+
+    /// <inheritdoc />
+    protected override void OnDetachedFromVisualTree() {
+        base.OnDetachedFromVisualTree();
+        _disposable?.Dispose();
+        _textMateInstallation?.Dispose();
+    }
+}
+
+public static class XamlDisplayAvaloniaEdit {
+    public static readonly AttachedProperty<ThemeName> CodeHighlightThemeNameProperty =
+        AvaloniaProperty.RegisterAttached<XamlDisplay, ThemeName>("CodeHighlightThemeName", typeof(XamlDisplayAvaloniaEdit));
+
+    public static ThemeName GetCodeHighlightThemeName(XamlDisplay element) {
+        return element.GetValue(CodeHighlightThemeNameProperty);
+    }
+
+    public static void SetCodeHighlightThemeName(XamlDisplay element, ThemeName value) {
+        element.SetValue(CodeHighlightThemeNameProperty, value);
+    }
+}
diff --git a/ShowMeTheXaml.Avalonia.AvaloniaEdit/XamlDisplayStyles.axaml b/ShowMeTheXaml.Avalonia.AvaloniaEdit/XamlDisplayStyles.axaml
@@ -11,6 +11,7 @@
   <StyleInclude Source="avares://ShowMeTheXaml.Avalonia/XamlDisplay.xaml" />
   <StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
   <Style Selector="showMeTheXaml|XamlDisplay">
+    <Setter Property="avaloniaEdit1:XamlDisplayAvaloniaEdit.CodeHighlightThemeName" Value="DarkPlus" />
     <Setter Property="Template">
       <ControlTemplate>
         <Grid ColumnDefinitions="*, Auto">
@@ -54,7 +55,6 @@
                                        MinWidth="300" MaxWidth="800"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Stretch"
-                                       SyntaxHighlighting="XML"
                                        HorizontalScrollBarVisibility="Disabled"
                                        VerticalScrollBarVisibility="Disabled"
                                        WordWrap="True"
@@ -63,6 +63,8 @@
                                        Background="{Binding $parent[showMeTheXaml:XamlDisplay].Background}">
                 <Interaction.Behaviors>
                   <avaloniaEdit1:CustomizeEditorBehavior />
+                  <avaloniaEdit1:XamlDisplayAvaloniaEditThemeBehavior
+                    CodeHighlightThemeName="{Binding $parent[showMeTheXaml:XamlDisplay].(avaloniaEdit1:XamlDisplayAvaloniaEdit.CodeHighlightThemeName)}" />
                 </Interaction.Behaviors>
               </avaloniaEdit:TextEditor>
             </ScrollViewer>
@@ -111,7 +113,6 @@
                                      MinWidth="300" MaxWidth="800"
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Stretch"
-                                     SyntaxHighlighting="XML"
                                      HorizontalScrollBarVisibility="Disabled"
                                      VerticalScrollBarVisibility="Disabled"
                                      WordWrap="True"
@@ -122,6 +123,8 @@
                 <avaloniaEdit1:CustomizeEditorBehavior />
                 <avaloniaEdit1:XamlDisplayAvaloniaEditTextBindingBehavior
                   MarkupTextEditor="{Binding ElementName=MarkupTextEditor}" />
+                <avaloniaEdit1:XamlDisplayAvaloniaEditThemeBehavior
+                  CodeHighlightThemeName="{Binding $parent[showMeTheXaml:XamlDisplay].(avaloniaEdit1:XamlDisplayAvaloniaEdit.CodeHighlightThemeName)}" />
               </Interaction.Behaviors>
             </avaloniaEdit:TextEditor>
           </ScrollViewer>