Merge pull request #355 from dorthl/mian

Picture upload

src/Blogifier.Admin/Components/EditorComponent.razor

@@ -1,6 +1,11 @@
+@using System.Text.RegularExpressions;
+@using System.Text;
+
 @implements IAsyncDisposable
+
 @inject IStringLocalizer<Resource> _localizer
 @inject IJSRuntime _jsRuntime
+@inject HttpClient _httpClient
 
 <div class="easymde-wrapper">
   <textarea @ref="_textareaReference" tabindex="2" class="visually-hidden" placeholder="@_localizer["type-here"]"></textarea>
@@ -14,7 +19,6 @@
   private ValueTask<IJSObjectReference> _taskModule;
   private ElementReference? _textareaReference;
   private InputFile? _inputFileReference;
-  private List<FrontFileDto> _frontFiles = new List<FrontFileDto>();
 
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
@@ -31,8 +35,7 @@
   {
     var module = await _taskModule;
     var element = _inputFileReference?.Element;
-    var file = await module.InvokeAsync<FrontFileDto>("writeFrontFile", element);
-    _frontFiles.Add(file);
+    await module.InvokeVoidAsync("writeFrontFile", element);
   }
 
   public async ValueTask SetValueAsync(string value)
@@ -41,11 +44,25 @@
     await module.InvokeVoidAsync("setEditorValue", value);
   }
 
-  public async ValueTask<(string?, List<FrontFileDto>)> GetValueAsync()
+  public async ValueTask<string?> GetValueAsync()
   {
     var module = await _taskModule;
     var content = await module.InvokeAsync<string>("getEditorValue");
-    return (content, _frontFiles);
+    var imgsMatches = StringHelper.MatchesMarkdownImgBlob(content);
+
+    if (imgsMatches.Count > 0)
+    {
+      var contentStringBuilder = new StringBuilder(content);
+      foreach (Match match in imgsMatches)
+      {
+        var imageUrl = match.Groups[1].Value;
+        var imageBytes = await _httpClient.GetByteArrayAsync(imageUrl);
+        var base64String = Convert.ToBase64String(imageBytes);
+        contentStringBuilder.Replace(imageUrl, "data:image/png;base64," + base64String);
+      }
+      content = contentStringBuilder.ToString();
+    }
+    return content;
   }
 
   async ValueTask IAsyncDisposable.DisposeAsync()

src/Blogifier.Admin/Components/PostEditorComponent.razor

@@ -78,13 +78,13 @@
 
 @code {
 
-  [Parameter] public FrontPostEditorDto Post { get; set; } = default!;
-  [Parameter] public EventCallback<FrontPostEditorDto> OnSaveCallback { get; set; }
+  [Parameter] public PostEditorDto Post { get; set; } = default!;
+  [Parameter] public EventCallback<PostEditorDto> OnSaveCallback { get; set; }
   [Parameter] public EventCallback<int> OnRemoveCallback { get; set; }
 
   private EditorComponent _editorComponent = default!;
 
-  public async Task SetPostInfoAsync(FrontPostEditorDto post)
+  public async Task SetPostInfoAsync(PostEditorDto post)
   {
     var headTitle = _localizer["edit"] + " - " + post.Title;
     await _jsruntime.InvokeVoidAsync("commonJsFunctions.setTitle", headTitle);
@@ -93,7 +93,7 @@
 
   protected async Task SaveCoreAsync(PostState postState)
   {
-    var (content, frontFiles) = await _editorComponent.GetValueAsync();
+    var content = await _editorComponent.GetValueAsync();
     if (string.IsNullOrEmpty(Post.Title) || string.IsNullOrEmpty(content))
     {
       _toaster.Error(_localizer["title-content-required"]);
@@ -105,7 +105,6 @@
     if (string.IsNullOrEmpty(Post.Cover)) Post.Cover = BlogifierSharedConstant.DefaultCover;
     if (string.IsNullOrEmpty(Post.Description)) Post.Description = Post.Title;
     Post.State = postState;
-    Post.Files = frontFiles;
     await OnSaveCallback.InvokeAsync(Post);
   }
 

src/Blogifier.Admin/Pages/Blogs/EditorView.razor

@@ -1,4 +1,5 @@
 @page "/admin/blogs/editor/{Slug?}"
+@using System.Text;
 
 @inject HttpClient _httpClient
 @inject IStringLocalizer<Resource> _localizer
@@ -15,7 +16,7 @@
 
   private PostEditorComponent _postEditorComponent = default!;
 
-  protected FrontPostEditorDto Post { get; set; } = new FrontPostEditorDto
+  protected PostEditorDto Post { get; set; } = new PostEditorDto
     {
       Title = string.Empty,
       Description = string.Empty,
@@ -25,22 +26,21 @@
       Categories = new List<CategoryDto>(),
     };
 
-
   protected override async Task OnParametersSetAsync()
   {
     if (!string.IsNullOrEmpty(Slug))
     {
-      Post = (await _httpClient.GetFromJsonAsync<FrontPostEditorDto>($"api/post/byslug/{Slug}"))!;
+      Post = (await _httpClient.GetFromJsonAsync<PostEditorDto>($"api/post/byslug/{Slug}"))!;
       if (Post.Categories == null) Post.Categories = new List<CategoryDto>();
       await _postEditorComponent.SetPostInfoAsync(Post);
     }
   }
 
-  protected async Task OnSaveAsync(FrontPostEditorDto post)
+  protected async Task OnSaveAsync(PostEditorDto post)
   {
     if (post.Id == 0)
     {
-      var response = await _httpClient.PostAsJsonAsync<PostEditorDto>($"api/post/add", post);
+      var response = await _httpClient.PostAsJsonAsync($"api/post/add", post);
       if (_toasterService.CheckResponse(response))
       {
         var slug = await response.Content.ReadAsStringAsync();
@@ -49,7 +49,7 @@
     }
     else
     {
-      var response = await _httpClient.PutAsJsonAsync<PostEditorDto>($"api/post/update", post);
+      var response = await _httpClient.PutAsJsonAsync($"api/post/update", post);
       _toasterService.CheckResponse(response);
     }
   }

src/Blogifier.Admin/Pages/HomeView.razor

@@ -273,7 +273,7 @@
 
         <!-- Chart must show visits per day not by the title of the post. -->
         <div class="dash-pan-body" hidden="@_hideGraph">
-          <Chart Config="_config"></Chart>
+          @*<Chart Config="_config"></Chart>*@
         </div>
 
       </div>

src/Blogifier.Admin/Pages/Newsletter/SubscribersView.razor

@@ -17,8 +17,8 @@
       {
         <li class="list-item">
           @{
-            string title = $"{item.Email} / {item.Country} / {item.Region} / {item.Ip}";
-            string pubDate = item.CreatedAt.ToFriendlyDateTimeString();
+            var title = $"{item.Email} / {item.Country} / {item.Region} / {item.Ip}";
+            var pubDate = DateTimeHelper.ToFriendlyShortDateString(item.CreatedAt);
           }
           <span class="list-title">@title</span>
           <span class="list-text">@pubDate</span>

src/Blogifier.Admin/Pages/Pages/EditorView.razor

@@ -14,7 +14,7 @@
 
   [Parameter] public string? Slug { get; set; }
 
-  protected FrontPostEditorDto Post { get; set; } = new FrontPostEditorDto
+  protected PostEditorDto Post { get; set; } = new PostEditorDto
     {
       Title = string.Empty,
       Description = string.Empty,
@@ -28,7 +28,7 @@
   {
     if (!string.IsNullOrEmpty(Slug))
     {
-      Post = (await _httpClient.GetFromJsonAsync<FrontPostEditorDto>($"api/post/byslug/{Slug}"))!;
+      Post = (await _httpClient.GetFromJsonAsync<PostEditorDto>($"api/post/byslug/{Slug}"))!;
       if (Post.Categories == null) Post.Categories = new List<CategoryDto>();
     }
   }

src/Blogifier.Admin/_Imports.razor

@@ -20,7 +20,6 @@
 @using Blogifier.Admin.Shared
 @using Blogifier.Admin.Services
 @using Blogifier.Shared
-@using Blogifier.Shared.Extensions
 @using Blogifier.Shared.Resources
 @using Blogifier.Helper;
 @using Blogifier.Identity

src/Blogifier.Admin/assets/js/editor.js

@@ -210,13 +210,6 @@ function editorToolbarTooltip() {
 let easymde;
 let _uploadElement;
 
-function toggleSideBySide() {
-  EasyMDE.toggleSideBySide(easymde);
-  // Wait for the screen to complete
-  setTimeout(() => {
-    hljs.highlightElement(easymde.gui.sideBySide);
-  }, 1000);
-}
 
 export function loadEditor(toolbar, textareaElement, uploadElement) {
   _uploadElement = uploadElement;
@@ -240,6 +233,8 @@ export function loadEditor(toolbar, textareaElement, uploadElement) {
       singleLineBreaks: false,
       codeSyntaxHighlighting: true
     },
+    // fullScreen: false,
+    // sideBySideFullscreen: false,
     toolbar: selectedToolbar,
     insertTexts: {
       horizontalRule: ["", "\n---\n"]
@@ -254,6 +249,13 @@ export function loadEditor(toolbar, textareaElement, uploadElement) {
   editorToolbarTooltip();
 }
 
+
+function toggleSideBySide() {
+  EasyMDE.toggleSideBySide(easymde);
+  // Wait for the screen to complete
+  setTimeout(() => hljs.highlightElement(easymde.gui.sideBySide), 1000);
+}
+
 // Image Upload
 async function insertImage(editor) {
   _uploadElement.click();
@@ -266,7 +268,6 @@ export function setEditorValue(txt) {
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>')
     .replace(/&quot;/g, '"'));
-
 }
 
 export function getEditorValue() {
@@ -281,5 +282,4 @@ export function writeFrontFile(inputElement) {
   let codemirror = easymde.codemirror;
   codemirror.selection;
   codemirror.replaceSelection(output);
-  return { fileName, url, selection: output }
 }

src/Blogifier.Admin/assets/package.json

@@ -4,17 +4,16 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "npm run rollup | npm run sass ",
+    "start": "npm run watch-rollup | npm run watch-sass ",
     "rtl": "rtlcss dist/admin/css/styles.css css/styles.rtl.css",
-    "sass": "sass --watch scss:dist/admin/css --style=compressed",
-    "rollup": "rollup --config -w",
-    "build-sass": "sass scss:dist/admin/css --style=compressed",
-    "build-rollup": "rollup --config",
-    "build": "npm run build-sass && npm run build-rollup",
+    "sass": "sass",
+    "rollup": "rollup",
+    "watch-sass": "sass --watch scss:dist/admin/css",
+    "watch-rollup": "rollup -w --config rollup.config.dev.mjs",
     "sass:Debug": "sass scss:dist/admin/css",
     "rollup:Debug": "rollup --config rollup.config.dev.mjs",
     "build:Debug": "npm run sass:Debug && npm run rollup:Debug",
-    "sass:Release": "sass scss:dist/admin/css --style=compressed",
+    "sass:Release": "sass scss:dist/admin/css --style=compressed --no-source-map",
     "rollup:Release": "rollup --config rollup.config.mjs",
     "build:Release": "npm run sass:Release && npm run rollup:Release"
   },