How to add background color for all the text come inside curly brackets in reactjs

user_13942764 0
Viewed 380

I am using sunEditor-react to get HTML files into a text editor. I got the HTML value and displayed inside the editor successfully.

The purpose of this to edit the HTML file in the frontend. But when I am getting the HTML template, there are some places I need to highlight and show.

I need to highlight the text inside curly brackets {}. Can any explain me how can I do this using CSS or a function to highlight the values inside {}.

This is my current class.

import { useState } from 'react';
import SunEditor from 'suneditor-react';

import { useLocale } from 'hooks/useLocale/useLocale';
import { Button, Heading, Loader, Typography } from 'ui/atoms';

import 'suneditor/dist/css/suneditor.min.css';

import { useStyles } from './Edit.styles';
import { EditProps } from './Edit.types';
import { EditWarning } from './editWarning/EditWarning';

export const EMAIL_EDIT_WARNING_COOKIE_KEY = 'emailEditWarning';

export const Edit = ({ title, defaultTemplate }: EditProps) => {
 const classes = useStyles();
 const { formatMessage } = useLocale();
 const [htmlData, setHtmlData] = useState(defaultTemplate?.html);

 if (!defaultTemplate) {
   return <Loader className={classes.loader} />;
 }

 function reset() {
   setHtmlData(defaultTemplate?.html);
 } 

 return (
   <>
     <div className={classes.button}>
       <Button type="button" onClick={reset}>
         {formatMessage({ id: 'event.emails.edit.reset' })}
       </Button>
     </div>

     <div className={classes.container}>
       <Heading variant="h4" bold className={classes.title}>
         {formatMessage({ id: 'event.emails.edit.title' })}
       </Heading>
       <Typography variant="h5" className={classes.subtitle}>
         {title}
       </Typography>

       <EditWarning name={EMAIL_EDIT_WARNING_COOKIE_KEY}>
         <div>{formatMessage({ id: 'event.emails.edit.warning_message' })}</div>
         <div>{formatMessage({ id: 'event.emails.edit.warning_note' })}</div>
       </EditWarning>
     </div>
     <SunEditor
       width="100%"
       height="100%"
       autoFocus={true}
       setContents={htmlData}
 
     />
   </>
 ); };

I need to add css to to highlight all the values inside curly brackets {}.

This is the current UI. UI

Here I need to highlight {{FULL_NAME}} and {{{event_name}}}. How can I do this using CSS or any function in react?

Can any one please give a solution for this? I am trying this more than a week to get a solution?

reactjs css javascript
2 Answers

I know that with regular React, adding an Inline style like this style={{ color: "blue" }} to any tag would do the trick. (Note the double brackets are necessary for JSX.)

But I'm not all that familiar with sunEditor. If it lets you use a custom CSS stylesheet, you could try adding an id or className and changing color with !important to try and override the Atom ui framework your using.

user_163289870

If you are receiving the HTML data as a string, you could use the string method replaceAll to replace the curly braces with span elements, and then parse the string to DOM. You could then add styling to span elements in your stylesheet as you wish.

const [htmlData, setHtmlData] = useState(defaultTemplate?.html);

const htmlWithTags = htmlData.replaceAll('{{','<span>').replaceAll('}}','</span>') //Replace curly braces with HTML elements.

const domHTML = new DOMParser().parseFromString(htmlWithTags, "text/xml"); //Parse string to actual DOM.

You can then use the domHTML variable data to render your HTML content.

In your stylesheet:

span{
 color:red;      //Change the color and weight accordingly, or add more customisations as required.
 font-weight:bold;
}
user_128285660
Related