From 6c68129fd01219bf03ad54fb228cd0a6534ecef7 Mon Sep 17 00:00:00 2001 From: Alex Hedley Date: Fri, 27 Dec 2024 20:13:06 +0000 Subject: [PATCH 1/6] feat: added basic syntax highlighting --- src/Blazored.TextEditor/BlazoredTextEditor.razor | 7 ++++++- src/Blazored.TextEditor/Interop.cs | 5 +++-- src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js | 3 ++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/Blazored.TextEditor/BlazoredTextEditor.razor b/src/Blazored.TextEditor/BlazoredTextEditor.razor index f185f48..7bb67ce 100644 --- a/src/Blazored.TextEditor/BlazoredTextEditor.razor +++ b/src/Blazored.TextEditor/BlazoredTextEditor.razor @@ -75,6 +75,9 @@ [Parameter] public bool BottomToolbar { get; set; } + [Parameter] + public bool Syntax { get; set; } + private ElementReference QuillElement; private ElementReference ToolBar; @@ -91,7 +94,9 @@ Placeholder, Theme, Formats, - DebugLevel); + DebugLevel, + Syntax + ); } } diff --git a/src/Blazored.TextEditor/Interop.cs b/src/Blazored.TextEditor/Interop.cs index f6b2a7e..6b01da0 100644 --- a/src/Blazored.TextEditor/Interop.cs +++ b/src/Blazored.TextEditor/Interop.cs @@ -14,12 +14,13 @@ internal static ValueTask CreateQuill( string placeholder, string theme, string[] formats, - string debugLevel) + string debugLevel, + bool syntax) { return jsRuntime.InvokeAsync( "QuillFunctions.createQuill", quillElement, toolbar, readOnly, - placeholder, theme, formats, debugLevel); + placeholder, theme, formats, debugLevel, syntax); } internal static ValueTask GetText( diff --git a/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js b/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js index aa3ab10..ebb1bd5 100644 --- a/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js +++ b/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js @@ -2,13 +2,14 @@ window.QuillFunctions = { createQuill: function ( quillElement, toolBar, readOnly, - placeholder, theme, formats, debugLevel) { + placeholder, theme, formats, debugLevel, syntax) { Quill.register('modules/blotFormatter', QuillBlotFormatter.default); var options = { debug: debugLevel, modules: { + syntax: syntax, toolbar: toolBar, blotFormatter: {} }, From 0cdbbac6374fb912472b295efa13d88df5a845ee Mon Sep 17 00:00:00 2001 From: Alex Hedley Date: Fri, 27 Dec 2024 20:13:51 +0000 Subject: [PATCH 2/6] feat: update BlazorClientSide sample --- samples/BlazorClientSide/Pages/Counter.razor | 16 ------ samples/BlazorClientSide/Pages/Index.razor | 54 +++++++++++++++++++ samples/BlazorClientSide/Shared/NavMenu.razor | 5 -- samples/BlazorClientSide/wwwroot/index.html | 5 ++ 4 files changed, 59 insertions(+), 21 deletions(-) delete mode 100644 samples/BlazorClientSide/Pages/Counter.razor diff --git a/samples/BlazorClientSide/Pages/Counter.razor b/samples/BlazorClientSide/Pages/Counter.razor deleted file mode 100644 index 59c0d24..0000000 --- a/samples/BlazorClientSide/Pages/Counter.razor +++ /dev/null @@ -1,16 +0,0 @@ -@page "/counter" - -

Counter

- -

Current count: @currentCount

- - - -@code { - int currentCount = 0; - - void IncrementCount() - { - currentCount++; - } -} diff --git a/samples/BlazorClientSide/Pages/Index.razor b/samples/BlazorClientSide/Pages/Index.razor index f7dd5c2..c47e9fb 100644 --- a/samples/BlazorClientSide/Pages/Index.razor +++ b/samples/BlazorClientSide/Pages/Index.razor @@ -160,15 +160,63 @@ Toggle Editor +
+ + + + +

Syntax Highlighter

+

Off

+ + + + + + + +
+const language = "JavaScript";
+console.log("I love " + language + "!");
+
+
+ +

On

+ + + + + + + +
+const language = "JavaScript";
+console.log("I love " + language + "!");
+
+
+
+ +
+
+
+ @((MarkupString)QuillHTMLCodeContent) + @QuillHTMLCodeContent +
+
+ @code { BlazoredTextEditor QuillHtml; BlazoredTextEditor QuillNative; BlazoredTextEditor QuillReadOnly; + BlazoredTextEditor QuillCode; string QuillHTMLContent; string QuillContent; string QuillReadOnlyContent = @"Read Only Content"; + string QuillHTMLCodeContent; bool mode = false; @@ -213,4 +261,10 @@ mode = (mode) ? false : true; await this.QuillReadOnly.EnableEditor(mode); } + + public async void GetHTMLCode() + { + QuillHTMLCodeContent = await this.QuillCode.GetHTML(); + StateHasChanged(); + } } \ No newline at end of file diff --git a/samples/BlazorClientSide/Shared/NavMenu.razor b/samples/BlazorClientSide/Shared/NavMenu.razor index 93ab14f..8f768f0 100644 --- a/samples/BlazorClientSide/Shared/NavMenu.razor +++ b/samples/BlazorClientSide/Shared/NavMenu.razor @@ -12,11 +12,6 @@ Home - diff --git a/samples/BlazorClientSide/wwwroot/index.html b/samples/BlazorClientSide/wwwroot/index.html index 9731e3e..fabba48 100644 --- a/samples/BlazorClientSide/wwwroot/index.html +++ b/samples/BlazorClientSide/wwwroot/index.html @@ -10,6 +10,9 @@ + + + @@ -18,6 +21,8 @@ + + From 72f50794808f99fd3b76a9e71a5bc047faa0c8b6 Mon Sep 17 00:00:00 2001 From: Alex Hedley Date: Fri, 27 Dec 2024 20:14:10 +0000 Subject: [PATCH 3/6] feat: update BlazorServerSide sample --- samples/BlazorServerSide/Pages/Counter.razor | 16 ---- samples/BlazorServerSide/Pages/Index.razor | 74 ++++++++++++++++--- samples/BlazorServerSide/Pages/_Host.cshtml | 5 ++ samples/BlazorServerSide/Shared/NavMenu.razor | 5 -- 4 files changed, 68 insertions(+), 32 deletions(-) delete mode 100644 samples/BlazorServerSide/Pages/Counter.razor diff --git a/samples/BlazorServerSide/Pages/Counter.razor b/samples/BlazorServerSide/Pages/Counter.razor deleted file mode 100644 index 59c0d24..0000000 --- a/samples/BlazorServerSide/Pages/Counter.razor +++ /dev/null @@ -1,16 +0,0 @@ -@page "/counter" - -

Counter

- -

Current count: @currentCount

- - - -@code { - int currentCount = 0; - - void IncrementCount() - { - currentCount++; - } -} diff --git a/samples/BlazorServerSide/Pages/Index.razor b/samples/BlazorServerSide/Pages/Index.razor index b907ccc..f600853 100644 --- a/samples/BlazorServerSide/Pages/Index.razor +++ b/samples/BlazorServerSide/Pages/Index.razor @@ -38,11 +38,11 @@

@@ -53,7 +53,7 @@
+Placeholder="Enter non HTML format like centering..."> @@ -156,19 +156,65 @@
+
+ + + + +

Syntax Highlighter

+

Off

+ + + + + + + +
const language = "JavaScript";
+console.log("I love " + language + "!");
+
+
+

On

+ + + + + + + +
const language = "JavaScript";
+console.log("I love " + language + "!");
+
+
+
+ +
+
+
+ @((MarkupString)QuillHTMLCodeContent) + @QuillHTMLCodeContent +
+
+ + @code { BlazoredTextEditor QuillHtml; BlazoredTextEditor QuillNative; BlazoredTextEditor QuillReadOnly; + BlazoredTextEditor QuillCode; string QuillHTMLContent; string QuillContent; string QuillReadOnlyContent = @"Read Only Content"; + string QuillHTMLCodeContent; bool mode = false; @@ -216,4 +262,10 @@ mode = (mode) ? false : true; await this.QuillReadOnly.EnableEditor(mode); } + + public async void GetHTMLCode() + { + QuillHTMLCodeContent = await this.QuillCode.GetHTML(); + StateHasChanged(); + } } \ No newline at end of file diff --git a/samples/BlazorServerSide/Pages/_Host.cshtml b/samples/BlazorServerSide/Pages/_Host.cshtml index 1b88156..1504302 100644 --- a/samples/BlazorServerSide/Pages/_Host.cshtml +++ b/samples/BlazorServerSide/Pages/_Host.cshtml @@ -14,6 +14,9 @@ + + + @@ -24,6 +27,8 @@ + + diff --git a/samples/BlazorServerSide/Shared/NavMenu.razor b/samples/BlazorServerSide/Shared/NavMenu.razor index 0230d76..7bdfae3 100644 --- a/samples/BlazorServerSide/Shared/NavMenu.razor +++ b/samples/BlazorServerSide/Shared/NavMenu.razor @@ -12,11 +12,6 @@ Home - From f242b70ab8ad5fd9af6f0be9d7411fffa6cec723 Mon Sep 17 00:00:00 2001 From: Alex Hedley Date: Fri, 27 Dec 2024 20:14:30 +0000 Subject: [PATCH 4/6] feat: update TextEditorDemo sample --- samples/TextEditorDemo/Pages/Index.razor | 32 +++++++++++++++++++++++ samples/TextEditorDemo/wwwroot/index.html | 9 ++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/samples/TextEditorDemo/Pages/Index.razor b/samples/TextEditorDemo/Pages/Index.razor index 995961a..982353e 100644 --- a/samples/TextEditorDemo/Pages/Index.razor +++ b/samples/TextEditorDemo/Pages/Index.razor @@ -63,6 +63,35 @@ +
+
+ +
+ +

Syntax

+

See Syntax Highlighter Module.

+

Off

+ + + @((MarkupString)toolbar) + + +
const language = "JavaScript";
+console.log("I love " + language + "!");
+
+
+

On

+ + + @((MarkupString)toolbar) + + +
const language = "JavaScript";
+console.log("I love " + language + "!");
+
+
+ @code { BlazoredTextEditor richEditor = default!; @@ -97,6 +126,9 @@ + + + """"; body = """" diff --git a/samples/TextEditorDemo/wwwroot/index.html b/samples/TextEditorDemo/wwwroot/index.html index d80384c..1e3bd8d 100644 --- a/samples/TextEditorDemo/wwwroot/index.html +++ b/samples/TextEditorDemo/wwwroot/index.html @@ -6,11 +6,14 @@ TextEditorDemo - + + + + @@ -22,6 +25,10 @@ 🗙 + + + + From 02ba5e0f1ff1b3d059dc16c1463508d45c19e826 Mon Sep 17 00:00:00 2001 From: Alex Hedley Date: Fri, 27 Dec 2024 20:27:32 +0000 Subject: [PATCH 5/6] docs: updated docs to show example and refactored images --- Blazored.TextEditor.sln | 11 ++-- README.md | 62 ++++++++++++++---- docs/README.md | 7 ++ docs/SyntaxHighlighterExample.md | 50 ++++++++++++++ .../images/DeltaExample.png | Bin .../images/HTMLExample.png | Bin .../images/InlineEditingExample.png | Bin docs/images/README.md | 17 +++++ docs/images/SyntaxHighlighterExample.png | Bin 0 -> 15073 bytes 9 files changed, 131 insertions(+), 16 deletions(-) create mode 100644 docs/README.md create mode 100644 docs/SyntaxHighlighterExample.md rename DeltaExample.png => docs/images/DeltaExample.png (100%) rename HTMLExample.png => docs/images/HTMLExample.png (100%) rename InlineEditingExample.png => docs/images/InlineEditingExample.png (100%) create mode 100644 docs/images/README.md create mode 100644 docs/images/SyntaxHighlighterExample.png diff --git a/Blazored.TextEditor.sln b/Blazored.TextEditor.sln index 2d17be2..fa3ebfd 100644 --- a/Blazored.TextEditor.sln +++ b/Blazored.TextEditor.sln @@ -1,7 +1,7 @@  Microsoft Visual Studio Solution File, Format Version 12.00 -# Visual Studio Version 16 -VisualStudioVersion = 16.0.29519.87 +# Visual Studio Version 17 +VisualStudioVersion = 17.12.35527.113 MinimumVisualStudioVersion = 10.0.40219.1 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazored.TextEditor", "src\Blazored.TextEditor\Blazored.TextEditor.csproj", "{A76F9184-D5C2-42AE-9BFA-BDF33A3B1434}" EndProject @@ -13,10 +13,11 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "samples", "samples", "{666C EndProject Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{5DCD4124-DAD2-4777-92CB-16ABA93847C1}" ProjectSection(SolutionItems) = preProject - DeltaExample.png = DeltaExample.png - HTMLExample.png = HTMLExample.png - InlineEditingExample.png = InlineEditingExample.png + docs\images\DeltaExample.png = docs\images\DeltaExample.png + docs\images\HTMLExample.png = docs\images\HTMLExample.png + docs\images\InlineEditingExample.png = docs\images\InlineEditingExample.png README.md = README.md + docs\images\SyntaxHighlighterExample.png = docs\images\SyntaxHighlighterExample.png EndProjectSection EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TextEditorDemo", "samples\TextEditorDemo\TextEditorDemo.csproj", "{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}" diff --git a/README.md b/README.md index d0d31bc..9d271a2 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,28 @@ # Blazored TextEditor -Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com") -![Screenshot](HTMLExample.png) + -### Sample Applications +[![Blazor](https://img.shields.io/badge/blazor-5C2D91.svg?style=for-the-badge&logo=blazor&logoColor=white)](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) [![C#](https://img.shields.io/badge/c%23-239120.svg?style=for-the-badge&logo=c-sharp&logoColor=white)](https://learn.microsoft.com/en-us/dotnet/csharp/) + +[![Build & Test Main](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml) +[![Build & Test PR](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml) +[![CodeQL](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml) +[![Release Drafter](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml) + +> Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com") + +![HTML Example](docs/images/HTMLExample.png "HTML Example]") + +## Sample Applications * [Simple blogging application written in Microsoft Server Side Blazor](https://github.com/ADefWebserver/Blazor-Blogs "Blazor Blogs") - [Contains an example of uploading images] -### Helpful Articles +## Helpful Articles * [Creating Reusable Custom Blazor Controls](https://blazorhelpwebsite.com/ViewBlogPost/11 "BlazorHelpWebsite.com") * [Creating A Rich Text Editor In Blazor Using Quill](https://blazorhelpwebsite.com/ViewBlogPost/12 "BlazorHelpWebsite.com") -### Installing +## Installing You can install from NuGet using the following command: @@ -20,7 +30,8 @@ You can install from NuGet using the following command: Or via the Visual Studio package manger. -### Setup +## Setup + Blazor Server applications will need to include the following CSS and JS files in their `Pages\_Host.cshtml` (or `Pages/_Layout.cshtml` if using .Net 6). In the `head` tag add the following CSS. @@ -61,6 +72,7 @@ Below is a list of all the options available on the Text Editor. - `Placeholder` (Optional - Default: `Compose an epic...`) - The text to show when editor is empty. - `Theme` (Optional - Default: `snow`) - Use `snow` to show the Toolbar on top of the editor, and `bubble` for inline editing. - `DebugLevel` (Optional - Default: `info`) - Determines the level of debug information returned to the web browser console window. Options are `error`, `warn`, `log`, or `info`. +- `Syntax` (Optional - Default: `false`) - The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting. **Methods** @@ -72,9 +84,13 @@ Below is a list of all the options available on the Text Editor. - `InsertImage` (`string`) - Inserts an image at the current point in the editor. - `InsertText` (`string`) - Inserts text at the current point in the editor. +## Basic Example + +(see code in the [`Index.razor` page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples) + +
+Code -### Basic Example -(see code in the [Index.razor page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples) ```cs @using Blazored.TextEditor @@ -148,8 +164,15 @@ string QuillHTMLContent; } ``` +
+ ### Alternative Using of the BlazoredTextEditor Component -Depending on our use case, we may want to add some styling to the Toolbar or Editor. We can also place the Toolbar below the Editor by setting the BottomToolbar property to ‘true’ in the BlazoredTextEditor component: + +Depending on our use case, we may want to add some styling to the _Toolbar_ or _Editor_. We can also place the _Toolbar_ below the _Editor_ by setting the `BottomToolbar` property to `"true"` in the **BlazoredTextEditor** component: + +
+Code + ```csharp