simple-mde-web-component.html

<template id="wc-simplemde-template">
  <style>
  @import 'https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css';
  @import 'https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css';

  :host {
    --mainViewMenuHeight: 0
  }
  .wc-simplemde-container {
    width: 50%;
    margin: auto;
  }

  .editor-toolbar {
    font-size: 14px;
  }

  .CodeMirror {
    font-size: 14px;
  }

  .editor-preview-side {
    top: calc(var(--mainViewMenuHeight) * 1px + 50px);
    height: calc(100vh - var(--mainViewMenuHeight) * 1px + 50px);
  }

  .editor-toolbar.fullscreen {
    top: calc(var(--mainViewMenuHeight) * 1px);
  }

  .CodeMirror-fullscreen {
    top: calc(var(--mainViewMenuHeight) * 1px + 50px);
    height: calc(100vh - var(--mainViewMenuHeight) * 1px + 50px);
  }

  .CodeMirror-line  .cm-spell-error {
    text-decoration: underline dotted red;
  }

  </style>

  <div class="wc-simplemde-container">
    <textarea class="simplemde-text"></textarea>
  </div>
</template>

<script type="module">
import "https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"
import "https://cdn.jsdelivr.net/npm/marked/marked.min.js"

class WCSimpleMDE extends HTMLElement {
  mde = null
  changingValue = false

  static get observedAttributes() {return ['value']; }
  constructor() {
    super();
    this.createTemplate();
    this.mde = null;
  }

  get value() {
    return this.getAttribute("value")
  }

  set value(newValue) {
    if (newValue !== null) {
      this.setAttribute("value", newValue);
    }
  }

  createTemplate() {
    const template = document.querySelector('#wc-simplemde-template');
    if (!template) throw new Error('template not found')
    if (!(template instanceof HTMLTemplateElement)) throw new Error('selected element is not a <template>')
    this.attachShadow({mode: 'open'});
    this.shadowRoot?.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    const text = this.shadowRoot?.querySelector(".simplemde-text");

    marked.setOptions({
      sanitize: true
    });

    const mde = new SimpleMDE({
      element: text,
      status: false,
      initialValue: this.value,
      spellChecker: true,
      autofocus: false,
      tabSize: 4,
      toolbar: ["bold", "italic", "heading", "|", "code", "unordered-list", "ordered-list", "|",
          "link", "image", "|", "preview", "side-by-side", "fullscreen", "|",
        {
          name: "guide",
          action: function openGuide(){
              window.open('https://vaadin.com/markdown-guide','_blank');
          },
          className: "fa fa-question-circle",
          title: "Markdown Guide",
        }
      ],
      previewRender: (plainText) => {
        return marked(plainText)
      },
    });

    mde.codemirror.on("change", () => {
      this.changingValue = true;
      this.value = mde.value();
      this.dispatchEvent(new CustomEvent("change"));
      this.changingValue = false;
    })
    
    this.mde = mde
  }

  disconnectedCallback() {
    this.mde = undefined;
    const text = this.shadowRoot?.querySelector(".simplemde-text");
    if (!text) throw new Error('text not found')
    while (text.nextSibling) {
      text.parentNode?.removeChild(text.nextSibling);
    }
  }

  attributeChangedCallback(name, _oldValue, newValue) {
    if (name ==="value" && this.mde && !this.changingValue) {
      this.mde.value(newValue);
    }
  }
}
customElements.define('simple-mde', WCSimpleMDE);
</script>