LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Markdown "Create Link": highlight URL instead of label

Browse source 
## Issue
Closes 4505: Highlight url instead of text when embedding a link

_Too used to Github's editor behavior, so was annoyed at this too. It makes more sense to highlight the URL placeholder since that needs to be filled._

For to the unhighlighted case, then the cursor should be at the Label.

## Changes
Until the upstream code decides to fix it (`github::Ionaru/easy-markdown-editor/issues/85`), we'll handle it ourself by listing to the 'changes' events.
This commit is contained in:
infinite-persistence 2021-02-26 15:38:33 +08:00 committed by Sean Yesmunt
parent 812a06f001
commit c67b92cfa4
1 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
ui/component/common/form-components/form-field.jsx
View file

@ -18,7 +18,7 @@ type Props = {
error?: string | boolean,
helper?: string | React$Node,
type?: string,
onChange?: any => any,
onChange?: (any) => any,
defaultValue?: string | number,
placeholder?: string | number,
children?: React$Node,
@ -37,7 +37,7 @@ type Props = {
min?: number,
max?: number,
quickActionLabel?: string,
quickActionHandler?: any => any,
quickActionHandler?: (any) => any,
};
export class FormField extends React.PureComponent<Props> {
@ -147,7 +147,7 @@ export class FormField extends React.PureComponent<Props> {
contextmenu: openEditorMenu,
};
const getInstance = editor => {
const getInstance = (editor) => {
// SimpleMDE max char check
editor.codemirror.on('beforeChange', (instance, changes) => {
if (textAreaMaxLength && changes.update) {
@ -163,6 +163,44 @@ export class FormField extends React.PureComponent<Props> {
}
}
});
// "Create Link (Ctrl-K)": highlight URL instead of label:
editor.codemirror.on('changes', (instance, changes) => {
try {
// Grab the last change from the buffered list. I assume the
// buffered one ('changes', instead of 'change') is more efficient,
// and that "Create Link" will always end up last in the list.
const lastChange = changes[changes.length - 1];
if (lastChange.origin === '+input') {
// https://github.com/Ionaru/easy-markdown-editor/blob/8fa54c496f98621d5f45f57577ce630bee8c41ee/src/js/easymde.js#L765
const EASYMDE_URL_PLACEHOLDER = '(https://)';
// The URL placeholder is always placed last, so just look at the
// last text in the array to also cover the multi-line case:
const urlLineText = lastChange.text[lastChange.text.length - 1];
if (urlLineText.endsWith(EASYMDE_URL_PLACEHOLDER) && urlLineText !== '[]' + EASYMDE_URL_PLACEHOLDER) {
const from = lastChange.from;
const to = lastChange.to;
const isSelectionMultiline = lastChange.text.length > 1;
const baseIndex = isSelectionMultiline ? 0 : from.ch;
// Everything works fine for the [Ctrl-K] case, but for the
// [Button] case, this handler happens before the original
// code, thus our change got wiped out.
// Add a small delay to handle that case.
setTimeout(() => {
instance.setSelection(
{ line: to.line, ch: baseIndex + urlLineText.lastIndexOf('(') + 1 },
{ line: to.line, ch: baseIndex + urlLineText.lastIndexOf(')') }
);
}, 25);
}
}
} catch (err) {
// Do nothing (revert to original behavior)
}
});
};
// Ideally, the character count should (and can) be appended to the