import {containerless} from 'aurelia-framework';
import {Textareafield} from './textareafield';
import SimpleMDE from 'simplemde';

/**
 * Markdownfield is a {@link Textareafield} that supports WYSIWYG markdown editing.
 */
@containerless
export class Markdownfield extends Textareafield {
  static TYPE = 'markdown';

  /**
   * @inheritdoc
   */
  init(id = '', args = {}) {
    return super.init(id, args);
  }

  attached() {
    if (this.editor) {
      return;
    } else if (!this.editorElem) {
      // This shouldn't happen, but it seems to happen sometimes anyway.
      //
      // Try again in a second.
      setTimeout(() => this.attached(), 1000);
      return;
    }
    this.createEditor();
  }

  createEditor() {
    this.editor = new SimpleMDE({
      element: this.editorElem,
      indentWithTabs: true,
      lineWrapping: true,
      placeholder: this.placeholder,
      initialValue: this.value,
      status: false,
      tabSize: 2,
      toolbar: false,
      autoDownloadFontAwesome: false,
      spellChecker: false
    });
    this.editor.codemirror.viewportMargin = 'Infinity';
    this.editor.codemirror.on('change', () => this.value = this.editor.value());
  }

  detached() {
    if (this.editor) {
      this.editor.toTextArea();
      this.editor = undefined;
    }
  }

  setValue(newValue) {
    super.setValue(newValue);
    if (this.editor) {
      this.editor.value(newValue);
    }
  }
}

@@ -89,16 +89,56 @@
 field';%0A
+import %7BField%7D from './abstract/field';%0A
 import S
@@ -904,16 +904,19 @@
 holder: 
+%60$%7B
 this.pla
@@ -923,16 +923,71 @@
 ceholder
+%7D%5Cn%5Cn$%7BField.localizeGlobal('form.supports-markdown')%7D%60
 ,%0A      

Add info about markdown support to placeholders