Merge pull request #150 from gaelj/release

Release 0.7.1

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.7.1 - 2024-02-24
+
+### ✨ 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
+
+### 🐛 Fix a bug
+
+- 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)
+
 ## 0.7.0 - 2024-02-20
 
 ### ✨ Introduce new features

CodeMirror6/CodeMirror6.csproj

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

CodeMirror6/Models/CodeMirrorSimpleCommand.cs

@@ -200,4 +200,8 @@ public enum CodeMirrorSimpleCommand
     /// Scroll the current selection into view
     /// </summary>
     ScrollIntoView,
+    /// <summary>
+    /// Delete the trailing whitespace
+    /// </summary>
+    DeleteTrailingWhitespace,
 }

CodeMirror6/NodeLib/package.json

@@ -16,7 +16,7 @@
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.8",
     "@codemirror/lang-java": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-lezer": "^6.0.1",
     "@codemirror/lang-markdown": "^6.2.4",
@@ -31,36 +31,36 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@microsoft/dotnet-js-interop": "^8.0.0",
     "@replit/codemirror-indentation-markers": "^6.5.0",
-    "@uiw/codemirror-theme-abcdef": "^4.21.22",
-    "@uiw/codemirror-theme-abyss": "^4.21.22",
-    "@uiw/codemirror-theme-androidstudio": "^4.21.22",
-    "@uiw/codemirror-theme-andromeda": "^4.21.22",
-    "@uiw/codemirror-theme-atomone": "^4.21.22",
-    "@uiw/codemirror-theme-aura": "^4.21.22",
-    "@uiw/codemirror-theme-basic": "^4.21.22",
-    "@uiw/codemirror-theme-bbedit": "^4.21.22",
-    "@uiw/codemirror-theme-copilot": "^4.21.22",
-    "@uiw/codemirror-theme-darcula": "^4.21.22",
-    "@uiw/codemirror-theme-duotone": "^4.21.22",
-    "@uiw/codemirror-theme-eclipse": "^4.21.22",
-    "@uiw/codemirror-theme-github": "^4.21.22",
-    "@uiw/codemirror-theme-gruvbox-dark": "^4.21.22",
-    "@uiw/codemirror-theme-kimbie": "^4.21.22",
-    "@uiw/codemirror-theme-material": "^4.21.22",
-    "@uiw/codemirror-theme-monokai": "^4.21.22",
-    "@uiw/codemirror-theme-monokai-dimmed": "^4.21.22",
-    "@uiw/codemirror-theme-nord": "^4.21.22",
-    "@uiw/codemirror-theme-okaidia": "^4.21.22",
-    "@uiw/codemirror-theme-quietlight": "^4.21.22",
-    "@uiw/codemirror-theme-red": "^4.21.22",
-    "@uiw/codemirror-theme-solarized": "^4.21.22",
-    "@uiw/codemirror-theme-sublime": "^4.21.22",
-    "@uiw/codemirror-theme-tokyo-night": "^4.21.22",
-    "@uiw/codemirror-theme-tokyo-night-day": "^4.21.22",
-    "@uiw/codemirror-theme-tokyo-night-storm": "^4.21.22",
-    "@uiw/codemirror-theme-vscode": "^4.21.22",
-    "@uiw/codemirror-theme-white": "^4.21.22",
-    "@uiw/codemirror-theme-xcode": "^4.21.22",
+    "@uiw/codemirror-theme-abcdef": "^4.21.23",
+    "@uiw/codemirror-theme-abyss": "^4.21.23",
+    "@uiw/codemirror-theme-androidstudio": "^4.21.23",
+    "@uiw/codemirror-theme-andromeda": "^4.21.23",
+    "@uiw/codemirror-theme-atomone": "^4.21.23",
+    "@uiw/codemirror-theme-aura": "^4.21.23",
+    "@uiw/codemirror-theme-basic": "^4.21.23",
+    "@uiw/codemirror-theme-bbedit": "^4.21.23",
+    "@uiw/codemirror-theme-copilot": "^4.21.23",
+    "@uiw/codemirror-theme-darcula": "^4.21.23",
+    "@uiw/codemirror-theme-duotone": "^4.21.23",
+    "@uiw/codemirror-theme-eclipse": "^4.21.23",
+    "@uiw/codemirror-theme-github": "^4.21.23",
+    "@uiw/codemirror-theme-gruvbox-dark": "^4.21.23",
+    "@uiw/codemirror-theme-kimbie": "^4.21.23",
+    "@uiw/codemirror-theme-material": "^4.21.23",
+    "@uiw/codemirror-theme-monokai": "^4.21.23",
+    "@uiw/codemirror-theme-monokai-dimmed": "^4.21.23",
+    "@uiw/codemirror-theme-nord": "^4.21.23",
+    "@uiw/codemirror-theme-okaidia": "^4.21.23",
+    "@uiw/codemirror-theme-quietlight": "^4.21.23",
+    "@uiw/codemirror-theme-red": "^4.21.23",
+    "@uiw/codemirror-theme-solarized": "^4.21.23",
+    "@uiw/codemirror-theme-sublime": "^4.21.23",
+    "@uiw/codemirror-theme-tokyo-night": "^4.21.23",
+    "@uiw/codemirror-theme-tokyo-night-day": "^4.21.23",
+    "@uiw/codemirror-theme-tokyo-night-storm": "^4.21.23",
+    "@uiw/codemirror-theme-vscode": "^4.21.23",
+    "@uiw/codemirror-theme-white": "^4.21.23",
+    "@uiw/codemirror-theme-xcode": "^4.21.23",
     "codemirror": "^6.0.1",
     "codemirror-lang-mermaid": "^0.5.0",
     "emojilib": "^3.0.11",

CodeMirror6/NodeLib/src/CmColumns.ts

@@ -1,5 +1,5 @@
 import { Decoration, ViewPlugin, EditorView, KeyBinding } from "@codemirror/view";
-import { Extension, RangeSetBuilder, Transaction } from "@codemirror/state";
+import { Extension, RangeSetBuilder, Transaction, EditorSelection, SelectionRange } from "@codemirror/state";
 import { buildWidget } from "./lib/codemirror-kit";
 import { Diagnostic } from "@codemirror/lint";
 import { consoleLog } from "./CmLogging";
@@ -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") {
-                    moveCursor(view, -1)
+                    moveCursors(view, true, separator)
                     e.preventDefault()
                 }
                 else if (e.key === "ArrowRight") {
-                    moveCursor(view, 1)
+                    moveCursors(view, false, separator)
                     e.preventDefault()
                 }
             }
@@ -128,13 +128,12 @@ export function columnStylingPlugin(separator: string): Extension {
 
 export const getColumnStylingKeymap = (separator: string): KeyBinding[] => [
     { key: 'Tab', run: (view) => {
-        const offset = getRelativeColumnOffset(view.state.doc.toString(), separator, view.state.selection.main.anchor, false)
-        moveCursor(view, offset + 1)
+        moveCursors(view, false, separator)
+        insertTabulationAtEndOfDocumentIfSelectionAtEnd(view)
         return true
     }},
     { key: 'Shift-Tab', run: (view) => {
-        const offset = getRelativeColumnOffset(view.state.doc.toString(), separator, view.state.selection.main.anchor, true)
-        moveCursor(view, offset)
+        moveCursors(view, true, separator)
         return true
     }},
 ]
@@ -168,18 +167,46 @@ export async function columnLintSource(id: string, view: EditorView, separator:
     }
 }
 
-function moveCursor(view: EditorView, inc: number) {
+function moveCursors(view: EditorView, previous: boolean, separator: string) {
     const { state } = view
-    state.selection.main
-    const range = state.selection.main
-    const newAnchor = Math.max(Math.min(state.doc.length, range.anchor + inc), 0)
+    const newSelectionRanges: SelectionRange[] = []
+    for (const range of state.selection.ranges) {
+        let offset = getRelativeColumnOffset(view.state.doc.toString(), separator, range.anchor, previous)
+        if (!previous) offset += 1
+        const newAnchor = Math.max(Math.min(state.doc.length, range.anchor + offset), 0)
+        const newHead = Math.max(Math.min(state.doc.length, range.head + offset), 0)
+        newSelectionRanges.push(EditorSelection.range(newAnchor, newHead));
+    }
     view.dispatch(state.update({
-        selection: { anchor: newAnchor },
+        selection: EditorSelection.create(newSelectionRanges),
         scrollIntoView: true,
         userEvent: 'input'
     }))
 }
 
+function insertTabulationAtEndOfDocumentIfSelectionAtEnd(view: EditorView) {
+    const { state } = view
+    const newSelectionRanges: SelectionRange[] = []
+    const changes = []
+    for (const range of state.selection.ranges) {
+        if (range.anchor === range.head) {
+            if (range.anchor === state.doc.length || range.head === state.doc.length) {
+                changes.push({ from: state.doc.length, to: state.doc.length, insert: "\t" })
+                const newAnchor = state.doc.length + 1
+                const newHead = state.doc.length + 1
+                newSelectionRanges.push(EditorSelection.range(newAnchor, newHead));
+                continue
+            }
+        }
+        newSelectionRanges.push(range)
+    }
+    view.dispatch(state.update({
+        changes: changes,
+        selection: EditorSelection.create(newSelectionRanges),
+        scrollIntoView: true,
+        userEvent: 'input'
+    }))
+}
 
 // extract first csv cell from a line of text. Ignore the separator if it is inside quotes. Ignore quotes if they are escaped by another quote. Return the extracted cell and the remaining text after the cell.
 function extractNextCell(line: string, separator: string): string[] {

CodeMirror6/NodeLib/src/CmCommands.ts

@@ -255,9 +255,11 @@ export function insertTextAboveCommand(view: EditorView, textToInsert: string) {
 
 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)
+        const texts = view.state.selection.ranges
+            .map(range => view.state.sliceDoc(range.from, range.to))
+            .filter(text => text) // remove empty strings
+            .map(t => new ClipboardItem({ "text/plain": new Blob([t], { type: "text/plain" }) }))
+        await navigator.clipboard.write(texts)
         view.focus()
         return true
     } catch (err) {
@@ -267,16 +269,26 @@ export async function copy(view: EditorView) {
 }
 
 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
-        }));
+    if (await copy(view)) {
+        const changes: ChangeSpec[] = []
+        for (const range of view.state.selection.ranges) {
+            if (!range.empty) {
+                changes.push({ from: range.from, to: range.to, insert: "" })
+            }
+        }
+        if (changes.length > 0) {
+            view.dispatch(view.state.update({
+                changes: changes,
+                scrollIntoView: true,
+                userEvent: 'cut',
+            }))
+        }
+    }
 }
 
 export async function paste(view: EditorView): Promise<boolean> {
     try {
-        let text = await navigator.clipboard.readText();
+        let text = await navigator.clipboard.readText()
         /*
         let items = await navigator.clipboard.read()
         const htmlItems = items.filter(item => item.types.includes("text/html"))
@@ -288,14 +300,22 @@ export async function paste(view: EditorView): Promise<boolean> {
                 }
             }
         } */
-        if (markdownLanguage.isActiveAt(view.state, view.state.selection.main.from) &&
-            markdownLanguage.isActiveAt(view.state, view.state.selection.main.to))
-            text = csvToMarkdownTable(text, "\t", true)
+        const changes: ChangeSpec[] = []
+        const newSelectionRanges: SelectionRange[] = []
+        let totalTextLength = 0
+        for (const range of view.state.selection.ranges) {
+            if (markdownLanguage.isActiveAt(view.state, range.from) &&
+                markdownLanguage.isActiveAt(view.state, range.to))
+                text = csvToMarkdownTable(text, "\t", true)
+            changes.push({ from: range.from, to: range.to, insert: text })
+            totalTextLength += text.length
+            newSelectionRanges.push(EditorSelection.range(range.from + totalTextLength, range.from + totalTextLength))
+        }
         view.dispatch(view.state.update({
-            changes: { from: view.state.selection.main.from, to: view.state.selection.main.to, insert: text },
-            selection: { anchor: view.state.selection.main.anchor + text.length, head: view.state.selection.main.anchor + text.length },
+            changes: changes,
+            selection: EditorSelection.create(newSelectionRanges),
             scrollIntoView: true
-        }));
+        }))
         return true
     } catch (err) {
         console.error('Failed to paste text: ', err)

CodeMirror6/NodeLib/src/CmKeymap.ts

@@ -1,8 +1,15 @@
 import { toggleMarkdownBold, toggleMarkdownItalic } from "./CmCommands"
 import { KeyBinding } from '@codemirror/view';
-import { insertTab } from '@codemirror/commands'
+import { deleteCharBackward, deleteCharForward, deleteGroupBackward, deleteGroupForward } from '@codemirror/commands'
 
 export const customMarkdownKeymap: KeyBinding[] = [
     { key: 'Mod-b', run: toggleMarkdownBold },    // Cmd/Ctrl + B for bold
     { key: 'Mod-i', run: toggleMarkdownItalic },  // Cmd/Ctrl + I for italics
 ]
+
+export const customDeleteKeymap = [
+    { key: "Delete", run: deleteCharForward },
+    { key: "Backspace", run: deleteCharBackward },
+    { key: "Mod-Delete", run: deleteGroupForward },
+    { key: "Mod-Backspace", run: deleteGroupBackward },
+]

CodeMirror6/NodeLib/src/CmLanguage.ts

@@ -50,7 +50,8 @@ export async function getLanguage(id: string, languageName: string, fileNameOrEx
                     sequenceLanguageDescription,
                     journeyLanguageDescription,
                     requirementLanguageDescription,
-                    ganttLanguageDescription],
+                    ganttLanguageDescription,
+                ],
                 addKeymap: true
             })
         default:

CodeMirror6/NodeLib/src/index.ts

@@ -11,6 +11,7 @@ import {
     copyLineUp, copyLineDown, indentSelection, cursorMatchingBracket, toggleComment, toggleBlockComment,
     simplifySelection, insertBlankLine, selectLine, undo, redo, redoSelection, undoSelection,
     blockComment, blockUncomment, toggleBlockCommentByLine, lineComment, lineUncomment, toggleLineComment,
+    deleteTrailingWhitespace,
 } from "@codemirror/commands"
 import {
     indentUnit, defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching,
@@ -60,8 +61,9 @@ import { getColumnStylingKeymap, columnStylingPlugin, columnLintSource, getSepar
 import { consoleLog } from "./CmLogging"
 import { createEditorWithId } from "./CmId"
 import { hyperLink } from './CmHyperlink'
+import { customDeleteKeymap } from "./CmKeymap"
 
-export { csvToMarkdownTable, getCmInstance }
+export { csvToMarkdownTable, getCmInstance, cut, copy, paste }
 
 /**
  * Initialize a new CodeMirror instance
@@ -178,6 +180,7 @@ export async function initCodeMirror(
                 ...foldKeymap,
                 ...completionKeymap,
                 ...lintKeymap,
+                ...customDeleteKeymap,
             ])
         ]
 
@@ -549,6 +552,7 @@ export function dispatchCommand(id: string, functionName: string, ...args: any[]
             case 'LineComment': lineComment(view); break;
             case 'LineUncomment': lineUncomment(view); break;
             case 'ToggleLineComment': toggleLineComment(view); break;
+            case 'DeleteTrailingWhitespace': deleteTrailingWhitespace(view); break;
 
             case 'InsertTable': insertTableAboveCommand(view, args[0] as number, args[1] as number); break;
             case 'InsertMarkdownHorizontalRule': insertHorizontalRuleAboveCommand(view); break;

Examples.BlazorServer/Examples.BlazorServer.csproj

@@ -4,7 +4,7 @@
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>0.7.0</Version>
+    <Version>0.7.1</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.0</Version>
+    <Version>0.7.1</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.0</Version>
+    <Version>0.7.1</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.7.0</Version>
+    <Version>0.7.1</Version>
   </PropertyGroup>
   <ItemGroup>
     <SupportedPlatform Include="browser" />