Merge pull request #87 from gaelj/release

Release 0.2.1

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.2.1 - 2024-01-31
+
+### ✨ Introduce new features
+
+- Add DisplayName() extension to CodeMirrorLanguage enum
+- Allow scrolling past the end of the document
+- Implement white space & trailing white space highlighting
+
+### 🐛 Fix a bug
+
+- Fix dragging text was highjacked by the file drag overlay
+- Fix empty language definitions in example
+
+### ✏️ Fix typos
+
+- Display Plain Text language name with space
+
 ## 0.2.0 - 2024-01-31
 
 ### ✨ Introduce new features

CodeMirror6/CodeMirror6.csproj

@@ -9,7 +9,7 @@
     <AssemblyName>GaelJ.BlazorCodeMirror6</AssemblyName>
     <IsPackable>true</IsPackable>
     <PackageId>GaelJ.BlazorCodeMirror6</PackageId>
-    <Version>0.2.0</Version>
+    <Version>0.2.1</Version>
     <IncludeSymbols>true</IncludeSymbols>
     <SymbolPackageFormat>snupkg</SymbolPackageFormat>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
@@ -63,4 +63,4 @@
     <None Include="..\icon.png" Pack="true" PackagePath="\" />
     <None Include="..\codemirror.svg" Pack="true" PackagePath="\" />
   </ItemGroup>
-</Project>
+</Project>

CodeMirror6/CodeMirror6Wrapper.razor

@@ -32,6 +32,8 @@
             UploadFile="@UploadFile"
             MergeViewConfiguration="@MergeViewConfiguration"
             FileNameOrExtension="@FileNameOrExtension"
+            HighlightWhitespace="@HighlightWhitespace"
+            HighlightTrailingWhitespace="@HighlightTrailingWhitespace"
         />
     </ChildContent>
     <ErrorContent Context="c">

CodeMirror6/CodeMirror6Wrapper.razor.cs

@@ -155,6 +155,16 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// <value></value>
     [Parameter] public UnifiedMergeConfig? MergeViewConfiguration { get; set; }
     /// <summary>
+    /// Whether to allow horizontal resizing similar to a textarea
+    /// </summary>
+    /// <value></value>
+    [Parameter] public bool HighlightTrailingWhitespace { get; set; }
+    /// <summary>
+    /// Whether to allow horizontal resizing similar to a textarea
+    /// </summary>
+    /// <value></value>
+    [Parameter] public bool HighlightWhitespace { get; set; }
+    /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>
     /// <value></value>

CodeMirror6/CodeMirror6WrapperInternal.razor.cs

@@ -156,6 +156,16 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// <value></value>
     [Parameter] public UnifiedMergeConfig? MergeViewConfiguration { get; set; }
     /// <summary>
+    /// Whether to allow horizontal resizing similar to a textarea
+    /// </summary>
+    /// <value></value>
+    [Parameter] public bool HighlightTrailingWhitespace { get; set; }
+    /// <summary>
+    /// Whether to allow horizontal resizing similar to a textarea
+    /// </summary>
+    /// <value></value>
+    [Parameter] public bool HighlightWhitespace { get; set; }
+    /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>
     /// <value></value>
@@ -201,7 +211,9 @@ protected override async Task OnInitializedAsync()
             LineWrapping,
             LintDocument is not null,
             MergeViewConfiguration,
-            FileNameOrExtension
+            FileNameOrExtension,
+            HighlightTrailingWhitespace,
+            HighlightWhitespace
         );
         try {
             if (IsWASM)
@@ -302,6 +314,14 @@ protected override async Task OnParametersSetAsync()
             Config.MergeViewConfiguration = MergeViewConfiguration;
             await CmJsInterop.PropertySetters.SetUnifiedMergeView();
         }
+        if (Config.HighlightTrailingWhitespace != HighlightTrailingWhitespace) {
+            Config.HighlightTrailingWhitespace = HighlightTrailingWhitespace;
+            await CmJsInterop.PropertySetters.SetHighlightTrailingWhitespace();
+        }
+        if (Config.HighlightWhitespace != HighlightWhitespace) {
+            Config.HighlightWhitespace = HighlightWhitespace;
+            await CmJsInterop.PropertySetters.SetHighlightWhitespace();
+        }
         shouldRender = true;
     }
 

CodeMirror6/Commands/CMConfigurationSetters.cs

@@ -134,6 +134,16 @@ internal Task SetUnifiedMergeView() => cmJsInterop.ModuleInvokeVoidAsync(
         config.MergeViewConfiguration
     );
 
+    internal Task SetHighlightTrailingWhitespace() => cmJsInterop.ModuleInvokeVoidAsync(
+        "setHighlightTrailingWhitespace",
+        config.HighlightTrailingWhitespace
+    );
+
+    internal Task SetHighlightWhitespace() => cmJsInterop.ModuleInvokeVoidAsync(
+        "setHighlightWhitespace",
+        config.HighlightWhitespace
+    );
+
     internal Task<List<string>?> GetAllSupportedLanguageNames() => cmJsInterop.ModuleInvokeAsync<List<string>>(
         "getAllSupportedLanguageNames"
     );

CodeMirror6/Converters/JsonStringValueAttribute.cs

@@ -1,12 +1,15 @@
 namespace GaelJ.BlazorCodeMirror6.Converters;
 
+/// <summary>
+/// Specifies the string value of a field when serialized to JSON.
+/// </summary>
+/// <param name="value"></param>
 [AttributeUsage(AttributeTargets.Field)]
-public class JsonStringValueAttribute : Attribute
+public class JsonStringValueAttribute(string value) : Attribute
 {
-    public string Value { get; }
-
-    public JsonStringValueAttribute(string value)
-    {
-        Value = value;
-    }
+    /// <summary>
+    /// The string value of the field when serialized to JSON.
+    /// </summary>
+    /// <value></value>
+    public string Value { get; } = value;
 }

CodeMirror6/Models/CodeMirrorConfiguration.cs

@@ -21,6 +21,8 @@ namespace GaelJ.BlazorCodeMirror6.Models;
 /// <param name="lintingEnabled"></param>
 /// <param name="mergeViewConfiguration"></param>
 /// <param name="fileNameOrExtension"></param>
+/// <param name="highlightTrailingWhitespace"></param>
+/// <param name="highlightWhitespace"></param>
 public class CodeMirrorConfiguration(
     string? doc,
     string? placeholder,
@@ -36,7 +38,9 @@ public class CodeMirrorConfiguration(
     bool lineWrapping,
     bool lintingEnabled,
     UnifiedMergeConfig? mergeViewConfiguration,
-    string? fileNameOrExtension)
+    string? fileNameOrExtension,
+    bool highlightTrailingWhitespace,
+    bool highlightWhitespace)
 {
 
     /// <summary>
@@ -114,4 +118,14 @@ public class CodeMirrorConfiguration(
     /// Unified merged view configuration
     /// </summary>
     [JsonPropertyName("mergeViewConfiguration")] internal UnifiedMergeConfig? MergeViewConfiguration { get; set; } = mergeViewConfiguration;
+
+    /// <summary>
+    /// Whether to highlight trailing whitespace
+    /// </summary>
+    [JsonPropertyName("highlightTrailingWhitespace")] public bool HighlightTrailingWhitespace { get; internal set; } = highlightTrailingWhitespace;
+
+    /// <summary>
+    /// Whether to highlight whitespace
+    /// </summary>
+    [JsonPropertyName("highlightWhitespace")] public bool HighlightWhitespace { get; internal set; } = highlightWhitespace;
 }

CodeMirror6/Models/CodeMirrorLanguage.cs

@@ -1,3 +1,4 @@
+using System.Reflection;
 using System.Text.Json.Serialization;
 using GaelJ.BlazorCodeMirror6.Converters;
 
@@ -12,7 +13,7 @@ public enum CodeMirrorLanguage
     /// <summary>
     /// Plain text
     /// </summary>
-    [JsonStringValue("PlainText")] PlainText,
+    [JsonStringValue("Plain Text")] PlainText,
 
     /// <summary>
     /// APL
@@ -607,7 +608,7 @@ public enum CodeMirrorLanguage
     /// <summary>
     /// Lezer
     /// </summary>
-    Lezer,
+    [JsonStringValue("Lezer")] Lezer,
 
     /// <summary>
     /// Markdown
@@ -617,7 +618,7 @@ public enum CodeMirrorLanguage
     /// <summary>
     /// Mermaid
     /// </summary>
-    Mermaid,
+    [JsonStringValue("Mermaid")] Mermaid,
 
     /// <summary>
     /// Python
@@ -734,3 +735,17 @@ public enum CodeMirrorLanguage
     /// </summary>
     [JsonStringValue("YAML")] Yaml,
 }
+
+/// <summary>
+/// Extension methods for the <see cref="CodeMirrorLanguage"/> enum
+/// </summary>
+public static class CodeMirrorLanguageExtensions
+{
+    /// <summary>
+    /// Returns the display name of the language
+    /// </summary>
+    /// <param name="language"></param>
+    /// <returns></returns>
+    public static string DisplayName(this CodeMirrorLanguage language) =>
+        language.GetType().GetField(language.ToString())?.GetCustomAttribute<JsonStringValueAttribute>()?.Value ?? language.ToString();
+}

CodeMirror6/Models/CodeMirrorSetup.cs

@@ -129,4 +129,9 @@ public CodeMirrorSetup()
     /// Bind value mode of the text area
     /// </summary>
     [JsonPropertyName("bindValueMode")] public DocumentBindMode BindMode { get; init; } = DocumentBindMode.OnLostFocus;
+
+    /// <summary>
+    /// Can the user scroll past the end of the document
+    /// </summary>
+    [JsonPropertyName("scrollPastEnd")] public bool ScrollPastEnd { get; init; } = false;
 }

CodeMirror6/NodeLib/src/CmConfiguration.ts

@@ -19,6 +19,8 @@ export class CmConfiguration {
     public lineWrapping: boolean
     public lintingEnabled: boolean
     public mergeViewConfiguration: UnifiedMergeConfig | null
+    public highlightTrailingWhitespace: boolean
+    public highlightWhitespace: boolean
 }
 
 export interface UnifiedMergeConfig {

CodeMirror6/NodeLib/src/CmFileUpload.ts

@@ -37,22 +37,26 @@ export function getFileUploadExtensions(id: string, setup: CmSetup)
 
     const dragAndDropHandler = EditorView.domEventHandlers({
         dragenter(event, view) {
+            if (!event.dataTransfer?.files.length) return
             event.preventDefault()
             overlay.style.display = 'flex'
             depth++
         },
         dragleave(event, view) {
+            if (!event.dataTransfer?.files.length) return
             event.preventDefault();
             depth--
             if (depth === 0) {
                 overlay.style.display = 'none'
             }
         },
         dragover(event, view) {
+            if (!event.dataTransfer?.files.length) return
             event.preventDefault()
             overlay.style.display = 'flex'
         },
         drop(event, view) {
+            if (!event.dataTransfer?.files.length) return
             const transfer = event.dataTransfer
             if (transfer?.files) {
                 overlay.style.display = 'none'

CodeMirror6/NodeLib/src/CmInstance.ts

@@ -24,6 +24,8 @@ export class CmInstance
     public emojiReplacerCompartment: Compartment = new Compartment
     public lineWrappingCompartment: Compartment = new Compartment
     public unifiedMergeViewCompartment: Compartment = new Compartment
+    public highlightTrailingWhitespaceCompartment: Compartment = new Compartment
+    public highlightWhitespaceCompartment: Compartment = new Compartment
 }
 
 export const CMInstances: { [id: string]: CmInstance}  = {}

CodeMirror6/NodeLib/src/CmLanguage.ts

@@ -29,7 +29,7 @@ export async function getLanguage(languageName: string, fileNameOrExtension: str
     }
     console.log("getLanguage: " + languageName)
     switch (languageName) {
-        case "PlainText":
+        case "Plain Text":
             return null
         case "Lezer":
             return lezer()

CodeMirror6/NodeLib/src/CmSetup.ts

@@ -27,4 +27,5 @@ export class CmSetup
     public fileIcon: string
     public bindValueMode: string
     public krokiUrl: string
+    public scrollPastEnd: boolean
 }

CodeMirror6/NodeLib/src/index.ts

@@ -1,7 +1,7 @@
 import {
     EditorView, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
-    rectangularSelection, crosshairCursor, ViewUpdate,
-    lineNumbers, highlightActiveLineGutter, placeholder
+    rectangularSelection, crosshairCursor, ViewUpdate, lineNumbers, highlightActiveLineGutter,
+    placeholder, scrollPastEnd, highlightTrailingWhitespace, highlightWhitespace
 } from "@codemirror/view"
 import { EditorState, SelectionRange, Text } from "@codemirror/state"
 import {
@@ -16,10 +16,11 @@ import {
     indentUnit, defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching,
     foldGutter, foldKeymap,
 } from "@codemirror/language"
+import { languages } from "@codemirror/language-data"
 import { unifiedMergeView } from "@codemirror/merge"
 import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap, Completion } from "@codemirror/autocomplete"
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
-import { linter, lintKeymap } from "@codemirror/lint"
+import { linter, lintGutter, lintKeymap } from "@codemirror/lint"
 import { CmInstance, CMInstances } from "./CmInstance"
 import { CmConfiguration, UnifiedMergeConfig } from "./CmConfiguration"
 import { getDynamicHeaderStyling } from "./CmDynamicMarkdownHeaderStyling"
@@ -55,7 +56,6 @@ import { DotNet } from "@microsoft/dotnet-js-interop"
 import { markdownTableExtension } from "./CmMarkdownTable"
 import { dynamicDiagramsExtension } from "./CmDiagrams"
 import { hideMarksExtension } from "./CmHideMarkdownMarks"
-import { languages } from "@codemirror/language-data"
 
 /**
  * Initialize a new CodeMirror instance
@@ -91,6 +91,8 @@ export async function initCodeMirror(
             indentationMarkers(),
             CMInstances[id].lineWrappingCompartment.of(initialConfig.lineWrapping ? EditorView.lineWrapping : []),
             CMInstances[id].unifiedMergeViewCompartment.of(initialConfig.mergeViewConfiguration ? unifiedMergeView(initialConfig.mergeViewConfiguration) : []),
+            CMInstances[id].highlightTrailingWhitespaceCompartment.of(initialConfig.highlightTrailingWhitespace ? highlightTrailingWhitespace() : []),
+            CMInstances[id].highlightWhitespaceCompartment.of(initialConfig.highlightWhitespace ? highlightWhitespace() : []),
 
             EditorView.updateListener.of(async (update) => { await updateListenerExtension(id, update) }),
             keymap.of([
@@ -145,15 +147,18 @@ export async function initCodeMirror(
         if (setup.syntaxHighlighting === true) extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }))
         if (setup.bracketMatching === true) extensions.push(bracketMatching())
         if (setup.closeBrackets === true) extensions.push(closeBrackets())
-        if (setup.autocompletion === true) extensions.push(autocompletion({}))
+        if (setup.autocompletion === true) extensions.push(autocompletion())
         if (setup.rectangularSelection === true) extensions.push(rectangularSelection())
         if (setup.crossHairSelection === true) extensions.push(crosshairCursor())
         if (setup.highlightActiveLine === true) extensions.push(highlightActiveLine())
         if (setup.highlightSelectionMatches === true) extensions.push(highlightSelectionMatches())
+        if (setup.scrollPastEnd === true) extensions.push(scrollPastEnd())
+        if (setup.allowMultipleSelections === true) extensions.push(EditorState.allowMultipleSelections.of(true))
 
         if (initialConfig.lintingEnabled === true || setup.bindValueMode == "OnDelayedInput")
             extensions.push(linter(async view => await externalLintSource(view, dotnetHelper), getExternalLinterConfig()))
-        if (setup.allowMultipleSelections === true) extensions.push(EditorState.allowMultipleSelections.of(true))
+        if (initialConfig.lintingEnabled === true)
+            extensions.push(lintGutter())
 
         extensions.push(...getFileUploadExtensions(id, setup))
 
@@ -299,6 +304,18 @@ export function setMentionCompletions(id: string, mentionCompletions: Completion
     forceRedraw(id)
 }
 
+export function setHighlightTrailingWhitespace(id: string, value: boolean) {
+    CMInstances[id].view.dispatch({
+        effects: CMInstances[id].highlightTrailingWhitespaceCompartment.reconfigure(value ? highlightTrailingWhitespace() : [])
+    })
+}
+
+export function setHighlightWhitespace(id: string, value: boolean) {
+    CMInstances[id].view.dispatch({
+        effects: CMInstances[id].highlightWhitespaceCompartment.reconfigure(value ? highlightWhitespace() : [])
+    })
+}
+
 export function forceRedraw(id: string) {
     const view = CMInstances[id].view
     if (!view) return

Examples.BlazorServer/Examples.BlazorServer.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>0.2.0</Version>
+    <Version>0.2.1</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser" />
@@ -16,4 +16,4 @@
     <ProjectReference Include="..\CodeMirror6\CodeMirror6.csproj" />
     <ProjectReference Include="..\Examples.Common\Examples.Common.csproj" />
   </ItemGroup>
-</Project>
+</Project>