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

---

🛠️🛠️ [Must have Configurations for Typescript project only] 🛠️🛠️

⏭️ ⏭️ For javascript project, you can skip this section ⏭️ ⏭️

In typescript you will probably get this error while trying to import package

⚠️⚠️⚠️ Could not find a declaration file for module 'reactjs-editor'. ⚠️⚠️⚠️

#### So we have to setup type declaration support for Typescript and fix that error

CLICK TO SETUP TYPE DECLARATION FOR TYPESCRIPT PROJECT

-----------------------------  FIRST STEP: -------------------------------


1. Go to your project 
$ cd <your typescript project root>

2. Create a new [FILE_NAME].d.ts file 
$ touch reacteditor.d.ts  

3. Make change to that file by adding the line below
$ nano reacteditor.d.ts

## Add this line below and save 📝📝

declare module 'reactjs-editor';    //add this line and save

4. Save that file 

----------------------------- SECOND STEP: -------------------------------

1. Now open tsconfig.json file, you can find it in root of react typescript project 🏃🏃🏃 

2. Make change to tsconfig.json file by including path to [FILENAME].d.ts file
$ nano tsconfig.json  

## And just include path to file you created above  ➕➕➕

 "include": [
  "src",
  "./reacteditor.d.ts"  //Add this line and save
  ...
 ] 

👩🏿‍🔧👩🏿‍🔧 After this configuration setup, typescript won't show type error

🎉🎉🎉🎉 Congratulations for successful Setup 🥳🥳🥳

🦄✨🧙🏼‍♀️ Let's create a magic now 🦄✨🧙🏼‍♀️

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>`}
      />

🎉🎉🎉 Easy Peasy 🎉🎉🎉 Check it out

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

🚨🚨🚨 Make sure your htmlContent is wrapped inside main tag

✅✅✅

htmlContent={
<main>
{ *** all your html content here *** }
</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

License

MIT

[e-mail]  ·  GitHub @vivekneupane11  ·