Merge pull request #98 from gaelj/more-language-data

✨ Implement clipboard commands

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.3.4 - 2024-02-06
+
+### ✨ Introduce new features
+
+- Implement clipboard commands
+
+### 🐛 Fix a bug
+
+- Add no-cors header to diagram requests
+- Hide additional content when not visible
+- Make visible by default
+
+### 📝 Add or update documentation
+
+- Add visibility toggle to example
+
 ## 0.3.3 - 2024-02-06
 
 ### 🐛 Fix a bug

CodeMirror6/CodeMirror6.csproj

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

CodeMirror6/CodeMirror6Wrapper.razor.cs

@@ -168,7 +168,7 @@ public partial class CodeMirror6Wrapper : ComponentBase
     /// Whether the editor is visible
     /// </summary>
     /// <value></value>
-    [Parameter] public bool Visible { get; set; }
+    [Parameter] public bool Visible { get; set; } = true;
     /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>

CodeMirror6/CodeMirror6WrapperInternal.razor

@@ -1,4 +1,4 @@
-@if (ContentBefore is not null && CmJsInterop is not null && Config is not null && CommandDispatcher is not null) {
+@if (Visible && ContentBefore is not null && CmJsInterop is not null && Config is not null && CommandDispatcher is not null) {
     @ContentBefore((CommandDispatcher, Config, State))
 }
 @if (!IsLoaded) {
@@ -22,6 +22,6 @@
     </div>
 </div>
 
-@if (ContentAfter is not null && CmJsInterop is not null && Config is not null && CommandDispatcher is not null) {
+@if (Visible && ContentAfter is not null && CmJsInterop is not null && Config is not null && CommandDispatcher is not null) {
     @ContentAfter((CommandDispatcher, Config, State))
 }

CodeMirror6/CodeMirror6WrapperInternal.razor.cs

@@ -169,7 +169,7 @@ public partial class CodeMirror6WrapperInternal : ComponentBase, IAsyncDisposabl
     /// Whether the editor is visible
     /// </summary>
     /// <value></value>
-    [Parameter] public bool Visible { get; set; }
+    [Parameter] public bool Visible { get; set; } = true;
     /// <summary>
     /// Additional attributes to be applied to the container element
     /// </summary>

CodeMirror6/Models/CodeMirrorSimpleCommand.cs

@@ -177,4 +177,19 @@ public enum CodeMirrorSimpleCommand
     /// Focus the CodeMirror editor
     /// </summary>
     Focus,
+
+    /// <summary>
+    /// Cut the current selection
+    /// </summary>
+    Cut,
+
+    /// <summary>
+    /// Copy the current selection
+    /// </summary>
+    Copy,
+
+    /// <summary>
+    /// Paste the current selection
+    /// </summary>
+    Paste,
 }

CodeMirror6/NodeLib/src/CmCommands.ts

@@ -203,10 +203,10 @@ export const toggleMarkdownQuote: Command = (view: EditorView) => toggleCharacte
 export function toggleMarkdownHeading(headingLevel: number): Command {
     return (view: EditorView) => toggleCharactersAtStartOfLines(view, "#".repeat(headingLevel), false)
 }
-export const increaseMarkdownHeadingLevel: Command = (view: EditorView) =>  {
+export const increaseMarkdownHeadingLevel: Command = (view: EditorView) => {
     return modifyHeaderLevelAtSelections(view, -1);
 }
-export const decreaseMarkdownHeadingLevel: Command = (view: EditorView) =>  {
+export const decreaseMarkdownHeadingLevel: Command = (view: EditorView) => {
     return modifyHeaderLevelAtSelections(view, 1);
 }
 export const toggleMarkdownUnorderedList: Command = (view: EditorView) => toggleCharactersAtStartOfLines(view, "-", true)
@@ -249,3 +249,38 @@ export function insertTextAboveCommand(view: EditorView, textToInsert: string) {
         view.state.update(changeSpec, { scrollIntoView: true, annotations: Transaction.userEvent.of('input'), })
     )
 }
+
+export async function copy(view: EditorView) {
+    try {
+        const text = view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to);
+        if (text === null || text === undefined || text === "") return;
+        await navigator.clipboard.writeText(text)
+        view.focus()
+        return true
+    } catch (err) {
+        console.error('Failed to copy text: ', err);
+        return false;
+    }
+}
+
+export async function cut(view: EditorView) {
+    if (await copy(view))
+        view.dispatch(view.state.update({
+            changes: { from: view.state.selection.main.from, to: view.state.selection.main.to, insert: "" },
+            scrollIntoView: true
+        }));
+}
+
+export async function paste(view: EditorView): Promise<boolean> {
+    try {
+        const text = await navigator.clipboard.readText();
+        view.dispatch(view.state.update({
+            changes: { from: view.state.selection.main.from, to: view.state.selection.main.to, insert: text },
+            scrollIntoView: true
+        }));
+        return true;
+    } catch (err) {
+        console.error('Failed to paste text: ', err);
+        return false;
+    }
+}

CodeMirror6/NodeLib/src/CmDiagrams.ts

@@ -70,6 +70,7 @@ async function fetchDiagramSvg(view: EditorView, code: string, language: string,
             headers: {
                 'Content-Type': 'text/plain',
                 'Accept': 'image/svg+xml',
+                'mode': 'no-cors',
             },
             body: code
         })

CodeMirror6/NodeLib/src/index.ts

@@ -37,6 +37,9 @@ import {
     decreaseMarkdownHeadingLevel,
     insertTableAboveCommand,
     insertHorizontalRuleAboveCommand,
+    cut,
+    copy,
+    paste,
 } from "./CmCommands"
 import { dynamicImagesExtension } from "./CmImages"
 import { externalLintSource, getExternalLinterConfig } from "./CmLint"
@@ -444,6 +447,10 @@ export function dispatchCommand(id: string, functionName: string, ...args: any[]
             case 'InsertTable': insertTableAboveCommand(view, args[0] as number, args[1] as number); break;
             case 'InsertMarkdownHorizontalRule': insertHorizontalRuleAboveCommand(view); break;
 
+            case 'Cut': cut(view); break;
+            case 'Copy': copy(view); break;
+            case 'Paste': paste(view); break;
+
             case 'Focus': break;
 
             default: throw new Error(`Function ${functionName} does not exist.`);

Examples.BlazorServer/Examples.BlazorServer.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>0.3.3</Version>
+    <Version>0.3.4</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.3.3</Version>
+    <Version>0.3.4</Version>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Sentry.AspNetCore" Version="3.41.4" />

Examples.BlazorWasm/Examples.BlazorWasm.csproj

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

Examples.Common/Example.razor

@@ -1,4 +1,4 @@
-<h1>Code Mirror 6 Wrapper Demo</h1>
+<h1>Code Mirror 6 Wrapper Demo</h1>
 
 <label for="Theme">Theme</label>
 <select @bind=@Theme id="Theme">
@@ -87,6 +87,13 @@
 </div>
 
 
+<button class="btn btn-primary"
+    @onclick=@(async () => {
+        Visible = !Visible;
+        await InvokeAsync(StateHasChanged);
+    })
+>Toggle visibility</button>
+
 <CodeMirror6Wrapper
     IsWASM=@IsWASM
     @bind-Doc=@Text
@@ -108,6 +115,7 @@
     MergeViewConfiguration=@MergeViewConfiguration
     HighlightTrailingWhitespace=@HighlightTrailingWhitespace
     HighlightWhitespace=@HighlightWhitespace
+    Visible=@Visible
     style="max-width: 100%; max-height: 60em; "
 >
     <ContentBefore Context="c">
@@ -151,7 +159,7 @@
             <button class=@ButtonClass(c.State, "Task") @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownTaskList)) title="Toggle task list">
                 <i class="fa fa-tasks"></i>
             </button>
-            <button class=@ButtonClass(c.State, "") @onclick=@(() => c.Commands.Dispatch(CodeMirrorCommandOneParameter.InsertOrReplaceText, "test")) title="Insert or replace text">
+            <button class=@ButtonClass(c.State) @onclick=@(() => c.Commands.Dispatch(CodeMirrorCommandOneParameter.InsertOrReplaceText, "test")) title="Insert or replace text">
                 Insert or replace text
             </button>
             <button class=@ButtonClass(c.State, "HorizontalRule") @onclick=@(() => c.Commands.Dispatch(CodeMirrorCommandOneParameter.InsertTextAbove, "\n---\n")) title="Insert separator above">
@@ -163,12 +171,21 @@
             <button class=@ButtonClass(LineWrapping) @onclick=@(() => LineWrapping = !LineWrapping) title="Toggle long line wrapping">
                 <i class="fas fa-paragraph"></i>
             </button>
-            <button class=@ButtonClass(c.State, "") @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Undo)) title="Undo (Ctrl-Z)">
+            <button class=@ButtonClass(c.State) @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Undo)) title="Undo (Ctrl-Z)">
                 <i class="fas fa-undo"></i>
             </button>
-            <button class=@ButtonClass(c.State, "") @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Redo)) title="Redo (Ctrl-Y)">
+            <button class=@ButtonClass(c.State) @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Redo)) title="Redo (Ctrl-Y)">
                 <i class="fas fa-redo"></i>
             </button>
+            <button class=@ButtonClass(c.State) @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Cut)) title="Cut (Ctrl-X)">
+                <i class="fas fa-scissors"></i>
+            </button>
+            <button class=@ButtonClass(c.State) @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Copy)) title="Copy (Ctrl-C)">
+                <i class="fas fa-copy"></i>
+            </button>
+            <button class=@ButtonClass(c.State) @onclick=@(() => c.Commands.Dispatch(CodeMirrorSimpleCommand.Paste)) title="Cut (Ctrl-V)">
+                <i class="fas fa-paste"></i>
+            </button>
         </div>
     </ContentBefore>
 </CodeMirror6Wrapper>
@@ -275,6 +292,7 @@
     private bool MergeViewEnabled = false;
     private bool HighlightTrailingWhitespace = true;
     private bool HighlightWhitespace = false;
+    private bool Visible = true;
     private List<CodeMirrorLanguage> Languages =>
         Enum.GetValues<CodeMirrorLanguage>()
             .OrderBy(l => l == CodeMirrorLanguage.PlainText ? 0 : 1)

Examples.Common/Examples.Common.csproj

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

NEW_CHANGELOG.md

@@ -1,4 +1,13 @@
+### ✨ Introduce new features
+
+- Implement clipboard commands
+
 ### 🐛 Fix a bug
 
-- Fix crash when creating new diagram
-- Fix typo in readme (imports)
+- Add no-cors header to diagram requests
+- Hide additional content when not visible
+- Make visible by default
+
+### 📝 Add or update documentation
+
+- Add visibility toggle to example