Markdown Overhaul (#2624)

Rebuilt Markdown editor/views into new components

static/js/directives/ui/markdown/markdown-editor.component.ts

@@ -0,0 +1,133 @@
+import { Component, Inject, Input, Output, EventEmitter, ViewChild } from 'ng-metadata/core';
+import { MarkdownSymbol } from '../../../types/common.types';
+import { BrowserPlatform } from '../../../constants/platform.constant';
+import './markdown-editor.component.css';
+
+
+/**
+ * An editing interface for Markdown content.
+ */
+@Component({
+  selector: 'markdown-editor',
+  templateUrl: '/static/js/directives/ui/markdown/markdown-editor.component.html'
+})
+export class MarkdownEditorComponent {
+
+  @Input('<') public content: string;
+  @Output() public save: EventEmitter<{editedContent: string}> = new EventEmitter();
+  @Output() public discard: EventEmitter<any> = new EventEmitter();
+  // Textarea is public for testability, should not be directly accessed
+  @ViewChild('#markdown-textarea') public textarea: ng.IAugmentedJQuery;
+  private editMode: EditMode = "write";
+
+  constructor(@Inject('$document') private $document: ng.IDocumentService,
+              @Inject('BrowserPlatform') private browserPlatform: BrowserPlatform) {
+
+  }
+
+  public changeEditMode(newMode: EditMode): void {
+    this.editMode = newMode;
+  }
+
+  public insertSymbol(event: {symbol: MarkdownSymbol}): void {
+    this.textarea.focus();
+
+    const startPos: number = this.textarea.prop('selectionStart');
+    const endPos: number = this.textarea.prop('selectionEnd');
+    const innerText: string = this.textarea.val().slice(startPos, endPos);
+    var shiftBy: number = 0;
+    var characters: string = '';
+
+    switch (event.symbol) {
+      case 'heading1':
+        characters = '# ';
+        shiftBy = 2;
+        break;
+      case 'heading2':
+        characters = '## ';
+        shiftBy = 3;
+        break;
+      case 'heading3':
+        characters = '### ';
+        shiftBy = 4;
+        break;
+      case 'bold':
+        characters = '****';
+        shiftBy = 2;
+        break;
+      case 'italics':
+        characters = '__';
+        shiftBy = 1;
+        break;
+      case 'bulleted-list':
+        characters = '- ';
+        shiftBy = 2;
+        break;
+      case 'numbered-list':
+        characters = '1. ';
+        shiftBy = 3;
+        break;
+      case 'quote':
+        characters = '> ';
+        shiftBy = 2;
+        break;
+      case 'link':
+        characters = '[](url)';
+        shiftBy = 1;
+        break;
+      case 'code':
+        characters = '``';
+        shiftBy = 1;
+        break;
+    }
+
+    const cursorPos: number = startPos + shiftBy;
+
+    if (startPos != endPos) {
+      this.insertText(`${characters.slice(0, shiftBy)}${innerText}${characters.slice(shiftBy, characters.length)}`,
+                      startPos,
+                      endPos);
+    }
+    else {
+      this.insertText(characters, startPos, endPos);
+    }
+
+    this.textarea.prop('selectionStart', cursorPos);
+    this.textarea.prop('selectionEnd', cursorPos);
+  }
+
+  public saveChanges(): void {
+    this.save.emit({editedContent: this.content});
+  }
+
+  public discardChanges(): void {
+    this.discard.emit({});
+  }
+
+  public get currentEditMode(): EditMode {
+    return this.editMode;
+  }
+
+  /**
+   * Insert text in such a way that the browser adds it to the 'undo' stack. This has different feature support
+   * depending on the platform.
+   */
+  private insertText(text: string, startPos: number, endPos: number): void {
+    if (this.browserPlatform === 'firefox') {
+      // FIXME: Ctrl-Z highlights previous text
+      this.textarea.val(this.textarea.val().substr(0, startPos) +
+                        text +
+                        this.textarea.val().substr(endPos, this.textarea.val().length));
+    }
+    else {
+      // TODO: Test other platforms (IE...)
+      this.$document[0].execCommand('insertText', false, text);
+    }
+  }
+}
+
+
+/**
+ * Type representing the current editing mode.
+ */
+export type EditMode = "write" | "preview";