🔖 Bump version to 0.10.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.10.0 - 2025-06-16
+
+### Added 
+
+- GetCssCompletions parameter to inject additional variable and class name completins to CSS
+
 ## 0.9.2 - 2025-02-26
 
 ### ⬆️ Upgrade dependencies

CodeMirror6/CodeMirror6.csproj

@@ -9,7 +9,7 @@
     <AssemblyName>GaelJ.BlazorCodeMirror6</AssemblyName>
     <IsPackable>true</IsPackable>
     <PackageId>GaelJ.BlazorCodeMirror6</PackageId>
-    <Version>0.9.2</Version>
+    <Version>0.10.0</Version>
     <IncludeSymbols>true</IncludeSymbols>
     <SymbolPackageFormat>snupkg</SymbolPackageFormat>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>

CodeMirror6/CodeMirror6Wrapper.razor

@@ -13,6 +13,7 @@
             Editable="@Editable"
             FocusChanged="@FocusChanged"
             GetMentionCompletions="@GetMentionCompletions"
+            GetCssCompletions="@GetCssCompletions"
             IndentationUnit="@IndentationUnit"
             Language="@Language"
             LineWrapping="@LineWrapping"

CodeMirror6/CodeMirror6Wrapper.razor.cs

@@ -107,6 +107,12 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// Get all users available for @user mention completions
     /// </summary>
     [Parameter] public Func<Task<List<CodeMirrorCompletion>>>? GetMentionCompletions { get; set; }
+
+    /// <summary>
+    /// Gets a list of additional variables and class names available for autocomplete in CSS documents.
+    /// </summary>
+    [Parameter] public Func<Task<List<CodeMirrorCompletion>>>? GetCssCompletions { get; set; }
+
     /// <summary>
     /// Upload an IBrowserFile to a server and returns the URL to the file
     /// </summary>

CodeMirror6/CodeMirror6WrapperInternal.razor.cs

@@ -111,6 +111,12 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// Get all users available for @user mention completions
     /// </summary>
     [Parameter] public Func<Task<List<CodeMirrorCompletion>>>? GetMentionCompletions { get; set; }
+
+    /// <summary>
+    /// Gets a list of additional variables and class names available for autocomplete in CSS documents.
+    /// </summary>
+    [Parameter] public Func<Task<List<CodeMirrorCompletion>>>? GetCssCompletions { get; set; }
+
     /// <summary>
     /// Upload an IBrowserFile to a server and returns the URL to the file
     /// </summary>
@@ -367,6 +373,14 @@ private async Task InitializeJsInterop()
                     if (token.IsCancellationRequested) return;
                     if (!await CmJsInterop.PropertySetters.SetMentionCompletions(mentionCompletions)) return;
                 }
+
+                if (GetCssCompletions is not null) {
+                    var cssCompletions = await GetCssCompletions();
+                    if (token.IsCancellationRequested) return;
+                    if (!await CmJsInterop.PropertySetters.SetCssCompletions(cssCompletions)) return;
+                }
+
+
                 if (token.IsCancellationRequested) return;
                 IsCodeMirrorInitialized = true;
                 await InvokeAsync(StateHasChanged);

CodeMirror6/Commands/CMConfigurationSetters.cs

@@ -29,6 +29,11 @@ internal Task<bool> SetMentionCompletions(List<CodeMirrorCompletion> mentionComp
         mentionCompletions
     );
 
+    internal Task<bool> SetCssCompletions(List<CodeMirrorCompletion> cssCompletions) => cmJsInterop.ModuleInvokeVoidAsync(
+        "setCssCompletions",
+        cssCompletions
+    );
+
     internal Task<bool> ForceRedraw() => cmJsInterop.ModuleInvokeVoidAsync(
         "forceRedraw"
     );

CodeMirror6/NodeLib/src/CmCssCompletion.ts

@@ -0,0 +1,61 @@
+import { Completion, CompletionContext, CompletionSource, autocompletion } from "@codemirror/autocomplete"
+import { cssCompletionSource } from "@codemirror/lang-css";
+import { syntaxTree } from "@codemirror/language";
+
+let cachedCssVariableCompletions: Completion[] = []
+let cachedCssClassNameCompletions: Completion[] = []
+
+function createCssCompletionsSource(): CompletionSource {
+    return async (context: CompletionContext) => {
+
+
+        let defaultResult = await cssCompletionSource(context);
+        let res;
+        let from;
+        let match;
+
+        var node = syntaxTree(context.state).resolveInner(context.pos, -1);
+        console.log("Node type: ", node.type.name, " at pos: ", context.pos, " from: ", node.from, " to: ", node.to);
+
+        if (node.type.name == "VariableName"  ) {
+            res = cachedCssVariableCompletions;
+            from = node.from; 
+        } else if (node.type.name == "ClassSelector") {
+            res = cachedCssClassNameCompletions;
+            from = context.pos - 1;//node.from;
+        } else if (node.type.name == "ClassName") {
+            res = cachedCssClassNameCompletions;
+            from = node.from-1;
+        }
+        else if (match = context.matchBefore(/(?<=var\(\s*)-(-)?\w*/)) //this one was necessary because it sometimes bugs out and doesn't report VariableName when typing var(-
+        {
+            res = cachedCssVariableCompletions;
+            from = match.from;
+        }
+        else {
+            return defaultResult;
+        }
+
+        if (defaultResult && defaultResult.options) {
+            res = [...res, ...defaultResult.options];
+        }
+
+        return {
+            from: from,
+            to: context.pos,
+            options: res,
+            filter: true,
+            validFor: defaultResult ? defaultResult.validFor : undefined
+        };
+    };
+}
+
+export function setCachedCssCompletions(completions: Completion[]) {
+    cachedCssVariableCompletions = completions.filter(c => c.label.startsWith('--'));
+    cachedCssClassNameCompletions = completions.filter(c => c.label.startsWith('.')); // filter for class names
+}
+
+export const cssCompletionExtension = (enabled: boolean) => {
+    if (!enabled) return []
+    return [createCssCompletionsSource()]
+}

CodeMirror6/NodeLib/src/index.ts

@@ -45,6 +45,7 @@ import { blockquote } from "./CmBlockquote"
 import { listsExtension } from "./CmLists"
 import { dynamicHrExtension } from "./CmHorizontalRule"
 import { mentionCompletionExtension, setCachedCompletions } from "./CmMentionsCompletion"
+import { cssCompletionExtension, setCachedCssCompletions } from "./CmCssCompletion"
 import { mentionDecorationExtension } from "./CmMentionsView"
 import { viewEmojiExtension } from "./CmEmojiView"
 import { emojiCompletionExtension } from "./CmEmojiCompletion"
@@ -200,6 +201,13 @@ export async function initCodeMirror(
 
         extensions.push(...getFileUploadExtensions(id, setup))
 
+
+        if (setup.autocompletion === true && initialConfig.languageName === "CSS") {
+            extensions.push(autocompletion({
+                override: [...cssCompletionExtension(true)]
+            }))
+        }
+
         const pasteHandler = EditorView.domEventHandlers({
             paste(event: ClipboardEvent, view: EditorView) {
                 const transfer = event.clipboardData
@@ -469,6 +477,11 @@ export function setMentionCompletions(id: string, mentionCompletions: Completion
     forceRedraw(id)
 }
 
+export function setCssCompletions(id: string, cssCompletions: Completion[]) {
+    setCachedCssCompletions(cssCompletions)
+    forceRedraw(id)
+}
+
 export function forceRedraw(id: string) {
     const view = CMInstances[id].view
     if (!view) {

Examples.BlazorServer/Examples.BlazorServer.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>0.9.2</Version>
+    <Version>0.10.0</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser" />

Examples.BlazorServerInteractive/Examples.BlazorServerInteractive.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <IsPackable>false</IsPackable>
-    <Version>0.9.2</Version>
+    <Version>0.10.0</Version>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Sentry.AspNetCore" Version="5.1.1" />

Examples.BlazorWasm/Examples.BlazorWasm.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <IsPackable>false</IsPackable>
-    <Version>0.9.2</Version>
+    <Version>0.10.0</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser-wasm" />

Examples.Common/Examples.Common.csproj

@@ -5,7 +5,7 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
-    <Version>0.9.2</Version>
+    <Version>0.10.0</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser" />

NEW_CHANGELOG.md

@@ -1,11 +1,3 @@
-### ⬆️ Upgrade dependencies
+### Added 
 
-- Update nuget packages
-
-### 🐛 Fix a bug
-
-- Fix logs not in color
-
-### 🗑️ Deprecate code that needs to be cleaned up
-
-- Explicitly loading BlazorCodeMirror6.bundle.scp.css is unneeded and broken (#210)
+- GetCssCompletions parameter to inject additional variable and class name completins to CSS