How can I change text color of selected functions or fields in react-ace

Question

I'm trying to use react-case for my editor where I've defined a custom set of "Functions" and 'Fields" to be used in auto-complete. I want to change the color of the function or field as it displays in the Editor, but can't get it to work.

Here is my working component. The auto-complete works to show the function /field ...but when it's selected, the color does not change.

In my index.scss, I have the following classes defined:

.green-background {
  background-color: green !important;
}

.blue-background {
  color: blue !important;
}

Here is my component: How do I get it to show functions in green and my fields in blue??

import React, { useState } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/ext-language_tools';
import './CodeEditor.css';

const CodeEditor = () => {
  const [text, setText] = useState('');

  const functions = ['SUM', 'AVERAGE', 'MAX', 'MIN'];
  const fields = ['Sales', 'Revenue', 'Profit'];

  const getMarkerClass = (word) => {
    if (functions.includes(word)) {
      return 'green-background';
    } else if (fields.includes(word)) {
      return 'blue-background';
    }
    return null;
  };

  const handleTextChange = (newText) => {
    const words = newText.split(/\s+/);
    const lastWord = words[words.length - 1];
    if (fields.includes(lastWord)) {
      setText(newText.slice(0, -lastWord.length) + `{${lastWord}}`);
    } else {
      setText(newText);
    }
  };

  const highlightText = (text) => {
    const words = text.split(/\s+/);
    const markers = words.map((word, index) => {
      const markerClass = getMarkerClass(word);
      if (markerClass) {
        return {
          startRow: 0,
          startCol: index,
          endRow: 0,
          endCol: index + word.length,
          className: markerClass,
          type: 'text'
        };
      }
      return null;
    });
    return markers.filter((marker) => marker !== null);
  };

  const completions = {
    getCompletions: function (editor, session, pos, prefix, callback) {
      if (prefix.length === 0) {
        callback(null, []);
        return;
      }

      const matchingFunctions = functions.filter((func) => func.startsWith(prefix.toUpperCase()));
      const matchingFields = fields.filter((field) => field.startsWith(prefix));

      const customCompletions = [...matchingFunctions, ...matchingFields].map((match) => ({
        caption: match,
        value: match,
        meta: functions.includes(match) ? 'Function' : 'Field'
      }));

      const filteredCompletions = customCompletions.filter((completion) => functions.includes(completion.value) || fields.includes(completion.value));

      callback(null, filteredCompletions);
    }
  };

  const langTools = ace.acequire('ace/ext/language_tools');
  langTools.setCompleters([completions]);

  return (
    <AceEditor
      mode="javascript"
      theme="monokai"
      value={text}
      onChange={handleTextChange}
      style={{ height: '300px', width: '100%' }}
      editorProps={{ $blockScrolling: true }}
      setOptions={{ useWorker: false }}
      highlightActiveLine={true}
      markers={highlightText(text)}
      enableBasicAutocompletion={true}
      enableLiveAutocompletion={true}
    />
  );
};

export default CodeEditor;

How can I change text color of selected functions or fields in react-ace

0 Answers0