mirror of
https://github.com/philomena-dev/philomena.git
synced 2025-02-19 20:04:23 +01:00
eliminate obsolete workarounds from markdown toolbar, update escape regex
This commit is contained in:
parent
9ac7abdf54
commit
b8aa9b2c9c
2 changed files with 9 additions and 31 deletions
|
@ -49,7 +49,7 @@ const markdownSyntax = {
|
||||||
action: insertLink,
|
action: insertLink,
|
||||||
options: { image: true, shortcutKey: 'k' }
|
options: { image: true, shortcutKey: 'k' }
|
||||||
},
|
},
|
||||||
noParse: {
|
escape: {
|
||||||
action: escapeSelection,
|
action: escapeSelection,
|
||||||
options: { escapeChar: '\\' }
|
options: { escapeChar: '\\' }
|
||||||
}
|
}
|
||||||
|
@ -104,21 +104,12 @@ function getSelections(textarea, linesOnly = false) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSurroundingTwoLines(beforeText, afterText) {
|
|
||||||
// Selection typically includes the new line right before it
|
|
||||||
// therefore you need to include two lines before and after
|
|
||||||
return {
|
|
||||||
twoLinesBefore: beforeText.split('\n').slice(-2).join('\n'),
|
|
||||||
twoLinesAfter: afterText.split('\n').slice(0, 2).join('\n')
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function transformSelection(textarea, transformer, eachLine) {
|
function transformSelection(textarea, transformer, eachLine) {
|
||||||
const { selectedText, beforeSelection, afterSelection } = getSelections(textarea, eachLine),
|
const { selectedText, beforeSelection, afterSelection } = getSelections(textarea, eachLine),
|
||||||
// For long comments, record scrollbar position to restore it later
|
// For long comments, record scrollbar position to restore it later
|
||||||
{ scrollTop } = textarea;
|
{ scrollTop } = textarea;
|
||||||
|
|
||||||
const { newText, caretOffset } = transformer(selectedText, beforeSelection, afterSelection);
|
const { newText, caretOffset } = transformer(selectedText);
|
||||||
|
|
||||||
textarea.value = beforeSelection + newText + afterSelection;
|
textarea.value = beforeSelection + newText + afterSelection;
|
||||||
|
|
||||||
|
@ -142,7 +133,7 @@ function insertLink(textarea, options) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const prefix = options.image ? '![' : '[',
|
const prefix = options.image ? '![' : '[',
|
||||||
suffix = `](${escapeHyperlink(hyperlink)})`;
|
suffix = `](${hyperlink})`;
|
||||||
|
|
||||||
wrapSelection(textarea, { prefix, suffix });
|
wrapSelection(textarea, { prefix, suffix });
|
||||||
}
|
}
|
||||||
|
@ -161,15 +152,14 @@ function wrapSelection(textarea, options) {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
newText: prefix + newText + suffix,
|
newText: prefix + newText + suffix,
|
||||||
caretOffset: emptyText ? prefix.length : -suffix.length
|
caretOffset: emptyText ? prefix.length : 0
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function wrapLines(textarea, options) {
|
function wrapLines(textarea, options) {
|
||||||
transformSelection(textarea, (selectedText, before, after) => {
|
transformSelection(textarea, (selectedText) => {
|
||||||
const { text = selectedText, prefix = '', suffix = '' } = options,
|
const { text = selectedText, prefix = '', suffix = '' } = options,
|
||||||
{ twoLinesBefore, twoLinesAfter } = getSurroundingTwoLines(before, after),
|
|
||||||
emptyText = text === '';
|
emptyText = text === '';
|
||||||
let newText = prefix;
|
let newText = prefix;
|
||||||
|
|
||||||
|
@ -180,11 +170,7 @@ function wrapLines(textarea, options) {
|
||||||
newText += suffix;
|
newText += suffix;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add blank lines before/after if surrounding line are not empty
|
return { newText, caretOffset: newText.length };
|
||||||
if (isNotBlank(twoLinesBefore)) newText = `\n${newText}`;
|
|
||||||
if (isNotBlank(twoLinesAfter)) newText += '\n';
|
|
||||||
|
|
||||||
return { newText, caretOffset: newText.length - suffix.length };
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -195,7 +181,7 @@ function escapeSelection(textarea, options) {
|
||||||
|
|
||||||
if (emptyText) return;
|
if (emptyText) return;
|
||||||
|
|
||||||
const newText = text.replace(/([[\]()*_`\\~<>^])/g, '\\$1').replace(/\|\|/g, '\\|\\|');
|
const newText = text.replace(/([*_[\]()^`%\\~<>#|])/g, '\\$1');
|
||||||
|
|
||||||
return {
|
return {
|
||||||
newText,
|
newText,
|
||||||
|
@ -204,21 +190,13 @@ function escapeSelection(textarea, options) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function escapeHyperlink(url) {
|
|
||||||
return typeof url === 'string' ? url.replace(/([()])/g, '\\$1') : url;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isNotBlank(string) {
|
|
||||||
return /\S/.test(string);
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickHandler(event) {
|
function clickHandler(event) {
|
||||||
const button = event.target.closest('.communication__toolbar__button');
|
const button = event.target.closest('.communication__toolbar__button');
|
||||||
if (!button) return;
|
if (!button) return;
|
||||||
const toolbar = button.closest('.communication__toolbar'),
|
const toolbar = button.closest('.communication__toolbar'),
|
||||||
// There may be multiple toolbars present on the page,
|
// There may be multiple toolbars present on the page,
|
||||||
// in the case of image pages with description edit active
|
// in the case of image pages with description edit active
|
||||||
// we target the textarea that shares the same parent as the toolabr
|
// we target the textarea that shares the same parent as the toolbar
|
||||||
textarea = $('.js-toolbar-input', toolbar.parentNode),
|
textarea = $('.js-toolbar-input', toolbar.parentNode),
|
||||||
id = button.dataset.syntaxId;
|
id = button.dataset.syntaxId;
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,6 @@
|
||||||
i.fa.fa-link
|
i.fa.fa-link
|
||||||
button.communication__toolbar__button tabindex="-1" type="button" title="insert image (ctrl+k)" data-syntax-id="image"
|
button.communication__toolbar__button tabindex="-1" type="button" title="insert image (ctrl+k)" data-syntax-id="image"
|
||||||
i.fa.fa-image
|
i.fa.fa-image
|
||||||
button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="noParse"
|
button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="escape"
|
||||||
span
|
span
|
||||||
| escape
|
| escape
|
||||||
|
|
Loading…
Reference in a new issue