Merge pull request #39 from gaelj/initial-development

Initial development

CodeMirror6/CodeMirror6Wrapper.razor

@@ -2,14 +2,25 @@
     @ContentBefore((Commands, Config, State))
 }
 
-<div id=@Id @attributes=@AdditionalAttributes></div>
+<div
+    id=@LoadingDivId
+    @attributes=@AdditionalAttributes
+    class="editor-loading"
+>
+    @for (var i = 0; i < (Doc?.Split("\n").Length ?? 10); i++) {
+        var randomWidth = new Random().Next(20, 80);
+        <div class="loading-animation" style=@($"width: {randomWidth}%")></div>
+    }
+</div>
+
+<div>
+    <div
+        id=@Id
+        @attributes=@AdditionalAttributes
+    >
+    </div>
+</div>
 
 @if (ContentAfter is not null && CmJsInterop is not null && Config is not null && Commands is not null) {
     @ContentAfter((Commands, Config, State))
 }
-
-<style>
-    .cm-editor {
-        resize: @ResizeStyle;
-    }
-</style>

CodeMirror6/CodeMirror6Wrapper.razor.cs

@@ -137,6 +137,8 @@ public partial class CodeMirror6Wrapper : ComponentBase, IAsyncDisposable
     /// <returns></returns>
     public CMCommands? Commands => CmJsInterop?.Commands;
 
+    private string LoadingDivId => $"{Id}_Loading";
+
     /// <summary>
     /// JavaScript interop instance
     /// </summary>
@@ -243,7 +245,8 @@ protected override async Task OnInitializedAsync()
             Editable,
             Language?.ToString(),
             AutoFormatMarkdown,
-            ReplaceEmojiCodes
+            ReplaceEmojiCodes,
+            ResizeStyle
         );
         try {
             await OnAfterRenderAsync(true); // try early initialization for Blazor WASM
@@ -321,6 +324,10 @@ protected override async Task OnParametersSetAsync()
             Config.ReplaceEmojiCodes = ReplaceEmojiCodes;
             await CmJsInterop.PropertySetters.SetReplaceEmojiCodes();
         }
+        if (Config.Resize != ResizeStyle) {
+            Config.Resize = ResizeStyle;
+            await CmJsInterop.PropertySetters.SetResize();
+        }
         shouldRender = true;
     }
 

CodeMirror6/CodeMirror6Wrapper.razor.css

@@ -1,4 +1,4 @@
-::deep :root {
+::deep :root {
     --ink-internal-border-radius: 0.25rem;
     --ink-internal-block-background-color: #f0f0f0;
     --ink-internal-block-padding: 0.5rem;
@@ -9,8 +9,24 @@
     max-height: inherit;
 }
 
-::deep .cm-editor .cm-focused {
-    outline: none;
+::deep .resize-none .cm-editor {
+    resize: none;
+}
+
+::deep .resize-vertical .cm-editor {
+    resize: vertical;
+}
+
+::deep .resize-horizontal .cm-editor {
+    resize: horizontal;
+}
+
+::deep .resize-both .cm-editor {
+    resize: both;
+}
+
+::deep .cm-editor.cm-focused {
+    outline: none !important;
 }
 
 ::deep .cm-mention {
@@ -44,3 +60,35 @@
     border-bottom-right-radius: 0.25rem;
     padding-bottom: 0.5rem;
 }
+
+/* Placeholder styles */
+.editor-loading {
+    overflow: auto;
+    max-height: inherit;
+    width: 100%;
+    display: block;
+    background-color: #2f2f2f;
+    position: relative;
+    overflow: hidden;
+    padding: 15px;
+}
+
+/* Shimmer effect */
+@keyframes shimmer {
+    0% {
+        background-position: -600px 0;
+    }
+    100% {
+        background-position: 600px 0;
+    }
+}
+
+/* Blurred lines */
+::deep .loading-animation {
+    height: 12px;
+    margin: 8px 0;
+    background: linear-gradient(to right, #eeeeee 8%, #ddddddab 18%, #eeeeee 33%);
+    background-size: 800px 104px;
+    animation: shimmer 1.5s infinite linear;
+    border-radius: 4px;
+}

CodeMirror6/CodeMirrorJsInterop.cs

@@ -372,6 +372,11 @@ internal Task SetMentionCompletions(List<CodeMirrorCompletion> mentionCompletion
     internal Task ForceRedraw() => cmJsInterop.ModuleInvokeVoidAsync(
         "forceRedraw"
     );
+
+    internal Task SetResize() => cmJsInterop.ModuleInvokeVoidAsync(
+        "setResize",
+        config.Resize
+    );
 }
 
 /// <summary>

CodeMirror6/Models/CodeMirrorConfiguration.cs

@@ -16,6 +16,7 @@ namespace CodeMirror6.Models;
 /// <param name="languageName"></param>
 /// <param name="autoFormatMarkdown"></param>
 /// <param name="replaceEmojiCodes"></param>
+/// <param name="resize">none, vertical, horizontal or both</param>
 public class CodeMirrorConfiguration(
     string? doc,
     string? placeholder,
@@ -26,7 +27,8 @@ public class CodeMirrorConfiguration(
     bool editable,
     string? languageName,
     bool autoFormatMarkdown,
-    bool replaceEmojiCodes)
+    bool replaceEmojiCodes,
+    string resize)
 {
 
     /// <summary>
@@ -79,4 +81,9 @@ public class CodeMirrorConfiguration(
     /// Whether to automatically replace :emoji_codes: with emoji
     /// </summary>
     [JsonPropertyName("replaceEmojiCodes")] public bool ReplaceEmojiCodes { get; internal set; } = replaceEmojiCodes;
+
+    /// <summary>
+    /// Controls whether the editor should have a resize handle like a textarea
+    /// </summary>
+    [JsonPropertyName("resize")] public string Resize { get; internal set; } = resize;
 }

CodeMirror6/NodeLib/src/CmConfiguration.ts

@@ -12,4 +12,5 @@ export class CmConfiguration {
     public languageName: string
     public autoFormatMarkdown: boolean
     public replaceEmojiCodes: boolean
+    public resize: string
 }

CodeMirror6/NodeLib/src/index.ts

@@ -54,12 +54,14 @@ import { htmlViewPlugin } from "./CmHtml"
  * @param id
  * @param initialConfig
  */
-export function initCodeMirror(
+export async function initCodeMirror(
     id: string,
     dotnetHelper: any,
     initialConfig: CmConfiguration,
     setup: CmSetup
 ) {
+    const minDelay = new Promise(res => setTimeout(res, 100))
+
     CMInstances[id] = new CmInstance()
     CMInstances[id].dotNetHelper = dotnetHelper
     CMInstances[id].setup = setup
@@ -155,6 +157,10 @@ export function initCodeMirror(
     extensions.push(linter(async view => await externalLintSource(view, dotnetHelper), getExternalLinterConfig()))
     if (setup.allowMultipleSelections === true) extensions.push(EditorState.allowMultipleSelections.of(true))
 
+    await minDelay
+
+
+
     CMInstances[id].state = EditorState.create({
         doc: initialConfig.doc,
         extensions: extensions,
@@ -163,7 +169,14 @@ export function initCodeMirror(
     CMInstances[id].view = new EditorView({
         state: CMInstances[id].state,
         parent: document.getElementById(id),
-    })
+
+    // Hide the placeholder once the editor is initialized
+    const loadingPlaceholder = document.getElementById(`${id}_Loading`)
+    if (loadingPlaceholder) {
+        loadingPlaceholder.style.display = 'none'
+    }
+    // add a class to allow resizing of the editor
+    setResize(id, initialConfig.resize)
 }
 
 async function updateListenerExtension(dotnetHelper: any, update: ViewUpdate) {
@@ -181,6 +194,16 @@ async function updateListenerExtension(dotnetHelper: any, update: ViewUpdate) {
     }
 }
 
+export function setResize(id: string, resize: string) {
+    setClassToParent(id, `resize-${resize}`, ['resize-horizontal', 'resize-both', 'resize-none', 'resize-vertical'])
+}
+
+export function setClassToParent(id: string, className: string, classNamesToRemove: string[]) {
+    const dom = CMInstances[id].view.dom.parentElement
+    classNamesToRemove.forEach(c => dom.classList.remove(c))
+    dom.classList.add(className)
+}
+
 export function setTabSize(id: string, size: number) {
     CMInstances[id].view.dispatch({
         effects: CMInstances[id].tabSizeCompartment.reconfigure(EditorState.tabSize.of(size))

Examples.Common/Example.razor

@@ -122,6 +122,8 @@ Result:
     Language=@CodeMirrorLanguage.Markdown
     AutoFormatMarkdown=@AutoFormatMarkdown
     LintDocument=@LintDocument
+    AllowHorizontalResize
+    AllowVerticalResize=false
 />
 
 Result:
@@ -149,6 +151,8 @@ Result:
     Language=@CodeMirrorLanguage.Markdown
     AutoFormatMarkdown=@AutoFormatMarkdown
     LintDocument=@LintDocument
+    AllowHorizontalResize=false
+    AllowVerticalResize=false
 />
 
 Result:
@@ -199,8 +203,8 @@ Result:
     };
     private string ButtonClass(CodeMirrorState state, string docStyleTag) => ButtonClass(state.MarkdownStylesAtSelections?.Contains(docStyleTag) == true);
     private string ButtonClass(bool enabled) => enabled
-        ? "btn btn-primary"
-        : "btn btn-outline-secondary";
+        ? "btn btn-sm btn-primary"
+        : "btn btn-sm btn-outline-secondary";
 
     private async Task ToggleEmojis(CMCommands commands)
     {