Merge pull request #80 from AlexHedley/codeblock

Added Code Block Syntax Highlighting

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}"

README.md

@@ -1,26 +1,37 @@
 # Blazored TextEditor
-Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com")
 
-![Screenshot](HTMLExample.png)
+<!-- ![Blazored Icon](https://avatars.githubusercontent.com/u/39194025?s=200&v=4 "Blazored Icon") -->
 
-### 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:
 
 `Install-Package Blazored.TextEditor`
 
 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)
+
+<details>
+<summary>Code</summary>
 
-### 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;
 }
 ```
 
+</details>
+
 ### 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:
+
+<details>
+<summary>Code</summary>
+
 ```csharp
 <style>
     .rounded {
@@ -260,11 +283,28 @@ Depending on our use case, we may want to add some styling to the Toolbar or Edi
     }
 }
 ```
+
+</details>
+
+## Screenshots
+
 ![examples_screenshot.png](samples%2FTextEditorDemo%2Fwwwroot%2Fexamples_screenshot.png)
+
 ### Rich Text Screenshot
-![Screenshot](DeltaExample.png)
+
+![Delta Example](docs/images/DeltaExample.png "Delta Example")
+
 ### Read Only Screenshot
-![Screenshot](InlineEditingExample.png)
+
+![Inline Editing Example](docs/images/InlineEditingExample.png "Inline Editing Example")
+
+## Adding Syntax Highlighting
+
+See [Syntax Highlighter Example](docs/SyntaxHighlighterExample.md) docs for more information.
+
+![Syntax Highlighter Example](docs/images/SyntaxHighlighterExample.png "Syntax Highlighter Example")
+
+---
 
 # Blazored TextEditor Forks
 

docs/README.md

@@ -0,0 +1,7 @@
+# Docs
+
+- [Syntax Highlighter](SyntaxHighlighterExample.md)
+
+## Images
+
+- [Images](images/README.md)

docs/SyntaxHighlighterExample.md

@@ -0,0 +1,50 @@
+# Syntax Highlighter Example
+
+See [Syntax Highlighter Module](https://quilljs.com/docs/modules/syntax) from the _QuillJS_ docs for more information.
+
+![Syntax Highlighter Example](images/SyntaxHighlighterExample.png "Syntax Highlighter Example")
+
+To turn on _Syntax Highlighting_ in your **Blazored Text Editor** just pass the property `Syntax="true"` and add the necessary library files (css/js).
+
+Then add the `ql-code-block` to your _Toolbar_.
+
+```html
+<BlazoredTextEditor Syntax="true">
+    <ToolbarContent>
+        ...
+        <span class="ql-formats">
+            <button class="ql-code-block"></button>
+        </span>
+    </ToolbarContent>
+    <EditorContent>
+        ...
+    </EditorContent>
+</BlazoredTextEditor>
+```
+
+## Blazor WASM
+
+Add to the `index.html` both CSS and JS for a syntax highlighter, for these examples I've chosen [highlight.js](https://highlightjs.org/).
+
+```html
+<head>
+    ...
+    <!-- Include your favorite highlight.js stylesheet -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
+    ...
+</head>
+```
+
+Make sure to add the `js` before your Quill js library or you will get an error.
+
+```html
+<body>
+    <!-- Include the highlight.js library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <!-- Quill library -->
+</body>
+```
+
+## Blazor Server
+
+Repeat the above but instead of the `index.html` you will want to add / update your `_Host.cshtml`.

docs/images/README.md

@@ -0,0 +1,17 @@
+# Images
+
+## HTML Example
+
+![HTML Example](HTMLExample.png "HTML Example")
+
+## Delta Example
+
+![Delta Example](DeltaExample.png "Delta Example")
+
+## Inline Editing Example
+
+![Inline Editing Example](InlineEditingExample.png "Inline Editing Example")
+
+## Syntax Highlighter Example
+
+![Syntax Highlighter Example](SyntaxHighlighterExample.png "Syntax Highlighter Example")

samples/BlazorClientSide/Pages/Index.razor

@@ -160,15 +160,63 @@
     Toggle Editor
 </button>
 
+<hr />
+
+<!-- ----- ----- ----- ----- ----- -->
+<!-- Syntax Highlighter Module -->
+<!-- ----- ----- ----- ----- ----- -->
+<h2>Syntax Highlighter</h2>
+<p>Off</p>
+<BlazoredTextEditor>
+    <ToolbarContent>
+        <span class="ql-formats">
+            <button class="ql-code-block"></button>
+        </span>
+    </ToolbarContent>
+    <EditorContent>
+<pre class="ql-syntax" spellcheck="false">
+const <span class="hljs-keyword">language</span> <span class="hljs-operator">=</span> "JavaScript";
+console.<span class="hljs-built_in">log</span>("I love " <span class="hljs-operator">+</span> <span class="hljs-keyword">language</span> <span class="hljs-operator">+</span> "!");</pre>
+    </EditorContent>
+</BlazoredTextEditor>
+
+<p>On</p>
+<BlazoredTextEditor @ref="@QuillCode" Syntax="true">
+    <ToolbarContent>
+        <span class="ql-formats">
+            <button class="ql-code-block"></button>
+        </span>
+    </ToolbarContent>
+    <EditorContent>
+<pre class="ql-syntax" spellcheck="false">
+const <span class="hljs-keyword">language</span> <span class="hljs-operator">=</span> "JavaScript";
+console.<span class="hljs-built_in">log</span>("I love " <span class="hljs-operator">+</span> <span class="hljs-keyword">language</span> <span class="hljs-operator">+</span> "!");</pre>
+    </EditorContent>
+</BlazoredTextEditor>
+<br />
+<button class="btn btn-primary"
+        @onclick="GetHTMLCode">
+    Get HTML
+</button>
+<br />
+<div>
+    <br />
+    @((MarkupString)QuillHTMLCodeContent)
+    @QuillHTMLCodeContent
+</div>
+<br />
+
 @code {
     BlazoredTextEditor QuillHtml;
     BlazoredTextEditor QuillNative;
     BlazoredTextEditor QuillReadOnly;
+    BlazoredTextEditor QuillCode;
 
     string QuillHTMLContent;
     string QuillContent;
     string QuillReadOnlyContent =
         @"<span><b>Read Only</b> <u>Content</u></span>";
+    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();
+    }
 }

samples/BlazorClientSide/Shared/NavMenu.razor

@@ -12,11 +12,6 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </li>
-        <li class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
-            </NavLink>
-        </li>
     </ul>
 </div>
 

samples/BlazorClientSide/wwwroot/index.html

@@ -10,6 +10,9 @@
     <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
 
+    <!-- Include your favorite highlight.js stylesheet -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
+
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/site.css" rel="stylesheet" />
 </head>
@@ -18,6 +21,8 @@
 
     <script src="_framework/blazor.webassembly.js"></script>
 
+    <!-- Include the highlight.js library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <!-- Quill library -->
     <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script>