mirror of
https://github.com/element-hq/element-web
synced 2024-11-23 17:56:01 +03:00
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>
This commit is contained in:
parent
e980c146ff
commit
dfc7224fc7
2 changed files with 11 additions and 4 deletions
|
@ -24,7 +24,8 @@ import { logger } from "matrix-js-sdk/src/logger";
|
||||||
import EditorModel from '../../../editor/model';
|
import EditorModel from '../../../editor/model';
|
||||||
import HistoryManager from '../../../editor/history';
|
import HistoryManager from '../../../editor/history';
|
||||||
import { Caret, setSelection } from '../../../editor/caret';
|
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 { getCaretOffsetAndText, getRangeForSelection } from '../../../editor/dom';
|
||||||
import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
|
import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
|
||||||
import { getAutoCompleteCreator, Type } from '../../../editor/parts';
|
import { getAutoCompleteCreator, Type } from '../../../editor/parts';
|
||||||
|
@ -45,6 +46,7 @@ import { ICompletion } from "../../../autocomplete/Autocompleter";
|
||||||
import { getKeyBindingsManager } from '../../../KeyBindingsManager';
|
import { getKeyBindingsManager } from '../../../KeyBindingsManager';
|
||||||
import { ALTERNATE_KEY_NAME, KeyBindingAction } from '../../../accessibility/KeyboardShortcuts';
|
import { ALTERNATE_KEY_NAME, KeyBindingAction } from '../../../accessibility/KeyboardShortcuts';
|
||||||
import { _t } from "../../../languageHandler";
|
import { _t } from "../../../languageHandler";
|
||||||
|
import { linkify } from '../../../linkify-matrix';
|
||||||
|
|
||||||
// matches emoticons which follow the start of a line or whitespace
|
// matches emoticons which follow the start of a line or whitespace
|
||||||
const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
|
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");
|
const text = event.clipboardData.getData("text/plain");
|
||||||
parts = parsePlainTextMessage(text, partCreator, { shouldEscape: false });
|
parts = parsePlainTextMessage(text, partCreator, { shouldEscape: false });
|
||||||
}
|
}
|
||||||
|
const textToInsert = event.clipboardData.getData("text/plain");
|
||||||
this.modifiedFlag = true;
|
this.modifiedFlag = true;
|
||||||
const range = getRangeForSelection(this.editorRef.current, model, document.getSelection());
|
const range = getRangeForSelection(this.editorRef.current, model, document.getSelection());
|
||||||
|
if (textToInsert && linkify.test(textToInsert)) {
|
||||||
|
formatRangeAsLink(range, textToInsert);
|
||||||
|
} else {
|
||||||
replaceRangeAndMoveCaret(range, parts);
|
replaceRangeAndMoveCaret(range, parts);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
private onInput = (event: Partial<InputEvent>): void => {
|
private onInput = (event: Partial<InputEvent>): void => {
|
||||||
|
|
|
@ -216,7 +216,7 @@ export function formatRangeAsCode(range: Range): void {
|
||||||
replaceRangeAndExpandSelection(range, parts);
|
replaceRangeAndExpandSelection(range, parts);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function formatRangeAsLink(range: Range) {
|
export function formatRangeAsLink(range: Range, text?: string) {
|
||||||
const { model } = range;
|
const { model } = range;
|
||||||
const { partCreator } = model;
|
const { partCreator } = model;
|
||||||
const linkRegex = /\[(.*?)\]\(.*?\)/g;
|
const linkRegex = /\[(.*?)\]\(.*?\)/g;
|
||||||
|
@ -229,7 +229,7 @@ export function formatRangeAsLink(range: Range) {
|
||||||
replaceRangeAndAutoAdjustCaret(range, newParts, true, prefixLength, suffixLength);
|
replaceRangeAndAutoAdjustCaret(range, newParts, true, prefixLength, suffixLength);
|
||||||
} else {
|
} else {
|
||||||
// We set offset to -1 here so that the caret lands between the brackets
|
// 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue