feat: add data saving editor.js

sitkoru · May 23, 2024 · 79889dd · 79889dd
1 parent 72994ab
commit 79889dd
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 26 deletions.
diff --git a/apps/Sitko.Blockly.Data/Entities/Post.cs b/apps/Sitko.Blockly.Data/Entities/Post.cs
@@ -1,5 +1,5 @@
-using System.ComponentModel.DataAnnotations;
-using Sitko.Core.Repository;
+using Sitko.Core.Repository;
+using Sitko.EditorJS.Data;
 
 namespace Sitko.Blockly.Data.Entities;
 
@@ -16,4 +16,5 @@ public record Post : BaseEntityRecord
     public string Title { get; set; } = "";
     public List<ContentBlock> Blocks { get; set; } = new();
     public List<ContentBlock> SecondaryBlocks { get; set; } = new();
+    public EditorJSData EditorJSBlocks { get; set; } = new();
 }
diff --git a/apps/Sitko.Blockly.Data/Sitko.Blockly.Data.csproj b/apps/Sitko.Blockly.Data/Sitko.Blockly.Data.csproj
@@ -12,5 +12,6 @@
 
   <ItemGroup>
     <ProjectReference Include="..\..\src\Sitko.Blockly\Sitko.Blockly.csproj" />
+    <ProjectReference Include="..\..\src\Sitko.EditorJS\Sitko.EditorJS.csproj" />
   </ItemGroup>
 </Project>
diff --git a/apps/Sitko.Blockly.Demo.Client/Pages/PostFormComponent.razor b/apps/Sitko.Blockly.Demo.Client/Pages/PostFormComponent.razor
@@ -7,7 +7,7 @@
     </MudItem>
     @* <MudBlocklyForm @bind-Value="context.Entity.Blocks" Options="blocksOptions"></MudBlocklyForm> *@
     @* <MudBlocklyForm Label="Secondary blocks" @bind-Value="context.Entity.SecondaryBlocks" Options="secondaryBlocksOptions"></MudBlocklyForm> *@
-    <EditorJS />
+    <EditorJS @bind-Value="context.Entity.EditorJSBlocks"/>
     <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!context.Form.CanSave())" OnClick="@context.Form.SaveEntityAsync">Save</MudButton>
     <MudButton Variant="Variant.Outlined" Color="Color.Secondary" Disabled="@(!context.Form.HasChanges)" OnClick="@context.Form.ResetAsync">Reset</MudButton>
 </PostForm>

diff --git a/apps/Sitko.Blockly.Demo/Data/BlocklyContext.cs b/apps/Sitko.Blockly.Demo/Data/BlocklyContext.cs
@@ -17,5 +17,12 @@ protected override void OnModelCreating(ModelBuilder modelBuilder)
         base.OnModelCreating(modelBuilder);
         modelBuilder.RegisterBlocklyConversion<Post>(post => post.Blocks, nameof(Post.Blocks));
         modelBuilder.RegisterBlocklyConversion<Post>(post => post.SecondaryBlocks, nameof(Post.SecondaryBlocks));
+        modelBuilder.Entity<Post>(post =>
+        {
+            post.Property(property => property.EditorJSBlocks)
+                .IsRequired()
+                .HasColumnType("jsonb")
+                .HasDefaultValueSql("'{}'");
+        });
     }
 }
diff --git a/apps/Sitko.Blockly.Demo/Data/Migrations/20240523063901_AddEditorJSBlocks.Designer.cs b/apps/Sitko.Blockly.Demo/Data/Migrations/20240523063901_AddEditorJSBlocks.Designer.cs
diff --git a/apps/Sitko.Blockly.Demo/Data/Migrations/20240523063901_AddEditorJSBlocks.cs b/apps/Sitko.Blockly.Demo/Data/Migrations/20240523063901_AddEditorJSBlocks.cs
@@ -0,0 +1,30 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+using Sitko.EditorJS.Data;
+
+#nullable disable
+
+namespace Sitko.Blockly.Demo.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddEditorJSBlocks : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<EditorJSData>(
+                name: "EditorJSBlocks",
+                table: "Posts",
+                type: "jsonb",
+                nullable: false,
+                defaultValueSql: "'{}'");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "EditorJSBlocks",
+                table: "Posts");
+        }
+    }
+}
diff --git a/apps/Sitko.Blockly.Demo/Data/Migrations/BlocklyContextModelSnapshot.cs b/apps/Sitko.Blockly.Demo/Data/Migrations/BlocklyContextModelSnapshot.cs
@@ -5,6 +5,9 @@
 using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
 using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
 using Sitko.Blockly.Demo.Data;
+using Sitko.EditorJS.Data;
+
+#nullable disable
 
 namespace Sitko.Blockly.Demo.Migrations
 {
@@ -15,11 +18,12 @@ protected override void BuildModel(ModelBuilder modelBuilder)
         {
 #pragma warning disable 612, 618
             modelBuilder
-                .HasAnnotation("Relational:MaxIdentifierLength", 63)
-                .HasAnnotation("ProductVersion", "5.0.7")
-                .HasAnnotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn);
+                .HasAnnotation("ProductVersion", "8.0.0")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
 
-            modelBuilder.Entity("Sitko.Blockly.Demo.Data.Entities.Post", b =>
+            modelBuilder.Entity("Sitko.Blockly.Data.Entities.Post", b =>
                 {
                     b.Property<Guid>("Id")
                         .ValueGeneratedOnAdd()
@@ -38,6 +42,12 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                     b.Property<DateTimeOffset>("DateUpdated")
                         .HasColumnType("timestamp with time zone");
 
+                    b.Property<EditorJSData>("EditorJSBlocks")
+                        .IsRequired()
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("jsonb")
+                        .HasDefaultValueSql("'{}'");
+
                     b.Property<string>("SecondaryBlocks")
                         .IsRequired()
                         .ValueGeneratedOnAdd()

diff --git a/src/Sitko.EditorJS.Blazor/EditorJS.razor b/src/Sitko.EditorJS.Blazor/EditorJS.razor
@@ -1,10 +1,11 @@
-@using System.Text.Json
+@inherits Microsoft.AspNetCore.Components.Forms.InputBase<Sitko.EditorJS.Data.EditorJSData>
+@using System.Text.Json
 <div style="margin-top: 10px; margin-bottom: 10px;" id="@Id"></div>
 
-@if (Data is not null)
+@if (CurrentValue is not null)
 {
     <pre>
-@JsonSerializer.Serialize(Data, PrettyPrintJsonOptions)
+@JsonSerializer.Serialize(CurrentValue, PrettyPrintJsonOptions)
 </pre>
 }
 

diff --git a/src/Sitko.EditorJS.Blazor/EditorJS.razor.cs b/src/Sitko.EditorJS.Blazor/EditorJS.razor.cs
@@ -11,7 +11,7 @@
 
 namespace Sitko.EditorJS.Blazor;
 
-public partial class EditorJS : ComponentBase, IAsyncDisposable
+public partial class EditorJS : InputBase<EditorJSData>, IAsyncDisposable
 {
     private static readonly JsonSerializerOptions PrettyPrintJsonOptions = new() { WriteIndented = true };
 
@@ -25,19 +25,6 @@ public partial class EditorJS : ComponentBase, IAsyncDisposable
 
     [Parameter] public string? Config { get; set; }
 
-    private EditorJSData? Data { get; set; } = new()
-    {
-        Time = DateTime.UtcNow.Ticks,
-        Version = "somever",
-        Blocks =
-        [
-            new ParagraphBlock
-            {
-                Id = Guid.NewGuid().ToString(), Data = new ParagraphBlockData { Text = "Мой клёвый текст" }
-            }
-        ]
-    };
-
     public Guid Id { get; } = Guid.NewGuid();
 
     public ValueTask DisposeAsync()
@@ -81,7 +68,7 @@ await ScriptInjector.InjectAsync(ScriptInjectRequest.Inline(Id.ToString(), $$"""
               """), async _ =>
         {
             await JsRuntime.InvokeVoidAsync("window.SitkoEditorJS.init", cancellationToken, Id.ToString(),
-                instance, Data);
+                instance, CurrentValue);
             rendered = true;
         }, cancellationToken);
 
@@ -96,11 +83,19 @@ private ValueTask DestroyEditor()
     [JSInvokable]
     public Task OnSave(EditorJSData data)
     {
-        Data = data;
+        CurrentValue = data;
         StateHasChanged();
         return Task.CompletedTask;
     }
 
+    protected override bool TryParseValueFromString(string? value, out EditorJSData result,
+        out string validationErrorMessage)
+    {
+        result = default!;
+        validationErrorMessage = "";
+        return false;
+    }
+
     // private async ValueTask UpdateEditorAsync() =>
     //     await JsRuntime.InvokeVoidAsync("window.SitkoBlazorCKEditor.update", Id, EditorValue);
 }