debian-mirror-gitlab/app/assets/javascripts/lib/utils/text_markdown.js

315 lines
8.4 KiB
JavaScript
Raw Normal View History

2020-01-01 13:55:28 +05:30
/* eslint-disable func-names, no-param-reassign, operator-assignment, no-else-return, consistent-return */
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
import { insertText } from '~/lib/utils/common_utils';
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
const LINK_TAG_PATTERN = '[{text}](url)';
2018-05-09 12:01:36 +05:30
function selectedText(text, textarea) {
2018-03-17 18:26:18 +05:30
return text.substring(textarea.selectionStart, textarea.selectionEnd);
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
function addBlockTags(blockTag, selected) {
return `${blockTag}\n${selected}\n${blockTag}`;
}
2018-05-09 12:01:36 +05:30
function lineBefore(text, textarea) {
2020-01-01 13:55:28 +05:30
const split = text
2018-12-13 13:39:08 +05:30
.substring(0, textarea.selectionStart)
.trim()
.split('\n');
2018-03-17 18:26:18 +05:30
return split[split.length - 1];
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
function lineAfter(text, textarea) {
2018-12-13 13:39:08 +05:30
return text
.substring(textarea.selectionEnd)
.trim()
.split('\n')[0];
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
function editorBlockTagText(text, blockTag, selected, editor) {
const lines = text.split('\n');
const selectionRange = editor.getSelectionRange();
const shouldRemoveBlock =
lines[selectionRange.start.row - 1] === blockTag &&
lines[selectionRange.end.row + 1] === blockTag;
if (shouldRemoveBlock) {
if (blockTag !== null) {
// ace is globally defined
// eslint-disable-next-line no-undef
const { Range } = ace.require('ace/range');
const lastLine = lines[selectionRange.end.row + 1];
const rangeWithBlockTags = new Range(
lines[selectionRange.start.row - 1],
0,
selectionRange.end.row + 1,
lastLine.length,
);
editor.getSelection().setSelectionRange(rangeWithBlockTags);
}
return selected;
}
return addBlockTags(blockTag, selected);
}
2018-05-09 12:01:36 +05:30
function blockTagText(text, textArea, blockTag, selected) {
2019-02-15 15:39:39 +05:30
const shouldRemoveBlock =
lineBefore(text, textArea) === blockTag && lineAfter(text, textArea) === blockTag;
if (shouldRemoveBlock) {
2018-03-17 18:26:18 +05:30
// To remove the block tag we have to select the line before & after
if (blockTag != null) {
textArea.selectionStart = textArea.selectionStart - (blockTag.length + 1);
textArea.selectionEnd = textArea.selectionEnd + (blockTag.length + 1);
}
return selected;
}
2019-02-15 15:39:39 +05:30
return addBlockTags(blockTag, selected);
2018-05-09 12:01:36 +05:30
}
2019-02-15 15:39:39 +05:30
function moveCursor({
textArea,
tag,
cursorOffset,
positionBetweenTags,
removedLastNewLine,
select,
editor,
editorSelectionStart,
editorSelectionEnd,
}) {
2020-01-01 13:55:28 +05:30
let pos;
2019-02-15 15:39:39 +05:30
if (textArea && !textArea.setSelectionRange) {
2018-05-09 12:01:36 +05:30
return;
}
2018-12-05 23:21:45 +05:30
if (select && select.length > 0) {
2019-02-15 15:39:39 +05:30
if (textArea) {
// calculate the part of the text to be selected
const startPosition = textArea.selectionStart - (tag.length - tag.indexOf(select));
const endPosition = startPosition + select.length;
return textArea.setSelectionRange(startPosition, endPosition);
} else if (editor) {
editor.navigateLeft(tag.length - tag.indexOf(select));
editor.getSelection().selectAWord();
return;
2018-05-09 12:01:36 +05:30
}
2019-02-15 15:39:39 +05:30
}
if (textArea) {
if (textArea.selectionStart === textArea.selectionEnd) {
if (positionBetweenTags) {
pos = textArea.selectionStart - tag.length;
} else {
pos = textArea.selectionStart;
}
2018-05-09 12:01:36 +05:30
2019-02-15 15:39:39 +05:30
if (removedLastNewLine) {
pos -= 1;
}
2018-05-09 12:01:36 +05:30
2019-02-15 15:39:39 +05:30
if (cursorOffset) {
pos -= cursorOffset;
}
return textArea.setSelectionRange(pos, pos);
}
} else if (editor && editorSelectionStart.row === editorSelectionEnd.row) {
if (positionBetweenTags) {
editor.navigateLeft(tag.length);
}
2018-05-09 12:01:36 +05:30
}
}
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
export function insertMarkdownText({
textArea,
text,
tag,
cursorOffset,
blockTag,
selected = '',
wrap,
select,
editor,
}) {
2020-01-01 13:55:28 +05:30
let removedLastNewLine = false;
let removedFirstNewLine = false;
let currentLineEmpty = false;
let editorSelectionStart;
let editorSelectionEnd;
let lastNewLine;
let textToInsert;
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
if (editor) {
const selectionRange = editor.getSelectionRange();
editorSelectionStart = selectionRange.start;
editorSelectionEnd = selectionRange.end;
}
2018-12-13 13:39:08 +05:30
// check for link pattern and selected text is an URL
// if so fill in the url part instead of the text part of the pattern.
if (tag === LINK_TAG_PATTERN) {
if (URL) {
try {
2019-12-04 20:38:33 +05:30
new URL(selected); // eslint-disable-line no-new
2018-12-13 13:39:08 +05:30
// valid url
tag = '[text]({text})';
select = 'text';
} catch (e) {
// ignore - no valid url
}
}
}
2018-03-17 18:26:18 +05:30
// Remove the first newline
if (selected.indexOf('\n') === 0) {
removedFirstNewLine = true;
selected = selected.replace(/\n+/, '');
}
// Remove the last newline
2019-02-15 15:39:39 +05:30
if (textArea) {
if (textArea.selectionEnd - textArea.selectionStart > selected.replace(/\n$/, '').length) {
removedLastNewLine = true;
selected = selected.replace(/\n$/, '');
}
} else if (editor) {
if (editorSelectionStart.row !== editorSelectionEnd.row) {
removedLastNewLine = true;
selected = selected.replace(/\n$/, '');
}
2018-03-17 18:26:18 +05:30
}
2020-01-01 13:55:28 +05:30
const selectedSplit = selected.split('\n');
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
if (editor && !wrap) {
lastNewLine = editor.getValue().split('\n')[editorSelectionStart.row];
if (/^\s*$/.test(lastNewLine)) {
currentLineEmpty = true;
}
} else if (textArea && !wrap) {
2018-03-17 18:26:18 +05:30
lastNewLine = textArea.value.substr(0, textArea.selectionStart).lastIndexOf('\n');
// Check whether the current line is empty or consists only of spaces(=handle as empty)
if (/^\s*$/.test(textArea.value.substring(lastNewLine, textArea.selectionStart))) {
currentLineEmpty = true;
}
}
2019-02-15 15:39:39 +05:30
const isBeginning =
(textArea && textArea.selectionStart === 0) ||
(editor && editorSelectionStart.column === 0 && editorSelectionStart.row === 0);
2020-01-01 13:55:28 +05:30
const startChar = !wrap && !currentLineEmpty && !isBeginning ? '\n' : '';
2018-12-05 23:21:45 +05:30
const textPlaceholder = '{text}';
2018-03-17 18:26:18 +05:30
if (selectedSplit.length > 1 && (!wrap || (blockTag != null && blockTag !== ''))) {
if (blockTag != null && blockTag !== '') {
2019-02-15 15:39:39 +05:30
textToInsert = editor
? editorBlockTagText(text, blockTag, selected, editor)
: blockTagText(text, textArea, blockTag, selected);
2018-03-17 18:26:18 +05:30
} else {
2018-12-13 13:39:08 +05:30
textToInsert = selectedSplit
2019-12-21 20:55:43 +05:30
.map(val => {
2018-12-13 13:39:08 +05:30
if (tag.indexOf(textPlaceholder) > -1) {
return tag.replace(textPlaceholder, val);
}
if (val.indexOf(tag) === 0) {
2019-09-04 21:01:54 +05:30
return String(val.replace(tag, ''));
2018-12-13 13:39:08 +05:30
} else {
2019-09-04 21:01:54 +05:30
return String(tag) + val;
2018-12-13 13:39:08 +05:30
}
})
.join('\n');
2018-03-17 18:26:18 +05:30
}
2018-12-05 23:21:45 +05:30
} else if (tag.indexOf(textPlaceholder) > -1) {
textToInsert = tag.replace(textPlaceholder, selected);
2018-03-17 18:26:18 +05:30
} else {
2019-09-04 21:01:54 +05:30
textToInsert = String(startChar) + tag + selected + (wrap ? tag : ' ');
2018-03-17 18:26:18 +05:30
}
if (removedFirstNewLine) {
2019-12-21 20:55:43 +05:30
textToInsert = `\n${textToInsert}`;
2018-03-17 18:26:18 +05:30
}
if (removedLastNewLine) {
2018-05-09 12:01:36 +05:30
textToInsert += '\n';
2018-03-17 18:26:18 +05:30
}
2019-02-15 15:39:39 +05:30
if (editor) {
editor.insert(textToInsert);
} else {
insertText(textArea, textToInsert);
}
2018-12-13 13:39:08 +05:30
return moveCursor({
textArea,
tag: tag.replace(textPlaceholder, selected),
2019-02-15 15:39:39 +05:30
cursorOffset,
positionBetweenTags: wrap && selected.length === 0,
2018-12-13 13:39:08 +05:30
removedLastNewLine,
select,
2019-02-15 15:39:39 +05:30
editor,
editorSelectionStart,
editorSelectionEnd,
2018-12-13 13:39:08 +05:30
});
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
function updateText({ textArea, tag, cursorOffset, blockTag, wrap, select, tagContent }) {
2020-01-01 13:55:28 +05:30
const $textArea = $(textArea);
2018-03-17 18:26:18 +05:30
textArea = $textArea.get(0);
2020-01-01 13:55:28 +05:30
const text = $textArea.val();
const selected = selectedText(text, textArea) || tagContent;
2018-03-17 18:26:18 +05:30
$textArea.focus();
2019-02-15 15:39:39 +05:30
return insertMarkdownText({
textArea,
text,
tag,
cursorOffset,
blockTag,
selected,
wrap,
select,
});
2018-05-09 12:01:36 +05:30
}
export function addMarkdownListeners(form) {
2018-12-13 13:39:08 +05:30
return $('.js-md', form)
.off('click')
.on('click', function() {
const $this = $(this);
return updateText({
textArea: $this.closest('.md-area').find('textarea'),
tag: $this.data('mdTag'),
2019-02-15 15:39:39 +05:30
cursorOffset: $this.data('mdCursorOffset'),
2018-12-13 13:39:08 +05:30
blockTag: $this.data('mdBlock'),
wrap: !$this.data('mdPrepend'),
select: $this.data('mdSelect'),
2019-02-15 15:39:39 +05:30
tagContent: $this.data('mdTagContent'),
});
});
}
export function addEditorMarkdownListeners(editor) {
$('.js-md')
.off('click')
2019-12-21 20:55:43 +05:30
.on('click', e => {
2019-02-15 15:39:39 +05:30
const { mdTag, mdBlock, mdPrepend, mdSelect } = $(e.currentTarget).data();
insertMarkdownText({
tag: mdTag,
blockTag: mdBlock,
wrap: !mdPrepend,
select: mdSelect,
selected: editor.getSelectedText(),
text: editor.getValue(),
editor,
2018-12-13 13:39:08 +05:30
});
2019-02-15 15:39:39 +05:30
editor.focus();
2018-12-13 13:39:08 +05:30
});
2018-05-09 12:01:36 +05:30
}
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
export function removeMarkdownListeners(form) {
2018-03-17 18:26:18 +05:30
return $('.js-md', form).off('click');
2018-05-09 12:01:36 +05:30
}