<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">
      <p>Hello world!</p>
      <p>Here is some content for our description editor.</p>
    </div>
  </div>

  <label class="editor-label">Comments</label>
  <div class="comment">
    <div class="avatar">FD</div>
    <div class="editor-wrap" id="editor-comment-wrap">
      <div class="editor-content" id="editor-comment-content"></div>
      <div class="editor-toolbar" id="editor-comment-toolbar"></div>
      <footer class="editor-footer">
      </footer>
    </div>
  </div>
</main>

body {
  margin: 2rem 0.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-label {
  font-size: 19px;
  margin: 2rem 0 1rem;
  display: block;
  font-weight: bold;
  color: #333;
}

/* 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: 0.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;
}

.editor-label {
  font-size: 19px;
  margin: 2rem 0 1rem;
  display: block;
  font-weight: bold;
  color: #333;
}

.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;
}

let commonConfig = {
  plugins:
    "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
  menubar: false,
  inline: true,
  toolbar_persist: true,
  object_resizing: false,

  //1.2 Improve communication
  object_resizing: false,

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

//Description Editor
tinymce.init({
  selector: "#editor-description-content",
  toolbar:
    "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
  fixed_toolbar_container: "#editor-description-toolbar",
  placeholder: "Add a description",
  
  //1.2 Improve communication
  image_file_types: "jpeg jpg png gif",
  editimage_toolbar: "rotateleft rotateright",
  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" }
  ],

  setup: (editor) => {
    editor.on("focus", () => {
      document
        .getElementById("editor-description-wrap")
        .classList.add("enabled");
    });
  },

  ...commonConfig
});

//Comments Editor
tinymce.init({
  selector: "#editor-comment-content",
  toolbar:
    "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",
  fixed_toolbar_container: "#editor-comment-toolbar",
  placeholder: "Add a comment...",
  
  setup: (editor) => {
    editor.on("focus", () => {
      document.getElementById("editor-comment-wrap").classList.add("enabled");
    });
  },

  ...commonConfig
});