Started implementing text editor

Moonlight/Pages/_Host.cshtml

@@ -37,6 +37,7 @@
 <script src="/js/moonlight.js"></script>
 <script src="/_content/BlazorTable/BlazorTable.min.js"></script>
 <script src="/js/sweetalert2.js"></script>
+<script src="/js/ckeditor.js"></script>
 <script src="/_framework/blazor.server.js"></script>
 </body>
 </html>

Moonlight/Shared/Components/Forms/TextEditor.razor

@@ -0,0 +1,126 @@
+@inject IJSRuntime JsRuntime
+
+<style>
+    :root {
+        /* Overrides the border radius setting in the theme. */
+        --ck-border-radius: 4px;
+    
+        /* Overrides the default font size in the theme. */
+        --ck-font-size-base: 14px;
+    
+        /* Helper variables to avoid duplication in the colors. */
+        --ck-custom-background: #1e1e2d;
+        --ck-custom-foreground: hsl(255, 3%, 18%);
+        --ck-custom-border: hsl(300, 1%, 22%);
+        --ck-custom-white: hsl(0, 0%, 100%);
+    
+        /* -- Overrides generic colors. ------------------------------------------------------------- */
+    
+        --ck-color-base-foreground: var(--ck-custom-background);
+        --ck-color-focus-border: hsl(208, 90%, 62%);
+        --ck-color-text: hsl(0, 0%, 98%);
+        --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+        --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+    
+        /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+    
+        --ck-color-button-default-background: var(--ck-custom-background);
+        --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
+        --ck-color-button-default-active-background: hsl(270, 2%, 20%);
+        --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+        --ck-color-button-default-disabled-background: var(--ck-custom-background);
+    
+        --ck-color-button-on-background: var(--ck-custom-foreground);
+        --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
+        --ck-color-button-on-active-background: hsl(255, 4%, 14%);
+        --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+        --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+    
+        --ck-color-button-action-background: hsl(168, 76%, 42%);
+        --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+        --ck-color-button-action-active-background: hsl(168, 76%, 36%);
+        --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+        --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+        --ck-color-button-action-text: var(--ck-custom-white);
+    
+        /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+    
+        --ck-color-dropdown-panel-background: var(--ck-custom-background);
+        --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+    
+        /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+    
+        --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+        --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+    
+        /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+    
+        --ck-color-input-background: var(--ck-custom-background);
+        --ck-color-input-border: hsl(257, 3%, 43%);
+        --ck-color-input-text: hsl(0, 0%, 98%);
+        --ck-color-input-disabled-background: hsl(255, 4%, 21%);
+        --ck-color-input-disabled-border: hsl(250, 3%, 38%);
+        --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+    
+        /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+    
+        --ck-color-labeled-field-label-background: var(--ck-custom-background);
+    
+        /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+    
+        --ck-color-list-background: var(--ck-custom-background);
+        --ck-color-list-button-hover-background: var(--ck-custom-foreground);
+        --ck-color-list-button-on-background: hsl(208, 88%, 52%);
+        --ck-color-list-button-on-text: var(--ck-custom-white);
+    
+        /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+    
+        --ck-color-panel-background: var(--ck-custom-background);
+        --ck-color-panel-border: var(--ck-custom-border);
+    
+        /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+    
+        --ck-color-toolbar-background: var(--ck-custom-background);
+        --ck-color-toolbar-border: var(--ck-custom-border);
+    
+        /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+    
+        --ck-color-tooltip-background: hsl(252, 7%, 14%);
+        --ck-color-tooltip-text: hsl(0, 0%, 93%);
+    
+        /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+    
+        --ck-color-image-caption-background: hsl(0, 0%, 97%);
+        --ck-color-image-caption-text: hsl(0, 0%, 20%);
+    
+        /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+    
+        --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+        --ck-color-widget-hover-border: hsl(43, 100%, 68%);
+        --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+    
+        /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+    
+        --ck-color-link-default: hsl(190, 100%, 75%);
+    }
+</style>
+
+<div id="@Id" class="card card-body bg-black"></div>
+
+@code
+{
+    private string Id;
+
+    protected override void OnInitialized()
+    {
+        Id = "editor" + GetHashCode();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JsRuntime.InvokeVoidAsync("moonlight.textEditor.create", Id);
+        }
+    }
+}

Moonlight/Shared/Views/Test.razor

@@ -0,0 +1,3 @@
+@page "/test"
+
+<TextEditor />

Moonlight/wwwroot/css/utils.css

@@ -19,3 +19,7 @@
 .blur {
     filter: blur(5px);
 }
+
+.ck-powered-by {
+    display: none;
+}

Moonlight/wwwroot/js/moonlight.js

@@ -105,5 +105,29 @@ window.moonlight = {
 
             return text;
         }
+    },
+    textEditor: {
+        create: function(id)
+        {
+            BalloonEditor
+                .create(document.getElementById(id), {
+                    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
+                    heading: {
+                        options: [
+                            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+                            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+                            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
+                        ]
+                    }
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        },
+        get: function (id)
+        {
+            let editor = document.getElementById(id).ckeditorInstance;
+            return editor.getData();
+        }
     }
 }