JSFiddle - React, Tailwind, and code Playground

by bsorrentino

HTML

<head>
    <!-- integrity removed for simplicity -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.1/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.1/ext-language_tools.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.1/ext-emmet.js"></script>
</head>

<body>
Try typping "hell" here:<br/>
<div id="editor"></div>

</body>

CSS

#editor {
  width: 400px;
  height: 300px;
}

JavaScript

const snippetManager = ace.require("ace/snippets").snippetManager;
const autocomplete = ace.require("ace/autocomplete").Autocomplete

console.log( "autcomplete", autocomplete);

let editor = ace.edit('editor');

editor.setShowPrintMargin(false);
 

editor.session.on('change', function(delta) {
        findSnippet();
});

editor.setTheme('ace/theme/monokai');

//editor.session.setMode('ace/mode/dot');
editor.session.setMode('ace/mode/java');

ace.require("ace/ext/language_tools");

editor.setOptions({
  enableSnippets: true,
  enableBasicAutocompletion: true,
  enableEmmet: true,
  useWorker: false,
  theme: "ace/theme/idle_fingers",
  showPrintMargin: false,
  showFoldWidgets: false
});


const debounceExecStartAutocomplete = debounce( () => editor.execCommand("startAutocomplete")  , 500);

function findSnippet() {
  const found = snippetManager.expandSnippetForSelection(editor, { dryRun: true });
  
  console.log( "found snippet", found );
  
  if( found ) {
  	 debounceExecStartAutocomplete()
  }
}

function insertSnippetIfMatched() {
  //const snippetManager = ace.require("ace/snippets").snippetManager;
  const cursorPosition = editor.getCursorPosition();
  const currentLine = editor.session.getLine(cursorPosition.row);
  const keyword = "snippet_keyword"; // Replace this with the keyword you want to detect

  if (currentLine.includes(keyword)) {
    const snippet = "Your custom snippet here"; // Replace this with your desired snippet
    snippetManager.insertSnippet(editor, snippet);
  }
}

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func(args), timeout);
  };
}
/*
editor.setOptions({
  enableBasicAutocompletion: [{
    getCompletions: (editor, session, pos, prefix, callback) => {
      // note, won't fire if caret is at a word that does not have these letters
      callback(null, [
        {value: 'hello', score: 1, meta: 'some comment'},
        {value: 'world', score: 1,...