Added TinyMCE to DragonFly.Client

usercode · Jan 28, 2024 · f18cd96 · f18cd96
1 parent 0fef0ea
commit f18cd96
Show file tree

Hide file tree

Showing 10 changed files with 458 additions and 17 deletions.
diff --git a/src/DragonFly.App.Client/Program.cs b/src/DragonFly.App.Client/Program.cs
@@ -5,6 +5,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using DragonFly.Client;
+using DragonFly;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<DragonFly.App.Client.App>("app");
@@ -14,7 +15,11 @@
             .AddRestClient()
             .AddBlockField()
             .AddIdentity()
-            .AddApiKeys();
+            .AddApiKeys()
+            .PostInit(x =>
+            {
+                x.ContentField().Add<HtmlField>().WithTinyMceView();
+            });
 
 WebAssemblyHost host = builder.Build();
 

diff --git a/src/DragonFly.App.Server/Models/Product2.cs b/src/DragonFly.App.Server/Models/Product2.cs
@@ -27,6 +27,9 @@ public partial class Product2
     [FloatField(Index = true, QueryField = true)]
     private double? _quantity2;
 
+    [HtmlField]
+    private BlockField _htmlContent;
+
     [BlockField]
     private BlockField _mainContent;
 

diff --git a/src/DragonFly.BlockField.Client/DragonFly.BlockField.Client.csproj b/src/DragonFly.BlockField.Client/DragonFly.BlockField.Client.csproj
@@ -29,11 +29,7 @@
 	<ItemGroup>
 		<None Include="..\..\logo.png" Pack="true" PackagePath="" />
     <None Include="..\..\readme.md" Pack="true" PackagePath="" />
-	</ItemGroup>
-
-	<ItemGroup>
-		<PackageReference Include="TinyMCE.Blazor" Version="1.0.4" />
-	</ItemGroup>
+	</ItemGroup>	
 
 	<ItemGroup>
 	  <ProjectReference Include="..\DragonFly.BlockField.Core\DragonFly.BlockField.Core.csproj" />

diff --git a/src/DragonFly.Client/DragonFly.Client.csproj b/src/DragonFly.Client/DragonFly.Client.csproj
@@ -44,6 +44,10 @@
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.1" />
 	</ItemGroup>
 
+  <ItemGroup>
+    <PackageReference Include="TinyMCE.Blazor" Version="1.0.4" />
+  </ItemGroup>
+
 	<ItemGroup>
 		<None Include="..\..\logo.png" Pack="true" PackagePath="" />
     <None Include="..\..\readme.md" Pack="true" PackagePath="" />

diff --git a/src/DragonFly.Client/Extensions/FieldAdded2Extensions.cs b/src/DragonFly.Client/Extensions/FieldAdded2Extensions.cs
@@ -0,0 +1,23 @@
+// Copyright (c) usercode
+// https://github.com/usercode/DragonFly
+// MIT License
+
+using System;
+using DragonFly.Client;
+using DragonFly.Client.Pages.ContentItems.Fields;
+
+namespace DragonFly;
+
+public static class FieldAdded2Extensions
+{
+    /// <summary>
+    /// Adds TinyMCE view for <typeparamref name="T"/>.
+    /// </summary>
+    public static IFieldAdded<T> WithTinyMceView<T>(this IFieldAdded<T> field)
+        where T : TextBaseField
+    {
+        ComponentManager.Default.Add(typeof(T), typeof(TinyMceFieldView));
+
+        return field;
+    }
+}
diff --git a/...ient/Extensions/DragonFlyApiExtensions.cs → ...Client/Extensions/FieldAddedExtensions.cs b/...ient/Extensions/DragonFlyApiExtensions.cs → ...Client/Extensions/FieldAddedExtensions.cs
@@ -7,7 +7,7 @@
 
 namespace DragonFly;
 
-public static class DragonFlyApiExtensions
+public static class FieldAddedExtensions
 {
     //public static IFieldAdded<T> WithFieldView2<T>(this IFieldAdded<T> field, Func<IFieldComponent<T>> component)
     //    where T : ContentField

diff --git a/...ld.Client/Helpers/TinyMceConfiguration.cs → ...ly.Client/Helpers/TinyMceConfiguration.cs b/...ld.Client/Helpers/TinyMceConfiguration.cs → ...ly.Client/Helpers/TinyMceConfiguration.cs
@@ -2,7 +2,9 @@
 // https://github.com/usercode/DragonFly
 // MIT License
 
-namespace DragonFly.BlockField.Client.Helpers;
+using System.Collections.Generic;
+
+namespace DragonFly.Client;
 
 public class TinyMceConfiguration
 {

diff --git a/src/DragonFly.Client/Pages/ContentItems/Fields/TinyMceFieldView.razor b/src/DragonFly.Client/Pages/ContentItems/Fields/TinyMceFieldView.razor
@@ -0,0 +1,7 @@
+@inherits FieldComponent<TextBaseField>
+
+<div class="tinymce-field">
+    <TinyMCE.Blazor.Editor Field="() => Field.Value"
+                           @bind-Value="Field.Value"
+                           Conf="TinyMceConfiguration.Editor" />
+</div>