<main>
        <label class="editor-label">Description</label>
        <div class="editor-wrap" id="editor-description-wrap">
          <div class="editor-toolbar" id="editor-description-toolbar"></div>
          <div class="editor-content" id="editor-description-content">
        </div>
        </div>
    </main>

body {
      margin: 2rem .5rem;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    main {
      max-width: 720px;
      margin: auto;
    }

    .editor-wrap.enabled {
      border-radius: 3px;
      border: 1px solid #ccc;
    }

    .editor-content {
      transition: min-height .25s, padding-bottom .25s;
      min-height: 0;
      outline: none;
      border-radius: 1px;
      transition: box-shadow .15s, background-color .15s;
    }

    .editor-content > *:first-child {
      margin-top: 0;
    }

    .editor-content > *:last-child {
      margin-bottom: 0;
    }

    .editor-wrap#editor-description-wrap:hover:not(.enabled) .editor-content {
      background-color: #efefef;
      box-shadow: 0 0 0 6px #efefef;
    }

    .editor-wrap.enabled .editor-content {
      min-height: 55px;
      padding: 1rem;
    }

    .editor-toolbar {
      padding: 3px;
      display: none;
      border-bottom: 1px solid #ccc;
      z-index: 1;
    }

    .editor-wrap.enabled .editor-toolbar {
      display: block;
    }

    .editor-footer {
      margin: 1rem;
      display: none;
    }

    .editor-wrap.enabled .editor-footer {
      display: block;
    }

    .editor-save-btn {
      background: #207ab7;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      border: none;
      outline: none;
      height: 34px;
      line-height-step: 34px;
      padding: 0 16px;
      border-radius: 4px;
      margin: 0;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-user-select: none;
    }

    .editor-cancel-btn {
      background: #dfe3ec;
      font-size: 16px;
      font-weight: bold;
      color: #17224f;
      border: none;
      outline: none;
      height: 34px;
      line-height-step: 34px;
      padding: 0 16px;
      border-radius: 4px;
      margin: 0;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-user-select: none;
    }

    .editor-label {
      font-size: 19px;
      margin: 2rem 0 1rem;
      display: block;
    }

    .comment {
      display: flex;
    }

    .avatar {
      background-color: #ff9999;
      color: #17224f;
      font-size: 18px;
      font-weight: bold;
      border-radius: 100px;
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      margin-right: 1rem;
    }

    .editor-wrap#editor-comment-wrap {
      border: 1px solid #ccc;
      border-radius: 3px;
      flex-grow: 1;
    }

    .editor-wrap#editor-comment-wrap .editor-content {
      padding: 1rem;
    }

    /* Below are the content styles, in this case they are global */
    /* and not namespaced to `.editor-content` */
    a,
    a:link {
      color: blue;
    }
    a:visited {
      color: purple;
    }
    a:hover {
      color: green;
    }
    a:active {
      color: red;
    }

    h1 {
      font-size: 1.75rem;
      font-weight: strong;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: strong;
    }

    h3 {
      font-size: 1rem;
      font-weight: strong;
    }

    hr {
      margin: 1.5rem 0;
      padding: .5rem 0;
      border: 0;
    }

    hr::after {
      content: '';
      display: block;
      border-width: 0 0 1px 0;
      border-color: #ccc;
      border-style: solid;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    /* Remove borders from toolbar - delete this rule if using premium skins and icons */
    .editor-toolbar .tox.tox-tinymce-inline .tox-editor-header {
      border: none;
    }

    /* Indent placeholder in custom-styled comment editor */
    #editor-comment-wrap .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
      left:inherit;
    }

//1.1 Set up the description editor
tinymce.init({
  selector: "#editor-description-content",
  plugins:
    "codesample editimage emoticons image media mediaembed powerpaste code link autolink tinymcespellchecker autocorrect linkchecker lists checklist table advtable advcode",
  menubar: false,
  inline: true,
  toolbar_persist: true,
  toolbar:
    "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons | table codesample hr blockquote | code ",
  placeholder: "Add a description",

  //1.2 Improve communication
  image_file_types: "jpeg jpg png gif",
  editimage_toolbar: "rotateleft rotateright",
  object_resizing: false,
  codesample_global_prismjs: true,
  codesample_languages: [
    { text: "HTML/XML", value: "markup" },
    { text: "JavaScript", value: "javascript" },
    { text: "CSS", value: "css" },
    { text: "LESS", value: "less" },
    { text: "PHP", value: "php" },
    { text: "SQL", value: "sql" },
    { text: "Python", value: "python" }
  ],

  //1.3 Maximise Productivity
  link_default_target: "_blank",
  spellchecker_language: "en",
  spellchecker_active: true
});