From 70d08d3c5011b1fd9109dc8ef9b27abd764a9ad2 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
Date: Fri, 19 Jul 2024 18:28:58 +0300
Subject: [PATCH 01/24] docs(editor): kb for adding icons

---
 knowledge-base/editor-add-icons.md | 89 ++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 knowledge-base/editor-add-icons.md

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
new file mode 100644
index 000000000..f038b8fa2
--- /dev/null
+++ b/knowledge-base/editor-add-icons.md
@@ -0,0 +1,89 @@
+---
+title: Add icons in Editor
+description: How to insert icons in Editor?
+type: how-to
+page_title: Add icons in Editor
+slug: editor-kb-add-icons
+position: 
+tags: editor
+ticketid: 
+res_type: kb
+---
+
+## Environment
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Editor for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+
+## Description
+
+I want to add icons...
+
+## Solution
+
+Modify the schema....
+
+````CSHTML
+@using Telerik.Blazor.Components.Editor
+
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
+
+<script suppress-error="BL9992">  
+    var icon = {
+        attrs: {
+            class: { default: null },
+            type: { default: null },
+        },
+        group: "inline",
+        content: "text*",
+        inline: true,
+        parseDOM: [
+            {
+                tag: "i",
+                getAttrs: (dom) => ({
+                    class: dom.getAttribute("class"),
+                }),
+            },
+        ],
+        toDOM: (node) => {
+            const attrs = {
+                class: node.attrs.class
+            };
+            return ["i", attrs];
+        },
+    };
+    debugger
+
+    window.schemaProvider = (args) => {
+        const schema = args.getSchema();
+        const Schema = args.ProseMirror.Schema
+
+        let nodes = schema.spec.nodes.addToEnd("i", icon);
+
+        const newSchema = new Schema({ nodes });
+        return newSchema;
+    }
+
+</script>
+
+<i class="fas fa-x"></i>
+
+<TelerikEditor @bind-Value="@EditorValue" Tools="@EditorToolSets.All"
+               Schema="schemaProvider"
+               Height="300px"               
+               EditMode="@EditorEditMode.Div">
+</TelerikEditor>
+
+@code {
+    private string EditorValue { get; set; } = @"Here is an example icon in the Editor content <i class='fa fa-info-circle'></i>";
+
+    // private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { ViewHtml };
+
+}
+```
\ No newline at end of file

From 1ed2b06f3a6c2b886dbd18e051dce718c95637bb Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
Date: Fri, 2 Aug 2024 16:37:46 +0300
Subject: [PATCH 02/24] chore(editor): add description and one more sample

---
 knowledge-base/editor-add-icons.md | 138 +++++++++++++++++++++++++----
 1 file changed, 123 insertions(+), 15 deletions(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index f038b8fa2..aeeff90a2 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -1,11 +1,11 @@
 ---
-title: Add icons in Editor
-description: How to insert icons in Editor?
+title: Add Icons in Editor
+description: How to insert icon tags in Editor?
 type: how-to
-page_title: Add icons in Editor
+page_title: Add Icons in Editor
 slug: editor-kb-add-icons
 position: 
-tags: editor
+tags: editor, blazor, icon, schema, prosemirror
 ticketid: 
 res_type: kb
 ---
@@ -23,18 +23,55 @@ res_type: kb
 
 ## Description
 
-I want to add icons...
+I want to add custom icons in the Editor content. When adding an icon such as `<i class="fa-light fa-envelope">`, the icon's HTML disappears upon saving.
+
+How can I add an `<i>` element inside the Editor?
 
 ## Solution
 
-Modify the schema....
+The built-in ProseMirror schema that the Editor uses does not support `<i>` tag. To allow adding icons in the Editor content:
+
+1. [Modify the ProseMirror schema]({%slug editor-modify-default-schema%}) to include a node for the `<i>` element.
+2. Ensure the CSS classes for the icons are applied. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%})
+    * [Iframe Edit Mode](#add-icons-in-iframe-edit-mode)
+    * [Div Edit Mode](#add-icons-in-div-edit-mode)
+
+
+### Add icons in Iframe Edit Mode
+
+When the [EditMode of the Editor is set to `EditorEditMode.Iframe`]({%slug editor-edit-modes-iframe%}), the content area is an editable `<iframe>` element that does not inherit the CSS rules from the current page.
+
+This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. [This will be supported in a future UI for Blazor version](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe). For the time-being you can inject the stylesheet with JSInterop in the `OnAfterRenderAsync`.
+
+>caption Add icons in an Editor with Iframe Edit Mode
 
 ````CSHTML
 @using Telerik.Blazor.Components.Editor
+@inject IJSRuntime js
 
-<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
+<TelerikEditor @bind-Value="@EditorValue"
+               Tools="@EditorTools"
+               Schema="schemaProvider"
+               Width="600px"
+               Height="300px">
+</TelerikEditor>
 
-<script suppress-error="BL9992">  
+@code {
+    private string EditorValue { get; set; } = @"Here is an example icon in the Editor content <i class='fa fa-info-circle'></i>";
+
+    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await js.InvokeVoidAsync("injectEditorStylesheet");
+        }
+    }
+}
+
+@* Move JavaScript code to a separate JS file in production *@
+<script suppress-error="BL9992">   
     var icon = {
         attrs: {
             class: { default: null },
@@ -58,7 +95,6 @@ Modify the schema....
             return ["i", attrs];
         },
     };
-    debugger
 
     window.schemaProvider = (args) => {
         const schema = args.getSchema();
@@ -70,20 +106,92 @@ Modify the schema....
         return newSchema;
     }
 
+    function injectEditorStylesheet() {
+        var doc = document.querySelector("iframe").contentWindow.document;
+        var head = doc.querySelector("head");
+
+        var cssLink1 = document.createElement("link");
+        cssLink1.href = "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css";
+        cssLink1.rel = "stylesheet";
+        cssLink1.type = "text/css";
+
+        var cssLink2 = document.createElement("link");
+        cssLink2.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
+        cssLink2.rel = "stylesheet";
+        cssLink2.type = "text/css";
+
+        head.appendChild(cssLink1);
+        head.appendChild(cssLink2);
+    };
 </script>
+````
+
+### Add icons in Div Edit Mode
+
+When the [EditMode of the Editor is set to `EditorEditMode.Div`]({%slug editor-edit-modes-div%}), the content area is an editable <div> element that inherits the CSS rules from the current page.
+
+This allows you to include the icons stylesheet in the `<head>` of the web page along with the other stylesheets. 
+
+>caption Add icons in an Editor with Div Edit Mode
 
-<i class="fas fa-x"></i>
+````CSHTML
+@using Telerik.Blazor.Components.Editor
 
-<TelerikEditor @bind-Value="@EditorValue" Tools="@EditorToolSets.All"
+@* Just one example of including custom font icon libraries.
+Make sure to use the correct way and resources for your actual project *@
+<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
+
+<TelerikEditor @bind-Value="@EditorValue"
+               Tools="@EditorTools"
                Schema="schemaProvider"
-               Height="300px"               
-               EditMode="@EditorEditMode.Div">
+               EditMode="@EditorEditMode.Div"
+               Width="600px"
+               Height="300px">
 </TelerikEditor>
 
 @code {
     private string EditorValue { get; set; } = @"Here is an example icon in the Editor content <i class='fa fa-info-circle'></i>";
 
-    // private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { ViewHtml };
-
+    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };
 }
+
+@* Move JavaScript code to a separate JS file in production *@
+<script suppress-error="BL9992">
+    var icon = {
+        attrs: {
+            class: { default: null },
+            type: { default: null },
+        },
+        group: "inline",
+        content: "text*",
+        inline: true,
+        parseDOM: [
+            {
+                tag: "i",
+                getAttrs: (dom) => ({
+                    class: dom.getAttribute("class"),
+                }),
+            },
+        ],
+        toDOM: (node) => {
+            const attrs = {
+                class: node.attrs.class
+            };
+            return ["i", attrs];
+        },
+    };
+    debugger
+
+    window.schemaProvider = (args) => {
+        const schema = args.getSchema();
+        const Schema = args.ProseMirror.Schema
+
+        let nodes = schema.spec.nodes.addToEnd("i", icon);
+
+        const newSchema = new Schema({ nodes });
+        return newSchema;
+    }
+
+</script>
 ```
\ No newline at end of file

From f6674ac96ea7a00d77e152275b0f689ee7e5adbb Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:01:45 +0300
Subject: [PATCH 03/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index aeeff90a2..fcd6dd582 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -29,7 +29,7 @@ How can I add an `<i>` element inside the Editor?
 
 ## Solution
 
-The built-in ProseMirror schema that the Editor uses does not support `<i>` tag. To allow adding icons in the Editor content:
+The built-in ProseMirror schema that the Editor uses does not support an `<i>` tag. To allow adding icons in the Editor content:
 
 1. [Modify the ProseMirror schema]({%slug editor-modify-default-schema%}) to include a node for the `<i>` element.
 2. Ensure the CSS classes for the icons are applied. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%})

From 240136ba2bacc1ea0328e7b5acdee4ee1dd8d9de Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:01:53 +0300
Subject: [PATCH 04/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index fcd6dd582..5fef95fc3 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -32,7 +32,7 @@ How can I add an `<i>` element inside the Editor?
 The built-in ProseMirror schema that the Editor uses does not support an `<i>` tag. To allow adding icons in the Editor content:
 
 1. [Modify the ProseMirror schema]({%slug editor-modify-default-schema%}) to include a node for the `<i>` element.
-2. Ensure the CSS classes for the icons are applied. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%})
+2. Ensure the CSS classes for the icons are applied. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%}):
     * [Iframe Edit Mode](#add-icons-in-iframe-edit-mode)
     * [Div Edit Mode](#add-icons-in-div-edit-mode)
 

From 8dfa000d532c6cd83fce999a72f2fe31fa8d636b Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:01:58 +0300
Subject: [PATCH 05/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 5fef95fc3..7f918eb7b 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -126,7 +126,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 </script>
 ````
 
-### Add icons in Div Edit Mode
+### Add Icons in Div Edit Mode
 
 When the [EditMode of the Editor is set to `EditorEditMode.Div`]({%slug editor-edit-modes-div%}), the content area is an editable <div> element that inherits the CSS rules from the current page.
 

From e932db6062d3a058b68510fb9abbe009b441cac5 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:02:53 +0300
Subject: [PATCH 06/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 7f918eb7b..f8c7885ba 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -37,7 +37,7 @@ The built-in ProseMirror schema that the Editor uses does not support an `<i>` t
     * [Div Edit Mode](#add-icons-in-div-edit-mode)
 
 
-### Add icons in Iframe Edit Mode
+### Add Icons in Iframe Edit Mode
 
 When the [EditMode of the Editor is set to `EditorEditMode.Iframe`]({%slug editor-edit-modes-iframe%}), the content area is an editable `<iframe>` element that does not inherit the CSS rules from the current page.
 

From 4d5fb07660dad11c7faf522b7055a629f10c3464 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
Date: Mon, 5 Aug 2024 17:40:18 +0300
Subject: [PATCH 07/24] chore(editor): address feedback

---
 knowledge-base/editor-add-icons.md | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index f8c7885ba..08bf373f1 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -1,6 +1,6 @@
 ---
 title: Add Icons in Editor
-description: How to insert icon tags in Editor?
+description: How to allow inserting <i> tags in the Editor for Blazor to render custom icons in the Editor content?
 type: how-to
 page_title: Add Icons in Editor
 slug: editor-kb-add-icons
@@ -23,9 +23,10 @@ res_type: kb
 
 ## Description
 
-I want to add custom icons in the Editor content. When adding an icon such as `<i class="fa-light fa-envelope">`, the icon's HTML disappears upon saving.
+This KB article answers the following questions:
 
-How can I add an `<i>` element inside the Editor?
+* How to add custom icons in the Editor content? When adding an icon such as `<i class="fa-light fa-envelope">`, the icon's HTML disappears upon saving.
+* How can I add an `<i>` element inside the Editor?
 
 ## Solution
 
@@ -71,7 +72,9 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 }
 
 @* Move JavaScript code to a separate JS file in production *@
-<script suppress-error="BL9992">   
+<script suppress-error="BL9992">
+
+    //define the icon node
     var icon = {
         attrs: {
             class: { default: null },
@@ -96,6 +99,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         },
     };
 
+    //add the icon node to the Editor ProseMirror schema
     window.schemaProvider = (args) => {
         const schema = args.getSchema();
         const Schema = args.ProseMirror.Schema
@@ -106,6 +110,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         return newSchema;
     }
 
+    //inject the stylesheet for the icons, so they are properly visualized
     function injectEditorStylesheet() {
         var doc = document.querySelector("iframe").contentWindow.document;
         var head = doc.querySelector("head");
@@ -123,6 +128,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         head.appendChild(cssLink1);
         head.appendChild(cssLink2);
     };
+
 </script>
 ````
 
@@ -158,6 +164,8 @@ Make sure to use the correct way and resources for your actual project *@
 
 @* Move JavaScript code to a separate JS file in production *@
 <script suppress-error="BL9992">
+
+    //define the icon node
     var icon = {
         attrs: {
             class: { default: null },
@@ -183,6 +191,7 @@ Make sure to use the correct way and resources for your actual project *@
     };
     debugger
 
+    //add the icon node to the Editor ProseMirror schema
     window.schemaProvider = (args) => {
         const schema = args.getSchema();
         const Schema = args.ProseMirror.Schema

From c0ca39ae49b3ac3a104bef48bba69807ebc079ca Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
Date: Mon, 5 Aug 2024 17:55:26 +0300
Subject: [PATCH 08/24] chore(editor): update iframe section

---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 08bf373f1..d922f6e5e 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -42,7 +42,7 @@ The built-in ProseMirror schema that the Editor uses does not support an `<i>` t
 
 When the [EditMode of the Editor is set to `EditorEditMode.Iframe`]({%slug editor-edit-modes-iframe%}), the content area is an editable `<iframe>` element that does not inherit the CSS rules from the current page.
 
-This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. [This will be supported in a future UI for Blazor version](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe). For the time-being you can inject the stylesheet with JSInterop in the `OnAfterRenderAsync`.
+This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. At the time of writing (UI for Blazor **6.1.0**), [the Editor does not support injecting your CSS files into the Iframe](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe) but you can inject them with JSInterop in the `OnAfterRenderAsync`.
 
 >caption Add icons in an Editor with Iframe Edit Mode
 

From 47b7ad88fdb33ceef01dcd3c454a63a61ee94c5c Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:22:08 +0300
Subject: [PATCH 09/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index d922f6e5e..dfdbc746e 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -1,5 +1,5 @@
 ---
-title: Add Icons in Editor
+title: Add Font Icons in Editor
 description: How to allow inserting <i> tags in the Editor for Blazor to render custom icons in the Editor content?
 type: how-to
 page_title: Add Icons in Editor

From 33fc877ea38a7adb2e4fba22faf966813f75e35f Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:22:15 +0300
Subject: [PATCH 10/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index dfdbc746e..0b078e202 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -5,7 +5,7 @@ type: how-to
 page_title: Add Icons in Editor
 slug: editor-kb-add-icons
 position: 
-tags: editor, blazor, icon, schema, prosemirror
+tags: blazor, editor, prosemirror, schema, icon
 ticketid: 
 res_type: kb
 ---

From bb8f7e43b475e6678e698cbb9ed816f442817163 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:22:31 +0300
Subject: [PATCH 11/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 0b078e202..27fda9d2e 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -58,7 +58,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 </TelerikEditor>
 
 @code {
-    private string EditorValue { get; set; } = @"Here is an example icon in the Editor content <i class='fa fa-info-circle'></i>";
+    private string EditorValue { get; set; } = @"<p>Here is an example icon in the Editor content <i class='fa fa-info-circle'></i></p>";
 
     private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };
 

From a09530c737ad1184e13b91e8748f7955d805406c Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:22:56 +0300
Subject: [PATCH 12/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 27fda9d2e..d103cf41a 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -125,8 +125,8 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         cssLink2.rel = "stylesheet";
         cssLink2.type = "text/css";
 
-        head.appendChild(cssLink1);
-        head.appendChild(cssLink2);
+        head.appendChild(bootstrapCssLink);
+        head.appendChild(fontAwesomeCssLink);
     };
 
 </script>

From 74930d06f2ec7273c65ef78b21022cdb0fd4b6a7 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:23:23 +0300
Subject: [PATCH 13/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index d103cf41a..f33f70194 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -134,7 +134,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 
 ### Add Icons in Div Edit Mode
 
-When the [EditMode of the Editor is set to `EditorEditMode.Div`]({%slug editor-edit-modes-div%}), the content area is an editable <div> element that inherits the CSS rules from the current page.
+When the [Editor `EditMode` is set to `EditorEditMode.Div`]({%slug editor-edit-modes-div%}), the content area is a `<div contenteditable="true">` element that inherits the CSS rules from the current page.
 
 This allows you to include the icons stylesheet in the `<head>` of the web page along with the other stylesheets. 
 

From 45950f6b67ea033d701a8db357c1c7612919bcd3 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:23:38 +0300
Subject: [PATCH 14/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index f33f70194..153b4ebab 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -136,7 +136,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 
 When the [Editor `EditMode` is set to `EditorEditMode.Div`]({%slug editor-edit-modes-div%}), the content area is a `<div contenteditable="true">` element that inherits the CSS rules from the current page.
 
-This allows you to include the icons stylesheet in the `<head>` of the web page along with the other stylesheets. 
+This allows you to include the icon stylesheets in the `<head>` of the web page along with the other stylesheets. 
 
 >caption Add icons in an Editor with Div Edit Mode
 

From ce47697e641065320e3f75add9612e1307054637 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:23:48 +0300
Subject: [PATCH 15/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 153b4ebab..2b8c6b114 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -40,7 +40,7 @@ The built-in ProseMirror schema that the Editor uses does not support an `<i>` t
 
 ### Add Icons in Iframe Edit Mode
 
-When the [EditMode of the Editor is set to `EditorEditMode.Iframe`]({%slug editor-edit-modes-iframe%}), the content area is an editable `<iframe>` element that does not inherit the CSS rules from the current page.
+When the [Editor `EditMode` is set to `EditorEditMode.Iframe`]({%slug editor-edit-modes-iframe%}), the content area is inside an `<iframe>` element that does not apply the CSS rules from the current page.
 
 This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. At the time of writing (UI for Blazor **6.1.0**), [the Editor does not support injecting your CSS files into the Iframe](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe) but you can inject them with JSInterop in the `OnAfterRenderAsync`.
 

From ae3208321ff6f485c853ab5e2e6dff6cc2852505 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:24:18 +0300
Subject: [PATCH 16/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 2b8c6b114..2ec062806 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -33,7 +33,7 @@ This KB article answers the following questions:
 The built-in ProseMirror schema that the Editor uses does not support an `<i>` tag. To allow adding icons in the Editor content:
 
 1. [Modify the ProseMirror schema]({%slug editor-modify-default-schema%}) to include a node for the `<i>` element.
-2. Ensure the CSS classes for the icons are applied. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%}):
+2. Ensure the required font icon stylesheets can affect the Editor content. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%}):
     * [Iframe Edit Mode](#add-icons-in-iframe-edit-mode)
     * [Div Edit Mode](#add-icons-in-div-edit-mode)
 

From 0a66fdf63e1d89809ba77d627a3e17dded26d30e Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:25:05 +0300
Subject: [PATCH 17/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 2ec062806..a42e621a1 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -30,7 +30,7 @@ This KB article answers the following questions:
 
 ## Solution
 
-The built-in ProseMirror schema that the Editor uses does not support an `<i>` tag. To allow adding icons in the Editor content:
+The default schema of the Telerik Editor does not include an `<i>` tag, so the Editor strips such elements automatically. To allow adding font icons through `<i>` tags in the Editor content:
 
 1. [Modify the ProseMirror schema]({%slug editor-modify-default-schema%}) to include a node for the `<i>` element.
 2. Ensure the required font icon stylesheets can affect the Editor content. The approach varies depending on the [edit mode of the Editor]({%slug editor-edit-modes-overview%}):

From b73e255e312b6551dfc42fe60f48c987fc26e744 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
Date: Mon, 12 Aug 2024 18:45:22 +0300
Subject: [PATCH 18/24] chore(editor): address feedback

---
 knowledge-base/editor-add-icons.md | 33 ++++++++++++++++--------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index a42e621a1..cdc697f03 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -44,7 +44,7 @@ When the [Editor `EditMode` is set to `EditorEditMode.Iframe`]({%slug editor-edi
 
 This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. At the time of writing (UI for Blazor **6.1.0**), [the Editor does not support injecting your CSS files into the Iframe](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe) but you can inject them with JSInterop in the `OnAfterRenderAsync`.
 
->caption Add icons in an Editor with Iframe Edit Mode
+>caption Add icons in an Editor with Iframe edit mode
 
 ````CSHTML
 @using Telerik.Blazor.Components.Editor
@@ -75,7 +75,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 <script suppress-error="BL9992">
 
     //define the icon node
-    var icon = {
+    var iconNode = {
         attrs: {
             class: { default: null },
             type: { default: null },
@@ -104,7 +104,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         const schema = args.getSchema();
         const Schema = args.ProseMirror.Schema
 
-        let nodes = schema.spec.nodes.addToEnd("i", icon);
+        let nodes = schema.spec.nodes.addToEnd("i", iconNode);
 
         const newSchema = new Schema({ nodes });
         return newSchema;
@@ -115,15 +115,13 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         var doc = document.querySelector("iframe").contentWindow.document;
         var head = doc.querySelector("head");
 
-        var cssLink1 = document.createElement("link");
-        cssLink1.href = "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css";
-        cssLink1.rel = "stylesheet";
-        cssLink1.type = "text/css";
+        var bootstrapCssLink = document.createElement("link");
+        bootstrapCssLink.href = "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css";
+        bootstrapCssLink.rel = "stylesheet";
 
-        var cssLink2 = document.createElement("link");
-        cssLink2.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
-        cssLink2.rel = "stylesheet";
-        cssLink2.type = "text/css";
+        var fontAwesomeCssLink = document.createElement("link");
+        fontAwesomeCssLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
+        fontAwesomeCssLink.rel = "stylesheet";
 
         head.appendChild(bootstrapCssLink);
         head.appendChild(fontAwesomeCssLink);
@@ -138,7 +136,7 @@ When the [Editor `EditMode` is set to `EditorEditMode.Div`]({%slug editor-edit-m
 
 This allows you to include the icon stylesheets in the `<head>` of the web page along with the other stylesheets. 
 
->caption Add icons in an Editor with Div Edit Mode
+>caption Add icons in an Editor with Div edit mode
 
 ````CSHTML
 @using Telerik.Blazor.Components.Editor
@@ -166,7 +164,7 @@ Make sure to use the correct way and resources for your actual project *@
 <script suppress-error="BL9992">
 
     //define the icon node
-    var icon = {
+    var iconNode = {
         attrs: {
             class: { default: null },
             type: { default: null },
@@ -196,11 +194,16 @@ Make sure to use the correct way and resources for your actual project *@
         const schema = args.getSchema();
         const Schema = args.ProseMirror.Schema
 
-        let nodes = schema.spec.nodes.addToEnd("i", icon);
+        let nodes = schema.spec.nodes.addToEnd("i", iconNode);
 
         const newSchema = new Schema({ nodes });
         return newSchema;
     }
 
 </script>
-```
\ No newline at end of file
+````
+
+## See Also
+
+* [Editor Custom Tools]({%slug editor-custom-tools%})
+* [Modify the ProseMirror Schema]({%slug editor-modify-default-schema%})
\ No newline at end of file

From f4a4d2bfaedfd9d4c5bf28249c70f2ecce29b473 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:14:27 +0300
Subject: [PATCH 19/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index cdc697f03..ca70e685e 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -205,5 +205,5 @@ Make sure to use the correct way and resources for your actual project *@
 
 ## See Also
 
-* [Editor Custom Tools]({%slug editor-custom-tools%})
+* [Custom Editor Tools]({%slug editor-custom-tools%})
 * [Modify the ProseMirror Schema]({%slug editor-modify-default-schema%})
\ No newline at end of file

From 6b3aecc4b275188623418416e1420bba7cb74b56 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:14:52 +0300
Subject: [PATCH 20/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index ca70e685e..5a1369f66 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -42,7 +42,7 @@ The default schema of the Telerik Editor does not include an `<i>` tag, so the E
 
 When the [Editor `EditMode` is set to `EditorEditMode.Iframe`]({%slug editor-edit-modes-iframe%}), the content area is inside an `<iframe>` element that does not apply the CSS rules from the current page.
 
-This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. At the time of writing (UI for Blazor **6.1.0**), [the Editor does not support injecting your CSS files into the Iframe](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe) but you can inject them with JSInterop in the `OnAfterRenderAsync`.
+This means that you need to inject the icons stylesheet into the `<iframe>`, so the icons are properly rendered. At the time of writing (UI for Blazor **6.1.0**), [the Editor does not support injecting your CSS files into the iframe](https://feedback.telerik.com/blazor/1543925-add-the-ability-to-inject-css-files-into-the-iframe) but you can inject them with JSInterop in `OnAfterRenderAsync`.
 
 >caption Add icons in an Editor with Iframe edit mode
 

From 4a7adb84bf4a6c3fff8543c82f521f0cf2a9c619 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:14:58 +0300
Subject: [PATCH 21/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 5a1369f66..67723aca8 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -2,7 +2,7 @@
 title: Add Font Icons in Editor
 description: How to allow inserting <i> tags in the Editor for Blazor to render custom icons in the Editor content?
 type: how-to
-page_title: Add Icons in Editor
+page_title: How to Add Font Icons in the Telerik Editor for Blazor
 slug: editor-kb-add-icons
 position: 
 tags: blazor, editor, prosemirror, schema, icon

From 9b88af6ac3550f67abf7b5370e29cce784b666b9 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:15:08 +0300
Subject: [PATCH 22/24] Update knowledge-base/editor-add-icons.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
 knowledge-base/editor-add-icons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 67723aca8..1ff2e7820 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -1,6 +1,6 @@
 ---
 title: Add Font Icons in Editor
-description: How to allow inserting <i> tags in the Editor for Blazor to render custom icons in the Editor content?
+description: How to insert <i> tags in the Editor for Blazor to render custom icons in the Editor content?
 type: how-to
 page_title: How to Add Font Icons in the Telerik Editor for Blazor
 slug: editor-kb-add-icons

From 8b18b4dd75120e2b64f48db15571e08994b6592d Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:16:05 +0300
Subject: [PATCH 23/24] Update knowledge-base/editor-add-icons.md

---
 knowledge-base/editor-add-icons.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 1ff2e7820..073fcd1fa 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -53,7 +53,6 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 <TelerikEditor @bind-Value="@EditorValue"
                Tools="@EditorTools"
                Schema="schemaProvider"
-               Width="600px"
                Height="300px">
 </TelerikEditor>
 

From 4e14ca2095884482728c942fff77376531b995c0 Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:16:32 +0300
Subject: [PATCH 24/24] Update knowledge-base/editor-add-icons.md

---
 knowledge-base/editor-add-icons.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 073fcd1fa..1262b4407 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -149,7 +149,6 @@ Make sure to use the correct way and resources for your actual project *@
                Tools="@EditorTools"
                Schema="schemaProvider"
                EditMode="@EditorEditMode.Div"
-               Width="600px"
                Height="300px">
 </TelerikEditor>