Release 0.7.2

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.7.2 - 2024-02-25
+
+### ✨ Introduce new features
+
+- Support multiple cursors for arrow / shift / ctrl / ctrl-shift + arrow keys
+
+### 📝 Add or update documentation
+
+- Add an example using ref
+
 ## 0.7.1 - 2024-02-24
 
 ### ✨ Introduce new features

CodeMirror6/CodeMirror6.csproj

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

CodeMirror6/NodeLib/src/CmColumns.ts

@@ -114,11 +114,11 @@ export function columnStylingPlugin(separator: string): Extension {
                 if (e.ctrlKey === true || e.metaKey === true || e.altKey === true || e.shiftKey === true)
                     return
                 if (e.key === "ArrowLeft") {
-                    moveCursors(view, true, separator)
+                    moveCursorsByColumn(view, true, separator)
                     e.preventDefault()
                 }
                 else if (e.key === "ArrowRight") {
-                    moveCursors(view, false, separator)
+                    moveCursorsByColumn(view, false, separator)
                     e.preventDefault()
                 }
             }
@@ -128,12 +128,12 @@ export function columnStylingPlugin(separator: string): Extension {
 
 export const getColumnStylingKeymap = (separator: string): KeyBinding[] => [
     { key: 'Tab', run: (view) => {
-        moveCursors(view, false, separator)
+        moveCursorsByColumn(view, false, separator)
         insertTabulationAtEndOfDocumentIfSelectionAtEnd(view)
         return true
     }},
     { key: 'Shift-Tab', run: (view) => {
-        moveCursors(view, true, separator)
+        moveCursorsByColumn(view, true, separator)
         return true
     }},
 ]
@@ -167,7 +167,7 @@ export async function columnLintSource(id: string, view: EditorView, separator:
     }
 }
 
-function moveCursors(view: EditorView, previous: boolean, separator: string) {
+function moveCursorsByColumn(view: EditorView, previous: boolean, separator: string) {
     const { state } = view
     const newSelectionRanges: SelectionRange[] = []
     for (const range of state.selection.ranges) {

CodeMirror6/NodeLib/src/CmKeymap.ts

@@ -1,6 +1,11 @@
 import { toggleMarkdownBold, toggleMarkdownItalic } from "./CmCommands"
-import { KeyBinding } from '@codemirror/view';
-import { deleteCharBackward, deleteCharForward, deleteGroupBackward, deleteGroupForward } from '@codemirror/commands'
+import { KeyBinding, EditorView } from '@codemirror/view'
+import { Extension, RangeSetBuilder, Transaction, EditorSelection, SelectionRange, Text } from "@codemirror/state"
+import {
+    deleteCharBackward, deleteCharForward, deleteGroupBackward, deleteGroupForward,
+    cursorGroupLeft, cursorGroupRight, selectGroupLeft, selectGroupRight,
+    cursorCharLeft, cursorCharRight, selectCharLeft, selectCharRight,
+} from '@codemirror/commands'
 
 export const customMarkdownKeymap: KeyBinding[] = [
     { key: 'Mod-b', run: toggleMarkdownBold },    // Cmd/Ctrl + B for bold
@@ -13,3 +18,86 @@ export const customDeleteKeymap = [
     { key: "Mod-Delete", run: deleteGroupForward },
     { key: "Mod-Backspace", run: deleteGroupBackward },
 ]
+
+export const customArrowKeymap: KeyBinding[] = [
+    {
+        key: "ArrowLeft",
+        run: (view) => moveCursorsByCharacter(view, true, false),
+        shift: (view) => moveCursorsByCharacter(view, true, true),
+    },
+    {
+        key: "ArrowRight",
+        run: (view) => moveCursorsByCharacter(view, false, false),
+        shift: (view) => moveCursorsByCharacter(view, false, true),
+    },
+    {
+        key: "Mod-ArrowLeft",
+        run: (view) => moveCursorsByWord(view, true, false),
+        shift: (view) => moveCursorsByWord(view, true, true),
+    },
+    {
+        key: "Mod-ArrowRight",
+        run: (view) => moveCursorsByWord(view, false, false),
+        shift: (view) => moveCursorsByWord(view, false, true),
+    },
+]
+
+function moveCursorsByCharacter(view: EditorView, previous: boolean, headOnly: boolean) {
+    const { state } = view
+    const newSelectionRanges: SelectionRange[] = []
+    for (const range of state.selection.ranges) {
+        const offset = previous ? -1 : 1
+        const newAnchor = headOnly ? range.anchor : Math.max(Math.min(state.doc.length, range.head + offset), 0)
+        const newHead = !headOnly ? newAnchor : Math.max(Math.min(state.doc.length, range.head + offset), 0)
+        newSelectionRanges.push(EditorSelection.range(newAnchor, newHead))
+    }
+    view.dispatch(state.update({
+        selection: EditorSelection.create(newSelectionRanges),
+        scrollIntoView: true,
+        userEvent: 'input'
+    }))
+    return true
+}
+
+function moveCursorsByWord(view: EditorView, previous: boolean, headOnly: boolean): boolean {
+    const { state } = view
+    const newSelectionRanges: SelectionRange[] = []
+
+    for (const range of state.selection.ranges) {
+        const currentPos = range.head
+        const wordBoundary = findWordBoundary(state.doc, currentPos, previous, true)
+
+        const newAnchor = headOnly ? range.anchor : wordBoundary
+        const newHead = !headOnly ? newAnchor : wordBoundary
+
+        newSelectionRanges.push(EditorSelection.range(newAnchor, newHead))
+    }
+    view.dispatch(state.update({
+        selection: EditorSelection.create(newSelectionRanges),
+        scrollIntoView: true,
+        userEvent: 'input'
+    }))
+    return true
+}
+
+function findWordBoundary(doc: Text, pos: number, previous: boolean, firstRun: boolean): number {
+    if (previous && pos === 0) return 0
+    if (!previous && pos === doc.length) return doc.length
+    if (isWordBoundary(doc, pos) && firstRun) {
+        pos += previous ? -1 : 1
+        return findWordBoundary(doc, pos, previous, false)
+    }
+    for (let i = pos; previous ? i >= 0 : i < doc.length; i += (previous ? -1 : 1)) {
+        if (isWordBoundary(doc, i)) {
+            return i
+        }
+    }
+    return previous ? 0 : doc.length
+}
+
+function isWordBoundary(doc: Text, pos: number): boolean {
+    if (pos < 0 || pos >= doc.length) return true
+    const charBefore = doc.sliceString(pos - 1, pos)
+    const charAfter = doc.sliceString(pos, pos + 1)
+    return /\s/.test(charBefore) !== /\s/.test(charAfter)
+}

CodeMirror6/NodeLib/src/index.ts

@@ -61,7 +61,7 @@ import { getColumnStylingKeymap, columnStylingPlugin, columnLintSource, getSepar
 import { consoleLog } from "./CmLogging"
 import { createEditorWithId } from "./CmId"
 import { hyperLink } from './CmHyperlink'
-import { customDeleteKeymap } from "./CmKeymap"
+import { customArrowKeymap, customDeleteKeymap } from "./CmKeymap"
 
 export { csvToMarkdownTable, getCmInstance, cut, copy, paste }
 
@@ -181,6 +181,7 @@ export async function initCodeMirror(
                 ...completionKeymap,
                 ...lintKeymap,
                 ...customDeleteKeymap,
+                ...customArrowKeymap,
             ])
         ]
 

Examples.BlazorServer/Examples.BlazorServer.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>0.7.1</Version>
+    <Version>0.7.2</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.7.1</Version>
+    <Version>0.7.2</Version>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Sentry.AspNetCore" Version="4.1.0" />

Examples.BlazorWasm/Examples.BlazorWasm.csproj

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

Examples.Common/Example.razor

@@ -106,7 +106,15 @@
     })
 >Change local storage key</button>
 
+<button class="btn btn-primary"
+    @onclick=@(async () => {
+        if (codeMirror6WrapperRef.CommandDispatcher is not null)
+        await codeMirror6WrapperRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.ScrollIntoView);
+    })
+>Scroll into view</button>
+
 <CodeMirror6Wrapper
+    @ref=@codeMirror6WrapperRef
     IsWASM=@IsWASM
     @bind-Doc=@Text
     Placeholder="Enter your code.... (1)"
@@ -314,6 +322,8 @@
 {
     [Parameter] public bool IsWASM { get; set; }
 
+    private CodeMirror6Wrapper codeMirror6WrapperRef = null!;
+
     private string? Text = code;
     private string? Text2 = "# Example 2";
     private string? Text3;

Examples.Common/Examples.Common.csproj

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

NEW_CHANGELOG.md

@@ -1,15 +1,7 @@
 ### ✨ Introduce new features
 
-- Add DeleteTrailingWhitespace command
-- Export clipboard functions (#144)
-- Tab inserts a tabulation when selection is at the end of document, in csv / tsv modes
+- Support multiple cursors for arrow / shift / ctrl / ctrl-shift + arrow keys
 
-### 🐛 Fix a bug
+### 📝 Add or update documentation
 
-- Fix backspace and delete with multiple cursors (#148)
-- Fix multi cursor clipboard operations (#148)
-- Fix multiple selections and tab switching in csv / tsv
-
-### ⬆️ Upgrade dependencies
-
-- Update js dependencies: (uiw)
+- Add an example using ref