Converting selected text to MD link when pasting a URL (#8242)

* Converting selected text to MD link when pasting a URL * Update src/editor/operations.ts Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Converting selected text to MD link when pasting a URL Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · May 9, 2022 · dfc7224 · dfc7224
1 parent e980c14
commit dfc7224
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
@@ -24,7 +24,8 @@ import { logger } from "matrix-js-sdk/src/logger";
 import EditorModel from '../../../editor/model';
 import HistoryManager from '../../../editor/history';
 import { Caret, setSelection } from '../../../editor/caret';
-import { formatRange, replaceRangeAndMoveCaret, toggleInlineFormat } from '../../../editor/operations';
+import { formatRange, formatRangeAsLink, replaceRangeAndMoveCaret, toggleInlineFormat }
+    from '../../../editor/operations';
 import { getCaretOffsetAndText, getRangeForSelection } from '../../../editor/dom';
 import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
 import { getAutoCompleteCreator, Type } from '../../../editor/parts';
@@ -45,6 +46,7 @@ import { ICompletion } from "../../../autocomplete/Autocompleter";
 import { getKeyBindingsManager } from '../../../KeyBindingsManager';
 import { ALTERNATE_KEY_NAME, KeyBindingAction } from '../../../accessibility/KeyboardShortcuts';
 import { _t } from "../../../languageHandler";
+import { linkify } from '../../../linkify-matrix';
 
 // matches emoticons which follow the start of a line or whitespace
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
@@ -348,9 +350,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             const text = event.clipboardData.getData("text/plain");
             parts = parsePlainTextMessage(text, partCreator, { shouldEscape: false });
         }
+        const textToInsert = event.clipboardData.getData("text/plain");
         this.modifiedFlag = true;
         const range = getRangeForSelection(this.editorRef.current, model, document.getSelection());
-        replaceRangeAndMoveCaret(range, parts);
+        if (textToInsert && linkify.test(textToInsert)) {
+            formatRangeAsLink(range, textToInsert);
+        } else {
+            replaceRangeAndMoveCaret(range, parts);
+        }
     };
 
     private onInput = (event: Partial<InputEvent>): void => {

diff --git a/src/editor/operations.ts b/src/editor/operations.ts
@@ -216,7 +216,7 @@ export function formatRangeAsCode(range: Range): void {
     replaceRangeAndExpandSelection(range, parts);
 }
 
-export function formatRangeAsLink(range: Range) {
+export function formatRangeAsLink(range: Range, text?: string) {
     const { model } = range;
     const { partCreator } = model;
     const linkRegex = /\[(.*?)\]\(.*?\)/g;
@@ -229,7 +229,7 @@ export function formatRangeAsLink(range: Range) {
         replaceRangeAndAutoAdjustCaret(range, newParts, true, prefixLength, suffixLength);
     } else {
         // We set offset to -1 here so that the caret lands between the brackets
-        replaceRangeAndMoveCaret(range, [partCreator.plain("[" + range.text + "]" + "()")], -1);
+        replaceRangeAndMoveCaret(range, [partCreator.plain("[" + range.text + "]" + "(" + (text ?? "") + ")")], -1);
     }
 }