Change color of specific words if they appear in the editor

Question

I have a slate text editor. I have a separate component which is divs mapped by an array of predefined words. That section is keywords to use. I want to be able to change the color of words in keywords to use sections to a different color if they exist in the editor.

The way I was thinking about this was I could store the words that I will be writing in the editor in a state which will keep updating if something new is written. And I already have an array of words. I have to somehow find a way to communicate between these two arrays.

How do I approach this?

Code Sandbox

user_16882940 · Answer

I made this method, is not the better one but (if I understand the problem) could be useful.

const isKeyword = (word) => {
    if (value) {
      return value.some(editorObject => {
        return !!editorObject['children'].some(children => 
          children['text'].includes(word))
        })
    }
    return false; 
  }

It will find if the keyword exist in the Editor's data, and you can change the color in your inline css as this:

color: isKeyword(word) ? YOUR_COLOR: 'white'

This is the full App.js File with the modification.

import React, {useMemo, useState,useEffect} from "react"
import './App.css';
import { createEditor ,Node} from "slate"
import { Slate, Editable, withReact } from "slate-react"
import { IconContext } from "react-icons";
 
import { ImUndo,ImRedo } from "react-icons/im";
import {MdFormatListBulleted, MdFormatItalic,MdFormatBold,MdRedo,MdFormatUnderlined} from "react-icons/md"


function App() {
  const initialState = [{type: 'paragraph', children: [{ text: "edit me"}]}]
  const editor = useMemo( () => withReact(createEditor()), [])
  const [value, setValue] = useState(initialState);
  const [editorValue,setEditorValue] = useState();
  const [wordCount,setWordCount] = useState(0);
   const [color,setColor] = useState(false);

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(()=>{
    setEditorValue(value.map(n => Node.string(n)).join('
'));
  },[value]);

  useEffect(() => {
    setWordCount(editorValue && editorValue.trim().split(/\s+/).length);
  },[editorValue]);
  
  console.log(editorValue);
  const wordArray = ['never','forget','to','empty','your','vacuum','bags','never','forget','to','empty','your','vacuum','bags'];

  function keywords(){
    console.log(value.[0].children.[0].text);
    setColor(true);
  }

  useEffect(() => {
     keywords();
  }, [ ])
  const tips = () => {
    return (
      
        Words with emotions in your headlines/subheadline improves SEO. Check this.
      
    )
  }

  const isKeyword = (word) => {
    if (value) {
      return value.some(editorObject => {
        return !!editorObject['children'].some(children => children['text'].includes(word))
      })
    }
    return false; 
  }
  return (
    
          
            
                
                  
                  
                  
                  
                   
                  
                  

                  
                
               
            
            
             setValue(newVal)}>
              
            
            
          
           
               
                 Performance
                
                    
                    
                      Power Words
                      2/6
                    
                    
                    
                  
                  
                      
                        Readability
                      Fairly Complex to React
                      
                      
                  
                  
                  Words Count
                    {wordCount}

                    
                
              
              
                Addons
              
                   
              
              
              
               keywords to use
 
              {wordArray.map((word,index) => (
              
                {word} 
              ))
              }
              
          
  
      
    
  );
}

export default App;

Change color of specific words if they appear in the editor

1 Answers