JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
<div id="code-editor" class="fifty"></div>
<div id="previewer" class="fifty"></div>

CSS

.fifty {
  width: 49%;
  float: left;
  height:300px;
}

#previewer {
  border: 1px solid #000;
}

JavaScript

$(document).ready(function() {
  var codeEditor = CodeMirror(document.getElementById("code-editor"), {
    mode: "javascript",
    lineNumbers: true,
    theme: "default"
  });

  var isKeySequenceActive = false;
  var keyPressedCount = 0;

  codeEditor.on("keydown", function(cm, event) {
    var keyCode = event.keyCode || event.which;

    // Check for the specific key sequence
    if (!isKeySequenceActive && keyCode === 65) { // First key (example: A)
      isKeySequenceActive = true;
      keyPressedCount = 1;
    } else if (isKeySequenceActive && keyCode === 66) { // Second key (example: B)
      keyPressedCount = 2;
    } else if (isKeySequenceActive && keyPressedCount === 2 && keyCode === 9) { // Tab key
      // Disable default behavior of Tab key
      event.preventDefault();

      // Replace the keys with specific content
      var replacementText = '<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;width:auto;"><tbody><tr><td style="font-family:sans-serif;font-size:20px;vertical-align:top;background-color:#E50043;border-radius:0;text-align:center;width:200px;" valign="top" bgcolor="#3498db" align="center"><a href="https://www.rittal.com/nz-en/products/RiMatrix-Micro-Data-Centre" target="_blank" style="width:200px;display:inline-block;color:#ffffff;background-color:#E50043;border:solid 1px #E50043;border-radius:0;box-sizing:border-box;cursor:pointer;text-decoration:none;font-size:20px;font-weight:normal;margin:0;padding:10px 25px;border-color:#E50043;border-left:10px solid #E50043;border-right:10px solid #E50043;text-align:center;">Learn More</a></td></tr></tbody></table>';
      var cursor = cm.getCursor();
      cm.replaceRange(replacementText, { line: cursor.line, ch: cursor.ch - 2 }, { line: cursor.line, ch: cursor.ch + 1 });

      // Move the cursor to the end of the replaced content
      cursor.ch += replacementText.length;
      cm.setCursor(cursor);
			//document.getElementById("previewer").innerHTML =...