From dfc7224fc7c7d05bc86ff28e0992763829f35681 Mon Sep 17 00:00:00 2001 From: Sinharitik589 <67551927+Sinharitik589@users.noreply.github.com> Date: Mon, 9 May 2022 11:04:56 +0530 Subject: [PATCH] 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> --- src/components/views/rooms/BasicMessageComposer.tsx | 11 +++++++++-- src/editor/operations.ts | 4 ++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 068d096624f..004c20daef2 100644 --- 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 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): void => { diff --git a/src/editor/operations.ts b/src/editor/operations.ts index 40a438cc562..f4dd61faa07 100644 --- 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); } }