-import DrawIO from "../services/drawio";
+import * as DrawIO from '../services/drawio.ts';
export class Actions {
+
/**
* @param {MarkdownEditor} editor
*/
}
updateAndRender() {
- const content = this.editor.cm.state.doc.toString();
+ const content = this.#getText();
this.editor.config.inputEl.value = content;
const html = this.editor.markdown.render(content);
}
showImageInsert() {
- // TODO
- const cursorPos = this.editor.cm.getCursor('from');
- /** @type {ImageManager} **/
+ /** @type {ImageManager} * */
const imageManager = window.$components.first('image-manager');
+
imageManager.show(image => {
- const imageUrl = image.thumbs.display || image.url;
- let selectedText = this.editor.cm.getSelection();
- let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")";
- this.editor.cm.focus();
- this.editor.cm.replaceSelection(newText);
- this.editor.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
+ const imageUrl = image.thumbs?.display || image.url;
+ const selectedText = this.#getSelectionText();
+ const newText = `[](${image.url})`;
+ this.#replaceSelection(newText, newText.length);
}, 'gallery');
}
insertImage() {
- // TODO
- const selectedText = this.editor.cm.getSelection();
- const newText = ``;
- const cursorPos = this.editor.cm.getCursor('from');
- this.editor.cm.replaceSelection(newText);
- this.editor.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length -1);
+ const newText = ``;
+ this.#replaceSelection(newText, newText.length - 1);
}
insertLink() {
- // TODO
- const cursorPos = this.editor.cm.getCursor('from');
- const selectedText = this.editor.cm.getSelection() || '';
+ const selectedText = this.#getSelectionText();
const newText = `[${selectedText}]()`;
- this.editor.cm.focus();
- this.editor.cm.replaceSelection(newText);
const cursorPosDiff = (selectedText === '') ? -3 : -1;
- this.editor.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length+cursorPosDiff);
+ this.#replaceSelection(newText, newText.length + cursorPosDiff);
}
showImageManager() {
- // TODO
- const cursorPos = this.editor.cm.getCursor('from');
- /** @type {ImageManager} **/
+ const selectionRange = this.#getSelectionRange();
+ /** @type {ImageManager} * */
const imageManager = window.$components.first('image-manager');
imageManager.show(image => {
- this.insertDrawing(image, cursorPos);
+ this.#insertDrawing(image, selectionRange);
}, 'drawio');
}
// Show the popup link selector and insert a link when finished
showLinkSelector() {
- // TODO
- const cursorPos = this.editor.cm.getCursor('from');
- /** @type {EntitySelectorPopup} **/
+ const selectionRange = this.#getSelectionRange();
+
+ /** @type {EntitySelectorPopup} * */
const selector = window.$components.first('entity-selector-popup');
+ const selectionText = this.#getSelectionText(selectionRange);
selector.show(entity => {
- let selectedText = this.editor.cm.getSelection() || entity.name;
- let newText = `[${selectedText}](${entity.link})`;
- this.editor.cm.focus();
- this.editor.cm.replaceSelection(newText);
- this.editor.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
+ const selectedText = selectionText || entity.name;
+ const newText = `[${selectedText}](${entity.link})`;
+ this.#replaceSelection(newText, newText.length, selectionRange);
+ }, {
+ initialValue: selectionText,
+ searchEndpoint: '/search/entity-selector',
+ entityTypes: 'page,book,chapter,bookshelf',
+ entityPermission: 'view',
});
}
// Show draw.io if enabled and handle save.
startDrawing() {
- // TODO
const url = this.editor.config.drawioUrl;
if (!url) return;
- const cursorPos = this.editor.cm.getCursor('from');
-
- DrawIO.show(url,() => {
- return Promise.resolve('');
- }, (pngData) => {
+ const selectionRange = this.#getSelectionRange();
+ DrawIO.show(url, () => Promise.resolve(''), async pngData => {
const data = {
image: pngData,
uploaded_to: Number(this.editor.config.pageId),
};
- window.$http.post("/images/drawio", data).then(resp => {
- this.insertDrawing(resp.data, cursorPos);
+ try {
+ const resp = await window.$http.post('/images/drawio', data);
+ this.#insertDrawing(resp.data, selectionRange);
DrawIO.close();
- }).catch(err => {
+ } catch (err) {
this.handleDrawingUploadError(err);
- });
+ throw new Error(`Failed to save image with error: ${err}`);
+ }
});
}
- insertDrawing(image, originalCursor) {
- // TODO
+ #insertDrawing(image, originalSelectionRange) {
const newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
- this.editor.cm.focus();
- this.editor.cm.replaceSelection(newText);
- this.editor.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
+ this.#replaceSelection(newText, newText.length, originalSelectionRange);
}
// Show draw.io if enabled and handle save.
editDrawing(imgContainer) {
- // TODO
- const drawioUrl = this.editor.config.drawioUrl;
+ const {drawioUrl} = this.editor.config;
if (!drawioUrl) {
return;
}
- const cursorPos = this.editor.cm.getCursor('from');
+ const selectionRange = this.#getSelectionRange();
const drawingId = imgContainer.getAttribute('drawio-diagram');
- DrawIO.show(drawioUrl, () => {
- return DrawIO.load(drawingId);
- }, (pngData) => {
-
+ DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), async pngData => {
const data = {
image: pngData,
uploaded_to: Number(this.editor.config.pageId),
};
- window.$http.post("/images/drawio", data).then(resp => {
+ try {
+ const resp = await window.$http.post('/images/drawio', data);
const newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
- const newContent = this.editor.cm.getValue().split('\n').map(line => {
+ const newContent = this.#getText().split('\n').map(line => {
if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
return newText;
}
return line;
}).join('\n');
- this.editor.cm.setValue(newContent);
- this.editor.cm.setCursor(cursorPos);
- this.editor.cm.focus();
+ this.#setText(newContent, selectionRange);
DrawIO.close();
- }).catch(err => {
+ } catch (err) {
this.handleDrawingUploadError(err);
- });
+ throw new Error(`Failed to save image with error: ${err}`);
+ }
});
}
handleDrawingUploadError(error) {
- // TODO
if (error.status === 413) {
window.$events.emit('error', this.editor.config.text.serverUploadLimit);
} else {
window.$events.emit('error', this.editor.config.text.imageUploadError);
}
- console.log(error);
+ console.error(error);
}
// Make the editor full screen
fullScreen() {
- // TODO
- const container = this.editor.config.container;
+ const {container} = this.editor.config;
const alreadyFullscreen = container.classList.contains('fullscreen');
container.classList.toggle('fullscreen', !alreadyFullscreen);
document.body.classList.toggle('markdown-fullscreen', !alreadyFullscreen);
// Scroll to a specified text
scrollToText(searchText) {
- // TODO
if (!searchText) {
return;
}
- const content = this.editor.cm.getValue();
- const lines = content.split(/\r?\n/);
- let lineNumber = lines.findIndex(line => {
- return line && line.indexOf(searchText) !== -1;
- });
+ const text = this.editor.cm.state.doc;
+ let lineCount = 1;
+ let scrollToLine = -1;
+ for (const line of text.iterLines()) {
+ if (line.includes(searchText)) {
+ scrollToLine = lineCount;
+ break;
+ }
+ lineCount += 1;
+ }
- if (lineNumber === -1) {
+ if (scrollToLine === -1) {
return;
}
- this.editor.cm.scrollIntoView({
- line: lineNumber,
- }, 200);
- this.editor.cm.focus();
- // set the cursor location.
- this.editor.cm.setCursor({
- line: lineNumber,
- char: lines[lineNumber].length
- })
+ const line = text.line(scrollToLine);
+ this.#setSelection(line.from, line.to, true);
+ this.focus();
}
focus() {
- // TODO
- this.editor.cm.focus();
+ if (!this.editor.cm.hasFocus) {
+ this.editor.cm.focus();
+ }
}
/**
* @param {String} content
*/
insertContent(content) {
- // TODO
- this.editor.cm.replaceSelection(content);
+ this.#replaceSelection(content, content.length);
}
/**
* @param {String} content
*/
prependContent(content) {
- // TODO
- const cursorPos = this.editor.cm.getCursor('from');
- const newContent = content + '\n' + this.editor.cm.getValue();
- this.editor.cm.setValue(newContent);
- const prependLineCount = content.split('\n').length;
- this.editor.cm.setCursor(cursorPos.line + prependLineCount, cursorPos.ch);
+ content = this.#cleanTextForEditor(content);
+ const selectionRange = this.#getSelectionRange();
+ const selectFrom = selectionRange.from + content.length + 1;
+ this.#dispatchChange(0, 0, `${content}\n`, selectFrom);
+ this.focus();
}
/**
* @param {String} content
*/
appendContent(content) {
- // TODO
- const cursorPos = this.editor.cm.getCursor('from');
- const newContent = this.editor.cm.getValue() + '\n' + content;
- this.editor.cm.setValue(newContent);
- this.editor.cm.setCursor(cursorPos.line, cursorPos.ch);
+ content = this.#cleanTextForEditor(content);
+ this.#dispatchChange(this.editor.cm.state.doc.length, `\n${content}`);
+ this.focus();
}
/**
* @param {String} content
*/
replaceContent(content) {
- // TODO
- this.editor.cm.setValue(content);
- }
-
- /**
- * @param {String|RegExp} search
- * @param {String} replace
- */
- findAndReplaceContent(search, replace) {
- // TODO
- const text = this.editor.cm.getValue();
- const cursor = this.editor.cm.listSelections();
- this.editor.cm.setValue(text.replace(search, replace));
- this.editor.cm.setSelections(cursor);
+ this.#setText(content);
}
/**
* @param {String} newStart
*/
replaceLineStart(newStart) {
- // TODO
- const cursor = this.editor.cm.getCursor();
- let lineContent = this.editor.cm.getLine(cursor.line);
- const lineLen = lineContent.length;
+ const selectionRange = this.#getSelectionRange();
+ const line = this.editor.cm.state.doc.lineAt(selectionRange.from);
+
+ const lineContent = line.text;
const lineStart = lineContent.split(' ')[0];
// Remove symbol if already set
if (lineStart === newStart) {
- lineContent = lineContent.replace(`${newStart} `, '');
- this.editor.cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen});
- this.editor.cm.setCursor({line: cursor.line, ch: cursor.ch - (newStart.length + 1)});
+ const newLineContent = lineContent.replace(`${newStart} `, '');
+ const selectFrom = selectionRange.from + (newLineContent.length - lineContent.length);
+ this.#dispatchChange(line.from, line.to, newLineContent, selectFrom);
return;
}
+ let newLineContent = lineContent;
const alreadySymbol = /^[#>`]/.test(lineStart);
- let posDif = 0;
if (alreadySymbol) {
- posDif = newStart.length - lineStart.length;
- lineContent = lineContent.replace(lineStart, newStart).trim();
+ newLineContent = lineContent.replace(lineStart, newStart).trim();
} else if (newStart !== '') {
- posDif = newStart.length + 1;
- lineContent = newStart + ' ' + lineContent;
- }
- this.editor.cm.replaceRange(lineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen});
- this.editor.cm.setCursor({line: cursor.line, ch: cursor.ch + posDif});
- }
-
- /**
- * Wrap the line in the given start and end contents.
- * @param {String} start
- * @param {String} end
- */
- wrapLine(start, end) {
- // TODO
- const cursor = this.editor.cm.getCursor();
- const lineContent = this.editor.cm.getLine(cursor.line);
- const lineLen = lineContent.length;
- let newLineContent = lineContent;
-
- if (lineContent.indexOf(start) === 0 && lineContent.slice(-end.length) === end) {
- newLineContent = lineContent.slice(start.length, lineContent.length - end.length);
- } else {
- newLineContent = `${start}${lineContent}${end}`;
+ newLineContent = `${newStart} ${lineContent}`;
}
- this.editor.cm.replaceRange(newLineContent, {line: cursor.line, ch: 0}, {line: cursor.line, ch: lineLen});
- this.editor.cm.setCursor({line: cursor.line, ch: cursor.ch + start.length});
+ const selectFrom = selectionRange.from + (newLineContent.length - lineContent.length);
+ this.#dispatchChange(line.from, line.to, newLineContent, selectFrom);
}
/**
* @param {String} end
*/
wrapSelection(start, end) {
- // TODO
- const selection = this.editor.cm.getSelection();
- if (selection === '') return this.wrapLine(start, end);
+ const selectRange = this.#getSelectionRange();
+ const selectionText = this.#getSelectionText(selectRange);
+ if (!selectionText) {
+ this.#wrapLine(start, end);
+ return;
+ }
- let newSelection = selection;
- const frontDiff = 0;
- let endDiff;
+ let newSelectionText = selectionText;
+ let newRange;
- if (selection.indexOf(start) === 0 && selection.slice(-end.length) === end) {
- newSelection = selection.slice(start.length, selection.length - end.length);
- endDiff = -(end.length + start.length);
+ if (selectionText.startsWith(start) && selectionText.endsWith(end)) {
+ newSelectionText = selectionText.slice(start.length, selectionText.length - end.length);
+ newRange = selectRange.extend(selectRange.from, selectRange.to - (start.length + end.length));
} else {
- newSelection = `${start}${selection}${end}`;
- endDiff = start.length + end.length;
+ newSelectionText = `${start}${selectionText}${end}`;
+ newRange = selectRange.extend(selectRange.from, selectRange.to + (start.length + end.length));
}
- const selections = this.editor.cm.listSelections()[0];
- this.editor.cm.replaceSelection(newSelection);
- const headFirst = selections.head.ch <= selections.anchor.ch;
- selections.head.ch += headFirst ? frontDiff : endDiff;
- selections.anchor.ch += headFirst ? endDiff : frontDiff;
- this.editor.cm.setSelections([selections]);
+ this.#dispatchChange(
+ selectRange.from,
+ selectRange.to,
+ newSelectionText,
+ newRange.anchor,
+ newRange.head,
+ );
}
replaceLineStartForOrderedList() {
- // TODO
- const cursor = this.editor.cm.getCursor();
- const prevLineContent = this.editor.cm.getLine(cursor.line - 1) || '';
- const listMatch = prevLineContent.match(/^(\s*)(\d)([).])\s/) || [];
+ const selectionRange = this.#getSelectionRange();
+ const line = this.editor.cm.state.doc.lineAt(selectionRange.from);
+ const prevLine = this.editor.cm.state.doc.line(line.number - 1);
+
+ const listMatch = prevLine.text.match(/^(\s*)(\d)([).])\s/) || [];
const number = (Number(listMatch[2]) || 0) + 1;
const whiteSpace = listMatch[1] || '';
- const listMark = listMatch[3] || '.'
+ const listMark = listMatch[3] || '.';
const prefix = `${whiteSpace}${number}${listMark}`;
return this.replaceLineStart(prefix);
* Creates a callout block if none existing, and removes it if cycling past the danger type.
*/
cycleCalloutTypeAtSelection() {
- // TODO
- const selectionRange = this.editor.cm.listSelections()[0];
- const lineContent = this.editor.cm.getLine(selectionRange.anchor.line);
- const lineLength = lineContent.length;
- const contentRange = {
- anchor: {line: selectionRange.anchor.line, ch: 0},
- head: {line: selectionRange.anchor.line, ch: lineLength},
- };
+ const selectionRange = this.#getSelectionRange();
+ const line = this.editor.cm.state.doc.lineAt(selectionRange.from);
const formats = ['info', 'success', 'warning', 'danger'];
const joint = formats.join('|');
const regex = new RegExp(`class="((${joint})\\s+callout|callout\\s+(${joint}))"`, 'i');
- const matches = regex.exec(lineContent);
+ const matches = regex.exec(line.text);
const format = (matches ? (matches[2] || matches[3]) : '').toLowerCase();
if (format === formats[formats.length - 1]) {
- this.wrapLine(`<p class="callout ${formats[formats.length - 1]}">`, '</p>');
+ this.
#wrapLine(`<p class="callout ${formats[formats.length - 1]}">`, '</p>');
} else if (format === '') {
- this.wrapLine('<p class="callout info">', '</p>');
+ this.
#wrapLine('<p class="callout info">', '</p>');
} else {
const newFormatIndex = formats.indexOf(format) + 1;
const newFormat = formats[newFormatIndex];
- const newContent = lineContent.replace(matches[0], matches[0].replace(format, newFormat));
- this.editor.cm.replaceRange(newContent, contentRange.anchor, contentRange.head);
+ const newContent = line.text.replace(matches[0], matches[0].replace(format, newFormat));
+ const lineDiff = newContent.length - line.text.length;
+ this.#dispatchChange(
+ line.from,
+ line.to,
+ newContent,
+ selectionRange.anchor + lineDiff,
+ selectionRange.head + lineDiff,
+ );
+ }
+ }
- const chDiff = newContent.length - lineContent.length;
- selectionRange.anchor.ch += chDiff;
- if (selectionRange.anchor !== selectionRange.head) {
- selectionRange.head.ch += chDiff;
- }
- this.editor.cm.setSelection(selectionRange.anchor, selectionRange.head);
+ syncDisplayPosition(event) {
+ // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html
+ const scrollEl = event.target;
+ const atEnd = Math.abs(scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop) < 1;
+ if (atEnd) {
+ this.editor.display.scrollToIndex(-1);
+ return;
+ }
+
+ const blockInfo = this.editor.cm.lineBlockAtHeight(scrollEl.scrollTop);
+ const range = this.editor.cm.state.sliceDoc(0, blockInfo.from);
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(this.editor.markdown.render(range), 'text/html');
+ const totalLines = doc.documentElement.querySelectorAll('body > *');
+ this.editor.display.scrollToIndex(totalLines.length);
+ }
+
+ /**
+ * Fetch and insert the template of the given ID.
+ * The page-relative position provided can be used to determine insert location if possible.
+ * @param {String} templateId
+ * @param {Number} posX
+ * @param {Number} posY
+ */
+ async insertTemplate(templateId, posX, posY) {
+ const cursorPos = this.editor.cm.posAtCoords({x: posX, y: posY}, false);
+ const {data} = await window.$http.get(`/templates/${templateId}`);
+ const content = data.markdown || data.html;
+ this.#dispatchChange(cursorPos, cursorPos, content, cursorPos);
+ }
+
+ /**
+ * Insert multiple images from the clipboard from an event at the provided
+ * screen coordinates (Typically form a paste event).
+ * @param {File[]} images
+ * @param {Number} posX
+ * @param {Number} posY
+ */
+ insertClipboardImages(images, posX, posY) {
+ const cursorPos = this.editor.cm.posAtCoords({x: posX, y: posY}, false);
+ for (const image of images) {
+ this.uploadImage(image, cursorPos);
}
}
/**
* Handle image upload and add image into markdown content
* @param {File} file
+ * @param {?Number} position
*/
- uploadImage(file) {
- // TODO
+ async uploadImage(file, position = null) {
if (file === null || file.type.indexOf('image') !== 0) return;
let ext = 'png';
+ if (position === null) {
+ position = this.#getSelectionRange().from;
+ }
+
if (file.name) {
- let fileNameMatches = file.name.match(/\.(.+)$/);
+ const fileNameMatches = file.name.match(/\.(.+)$/);
if (fileNameMatches.length > 1) ext = fileNameMatches[1];
}
// Insert image into markdown
- const id = "image-" + Math.random().toString(16).slice(2);
+ const id = `image-${Math.random().toString(16).slice(2)}`;
const placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
- const selectedText = this.editor.cm.getSelection();
- const placeHolderText = ``;
- const cursor = this.editor.cm.getCursor();
- this.editor.cm.replaceSelection(placeHolderText);
- this.editor.cm.setCursor({line: cursor.line, ch: cursor.ch + selectedText.length + 3});
+ const placeHolderText = ``;
+ this.#dispatchChange(position, position, placeHolderText, position);
- const remoteFilename = "image-" + Date.now() + "." + ext;
+ const remoteFilename = `image-${Date.now()}.${ext}`;
const formData = new FormData();
formData.append('file', file, remoteFilename);
formData.append('uploaded_to', this.editor.config.pageId);
- window.$http.post('/images/gallery', formData).then(resp => {
- const newContent = `[](${resp.data.url})`;
- this.findAndReplaceContent(placeHolderText, newContent);
- }).catch(err => {
- window.$events.emit('error', this.editor.config.text.imageUploadError);
- this.findAndReplaceContent(placeHolderText, selectedText);
- console.log(err);
+ try {
+ const {data} = await window.$http.post('/images/gallery', formData);
+ const newContent = `[](${data.url})`;
+ this.#findAndReplaceContent(placeHolderText, newContent);
+ } catch (err) {
+ window.$events.error(err?.data?.message || this.editor.config.text.imageUploadError);
+ this.#findAndReplaceContent(placeHolderText, '');
+ console.error(err);
+ }
+ }
+
+ /**
+ * Get the current text of the editor instance.
+ * @return {string}
+ */
+ #getText() {
+ return this.editor.cm.state.doc.toString();
+ }
+
+ /**
+ * Set the text of the current editor instance.
+ * @param {String} text
+ * @param {?SelectionRange} selectionRange
+ */
+ #setText(text, selectionRange = null) {
+ selectionRange = selectionRange || this.#getSelectionRange();
+ const newDoc = this.editor.cm.state.toText(text);
+ const newSelectFrom = Math.min(selectionRange.from, newDoc.length);
+ const scrollTop = this.editor.cm.scrollDOM.scrollTop;
+ this.#dispatchChange(0, this.editor.cm.state.doc.length, text, newSelectFrom);
+ this.focus();
+ window.requestAnimationFrame(() => {
+ this.editor.cm.scrollDOM.scrollTop = scrollTop;
});
}
- syncDisplayPosition(event) {
- // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html
- const scrollEl = event.target;
- const atEnd = Math.abs(scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop) < 1;
- if (atEnd) {
- this.editor.display.scrollToIndex(-1);
- return;
- }
+ /**
+ * Replace the current selection and focus the editor.
+ * Takes an offset for the cursor, after the change, relative to the start of the provided string.
+ * Can be provided a selection range to use instead of the current selection range.
+ * @param {String} newContent
+ * @param {Number} cursorOffset
+ * @param {?SelectionRange} selectionRange
+ */
+ #replaceSelection(newContent, cursorOffset = 0, selectionRange = null) {
+ selectionRange = selectionRange || this.editor.cm.state.selection.main;
+ const selectFrom = selectionRange.from + cursorOffset;
+ this.#dispatchChange(selectionRange.from, selectionRange.to, newContent, selectFrom);
+ this.focus();
+ }
- const blockInfo = this.editor.cm.lineBlockAtHeight(scrollEl.scrollTop);
- const range = this.editor.cm.state.sliceDoc(0, blockInfo.from);
- const parser = new DOMParser();
- const doc = parser.parseFromString(this.editor.markdown.render(range), 'text/html');
- const totalLines = doc.documentElement.querySelectorAll('body > *');
- this.editor.display.scrollToIndex(totalLines.length);
+ /**
+ * Get the text content of the main current selection.
+ * @param {SelectionRange} selectionRange
+ * @return {string}
+ */
+ #getSelectionText(selectionRange = null) {
+ selectionRange = selectionRange || this.#getSelectionRange();
+ return this.editor.cm.state.sliceDoc(selectionRange.from, selectionRange.to);
}
/**
- * Fetch and insert the template of the given ID.
- * The page-relative position provided can be used to determine insert location if possible.
- * @param {String} templateId
- * @param {Number} posX
- * @param {Number} posY
+ * Get the range of the current main selection.
+ * @return {SelectionRange}
*/
- insertTemplate(templateId, posX, posY) {
- // TODO
- const cursorPos = this.editor.cm.coordsChar({left: posX, top: posY});
- this.editor.cm.setCursor(cursorPos);
- window.$http.get(`/templates/${templateId}`).then(resp => {
- const content = resp.data.markdown || resp.data.html;
- this.editor.cm.replaceSelection(content);
- });
+ #getSelectionRange() {
+ return this.editor.cm.state.selection.main;
}
/**
- * Insert multiple images from the clipboard.
- * @param {File[]} images
+ * Cleans the given text to work with the editor.
+ * Standardises line endings to what's expected.
+ * @param {String} text
+ * @return {String}
*/
- insertClipboardImages(images) {
- // TODO
- const cursorPos = this.editor.cm.coordsChar({left: event.pageX, top: event.pageY});
- this.editor.cm.setCursor(cursorPos);
- for (const image of images) {
- this.uploadImage(image);
+ #cleanTextForEditor(text) {
+ return text.replace(/\r\n|\r/g, '\n');
+ }
+
+ /**
+ * Find and replace the first occurrence of [search] with [replace]
+ * @param {String} search
+ * @param {String} replace
+ */
+ #findAndReplaceContent(search, replace) {
+ const newText = this.#getText().replace(search, replace);
+ this.#setText(newText);
+ }
+
+ /**
+ * Wrap the line in the given start and end contents.
+ * @param {String} start
+ * @param {String} end
+ */
+ #wrapLine(start, end) {
+ const selectionRange = this.#getSelectionRange();
+ const line = this.editor.cm.state.doc.lineAt(selectionRange.from);
+ const lineContent = line.text;
+ let newLineContent;
+ let lineOffset = 0;
+
+ if (lineContent.startsWith(start) && lineContent.endsWith(end)) {
+ newLineContent = lineContent.slice(start.length, lineContent.length - end.length);
+ lineOffset = -(start.length);
+ } else {
+ newLineContent = `${start}${lineContent}${end}`;
+ lineOffset = start.length;
}
+
+ this.#dispatchChange(line.from, line.to, newLineContent, selectionRange.from + lineOffset);
}
-}
\ No newline at end of file
+
+ /**
+ * Dispatch changes to the editor.
+ * @param {Number} from
+ * @param {?Number} to
+ * @param {?String} text
+ * @param {?Number} selectFrom
+ * @param {?Number} selectTo
+ */
+ #dispatchChange(from, to = null, text = null, selectFrom = null, selectTo = null) {
+ const tr = {changes: {from, to, insert: text}};
+
+ if (selectFrom) {
+ tr.selection = {anchor: selectFrom};
+ if (selectTo) {
+ tr.selection.head = selectTo;
+ }
+ }
+
+ this.editor.cm.dispatch(tr);
+ }
+
+ /**
+ * Set the current selection range.
+ * Optionally will scroll the new range into view.
+ * @param {Number} from
+ * @param {Number} to
+ * @param {Boolean} scrollIntoView
+ */
+ #setSelection(from, to, scrollIntoView = false) {
+ this.editor.cm.dispatch({
+ selection: {anchor: from, head: to},
+ scrollIntoView,
+ });
+ }
+
+}
projects / bookstack / blobdiff