reactjs-editor

ReactJSEditor

React package to highlight text,make text bold,add comment to text.View Demo.

Get Started 👨🏻‍✈️

🛠️🛠️ Installation and Setup 🌱🌱

$ npm i reactjs-editor

🦄✨🧙🏼‍♀️ USAGE 🦄✨🧙🏼‍♀️

Import Package in your project

$ import { Editor } from 'reactjs-editor';

Use Editor component and insert any html content

   <Editor
        htmlContent={`<main> 
          <h1>Welcome to My Website</h1>
          <p>This is a paragraph of text in HTML. It's simple and easy to create.</p>
          <p>HTML stands for HyperText Markup Language. It's the standard markup language for  creating web pages.</p>
          <p>In HTML, you can create different types of elements such as headings, paragraphs, links, lists, and more to structure and format your content.</p>
         </main>`}
      />

🚨🚨🚨 Note: ⚠️⚠️ Its important:

✅✅✅ Make sure your htmlContent is wrapped inside <main> tag

htmlContent={

<main>

{ *** all your html content here must be inside <main> tag *** }

</main>

}

🎉🎉🎉 That's it. 🎉🎉🎉

Additional Props for Customizations

Add your own colors

<Editor
      colors={["black","gold","red"]}
      ....
      />

Make sure to add your class in your css file

/* In your css file */

.black{
    background-color:#000,
    color:#fff,
},
.red{
    background-color:red,
    color:#fff,
}
.gold{
    background-color:gold,
    color:#fff,
}

//add as much as you like

Get Access to Changed HTML Element.

💾 Save user html changes and show them their changes on subsequent visit

import { Editor, useDomValue } from 'reactjs-editor';

...

 const { dom, setDom } = useDomValue();

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const updatedDomValue  = {
    key: dom?.key,
    props: dom?.props,
    ref: dom?.ref,
    type: dom?.type,
  }


  console.log("%j", updatedDomValue );  
  
  // get your changed dom  like this and save it if you like to in your database or some place

Update dom using that " updatedDomValue " values you saved from above

useEffect(()=>{
  function updateDom(updatedDomValue:any){
   setDom(updatedDomValue); //set your dom like this
 
  }
  updateDom(updatedDomValue) // call this function where ever you like

},[])

If you want to customize designs of all other components such as floating button and modals

1. Inspect html element
2. Find className of specific elements
3. Override css present there from your own css files 

 In future update, I will create option to pass all components in a props

Support

✉️ Drop any of your queries/feedback in this gmail.

✉️✉️ Gmail: [e-mail]

License

MIT

[e-mail]  ·  LinkedIn @vivekneupane11  ·  Youtube @vivekneupane11  ·  GitHub @vivekneupane11  ·