JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<textarea id="code-editor" class="fifty"></textarea>
<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 = $("#code-editor");
  var replacements = {
    "abc": "Replacement 1",
    "acd": "Replacement 2"
  };

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

    // Check if Tab key is pressed
    if (keyCode === 9) {
      event.preventDefault();

      // Get the current value of the editor
      var inputValue = codeEditor.val();

      // Split the input value by line breaks
      var lines = inputValue.split("\n");

      // Process each line
      for (var i = 0; i < lines.length; i++) {
        var line = lines[i];

        // Process each replacement key
        for (var key in replacements) {
          if (line.indexOf(key) !== -1) {
            // Replace the key in the line
            var replacedLine = line.replace(key, replacements[key]);
            lines[i] = replacedLine;
            break;
          }
        }
      }

      // Join the lines back into a single string
      var newValue = lines.join("\n");

      // Update the editor value
      codeEditor.val(newValue);
    }
  });
});