BookStack Code Mirror - bookstack/blob - resources/js/markdown/actions.ts

   1 import * as DrawIO from '../services/drawio';
   2 import {MarkdownEditor} from "./index.mjs";
   3 import {EntitySelectorPopup, ImageManager} from "../components";
   4 import {MarkdownEditorInputSelection} from "./inputs/interface";
   5
   6 interface ImageManagerImage {
   7     id: number;
   8     name: string;
   9     thumbs: { display: string; };
  10     url: string;
  11 }
  12
  13 export class Actions {
  14
  15     protected readonly editor: MarkdownEditor;
  16     protected lastContent: { html: string; markdown: string } = {
  17         html: '',
  18         markdown: '',
  19     };
  20
  21     constructor(editor: MarkdownEditor) {
  22         this.editor = editor;
  23     }
  24
  25     updateAndRender() {
  26         const content = this.editor.input.getText();
  27         this.editor.config.inputEl.value = content;
  28
  29         const html = this.editor.markdown.render(content);
  30         window.$events.emit('editor-html-change', '');
  31         window.$events.emit('editor-markdown-change', '');
  32         this.lastContent.html = html;
  33         this.lastContent.markdown = content;
  34         this.editor.display.patchWithHtml(html);
  35     }
  36
  37     getContent() {
  38         return this.lastContent;
  39     }
  40
  41     showImageInsert() {
  42         const imageManager = window.$components.first('image-manager') as ImageManager;
  43
  44         imageManager.show((image: ImageManagerImage) => {
  45             const imageUrl = image.thumbs?.display || image.url;
  46             const selectedText = this.editor.input.getSelectionText();
  47             const newText = `[![${selectedText || image.name}](${imageUrl})](${image.url})`;
  48             this.#replaceSelection(newText, newText.length);
  49         }, 'gallery');
  50     }
  51
  52     insertImage() {
  53         const newText = `![${this.editor.input.getSelectionText()}](http://)`;
  54         this.#replaceSelection(newText, newText.length - 1);
  55     }
  56
  57     insertLink() {
  58         const selectedText = this.editor.input.getSelectionText();
  59         const newText = `[${selectedText}]()`;
  60         const cursorPosDiff = (selectedText === '') ? -3 : -1;
  61         this.#replaceSelection(newText, newText.length + cursorPosDiff);
  62     }
  63
  64     showImageManager() {
  65         const selectionRange = this.editor.input.getSelection();
  66         const imageManager = window.$components.first('image-manager') as ImageManager;
  67         imageManager.show((image: ImageManagerImage) => {
  68             this.#insertDrawing(image, selectionRange);
  69         }, 'drawio');
  70     }
  71
  72     // Show the popup link selector and insert a link when finished
  73     showLinkSelector() {
  74         const selectionRange = this.editor.input.getSelection();
  75
  76         const selector = window.$components.first('entity-selector-popup') as EntitySelectorPopup;
  77         const selectionText = this.editor.input.getSelectionText(selectionRange);
  78         selector.show(entity => {
  79             const selectedText = selectionText || entity.name;
  80             const newText = `[${selectedText}](${entity.link})`;
  81             this.#replaceSelection(newText, newText.length, selectionRange);
  82         }, {
  83             initialValue: selectionText,
  84             searchEndpoint: '/search/entity-selector',
  85             entityTypes: 'page,book,chapter,bookshelf',
  86             entityPermission: 'view',
  87         });
  88     }
  89
  90     // Show draw.io if enabled and handle save.
  91     startDrawing() {
  92         const url = this.editor.config.drawioUrl;
  93         if (!url) return;
  94
  95         const selectionRange = this.editor.input.getSelection();
  96
  97         DrawIO.show(url, () => Promise.resolve(''), async pngData => {
  98             const data = {
  99                 image: pngData,
 100                 uploaded_to: Number(this.editor.config.pageId),
 101             };
 102
 103             try {
 104                 const resp = await window.$http.post('/images/drawio', data);
 105                 this.#insertDrawing(resp.data as ImageManagerImage, selectionRange);
 106                 DrawIO.close();
 107             } catch (err) {
 108                 this.handleDrawingUploadError(err);
 109                 throw new Error(`Failed to save image with error: ${err}`);
 110             }
 111         });
 112     }
 113
 114     #insertDrawing(image: ImageManagerImage, originalSelectionRange: MarkdownEditorInputSelection) {
 115         const newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
 116         this.#replaceSelection(newText, newText.length, originalSelectionRange);
 117     }
 118
 119     // Show draw.io if enabled and handle save.
 120     editDrawing(imgContainer: HTMLElement) {
 121         const {drawioUrl} = this.editor.config;
 122         if (!drawioUrl) {
 123             return;
 124         }
 125
 126         const selectionRange = this.editor.input.getSelection();
 127         const drawingId = imgContainer.getAttribute('drawio-diagram') || '';
 128         if (!drawingId) {
 129             return;
 130         }
 131
 132         DrawIO.show(drawioUrl, () => DrawIO.load(drawingId), async pngData => {
 133             const data = {
 134                 image: pngData,
 135                 uploaded_to: Number(this.editor.config.pageId),
 136             };
 137
 138             try {
 139                 const resp = await window.$http.post('/images/drawio', data);
 140                 const image = resp.data as ImageManagerImage;
 141                 const newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
 142                 const newContent = this.editor.input.getText().split('\n').map(line => {
 143                     if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
 144                         return newText;
 145                     }
 146                     return line;
 147                 }).join('\n');
 148                 this.editor.input.setText(newContent, selectionRange);
 149                 DrawIO.close();
 150             } catch (err) {
 151                 this.handleDrawingUploadError(err);
 152                 throw new Error(`Failed to save image with error: ${err}`);
 153             }
 154         });
 155     }
 156
 157     handleDrawingUploadError(error: any): void {
 158         if (error.status === 413) {
 159             window.$events.emit('error', this.editor.config.text.serverUploadLimit);
 160         } else {
 161             window.$events.emit('error', this.editor.config.text.imageUploadError);
 162         }
 163         console.error(error);
 164     }
 165
 166     // Make the editor full screen
 167     fullScreen() {
 168         const {container} = this.editor.config;
 169         const alreadyFullscreen = container.classList.contains('fullscreen');
 170         container.classList.toggle('fullscreen', !alreadyFullscreen);
 171         document.body.classList.toggle('markdown-fullscreen', !alreadyFullscreen);
 172     }
 173
 174     // Scroll to a specified text
 175     scrollToText(searchText: string): void {
 176         if (!searchText) {
 177             return;
 178         }
 179
 180         const lineRange = this.editor.input.searchForLineContaining(searchText);
 181         if (lineRange) {
 182             this.editor.input.setSelection(lineRange, true);
 183             this.editor.input.focus();
 184         }
 185     }
 186
 187     focus() {
 188         this.editor.input.focus();
 189     }
 190
 191     /**
 192      * Insert content into the editor.
 193      */
 194     insertContent(content: string) {
 195         this.#replaceSelection(content, content.length);
 196     }
 197
 198     /**
 199      * Prepend content to the editor.
 200      */
 201     prependContent(content: string): void {
 202         content = this.#cleanTextForEditor(content);
 203         const selectionRange = this.editor.input.getSelection();
 204         const selectFrom = selectionRange.from + content.length + 1;
 205         this.editor.input.spliceText(0, 0, `${content}\n`, {from: selectFrom});
 206         this.editor.input.focus();
 207     }
 208
 209     /**
 210      * Append content to the editor.
 211      */
 212     appendContent(content: string): void {
 213         content = this.#cleanTextForEditor(content);
 214         this.editor.input.appendText(content);
 215         this.editor.input.focus();
 216     }
 217
 218     /**
 219      * Replace the editor's contents
 220      */
 221     replaceContent(content: string): void {
 222         this.editor.input.setText(content);
 223     }
 224
 225     /**
 226      * Replace the start of the line
 227      * @param {String} newStart
 228      */
 229     replaceLineStart(newStart: string): void {
 230         const selectionRange = this.editor.input.getSelection();
 231         const lineRange = this.editor.input.getLineRangeFromPosition(selectionRange.from);
 232         const lineContent = this.editor.input.getSelectionText(lineRange);
 233         const lineStart = lineContent.split(' ')[0];
 234
 235         // Remove symbol if already set
 236         if (lineStart === newStart) {
 237             const newLineContent = lineContent.replace(`${newStart} `, '');
 238             const selectFrom = selectionRange.from + (newLineContent.length - lineContent.length);
 239             this.editor.input.spliceText(lineRange.from, lineRange.to, newLineContent, {from: selectFrom});
 240             return;
 241         }
 242
 243         let newLineContent = lineContent;
 244         const alreadySymbol = /^[#>`]/.test(lineStart);
 245         if (alreadySymbol) {
 246             newLineContent = lineContent.replace(lineStart, newStart).trim();
 247         } else if (newStart !== '') {
 248             newLineContent = `${newStart} ${lineContent}`;
 249         }
 250
 251         const selectFrom = selectionRange.from + (newLineContent.length - lineContent.length);
 252         this.editor.input.spliceText(lineRange.from, lineRange.to, newLineContent, {from: selectFrom});
 253     }
 254
 255     /**
 256      * Wrap the selection in the given contents start and end contents.
 257      */
 258     wrapSelection(start: string, end: string): void {
 259         const selectRange = this.editor.input.getSelection();
 260         const selectionText = this.editor.input.getSelectionText(selectRange);
 261         if (!selectionText) {
 262             this.#wrapLine(start, end);
 263             return;
 264         }
 265
 266         let newSelectionText: string;
 267         let newRange = {from: selectRange.from, to: selectRange.to};
 268
 269         if (selectionText.startsWith(start) && selectionText.endsWith(end)) {
 270             newSelectionText = selectionText.slice(start.length, selectionText.length - end.length);
 271             newRange.to = selectRange.to - (start.length + end.length);
 272         } else {
 273             newSelectionText = `${start}${selectionText}${end}`;
 274             newRange.to = selectRange.to + (start.length + end.length);
 275         }
 276
 277         this.editor.input.spliceText(
 278             selectRange.from,
 279             selectRange.to,
 280             newSelectionText,
 281             newRange,
 282         );
 283     }
 284
 285     replaceLineStartForOrderedList() {
 286         const selectionRange = this.editor.input.getSelection();
 287         const lineRange = this.editor.input.getLineRangeFromPosition(selectionRange.from);
 288         const prevLineRange = this.editor.input.getLineRangeFromPosition(lineRange.from - 1);
 289         const prevLineText = this.editor.input.getSelectionText(prevLineRange);
 290
 291         const listMatch = prevLineText.match(/^(\s*)(\d)([).])\s/) || [];
 292
 293         const number = (Number(listMatch[2]) || 0) + 1;
 294         const whiteSpace = listMatch[1] || '';
 295         const listMark = listMatch[3] || '.';
 296
 297         const prefix = `${whiteSpace}${number}${listMark}`;
 298         return this.replaceLineStart(prefix);
 299     }
 300
 301     /**
 302      * Cycles through the type of callout block within the selection.
 303      * Creates a callout block if none existing, and removes it if cycling past the danger type.
 304      */
 305     cycleCalloutTypeAtSelection() {
 306         const selectionRange = this.editor.input.getSelection();
 307         const lineRange = this.editor.input.getLineRangeFromPosition(selectionRange.from);
 308         const lineText = this.editor.input.getSelectionText(lineRange);
 309
 310         const formats = ['info', 'success', 'warning', 'danger'];
 311         const joint = formats.join('|');
 312         const regex = new RegExp(`class="((${joint})\\s+callout|callout\\s+(${joint}))"`, 'i');
 313         const matches = regex.exec(lineText);
 314         const format = (matches ? (matches[2] || matches[3]) : '').toLowerCase();
 315
 316         if (format === formats[formats.length - 1]) {
 317             this.#wrapLine(`<p class="callout ${formats[formats.length - 1]}">`, '</p>');
 318         } else if (format === '') {
 319             this.#wrapLine('<p class="callout info">', '</p>');
 320         } else if (matches) {
 321             const newFormatIndex = formats.indexOf(format) + 1;
 322             const newFormat = formats[newFormatIndex];
 323             const newContent = lineText.replace(matches[0], matches[0].replace(format, newFormat));
 324             const lineDiff = newContent.length - lineText.length;
 325             const anchor = Math.min(selectionRange.from, selectionRange.to);
 326             const head = Math.max(selectionRange.from, selectionRange.to);
 327             this.editor.input.spliceText(
 328                 lineRange.from,
 329                 lineRange.to,
 330                 newContent,
 331                 {from: anchor + lineDiff, to: head + lineDiff}
 332             );
 333         }
 334     }
 335
 336     syncDisplayPosition(event: Event): void {
 337         // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html
 338         const scrollEl = event.target as HTMLElement;
 339         const atEnd = Math.abs(scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop) < 1;
 340         if (atEnd) {
 341             this.editor.display.scrollToIndex(-1);
 342             return;
 343         }
 344
 345         const range = this.editor.input.getTextAboveView();
 346         const parser = new DOMParser();
 347         const doc = parser.parseFromString(this.editor.markdown.render(range), 'text/html');
 348         const totalLines = doc.documentElement.querySelectorAll('body > *');
 349         this.editor.display.scrollToIndex(totalLines.length);
 350     }
 351
 352     /**
 353      * Fetch and insert the template of the given ID.
 354      * The page-relative position provided can be used to determine insert location if possible.
 355      */
 356     async insertTemplate(templateId: string, event: MouseEvent): Promise<void> {
 357         const cursorPos = this.editor.input.eventToPosition(event).from;
 358         const responseData = (await window.$http.get(`/templates/${templateId}`)).data as {markdown: string, html: string};
 359         const content = responseData.markdown || responseData.html;
 360         this.editor.input.spliceText(cursorPos, cursorPos, content, {from: cursorPos});
 361     }
 362
 363     /**
 364      * Insert multiple images from the clipboard from an event at the provided
 365      * screen coordinates (Typically form a paste event).
 366      */
 367     insertClipboardImages(images: File[], event: MouseEvent): void {
 368         const cursorPos = this.editor.input.eventToPosition(event).from;
 369         for (const image of images) {
 370             this.uploadImage(image, cursorPos);
 371         }
 372     }
 373
 374     /**
 375      * Handle image upload and add image into Markdown content
 376      */
 377     async uploadImage(file: File, position: number|null = null): Promise<void> {
 378         if (file === null || file.type.indexOf('image') !== 0) return;
 379         let ext = 'png';
 380
 381         if (position === null) {
 382             position = this.editor.input.getSelection().from;
 383         }
 384
 385         if (file.name) {
 386             const fileNameMatches = file.name.match(/\.(.+)$/);
 387             if (fileNameMatches && fileNameMatches.length > 1) {
 388                 ext = fileNameMatches[1];
 389             }
 390         }
 391
 392         // Insert image into markdown
 393         const id = `image-${Math.random().toString(16).slice(2)}`;
 394         const placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
 395         const placeHolderText = `![](${placeholderImage})`;
 396         this.editor.input.spliceText(position, position, placeHolderText, {from: position});
 397
 398         const remoteFilename = `image-${Date.now()}.${ext}`;
 399         const formData = new FormData();
 400         formData.append('file', file, remoteFilename);
 401         formData.append('uploaded_to', this.editor.config.pageId);
 402
 403         try {
 404             const image = (await window.$http.post('/images/gallery', formData)).data as ImageManagerImage;
 405             const newContent = `[![](${image.thumbs.display})](${image.url})`;
 406             this.#findAndReplaceContent(placeHolderText, newContent);
 407         } catch (err: any) {
 408             window.$events.error(err?.data?.message || this.editor.config.text.imageUploadError);
 409             this.#findAndReplaceContent(placeHolderText, '');
 410             console.error(err);
 411         }
 412     }
 413
 414     /**
 415      * Replace the current selection and focus the editor.
 416      * Takes an offset for the cursor, after the change, relative to the start of the provided string.
 417      * Can be provided a selection range to use instead of the current selection range.
 418      */
 419     #replaceSelection(newContent: string, offset: number = 0, selection: MarkdownEditorInputSelection|null = null) {
 420         selection = selection || this.editor.input.getSelection();
 421         const selectFrom = selection.from + offset;
 422         this.editor.input.spliceText(selection.from, selection.to, newContent, {from: selectFrom, to: selectFrom});
 423         this.editor.input.focus();
 424     }
 425
 426     /**
 427      * Cleans the given text to work with the editor.
 428      * Standardises line endings to what's expected.
 429      */
 430     #cleanTextForEditor(text: string): string {
 431         return text.replace(/\r\n|\r/g, '\n');
 432     }
 433
 434     /**
 435      * Find and replace the first occurrence of [search] with [replace]
 436      */
 437     #findAndReplaceContent(search: string, replace: string): void {
 438         const newText = this.editor.input.getText().replace(search, replace);
 439         this.editor.input.setText(newText);
 440     }
 441
 442     /**
 443      * Wrap the line in the given start and end contents.
 444      */
 445     #wrapLine(start: string, end: string): void {
 446         const selectionRange = this.editor.input.getSelection();
 447         const lineRange = this.editor.input.getLineRangeFromPosition(selectionRange.from);
 448         const lineContent = this.editor.input.getSelectionText(lineRange);
 449         let newLineContent: string;
 450         let lineOffset: number;
 451
 452         if (lineContent.startsWith(start) && lineContent.endsWith(end)) {
 453             newLineContent = lineContent.slice(start.length, lineContent.length - end.length);
 454             lineOffset = -(start.length);
 455         } else {
 456             newLineContent = `${start}${lineContent}${end}`;
 457             lineOffset = start.length;
 458         }
 459
 460         this.editor.input.spliceText(lineRange.from, lineRange.to, newLineContent, {from: selectionRange.from + lineOffset});
 461     }
 462
 463 }