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

⏭️ ⏭️ For javascript project. Your setup is successful

🦄✨🧙🏼‍♀️ Go see USAGE section directly

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

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

⬇️ ⬇️ ⬇️ CLICK TO FIX TYPE DECLARATION ERROR

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


1. Create a new file reacteditor.d.ts  in project root directory

2. Add this line below in the file  📝📝

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


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

1. Now open tsconfig.json file and just include path ➕➕➕

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

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

🦄✨🧙🏼‍♀️ 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>`}
      />

🎉🎉🎉 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  ·